{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "chart-04",
  "title": "Baseline chart",
  "description": "A daily metric against any day you click: the level line glides there, the curve prints in the primary colour above it and in red below, and the sentence on top reads again from that day.",
  "dependencies": [
    "motion"
  ],
  "registryDependencies": [
    "https://ui.ndekocode.dev/r/badge.json",
    "https://ui.ndekocode.dev/r/demonstration.json",
    "https://ui.ndekocode.dev/r/live-region.json",
    "https://ui.ndekocode.dev/r/motion-presets.json",
    "https://ui.ndekocode.dev/r/motion-word-roll.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-04.tsx",
      "content": "'use client';\n\nimport { useState } from 'react';\n\nimport { WordRoll } from '@/components/core/word-roll';\nimport type { AutoplayStep } from '@/registry/ndeko/hooks/use-autoplay';\nimport { hold } from '@/registry/ndeko/lib/demonstration';\nimport { cn } from '@/registry/ndeko/lib/utils';\nimport { LiveRegion } from '@/registry/ndeko/ui/live-region';\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  dayLabelsOf,\n  formatCompact,\n  formatCount,\n  formatSigned,\n  nounOf,\n  percentChangeOf,\n} from './_parts/format';\nimport { LINE_STROKE, MorphPath } from './_parts/morph-path';\nimport {\n  areaPathOf,\n  linePathOf,\n  plotPointsOf,\n  VIEW_WIDTH,\n  yOf,\n} from './_parts/path';\nimport { PathLayer, PlotFrame } from './_parts/plot';\nimport {\n  Readout,\n  ReadoutDot,\n  ReadoutRow,\n  ReadoutTitle,\n} from './_parts/readout';\nimport {\n  clamp,\n  columnCenterOf,\n  extentOf,\n  niceScaleOf,\n  positionsTo,\n} from './_parts/scale';\nimport { useChartDemo } from './_parts/use-chart-demo';\nimport { usePlotWidth } from './_parts/use-plot-width';\nimport { readingAloud, useReading } from './_parts/use-reading';\nimport { useSvgId } from './_parts/use-svg-id';\n\ntype ValueFormat = (value: number) => string;\n\nexport type BaselineChartProps = {\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  values: readonly number[];\n  /** The position every other one is compared with. */\n  baselineIndex: number;\n  /** A click on a position, or Enter on the one being read. */\n  onBaselineChange: (index: number) => void;\n  /** What the values count, in the plural: \"signups\". */\n  valueNoun: string;\n  /** What one position is: \"day\". */\n  positionNoun?: string;\n  formatValue?: ValueFormat;\n  formatTick?: ValueFormat;\n  /** Controls beside the title. */\n  actions?: React.ReactNode;\n  /** Shows the readout at a position without a pointer, for a demonstration. */\n  guideIndex?: number | null;\n  className?: string;\n};\n\nconst PLOT_HEIGHT = 176;\n\nconst MAX_LINES = 4;\n\nconst FALLBACK_WIDTH = 360;\n\n/** The clips reach past the plot, so the stroke of a line that touches an edge is not cut in half. */\nconst CLIP_MARGIN = 8;\n\nconst CLIP_TOP = -CLIP_MARGIN;\n\nconst CLIP_BOTTOM = PLOT_HEIGHT + CLIP_MARGIN;\n\nconst GLIDE = 'transition-transform duration-300 ease-(--ease-out-strong)';\n\ntype Side = 'above' | 'below' | 'level';\n\nconst SIDE_COLOR: Record<Side, string> = {\n  above: 'var(--primary)',\n  below: 'var(--destructive)',\n  level: 'var(--foreground)',\n};\n\nfunction sideOf(difference: number): Side {\n  if (difference > 0) {\n    return 'above';\n  }\n  if (difference < 0) {\n    return 'below';\n  }\n  return 'level';\n}\n\n/** A band across the whole plot from one height to another, as the outline of a clip. */\nfunction bandClipOf(top: number, bottom: number) {\n  const high = top.toFixed(1);\n  const low = bottom.toFixed(1);\n  return `M0 ${high} L${VIEW_WIDTH} ${high} L${VIEW_WIDTH} ${low} L0 ${low} Z`;\n}\n\nfunction changeWordsOf(percent: number) {\n  if (percent === 0) {\n    return 'level';\n  }\n  const size = Math.abs(percent);\n  if (percent > 0) {\n    return `up ${size}%`;\n  }\n  return `down ${size}%`;\n}\n\n/** How a position compares with the level, in words: a colour alone would not say it. */\nfunction comparisonOf(difference: number, baselineLabel: string) {\n  const side = sideOf(difference);\n  if (side === 'level') {\n    return `the level, ${baselineLabel}`;\n  }\n  return `${side} ${baselineLabel}`;\n}\n\ntype Standing = {\n  /** The latest value against the level, as a whole percentage. */\n  percent: number;\n  /** The positions after the level, and how many of them sit above it. */\n  since: number;\n  above: number;\n};\n\nfunction standingOf(values: readonly number[], baselineIndex: number) {\n  const level = values[baselineIndex] ?? 0;\n  const later = values.slice(baselineIndex + 1);\n  const latest = later.at(-1) ?? level;\n  const higher = later.filter((value) => value > level);\n  const standing: Standing = {\n    percent: percentChangeOf(latest, level),\n    since: later.length,\n    above: higher.length,\n  };\n  return standing;\n}\n\ntype SentenceProps = {\n  standing: Standing;\n  baselineLabel: string;\n  valueNoun: string;\n  positionNoun: string;\n};\n\nconst FIGURE = 'text-foreground font-medium';\n\n/** The chart in words. Only what changed rolls when the level moves. */\nfunction Sentence({\n  standing,\n  baselineLabel,\n  valueNoun,\n  positionNoun,\n}: SentenceProps) {\n  if (standing.since === 0) {\n    return (\n      <p className='text-muted-foreground text-sm leading-6 text-pretty'>\n        <span className={FIGURE}>{baselineLabel}</span> is the latest{' '}\n        {positionNoun}. Pick an earlier one to compare from.\n      </p>\n    );\n  }\n  const positions = nounOf(standing.since, positionNoun, `${positionNoun}s`);\n\n  return (\n    <p className='text-muted-foreground text-sm leading-6 text-pretty'>\n      Since <WordRoll text={baselineLabel} className={FIGURE} />, {valueNoun}{' '}\n      are{' '}\n      <WordRoll\n        text={changeWordsOf(standing.percent)}\n        value={standing.percent}\n        className={FIGURE}\n      />{' '}\n      and stayed above that {positionNoun} on{' '}\n      <WordRoll\n        text={`${standing.above} of ${standing.since}`}\n        value={standing.above}\n        className={FIGURE}\n      />{' '}\n      {positions}\n    </p>\n  );\n}\n\nfunction summaryOf(\n  standing: Standing,\n  valueNoun: string,\n  levelLabel: string,\n  positionNoun: string\n) {\n  const change = changeWordsOf(standing.percent);\n  const positions = nounOf(standing.since, positionNoun, `${positionNoun}s`);\n  return `${valueNoun} against ${levelLabel}: ${change} since, above it on ${standing.above} of ${standing.since} ${positions}.`;\n}\n\nexport function BaselineChart({\n  title,\n  note,\n  labels,\n  values,\n  baselineIndex,\n  onBaselineChange,\n  valueNoun,\n  positionNoun = 'day',\n  formatValue = formatCount,\n  formatTick = formatCompact,\n  actions,\n  guideIndex = null,\n  className,\n}: BaselineChartProps) {\n  const { plotRef, width } = usePlotWidth(FALLBACK_WIDTH);\n  const aboveClipId = useSvgId('above-level');\n  const belowClipId = useSvgId('below-level');\n  const count = values.length;\n  const lastIndex = Math.max(count - 1, 0);\n  const levelIndex = clamp(baselineIndex, 0, lastIndex);\n  const levelValue = values[levelIndex] ?? 0;\n  const levelLabel = labels[levelIndex] ?? '';\n  const extent = extentOf(values);\n  const scale = niceScaleOf(extent, MAX_LINES);\n  const points = plotPointsOf(values, scale, PLOT_HEIGHT);\n  const levelY = yOf(levelValue, scale, PLOT_HEIGHT);\n  const line = linePathOf(points);\n  const area = areaPathOf(points, levelY);\n  const standing = standingOf(values, levelIndex);\n  const reading = useReading({\n    count,\n    defaultIndex: lastIndex,\n    guideIndex,\n    onSelect: onBaselineChange,\n  });\n  const shownIndex = reading.shownIndex;\n  const shownLabel = labels[shownIndex] ?? '';\n  const shownNumber = values[shownIndex] ?? 0;\n  const shownTop = yOf(shownNumber, scale, PLOT_HEIGHT);\n  const shownDifference = shownNumber - levelValue;\n  const shownSide = sideOf(shownDifference);\n  const shownValue = formatValue(shownNumber);\n  const shownComparison = comparisonOf(shownDifference, levelLabel);\n  const levelRatio = columnCenterOf(levelIndex, Math.max(count, 1));\n  const levelShare = levelRatio * 100;\n  const isReadoutShown = reading.isActive && count > 0;\n  const shownGap = formatSigned(shownDifference);\n  const summary = summaryOf(standing, valueNoun, levelLabel, positionNoun);\n  const spokenReading = `${shownLabel}: ${shownValue} ${valueNoun}, ${shownGap}, ${shownComparison}`;\n\n  const rows: DataRow[] = labels.map((label, index) => {\n    const value = values[index] ?? 0;\n    const difference = value - levelValue;\n    return {\n      id: `${index}-${label}`,\n      label,\n      cells: [formatValue(value), formatSigned(difference)],\n    };\n  });\n\n  return (\n    <ChartCard\n      title={title}\n      note={note}\n      summary={summary}\n      actions={actions}\n      className={className}\n    >\n      <Sentence\n        standing={standing}\n        baselineLabel={levelLabel}\n        valueNoun={valueNoun}\n        positionNoun={positionNoun}\n      />\n      <PlotFrame\n        label={`${title}. Use the arrow keys to read each ${positionNoun}, and Enter to compare from it.`}\n        scale={scale}\n        height={PLOT_HEIGHT}\n        formatTick={formatTick}\n        axisLabels={positionLabelsOf(labels, width)}\n        plotRef={plotRef}\n        plotProps={reading.handlers}\n        plotClassName='cursor-pointer'\n      >\n        <PathLayer height={PLOT_HEIGHT}>\n          <defs>\n            <clipPath id={aboveClipId}>\n              <MorphPath d={bandClipOf(CLIP_TOP, levelY)} />\n            </clipPath>\n            <clipPath id={belowClipId}>\n              <MorphPath d={bandClipOf(levelY, CLIP_BOTTOM)} />\n            </clipPath>\n          </defs>\n          <g clipPath={`url(#${aboveClipId})`}>\n            <MorphPath d={area} className='fill-primary/12' />\n            <MorphPath d={line} className={cn(LINE_STROKE, 'stroke-primary')} />\n          </g>\n          <g clipPath={`url(#${belowClipId})`}>\n            <MorphPath d={area} className='fill-destructive/12' />\n            <MorphPath\n              d={line}\n              className={cn(LINE_STROKE, 'stroke-destructive')}\n            />\n          </g>\n        </PathLayer>\n        <div\n          aria-hidden='true'\n          className={cn('pointer-events-none absolute inset-x-0 top-0', GLIDE)}\n          style={{ transform: `translateY(${levelY}px)` }}\n        >\n          <span className='hairline-t border-foreground/40 absolute inset-x-0 top-0' />\n        </div>\n        <div\n          aria-hidden='true'\n          className={cn(\n            'pointer-events-none absolute top-0 left-0 size-0',\n            GLIDE\n          )}\n          style={{ transform: `translate(${levelShare}cqw, ${levelY}px)` }}\n        >\n          <span className='bg-foreground ring-card absolute size-2.5 -translate-1/2 rounded-full ring-2' />\n        </div>\n        <Readout\n          ratio={columnCenterOf(shownIndex, Math.max(count, 1))}\n          top={Math.min(shownTop, levelY)}\n          isVisible={isReadoutShown}\n          isGliding={reading.isGliding}\n          marks={<ReadoutDot top={shownTop} color={SIDE_COLOR[shownSide]} />}\n        >\n          <ReadoutTitle>{shownLabel}</ReadoutTitle>\n          <ReadoutRow value={shownValue} name={valueNoun} />\n          <ReadoutRow\n            value={shownGap}\n            name={shownComparison}\n            color={SIDE_COLOR[shownSide]}\n          />\n        </Readout>\n      </PlotFrame>\n      <p className='text-muted-foreground text-xs'>\n        Click a {positionNoun}, or press Enter on it, to compare from there\n      </p>\n      <LiveRegion\n        message={readingAloud(reading.isReadingByKeys, spokenReading)}\n      />\n      <DataTable\n        caption={`${title}, compared with ${levelLabel}`}\n        columns={[positionNoun, valueNoun, `Against ${levelLabel}`]}\n        rows={rows}\n      />\n    </ChartCard>\n  );\n}\n\nconst DAYS = dayLabelsOf('2026-03-01', 30);\n\nconst SIGNUPS = [\n  92, 96, 101, 98, 104, 88, 84, 99, 105, 109, 112, 108, 86, 82, 97, 94, 90, 93,\n  79, 76, 88, 95, 104, 110, 118, 121, 104, 99, 124, 128,\n];\n\n/** The day the demonstration starts from, and the two it compares from in turn. */\nconst FIRST_LEVEL = 11;\n\nconst DIP_LEVEL = 19;\n\nconst PEAK_LEVEL = 25;\n\nconst WALK_STEP_MS = 150;\n\nexport default function Chart04() {\n  const [baselineIndex, setBaselineIndex] = useState(FIRST_LEVEL);\n  const [guide, setGuide] = useState<number | null>(null);\n\n  function resetDemo() {\n    setBaselineIndex(FIRST_LEVEL);\n    setGuide(null);\n  }\n\n  const toDip = positionsTo(FIRST_LEVEL, DIP_LEVEL);\n  const toPeak = positionsTo(DIP_LEVEL, PEAK_LEVEL);\n  const backToFirst = positionsTo(PEAK_LEVEL, FIRST_LEVEL);\n  const steps: AutoplayStep[] = [\n    { after: 1200, run: () => setGuide(FIRST_LEVEL) },\n    ...walkSteps(toDip, setGuide, { startAfter: 500, stepMs: WALK_STEP_MS }),\n    { after: 500, run: () => setBaselineIndex(DIP_LEVEL) },\n    ...walkSteps(toPeak, setGuide, { startAfter: 1900, stepMs: WALK_STEP_MS }),\n    { after: 500, run: () => setBaselineIndex(PEAK_LEVEL) },\n    ...walkSteps(backToFirst, setGuide, {\n      startAfter: 1900,\n      stepMs: WALK_STEP_MS,\n    }),\n    { after: 500, run: () => setBaselineIndex(FIRST_LEVEL) },\n    { after: 1200, run: () => setGuide(null) },\n    { after: 800, run: hold },\n  ];\n  const { ref, isAutoplaying, stopOnKeyboardFocus } = useChartDemo(steps, {\n    loopAfter: 1800,\n    onReset: resetDemo,\n  });\n\n  return (\n    <div\n      ref={ref}\n      onFocus={stopOnKeyboardFocus}\n      className='flex min-h-[23.5rem] w-full max-w-[34rem]'\n    >\n      <BaselineChart\n        title='Signups per day'\n        note='Illustrative'\n        labels={DAYS}\n        values={SIGNUPS}\n        baselineIndex={baselineIndex}\n        onBaselineChange={setBaselineIndex}\n        valueNoun='signups'\n        guideIndex={whileDemonstrating(isAutoplaying, guide)}\n        className='w-full'\n      />\n    </div>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/chart/chart-04.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/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/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"
    },
    {
      "path": "registry/ndeko/components/chart/_parts/use-svg-id.ts",
      "content": "'use client';\n\nimport { useId } from 'react';\n\nconst UNSAFE_CHARACTERS = /[^a-zA-Z0-9_-]/g;\n\n/**\n * An id for a clip path or a gradient, unique to one instance of a chart so two of them on a page\n * never share one. The characters React puts in its ids are dropped: they are not safe inside the\n * `url(#...)` that points at the id.\n */\nexport function useSvgId(name: string) {\n  const id = useId();\n  const safeId = id.replace(UNSAFE_CHARACTERS, '');\n  return `${name}-${safeId}`;\n}\n",
      "type": "registry:component",
      "target": "components/chart/_parts/use-svg-id.ts"
    }
  ],
  "categories": [
    "components",
    "chart"
  ],
  "type": "registry:component"
}