hanzo.ai/components/benchmarks/library.tsx

'use client'

import { Fragment, useCallback, useEffect, useMemo, useState, type ReactNode } from 'react'
import { Search, X } from '@hanzogui/lucide-icons-2'
import { Checkbox, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, Input, Text, View, XStack, YStack } from '@hanzo/ui'
import { phrase } from '@hanzo/i18n'
import { useI18n } from '@hanzo/i18n/react'
import { PRODUCTS } from '@/lib/products'
import type { Entry, Result } from '@/lib/results'
import { Act, Bar, DIM, Exports, FIGURES, INK, LINE, MONO, Mark, OURS, SOFT, THEM, TRACK, useParam } from './controls'
import { Inline } from './parts'

/**
 * Every benchmark and every run on one shelf: the ledger lib/results builds,
 * searched, faceted, sorted, compared and exported in the browser. The section
 * nav and the command palette that jump to any of it live here too.
 *
 * The view is the URL: the search, each facet, the order and the rows picked to
 * compare, so a copied link is a saved view. A facet counts what the search and
 * every OTHER facet leave, the way a reader expects a count to read.
 */

/* ---------------- many values per URL key ---------------- */

/**
 * Lists kept in the URL as repeated keys (`?by=Vendor&by=Board`), so a value may
 * hold any character a label does. Read once on mount, written on every change.
 */
function useLists(keys: readonly string[]): [Record<string, string[]>, (key: string, v: string[]) => void] {
  const [lists, setLists] = useState<Record<string, string[]>>(() => Object.fromEntries(keys.map((k) => [k, []])))
  useEffect(() => {
    const q = new URLSearchParams(window.location.search)
    setLists(Object.fromEntries(keys.map((k) => [k, q.getAll(k)])))
    // Read once, on mount: the URL is the starting view, the controls own it after.
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [])
  const set = useCallback((key: string, v: string[]) => {
    setLists((s) => ({ ...s, [key]: v }))
    const u = new URL(window.location.href)
    u.searchParams.delete(key)
    for (const x of v) u.searchParams.append(key, x)
    window.history.replaceState(window.history.state, '', u.toString())
  }, [])
  return [lists, set]
}

/* ---------------- the facets ---------------- */

const STATE: Record<Result['state'], string> = { live: phrase('Live'), frozen: phrase('Frozen'), superseded: phrase('Superseded') }
const STANDING: Record<Result['standing'], string> = { win: phrase('Win'), level: phrase('Level'), loss: phrase('Loss'), unscored: phrase('Unscored') }
const month = (iso: string | null) => (iso ? new Date(`${iso}T00:00:00Z`).toLocaleDateString('en-US', { month: 'short', year: 'numeric', timeZone: 'UTC' }) : phrase('Undated'))

type Facet = { key: string; label: string; of: (r: Result) => string; order?: (a: string, b: string) => number; show?: (v: string) => string }
const FACETS: Facet[] = [
  { key: 'product', label: phrase('Product'), of: (r) => r.product, order: (a, b) => PRODUCTS.indexOf(a as Result['product']) - PRODUCTS.indexOf(b as Result['product']) },
  { key: 'category', label: phrase('Category'), of: (r) => r.category },
  { key: 'measure', label: phrase('Metric'), of: (r) => r.metric },
  { key: 'by', label: phrase('Measured by'), of: (r) => r.by },
  {
    key: 'month',
    label: phrase('Date'),
    of: (r) => (r.date ? r.date.slice(0, 7) : 'undated'),
    order: (a, b) => (a === 'undated' ? 1 : b === 'undated' ? -1 : b.localeCompare(a)),
    show: (v) => (v === 'undated' ? 'Undated' : month(`${v}-01`)),
  },
  { key: 'state', label: phrase('Status'), of: (r) => r.state, order: (a, b) => Object.keys(STATE).indexOf(a) - Object.keys(STATE).indexOf(b), show: (v) => STATE[v as Result['state']] ?? v },
  { key: 'result', label: phrase('Result'), of: (r) => r.standing, order: (a, b) => Object.keys(STANDING).indexOf(a) - Object.keys(STANDING).indexOf(b), show: (v) => STANDING[v as Result['standing']] ?? v },
]
/** The library's list keys in the URL: one per facet, and the rows picked to compare. */
const KEYS = [...FACETS.map((f) => f.key), 'pick'] as const
/** A facet with more values than this shows the commonest and folds the rest. */
const FOLD = 8

/** Views worth a name, each nothing but a query: the same as a copied link. */
const VIEWS = [
  { name: phrase('Live results'), query: '?state=live' },
  { name: phrase('Kai, every revision'), query: '?product=Kai&category=Decision%20harness&measure=Accuracy&order=name' },
  { name: phrase('Superseded runs'), query: '?state=superseded' },
  { name: phrase('Zen 6 and the engine'), query: '?product=Zen%206' },
  { name: phrase('Not measured by Hanzo'), query: '?by=Vendor&by=Board' },
]

/* ---------------- search ---------------- */

const tokens = (q: string) => q.toLowerCase().split(/\s+/).filter(Boolean)
const hay = (r: Result) => `${r.name} ${r.subject} ${r.against ?? ''} ${r.metric} ${r.category} ${r.product} ${r.by} ${r.when} ${STATE[r.state]} ${STANDING[r.standing]}`.toLowerCase()
const escape = (s: string) => s.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')

/** The text with every search term marked. */
function Marked({ text, terms }: { text: string; terms: string[] }) {
  if (!terms.length) return <>{text}</>
  const parts = text.split(new RegExp(`(${terms.map(escape).join('|')})`, 'gi'))
  return (
    <>
      {parts.map((p, i) =>
        i % 2 ? (
          <Text key={i} render="mark" bg="var(--border-strong)" color={INK} rounded={2}>
            {p}
          </Text>
        ) : (
          <Fragment key={i}>{p}</Fragment>
        ),
      )}
    </>
  )
}

/* ---------------- ordering ---------------- */

type Order = 'date' | 'lead' | 'name' | 'value'
const lead = (r: Result) => (r.value == null || r.base == null || !r.better ? -Infinity : r.better === 'high' ? r.value - r.base : r.base - r.value)
const ORDERS: Record<Order, (a: Result, b: Result) => number> = {
  date: (a, b) => (b.date ?? '').localeCompare(a.date ?? '') || a.name.localeCompare(b.name),
  lead: (a, b) => lead(b) - lead(a),
  name: (a, b) => a.name.localeCompare(b.name) || (b.date ?? '').localeCompare(a.date ?? ''),
  value: (a, b) => (b.value ?? -Infinity) - (a.value ?? -Infinity),
}

/* ---------------- the pieces ---------------- */

function Chip({ on, onPress, children, count, label, end }: { on: boolean; onPress: () => void; children: ReactNode; count?: number; label?: string; end?: ReactNode }) {
  return (
    <XStack
      render={<button type="button" aria-pressed={on} aria-label={label} onClick={onPress} />}
      px={10}
      minH={30}
      gap={6}
      items="center"
      rounded={999}
      borderWidth={1}
      borderColor={on ? 'var(--text-secondary)' : LINE}
      bg={on ? 'var(--edge)' : 'transparent'}
      cursor="pointer"
      transition="quickest"
      hoverStyle={{ borderColor: 'var(--muted-foreground)' }}
      focusVisibleStyle={{ outlineColor: INK, outlineWidth: 2, outlineStyle: 'solid' }}
    >
      <Text fontSize="$2" color={on ? INK : SOFT}>
        {children}
      </Text>
      {count != null ? (
        <Text fontSize="$1" color={DIM} fontFamily={MONO} $platform-web={FIGURES}>
          {count}
        </Text>
      ) : null}
      {end}
    </XStack>
  )
}

function Standing({ s }: { s: Result['standing'] }) {
  const { t } = useI18n()
  return <Mark s={s} word={t(STANDING[s])} />
}

function FacetGroup({ f, values, picked, onChange }: { f: Facet; values: [string, number][]; picked: string[]; onChange: (v: string[]) => void }) {
  const { t } = useI18n()
  const [all, setAll] = useState(false)
  const shown = all ? values : values.slice(0, FOLD)
  const toggle = (v: string) => onChange(picked.includes(v) ? picked.filter((x) => x !== v) : [...picked, v])
  return (
    <YStack role="group" aria-label={t(f.label)} gap={8} py={10} borderBottomWidth={1} borderColor={TRACK}>
      <Text fontSize="$1" color={DIM} letterSpacing={0.6} textTransform="uppercase">
        {t(f.label)}
      </Text>
      <XStack flexWrap="wrap" gap={6}>
        {shown.map(([v, n]) => (
          <Chip key={v} on={picked.includes(v)} onPress={() => toggle(v)} count={n}>
            {t(f.show ? f.show(v) : v)}
          </Chip>
        ))}
        {values.length > FOLD ? (
          <Chip on={false} onPress={() => setAll(!all)}>
            {all ? t('Fewer') : t('{n} more', { n: values.length - FOLD })}
          </Chip>
        ) : null}
      </XStack>
    </YStack>
  )
}

/** One result: its benchmark and subject, the figure beside its baseline, how it stands, and when. */
function Row({ r, entry, terms, picked, onPick }: { r: Result; entry: Entry | undefined; terms: string[]; picked: boolean; onPick: (on: boolean) => void }) {
  const { t } = useI18n()
  return (
    <XStack
      role="listitem"
      data-id={r.id}
      flexWrap="wrap"
      items="flex-start"
      gap={10}
      rowGap={6}
      py={12}
      px={8}
      borderBottomWidth={1}
      borderColor={TRACK}
      bg={picked ? 'var(--edge)' : 'transparent'}
      transition="quickest"
      hoverStyle={{ bg: 'var(--edge)' }}
    >
      <View pt={2} width={24}>
        <Checkbox checked={picked} onCheckedChange={(v) => onPick(v === true)} aria-label={t('Compare {name}, {subject}', { name: r.name, subject: r.subject })} />
      </View>
      <YStack flex={1} minW={200} flexBasis="60%" gap={2} $lg={{ flexBasis: '34%' }}>
        <Text fontSize="$3" color={INK}>
          {entry ? (
            <Inline href={entry.href}>
              <Marked text={r.name} terms={terms} />
            </Inline>
          ) : (
            <Marked text={r.name} terms={terms} />
          )}
        </Text>
        <Text fontSize="$2" color={SOFT}>
          <Marked text={r.subject} terms={terms} />
          {r.against ? (
            <Text color={DIM}>
              {' '}
              {t('vs {subject}', { subject: <Marked text={r.against} terms={terms} /> })}
            </Text>
          ) : null}
        </Text>
        <Text fontSize="$1" color={DIM}>
          <Marked text={`${t(r.product)} · ${t(r.category)} · ${t(r.metric)}`} terms={terms} />
        </Text>
      </YStack>
      <YStack minW={104} gap={2} $lg={{ flexBasis: '16%' }}>
        <Text fontFamily={MONO} fontSize="$3" color={INK} $platform-web={FIGURES}>
          {r.shown}
        </Text>
        <Text fontFamily={MONO} fontSize="$1" color={DIM} $platform-web={FIGURES}>
          {r.baseShown != null ? t('baseline {value}', { value: r.baseShown }) : t('no baseline')}
        </Text>
      </YStack>
      <YStack minW={72} $lg={{ flexBasis: '8%' }}>
        <Standing s={r.standing} />
      </YStack>
      <YStack minW={120} gap={2} $lg={{ flexBasis: '18%' }}>
        <Text fontSize="$2" color={SOFT} $platform-web={FIGURES}>
          <Marked text={r.when} terms={terms} />
        </Text>
        <Text fontSize="$1" color={DIM}>
          {t(STATE[r.state])} · {r.by === 'Hanzo' ? t('Hanzo-measured') : r.by === 'Vendor' ? t('vendor-reported') : t('sealed board')}
        </Text>
      </YStack>
    </XStack>
  )
}

/* ---------------- compare ---------------- */

/** Rows compare when they are one benchmark and one metric: the same question, asked of different subjects or revisions. */
const compatible = (rs: Result[]) => rs.length > 1 && rs.every((r) => r.entry === rs[0].entry && r.metric === rs[0].metric)

function Compare({ rows, onDrop, onClear }: { rows: Result[]; onDrop: (id: string) => void; onClear: () => void }) {
  const { t } = useI18n()
  const [open, setOpen] = useState(false)
  const ok = compatible(rows)
  const nums = rows.flatMap((r) => [r.value, r.base]).filter((v): v is number => v != null)
  const top = nums.length ? Math.max(...nums, nums.every((v) => v <= 1) ? 1 : 0) : 1
  return (
    <YStack
      role="region"
      aria-label={t('Compare')}
      position="sticky"
      b={0}
      z={5}
      mt={16}
      px={12}
      py={10}
      gap={10}
      rounded={10}
      borderWidth={1}
      borderColor="var(--border-strong)"
      bg="var(--card)"
      $platform-web={{ boxShadow: '0 -12px 32px var(--background)' }}
    >
      <XStack items="center" gap={8} flexWrap="wrap">
        <Text fontSize="$2" color={INK}>
          {t('{n} picked', { n: rows.length })}
        </Text>
        {rows.map((r) => (
          <Chip key={r.id} on onPress={() => onDrop(r.id)} label={t('Remove {subject}', { subject: r.subject })} end={<X size={12} color={SOFT} shrink={0} aria-hidden />}>
            {r.subject}
          </Chip>
        ))}
        <XStack ml="auto" gap={6}>
          <Act onClick={() => setOpen(!open)}>{open ? t('Hide comparison') : t('Compare')}</Act>
          <Act onClick={onClear}>{t('Clear')}</Act>
        </XStack>
      </XStack>
      {open ? (
        ok ? (
          <YStack gap={8} pb={4}>
            <Text fontSize="$2" color={SOFT}>
              {rows[0].name} · {t(rows[0].metric)}
              {rows[0].better ? ` · ${rows[0].better === 'high' ? t('higher is better') : t('lower is better')}` : ''}
            </Text>
            {rows.map((r) => (
              <YStack key={r.id} gap={4}>
                <XStack items="baseline" gap={8} flexWrap="wrap">
                  <Text fontSize="$2" color={INK}>
                    {r.subject}
                  </Text>
                  <Text fontSize="$1" color={DIM}>
                    {r.when} · {t(STATE[r.state])}
                  </Text>
                </XStack>
                {r.value != null ? (
                  <XStack items="center" gap={8}>
                    <View flex={1} height={8} rounded={2} bg={TRACK} overflow="hidden">
                      <View width={`${Math.min(100, (r.value / top) * 100)}%`} height="100%" bg={OURS} transition="quick" />
                    </View>
                    <Text minW={96} text="right" fontFamily={MONO} fontSize="$2" color={OURS} $platform-web={FIGURES}>
                      {r.shown}
                    </Text>
                  </XStack>
                ) : (
                  <Text fontFamily={MONO} fontSize="$2" color={INK}>
                    {r.shown}
                  </Text>
                )}
                {r.base != null ? (
                  <XStack items="center" gap={8}>
                    <View flex={1} height={6} rounded={2} bg={TRACK} overflow="hidden">
                      <View width={`${Math.min(100, (r.base / top) * 100)}%`} height="100%" bg={THEM} transition="quick" />
                    </View>
                    <Text minW={96} text="right" fontFamily={MONO} fontSize="$1" color={SOFT} $platform-web={FIGURES}>
                      {r.against}: {r.baseShown}
                    </Text>
                  </XStack>
                ) : null}
              </YStack>
            ))}
          </YStack>
        ) : (
          <Text render="p" display="block" fontSize="$2" color={SOFT}>
            {rows.length < 2
              ? t('Pick one more row of the same benchmark and metric to compare.')
              : t('A comparison reads rows of one benchmark and one metric. These are {rows}.', {
                  rows: [...new Set(rows.map((r) => `${r.name} · ${t(r.metric)}`))].join('; '),
                })}
          </Text>
        )
      ) : null}
    </YStack>
  )
}

/* ---------------- the library ---------------- */

/** The shelf: every result, searchable, faceted, ordered, compared and exported. */
export function Library({ results, entries }: { results: Result[]; entries: Entry[] }) {
  const { t } = useI18n()
  const bySlug = useMemo(() => new Map(entries.map((e) => [e.slug, e])), [entries])
  const [q, setQ] = useParam<string>('q', '')
  const [order, setOrder] = useParam<Order>('order', 'date', ['date', 'lead', 'name', 'value'])
  const [lists, setList] = useLists(KEYS)
  const [filters, setFilters] = useState(false)
  const [limit, setLimit] = useState(24)
  const terms = tokens(q)
  const picks = lists.pick

  const shown = useMemo(() => {
    const words = tokens(q)
    return results
      .filter((r) => words.every((x) => hay(r).includes(x)) && FACETS.every((f) => !lists[f.key].length || lists[f.key].includes(f.of(r))))
      .sort(ORDERS[order])
  }, [results, q, order, lists])
  const counts = useMemo(() => {
    const words = tokens(q)
    return FACETS.map((f) => {
      const c = new Map<string, number>()
      for (const r of results) {
        const other = words.every((x) => hay(r).includes(x)) && FACETS.every((g) => g === f || !lists[g.key].length || lists[g.key].includes(g.of(r)))
        if (other) c.set(f.of(r), (c.get(f.of(r)) ?? 0) + 1)
      }
      // a picked value stays on screen at zero, so it can be unpicked
      for (const v of lists[f.key]) if (!c.has(v)) c.set(v, 0)
      return [...c.entries()].sort((a, b) => (f.order ? f.order(a[0], b[0]) : b[1] - a[1] || a[0].localeCompare(b[0])))
    })
  }, [results, q, lists])
  const active = FACETS.reduce((n, f) => n + lists[f.key].length, 0) + (q ? 1 : 0)
  const picked = picks.map((id) => results.find((r) => r.id === id)).filter((r): r is Result => Boolean(r))
  const pick = (id: string, on: boolean) => setList('pick', on ? [...new Set([...picks, id])] : picks.filter((p) => p !== id))
  const clear = () => {
    setQ('')
    for (const f of FACETS) setList(f.key, [])
  }
  const rows = () =>
    shown.map((r) => ({
      benchmark: r.name, product: r.product, category: r.category, metric: r.metric, subject: r.subject, against: r.against,
      value: r.value, baseline: r.base, shown: r.shown, baseline_shown: r.baseShown, result: r.standing, measured_by: r.by,
      date: r.date, status: r.state, url: `https://hanzo.ai${bySlug.get(r.entry)?.href ?? '/benchmarks'}`,
    }))

  return (
    <YStack>
      <Bar>
        <XStack items="center" gap={8} flex={1} minW={240}>
          <Input
            type="search"
            aria-label={t('Search every benchmark and run')}
            placeholder={t('Search benchmarks, models, revisions, metrics, dates')}
            value={q}
            onChange={(e) => setQ(e.target.value)}
            flex={1}
            minW={0}
          />
        </XStack>
        <XStack role="group" aria-label={t('Order')} items="center" gap={6} flexWrap="wrap" maxW="100%">
          <Text fontSize="$1" color={DIM} letterSpacing={0.6} textTransform="uppercase" mr={4}>
            {t('Order')}
          </Text>
          {(
            [
              ['date', phrase('Newest')],
              ['lead', phrase('Largest lead')],
              ['name', phrase('Benchmark')],
              ['value', phrase('Value')],
            ] as [Order, string][]
          ).map(([id, name]) => (
            <Chip key={id} on={order === id} onPress={() => setOrder(id)}>
              {t(name)}
            </Chip>
          ))}
        </XStack>
        <Exports name="hanzo-benchmarks" rows={rows} />
      </Bar>

      <XStack role="group" aria-label={t('Saved views')} flexWrap="wrap" gap={6} items="center" mb={8} maxW="100%">
        <Text fontSize="$1" color={DIM} letterSpacing={0.6} textTransform="uppercase" mr={4}>
          {t('Views')}
        </Text>
        {VIEWS.map((v) => (
          <XStack
            key={v.name}
            render={<a href={`${v.query}#all`} />}
            px={10}
            minH={30}
            items="center"
            rounded={999}
            borderWidth={1}
            borderColor={LINE}
            transition="quickest"
            hoverStyle={{ borderColor: 'var(--muted-foreground)' }}
            focusVisibleStyle={{ outlineColor: INK, outlineWidth: 2, outlineStyle: 'solid' }}
          >
            <Text fontSize="$2" color={SOFT}>
              {t(v.name)}
            </Text>
          </XStack>
        ))}
      </XStack>

      <XStack flexWrap="wrap" gap={24} items="flex-start">
        <YStack flexBasis="100%" $lg={{ flexBasis: 260, shrink: 0 }}>
          <XStack $lg={{ display: 'none' }}>
            <Act onClick={() => setFilters(!filters)}>{`${filters ? t('Hide filters') : t('Filters')}${active ? ` · ${t('{n} on', { n: active })}` : ''}`}</Act>
          </XStack>
          <YStack id="library-filters" display={filters ? 'flex' : 'none'} $lg={{ display: 'flex' }}>
            {FACETS.map((f, i) => (
              <FacetGroup key={f.key} f={f} values={counts[i]} picked={lists[f.key]} onChange={(v) => setList(f.key, v)} />
            ))}
          </YStack>
          {active ? (
            <XStack pt={10}>
              <Act onClick={clear}>{t('Clear every filter')}</Act>
            </XStack>
          ) : null}
        </YStack>

        <YStack flex={1} minW={0} flexBasis={480}>
          <Text render="p" display="block" fontSize="$2" color={SOFT} mb={6} aria-live="polite">
            {t('{shown} of {total} results, {benchmarks} benchmarks', {
              shown: (
                <Text fontFamily={MONO} color={INK} $platform-web={FIGURES}>
                  {shown.length}
                </Text>
              ),
              total: results.length,
              benchmarks: new Set(shown.map((r) => r.entry)).size,
            })}
          </Text>
          <YStack role="list" aria-label={t('Results')}>
            {shown.slice(0, limit).map((r) => (
              <Row key={r.id} r={r} entry={bySlug.get(r.entry)} terms={terms} picked={picks.includes(r.id)} onPick={(on) => pick(r.id, on)} />
            ))}
          </YStack>
          {shown.length > limit ? (
            <XStack pt={12}>
              <Act onClick={() => setLimit(shown.length)}>{t('Show all {n}', { n: shown.length })}</Act>
            </XStack>
          ) : null}
          {!shown.length ? (
            <Text render="p" display="block" py={24} fontSize="$2" color={SOFT}>
              {t('Nothing matches that. {link}.', { link: <Inline href="?#all">{t('Clear the view')}</Inline> })}
            </Text>
          ) : null}
        </YStack>
      </XStack>

      {picked.length ? <Compare rows={picked} onDrop={(id) => pick(id, false)} onClear={() => setList('pick', [])} /> : null}
    </YStack>
  )
}

/* ---------------- the section nav and the palette ---------------- */

type Section = { label: string; href: string }

/**
 * Jump to any benchmark or section: / anywhere outside a field, or the nav's
 * button. ⌘K stays the site's own search, which the header owns on every page.
 */
function Palette({ entries, sections, open, setOpen }: { entries: Entry[]; sections: Section[]; open: boolean; setOpen: (v: boolean) => void }) {
  const { t } = useI18n()
  useEffect(() => {
    const on = (e: KeyboardEvent) => {
      const typing = e.target instanceof HTMLElement && (e.target.isContentEditable || /^(INPUT|TEXTAREA|SELECT)$/.test(e.target.tagName))
      if (e.key === '/' && !typing && !open && !e.metaKey && !e.ctrlKey && !e.altKey) {
        e.preventDefault()
        setOpen(true)
      }
    }
    window.addEventListener('keydown', on)
    return () => window.removeEventListener('keydown', on)
  }, [open, setOpen])
  const go = (href: string) => {
    setOpen(false)
    if (href.startsWith('#')) {
      document.getElementById(href.slice(1))?.scrollIntoView({ block: 'start' })
      window.history.replaceState(window.history.state, '', href)
    } else window.location.assign(href)
  }
  const products = PRODUCTS.filter((p) => entries.some((e) => e.product === p))
  return (
    <CommandDialog open={open} onOpenChange={setOpen} title={t('Jump to a benchmark')} description={t('Every benchmark page and every section of this one')} loop>
      <CommandInput placeholder={t('Type a benchmark, a product or a section')} aria-label={t('Jump to a benchmark')} />
      <CommandList>
        <CommandEmpty>{t('No benchmark by that name.')}</CommandEmpty>
        <CommandGroup heading={t('Sections')}>
          {sections.map((s) => (
            <CommandItem key={s.href} value={`section ${s.label}`} keywords={['section']} onSelect={() => go(s.href)}>
              {t(s.label)}
            </CommandItem>
          ))}
        </CommandGroup>
        {products.map((p) => (
          <CommandGroup key={p} heading={t(p)}>
            {entries
              .filter((e) => e.product === p)
              .map((e) => (
                <CommandItem key={e.slug} value={`${e.name} ${e.slug}`} keywords={[e.product, e.category]} onSelect={() => go(e.href)}>
                  {e.name}
                </CommandItem>
              ))}
          </CommandGroup>
        ))}
      </CommandList>
    </CommandDialog>
  )
}

/**
 * The story's chapters as one row that stays under the site header, the one in
 * view marked, and the palette's handle at its end.
 */
export function Sections({ items, entries }: { items: Section[]; entries: Entry[] }) {
  const { t } = useI18n()
  const [here, setHere] = useState<string | null>(null)
  const [open, setOpen] = useState(false)
  useEffect(() => {
    const els = items.map((i) => document.getElementById(i.href.slice(1))).filter((e): e is HTMLElement => Boolean(e))
    if (!els.length || typeof IntersectionObserver === 'undefined') return
    const io = new IntersectionObserver(
      (seen) => {
        const top = seen.filter((s) => s.isIntersecting).sort((a, b) => a.boundingClientRect.top - b.boundingClientRect.top)[0]
        if (top) setHere(`#${top.target.id}`)
      },
      { rootMargin: '-20% 0px -70% 0px' },
    )
    els.forEach((e) => io.observe(e))
    return () => io.disconnect()
  }, [items])
  return (
    <>
      <XStack
        render="nav"
        aria-label={t('Benchmark chapters')}
        position="sticky"
        t="var(--header-height, 4rem)"
        z={4}
        mx={-24}
        px={24}
        py={10}
        gap={6}
        items="center"
        bg="var(--background)"
        borderBottomWidth={1}
        borderColor={LINE}
        $platform-web={{ overflowX: 'auto', scrollbarWidth: 'none' }}
      >
        {items.map((it) => {
          const on = here === it.href
          return (
            <XStack
              key={it.href}
              render={<a href={it.href} aria-current={on ? 'location' : undefined} />}
              px={10}
              minH={30}
              shrink={0}
              items="center"
              rounded={999}
              bg={on ? 'var(--edge)' : 'transparent'}
              borderWidth={1}
              borderColor={on ? 'var(--muted-foreground)' : 'transparent'}
              transition="quickest"
              hoverStyle={{ bg: 'var(--edge)' }}
              focusVisibleStyle={{ outlineColor: INK, outlineWidth: 2, outlineStyle: 'solid' }}
            >
              <Text fontSize="$2" color={on ? INK : SOFT} whiteSpace="nowrap">
                {t(it.label)}
              </Text>
            </XStack>
          )
        })}
        <XStack
          render={<button type="button" aria-haspopup="dialog" aria-keyshortcuts="/" onClick={() => setOpen(true)} />}
          ml="auto"
          shrink={0}
          px={10}
          minH={30}
          gap={8}
          items="center"
          rounded={8}
          borderWidth={1}
          borderColor={LINE}
          bg="transparent"
          cursor="pointer"
          transition="quickest"
          hoverStyle={{ borderColor: 'var(--muted-foreground)' }}
          focusVisibleStyle={{ outlineColor: INK, outlineWidth: 2, outlineStyle: 'solid' }}
        >
          <Search size={14} color={SOFT} shrink={0} aria-hidden />
          <Text fontSize="$2" color={SOFT} whiteSpace="nowrap">
            {t('Jump to a benchmark')}
          </Text>
          <Text fontSize="$1" color={DIM} fontFamily={MONO} px={5} rounded={4} borderWidth={1} borderColor={LINE}>
            /
          </Text>
        </XStack>
      </XStack>
      <Palette entries={entries} sections={items} open={open} setOpen={setOpen} />
    </>
  )
}