{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "chart-09",
  "title": "Uptime bar",
  "description": "One bar per day for a service, up, degraded, down or without data, with its uptime, a readout that glides along the days on hover or the arrow keys, and Enter to keep the details of a day open; the bars thin out from ninety days to thirty as the piece narrows.",
  "dependencies": [],
  "registryDependencies": [
    "https://ui.ndekocode.dev/r/badge.json",
    "https://ui.ndekocode.dev/r/chat-motion.json",
    "https://ui.ndekocode.dev/r/demonstration.json",
    "https://ui.ndekocode.dev/r/icons.json",
    "https://ui.ndekocode.dev/r/live-region.json",
    "https://ui.ndekocode.dev/r/theme.json",
    "https://ui.ndekocode.dev/r/use-autoplay.json",
    "https://ui.ndekocode.dev/r/use-kept-height.json",
    "https://ui.ndekocode.dev/r/utils.json"
  ],
  "files": [
    {
      "path": "registry/ndeko/components/chart/chart-09.tsx",
      "content": "'use client';\n\nimport { useCallback, useRef, useState } from 'react';\n\nimport type { AutoplayStep } from '@/registry/ndeko/hooks/use-autoplay';\nimport { hold } from '@/registry/ndeko/lib/demonstration';\nimport {\n  CircleCheckIcon,\n  CircleDashedIcon,\n  CircleXIcon,\n  TriangleAlertIcon,\n  XIcon,\n  type Icon,\n} from '@/registry/ndeko/lib/icons';\nimport { cn } from '@/registry/ndeko/lib/utils';\nimport { Fold } from '@/registry/ndeko/ui/chat-motion';\nimport { LiveRegion } from '@/registry/ndeko/ui/live-region';\n\nimport { ChartCard } from './_parts/chart-card';\nimport { DataTable, type DataRow } from './_parts/data-table';\nimport { walkSteps, whileDemonstrating } from './_parts/demo';\nimport { dayLabelsOf, nounOf } from './_parts/format';\nimport { PLOT_SURFACE } from './_parts/plot';\nimport { Readout, ReadoutTitle } from './_parts/readout';\nimport { columnCenterOf, positionsTo } from './_parts/scale';\nimport { useChartDemo } from './_parts/use-chart-demo';\nimport { usePlotWidth } from './_parts/use-plot-width';\nimport { useReading } from './_parts/use-reading';\n\nexport type UptimeState = 'up' | 'degraded' | 'down' | 'none';\n\nexport type UptimeDay = {\n  label: string;\n  state: UptimeState;\n  /** How long the service was degraded or down that day. */\n  minutes?: number;\n  /** What happened, in one line. */\n  note?: string;\n};\n\nexport type UptimeBarProps = {\n  service: string;\n  /** The oldest day first. The bar shows as many of the latest days as its width holds. */\n  days: readonly UptimeDay[];\n  /** The day whose details stay open under the bar, counted in `days`. */\n  selectedIndex: number | null;\n  onSelectedIndexChange: (index: number | null) => void;\n  /** Shows the readout of a day without a pointer, for a demonstration. Counted in `days`. */\n  guideIndex?: number | null;\n  className?: string;\n};\n\n/** The counts of days a bar can show, most first. Each needs 3px a day and 2px between two days. */\nconst DAY_COUNTS = [90, 60, 30];\n\nconst DAY_PITCH_PX = 5;\n\nconst DAY_GAP_PX = 2;\n\nconst FALLBACK_WIDTH = 420;\n\nconst MINUTES_PER_DAY = 1440;\n\nconst STATE_FILL: Record<UptimeState, string> = {\n  up: 'bg-success',\n  degraded: 'bg-warning',\n  down: 'bg-destructive',\n  none: 'bg-foreground/10',\n};\n\nconst STATE_TONE: Record<UptimeState, string> = {\n  up: 'text-success-foreground',\n  degraded: 'text-warning-foreground',\n  down: 'text-destructive-ink',\n  none: 'text-muted-foreground',\n};\n\nconst STATE_ICON: Record<UptimeState, Icon> = {\n  up: CircleCheckIcon,\n  degraded: TriangleAlertIcon,\n  down: CircleXIcon,\n  none: CircleDashedIcon,\n};\n\nconst STATE_WORD: Record<UptimeState, string> = {\n  up: 'Up',\n  degraded: 'Degraded',\n  down: 'Down',\n  none: 'No data',\n};\n\nconst UPTIME = new Intl.NumberFormat('en-US', {\n  style: 'percent',\n  minimumFractionDigits: 2,\n  maximumFractionDigits: 2,\n});\n\nfunction widthOfDays(count: number) {\n  const pitches = count * DAY_PITCH_PX;\n  return pitches - DAY_GAP_PX;\n}\n\n/** The most days that fit, so the bars thin out on a narrow piece and nothing scrolls sideways. */\nfunction fittingDayCountOf(width: number) {\n  const fitting = DAY_COUNTS.find((count) => widthOfDays(count) <= width);\n  return fitting ?? DAY_COUNTS[DAY_COUNTS.length - 1];\n}\n\nfunction durationOf(minutes: number) {\n  if (minutes < 60) {\n    return `${minutes} min`;\n  }\n  const hours = Math.floor(minutes / 60);\n  const rest = minutes % 60;\n  if (rest === 0) {\n    return `${hours} h`;\n  }\n  return `${hours} h ${rest} min`;\n}\n\nfunction stateWordsOf(day: UptimeDay) {\n  if (day.state === 'up') {\n    return 'Up all day';\n  }\n  if (day.state === 'none') {\n    return 'No data';\n  }\n  const word = STATE_WORD[day.state];\n  if (day.minutes === undefined) {\n    return word;\n  }\n  return `${word} for ${durationOf(day.minutes)}`;\n}\n\nfunction hasData(day: UptimeDay) {\n  return day.state !== 'none';\n}\n\nfunction downMinutesOf(day: UptimeDay) {\n  if (day.state === 'down') {\n    return day.minutes ?? MINUTES_PER_DAY;\n  }\n  return 0;\n}\n\n/** The share of the measured time the service was not down. Days without data are left out of it. */\nfunction uptimeOf(days: readonly UptimeDay[]) {\n  const measured = days.filter(hasData);\n  if (measured.length === 0) {\n    return null;\n  }\n  let downMinutes = 0;\n  for (const day of measured) {\n    downMinutes += downMinutesOf(day);\n  }\n  const totalMinutes = measured.length * MINUTES_PER_DAY;\n  const downShare = downMinutes / totalMinutes;\n  return 1 - downShare;\n}\n\nfunction uptimeTextOf(days: readonly UptimeDay[]) {\n  const uptime = uptimeOf(days);\n  if (uptime === null) {\n    return 'No data';\n  }\n  return `${UPTIME.format(uptime)} uptime`;\n}\n\nfunction countOf(days: readonly UptimeDay[], state: UptimeState) {\n  const matching = days.filter((day) => day.state === state);\n  return matching.length;\n}\n\nfunction summaryOf(service: string, days: readonly UptimeDay[]) {\n  const uptime = uptimeTextOf(days);\n  const degraded = countOf(days, 'degraded');\n  const down = countOf(days, 'down');\n  const degradedDays = nounOf(degraded, 'day', 'days');\n  const downDays = nounOf(down, 'day', 'days');\n  return `${service}: ${uptime} over the last ${days.length} days, ${degraded} ${degradedDays} degraded, ${down} ${downDays} with an outage.`;\n}\n\n/** An index counted in every day, as an index in the days that are shown. Null when it is not shown. */\nfunction shownIndexOf(index: number | null, hiddenCount: number) {\n  if (index === null) {\n    return null;\n  }\n  const shown = index - hiddenCount;\n  if (shown < 0) {\n    return null;\n  }\n  return shown;\n}\n\nfunction liftedOf(isLifted: boolean) {\n  if (isLifted) {\n    return 'scale-y-[1.15]';\n  }\n  return undefined;\n}\n\ntype DayDetailProps = {\n  day: UptimeDay;\n  onClear: () => void;\n};\n\nfunction DayDetail({ day, onClear }: DayDetailProps) {\n  const StateIcon = STATE_ICON[day.state];\n\n  return (\n    <div className='bg-foreground/[0.04] mt-1.5 flex items-start gap-2 rounded-md py-1.5 ps-2.5 pe-1 text-xs leading-5'>\n      <StateIcon\n        className={cn('mt-[3px] size-3.5 shrink-0', STATE_TONE[day.state])}\n      />\n      <p className='min-w-0 flex-1 text-pretty'>\n        <span className='font-medium'>{day.label}</span>\n        <span className='text-muted-foreground'> · {stateWordsOf(day)}</span>\n        {day.note && (\n          <span className='text-muted-foreground'>. {day.note}</span>\n        )}\n      </p>\n      <button\n        type='button'\n        aria-label='Close the details of this day'\n        onClick={onClear}\n        className='text-muted-foreground hover:bg-foreground/5 hover:text-foreground focus-visible:ring-ring/25 flex size-6 shrink-0 cursor-pointer items-center justify-center rounded-md transition-colors duration-150 outline-none focus-visible:ring-[3px]'\n      >\n        <XIcon className='size-3.5' />\n      </button>\n    </div>\n  );\n}\n\n/** The day last selected stays written while its details fold away. */\nfunction useKeptDay(day: UptimeDay | null) {\n  const [kept, setKept] = useState(day);\n  const isNewDay = day !== null && day !== kept;\n  if (isNewDay) {\n    setKept(day);\n  }\n  return kept;\n}\n\nexport function UptimeBar({\n  service,\n  days,\n  selectedIndex,\n  onSelectedIndexChange,\n  guideIndex = null,\n  className,\n}: UptimeBarProps) {\n  const { plotRef, width } = usePlotWidth(FALLBACK_WIDTH);\n  const plot = useRef<HTMLDivElement | null>(null);\n  const wantedCount = fittingDayCountOf(width);\n  const shownCount = Math.min(wantedCount, days.length);\n  const hiddenCount = days.length - shownCount;\n  const shown = days.slice(hiddenCount);\n  const lastIndex = Math.max(shownCount - 1, 0);\n\n  function selectShown(index: number) {\n    onSelectedIndexChange(index + hiddenCount);\n  }\n\n  const reading = useReading({\n    count: shownCount,\n    defaultIndex: lastIndex,\n    guideIndex: shownIndexOf(guideIndex, hiddenCount),\n    onSelect: selectShown,\n  });\n  const shownDay = shown.at(reading.shownIndex);\n  const selectedShownIndex = shownIndexOf(selectedIndex, hiddenCount);\n  const selectedDay = days[selectedIndex ?? -1] ?? null;\n  const keptDay = useKeptDay(selectedDay);\n  const isReadoutShown = reading.isActive && shownDay !== undefined;\n  const shownState = shownDay?.state ?? 'none';\n  const ShownIcon = STATE_ICON[shownState];\n  const shownWords = wordsOf(shownDay);\n  const spoken = spokenOf(shownDay, reading.isReadingByKeys, selectedDay);\n  const safeCount = Math.max(shownCount, 1);\n  const selectedRatio = columnCenterOf(selectedShownIndex ?? 0, safeCount);\n  const selectedShare = selectedRatio * 100;\n  const uptimeText = uptimeTextOf(shown);\n  const spanText = `${shownCount} days`;\n\n  function pressKey(event: React.KeyboardEvent<HTMLElement>) {\n    reading.handlers.onKeyDown(event);\n    if (event.key === 'Escape') {\n      onSelectedIndexChange(null);\n    }\n  }\n\n  /** Stable, since it sets the measured element: a new callback on every render would set it twice per commit. */\n  const keepPlot = useCallback(\n    (element: HTMLDivElement | null) => {\n      plot.current = element;\n      plotRef(element);\n    },\n    [plotRef]\n  );\n\n  /** The details fold away with the button that closed them, so the focus goes back to the days. */\n  function closeDetails() {\n    onSelectedIndexChange(null);\n    plot.current?.focus({ preventScroll: true });\n  }\n\n  const rows: DataRow[] = shown.map((day, index) => ({\n    id: `${index}-${day.label}`,\n    label: day.label,\n    cells: [stateWordsOf(day), day.note ?? ''],\n  }));\n\n  return (\n    <div className={cn('relative flex flex-col', className)}>\n      <div className='flex flex-wrap items-baseline justify-between gap-x-3 gap-y-0.5 pb-1.5'>\n        <span className='min-w-0 text-[13px] font-medium text-pretty'>\n          {service}\n        </span>\n        <span className='text-muted-foreground shrink-0 text-xs tabular-nums'>\n          {uptimeText} · {spanText}\n        </span>\n      </div>\n      <div\n        ref={keepPlot}\n        role='group'\n        tabIndex={0}\n        aria-label={`${summaryOf(service, shown)} Use the arrow keys to read each day, Enter to keep its details open.`}\n        className={cn(\n          PLOT_SURFACE,\n          'flex h-8 cursor-pointer items-stretch gap-0.5'\n        )}\n        {...reading.handlers}\n        onKeyDown={pressKey}\n      >\n        {shown.map((day, index) => (\n          <span\n            key={`${index}-${day.label}`}\n            aria-hidden='true'\n            className={cn(\n              'min-w-0 flex-1 origin-bottom rounded-[2px] transition-transform duration-100 ease-(--ease-out-strong)',\n              STATE_FILL[day.state],\n              liftedOf(reading.isActive && index === reading.shownIndex)\n            )}\n          />\n        ))}\n        {selectedShownIndex !== null && (\n          <span\n            aria-hidden='true'\n            className='pointer-events-none absolute top-full left-0 size-0 transition-transform duration-200 ease-(--ease-out-strong)'\n            style={{ transform: `translateX(${selectedShare}cqw)` }}\n          >\n            <span className='bg-foreground absolute top-0.5 size-1 -translate-x-1/2 rounded-full' />\n          </span>\n        )}\n        <Readout\n          ratio={columnCenterOf(reading.shownIndex, safeCount)}\n          top={0}\n          isVisible={isReadoutShown}\n          isGliding={reading.isGliding}\n          hasCrosshair={false}\n        >\n          <ReadoutTitle>{shownDay?.label}</ReadoutTitle>\n          <span className='flex items-center gap-1.5 text-[13px] font-medium'>\n            <ShownIcon\n              className={cn('size-3.5 shrink-0', STATE_TONE[shownState])}\n            />\n            {shownWords}\n          </span>\n        </Readout>\n      </div>\n      <Fold open={selectedDay !== null}>\n        {keptDay && <DayDetail day={keptDay} onClear={closeDetails} />}\n      </Fold>\n      <LiveRegion message={spoken} />\n      <DataTable\n        caption={`${service}, day by day`}\n        columns={['Day', 'State', 'What happened']}\n        rows={rows}\n      />\n    </div>\n  );\n}\n\nfunction wordsOf(day: UptimeDay | undefined) {\n  if (!day) {\n    return '';\n  }\n  return stateWordsOf(day);\n}\n\n/** A day is said when the arrow keys reach it, and its note when it is the one kept open. */\nfunction spokenOf(\n  day: UptimeDay | undefined,\n  isReadingByKeys: boolean,\n  selectedDay: UptimeDay | null\n) {\n  const isSilent = !isReadingByKeys || day === undefined;\n  if (isSilent) {\n    return '';\n  }\n  const reading = `${day.label}: ${stateWordsOf(day)}`;\n  const isSelected = day === selectedDay;\n  if (!isSelected) {\n    return reading;\n  }\n  const note = day.note ?? 'Details open';\n  return `${reading}. ${note}`;\n}\n\ntype Incident = {\n  state: UptimeState;\n  minutes: number;\n  note: string;\n};\n\ntype Service = {\n  id: string;\n  name: string;\n  /** The first day the service was measured. Before it, there is no data. */\n  measuredFrom: number;\n  /** What went wrong, by day. */\n  incidents: Record<number, Incident>;\n};\n\nconst DAY_TOTAL = 90;\n\nconst DAY_LABELS = dayLabelsOf('2026-03-01', DAY_TOTAL);\n\nconst SERVICES: Service[] = [\n  {\n    id: 'api',\n    name: 'API',\n    measuredFrom: 0,\n    incidents: {\n      47: {\n        state: 'degraded',\n        minutes: 14,\n        note: 'A slow database replica was taken out of rotation',\n      },\n      71: {\n        state: 'down',\n        minutes: 18,\n        note: 'A bad deploy was rolled back',\n      },\n      84: {\n        state: 'degraded',\n        minutes: 42,\n        note: 'Search answered slowly while its index was rebuilt',\n      },\n    },\n  },\n  {\n    id: 'dashboard',\n    name: 'Dashboard',\n    measuredFrom: 0,\n    incidents: {\n      62: {\n        state: 'degraded',\n        minutes: 25,\n        note: 'Charts loaded slowly for accounts in one region',\n      },\n      71: {\n        state: 'degraded',\n        minutes: 18,\n        note: 'Pages showed stale figures during the API rollback',\n      },\n    },\n  },\n  {\n    id: 'webhooks',\n    name: 'Webhooks',\n    measuredFrom: 44,\n    incidents: {\n      58: {\n        state: 'degraded',\n        minutes: 37,\n        note: 'Deliveries ran up to five minutes late',\n      },\n      79: {\n        state: 'down',\n        minutes: 72,\n        note: 'Deliveries were queued, then replayed in order',\n      },\n    },\n  },\n];\n\nfunction dayOf(service: Service, index: number): UptimeDay {\n  const label = DAY_LABELS[index];\n  if (index < service.measuredFrom) {\n    return { label, state: 'none' };\n  }\n  const incident = service.incidents[index];\n  if (!incident) {\n    return { label, state: 'up' };\n  }\n  return { label, ...incident };\n}\n\nfunction daysOf(service: Service) {\n  return DAY_LABELS.map((_, index) => dayOf(service, index));\n}\n\nconst SERVICE_DAYS: Record<string, UptimeDay[]> = Object.fromEntries(\n  SERVICES.map((service) => [service.id, daysOf(service)])\n);\n\nconst STATES: UptimeState[] = ['up', 'degraded', 'down', 'none'];\n\nfunction StateLegend() {\n  return (\n    <ul\n      aria-label='What the colours mean'\n      className='flex flex-wrap gap-x-4 gap-y-1'\n    >\n      {STATES.map((state) => (\n        <li key={state} className='flex items-center gap-1.5 text-xs'>\n          <span\n            aria-hidden='true'\n            className={cn('size-2 rounded-[2px]', STATE_FILL[state])}\n          />\n          {STATE_WORD[state]}\n        </li>\n      ))}\n    </ul>\n  );\n}\n\ntype Guide = {\n  serviceId: string;\n  index: number;\n};\n\ntype Selection = Record<string, number | null>;\n\nconst NOTHING_SELECTED: Selection = {};\n\nconst API_INCIDENT = 84;\n\nconst WEBHOOKS_OUTAGE = 79;\n\nfunction guidesTo(serviceId: string, from: number, to: number): Guide[] {\n  const positions = positionsTo(from, to);\n  return positions.map((index) => ({ serviceId, index }));\n}\n\nconst TO_API_INCIDENT = guidesTo('api', 78, API_INCIDENT);\n\nconst TO_WEBHOOKS_OUTAGE = guidesTo('webhooks', 73, WEBHOOKS_OUTAGE);\n\nfunction guideIndexOf(guide: Guide | null, serviceId: string) {\n  if (guide?.serviceId === serviceId) {\n    return guide.index;\n  }\n  return null;\n}\n\nexport default function Chart09() {\n  const [guide, setGuide] = useState<Guide | null>(null);\n  const [selection, setSelection] = useState<Selection>(NOTHING_SELECTED);\n\n  function select(serviceId: string, index: number | null) {\n    setSelection((current) => ({ ...current, [serviceId]: index }));\n  }\n\n  function resetDemo() {\n    setGuide(null);\n    setSelection(NOTHING_SELECTED);\n  }\n\n  const steps: AutoplayStep[] = [\n    ...walkSteps(TO_API_INCIDENT, setGuide, { startAfter: 1200, stepMs: 200 }),\n    { after: 900, run: () => select('api', API_INCIDENT) },\n    ...walkSteps(TO_WEBHOOKS_OUTAGE, setGuide, {\n      startAfter: 2400,\n      stepMs: 200,\n    }),\n    { after: 900, run: () => select('webhooks', WEBHOOKS_OUTAGE) },\n    { after: 2400, run: () => setGuide(null) },\n    { after: 800, run: hold },\n  ];\n  const { ref, isAutoplaying, stopOnKeyboardFocus } = useChartDemo(steps, {\n    loopAfter: 1600,\n    onReset: resetDemo,\n  });\n  const shownGuide = whileDemonstrating(isAutoplaying, guide);\n\n  return (\n    <div\n      ref={ref}\n      onFocus={stopOnKeyboardFocus}\n      className='flex min-h-[25.5rem] w-full max-w-[34rem]'\n    >\n      <ChartCard\n        title='Uptime'\n        note='Illustrative'\n        summary='Three services, one bar per day: up, degraded, down or no data.'\n        className='w-full'\n      >\n        <div className='flex flex-col gap-4'>\n          {SERVICES.map((service) => (\n            <UptimeBar\n              key={service.id}\n              service={service.name}\n              days={SERVICE_DAYS[service.id]}\n              selectedIndex={selection[service.id] ?? null}\n              onSelectedIndexChange={(index) => select(service.id, index)}\n              guideIndex={guideIndexOf(shownGuide, service.id)}\n            />\n          ))}\n        </div>\n        <StateLegend />\n      </ChartCard>\n    </div>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/chart/chart-09.tsx"
    },
    {
      "path": "registry/ndeko/components/chart/_parts/axis.tsx",
      "content": "import { cn } from '@/registry/ndeko/lib/utils';\n\nimport { yOf } from './path';\nimport { columnCenterOf, percentOf, type Scale } from './scale';\n\n/** The least room one label of the category axis needs, text and breathing space. */\nexport const LABEL_ROOM_PX = 56;\n\ntype ValueAxisProps = {\n  scale: Scale;\n  height: number;\n  format: (value: number) => string;\n  className?: string;\n};\n\n/** The figures of the value axis, one per gridline, in a column beside the plot. */\nexport function ValueAxis({\n  scale,\n  height,\n  format,\n  className,\n}: ValueAxisProps) {\n  return (\n    <div\n      aria-hidden='true'\n      className={cn('relative w-9 shrink-0', className)}\n      style={{ height }}\n    >\n      {scale.ticks.map((tick) => (\n        <span\n          key={tick}\n          className='text-muted-foreground absolute right-0 -translate-y-1/2 text-[11px] tabular-nums'\n          style={{ top: yOf(tick, scale, height) }}\n        >\n          {format(tick)}\n        </span>\n      ))}\n    </div>\n  );\n}\n\n/** Zero is drawn stronger when values go below it, since bars start there. */\nexport function gridToneOf(tick: number, scale: Scale) {\n  const isZero = tick === 0;\n  const crossesZero = scale.min < 0;\n  if (isZero && crossesZero) {\n    return 'border-foreground/25';\n  }\n  return 'border-border';\n}\n\ntype GridLinesProps = {\n  scale: Scale;\n  height: number;\n};\n\nexport function GridLines({ scale, height }: GridLinesProps) {\n  return (\n    <div aria-hidden='true' className='pointer-events-none absolute inset-0'>\n      {scale.ticks.map((tick) => (\n        <span\n          key={tick}\n          className={cn(\n            'hairline-t absolute inset-x-0',\n            gridToneOf(tick, scale)\n          )}\n          style={{ top: yOf(tick, scale, height) }}\n        />\n      ))}\n    </div>\n  );\n}\n\nexport type AxisLabel = {\n  id: string;\n  text: string;\n  /** From 0 at the left edge of the plot to 1 at its right edge. */\n  ratio: number;\n  isStrong?: boolean;\n};\n\n/** Every how many positions a label is written, so the labels that are written never touch. */\nexport function labelStepOf(count: number, plotWidth: number) {\n  const fitting = Math.floor(plotWidth / LABEL_ROOM_PX);\n  const labelCount = Math.max(fitting, 1);\n  const step = Math.ceil(count / labelCount);\n  return Math.max(step, 1);\n}\n\n/** The labels kept when one in `step` is written, counted back from the last so the latest is always named. */\nexport function spacedLabelsOf(labels: readonly AxisLabel[], step: number) {\n  const lastIndex = labels.length - 1;\n  return labels.filter((_, index) => {\n    const fromLast = lastIndex - index;\n    return fromLast % step === 0;\n  });\n}\n\n/**\n * One label per position, under the middle of its column, written as often as the room allows. The\n * one at `strongIndex`, such as today, is set stronger.\n */\nexport function positionLabelsOf(\n  labels: readonly string[],\n  plotWidth: number,\n  strongIndex?: number\n) {\n  const all: AxisLabel[] = labels.map((text, index) => ({\n    id: `${index}-${text}`,\n    text,\n    ratio: columnCenterOf(index, labels.length),\n    isStrong: index === strongIndex,\n  }));\n  const step = labelStepOf(labels.length, plotWidth);\n  return spacedLabelsOf(all, step);\n}\n\nfunction strongOf(isStrong: boolean | undefined) {\n  if (isStrong) {\n    return 'text-foreground font-medium';\n  }\n  return 'text-muted-foreground';\n}\n\ntype LabelAlign = 'spread' | 'center';\n\n/**\n * A spread label slides from its left edge to its right edge as it crosses the plot, like the\n * readout, so the first and the last never stick out of the piece. A centred label sits under its\n * mark, for the few wide columns of a bar chart.\n */\nfunction labelStyleOf(\n  label: AxisLabel,\n  align: LabelAlign\n): React.CSSProperties {\n  const left = percentOf(label.ratio);\n  if (align === 'center') {\n    return { left, transform: 'translateX(-50%)' };\n  }\n  const shift = percentOf(-label.ratio);\n  return { left, transform: `translateX(${shift})` };\n}\n\ntype CategoryAxisProps = {\n  labels: readonly AxisLabel[];\n  align?: LabelAlign;\n  className?: string;\n};\n\nexport function CategoryAxis({\n  labels,\n  align = 'spread',\n  className,\n}: CategoryAxisProps) {\n  return (\n    <div aria-hidden='true' className={cn('relative h-4', className)}>\n      {labels.map((label) => (\n        <span\n          key={label.id}\n          className={cn(\n            'absolute top-0 text-[11px] whitespace-nowrap tabular-nums',\n            strongOf(label.isStrong)\n          )}\n          style={labelStyleOf(label, align)}\n        >\n          {label.text}\n        </span>\n      ))}\n    </div>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/chart/_parts/axis.tsx"
    },
    {
      "path": "registry/ndeko/components/chart/_parts/chart-card.tsx",
      "content": "import { useId } from 'react';\n\nimport { cn } from '@/registry/ndeko/lib/utils';\nimport { Badge } from '@/registry/ndeko/ui/badge';\n\ntype ChartCardProps = {\n  title: string;\n  /** A short mark beside the title, such as \"Illustrative\" over sample data. */\n  note?: string;\n  /** One line that says what the chart shows, read by screen readers with the title. */\n  summary: string;\n  /** Controls that change what the chart draws: a period, a view. */\n  actions?: React.ReactNode;\n  className?: string;\n  children: React.ReactNode;\n};\n\n/**\n * The surface every chart sits on. It is a query container, so a chart lays itself out by the\n * room it has, and it is positioned, so the hidden table of a chart never widens the page.\n */\nexport function ChartCard({\n  title,\n  note,\n  summary,\n  actions,\n  className,\n  children,\n}: ChartCardProps) {\n  const titleId = useId();\n  const summaryId = useId();\n\n  return (\n    <section\n      aria-labelledby={titleId}\n      aria-describedby={summaryId}\n      className={cn(\n        'bg-card hairline-ring ring-border @container relative flex flex-col gap-4 rounded-xl p-4 shadow-[0_1px_2px_rgb(0_0_0/0.04)]',\n        className\n      )}\n    >\n      <header className='flex min-h-7 flex-wrap items-center justify-between gap-x-3 gap-y-2'>\n        <div className='flex min-w-0 items-center gap-2'>\n          <h3 id={titleId} className='text-sm font-medium text-balance'>\n            {title}\n          </h3>\n          {note && <Badge variant='secondary'>{note}</Badge>}\n        </div>\n        {actions}\n      </header>\n      {children}\n      <p id={summaryId} className='sr-only'>\n        {summary}\n      </p>\n    </section>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/chart/_parts/chart-card.tsx"
    },
    {
      "path": "registry/ndeko/components/chart/_parts/data-table.tsx",
      "content": "export type DataRow = {\n  id: string;\n  /** The heading of the row: a day, a category, a step. */\n  label: string;\n  cells: readonly string[];\n};\n\ntype DataTableProps = {\n  caption: string;\n  /** The heading of the label column first, then one per cell. */\n  columns: readonly string[];\n  rows: readonly DataRow[];\n};\n\n/**\n * The numbers a chart draws, as a table for screen readers. It is taken out of the flow, so the\n * piece it sits in has to be positioned: a hidden box inside an area that scrolls sideways widens\n * the page otherwise.\n */\nexport function DataTable({ caption, columns, rows }: DataTableProps) {\n  return (\n    <table className='sr-only'>\n      <caption>{caption}</caption>\n      <thead>\n        <tr>\n          {columns.map((column) => (\n            <th key={column} scope='col'>\n              {column}\n            </th>\n          ))}\n        </tr>\n      </thead>\n      <tbody>\n        {rows.map((row) => (\n          <tr key={row.id}>\n            <th scope='row'>{row.label}</th>\n            {row.cells.map((cell, index) => (\n              <td key={index}>{cell}</td>\n            ))}\n          </tr>\n        ))}\n      </tbody>\n    </table>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/chart/_parts/data-table.tsx"
    },
    {
      "path": "registry/ndeko/components/chart/_parts/demo.ts",
      "content": "import type { AutoplayStep } from '@/registry/ndeko/hooks/use-autoplay';\nimport { keyDelayOf } from '@/registry/ndeko/lib/demonstration';\n\ntype WalkOptions = {\n  /** Milliseconds before the first position. */\n  startAfter?: number;\n  /** Milliseconds between two positions. */\n  stepMs?: number;\n};\n\n/** One step per position, so a reading crosses a plot the way a pointer does. */\nexport function walkSteps<Position>(\n  positions: readonly Position[],\n  moveTo: (position: Position) => void,\n  { startAfter = 700, stepMs = 240 }: WalkOptions = {}\n): AutoplayStep[] {\n  return positions.map((position, index) => {\n    const after = keyDelayOf(index, startAfter, stepMs);\n    return { after, run: () => moveTo(position) };\n  });\n}\n\n/** What a demonstration points at lets go the moment a person takes over. */\nexport function whileDemonstrating<Value>(\n  isDemonstrating: boolean,\n  value: Value | null\n) {\n  if (isDemonstrating) {\n    return value;\n  }\n  return null;\n}\n",
      "type": "registry:component",
      "target": "components/chart/_parts/demo.ts"
    },
    {
      "path": "registry/ndeko/components/chart/_parts/format.ts",
      "content": "const LOCALE = 'en-US';\n\nexport const COUNT_FORMAT: Intl.NumberFormatOptions = {\n  maximumFractionDigits: 0,\n};\n\nexport const SIGNED_FORMAT: Intl.NumberFormatOptions = {\n  maximumFractionDigits: 0,\n  signDisplay: 'exceptZero',\n};\n\nexport const USD_COMPACT_FORMAT: Intl.NumberFormatOptions = {\n  style: 'currency',\n  currency: 'USD',\n  notation: 'compact',\n  maximumFractionDigits: 1,\n};\n\nconst COMPACT_FORMAT: Intl.NumberFormatOptions = {\n  notation: 'compact',\n  maximumFractionDigits: 1,\n};\n\nconst COUNT = new Intl.NumberFormat(LOCALE, COUNT_FORMAT);\n\nconst SIGNED = new Intl.NumberFormat(LOCALE, SIGNED_FORMAT);\n\nconst COMPACT = new Intl.NumberFormat(LOCALE, COMPACT_FORMAT);\n\nconst USD_COMPACT = new Intl.NumberFormat(LOCALE, USD_COMPACT_FORMAT);\n\nconst DAY = new Intl.DateTimeFormat(LOCALE, {\n  month: 'short',\n  day: 'numeric',\n  timeZone: 'UTC',\n});\n\nconst MS_PER_DAY = 86_400_000;\n\nexport function formatCount(value: number) {\n  return COUNT.format(value);\n}\n\nexport function formatSigned(value: number) {\n  return SIGNED.format(value);\n}\n\nexport function formatCompact(value: number) {\n  return COMPACT.format(value);\n}\n\nexport function formatUsd(value: number) {\n  return USD_COMPACT.format(value);\n}\n\nexport function formatShare(share: number) {\n  const percent = Math.round(share * 100);\n  return `${percent}%`;\n}\n\n/** A start at zero has no percentage to grow from: it reads as no change. */\nexport function percentChangeOf(current: number, previous: number) {\n  if (previous === 0) {\n    return 0;\n  }\n  const difference = current - previous;\n  const ratio = difference / Math.abs(previous);\n  return Math.round(ratio * 100);\n}\n\nexport function changeWordsOf(percent: number, reference: string) {\n  if (percent === 0) {\n    return `level with ${reference}`;\n  }\n  const size = Math.abs(percent);\n  if (percent > 0) {\n    return `up ${size}% on ${reference}`;\n  }\n  return `down ${size}% on ${reference}`;\n}\n\nexport function nounOf(count: number, singular: string, plural: string) {\n  if (count === 1) {\n    return singular;\n  }\n  return plural;\n}\n\n/**\n * One label per day, or per `everyDays` days for a weekly series. Days are counted in UTC so the\n * server and the browser write the same label.\n */\nexport function dayLabelsOf(firstDay: string, count: number, everyDays = 1) {\n  const start = Date.parse(`${firstDay}T00:00:00Z`);\n  const stride = everyDays * MS_PER_DAY;\n  return Array.from({ length: count }, (_, index) => {\n    const elapsed = index * stride;\n    return DAY.format(start + elapsed);\n  });\n}\n",
      "type": "registry:component",
      "target": "components/chart/_parts/format.ts"
    },
    {
      "path": "registry/ndeko/components/chart/_parts/path.ts",
      "content": "import { columnCenterOf, lerp, ratioOf, type Domain } from './scale';\n\nexport type Point = {\n  x: number;\n  y: number;\n};\n\n/** Paths are drawn in a box this wide and stretched to the plot, so a change of width never redraws them. */\nexport const VIEW_WIDTH = 1000;\n\nfunction commandOf(point: Point, index: number) {\n  const x = point.x.toFixed(1);\n  const y = point.y.toFixed(1);\n  if (index === 0) {\n    return `M${x} ${y}`;\n  }\n  return `L${x} ${y}`;\n}\n\nexport function linePathOf(points: readonly Point[]) {\n  const commands = points.map((point, index) => commandOf(point, index));\n  return commands.join(' ');\n}\n\n/** The line closed down (or up) to a level, for the wash under a line. */\nexport function areaPathOf(points: readonly Point[], levelY: number) {\n  if (points.length === 0) {\n    return '';\n  }\n  const line = linePathOf(points);\n  const lastIndex = points.length - 1;\n  const firstX = points[0].x.toFixed(1);\n  const lastX = points[lastIndex].x.toFixed(1);\n  const level = levelY.toFixed(1);\n  return `${line} L${lastX} ${level} L${firstX} ${level} Z`;\n}\n\n/** The surface between two lines that share their x positions, for a range around a line. */\nexport function bandPathOf(upper: readonly Point[], lower: readonly Point[]) {\n  if (upper.length === 0) {\n    return '';\n  }\n  const backwards = [...lower].reverse();\n  const outline = [...upper, ...backwards];\n  const line = linePathOf(outline);\n  return `${line} Z`;\n}\n\n/** The pixel height of a value in a plot: the top of the domain is 0, its bottom is the plot height. */\nexport function yOf(value: number, domain: Domain, height: number) {\n  const ratio = ratioOf(value, domain);\n  const fromBottom = ratio * height;\n  return height - fromBottom;\n}\n\n/** One point per value, each in the middle of its column. */\nexport function plotPointsOf(\n  values: readonly number[],\n  domain: Domain,\n  height: number\n): Point[] {\n  return values.map((value, index) => {\n    const share = columnCenterOf(index, values.length);\n    const x = share * VIEW_WIDTH;\n    const y = yOf(value, domain, height);\n    return { x, y };\n  });\n}\n\n/** How many of the pieces lie before a segment when they are shared out evenly. */\nfunction piecesBefore(\n  segment: number,\n  segmentCount: number,\n  pieceCount: number\n) {\n  const share = segment / segmentCount;\n  return Math.floor(share * pieceCount);\n}\n\n/**\n * The same line through exactly `count` points: each segment is cut into equal parts, so two lines\n * of different lengths share one structure and one can glide into the other.\n */\nexport function densifyOf(points: readonly Point[], count: number): Point[] {\n  const segmentCount = points.length - 1;\n  const hasSegments = segmentCount >= 1;\n  const hasRoom = count > points.length;\n  if (!hasSegments || !hasRoom) {\n    return [...points];\n  }\n  const pieceCount = count - 1;\n  const dense: Point[] = [points[0]];\n  for (let segment = 0; segment < segmentCount; segment += 1) {\n    const from = points[segment];\n    const to = points[segment + 1];\n    const start = piecesBefore(segment, segmentCount, pieceCount);\n    const end = piecesBefore(segment + 1, segmentCount, pieceCount);\n    const parts = end - start;\n    for (let part = 1; part <= parts; part += 1) {\n      const amount = part / parts;\n      const x = lerp(from.x, to.x, amount);\n      const y = lerp(from.y, to.y, amount);\n      dense.push({ x, y });\n    }\n  }\n  return dense;\n}\n",
      "type": "registry:component",
      "target": "components/chart/_parts/path.ts"
    },
    {
      "path": "registry/ndeko/components/chart/_parts/plot.tsx",
      "content": "import { cn } from '@/registry/ndeko/lib/utils';\n\nimport { CategoryAxis, GridLines, ValueAxis, type AxisLabel } from './axis';\nimport { VIEW_WIDTH } from './path';\nimport type { Scale } from './scale';\n\n/**\n * A plot is a query container, so the readout and the marks inside it are placed in shares of its\n * width, and it lets the page scroll vertically under a finger while a sideways move reads values.\n */\nexport const PLOT_SURFACE =\n  'focus-visible:ring-ring/25 @container relative touch-pan-y rounded-md outline-none focus-visible:ring-[3px]';\n\ntype PlotFrameProps = {\n  /** The name of the plot and how to read it, for screen readers. */\n  label: string;\n  scale: Scale;\n  height: number;\n  formatTick: (value: number) => string;\n  axisLabels: readonly AxisLabel[];\n  axisAlign?: 'spread' | 'center';\n  /** Receives the plot element, for a chart that measures the room it has. */\n  plotRef?: (element: HTMLDivElement | null) => void;\n  /** The handlers of the reading: the plot is the one tab stop of the chart. */\n  plotProps?: React.HTMLAttributes<HTMLDivElement>;\n  plotClassName?: string;\n  /** For a chart whose marks carry their own figures, which can drop the axis on a narrow piece. */\n  valueAxisClassName?: string;\n  /** Labels laid out by the chart itself, in place of one row of `axisLabels`. */\n  categoryAxis?: React.ReactNode;\n  className?: string;\n  children: React.ReactNode;\n};\n\n/**\n * A plot between its value axis on the left and its category axis underneath. Each part has its own\n * cell: placed in turn, a plot whose value axis is hidden would fall into the axis column, which is\n * only as wide as its content, and nothing in a plot has a width of its own, so every mark would\n * stack at the left edge.\n */\nexport function PlotFrame({\n  label,\n  scale,\n  height,\n  formatTick,\n  axisLabels,\n  axisAlign,\n  plotRef,\n  plotProps,\n  plotClassName,\n  valueAxisClassName,\n  categoryAxis,\n  className,\n  children,\n}: PlotFrameProps) {\n  return (\n    <div\n      className={cn('grid grid-cols-[auto_minmax(0,1fr)] gap-x-2', className)}\n    >\n      <ValueAxis\n        scale={scale}\n        height={height}\n        format={formatTick}\n        className={cn('col-start-1 row-start-1', valueAxisClassName)}\n      />\n      <div\n        ref={plotRef}\n        role='group'\n        tabIndex={0}\n        aria-label={label}\n        className={cn(PLOT_SURFACE, 'col-start-2 row-start-1', plotClassName)}\n        style={{ height }}\n        {...plotProps}\n      >\n        <GridLines scale={scale} height={height} />\n        {children}\n      </div>\n      <div className='col-start-2 row-start-2 min-w-0'>\n        {categoryAxis}\n        {!categoryAxis && (\n          <CategoryAxis\n            labels={axisLabels}\n            align={axisAlign}\n            className='mt-2'\n          />\n        )}\n      </div>\n    </div>\n  );\n}\n\ntype PathLayerProps = {\n  height: number;\n  className?: string;\n  children: React.ReactNode;\n};\n\n/**\n * The layer the paths are drawn in: `VIEW_WIDTH` units across whatever the width of the plot, and\n * real pixels down. Strokes keep their thickness because each path opts out of the stretch.\n */\nexport function PathLayer({ height, className, children }: PathLayerProps) {\n  return (\n    <svg\n      aria-hidden='true'\n      viewBox={`0 0 ${VIEW_WIDTH} ${height}`}\n      preserveAspectRatio='none'\n      className={cn(\n        'pointer-events-none absolute inset-0 size-full overflow-visible',\n        className\n      )}\n    >\n      {children}\n    </svg>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/chart/_parts/plot.tsx"
    },
    {
      "path": "registry/ndeko/components/chart/_parts/readout.tsx",
      "content": "import { cn } from '@/registry/ndeko/lib/utils';\n\nconst GLIDE = 'transition-transform duration-200 ease-(--ease-out-strong)';\n\n/** A mark on the crosshair travels with the reading, and appears in place when the reading opens. */\nconst MARK_GLIDE =\n  'group-data-gliding/readout:transition-transform group-data-gliding/readout:duration-200 group-data-gliding/readout:ease-(--ease-out-strong)';\n\nfunction glideOf(isGliding: boolean) {\n  if (isGliding) {\n    return GLIDE;\n  }\n  return undefined;\n}\n\nfunction fadedUnless(isVisible: boolean) {\n  if (isVisible) {\n    return undefined;\n  }\n  return 'opacity-0';\n}\n\nfunction glidingAttributeOf(isGliding: boolean) {\n  if (isGliding) {\n    return true;\n  }\n  return undefined;\n}\n\ntype ReadoutProps = {\n  /** From 0 at the left edge of the plot to 1 at its right edge. */\n  ratio: number;\n  /** Pixels from the top of the plot down to the point the bubble sits on. */\n  top: number;\n  isVisible: boolean;\n  /** True while the reading moves to another position: the bubble travels. False when it opens. */\n  isGliding: boolean;\n  hasCrosshair?: boolean;\n  /** What is drawn on the crosshair itself, such as the dot of each series. */\n  marks?: React.ReactNode;\n  children: React.ReactNode;\n};\n\n/**\n * The one readout of a plot: a crosshair, the marks on it and a bubble. The plot is a query\n * container (`@container`), so every position is a share of its width and nothing is measured. The\n * bubble slides from its left edge to its right edge as it crosses the plot, so it never leaves it.\n * It stays mounted to fade out where it was.\n */\nexport function Readout({\n  ratio,\n  top,\n  isVisible,\n  isGliding,\n  hasCrosshair = true,\n  marks,\n  children,\n}: ReadoutProps) {\n  const glide = glideOf(isGliding);\n  const faded = fadedUnless(isVisible);\n  const share = ratio * 100;\n  const column = { transform: `translateX(${share}cqw)` };\n  const row = { transform: `translateY(${top}px)` };\n  const slide = { transform: `translateX(-${share}%)` };\n\n  return (\n    <div\n      aria-hidden='true'\n      data-gliding={glidingAttributeOf(isGliding)}\n      className='group/readout pointer-events-none absolute inset-0 z-10'\n    >\n      <div\n        className={cn('absolute inset-y-0 left-0 w-0', glide)}\n        style={column}\n      >\n        {hasCrosshair && (\n          <span\n            className={cn(\n              'bg-foreground/15 absolute inset-y-0 left-0 w-px -translate-x-1/2 transition-opacity duration-150',\n              faded\n            )}\n          />\n        )}\n        <div\n          className={cn(\n            'absolute inset-y-0 left-0 w-0 transition-opacity duration-150',\n            faded\n          )}\n        >\n          {marks}\n        </div>\n        <div className={cn('absolute top-0 left-0 size-0', glide)} style={row}>\n          <div\n            className={cn('absolute bottom-2.5 left-0 w-max', glide)}\n            style={slide}\n          >\n            <div\n              className={cn(\n                'surface-raised flex max-w-[min(14rem,100cqw)] origin-bottom flex-col gap-1 rounded-lg px-2.5 py-1.5 text-xs',\n                'transition-[opacity,scale] duration-[125ms] ease-(--ease-out-strong)',\n                !isVisible && 'scale-[0.97] opacity-0'\n              )}\n            >\n              {children}\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  );\n}\n\nexport function ReadoutTitle({ children }: { children: React.ReactNode }) {\n  return <span className='text-muted-foreground'>{children}</span>;\n}\n\ntype ReadoutRowProps = {\n  value: string;\n  name: string;\n  /** The colour of the series, drawn as a short stroke. Text never wears it. */\n  color?: string;\n};\n\nexport function ReadoutRow({ value, name, color }: ReadoutRowProps) {\n  return (\n    <span className='flex items-center gap-2'>\n      {color && (\n        <span\n          className='h-0.5 w-2.5 shrink-0 rounded-full'\n          style={{ backgroundColor: color }}\n        />\n      )}\n      <span className='text-[13px] font-medium tabular-nums'>{value}</span>\n      <span className='text-muted-foreground min-w-0 truncate'>{name}</span>\n    </span>\n  );\n}\n\ntype ReadoutDotProps = {\n  /** Pixels from the top of the plot. */\n  top: number;\n  color: string;\n};\n\n/** The mark of one series where the crosshair meets it, ringed in the colour of the surface. */\nexport function ReadoutDot({ top, color }: ReadoutDotProps) {\n  const style = {\n    backgroundColor: color,\n    transform: `translate(-50%, ${top}px)`,\n  };\n\n  return (\n    <span\n      className={cn(\n        'ring-card absolute -top-1 left-0 size-2 rounded-full ring-2',\n        MARK_GLIDE\n      )}\n      style={style}\n    />\n  );\n}\n",
      "type": "registry:component",
      "target": "components/chart/_parts/readout.tsx"
    },
    {
      "path": "registry/ndeko/components/chart/_parts/scale.ts",
      "content": "export type Domain = {\n  min: number;\n  max: number;\n};\n\nexport type Scale = Domain & {\n  step: number;\n  ticks: number[];\n};\n\nconst NICE_FACTORS = [1, 2, 5, 10];\n\nconst EMPTY_DOMAIN: Domain = { min: 0, max: 0 };\n\nexport function clamp(value: number, min: number, max: number) {\n  const atLeastMin = Math.max(value, min);\n  return Math.min(atLeastMin, max);\n}\n\nexport function lerp(from: number, to: number, amount: number) {\n  const span = to - from;\n  return from + span * amount;\n}\n\nexport function sumOf(values: readonly number[]) {\n  let total = 0;\n  for (const value of values) {\n    total += value;\n  }\n  return total;\n}\n\nexport function extentOf(values: readonly number[]): Domain {\n  if (values.length === 0) {\n    return EMPTY_DOMAIN;\n  }\n  let min = values[0];\n  let max = values[0];\n  for (const value of values) {\n    min = Math.min(min, value);\n    max = Math.max(max, value);\n  }\n  return { min, max };\n}\n\n/** Bars and areas are read from zero, so their domain always holds it. */\nexport function withZero(domain: Domain): Domain {\n  const min = Math.min(domain.min, 0);\n  const max = Math.max(domain.max, 0);\n  return { min, max };\n}\n\n/** Where a value sits in a domain, from 0 at its lowest to 1 at its highest. */\nexport function ratioOf(value: number, domain: Domain) {\n  const span = domain.max - domain.min;\n  if (span === 0) {\n    return 0;\n  }\n  const offset = value - domain.min;\n  return offset / span;\n}\n\n/** A flat series still needs room above and below it to be drawn. */\nfunction spanOf(domain: Domain) {\n  const span = domain.max - domain.min;\n  if (span > 0) {\n    return span;\n  }\n  const size = Math.abs(domain.max);\n  return Math.max(size, 1);\n}\n\nfunction niceStepOf(roughStep: number) {\n  const logarithm = Math.log10(roughStep);\n  const exponent = Math.floor(logarithm);\n  const magnitude = 10 ** exponent;\n  const factor = NICE_FACTORS.find((candidate) => {\n    const candidateStep = candidate * magnitude;\n    return candidateStep >= roughStep;\n  });\n  const safeFactor = factor ?? 10;\n  return safeFactor * magnitude;\n}\n\nfunction decimalsOf(step: number) {\n  const logarithm = Math.log10(step);\n  const exponent = Math.floor(logarithm);\n  return Math.max(0, -exponent);\n}\n\n/** Adding zero turns a negative zero into zero, which a number format would write as -0. */\nfunction roundedTo(value: number, decimals: number) {\n  const factor = 10 ** decimals;\n  const scaled = Math.round(value * factor);\n  const rounded = scaled / factor;\n  return rounded + 0;\n}\n\n/** A scale with round ticks that holds the whole domain, in at most `maxLines` steps. */\nexport function niceScaleOf(domain: Domain, maxLines: number): Scale {\n  const span = spanOf(domain);\n  const roughStep = span / maxLines;\n  const step = niceStepOf(roughStep);\n  const decimals = decimalsOf(step);\n  const stepsBelow = Math.floor(domain.min / step);\n  const lowest = stepsBelow * step;\n  const highestWanted = Math.max(domain.max, lowest + step);\n  const stepsAbove = Math.ceil(highestWanted / step);\n  const lineCount = stepsAbove - stepsBelow;\n  const tickCount = lineCount + 1;\n  const ticks = Array.from({ length: tickCount }, (_, index) => {\n    const tick = lowest + index * step;\n    return roundedTo(tick, decimals);\n  });\n  const lastIndex = ticks.length - 1;\n  return { min: ticks[0], max: ticks[lastIndex], step, ticks };\n}\n\n/** Columns share the plot equally and a mark sits in the middle of its column. */\nexport function columnCenterOf(index: number, count: number) {\n  const center = index + 0.5;\n  return center / count;\n}\n\nexport function columnIndexAt(ratio: number, count: number) {\n  const rawIndex = Math.floor(ratio * count);\n  const lastIndex = Math.max(count - 1, 0);\n  return clamp(rawIndex, 0, lastIndex);\n}\n\nexport function percentOf(share: number) {\n  const percent = share * 100;\n  return `${percent}%`;\n}\n\n/** The whole numbers that lead from one position to another: the start is left out, the end is kept. */\nexport function positionsTo(from: number, to: number) {\n  const gap = to - from;\n  const distance = Math.abs(gap);\n  const direction = Math.sign(gap);\n  return Array.from({ length: distance }, (_, index) => {\n    const travelled = index + 1;\n    const offset = travelled * direction;\n    return from + offset;\n  });\n}\n",
      "type": "registry:component",
      "target": "components/chart/_parts/scale.ts"
    },
    {
      "path": "registry/ndeko/components/chart/_parts/use-chart-demo.ts",
      "content": "'use client';\n\nimport {\n  useAutoplay,\n  type AutoplayOptions,\n  type AutoplayStep,\n} from '@/registry/ndeko/hooks/use-autoplay';\nimport { useKeptHeight } from '@/registry/ndeko/hooks/use-kept-height';\n\n/**\n * What every chart demo shares: the demonstration, the box that keeps its tallest height so a round\n * never moves the page, and a stop when the keyboard brings focus in. A person who tabs to a plot\n * reads it with the arrow keys from there, and has pressed no key inside the piece yet.\n */\nexport function useChartDemo(\n  steps: readonly AutoplayStep[],\n  options?: AutoplayOptions\n) {\n  const demo = useAutoplay(steps, options);\n  const { ref, takeOver } = demo;\n\n  useKeptHeight(ref);\n\n  function stopOnKeyboardFocus(event: React.FocusEvent<HTMLElement>) {\n    const isKeyboardFocus = event.target.matches(':focus-visible');\n    if (isKeyboardFocus) {\n      takeOver();\n    }\n  }\n\n  return { ...demo, stopOnKeyboardFocus };\n}\n",
      "type": "registry:component",
      "target": "components/chart/_parts/use-chart-demo.ts"
    },
    {
      "path": "registry/ndeko/components/chart/_parts/use-plot-width.ts",
      "content": "'use client';\n\nimport { useLayoutEffect, useState } from 'react';\n\n/**\n * The width of a plot as it resizes, for what depends on the room it has: how many labels fit, how\n * many marks, which way the bars run. Shapes do not need it: they are drawn in shares of the plot.\n */\nexport function usePlotWidth(fallback: number) {\n  const [target, setTarget] = useState<HTMLElement | null>(null);\n  const [width, setWidth] = useState(fallback);\n\n  useLayoutEffect(() => {\n    if (!target) {\n      return;\n    }\n    const observer = new ResizeObserver(([entry]) => {\n      const box = entry.contentBoxSize[0];\n      setWidth(box.inlineSize);\n    });\n    observer.observe(target);\n    return () => observer.disconnect();\n  }, [target]);\n\n  return { plotRef: setTarget, width };\n}\n",
      "type": "registry:component",
      "target": "components/chart/_parts/use-plot-width.ts"
    },
    {
      "path": "registry/ndeko/components/chart/_parts/use-reading.ts",
      "content": "'use client';\n\nimport { useState } from 'react';\n\nimport { clamp, columnIndexAt } from './scale';\n\ntype ReadingOptions = {\n  /** How many positions the plot has from left to right. */\n  count: number;\n  /** Where the reading opens the first time the plot takes keyboard focus. */\n  defaultIndex: number;\n  /** A position shown from outside while nobody reads the plot, for a demonstration. */\n  guideIndex?: number | null;\n  /** Enter, Space or a click on a position. */\n  onSelect?: (index: number) => void;\n};\n\nfunction columnIndexFrom(\n  event: React.PointerEvent<HTMLElement> | React.MouseEvent<HTMLElement>,\n  count: number\n) {\n  const box = event.currentTarget.getBoundingClientRect();\n  const offset = event.clientX - box.left;\n  const ratio = offset / box.width;\n  return columnIndexAt(ratio, count);\n}\n\nexport function steppedIndexOf(key: string, current: number, count: number) {\n  const lastIndex = Math.max(count - 1, 0);\n  if (key === 'ArrowRight') {\n    const next = current + 1;\n    return Math.min(next, lastIndex);\n  }\n  if (key === 'ArrowLeft') {\n    const previous = current - 1;\n    return Math.max(previous, 0);\n  }\n  if (key === 'Home') {\n    return 0;\n  }\n  if (key === 'End') {\n    return lastIndex;\n  }\n  return null;\n}\n\nexport function activeIndexOf(isActive: boolean, shownIndex: number) {\n  if (isActive) {\n    return shownIndex;\n  }\n  return null;\n}\n\n/** A reading is said aloud only while the arrow keys move it: a pointer and a demonstration stay silent. */\nexport function readingAloud(isReadingByKeys: boolean, reading: string) {\n  if (isReadingByKeys) {\n    return reading;\n  }\n  return '';\n}\n\nfunction isSelectKey(key: string) {\n  const isEnter = key === 'Enter';\n  const isSpace = key === ' ';\n  return isEnter || isSpace;\n}\n\n/**\n * One reading position for a plot that is one tab stop. The pointer wins while it is over the plot,\n * then the arrow keys, then the position a demonstration points at. A reading that opens appears in\n * place; one that moves glides, which `isGliding` tells the readout.\n *\n * A plot read by columns spreads `handlers`. A plot whose marks are their own hit targets spreads\n * `markHandlers` and calls `pointTo` from each mark.\n */\nexport function useReading({\n  count,\n  defaultIndex,\n  guideIndex = null,\n  onSelect,\n}: ReadingOptions) {\n  const [pointerIndex, setPointerIndex] = useState<number | null>(null);\n  const [keyIndex, setKeyIndex] = useState<number | null>(null);\n  const [lastIndex, setLastIndex] = useState(defaultIndex);\n  const [isGliding, setIsGliding] = useState(false);\n  const [seenGuide, setSeenGuide] = useState(guideIndex);\n  const hasNewGuide = seenGuide !== guideIndex;\n\n  if (hasNewGuide) {\n    const wasGuided = seenGuide !== null;\n    const isGuided = guideIndex !== null;\n    setSeenGuide(guideIndex);\n    setIsGliding(wasGuided && isGuided);\n    if (guideIndex !== null) {\n      setLastIndex(guideIndex);\n    }\n  }\n\n  const activeIndex = pointerIndex ?? keyIndex ?? guideIndex;\n  const isActive = activeIndex !== null;\n  const isPointing = pointerIndex !== null;\n  const isReadingByKeys = keyIndex !== null;\n  const wantedIndex = activeIndex ?? lastIndex;\n  const highestIndex = Math.max(count - 1, 0);\n  const shownIndex = clamp(wantedIndex, 0, highestIndex);\n\n  function pointAt(event: React.PointerEvent<HTMLElement>) {\n    const index = columnIndexFrom(event, count);\n    setIsGliding(isPointing);\n    setPointerIndex(index);\n    setLastIndex(index);\n  }\n\n  /** Null when the pointer is over the plot and on no mark. */\n  function pointTo(index: number | null) {\n    if (index === null) {\n      setPointerIndex(null);\n      return;\n    }\n    setIsGliding(isPointing);\n    setPointerIndex(index);\n    setLastIndex(index);\n  }\n\n  function leave(event: React.PointerEvent<HTMLElement>) {\n    if (event.pointerType === 'mouse') {\n      setPointerIndex(null);\n    }\n  }\n\n  function focus(event: React.FocusEvent<HTMLElement>) {\n    const isKeyboardFocus = event.currentTarget.matches(':focus-visible');\n    if (isKeyboardFocus) {\n      setIsGliding(false);\n      setKeyIndex(shownIndex);\n    }\n  }\n\n  function blur() {\n    setKeyIndex(null);\n    setPointerIndex(null);\n  }\n\n  function pressKey(event: React.KeyboardEvent<HTMLElement>) {\n    if (event.key === 'Escape') {\n      setKeyIndex(null);\n      return;\n    }\n    if (isSelectKey(event.key)) {\n      if (onSelect) {\n        event.preventDefault();\n        setKeyIndex(shownIndex);\n        onSelect(shownIndex);\n      }\n      return;\n    }\n    const next = steppedIndexOf(event.key, shownIndex, count);\n    if (next === null) {\n      return;\n    }\n    event.preventDefault();\n    setIsGliding(isActive);\n    setPointerIndex(null);\n    setKeyIndex(next);\n    setLastIndex(next);\n  }\n\n  function click(event: React.MouseEvent<HTMLElement>) {\n    if (!onSelect) {\n      return;\n    }\n    const index = columnIndexFrom(event, count);\n    onSelect(index);\n  }\n\n  const handlers = {\n    onPointerMove: pointAt,\n    onPointerDown: pointAt,\n    onPointerLeave: leave,\n    onFocus: focus,\n    onBlur: blur,\n    onKeyDown: pressKey,\n    onClick: click,\n  };\n\n  const markHandlers = {\n    onPointerLeave: leave,\n    onFocus: focus,\n    onBlur: blur,\n    onKeyDown: pressKey,\n  };\n\n  return {\n    shownIndex,\n    isActive,\n    isGliding,\n    isPointing,\n    isReadingByKeys,\n    handlers,\n    markHandlers,\n    pointTo,\n  };\n}\n",
      "type": "registry:component",
      "target": "components/chart/_parts/use-reading.ts"
    }
  ],
  "categories": [
    "components",
    "chart"
  ],
  "type": "registry:component"
}