theme-studio

  on('ui.render', { component: 'Pane', requestId: PANE }, async ($, e) => {
    const els = $.ui.resolve(e)
    const { Box, Text, Button } = els
    // Mobile draws no fields: collections become buttons and the mixer is hidden.
    const Input = 'Input' in els ? els.Input : undefined
    const Select = 'Select' in els ? els.Select : undefined
    // The color picker needs a Client region: the terminal and the desktop app.
    const Client = 'Client' in els ? els.Client : undefined

    const pal = await read($, active)
    const shown = await read($, group)
    const search = await read($, query)
    const mixer = await read($, custom)
    const mine = await read($, saved)
    const style = await read($, messageStyle)
    const isChrome = await read($, themeChrome)
    const mode = await read($, base)
    const canvas = (await read($, resolvedBase)) as Base
    const bg = await read($, bgOverride)
    const said = await read($, notice)
    const ui = lookOf(pal ?? DEFAULT_CUSTOM, canvas, bg)

    const results = search ? searchPresets(search, mine, 40) : inGroup(shown, mine)
    const swatch = (one: Palette) => (
      <Text>
        <Text color={one.accent}>██</Text>
        <Text color={one.secondary}>██</Text>
        <Text color={one.highlight}>██</Text>
        <Text color={one.text}>██</Text>
        <Text color={lookOf(one, canvas, bg).replyBg}>██</Text>
      </Text>
    )
    const heading = (label: string) => (
      <Text bold color={ui.accent}>
        {label}
      </Text>
    )

    return (
      <Box flexDirection="column" gap={1}>
        <Box flexDirection="column">
          {heading('🎨 THEME STUDIO')}
          <Box gap={1}>
            <Text color={ui.text}>Active:</Text>
            {pal ? swatch(pal) : null}
            <Text bold color={ui.secondary}>
              {pal ? `${pal.name} · ${pal.group}` : "Claude Code's own look"}
            </Text>
          </Box>
        </Box>

        <Box flexDirection="column">
          {Input ? (
            <Input
              key="search"
              label="Search"
              value={search}
              placeholder={`${PRESETS.length} themes: try "hockey", "neon", "gryffindor"`}
              submitLabel="search"
              onInput={value => void update($, query, () => value)}
              onSubmit={value => void update($, query, () => value)}
            />
          ) : null}
          {search ? (
            <Box gap={1}>
              <Text color={ui.muted}>{`${results.length === 40 ? '40+' : results.length} match${results.length === 1 ? '' : 'es'}`}</Text>
              <Button key="clear-search" label="Clear" plain dimColor onPress={() => update($, query, () => '')} />
            </Box>
          ) : Select ? (
            <Select
              key="group"
              label="Collection"
              value={shown}
              options={GROUPS.map(g => ({ value: g, label: g === MINE ? `${g} (${mine.length})` : g }))}
              onSelect={value => update($, group, () => value)}
            />
          ) : (
            <Box flexWrap="wrap" gap={1}>
              {GROUPS.map(g => (
                <Button key={`g-${slug(g)}`} label={g} dimColor={g !== shown} onPress={() => update($, group, () => g)} />
              ))}
            </Box>
          )}
          {results.length === 0 ? (
            <Text color={ui.muted}>{search ? 'No theme matches that.' : 'No saved themes yet. Mix one below and press Enter on "Save as".'}</Text>
          ) : null}
          {results.map(one => (
            <Box key={`row-${one.id}`} gap={1}>
              {swatch(one)}
              <Button
                key={`apply-${one.id}`}
                label={search ? `${one.name} · ${one.group}` : one.name}
                variant={pal?.id === one.id ? 'primary' : undefined}
                onPress={() => apply($, one)}
              />
              {pal?.id === one.id ? <Text color={ui.highlight}>◆ on</Text> : null}
            </Box>
          ))}
        </Box>

        {Input ? (
          <Box flexDirection="column">
            {heading('MIX YOUR OWN')}
            {Client ? (
              <Client
                key={MIXER}
                module="./picker.tsx"
                width={Math.min(48, Math.max(12, e.props.bodyColumns - 2))}
                props={{
                  colors: {
                    accent: mixer.accent,
                    secondary: mixer.secondary,
                    highlight: mixer.highlight,
                    text: mixer.text,
                    background: mixer.background ?? null,
                  },
                  autoBackground: lookOf(mixer, canvas).replyBg,
                }}
              />
            ) : null}
            {Client ? <Text color={ui.muted}>Or type exact hex codes:</Text> : null}
            {SLOTS.map(({ slot, label }) => (
              <Box key={`slot-${slot}`} gap={1}>
                <Text color={mixer[slot] ?? lookOf(mixer, canvas).replyBg}>██</Text>
                <Input
                  key={`hex-${slot}`}
                  label={label}
                  value={mixer[slot] ?? ''}
                  placeholder={slot === 'background' ? 'auto (tinted from the accent)' : '#ff2bd6'}
                  submitLabel="set"
                  onSubmit={async value => {
                    if (slot === 'background' && value.trim() === '') {
                      const next = await update($, custom, c => ({ ...c, background: undefined }))
                      await persist($, 'custom', next)
                      await update($, notice, () => 'Mixer background back to auto')
                      return
                    }
                    const hex = normalizeHex(value)
                    if (!hex) {
                      await update($, notice, () => `"${value}" isn't a hex color. Try #ff2bd6 or f0f.`)
                      return
                    }
                    const next = await update($, custom, c => ({ ...c, [slot]: hex }))
                    await persist($, 'custom', next)
                    await update($, notice, () => `${slot} set to ${hex}`)
                  }}
                />
              </Box>
            ))}
            <Box gap={1} flexWrap="wrap">
              {swatch(mixer)}
              <Button
                key="apply-custom"
                label="Apply custom"
                variant="primary"
                onPress={async () => apply($, { ...(await read($, custom)), id: 'custom', name: 'Custom', group: MINE })}
              />
              <Button
                key="random-theme"
                label={`🎲 Random theme (${PRESETS.length})`}