{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "chart-01",
  "title": "Line chart",
  "description": "One to three lines with a legend that takes a series off, a period switch and a readout on hover or the arrow keys, where the lines glide into the next period under a crosshair that walks them.",
  "dependencies": [
    "motion"
  ],
  "registryDependencies": [
    "https://ui.ndekocode.dev/r/agent-run.json",
    "https://ui.ndekocode.dev/r/badge.json",
    "https://ui.ndekocode.dev/r/button.json",
    "https://ui.ndekocode.dev/r/demonstration.json",
    "https://ui.ndekocode.dev/r/live-region.json",
    "https://ui.ndekocode.dev/r/motion-number.json",
    "https://ui.ndekocode.dev/r/motion-presets.json",
    "https://ui.ndekocode.dev/r/motion-word-roll.json",
    "https://ui.ndekocode.dev/r/segments.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/use-prefers-reduced-motion.json",
    "https://ui.ndekocode.dev/r/utils.json"
  ],
  "files": [
    {
      "path": "registry/ndeko/components/chart/chart-01.tsx",
      "content": "'use client';\n\nimport { useState } from 'react';\n\nimport { MotionNumber } from '@/components/core/motion-number';\nimport { WordRoll } from '@/components/core/word-roll';\nimport type { AutoplayStep } from '@/registry/ndeko/hooks/use-autoplay';\nimport type { SeriesSlot } from '@/registry/ndeko/lib/agent-run';\nimport {\n  hold,\n  PRESS_LEAD_MS,\n  usePress,\n} from '@/registry/ndeko/lib/demonstration';\nimport { cn } from '@/registry/ndeko/lib/utils';\nimport { Button } from '@/registry/ndeko/ui/button';\nimport { LiveRegion } from '@/registry/ndeko/ui/live-region';\nimport { Segments, type Segment } from '@/registry/ndeko/ui/segments';\n\nimport { positionLabelsOf } from './_parts/axis';\nimport { ChartCard } from './_parts/chart-card';\nimport { DataTable, type DataRow } from './_parts/data-table';\nimport { walkSteps, whileDemonstrating } from './_parts/demo';\nimport {\n  changeWordsOf,\n  COUNT_FORMAT,\n  dayLabelsOf,\n  formatCompact,\n  formatCount,\n  percentChangeOf,\n} from './_parts/format';\nimport { Legend, type LegendEntry } from './_parts/legend';\nimport { LINE_STROKE, MorphPath } from './_parts/morph-path';\nimport { densifyOf, linePathOf, plotPointsOf, yOf } from './_parts/path';\nimport { PathLayer, PlotFrame } from './_parts/plot';\nimport { seededRandom } from './_parts/random';\nimport {\n  Readout,\n  ReadoutDot,\n  ReadoutRow,\n  ReadoutTitle,\n} from './_parts/readout';\nimport {\n  columnCenterOf,\n  extentOf,\n  niceScaleOf,\n  sumOf,\n  withZero,\n  type Scale,\n} from './_parts/scale';\nimport { markColorOf } from './_parts/series-color';\nimport { useChartDemo } from './_parts/use-chart-demo';\nimport { usePlotWidth } from './_parts/use-plot-width';\nimport { readingAloud, useReading } from './_parts/use-reading';\n\nexport type LineSeries = {\n  id: string;\n  name: string;\n  /** Fixed per series, so a colour always names the same thing whatever else is shown. */\n  series: SeriesSlot;\n  /** One value per label. */\n  values: readonly number[];\n};\n\nexport type LineChartProps = {\n  title: string;\n  /** A short mark beside the title, such as \"Illustrative\" over sample data. */\n  note?: string;\n  /** One label per position: what the readout names and the axis writes. */\n  labels: readonly string[];\n  /** One to three series. A single series is drawn in the primary colour. */\n  series: readonly LineSeries[];\n  /** The series taken off the plot. They keep their place and their colour in the legend. */\n  hiddenIds: readonly string[];\n  onHiddenIdsChange: (hiddenIds: string[]) => void;\n  /** What one position is, for screen readers: \"day\". */\n  positionNoun?: string;\n  formatValue?: ValueFormat;\n  formatTick?: ValueFormat;\n  /** A figure or a sentence above the plot. */\n  headline?: React.ReactNode;\n  /** Controls beside the title, such as a period switch. */\n  actions?: React.ReactNode;\n  /** Shows the readout at a position without a pointer, for a demonstration. */\n  guideIndex?: number | null;\n  /** The legend entry a demonstration is pressing. */\n  pressedSeriesId?: string | null;\n  className?: string;\n};\n\nconst PLOT_HEIGHT = 176;\n\nconst MAX_LINES = 4;\n\n/** Every line is drawn through this many points, so a week can glide into a quarter. */\nconst MORPH_POINTS = 90;\n\nconst FALLBACK_WIDTH = 360;\n\nfunction visibleOf(\n  series: readonly LineSeries[],\n  hiddenIds: readonly string[]\n) {\n  return series.filter((entry) => !hiddenIds.includes(entry.id));\n}\n\n/** With every series off the plot keeps the scale of all of them, so its lines do not jump. */\nfunction scaledSeriesOf(\n  series: readonly LineSeries[],\n  visible: readonly LineSeries[]\n) {\n  if (visible.length === 0) {\n    return series;\n  }\n  return visible;\n}\n\nfunction scaleOf(\n  series: readonly LineSeries[],\n  visible: readonly LineSeries[]\n) {\n  const scaled = scaledSeriesOf(series, visible);\n  const values = scaled.flatMap((entry) => entry.values);\n  const extent = extentOf(values);\n  const domain = withZero(extent);\n  return niceScaleOf(domain, MAX_LINES);\n}\n\nfunction valueAt(entry: LineSeries, index: number) {\n  return entry.values[index] ?? 0;\n}\n\nfunction topAt(entry: LineSeries, index: number, scale: Scale) {\n  const value = valueAt(entry, index);\n  return yOf(value, scale, PLOT_HEIGHT);\n}\n\ntype ValueFormat = (value: number) => string;\n\nfunction formattedAt(entry: LineSeries, index: number, format: ValueFormat) {\n  const value = valueAt(entry, index);\n  return format(value);\n}\n\nfunction linePathFor(entry: LineSeries, scale: Scale) {\n  const points = plotPointsOf(entry.values, scale, PLOT_HEIGHT);\n  const dense = densifyOf(points, MORPH_POINTS);\n  return linePathOf(dense);\n}\n\nfunction hiddenLineOf(isHidden: boolean) {\n  if (isHidden) {\n    return 'opacity-0';\n  }\n  return undefined;\n}\n\n/** The bubble sits above the highest line at that position. */\nfunction readoutTopOf(\n  visible: readonly LineSeries[],\n  index: number,\n  scale: Scale\n) {\n  const tops = visible.map((entry) => topAt(entry, index, scale));\n  if (tops.length === 0) {\n    return 0;\n  }\n  return Math.min(...tops);\n}\n\nfunction toggledIdsOf(hiddenIds: readonly string[], id: string) {\n  const isHidden = hiddenIds.includes(id);\n  if (isHidden) {\n    return hiddenIds.filter((hiddenId) => hiddenId !== id);\n  }\n  return [...hiddenIds, id];\n}\n\nfunction namesOf(series: readonly LineSeries[]) {\n  const names = series.map((entry) => entry.name);\n  return names.join(', ');\n}\n\nfunction summaryOf(\n  visible: readonly LineSeries[],\n  labels: readonly string[],\n  positionNoun: string\n) {\n  if (labels.length === 0) {\n    return 'Nothing to draw yet.';\n  }\n  if (visible.length === 0) {\n    return 'Every series is off.';\n  }\n  const lastIndex = labels.length - 1;\n  const names = namesOf(visible);\n  return `${names}: one value per ${positionNoun}, from ${labels[0]} to ${labels[lastIndex]}.`;\n}\n\nexport function LineChart({\n  title,\n  note,\n  labels,\n  series,\n  hiddenIds,\n  onHiddenIdsChange,\n  positionNoun = 'point',\n  formatValue = formatCount,\n  formatTick = formatCompact,\n  headline,\n  actions,\n  guideIndex = null,\n  pressedSeriesId = null,\n  className,\n}: LineChartProps) {\n  const { plotRef, width } = usePlotWidth(FALLBACK_WIDTH);\n  const count = labels.length;\n  const lastIndex = Math.max(count - 1, 0);\n  const visible = visibleOf(series, hiddenIds);\n  const hasVisible = visible.length > 0;\n  const hasSeries = series.length > 0;\n  const isEverySeriesOff = hasSeries && !hasVisible;\n  const scale = scaleOf(series, visible);\n  const reading = useReading({ count, defaultIndex: lastIndex, guideIndex });\n  const shownIndex = reading.shownIndex;\n  const shownLabel = labels[shownIndex] ?? '';\n  const readoutRatio = columnCenterOf(shownIndex, Math.max(count, 1));\n  const readoutTop = readoutTopOf(visible, shownIndex, scale);\n  const isReadoutShown = reading.isActive && hasVisible;\n  const axisLabels = positionLabelsOf(labels, width);\n  const summary = summaryOf(visible, labels, positionNoun);\n\n  const legend: LegendEntry[] = series.map((entry) => ({\n    id: entry.id,\n    label: entry.name,\n    color: markColorOf(entry.series, series.length),\n    isOff: hiddenIds.includes(entry.id),\n  }));\n\n  const rows: DataRow[] = labels.map((label, index) => ({\n    id: `${index}-${label}`,\n    label,\n    cells: visible.map((entry) => formattedAt(entry, index, formatValue)),\n  }));\n\n  const readings = visible.map((entry) => {\n    const value = formattedAt(entry, shownIndex, formatValue);\n    return `${entry.name} ${value}`;\n  });\n  const spokenReading = `${shownLabel}: ${readings.join(', ')}`;\n\n  function toggleSeries(id: string) {\n    onHiddenIdsChange(toggledIdsOf(hiddenIds, id));\n  }\n\n  return (\n    <ChartCard\n      title={title}\n      note={note}\n      summary={summary}\n      actions={actions}\n      className={className}\n    >\n      {headline}\n      <PlotFrame\n        label={`${title}. Use the arrow keys to read each ${positionNoun}.`}\n        scale={scale}\n        height={PLOT_HEIGHT}\n        formatTick={formatTick}\n        axisLabels={axisLabels}\n        plotRef={plotRef}\n        plotProps={reading.handlers}\n      >\n        <PathLayer height={PLOT_HEIGHT}>\n          {series.map((entry) => (\n            <MorphPath\n              key={entry.id}\n              d={linePathFor(entry, scale)}\n              className={cn(\n                LINE_STROKE,\n                'transition-opacity duration-200',\n                hiddenLineOf(hiddenIds.includes(entry.id))\n              )}\n              style={{ stroke: markColorOf(entry.series, series.length) }}\n            />\n          ))}\n        </PathLayer>\n        {!hasSeries && (\n          <p className='text-muted-foreground absolute inset-0 flex items-center justify-center text-[13px]'>\n            Nothing to draw yet\n          </p>\n        )}\n        {isEverySeriesOff && (\n          <div className='absolute inset-0 flex flex-col items-center justify-center gap-2.5 text-center transition-opacity duration-200 starting:opacity-0'>\n            <p className='text-muted-foreground text-[13px]'>\n              Every series is off\n            </p>\n            <Button\n              type='button'\n              variant='outline'\n              size='sm'\n              onClick={() => onHiddenIdsChange([])}\n            >\n              Show all series\n            </Button>\n          </div>\n        )}\n        <Readout\n          ratio={readoutRatio}\n          top={readoutTop}\n          isVisible={isReadoutShown}\n          isGliding={reading.isGliding}\n          marks={visible.map((entry) => (\n            <ReadoutDot\n              key={entry.id}\n              top={topAt(entry, shownIndex, scale)}\n              color={markColorOf(entry.series, series.length)}\n            />\n          ))}\n        >\n          <ReadoutTitle>{shownLabel}</ReadoutTitle>\n          {visible.map((entry) => (\n            <ReadoutRow\n              key={entry.id}\n              value={formattedAt(entry, shownIndex, formatValue)}\n              name={entry.name}\n              color={markColorOf(entry.series, series.length)}\n            />\n          ))}\n        </Readout>\n      </PlotFrame>\n      <Legend\n        entries={legend}\n        label='Series, press one to take it off the plot'\n        onToggle={toggleSeries}\n        pressedId={pressedSeriesId}\n      />\n      <LiveRegion\n        message={readingAloud(reading.isReadingByKeys, spokenReading)}\n      />\n      <DataTable\n        caption={title}\n        columns={[positionNoun, ...visible.map((entry) => entry.name)]}\n        rows={rows}\n      />\n    </ChartCard>\n  );\n}\n\ntype PeriodId = '7' | '30' | '90';\n\ntype Source = {\n  id: string;\n  name: string;\n  series: SeriesSlot;\n  seed: number;\n  /** Visits on the first day, the visits gained each day, and how far a day strays from the trend. */\n  base: number;\n  growth: number;\n  swing: number;\n};\n\nconst PERIODS: Segment<PeriodId>[] = [\n  { value: '7', label: '7 days' },\n  { value: '30', label: '30 days' },\n  { value: '90', label: '90 days' },\n];\n\nconst PERIOD_DAYS: Record<PeriodId, number> = { '7': 7, '30': 30, '90': 90 };\n\n/** Twice the longest period, so every period has the same span before it to compare with. */\nconst HISTORY_DAYS = 180;\n\nconst WEEKEND_FACTOR = 0.72;\n\nconst SOURCES: Source[] = [\n  {\n    id: 'search',\n    name: 'Search',\n    series: 1,\n    seed: 11,\n    base: 96,\n    growth: 0.42,\n    swing: 14,\n  },\n  {\n    id: 'direct',\n    name: 'Direct',\n    series: 2,\n    seed: 23,\n    base: 82,\n    growth: 0.1,\n    swing: 11,\n  },\n  {\n    id: 'referral',\n    name: 'Referral',\n    series: 3,\n    seed: 37,\n    base: 34,\n    growth: 0.16,\n    swing: 8,\n  },\n];\n\nfunction rhythmOf(day: number) {\n  const weekday = day % 7;\n  if (weekday >= 5) {\n    return WEEKEND_FACTOR;\n  }\n  return 1;\n}\n\nfunction historyOf(source: Source) {\n  const next = seededRandom(source.seed);\n  return Array.from({ length: HISTORY_DAYS }, (_, day) => {\n    const trend = source.base + source.growth * day;\n    const expected = trend * rhythmOf(day);\n    const drift = next() - 0.5;\n    const visits = expected + drift * 2 * source.swing;\n    const whole = Math.round(visits);\n    return Math.max(whole, 0);\n  });\n}\n\nconst HISTORY: Record<string, number[]> = Object.fromEntries(\n  SOURCES.map((source) => [source.id, historyOf(source)])\n);\n\nconst DAY_LABELS = dayLabelsOf('2026-01-01', HISTORY_DAYS);\n\nfunction lastOf<Item>(items: readonly Item[], count: number) {\n  return items.slice(items.length - count);\n}\n\nfunction seriesOf(days: number): LineSeries[] {\n  return SOURCES.map((source) => ({\n    id: source.id,\n    name: source.name,\n    series: source.series,\n    values: lastOf(HISTORY[source.id], days),\n  }));\n}\n\n/** The visits of the sources still on the plot, over the period and over the same span before it. */\nfunction totalsOf(days: number, hiddenIds: readonly string[]) {\n  let current = 0;\n  let previous = 0;\n  for (const source of SOURCES) {\n    if (hiddenIds.includes(source.id)) {\n      continue;\n    }\n    const twoSpans = lastOf(HISTORY[source.id], days * 2);\n    const before = twoSpans.slice(0, days);\n    const during = twoSpans.slice(days);\n    previous += sumOf(before);\n    current += sumOf(during);\n  }\n  return { current, previous };\n}\n\ntype HeadlineProps = {\n  total: number;\n  change: string;\n};\n\nfunction Headline({ total, change }: HeadlineProps) {\n  /** Alone on its line, the phrase takes its new width at once: its words still roll, and no width is animated frame by frame. */\n  const changeWidths = [change];\n\n  return (\n    <div className='flex flex-col gap-0.5'>\n      <p className='flex items-baseline gap-1.5'>\n        <MotionNumber\n          value={total}\n          format={COUNT_FORMAT}\n          className='text-2xl leading-8 font-semibold'\n        />\n        <span className='text-muted-foreground text-[13px]'>visits</span>\n      </p>\n      <p className='text-muted-foreground text-xs'>\n        <WordRoll text={change} labels={changeWidths} />\n      </p>\n    </div>\n  );\n}\n\nconst WALK_MONTH = [20, 21, 22, 23, 24, 25, 26, 27];\n\nconst WALK_QUARTER = [62, 66, 70, 74, 78, 82];\n\nconst WALK_WEEK = [2, 3, 4, 5];\n\ntype PressKey = 'referral';\n\nexport default function Chart01() {\n  const [periodId, setPeriodId] = useState<PeriodId>('30');\n  const [hiddenIds, setHiddenIds] = useState<string[]>([]);\n  const [guide, setGuide] = useState<number | null>(null);\n  const { pressed, press } = usePress<PressKey>();\n  const days = PERIOD_DAYS[periodId];\n  const totals = totalsOf(days, hiddenIds);\n  const percent = percentChangeOf(totals.current, totals.previous);\n  const change = changeWordsOf(percent, `the ${days} days before`);\n\n  function changePeriod(next: PeriodId) {\n    setGuide(null);\n    setPeriodId(next);\n  }\n\n  function toggleReferral() {\n    setHiddenIds((current) => {\n      if (current.includes('referral')) {\n        return [];\n      }\n      return ['referral'];\n    });\n  }\n\n  function resetDemo() {\n    setPeriodId('30');\n    setHiddenIds([]);\n    setGuide(null);\n  }\n\n  const steps: AutoplayStep[] = [\n    ...walkSteps(WALK_MONTH, setGuide, { startAfter: 1100 }),\n    { after: 900, run: () => changePeriod('90') },\n    ...walkSteps(WALK_QUARTER, setGuide, { startAfter: 1000 }),\n    { after: 900, run: () => setGuide(null) },\n    { after: 500, run: () => press('referral') },\n    { after: PRESS_LEAD_MS, run: toggleReferral },\n    { after: 1700, run: () => press('referral') },\n    { after: PRESS_LEAD_MS, run: toggleReferral },\n    { after: 1100, run: () => changePeriod('7') },\n    ...walkSteps(WALK_WEEK, setGuide, { startAfter: 1000, stepMs: 420 }),\n    { after: 900, run: () => changePeriod('30') },\n    { after: 1200, run: hold },\n  ];\n  const { ref, isAutoplaying, stopOnKeyboardFocus } = useChartDemo(steps, {\n    loopAfter: 2000,\n    onReset: resetDemo,\n  });\n\n  return (\n    <div\n      ref={ref}\n      onFocus={stopOnKeyboardFocus}\n      className='flex min-h-[24.5rem] w-full max-w-[34rem]'\n    >\n      <LineChart\n        title='Visits by source'\n        note='Illustrative'\n        labels={lastOf(DAY_LABELS, days)}\n        series={seriesOf(days)}\n        hiddenIds={hiddenIds}\n        onHiddenIdsChange={setHiddenIds}\n        positionNoun='day'\n        headline={<Headline total={totals.current} change={change} />}\n        actions={\n          <Segments\n            value={periodId}\n            segments={PERIODS}\n            onValueChange={changePeriod}\n            label='Period'\n          />\n        }\n        guideIndex={whileDemonstrating(isAutoplaying, guide)}\n        pressedSeriesId={whileDemonstrating(isAutoplaying, pressed)}\n        className='w-full'\n      />\n    </div>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/chart/chart-01.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/legend.tsx",
      "content": "'use client';\n\nimport { pressedQuietOf } from '@/registry/ndeko/lib/demonstration';\nimport { cn } from '@/registry/ndeko/lib/utils';\n\nexport type LegendEntry = {\n  id: string;\n  label: string;\n  /** The colour of the mark. The label keeps a text colour. */\n  color: string;\n  /** A series taken off the plot keeps its place and its colour, faded. */\n  isOff?: boolean;\n};\n\nfunction keyOpacityOf(isOff: boolean | undefined) {\n  if (isOff) {\n    return 'opacity-30';\n  }\n  return undefined;\n}\n\nfunction labelToneOf(isOff: boolean | undefined) {\n  if (isOff) {\n    return 'text-muted-foreground';\n  }\n  return 'text-foreground';\n}\n\nfunction LegendKey({ entry }: { entry: LegendEntry }) {\n  return (\n    <span\n      aria-hidden='true'\n      className={cn(\n        'h-0.5 w-3 shrink-0 rounded-full transition-opacity duration-150',\n        keyOpacityOf(entry.isOff)\n      )}\n      style={{ backgroundColor: entry.color }}\n    />\n  );\n}\n\ntype LegendProps = {\n  entries: readonly LegendEntry[];\n  /** What the list names, for screen readers. */\n  label: string;\n  /** With it each entry is a button that takes its series off the plot and puts it back. */\n  onToggle?: (id: string) => void;\n  /** The entry a demonstration is pressing. */\n  pressedId?: string | null;\n  className?: string;\n};\n\nexport function Legend({\n  entries,\n  label,\n  onToggle,\n  pressedId = null,\n  className,\n}: LegendProps) {\n  return (\n    <ul\n      aria-label={label}\n      className={cn('-mx-1.5 flex flex-wrap gap-x-1 gap-y-0.5', className)}\n    >\n      {entries.map((entry) => (\n        <li key={entry.id}>\n          {onToggle && (\n            <button\n              type='button'\n              aria-pressed={!entry.isOff}\n              onClick={() => onToggle(entry.id)}\n              className={cn(\n                'hover:bg-foreground/5 focus-visible:ring-ring/25 flex h-7 cursor-pointer items-center gap-2 rounded-md px-1.5 text-xs outline-none',\n                'transition-[color,background-color,scale] duration-150 ease-(--ease-out-strong) focus-visible:ring-[3px] active:scale-[0.97]',\n                labelToneOf(entry.isOff),\n                pressedQuietOf(entry.id === pressedId)\n              )}\n            >\n              <LegendKey entry={entry} />\n              {entry.label}\n            </button>\n          )}\n          {!onToggle && (\n            <span className='flex h-7 items-center gap-2 px-1.5 text-xs'>\n              <LegendKey entry={entry} />\n              {entry.label}\n            </span>\n          )}\n        </li>\n      ))}\n    </ul>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/chart/_parts/legend.tsx"
    },
    {
      "path": "registry/ndeko/components/chart/_parts/morph-path.tsx",
      "content": "'use client';\n\nimport { motion, type Transition } from 'motion/react';\nimport { useState } from 'react';\n\nimport { usePrefersReducedMotion } from '@/registry/ndeko/hooks/use-prefers-reduced-motion';\nimport { EASE_OUT_STRONG, INSTANT } from '@/registry/ndeko/lib/motion-presets';\nimport { cn } from '@/registry/ndeko/lib/utils';\n\nconst MORPH: Transition = { duration: 0.3, ease: EASE_OUT_STRONG };\n\n/** What is there on mount does not fade in: only a shape that replaced another one does. */\nconst SWAP_FADE =\n  'transition-opacity duration-200 ease-(--ease-out-strong) starting:opacity-0';\n\nfunction transitionOf(isInstant: boolean) {\n  if (isInstant) {\n    return INSTANT;\n  }\n  return MORPH;\n}\n\nfunction swapFadeOf(hasChanged: boolean) {\n  if (hasChanged) {\n    return SWAP_FADE;\n  }\n  return undefined;\n}\n\n/** False until the value changes for the first time. */\nfunction useHasChanged(value: string) {\n  const [firstValue] = useState(value);\n  const [hasChanged, setHasChanged] = useState(false);\n  const isFirstChange = value !== firstValue && !hasChanged;\n  if (isFirstChange) {\n    setHasChanged(true);\n  }\n  return hasChanged;\n}\n\ntype MorphPathProps = {\n  d: string;\n  /** True while the shape follows a hand: it is redrawn where the hand is, with no glide behind it. */\n  isInstant?: boolean;\n  className?: string;\n  style?: React.CSSProperties;\n  /** For a shape that is its own hit target. */\n  onPointerEnter?: () => void;\n};\n\n/**\n * A shape that glides to its new outline when the data changes, as long as both outlines have the\n * same number of points. Under reduced motion the new shape replaces the old one with a fade.\n */\nexport function MorphPath({\n  d,\n  isInstant = false,\n  className,\n  style,\n  onPointerEnter,\n}: MorphPathProps) {\n  const shouldReduceMotion = usePrefersReducedMotion();\n  const hasChanged = useHasChanged(d);\n\n  if (shouldReduceMotion) {\n    return (\n      <path\n        key={d}\n        d={d}\n        vectorEffect='non-scaling-stroke'\n        className={cn(swapFadeOf(hasChanged), className)}\n        style={style}\n        onPointerEnter={onPointerEnter}\n      />\n    );\n  }\n\n  return (\n    <motion.path\n      initial={false}\n      animate={{ d }}\n      transition={transitionOf(isInstant)}\n      vectorEffect='non-scaling-stroke'\n      className={className}\n      style={style}\n      onPointerEnter={onPointerEnter}\n    />\n  );\n}\n\n/** The stroke of a line: 2px whatever the width of the plot, with round joins and ends. */\nexport const LINE_STROKE =\n  'fill-none stroke-2 [stroke-linecap:round] [stroke-linejoin:round]';\n",
      "type": "registry:component",
      "target": "components/chart/_parts/morph-path.tsx"
    },
    {
      "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/random.ts",
      "content": "const UINT_RANGE = 4_294_967_296;\n\nconst MULTIPLIER = 1_664_525;\n\nconst INCREMENT = 1_013_904_223;\n\n/**\n * Numbers between 0 and 1 drawn from a seed, the same on the server and in the browser, so sample\n * data never changes between two renders.\n */\nexport function seededRandom(seed: number) {\n  let state = seed >>> 0;\n\n  return function next() {\n    const multiplied = Math.imul(state, MULTIPLIER);\n    state = (multiplied + INCREMENT) >>> 0;\n    return state / UINT_RANGE;\n  };\n}\n\n/** A draw between -1 and 1 that favours small steps, from two flat draws. */\nexport function spreadOf(next: () => number) {\n  const first = next();\n  const second = next();\n  return first + second - 1;\n}\n",
      "type": "registry:component",
      "target": "components/chart/_parts/random.ts"
    },
    {
      "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/series-color.ts",
      "content": "import { seriesColorOf, type SeriesSlot } from '@/registry/ndeko/lib/agent-run';\n\n/** A chart of one series draws it in the primary colour; with more, each one wears its own series colour. */\nexport function markColorOf(slot: SeriesSlot, seriesCount: number) {\n  if (seriesCount === 1) {\n    return 'var(--primary)';\n  }\n  return seriesColorOf(slot);\n}\n",
      "type": "registry:component",
      "target": "components/chart/_parts/series-color.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"
}