@misoto22/folio 0.0.0 → 0.16.0

package/dist/charts/lib/paint.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/charts/lib/paint.tsx"],"sourcesContent":["'use client'\n\nimport type { ReactNode } from 'react'\nimport { motion } from 'motion/react'\nimport type { ChartConfig } from './chart'\nimport { colorStops } from './chart'\n\n/**\n * The intro wipe's direction, shared by every mark that has one.\n *\n * Named for the DATA rather than for the screen. `forward` runs from the first\n * row to the last, `reverse` the other way — which is the thing the author\n * actually means, and stays true in a right-to-left document, where a cartesian\n * plot is still drawn first-row-first.\n *\n * `\"none\"` opts out, and is also what a device with the OS reduce-motion\n * preference falls back to: a reveal is a per-frame animated SVG mask, the\n * heaviest thing in the package and the least welcome to a reader who has\n * asked for stillness.\n */\nexport type ChartRevealType = 'none' | 'forward' | 'reverse' | 'center-out' | 'edges-in'\n\n/** A reveal that actually plays. */\nexport type ChartRevealDirection = Exclude<ChartRevealType, 'none'>\n\n/** The intro wipe, in seconds. */\nexport const REVEAL_DURATION = 1\n\n/**\n * The wipe's curve. Not `--ease`: the system's easing is tuned for a control\n * moving a few pixels, and over a full plot width it arrives too abruptly.\n * A long, flat tail is what makes a line read as being drawn.\n */\nexport const REVEAL_EASE: [number, number, number, number] = [0, 0.7, 0.5, 1]\n\n/** The edge a single-rect wipe grows from: 0 the start, 1 the end, 0.5 the middle. */\nconst REVEAL_ORIGIN: Record<Exclude<ChartRevealDirection, 'edges-in'>, number> = {\n  forward: 0,\n  reverse: 1,\n  'center-out': 0.5,\n}\n\n/**\n * The mask that draws a line or an area in.\n *\n * One mask covers the mark's fill, its stroke AND its resting dots, so the\n * three arrive together. Drawn separately — which is what Recharts' own\n * animation does — the dots pop in before the line reaches them.\n *\n * Both `maskUnits` and `maskContentUnits` are user space so every masked\n * element shares one coordinate system and the wipe edge lands at the same x\n * on each of them.\n */\nexport function RevealMask({ id, type }: { id: string; type: ChartRevealDirection }) {\n  const reveal = {\n    initial: { scaleX: 0 },\n    animate: { scaleX: 1 },\n    transition: { duration: REVEAL_DURATION, ease: REVEAL_EASE },\n  }\n\n  return (\n    <mask\n      id={`${id}-reveal-mask`}\n      maskUnits=\"userSpaceOnUse\"\n      maskContentUnits=\"userSpaceOnUse\"\n      x=\"0\"\n      y=\"0\"\n      width=\"100%\"\n      height=\"100%\"\n    >\n      {type === 'edges-in' ? (\n        <>\n          <motion.rect\n            {...reveal}\n            x=\"0\"\n            y=\"0\"\n            width=\"50%\"\n            height=\"100%\"\n            fill=\"white\"\n            style={{ originX: 0 }}\n          />\n          <motion.rect\n            {...reveal}\n            x=\"50%\"\n            y=\"0\"\n            width=\"50%\"\n            height=\"100%\"\n            fill=\"white\"\n            style={{ originX: 1 }}\n          />\n        </>\n      ) : (\n        <motion.rect\n          {...reveal}\n          x=\"0\"\n          y=\"0\"\n          width=\"100%\"\n          height=\"100%\"\n          fill=\"white\"\n          style={{ originX: REVEAL_ORIGIN[type] }}\n        />\n      )}\n    </mask>\n  )\n}\n\nexport interface PaintProps {\n  /** The owning mark's id, which scopes every definition below. */\n  id: string\n  /** The series being painted. */\n  dataKey: string\n}\n\n/**\n * The one gradient everything else is masked out of.\n *\n * Every fill variant, every stroke and every dot in a chart paints from this,\n * which is what makes a series a single visual object rather than a set of\n * elements that happen to share a colour. A series with one colour still gets a\n * two-stop gradient: it keeps the paint reference identical across variants, so\n * switching a series from one colour to three changes no other code.\n */\nexport function SeriesGradient({\n  id,\n  dataKey,\n  config,\n  direction = 'horizontal',\n  gradientUnits,\n}: PaintProps & {\n  config: ChartConfig\n  /** Horizontal reads along the axis; vertical reads up the mark. */\n  direction?: 'horizontal' | 'vertical'\n  gradientUnits?: 'userSpaceOnUse' | 'objectBoundingBox'\n}) {\n  const stops = colorStops(config[dataKey])\n  const axis =\n    direction === 'vertical'\n      ? { x1: '0', y1: '0', x2: '0', y2: '1' }\n      : { x1: '0', y1: '0', x2: '1', y2: '0' }\n\n  return (\n    <linearGradient id={`${id}-colors-${dataKey}`} {...axis} gradientUnits={gradientUnits}>\n      <ColorStops dataKey={dataKey} stops={stops} />\n    </linearGradient>\n  )\n}\n\n/**\n * The stops themselves, so a variant can build its own gradient from them.\n *\n * `opacities` ramps the stops independently of their colour — a radar's fill\n * fades from its centre outward without needing a second gradient to mask it.\n */\nexport function ColorStops({\n  dataKey,\n  stops,\n  opacities,\n}: {\n  dataKey: string\n  stops: number\n  opacities?: number[]\n}) {\n  if (stops === 1) {\n    return (\n      <>\n        <stop offset=\"0%\" stopColor={`var(--color-${dataKey}-0)`} stopOpacity={opacities?.[0]} />\n        <stop\n          offset=\"100%\"\n          stopColor={`var(--color-${dataKey}-0)`}\n          stopOpacity={opacities?.[opacities.length - 1]}\n        />\n      </>\n    )\n  }\n\n  return (\n    <>\n      {Array.from({ length: stops }, (_, index) => {\n        const offset = `${(index / (stops - 1)) * 100}%`\n        return (\n          <stop\n            key={offset}\n            offset={offset}\n            stopColor={`var(--color-${dataKey}-${index}, var(--color-${dataKey}-0))`}\n            stopOpacity={opacities?.[index]}\n          />\n        )\n      })}\n    </>\n  )\n}\n\n/**\n * A texture, expressed once.\n *\n * Every fill variant in the package has the same three parts: a texture, a mask\n * built from it, and a pattern that paints the series gradient through that\n * mask. Writing those three out per variant — which is how this arrived — meant\n * six near-identical twenty-line blocks per chart type and four chart types\n * that each had their own copy.\n */\nfunction MaskedFill({\n  name,\n  id,\n  dataKey,\n  texture,\n  patternUnits = 'userSpaceOnUse',\n  patternContentUnits,\n  size = { width: '100%', height: '100%' },\n  maskContentUnits,\n  fill,\n}: PaintProps & {\n  /** The variant's name, which becomes its paint reference. */\n  name: string\n  /** The mask's contents — white shows the series through, black hides it. */\n  texture: ReactNode\n  patternUnits?: 'userSpaceOnUse' | 'objectBoundingBox'\n  patternContentUnits?: 'userSpaceOnUse' | 'objectBoundingBox'\n  size?: { width: string | number; height: string | number }\n  maskContentUnits?: 'userSpaceOnUse' | 'objectBoundingBox'\n  /** The paint the mask reveals. Defaults to the series gradient. */\n  fill?: string\n}) {\n  const maskId = `${id}-${name}-mask-${dataKey}`\n  const paint = fill ?? `url(#${id}-colors-${dataKey})`\n\n  return (\n    <>\n      <mask id={maskId} maskContentUnits={maskContentUnits}>\n        {texture}\n      </mask>\n      <pattern\n        id={`${id}-${name}-${dataKey}`}\n        patternUnits={patternUnits}\n        patternContentUnits={patternContentUnits}\n        width={size.width}\n        height={size.height}\n      >\n        <rect\n          x=\"0\"\n          y=\"0\"\n          width={size.width}\n          height={size.height}\n          fill={paint}\n          mask={`url(#${maskId})`}\n        />\n      </pattern>\n    </>\n  )\n}\n\n/* ── Area fills ───────────────────────────────────────────────────────────\n   Six ways an area meets the plot, and in the monochrome default they are the\n   PRIMARY way two series are told apart — the ramp is the second encoding. */\n\n/** Solid at the top, dissolving toward the axis. The default. */\nexport function AreaGradientFill({ id, dataKey }: PaintProps) {\n  return (\n    <>\n      <linearGradient id={`${id}-area-gradient-fade-${dataKey}`} x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n        <stop offset=\"0%\" stopColor=\"white\" stopOpacity=\"var(--chart-fill)\" />\n        <stop offset=\"100%\" stopColor=\"white\" stopOpacity={0} />\n      </linearGradient>\n      <MaskedFill\n        name=\"gradient\"\n        id={id}\n        dataKey={dataKey}\n        texture={\n          <rect\n            width=\"100%\"\n            height=\"100%\"\n            fill={`url(#${id}-area-gradient-fade-${dataKey})`}\n          />\n        }\n      />\n    </>\n  )\n}\n\n/** The same fade, run the other way — heavier where it meets the axis. */\nexport function AreaGradientReverseFill({ id, dataKey }: PaintProps) {\n  return (\n    <>\n      <linearGradient id={`${id}-area-reverse-fade-${dataKey}`} x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n        <stop offset=\"0%\" stopColor=\"white\" stopOpacity={0} />\n        <stop offset=\"100%\" stopColor=\"white\" stopOpacity=\"var(--chart-fill)\" />\n      </linearGradient>\n      <MaskedFill\n        name=\"gradient-reverse\"\n        id={id}\n        dataKey={dataKey}\n        texture={\n          <rect width=\"100%\" height=\"100%\" fill={`url(#${id}-area-reverse-fade-${dataKey})`} />\n        }\n      />\n    </>\n  )\n}\n\n/** One flat wash, no fade. Reads as a band rather than as a slope. */\nexport function AreaSolidFill({ id, dataKey }: PaintProps) {\n  return (\n    <MaskedFill\n      name=\"solid\"\n      id={id}\n      dataKey={dataKey}\n      texture={<rect width=\"100%\" height=\"100%\" fill=\"white\" fillOpacity=\"var(--chart-fill)\" />}\n    />\n  )\n}\n\n/** A field of dots. The lightest texture, and the one that stacks best. */\nexport function AreaDottedFill({ id, dataKey }: PaintProps) {\n  return (\n    <>\n      <pattern\n        id={`${id}-area-dotted-texture-${dataKey}`}\n        x=\"0\"\n        y=\"0\"\n        width=\"6\"\n        height=\"6\"\n        patternUnits=\"userSpaceOnUse\"\n      >\n        <circle cx=\"4\" cy=\"4\" r=\"0.5\" fill=\"white\" />\n      </pattern>\n      <MaskedFill\n        name=\"dotted\"\n        id={id}\n        dataKey={dataKey}\n        texture={\n          <rect\n            width=\"100%\"\n            height=\"100%\"\n            fill={`url(#${id}-area-dotted-texture-${dataKey})`}\n            fillOpacity=\"var(--chart-texture)\"\n          />\n        }\n      />\n    </>\n  )\n}\n\n/** Diagonal rule lines, 45°. */\nexport function AreaLinesFill({ id, dataKey }: PaintProps) {\n  return (\n    <>\n      <pattern\n        id={`${id}-area-lines-texture-${dataKey}`}\n        patternUnits=\"userSpaceOnUse\"\n        width=\"5\"\n        height=\"5\"\n        patternTransform=\"rotate(45)\"\n      >\n        <line x1=\"0\" y1=\"0\" x2=\"0\" y2=\"5\" stroke=\"white\" strokeWidth=\"1\" />\n      </pattern>\n      <MaskedFill\n        name=\"lines\"\n        id={id}\n        dataKey={dataKey}\n        texture={\n          <rect\n            width=\"100%\"\n            height=\"100%\"\n            fill={`url(#${id}-area-lines-texture-${dataKey})`}\n            fillOpacity=\"var(--chart-texture)\"\n          />\n        }\n      />\n    </>\n  )\n}\n\n/** Wide soft-edged stripes at 20°. The heaviest of the six. */\nexport function AreaHatchedFill({ id, dataKey }: PaintProps) {\n  return (\n    <>\n      <linearGradient id={`${id}-area-hatched-stripe-${dataKey}`} x1=\"0\" y1=\"0\" x2=\"1\" y2=\"0\">\n        <stop offset=\"50%\" stopColor=\"white\" stopOpacity={0.2} />\n        <stop offset=\"50%\" stopColor=\"white\" stopOpacity={1} />\n      </linearGradient>\n      <pattern\n        id={`${id}-area-hatched-texture-${dataKey}`}\n        x=\"0\"\n        y=\"0\"\n        width=\"20\"\n        height=\"10\"\n        patternUnits=\"userSpaceOnUse\"\n        overflow=\"visible\"\n        patternTransform=\"rotate(20)\"\n      >\n        <rect width=\"20\" height=\"10\" fill={`url(#${id}-area-hatched-stripe-${dataKey})`} />\n      </pattern>\n      <MaskedFill\n        name=\"hatched\"\n        id={id}\n        dataKey={dataKey}\n        texture={\n          <rect\n            width=\"100%\"\n            height=\"100%\"\n            fill={`url(#${id}-area-hatched-texture-${dataKey})`}\n            fillOpacity=\"var(--chart-texture)\"\n          />\n        }\n      />\n    </>\n  )\n}\n\n/**\n * What a series looks like when another one is selected.\n *\n * A thin diagonal rule rather than a lower opacity: opacity alone makes a\n * series faint, and a faint area on a white ground is still an area. The\n * texture change is what makes it read as \"not this one\".\n */\nexport function UnselectedFill({ id, dataKey }: PaintProps) {\n  return (\n    <>\n      <pattern\n        id={`${id}-unselected-texture-${dataKey}`}\n        patternUnits=\"userSpaceOnUse\"\n        width=\"5\"\n        height=\"5\"\n        patternTransform=\"rotate(45)\"\n      >\n        <line x1=\"0\" y1=\"0\" x2=\"0\" y2=\"5\" stroke=\"white\" strokeWidth=\"1\" />\n      </pattern>\n      <MaskedFill\n        name=\"unselected\"\n        id={id}\n        dataKey={dataKey}\n        texture={\n          <rect\n            width=\"100%\"\n            height=\"100%\"\n            fill={`url(#${id}-unselected-texture-${dataKey})`}\n            fillOpacity=\"var(--chart-texture)\"\n          />\n        }\n      />\n    </>\n  )\n}\n\n/* ── Bar fills ────────────────────────────────────────────────────────────\n   A bar is a solid block, so its textures are denser than an area's — the eye\n   has less of it to read and the mark can carry more. */\n\n/** 45° stripes over a faint ground. */\nexport function BarHatchedFill({ id, dataKey }: PaintProps) {\n  return (\n    <>\n      <pattern\n        id={`${id}-bar-hatched-texture-${dataKey}`}\n        x=\"0\"\n        y=\"0\"\n        width=\"5\"\n        height=\"5\"\n        patternUnits=\"userSpaceOnUse\"\n        patternTransform=\"rotate(-45)\"\n      >\n        <rect width=\"5\" height=\"5\" fill=\"white\" fillOpacity={0.3} />\n        <rect width=\"1.5\" height=\"5\" fill=\"white\" fillOpacity={1} />\n      </pattern>\n      <MaskedFill\n        name=\"hatched\"\n        id={id}\n        dataKey={dataKey}\n        texture={<rect width=\"100%\" height=\"100%\" fill={`url(#${id}-bar-hatched-texture-${dataKey})`} />}\n      />\n    </>\n  )\n}\n\n/**\n * Stripes with nothing behind them — the projected, not-yet-real part of a\n * series. Used by the last bar when `buffer` is set.\n */\nexport function BarBufferFill({ id, dataKey }: PaintProps) {\n  return (\n    <>\n      <pattern\n        id={`${id}-bar-buffer-texture-${dataKey}`}\n        x=\"0\"\n        y=\"0\"\n        width=\"5\"\n        height=\"5\"\n        patternUnits=\"userSpaceOnUse\"\n        patternTransform=\"rotate(-45)\"\n      >\n        <rect width=\"5\" height=\"5\" fill=\"black\" fillOpacity={0} />\n        <rect width=\"1\" height=\"5\" fill=\"white\" fillOpacity={1} />\n      </pattern>\n      <MaskedFill\n        name=\"buffer\"\n        id={id}\n        dataKey={dataKey}\n        texture={<rect width=\"100%\" height=\"100%\" fill={`url(#${id}-bar-buffer-texture-${dataKey})`} />}\n      />\n    </>\n  )\n}\n\n/**\n * A bar split down its own middle, one half at full weight.\n *\n * Everything here is in object-bounding-box units so the split lands at each\n * bar's centre rather than at the plot's — in user space a narrow bar at the\n * right of the chart would be entirely on one side of the seam.\n */\nexport function BarDuotoneFill({\n  id,\n  dataKey,\n  config,\n  reverse = false,\n}: PaintProps & { config: ChartConfig; reverse?: boolean }) {\n  const name = reverse ? 'duotone-reverse' : 'duotone'\n  const stops = colorStops(config[dataKey])\n\n  return (\n    <>\n      <linearGradient\n        id={`${id}-${name}-split-${dataKey}`}\n        gradientUnits=\"objectBoundingBox\"\n        x1=\"0\"\n        y1=\"0\"\n        x2=\"1\"\n        y2=\"0\"\n      >\n        <stop offset=\"50%\" stopColor=\"white\" stopOpacity={reverse ? 1 : 0.4} />\n        <stop offset=\"50%\" stopColor=\"white\" stopOpacity={reverse ? 0.4 : 1} />\n      </linearGradient>\n      <linearGradient\n        id={`${id}-${name}-colors-${dataKey}`}\n        gradientUnits=\"objectBoundingBox\"\n        x1=\"0\"\n        y1=\"0\"\n        x2=\"0\"\n        y2=\"1\"\n      >\n        <ColorStops dataKey={dataKey} stops={stops} />\n      </linearGradient>\n      <MaskedFill\n        name={name}\n        id={id}\n        dataKey={dataKey}\n        patternUnits=\"objectBoundingBox\"\n        patternContentUnits=\"objectBoundingBox\"\n        maskContentUnits=\"objectBoundingBox\"\n        size={{ width: 1, height: 1 }}\n        fill={`url(#${id}-${name}-colors-${dataKey})`}\n        texture={\n          <rect\n            x=\"0\"\n            y=\"0\"\n            width=\"1\"\n            height=\"1\"\n            fill={`url(#${id}-${name}-split-${dataKey})`}\n          />\n        }\n      />\n    </>\n  )\n}\n\n/** Solid at the top of the bar, dissolving toward the baseline. */\nexport function BarGradientFill({ id, dataKey }: PaintProps) {\n  return (\n    <>\n      <linearGradient id={`${id}-bar-gradient-fade-${dataKey}`} x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n        <stop offset=\"20%\" stopColor=\"white\" stopOpacity={1} />\n        <stop offset=\"90%\" stopColor=\"white\" stopOpacity={0} />\n      </linearGradient>\n      <MaskedFill\n        name=\"gradient\"\n        id={id}\n        dataKey={dataKey}\n        texture={<rect width=\"100%\" height=\"100%\" fill={`url(#${id}-bar-gradient-fade-${dataKey})`} />}\n      />\n    </>\n  )\n}\n\n/**\n * A faint body under a solid cap, drawn by the bar shape itself.\n *\n * The variant that survives density best: at twenty bars a solid block becomes\n * a wall, and a 2px cap over a wash still reads as twenty distinct values.\n */\nexport function BarStrippedFill({ id, dataKey }: PaintProps) {\n  return (\n    <MaskedFill\n      name=\"stripped\"\n      id={id}\n      dataKey={dataKey}\n      texture={<rect width=\"100%\" height=\"100%\" fill=\"white\" fillOpacity=\"var(--chart-fill)\" />}\n    />\n  )\n}\n\n/**\n * The halo behind a highlighted mark.\n *\n * The one blur in the package, and it is a filter on a MARK rather than a\n * box-shadow under a panel — law 2 bans the second, not the first. It exists\n * because a monochrome chart has no \"brighter\" to reach for when one series has\n * to be the point of the figure.\n *\n * A line needs a wider, stronger halo than a bar: a 0.8px stroke has almost no\n * area to bleed from, where a bar has its whole face.\n */\nexport function GlowFilter({\n  id,\n  dataKey,\n  spread = 8,\n  intensity = 0.5,\n}: PaintProps & {\n  /** Blur radius, in user units. */\n  spread?: number\n  /** Alpha multiplier on the blurred copy. Above 1 saturates it. */\n  intensity?: number\n}) {\n  return (\n    <filter id={`${id}-glow-${dataKey}`} x=\"-100%\" y=\"-100%\" width=\"300%\" height=\"300%\">\n      <feGaussianBlur in=\"SourceGraphic\" stdDeviation={spread} result=\"blur\" />\n      <feColorMatrix\n        in=\"blur\"\n        type=\"matrix\"\n        values={`1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 ${intensity} 0`}\n        result=\"glow\"\n      />\n      <feMerge>\n        <feMergeNode in=\"glow\" />\n        <feMergeNode in=\"SourceGraphic\" />\n      </feMerge>\n    </filter>\n  )\n}\n\n/**\n * A dashed stroke that crawls along its own path.\n *\n * SMIL rather than CSS, because the two attributes have to stay in lockstep and\n * a CSS animation on `stroke-dasharray` is not interpolated the same way in\n * every engine. It is composed as a CHILD of the mark, so a caller that does\n * not ask for it pays nothing — and `keyframes.css`'s reduced-motion rule\n * cannot reach SMIL, which is why the call sites gate it on `useReducedMotion`\n * instead.\n */\nexport function AnimatedDashedStroke({ dash = 3 }: { dash?: number }) {\n  return (\n    <>\n      <animate\n        attributeName=\"stroke-dasharray\"\n        values={`${dash} ${dash}; 0 ${dash}; ${dash} ${dash}`}\n        dur=\"1s\"\n        repeatCount=\"indefinite\"\n        keyTimes=\"0;0.5;1\"\n      />\n      <animate\n        attributeName=\"stroke-dashoffset\"\n        values={`0; -${dash * 2}`}\n        dur=\"1s\"\n        repeatCount=\"indefinite\"\n        keyTimes=\"0;1\"\n      />\n    </>\n  )\n}\n"],"mappings":"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","names":[]}

package/dist/charts/lib/scale.d.ts

@@ -0,0 +1,23 @@
+/**
+ * Where a value sits on a linear scale, and what to do when the scale has no
+ * width.
+ *
+ * The three engine-less forms — `Sparkline`, `Heatmap`, `BulletChart` — each
+ * normalise a value into a 0-to-1 position, and each had answered the
+ * degenerate case differently: the heatmap put a constant grid in the middle of
+ * its ramp, the bullet chart put a constant measure at the start of its track,
+ * and the sparkline divided by a substituted `1` and so drew every flat run
+ * along the floor. A flat run along the floor is the worst of the three,
+ * because in a column of sparklines "unchanged" and "pinned at its worst" is
+ * the one distinction the reader is scanning for.
+ *
+ * The middle is the honest answer: a scale with no width cannot rank anything,
+ * so no position on it is more true than another, and the centre is the only
+ * one that does not read as a verdict.
+ */
+/** Where `value` sits between `min` and `max`, 0 to 1. Not held to the ends. */
+declare function fraction(value: number, min: number, max: number): number;
+/** `fraction`, held inside the track. */
+declare function clampedFraction(value: number, min: number, max: number): number;
+
+export { clampedFraction, fraction };

package/dist/charts/lib/scale.js

@@ -0,0 +1,13 @@
+function fraction(value, min, max) {
+  const span = max - min;
+  if (span === 0) return 0.5;
+  return (value - min) / span;
+}
+function clampedFraction(value, min, max) {
+  return Math.min(1, Math.max(0, fraction(value, min, max)));
+}
+export {
+  clampedFraction,
+  fraction
+};
+//# sourceMappingURL=scale.js.map

package/dist/charts/lib/scale.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/charts/lib/scale.ts"],"sourcesContent":["/**\n * Where a value sits on a linear scale, and what to do when the scale has no\n * width.\n *\n * The three engine-less forms — `Sparkline`, `Heatmap`, `BulletChart` — each\n * normalise a value into a 0-to-1 position, and each had answered the\n * degenerate case differently: the heatmap put a constant grid in the middle of\n * its ramp, the bullet chart put a constant measure at the start of its track,\n * and the sparkline divided by a substituted `1` and so drew every flat run\n * along the floor. A flat run along the floor is the worst of the three,\n * because in a column of sparklines \"unchanged\" and \"pinned at its worst\" is\n * the one distinction the reader is scanning for.\n *\n * The middle is the honest answer: a scale with no width cannot rank anything,\n * so no position on it is more true than another, and the centre is the only\n * one that does not read as a verdict.\n */\n\n/** Where `value` sits between `min` and `max`, 0 to 1. Not held to the ends. */\nexport function fraction(value: number, min: number, max: number): number {\n  const span = max - min\n  if (span === 0) return 0.5\n  return (value - min) / span\n}\n\n/** `fraction`, held inside the track. */\nexport function clampedFraction(value: number, min: number, max: number): number {\n  return Math.min(1, Math.max(0, fraction(value, min, max)))\n}\n"],"mappings":"AAmBO,SAAS,SAAS,OAAe,KAAa,KAAqB;AACxE,QAAM,OAAO,MAAM;AACnB,MAAI,SAAS,EAAG,QAAO;AACvB,UAAQ,QAAQ,OAAO;AACzB;AAGO,SAAS,gBAAgB,OAAe,KAAa,KAAqB;AAC/E,SAAO,KAAK,IAAI,GAAG,KAAK,IAAI,GAAG,SAAS,OAAO,KAAK,GAAG,CAAC,CAAC;AAC3D;","names":[]}

package/dist/charts/lib/selection.d.ts

@@ -0,0 +1,20 @@
+/**
+ * A chart's selected series, sector, bar or node — controlled or not.
+ *
+ * Nine charts each grew a `defaultSelected*` prop and a `useState` seeded from
+ * it, and none of them grew the other half. A default seeds the state ONCE:
+ * pass a new one and nothing happens, because the state was already
+ * initialised. So a call site that wanted a chart's selection to follow a
+ * filter, a route or a sibling chart had no way to say so — the prop that looks
+ * like the way to do it silently is not.
+ *
+ * The pair is the React convention and it is the whole fix: pass `selected` to
+ * drive it from outside, or leave it undefined and the chart keeps its own.
+ *
+ * @param selected The controlled value. `undefined` leaves the chart in charge.
+ * @param fallback What an uncontrolled chart starts on.
+ * @param onChange Fires on every change, controlled or not.
+ */
+declare function useChartSelection(selected: string | null | undefined, fallback: string | null, onChange: ((selected: string | null) => void) | undefined): [string | null, (next: string | null) => void];
+
+export { useChartSelection };

package/dist/charts/lib/selection.js

@@ -0,0 +1,18 @@
+"use client";
+import { useCallback, useState } from "react";
+function useChartSelection(selected, fallback, onChange) {
+  const [own, setOwn] = useState(fallback);
+  const isControlled = selected !== void 0;
+  const select = useCallback(
+    (next) => {
+      setOwn(next);
+      onChange?.(next);
+    },
+    [onChange]
+  );
+  return [isControlled ? selected : own, select];
+}
+export {
+  useChartSelection
+};
+//# sourceMappingURL=selection.js.map

package/dist/charts/lib/selection.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/charts/lib/selection.ts"],"sourcesContent":["'use client'\n\nimport { useCallback, useState } from 'react'\n\n/**\n * A chart's selected series, sector, bar or node — controlled or not.\n *\n * Nine charts each grew a `defaultSelected*` prop and a `useState` seeded from\n * it, and none of them grew the other half. A default seeds the state ONCE:\n * pass a new one and nothing happens, because the state was already\n * initialised. So a call site that wanted a chart's selection to follow a\n * filter, a route or a sibling chart had no way to say so — the prop that looks\n * like the way to do it silently is not.\n *\n * The pair is the React convention and it is the whole fix: pass `selected` to\n * drive it from outside, or leave it undefined and the chart keeps its own.\n *\n * @param selected The controlled value. `undefined` leaves the chart in charge.\n * @param fallback What an uncontrolled chart starts on.\n * @param onChange Fires on every change, controlled or not.\n */\nexport function useChartSelection(\n  selected: string | null | undefined,\n  fallback: string | null,\n  onChange: ((selected: string | null) => void) | undefined,\n): [string | null, (next: string | null) => void] {\n  const [own, setOwn] = useState<string | null>(fallback)\n  const isControlled = selected !== undefined\n\n  const select = useCallback(\n    (next: string | null) => {\n      // The controlled chart still updates its own copy. It is never read while\n      // `selected` is given, and it means an unmount of the controlling prop\n      // does not throw the selection away.\n      setOwn(next)\n      onChange?.(next)\n    },\n    [onChange],\n  )\n\n  return [isControlled ? selected : own, select]\n}\n"],"mappings":";AAEA,SAAS,aAAa,gBAAgB;AAmB/B,SAAS,kBACd,UACA,UACA,UACgD;AAChD,QAAM,CAAC,KAAK,MAAM,IAAI,SAAwB,QAAQ;AACtD,QAAM,eAAe,aAAa;AAElC,QAAM,SAAS;AAAA,IACb,CAAC,SAAwB;AAIvB,aAAO,IAAI;AACX,iBAAW,IAAI;AAAA,IACjB;AAAA,IACA,CAAC,QAAQ;AAAA,EACX;AAEA,SAAO,CAAC,eAAe,WAAW,KAAK,MAAM;AAC/C;","names":[]}

package/dist/charts/lib/sonify-control.d.ts

@@ -0,0 +1,163 @@
+import * as react from 'react';
+import { FC } from 'react';
+import { ChartConfig } from './chart.js';
+import { SonifyOptions, SonifyPoint, SonifySeries, SonifyState } from './sonify.js';
+import 'recharts';
+
+/**
+ * A chart's rows, flattened into what the engine plays.
+ *
+ * Anything that is not a finite number becomes a gap rather than a zero. A
+ * missing month is not a month with no visitors, and sounding it as the bottom
+ * of the range would invent a crash that never happened.
+ *
+ * A series whose `label` is not text falls back to its key: the label is spoken,
+ * and an icon cannot be.
+ */
+declare function chartSonifySeries(rows: Record<string, unknown>[], config: ChartConfig, xDataKey?: string, keys?: string[]): SonifySeries[];
+interface UseSonifyOptions extends SonifyOptions {
+    /**
+     * What the run is called. Spoken once, when the last note has finished, so a
+     * listener knows the silence is the end rather than a stall.
+     */
+    name?: string;
+    /**
+     * Fires as each point sounds, and with `null` between series.
+     *
+     * The hook already tracks this for you (`activePoint`); this is for a call
+     * site that wants to drive something else — a reference line on the plot, a
+     * row highlight in a table beside it.
+     */
+    onPointChange?: (point: SonifyPoint | null) => void;
+}
+interface UseSonifyResult {
+    state: SonifyState;
+    isPlaying: boolean;
+    /** False where the browser has no Web Audio. Resolved after mount, never during render. */
+    isSupported: boolean;
+    /** The point sounding right now, or `null` between series and at rest. */
+    activePoint: SonifyPoint | null;
+    /** The latest text for a live region — a series' range, or the end of the run. */
+    announcement: string;
+    /** Starts, or resumes. Call it from an event handler and nowhere else. */
+    play: () => void;
+    pause: () => void;
+    stop: () => void;
+    /** Play when idle or paused, pause when playing — what one button needs. */
+    toggle: () => void;
+    /** How long the whole run takes, in milliseconds. */
+    durationMs: number;
+}
+/**
+ * Plays a set of series as pitch over time, and reports what is sounding.
+ *
+ * The controller is rebuilt whenever the data or the tuning changes and the
+ * previous one is destroyed with it, so a brush drag or an unmount cancels
+ * every pending timer and releases the audio hardware. No `AudioContext` is
+ * constructed until the first `play()`.
+ *
+ * @example
+ * const series = useMemo(() => chartSonifySeries(rows, config, 'month'), [rows, config])
+ * const { toggle, isPlaying, announcement } = useSonify(series, { name: 'Visitors per month' })
+ *
+ * return (
+ *   <>
+ *     <button type="button" onClick={toggle}>{isPlaying ? 'Pause' : 'Play'}</button>
+ *     <span role="status" aria-live="polite" className="sr-only">{announcement}</span>
+ *   </>
+ * )
+ */
+declare function useSonify(series: SonifySeries[], options?: UseSonifyOptions): UseSonifyResult;
+/** Where the control sits above the plot. */
+type SonifyAlign = 'start' | 'end';
+interface SonifyProps extends SonifyOptions {
+    /**
+     * Which series play, in order. Defaults to every series in the chart's
+     * config.
+     *
+     * Worth narrowing on a chart with four series: sequential playback means four
+     * runs, and a listener rarely wants all of them.
+     */
+    keys?: string[];
+    /** Where the control sits above the plot. */
+    align?: SonifyAlign;
+    /** Overrides the control's visible label. */
+    label?: string;
+    /**
+     * Fires as each point sounds, and with `null` between series — for a call
+     * site that wants to mark the point on the plot itself.
+     */
+    onPointChange?: (point: SonifyPoint | null) => void;
+    /** Merged onto the control row, last. */
+    className?: string;
+}
+/**
+ * Plays this chart's values as sound.
+ *
+ * A slot: it renders nothing, and the chart root reads its props — the same
+ * shape as `<Chart.Values>`. Composing it is what adds the control above the
+ * plot, so a chart that does not ask for sonification ships none of it.
+ *
+ * Reach for it on the charts where a run of values over an axis IS the reading:
+ * a line, an area, a bar series over time. It is not offered on a pie or a
+ * treemap, where there is no order for the notes to be in.
+ *
+ * @example
+ * <LineChart title="Visitors per month" config={config} data={data} xDataKey="month">
+ *   <LineChart.Sonify />
+ *   <LineChart.XAxis dataKey="month" />
+ *   <LineChart.Line dataKey="desktop" />
+ * </LineChart>
+ */
+declare const Sonify: FC<SonifyProps>;
+/**
+ * What a chart root calls to turn its composed `<Chart.Sonify />` slot and its
+ * on-screen rows into playable series.
+ *
+ * The memo is keyed on the VALUE of the slot's `keys`, not on its identity: a
+ * slot's props object is rebuilt on every parent render, so an identity
+ * dependency would replace the controller — and cancel whatever was playing —
+ * every time anything else on the page moved.
+ *
+ * Rows are the rows on screen, brush included. Sonifying the full data behind a
+ * brushed range would say something the picture does not.
+ *
+ * `rows` and `config` are compared by identity, as everywhere else in the
+ * package: a chart handed a freshly built `config` object on every render
+ * rebuilds its run each time, which stops playback. Define both outside the
+ * render, which is what every example here does.
+ */
+declare function useChartSonifySeries(slot: SonifyProps | null, rows: Record<string, unknown>[], config: ChartConfig, xDataKey?: string): SonifySeries[];
+interface ChartSonifyButtonProps extends SonifyProps {
+    /** The figure's name. Spoken as part of the control's accessible name. */
+    title: string;
+    /** The series to play, already flattened — see `chartSonifySeries`. */
+    series: SonifySeries[];
+}
+/**
+ * The control that starts a chart's sonification.
+ *
+ * A real `<button>`, because this is the whole point of the feature: an audio
+ * reading that a keyboard cannot reach is not an accessibility feature. The
+ * visible label is the verb only — "Play", "Pause" — and the rest of the
+ * accessible name is visually hidden, so the name still contains the visible
+ * text verbatim (WCAG 2.5.3) while a screen reader hears which figure it
+ * belongs to.
+ *
+ * No `aria-pressed`. A toggle button announces as "pressed"/"not pressed",
+ * which for a transport control contradicts the label it is sitting on —
+ * "Pause, toggle button, pressed" leaves the listener to work out whether the
+ * chart is playing. A label that names the next action says it once.
+ *
+ * The live region carries the RANGE announcement before each series, not a line
+ * per point: a fourteen-point run would interrupt itself fourteen times and the
+ * listener would hear none of the tones. The per-point readout beside the
+ * button is `aria-hidden` for the same reason — it is there for a sighted
+ * reader following along.
+ *
+ * @example
+ * <ChartSonifyButton title="Visitors per month" series={series} />
+ */
+declare function ChartSonifyButton({ title, series, align, label, className, keys: _keys, onPointChange, formatValue, ...options }: ChartSonifyButtonProps): react.JSX.Element;
+
+export { ChartSonifyButton, type ChartSonifyButtonProps, Sonify, type SonifyAlign, type SonifyProps, type UseSonifyOptions, type UseSonifyResult, chartSonifySeries, Sonify as default, useChartSonifySeries, useSonify };

package/dist/charts/lib/sonify-control.js

@@ -0,0 +1,172 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { RiPauseLine, RiPlayLine, RiStopLine } from "@remixicon/react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { cn } from "../../lib/cn.js";
+import { Button } from "../../components/Button/Button.js";
+import { defaultTick } from "./format.js";
+import {
+  createSonification,
+  hasAudioSupport
+} from "./sonify.js";
+function categoryText(value) {
+  if (typeof value === "number") return value.toLocaleString();
+  if (typeof value === "string" || typeof value === "boolean") return String(value);
+  return "";
+}
+function chartSonifySeries(rows, config, xDataKey, keys) {
+  const wanted = keys ?? Object.keys(config);
+  const categories = xDataKey ? rows.map((row) => categoryText(row[xDataKey])) : void 0;
+  return wanted.filter((key) => key in config).map((key) => {
+    const label = config[key]?.label;
+    return {
+      key,
+      label: typeof label === "string" || typeof label === "number" ? String(label) : key,
+      values: rows.map((row) => {
+        const value = row[key];
+        return typeof value === "number" && Number.isFinite(value) ? value : null;
+      }),
+      categories
+    };
+  });
+}
+function useSonify(series, options = {}) {
+  const {
+    name,
+    onPointChange,
+    noteMs,
+    gapMs,
+    leadInMs,
+    rootFrequency,
+    semitones,
+    wave,
+    volume,
+    formatValue = defaultTick
+  } = options;
+  const [state, setState] = useState("idle");
+  const [activePoint, setActivePoint] = useState(null);
+  const [announcement, setAnnouncement] = useState("");
+  const [isSupported, setIsSupported] = useState(true);
+  const pointChange = useRef(onPointChange);
+  useEffect(() => {
+    pointChange.current = onPointChange;
+  }, [onPointChange]);
+  useEffect(() => {
+    setIsSupported(hasAudioSupport());
+  }, []);
+  const controller = useMemo(
+    () => createSonification({
+      series,
+      options: { noteMs, gapMs, leadInMs, rootFrequency, semitones, wave, volume, formatValue },
+      onPoint: (point) => {
+        setActivePoint(point);
+        pointChange.current?.(point);
+      },
+      onAnnounce: setAnnouncement,
+      onStateChange: setState,
+      onEnd: () => setAnnouncement(name ? `End of ${name}.` : "End of chart.")
+    }),
+    [series, noteMs, gapMs, leadInMs, rootFrequency, semitones, wave, volume, formatValue, name]
+  );
+  useEffect(() => {
+    setState("idle");
+    setActivePoint(null);
+    return () => controller.destroy();
+  }, [controller]);
+  const play = useCallback(() => controller.play(), [controller]);
+  const pause = useCallback(() => controller.pause(), [controller]);
+  const stop = useCallback(() => {
+    controller.stop();
+    setAnnouncement("");
+  }, [controller]);
+  const toggle = useCallback(() => {
+    if (controller.state === "playing") controller.pause();
+    else controller.play();
+  }, [controller]);
+  return {
+    state,
+    isPlaying: state === "playing",
+    isSupported,
+    activePoint,
+    announcement,
+    play,
+    pause,
+    stop,
+    toggle,
+    durationMs: controller.durationMs
+  };
+}
+const ALIGN = {
+  start: "justify-start",
+  end: "justify-end"
+};
+const Sonify = () => null;
+const NO_SERIES = [];
+const KEY_SEPARATOR = "\0";
+function useChartSonifySeries(slot, rows, config, xDataKey) {
+  const hasSlot = slot !== null;
+  const keys = slot?.keys?.join(KEY_SEPARATOR);
+  return useMemo(
+    () => hasSlot ? chartSonifySeries(rows, config, xDataKey, keys?.split(KEY_SEPARATOR)) : NO_SERIES,
+    [hasSlot, keys, rows, config, xDataKey]
+  );
+}
+function ChartSonifyButton({
+  title,
+  series,
+  align = "end",
+  label,
+  className,
+  keys: _keys,
+  onPointChange,
+  formatValue = defaultTick,
+  ...options
+}) {
+  const { state, isPlaying, isSupported, activePoint, announcement, stop, toggle } = useSonify(
+    series,
+    { ...options, formatValue, name: title, onPointChange }
+  );
+  const hasPoints = series.some((entry) => entry.values.some((value) => value !== null));
+  const isDisabled = !isSupported || !hasPoints;
+  const Icon = isPlaying ? RiPauseLine : RiPlayLine;
+  const reason = !isSupported ? " \u2014 audio is not available in this browser" : !hasPoints ? " \u2014 nothing to play" : "";
+  return /* @__PURE__ */ jsxs("div", { className: cn("mb-2 flex items-center gap-2", ALIGN[align], className), children: [
+    activePoint && // Visual only. The live region is deliberately not told about every
+    // point; see the component note above.
+    /* @__PURE__ */ jsxs("span", { "aria-hidden": true, className: "mono-meta truncate text-(--ink-3-aa)", children: [
+      activePoint.category ?? `#${activePoint.index + 1}`,
+      activePoint.value !== null && ` \xB7 ${formatValue(activePoint.value)}`
+    ] }),
+    state !== "idle" && /* @__PURE__ */ jsxs(Button, { variant: "ghost", size: "md", onClick: stop, children: [
+      /* @__PURE__ */ jsx(RiStopLine, { size: 14, "aria-hidden": true }),
+      "Stop",
+      /* @__PURE__ */ jsxs("span", { className: "sr-only", children: [
+        " playing ",
+        title,
+        " as sound"
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs(Button, { variant: "secondary", size: "md", onClick: toggle, disabled: isDisabled, children: [
+      /* @__PURE__ */ jsx(Icon, { size: 14, "aria-hidden": true }),
+      label ?? (isPlaying ? "Pause" : "Play"),
+      /* @__PURE__ */ jsxs("span", { className: "sr-only", children: [
+        " ",
+        isPlaying ? "playing" : "this chart",
+        " as sound: ",
+        title,
+        reason
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx("span", { role: "status", "aria-live": "polite", className: "sr-only", children: announcement })
+  ] });
+}
+var sonify_control_default = Sonify;
+export {
+  ChartSonifyButton,
+  Sonify,
+  chartSonifySeries,
+  sonify_control_default as default,
+  useChartSonifySeries,
+  useSonify
+};
+//# sourceMappingURL=sonify-control.js.map

package/dist/charts/lib/sonify-control.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/charts/lib/sonify-control.tsx"],"sourcesContent":["'use client'\n\nimport { RiPauseLine, RiPlayLine, RiStopLine } from '@remixicon/react'\nimport { useCallback, useEffect, useMemo, useRef, useState, type FC } from 'react'\nimport { cn } from '../../lib/cn'\nimport { Button } from '../../components/Button/Button'\nimport type { ChartConfig } from './chart'\nimport { defaultTick } from './format'\nimport {\n  createSonification,\n  hasAudioSupport,\n  type SonifyOptions,\n  type SonifyPoint,\n  type SonifySeries,\n  type SonifyState,\n} from './sonify'\n\n/**\n * The React surface over `sonify.ts` — a hook, a control, and the slot a chart\n * composes.\n *\n * Everything here obeys the one rule the engine is built around: **sound only\n * ever starts from an explicit user action.** There is no effect that plays, no\n * `autoPlay` prop, and no dependency change that can begin a run. That is not\n * the same conversation as `prefers-reduced-motion` — sound is not motion, and\n * reading a motion preference as \"no audio either\" would silence the readers\n * this feature exists for.\n */\n\n/** A cell as speakable text. Speech has no use for an object. */\nfunction categoryText(value: unknown): string {\n  if (typeof value === 'number') return value.toLocaleString()\n  if (typeof value === 'string' || typeof value === 'boolean') return String(value)\n  return ''\n}\n\n/**\n * A chart's rows, flattened into what the engine plays.\n *\n * Anything that is not a finite number becomes a gap rather than a zero. A\n * missing month is not a month with no visitors, and sounding it as the bottom\n * of the range would invent a crash that never happened.\n *\n * A series whose `label` is not text falls back to its key: the label is spoken,\n * and an icon cannot be.\n */\nexport function chartSonifySeries(\n  rows: Record<string, unknown>[],\n  config: ChartConfig,\n  xDataKey?: string,\n  keys?: string[],\n): SonifySeries[] {\n  const wanted = keys ?? Object.keys(config)\n  const categories = xDataKey ? rows.map((row) => categoryText(row[xDataKey])) : undefined\n\n  return wanted\n    .filter((key) => key in config)\n    .map((key) => {\n      const label = config[key]?.label\n      return {\n        key,\n        label: typeof label === 'string' || typeof label === 'number' ? String(label) : key,\n        values: rows.map((row) => {\n          const value = row[key]\n          return typeof value === 'number' && Number.isFinite(value) ? value : null\n        }),\n        categories,\n      }\n    })\n}\n\nexport interface UseSonifyOptions extends SonifyOptions {\n  /**\n   * What the run is called. Spoken once, when the last note has finished, so a\n   * listener knows the silence is the end rather than a stall.\n   */\n  name?: string\n  /**\n   * Fires as each point sounds, and with `null` between series.\n   *\n   * The hook already tracks this for you (`activePoint`); this is for a call\n   * site that wants to drive something else — a reference line on the plot, a\n   * row highlight in a table beside it.\n   */\n  onPointChange?: (point: SonifyPoint | null) => void\n}\n\nexport interface UseSonifyResult {\n  state: SonifyState\n  isPlaying: boolean\n  /** False where the browser has no Web Audio. Resolved after mount, never during render. */\n  isSupported: boolean\n  /** The point sounding right now, or `null` between series and at rest. */\n  activePoint: SonifyPoint | null\n  /** The latest text for a live region — a series' range, or the end of the run. */\n  announcement: string\n  /** Starts, or resumes. Call it from an event handler and nowhere else. */\n  play: () => void\n  pause: () => void\n  stop: () => void\n  /** Play when idle or paused, pause when playing — what one button needs. */\n  toggle: () => void\n  /** How long the whole run takes, in milliseconds. */\n  durationMs: number\n}\n\n/**\n * Plays a set of series as pitch over time, and reports what is sounding.\n *\n * The controller is rebuilt whenever the data or the tuning changes and the\n * previous one is destroyed with it, so a brush drag or an unmount cancels\n * every pending timer and releases the audio hardware. No `AudioContext` is\n * constructed until the first `play()`.\n *\n * @example\n * const series = useMemo(() => chartSonifySeries(rows, config, 'month'), [rows, config])\n * const { toggle, isPlaying, announcement } = useSonify(series, { name: 'Visitors per month' })\n *\n * return (\n *   <>\n *     <button type=\"button\" onClick={toggle}>{isPlaying ? 'Pause' : 'Play'}</button>\n *     <span role=\"status\" aria-live=\"polite\" className=\"sr-only\">{announcement}</span>\n *   </>\n * )\n */\nexport function useSonify(series: SonifySeries[], options: UseSonifyOptions = {}): UseSonifyResult {\n  const {\n    name,\n    onPointChange,\n    noteMs,\n    gapMs,\n    leadInMs,\n    rootFrequency,\n    semitones,\n    wave,\n    volume,\n    formatValue = defaultTick,\n  } = options\n\n  const [state, setState] = useState<SonifyState>('idle')\n  const [activePoint, setActivePoint] = useState<SonifyPoint | null>(null)\n  const [announcement, setAnnouncement] = useState('')\n  // Starts optimistic so the server and the first client render agree; the\n  // effect below is the only place the browser is asked.\n  const [isSupported, setIsSupported] = useState(true)\n\n  // Held in a ref rather than in the memo's dependencies: a call site that\n  // passes an inline arrow would otherwise rebuild the controller — and cancel\n  // the run — on every render.\n  const pointChange = useRef(onPointChange)\n  useEffect(() => {\n    pointChange.current = onPointChange\n  }, [onPointChange])\n\n  useEffect(() => {\n    setIsSupported(hasAudioSupport())\n  }, [])\n\n  const controller = useMemo(\n    () =>\n      createSonification({\n        series,\n        options: { noteMs, gapMs, leadInMs, rootFrequency, semitones, wave, volume, formatValue },\n        onPoint: (point) => {\n          setActivePoint(point)\n          pointChange.current?.(point)\n        },\n        onAnnounce: setAnnouncement,\n        onStateChange: setState,\n        onEnd: () => setAnnouncement(name ? `End of ${name}.` : 'End of chart.'),\n      }),\n    [series, noteMs, gapMs, leadInMs, rootFrequency, semitones, wave, volume, formatValue, name],\n  )\n\n  useEffect(() => {\n    setState('idle')\n    setActivePoint(null)\n    // Runs when the data changes as well as on unmount, which is what stops a\n    // brushed-away run from playing on against rows that are no longer drawn.\n    return () => controller.destroy()\n  }, [controller])\n\n  const play = useCallback(() => controller.play(), [controller])\n  const pause = useCallback(() => controller.pause(), [controller])\n  const stop = useCallback(() => {\n    controller.stop()\n    setAnnouncement('')\n  }, [controller])\n\n  const toggle = useCallback(() => {\n    if (controller.state === 'playing') controller.pause()\n    else controller.play()\n  }, [controller])\n\n  return {\n    state,\n    isPlaying: state === 'playing',\n    isSupported,\n    activePoint,\n    announcement,\n    play,\n    pause,\n    stop,\n    toggle,\n    durationMs: controller.durationMs,\n  }\n}\n\n/** Where the control sits above the plot. */\nexport type SonifyAlign = 'start' | 'end'\n\nconst ALIGN: Record<SonifyAlign, string> = {\n  start: 'justify-start',\n  end: 'justify-end',\n}\n\nexport interface SonifyProps extends SonifyOptions {\n  /**\n   * Which series play, in order. Defaults to every series in the chart's\n   * config.\n   *\n   * Worth narrowing on a chart with four series: sequential playback means four\n   * runs, and a listener rarely wants all of them.\n   */\n  keys?: string[]\n  /** Where the control sits above the plot. */\n  align?: SonifyAlign\n  /** Overrides the control's visible label. */\n  label?: string\n  /**\n   * Fires as each point sounds, and with `null` between series — for a call\n   * site that wants to mark the point on the plot itself.\n   */\n  onPointChange?: (point: SonifyPoint | null) => void\n  /** Merged onto the control row, last. */\n  className?: string\n}\n\n/**\n * Plays this chart's values as sound.\n *\n * A slot: it renders nothing, and the chart root reads its props — the same\n * shape as `<Chart.Values>`. Composing it is what adds the control above the\n * plot, so a chart that does not ask for sonification ships none of it.\n *\n * Reach for it on the charts where a run of values over an axis IS the reading:\n * a line, an area, a bar series over time. It is not offered on a pie or a\n * treemap, where there is no order for the notes to be in.\n *\n * @example\n * <LineChart title=\"Visitors per month\" config={config} data={data} xDataKey=\"month\">\n *   <LineChart.Sonify />\n *   <LineChart.XAxis dataKey=\"month\" />\n *   <LineChart.Line dataKey=\"desktop\" />\n * </LineChart>\n */\nexport const Sonify: FC<SonifyProps> = () => null\n\n/** Shared so an absent slot always yields the same array, not a new empty one. */\nconst NO_SERIES: SonifySeries[] = []\n\n/** Separator for the memo key below. Never appears in a series key. */\nconst KEY_SEPARATOR = '\\u0000'\n\n/**\n * What a chart root calls to turn its composed `<Chart.Sonify />` slot and its\n * on-screen rows into playable series.\n *\n * The memo is keyed on the VALUE of the slot's `keys`, not on its identity: a\n * slot's props object is rebuilt on every parent render, so an identity\n * dependency would replace the controller — and cancel whatever was playing —\n * every time anything else on the page moved.\n *\n * Rows are the rows on screen, brush included. Sonifying the full data behind a\n * brushed range would say something the picture does not.\n *\n * `rows` and `config` are compared by identity, as everywhere else in the\n * package: a chart handed a freshly built `config` object on every render\n * rebuilds its run each time, which stops playback. Define both outside the\n * render, which is what every example here does.\n */\nexport function useChartSonifySeries(\n  slot: SonifyProps | null,\n  rows: Record<string, unknown>[],\n  config: ChartConfig,\n  xDataKey?: string,\n): SonifySeries[] {\n  const hasSlot = slot !== null\n  const keys = slot?.keys?.join(KEY_SEPARATOR)\n\n  return useMemo(\n    () =>\n      hasSlot\n        ? chartSonifySeries(rows, config, xDataKey, keys?.split(KEY_SEPARATOR))\n        : NO_SERIES,\n    [hasSlot, keys, rows, config, xDataKey],\n  )\n}\n\nexport interface ChartSonifyButtonProps extends SonifyProps {\n  /** The figure's name. Spoken as part of the control's accessible name. */\n  title: string\n  /** The series to play, already flattened — see `chartSonifySeries`. */\n  series: SonifySeries[]\n}\n\n/**\n * The control that starts a chart's sonification.\n *\n * A real `<button>`, because this is the whole point of the feature: an audio\n * reading that a keyboard cannot reach is not an accessibility feature. The\n * visible label is the verb only — \"Play\", \"Pause\" — and the rest of the\n * accessible name is visually hidden, so the name still contains the visible\n * text verbatim (WCAG 2.5.3) while a screen reader hears which figure it\n * belongs to.\n *\n * No `aria-pressed`. A toggle button announces as \"pressed\"/\"not pressed\",\n * which for a transport control contradicts the label it is sitting on —\n * \"Pause, toggle button, pressed\" leaves the listener to work out whether the\n * chart is playing. A label that names the next action says it once.\n *\n * The live region carries the RANGE announcement before each series, not a line\n * per point: a fourteen-point run would interrupt itself fourteen times and the\n * listener would hear none of the tones. The per-point readout beside the\n * button is `aria-hidden` for the same reason — it is there for a sighted\n * reader following along.\n *\n * @example\n * <ChartSonifyButton title=\"Visitors per month\" series={series} />\n */\nexport function ChartSonifyButton({\n  title,\n  series,\n  align = 'end',\n  label,\n  className,\n  keys: _keys,\n  onPointChange,\n  formatValue = defaultTick,\n  ...options\n}: ChartSonifyButtonProps) {\n  const { state, isPlaying, isSupported, activePoint, announcement, stop, toggle } = useSonify(\n    series,\n    { ...options, formatValue, name: title, onPointChange },\n  )\n\n  const hasPoints = series.some((entry) => entry.values.some((value) => value !== null))\n  const isDisabled = !isSupported || !hasPoints\n  const Icon = isPlaying ? RiPauseLine : RiPlayLine\n\n  const reason = !isSupported\n    ? ' — audio is not available in this browser'\n    : !hasPoints\n      ? ' — nothing to play'\n      : ''\n\n  return (\n    <div className={cn('mb-2 flex items-center gap-2', ALIGN[align], className)}>\n      {activePoint && (\n        // Visual only. The live region is deliberately not told about every\n        // point; see the component note above.\n        <span aria-hidden className=\"mono-meta truncate text-(--ink-3-aa)\">\n          {activePoint.category ?? `#${activePoint.index + 1}`}\n          {activePoint.value !== null && ` · ${formatValue(activePoint.value)}`}\n        </span>\n      )}\n\n      {state !== 'idle' && (\n        <Button variant=\"ghost\" size=\"md\" onClick={stop}>\n          <RiStopLine size={14} aria-hidden />\n          Stop\n          <span className=\"sr-only\"> playing {title} as sound</span>\n        </Button>\n      )}\n\n      <Button variant=\"secondary\" size=\"md\" onClick={toggle} disabled={isDisabled}>\n        <Icon size={14} aria-hidden />\n        {label ?? (isPlaying ? 'Pause' : 'Play')}\n        <span className=\"sr-only\">\n          {' '}\n          {isPlaying ? 'playing' : 'this chart'} as sound: {title}\n          {reason}\n        </span>\n      </Button>\n\n      <span role=\"status\" aria-live=\"polite\" className=\"sr-only\">\n        {announcement}\n      </span>\n    </div>\n  )\n}\n\nexport default Sonify\n"],"mappings":"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","names":[]}