doki-theme-picker

  on('ui.render', { component: 'Pane', requestId: PANE }, async ($, e) => {
    const { Box, Text, Button } = $.ui.resolve(e)
    const slug = await read($, highlight)
    const chosen = await read($, current)
    const theme = findTheme(slug) ?? FALLBACK
    const c = theme.colors

    let swatch = null
    if (e.surface === 'terminal') {
      const { Raster } = $.ui.resolve(e)
      const strip = swatchCells(theme, 2)
      swatch = <Raster key="swatch" columns={strip.columns} rows={strip.rows} cells={strip.cells} />
    }

    bodyRows = e.props.scroll.bodyRows
    // One row is kept for a sticky group header, so DARK / LIGHT always shows above the window.
    const { start, visible } = windowAround(theme.slug, bodyRows)
    const top = visible[0]
    const sticky = top && top.kind === 'theme' ? ROWS[HEADER_OF[start]!]! : null

    let slotNumber = -1
    return (
      <Box flexDirection="column" paddingX={1}>
        <Text color={c.accent} bold>
          {sourceLabel(theme)} {theme.name} · {theme.dark ? 'dark' : 'light'}
          {theme.slug === chosen ? ' · current' : ''}
        </Text>
        {swatch}
        <Box key="mock" flexDirection="column" backgroundColor={c.bg} paddingX={1} marginTop={1}>
          <Box flexDirection="row">
            <Text color={c.fg} backgroundColor={c.bg}>
              PS C:\projects&gt;{' '}
            </Text>
            <Text color={c.accent} backgroundColor={c.bg}>
              claude
            </Text>
          </Box>
          <Text color={c.accent} backgroundColor={c.bg}>
            ● Update(src/theme.ts)
          </Text>
          <Text color={c.red} backgroundColor={c.bg}>
            - const theme = 'old'
          </Text>
          <Text color={c.green} backgroundColor={c.bg}>
            + const theme = '{theme.slug}'
          </Text>
          <Text color={c.muted} backgroundColor={c.bg}>
            ✻ Thinking…
          </Text>
        </Box>
        <Text color={c.subtle}>Tab/↑↓ move · Enter/click apply · Esc close</Text>
        <Text> </Text>
        {sticky && sticky.kind === 'header' && (
          <Text color={c.muted} bold>
            {sticky.label}
          </Text>
        )}
        {visible.map(row => {
          if (row.kind !== 'header') slotNumber += 1
          return row.kind === 'header' ? (
            <Text color={c.muted} bold>
              {row.label}
            </Text>
          ) : (
            <Box key={`r-${slotKey(slotNumber)}`} flexDirection="row" gap={1}>
              <Text color={row.theme.colors.accent}>██</Text>
              <Button
                key={slotKey(slotNumber)}
                label={`${row.theme.slug === chosen ? '●' : ' '}  ${row.theme.name}`}
                plain
                autoFocus={row.theme.slug === theme.slug ? true : undefined}
                onPress={async press => {
                  // Enter presses the slot the ring is on: it applies the theme the header names (the highlight),
                  // because during a burst the row under the ring can be stale. A click raises only ui.press, for the
                  // slot clicked, with no ui.focus (observed 2026-10-06): a press off the ring is a click on this row.
                  const clicked = slotOfKey(press.element) !== ringSlot
                  const named = clicked ? row.theme : (findTheme(await read($, highlight)) ?? row.theme)
                  await apply($, named)
                  await $.ui.close({ id: PANE })
                }}
              />
            </Box>
          )
        })}
      </Box>
    )
  })