@misoto22/design 0.7.0 → 0.8.0

package/dist/charts/TreemapChart/TreemapChart.js

@@ -1,9 +1,10 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { useId } from "react";
+import {} from "react";
 import { Treemap as RechartsTreemap } from "recharts";
 import { ChartContainer, cssName } from "../lib/chart.js";
 import { ChartFigure } from "../lib/figure.js";
+import {} from "../lib/empty.js";
 import { ChartTooltip, ChartTooltipContent } from "../lib/tooltip.js";
 function TreemapChart({
   config = {},
@@ -18,10 +19,10 @@ function TreemapChart({
   showLabels = true,
   children,
   chartProps,
-  hideDataTable = false
+  hideDataTable = false,
+  empty
 }) {
-  const chartId = useId().replace(/:/g, "");
-  const leaves = flatten(data);
+  const leaves = flatten(data, dataKey);
   return /* @__PURE__ */ jsx(
     ChartFigure,
     {
@@ -34,6 +35,8 @@ function TreemapChart({
         rowKey: "path",
         columns: [{ key: dataKey, label: "Value" }]
       },
+      isEmpty: data.length === 0,
+      empty,
       children: /* @__PURE__ */ jsx(ChartContainer, { config, children: /* @__PURE__ */ jsx(
         RechartsTreemap,
         {
@@ -42,7 +45,7 @@ function TreemapChart({
           nameKey: "name",
           aspectRatio,
           isAnimationActive: false,
-          content: /* @__PURE__ */ jsx(TreemapTile, { chartId, variant, config, showLabels }),
+          content: /* @__PURE__ */ jsx(TreemapTile, { variant, config, showLabels }),
           ...chartProps,
           children
         }
@@ -50,15 +53,22 @@ function TreemapChart({
     }
   );
 }
-function flatten(nodes, prefix = "") {
+function flatten(nodes, dataKey, prefix = "") {
   return nodes.flatMap((node) => {
     const path = prefix ? `${prefix} \u203A ${node.name}` : node.name;
-    if (node.children?.length) return flatten(node.children, path);
-    return [{ ...node, path }];
+    if (node.children?.length) return flatten(node.children, dataKey, path);
+    const value = Number(node[dataKey]);
+    if (Number.isFinite(value) && value > 0) return [{ ...node, path }];
+    return [
+      {
+        ...node,
+        path,
+        [dataKey]: Number.isFinite(value) ? `${value.toLocaleString()} \u2014 not drawn` : "not drawn"
+      }
+    ];
   });
 }
 function TreemapTile({
-  chartId,
   variant,
   config,
   showLabels,
@@ -96,8 +106,7 @@ function TreemapTile({
         children: name
       }
     ),
-    /* @__PURE__ */ jsx("title", { children: name }),
-    /* @__PURE__ */ jsx("desc", { children: chartId })
+    /* @__PURE__ */ jsx("title", { children: name })
   ] });
 }
 function Tooltip({ variant, roundness }) {

package/dist/charts/TreemapChart/TreemapChart.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/charts/TreemapChart/TreemapChart.tsx"],"sourcesContent":["'use client'\n\nimport { useId, type ComponentProps, type ReactNode } from 'react'\nimport { Treemap as RechartsTreemap } from 'recharts'\nimport { ChartContainer, cssName, type ChartConfig } from '../lib/chart'\nimport { ChartFigure } from '../lib/figure'\nimport { ChartTooltip, ChartTooltipContent } from '../lib/tooltip'\nimport type { ChartTooltipSlotProps } from '../AreaChart/AreaChart'\n\n/**\n * How a tile is painted.\n *\n * `ramp` walks the series ramp so siblings separate by lightness; `nested`\n * darkens by DEPTH instead, which is the right encoding when the tree has more\n * than one level and the question is \"what is inside what\".\n */\nexport type TreemapVariant = 'ramp' | 'nested'\n\n/** A node in the tree. Children make it a branch. */\nexport interface TreemapNode {\n  name: string\n  /** Leaf value. Omit on a branch — a branch is the sum of its children. */\n  size?: number\n  children?: TreemapNode[]\n  [key: string]: unknown\n}\n\n/** The raw Recharts Treemap props a consumer may still reach for. */\nexport type TreemapExtras = Omit<ComponentProps<typeof RechartsTreemap>, 'data' | 'dataKey'>\n\nexport interface TreemapChartProps {\n  /** Tile names → their label and paint. Optional: the ramp covers unnamed tiles. */\n  config?: ChartConfig\n  /** The tree. One level is a flat set of tiles; two is a nested treemap. */\n  data: TreemapNode[]\n  /**\n   * What the chart shows, in a sentence a reader could act on. Required, and\n   * announced to a screen reader even when it is not printed.\n   */\n  title: string\n  /** Prints the title above the plot instead of hiding it from sight. */\n  showTitle?: boolean\n  /** A line under the title — the unit, the window, the caveat. */\n  description?: ReactNode\n  /** Merged onto the figure, last, so a call site can size or space it. */\n  className?: string\n  variant?: TreemapVariant\n  /** The leaf field holding each tile's number. */\n  dataKey?: string\n  /** How square the tiles are pushed to be. Recharts' own squarify parameter. */\n  aspectRatio?: number\n  /** Prints each tile's name on it, where the tile is big enough to hold it. */\n  showLabels?: boolean\n  /** The hover panel. */\n  children?: ReactNode\n  chartProps?: TreemapExtras\n  /** Drops the hidden table view. Only correct when the page prints the data itself. */\n  hideDataTable?: boolean\n}\n\n/**\n * Part of a whole, when the whole has too many parts for a pie — and the parts\n * nest.\n *\n * A treemap encodes value as AREA, which the eye reads worse than length but\n * far better than angle, and it is the only form here that stays readable at\n * fifty items. Two rules make it honest: no negative values (an area cannot be\n * negative), and the tiles have to sum to something a reader recognises as the\n * whole.\n *\n * Reach for `<BarChart>` when there are under a dozen items and the ranking\n * matters — a bar's length is the more precise encoding, and a treemap's\n * layout deliberately does not order its tiles by value alone.\n *\n * @example\n * <TreemapChart title=\"Bundle size by package\" data={packages} showLabels>\n *   <TreemapChart.Tooltip />\n * </TreemapChart>\n */\nexport function TreemapChart({\n  config = {},\n  data,\n  title,\n  showTitle,\n  description,\n  className,\n  variant = 'ramp',\n  dataKey = 'size',\n  aspectRatio = 4 / 3,\n  showLabels = true,\n  children,\n  chartProps,\n  hideDataTable = false,\n}: TreemapChartProps) {\n  const chartId = useId().replace(/:/g, '')\n\n  // Flattened for the table view, because a nested tree read aloud row by row\n  // is not something anyone can follow — the leaves are the facts.\n  const leaves = flatten(data)\n\n  return (\n    <ChartFigure\n      title={title}\n      showTitle={showTitle}\n      description={description}\n      className={className}\n      table={\n        hideDataTable\n          ? false\n          : {\n              rows: leaves,\n              rowKey: 'path',\n              columns: [{ key: dataKey, label: 'Value' }],\n            }\n      }\n    >\n      <ChartContainer config={config}>\n        <RechartsTreemap\n          data={data}\n          dataKey={dataKey}\n          nameKey=\"name\"\n          aspectRatio={aspectRatio}\n          isAnimationActive={false}\n          content={\n            <TreemapTile chartId={chartId} variant={variant} config={config} showLabels={showLabels} />\n          }\n          {...chartProps}\n        >\n          {children}\n        </RechartsTreemap>\n      </ChartContainer>\n    </ChartFigure>\n  )\n}\n\n/** Every leaf, with the path that names it. */\nfunction flatten(nodes: TreemapNode[], prefix = ''): Record<string, unknown>[] {\n  return nodes.flatMap((node) => {\n    const path = prefix ? `${prefix} › ${node.name}` : node.name\n    if (node.children?.length) return flatten(node.children, path)\n    return [{ ...node, path }]\n  })\n}\n\ninterface TileProps {\n  chartId: string\n  variant: TreemapVariant\n  config: ChartConfig\n  showLabels: boolean\n  // Recharts hands the geometry in as loose props on the cloned element.\n  x?: number\n  y?: number\n  width?: number\n  height?: number\n  depth?: number\n  index?: number\n  name?: string\n}\n\n/**\n * One tile.\n *\n * The gap between tiles is a surface-coloured stroke rather than a smaller\n * rect, so the tiles still tile — a treemap whose parts do not touch stops\n * reading as a partition of one whole.\n */\nfunction TreemapTile({\n  chartId,\n  variant,\n  config,\n  showLabels,\n  x = 0,\n  y = 0,\n  width = 0,\n  height = 0,\n  depth = 1,\n  index = 0,\n  name = '',\n}: TileProps) {\n  if (width <= 0 || height <= 0) return null\n\n  const slot =\n    variant === 'nested'\n      ? `var(--series-${Math.min(8, depth * 2)})`\n      : name in config\n        ? `var(--color-${cssName(name)}-0)`\n        : `var(--series-${(index % 8) + 1})`\n\n  // Only label a tile with room for one. A clipped word is worse than none.\n  const roomForLabel = showLabels && width > 56 && height > 26\n\n  return (\n    <g>\n      <rect\n        x={x}\n        y={y}\n        width={width}\n        height={height}\n        fill={slot}\n        stroke=\"var(--chart-surface)\"\n        strokeWidth={2}\n      />\n      {roomForLabel && (\n        <text\n          x={x + 8}\n          y={y + 18}\n          className=\"fill-(--chart-surface) text-[11px] font-medium\"\n          style={{ pointerEvents: 'none' }}\n        >\n          {name}\n        </text>\n      )}\n      {/* A hidden id so the tooltip can key off the same name the tile paints. */}\n      <title>{name}</title>\n      <desc>{chartId}</desc>\n    </g>\n  )\n}\n\n/** The hover panel. No heading: the tile's own name is the row label. */\nfunction Tooltip({ variant, roundness }: ChartTooltipSlotProps) {\n  return (\n    <ChartTooltip\n      cursor={false}\n      content={<ChartTooltipContent nameKey=\"name\" hideLabel roundness={roundness} variant={variant} />}\n    />\n  )\n}\n\nTreemapChart.Tooltip = Tooltip\n\nexport default TreemapChart\n"],"mappings":";AA4HY,cAoER,YApEQ;AA1HZ,SAAS,aAAkD;AAC3D,SAAS,WAAW,uBAAuB;AAC3C,SAAS,gBAAgB,eAAiC;AAC1D,SAAS,mBAAmB;AAC5B,SAAS,cAAc,2BAA2B;AAyE3C,SAAS,aAAa;AAAA,EAC3B,SAAS,CAAC;AAAA,EACV;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,UAAU;AAAA,EACV,UAAU;AAAA,EACV,cAAc,IAAI;AAAA,EAClB,aAAa;AAAA,EACb;AAAA,EACA;AAAA,EACA,gBAAgB;AAClB,GAAsB;AACpB,QAAM,UAAU,MAAM,EAAE,QAAQ,MAAM,EAAE;AAIxC,QAAM,SAAS,QAAQ,IAAI;AAE3B,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,OACE,gBACI,QACA;AAAA,QACE,MAAM;AAAA,QACN,QAAQ;AAAA,QACR,SAAS,CAAC,EAAE,KAAK,SAAS,OAAO,QAAQ,CAAC;AAAA,MAC5C;AAAA,MAGN,8BAAC,kBAAe,QACd;AAAA,QAAC;AAAA;AAAA,UACC;AAAA,UACA;AAAA,UACA,SAAQ;AAAA,UACR;AAAA,UACA,mBAAmB;AAAA,UACnB,SACE,oBAAC,eAAY,SAAkB,SAAkB,QAAgB,YAAwB;AAAA,UAE1F,GAAG;AAAA,UAEH;AAAA;AAAA,MACH,GACF;AAAA;AAAA,EACF;AAEJ;AAGA,SAAS,QAAQ,OAAsB,SAAS,IAA+B;AAC7E,SAAO,MAAM,QAAQ,CAAC,SAAS;AAC7B,UAAM,OAAO,SAAS,GAAG,MAAM,WAAM,KAAK,IAAI,KAAK,KAAK;AACxD,QAAI,KAAK,UAAU,OAAQ,QAAO,QAAQ,KAAK,UAAU,IAAI;AAC7D,WAAO,CAAC,EAAE,GAAG,MAAM,KAAK,CAAC;AAAA,EAC3B,CAAC;AACH;AAwBA,SAAS,YAAY;AAAA,EACnB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,QAAQ;AAAA,EACR,SAAS;AAAA,EACT,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,OAAO;AACT,GAAc;AACZ,MAAI,SAAS,KAAK,UAAU,EAAG,QAAO;AAEtC,QAAM,OACJ,YAAY,WACR,gBAAgB,KAAK,IAAI,GAAG,QAAQ,CAAC,CAAC,MACtC,QAAQ,SACN,eAAe,QAAQ,IAAI,CAAC,QAC5B,gBAAiB,QAAQ,IAAK,CAAC;AAGvC,QAAM,eAAe,cAAc,QAAQ,MAAM,SAAS;AAE1D,SACE,qBAAC,OACC;AAAA;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,MAAM;AAAA,QACN,QAAO;AAAA,QACP,aAAa;AAAA;AAAA,IACf;AAAA,IACC,gBACC;AAAA,MAAC;AAAA;AAAA,QACC,GAAG,IAAI;AAAA,QACP,GAAG,IAAI;AAAA,QACP,WAAU;AAAA,QACV,OAAO,EAAE,eAAe,OAAO;AAAA,QAE9B;AAAA;AAAA,IACH;AAAA,IAGF,oBAAC,WAAO,gBAAK;AAAA,IACb,oBAAC,UAAM,mBAAQ;AAAA,KACjB;AAEJ;AAGA,SAAS,QAAQ,EAAE,SAAS,UAAU,GAA0B;AAC9D,SACE;AAAA,IAAC;AAAA;AAAA,MACC,QAAQ;AAAA,MACR,SAAS,oBAAC,uBAAoB,SAAQ,QAAO,WAAS,MAAC,WAAsB,SAAkB;AAAA;AAAA,EACjG;AAEJ;AAEA,aAAa,UAAU;AAEvB,IAAO,uBAAQ;","names":[]}
+{"version":3,"sources":["../../../src/charts/TreemapChart/TreemapChart.tsx"],"sourcesContent":["'use client'\n\nimport { type ComponentProps, type ReactNode } from 'react'\nimport { Treemap as RechartsTreemap } from 'recharts'\nimport { ChartContainer, cssName, type ChartConfig } from '../lib/chart'\nimport { ChartFigure } from '../lib/figure'\nimport { type ChartEmptyProps } from '../lib/empty'\nimport { ChartTooltip, ChartTooltipContent } from '../lib/tooltip'\nimport type { ChartTooltipSlotProps } from '../AreaChart/AreaChart'\n\n/**\n * How a tile is painted.\n *\n * `ramp` walks the series ramp so siblings separate by lightness; `nested`\n * darkens by DEPTH instead, which is the right encoding when the tree has more\n * than one level and the question is \"what is inside what\".\n */\nexport type TreemapVariant = 'ramp' | 'nested'\n\n/** A node in the tree. Children make it a branch. */\nexport interface TreemapNode {\n  name: string\n  /** Leaf value. Omit on a branch — a branch is the sum of its children. */\n  size?: number\n  children?: TreemapNode[]\n  [key: string]: unknown\n}\n\n/** The raw Recharts Treemap props a consumer may still reach for. */\nexport type TreemapExtras = Omit<ComponentProps<typeof RechartsTreemap>, 'data' | 'dataKey'>\n\nexport interface TreemapChartProps {\n  /** Tile names → their label and paint. Optional: the ramp covers unnamed tiles. */\n  config?: ChartConfig\n  /** The tree. One level is a flat set of tiles; two is a nested treemap. */\n  data: TreemapNode[]\n  /**\n   * What the chart shows, in a sentence a reader could act on. Required, and\n   * announced to a screen reader even when it is not printed.\n   */\n  title: string\n  /** Prints the title above the plot instead of hiding it from sight. */\n  showTitle?: boolean\n  /** A line under the title — the unit, the window, the caveat. */\n  description?: ReactNode\n  /** Merged onto the figure, last, so a call site can size or space it. */\n  className?: string\n  variant?: TreemapVariant\n  /** The leaf field holding each tile's number. */\n  dataKey?: string\n  /** How square the tiles are pushed to be. Recharts' own squarify parameter. */\n  aspectRatio?: number\n  /** Prints each tile's name on it, where the tile is big enough to hold it. */\n  showLabels?: boolean\n  /** The hover panel. */\n  children?: ReactNode\n  chartProps?: TreemapExtras\n  /** Drops the hidden table view. Only correct when the page prints the data itself. */\n  hideDataTable?: boolean\n  /**\n   * What the chart shows when it has nothing to draw. `false` keeps the empty\n   * plot, for a chart whose emptiness is itself the reading.\n   */\n  empty?: ChartEmptyProps | false\n}\n\n/**\n * Part of a whole, when the whole has too many parts for a pie — and the parts\n * nest.\n *\n * A treemap encodes value as AREA, which the eye reads worse than length but\n * far better than angle, and it is the only form here that stays readable at\n * fifty items. Two rules make it honest: no negative values (an area cannot be\n * negative), and the tiles have to sum to something a reader recognises as the\n * whole.\n *\n * Reach for `<BarChart>` when there are under a dozen items and the ranking\n * matters — a bar's length is the more precise encoding, and a treemap's\n * layout deliberately does not order its tiles by value alone.\n *\n * @example\n * <TreemapChart title=\"Bundle size by package\" data={packages} showLabels>\n *   <TreemapChart.Tooltip />\n * </TreemapChart>\n */\nexport function TreemapChart({\n  config = {},\n  data,\n  title,\n  showTitle,\n  description,\n  className,\n  variant = 'ramp',\n  dataKey = 'size',\n  aspectRatio = 4 / 3,\n  showLabels = true,\n  children,\n  chartProps,\n  hideDataTable = false,\n  empty,\n}: TreemapChartProps) {\n  // Flattened for the table view, because a nested tree read aloud row by row\n  // is not something anyone can follow — the leaves are the facts.\n  const leaves = flatten(data, dataKey)\n\n  return (\n    <ChartFigure\n      title={title}\n      showTitle={showTitle}\n      description={description}\n      className={className}\n      table={\n        hideDataTable\n          ? false\n          : {\n              rows: leaves,\n              rowKey: 'path',\n              columns: [{ key: dataKey, label: 'Value' }],\n            }\n      }\n      isEmpty={data.length === 0}\n      empty={empty}\n    >\n      <ChartContainer config={config}>\n        <RechartsTreemap\n          data={data}\n          dataKey={dataKey}\n          nameKey=\"name\"\n          aspectRatio={aspectRatio}\n          isAnimationActive={false}\n          content={\n            <TreemapTile variant={variant} config={config} showLabels={showLabels} />\n          }\n          {...chartProps}\n        >\n          {children}\n        </RechartsTreemap>\n      </ChartContainer>\n    </ChartFigure>\n  )\n}\n\n/**\n * Every leaf, with the path that names it and whether the picture can hold it.\n *\n * A tile's AREA is its value, so a leaf at zero or below has no area to be\n * drawn at: the layout gives it no width, the tile is dropped, and the leaf\n * disappears from the picture while staying in this table. The table is the\n * only place left that can say so, and saying nothing would leave the two views\n * of one tree disagreeing about how many leaves there are.\n */\nfunction flatten(\n  nodes: TreemapNode[],\n  dataKey: string,\n  prefix = '',\n): Record<string, unknown>[] {\n  return nodes.flatMap((node) => {\n    const path = prefix ? `${prefix} › ${node.name}` : node.name\n    if (node.children?.length) return flatten(node.children, dataKey, path)\n\n    const value = Number(node[dataKey])\n    if (Number.isFinite(value) && value > 0) return [{ ...node, path }]\n    return [\n      {\n        ...node,\n        path,\n        [dataKey]: Number.isFinite(value)\n          ? `${value.toLocaleString()} — not drawn`\n          : 'not drawn',\n      },\n    ]\n  })\n}\n\ninterface TileProps {\n  variant: TreemapVariant\n  config: ChartConfig\n  showLabels: boolean\n  // Recharts hands the geometry in as loose props on the cloned element.\n  x?: number\n  y?: number\n  width?: number\n  height?: number\n  depth?: number\n  index?: number\n  name?: string\n}\n\n/**\n * One tile.\n *\n * The gap between tiles is a surface-coloured stroke rather than a smaller\n * rect, so the tiles still tile — a treemap whose parts do not touch stops\n * reading as a partition of one whole.\n */\nfunction TreemapTile({\n  variant,\n  config,\n  showLabels,\n  x = 0,\n  y = 0,\n  width = 0,\n  height = 0,\n  depth = 1,\n  index = 0,\n  name = '',\n}: TileProps) {\n  if (width <= 0 || height <= 0) return null\n\n  const slot =\n    variant === 'nested'\n      ? `var(--series-${Math.min(8, depth * 2)})`\n      : name in config\n        ? `var(--color-${cssName(name)}-0)`\n        : `var(--series-${(index % 8) + 1})`\n\n  // Only label a tile with room for one. A clipped word is worse than none.\n  const roomForLabel = showLabels && width > 56 && height > 26\n\n  return (\n    <g>\n      <rect\n        x={x}\n        y={y}\n        width={width}\n        height={height}\n        fill={slot}\n        stroke=\"var(--chart-surface)\"\n        strokeWidth={2}\n      />\n      {roomForLabel && (\n        <text\n          x={x + 8}\n          y={y + 18}\n          className=\"fill-(--chart-surface) text-[11px] font-medium\"\n          style={{ pointerEvents: 'none' }}\n        >\n          {name}\n        </text>\n      )}\n      {/* The tile's whole accessible reading. `<desc>` used to carry the chart's\n          generated id beside it — and `<desc>` IS the accessible description,\n          so every tile announced its name followed by an opaque string nothing\n          on the page could explain. */}\n      <title>{name}</title>\n    </g>\n  )\n}\n\n/** The hover panel. No heading: the tile's own name is the row label. */\nfunction Tooltip({ variant, roundness }: ChartTooltipSlotProps) {\n  return (\n    <ChartTooltip\n      cursor={false}\n      content={<ChartTooltipContent nameKey=\"name\" hideLabel roundness={roundness} variant={variant} />}\n    />\n  )\n}\n\nTreemapChart.Tooltip = Tooltip\n\nexport default TreemapChart\n"],"mappings":"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","names":[]}

package/dist/charts/WaterfallChart/WaterfallChart.js

@@ -17,7 +17,7 @@ import {
 } from "recharts";
 import { ChartContainer } from "../lib/chart.js";
 import { ChartFigure } from "../lib/figure.js";
-import { ChartEmpty } from "../lib/empty.js";
+import {} from "../lib/empty.js";
 import { ChartBackground } from "../lib/background.js";
 import { ChartTooltip } from "../lib/tooltip.js";
 import { BarHatchedFill, SeriesGradient } from "../lib/paint.js";
@@ -103,7 +103,9 @@ function WaterfallChart({
           { key: "total", label: "Running total" }
         ]
       },
-      children: isEmpty ? /* @__PURE__ */ jsx(ChartEmpty, { ...empty || {} }) : /* @__PURE__ */ jsx(ChartContainer, { config, children: /* @__PURE__ */ jsx(
+      isEmpty,
+      empty,
+      children: /* @__PURE__ */ jsx(ChartContainer, { config, children: /* @__PURE__ */ jsx(
         RechartsBarChart,
         {
           id: chartId,

package/dist/charts/WaterfallChart/WaterfallChart.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/charts/WaterfallChart/WaterfallChart.tsx"],"sourcesContent":["'use client'\n\nimport {\n  createContext,\n  useContext,\n  useId,\n  useMemo,\n  type ComponentProps,\n  type ReactNode,\n} from 'react'\nimport {\n  Bar as RechartsBar,\n  BarChart as RechartsBarChart,\n  CartesianGrid,\n  ReferenceLine as RechartsReferenceLine,\n  XAxis as RechartsXAxis,\n  YAxis as RechartsYAxis,\n  usePlotArea,\n} from 'recharts'\nimport { ChartContainer, type ChartConfig } from '../lib/chart'\nimport { ChartFigure } from '../lib/figure'\nimport { ChartEmpty, type ChartEmptyProps } from '../lib/empty'\nimport { ChartBackground, type ChartBackgroundVariant } from '../lib/background'\nimport { ChartTooltip } from '../lib/tooltip'\nimport { BarHatchedFill, SeriesGradient } from '../lib/paint'\nimport { Annotation, ReferenceBand, ReferenceLine } from '../lib/annotations'\nimport { axisLabel } from '../lib/axis'\nimport { defaultTick } from '../lib/format'\nimport { cn } from '../../lib/cn'\nimport type { ChartXAxisProps, ChartYAxisProps } from '../BarChart/BarChart'\nimport type { ChartTooltipSlotProps } from '../AreaChart/AreaChart'\n\n/** The series a chart with only one of them falls back to. */\nconst DEFAULT_CONFIG: ChartConfig = { value: { label: 'Change' } }\n\nconst CHART_MARGIN = { top: 20, right: 12, bottom: 0, left: 12 }\n\n/** The corner every bar rounds to. */\nconst BAR_RADIUS = 2\n\n/** How a step moves the running total. */\nexport type WaterfallStepType = 'delta' | 'total'\n\n/** Which way a bar goes, which is what its texture encodes. */\nexport type WaterfallDirection = 'increase' | 'decrease' | 'total'\n\nexport interface WaterfallStep {\n  /** The step's name on the category axis. Doubles as its key. */\n  name: string\n  /**\n   * The signed change this step makes, or — on a `total` step — the absolute\n   * figure the running total is set to.\n   *\n   * Omit it on a `total` and the running total is used, which is the right\n   * default for the closing bar: an end total typed by hand can disagree with\n   * the deltas above it, and the chart would draw the disagreement without\n   * saying anything.\n   */\n  value?: number\n  /**\n   * `delta` (the default) adds `value` to the running total and floats the bar\n   * where that lands. `total` plants a bar on the baseline — an opening\n   * balance, a subtotal, a closing figure.\n   */\n  type?: WaterfallStepType\n}\n\n/** A step with its span, its direction and its running total worked out. */\ninterface ResolvedStep extends WaterfallStep {\n  type: WaterfallStepType\n  /**\n   * What this step moved the total by. On a `total` step that is the gap it\n   * closes — zero whenever the deltas above it already add up to it.\n   */\n  change: number\n  /** The running total once this step has been applied. */\n  total: number\n  /**\n   * The bar's two ends on the value axis, LOW first.\n   *\n   * Ascending because Recharts reads a floating bar's range that way and\n   * collapses a descending one to nothing — which is every decrease in the\n   * cascade. Which end the running total is at is recovered from `total`\n   * rather than from the order here.\n   */\n  span: [number, number]\n  direction: WaterfallDirection\n}\n\n/** A bar's two ends, low first — see `ResolvedStep.span`. */\nfunction ascending(a: number, b: number): [number, number] {\n  return a <= b ? [a, b] : [b, a]\n}\n\n/** The steps, walked in order, each carrying the total it leaves behind. */\nfunction resolve(data: WaterfallStep[]): ResolvedStep[] {\n  let running = 0\n\n  return data.map((step) => {\n    const type = step.type ?? 'delta'\n\n    if (type === 'total') {\n      const total = step.value ?? running\n      const resolved: ResolvedStep = {\n        ...step,\n        type,\n        change: total - running,\n        total,\n        span: ascending(0, total),\n        direction: 'total',\n      }\n      running = total\n      return resolved\n    }\n\n    const change = step.value ?? 0\n    const from = running\n    running += change\n\n    return {\n      ...step,\n      type,\n      change,\n      total: running,\n      span: ascending(from, running),\n      direction: change < 0 ? 'decrease' : 'increase',\n    }\n  })\n}\n\ninterface WaterfallContextValue {\n  config: ChartConfig\n  seriesKey: string\n  steps: ResolvedStep[]\n  formatValue: (value: number) => string\n}\n\nconst WaterfallContext = createContext<WaterfallContextValue | null>(null)\n\nfunction useWaterfall(): WaterfallContextValue {\n  const context = useContext(WaterfallContext)\n  if (!context) throw new Error('A waterfall part must be rendered inside <WaterfallChart>')\n  return context\n}\n\nexport interface WaterfallChartProps {\n  /**\n   * The single series — its label and its paint. Only the FIRST entry is read;\n   * a waterfall has one quantity and as many bars as it has steps.\n   */\n  config?: ChartConfig\n  /**\n   * The steps, in the order they are applied. Order is the arithmetic: the\n   * chart does not sort, because a different order is a different total at\n   * every intermediate bar.\n   */\n  data: WaterfallStep[]\n  /**\n   * What the chart shows, in a sentence a reader could act on. Required, and\n   * announced to a screen reader even when it is not printed.\n   */\n  title: string\n  /** Prints the title above the plot instead of hiding it from sight. */\n  showTitle?: boolean\n  /** A line under the title — the unit, the window, the caveat. */\n  description?: ReactNode\n  /** The composed parts — axes, grid, tooltip, and `<WaterfallChart.Bars>`. */\n  children: ReactNode\n  /** Merged onto the figure, last, so a call site can size or space it. */\n  className?: string\n  /** Escape hatch onto the raw Recharts chart element. */\n  chartProps?: ComponentProps<typeof RechartsBarChart>\n  /** Formats every number the chart prints — ticks, labels, tooltip, table. */\n  formatValue?: (value: number) => string\n  /** Drops the hidden table view. Only correct when the page prints the data itself. */\n  hideDataTable?: boolean\n  /**\n   * What the chart shows when it has nothing to draw. `false` keeps the axes,\n   * for a chart whose emptiness is itself the reading.\n   */\n  empty?: ChartEmptyProps | false\n}\n\n/**\n * How a total got from one figure to another — an opening balance, the signed\n * contributions that moved it, and where it closed.\n *\n * The form for \"why did this change\", which a pair of bars cannot answer and a\n * pie chart answers wrongly, because contributions can be NEGATIVE and a slice\n * cannot. Reach for `<BarChart>` when the parts do not have to add up to the\n * gap between two totals, and for `<FunnelChart>` when the quantity only ever\n * shrinks.\n *\n * **The connectors are the claim to be careful about.** They draw the steps as\n * a sequence — this happened, then this — and most breakdowns are not\n * sequential at all: churn and expansion in the same month are simultaneous,\n * and the order they are listed in is an editorial choice. The arithmetic\n * survives any order; the STORY does not, and a reader will take the leftmost\n * bar as the first cause. Two related traps: the intermediate bars are floating\n * lengths read against no baseline, so a small step high up the cascade is hard\n * to compare with a large one near zero; and any step that is itself a net of\n * two larger opposing movements is invisible as such. Where the order is\n * arbitrary, say so in the `description`.\n *\n * Recharts earns its place for the axes, grid and tooltip. Each bar is a\n * floating range — from the running total to the new one — with a custom shape\n * over it, because Recharts has no waterfall mark and the connectors have to be\n * drawn from the same geometry as the bars they join.\n *\n * @example\n * <WaterfallChart title=\"Revenue bridge, FY25\" data={steps}>\n *   <WaterfallChart.Grid />\n *   <WaterfallChart.XAxis />\n *   <WaterfallChart.YAxis label=\"AUD\" />\n *   <WaterfallChart.Tooltip />\n *   <WaterfallChart.Bars showValues />\n * </WaterfallChart>\n *\n * @example\n * const steps = [\n *   { name: 'FY24', value: 1200, type: 'total' as const },\n *   { name: 'New', value: 340 },\n *   { name: 'Churn', value: -180 },\n *   // No value: the closing bar is whatever the deltas add up to.\n *   { name: 'FY25', type: 'total' as const },\n * ]\n */\nexport function WaterfallChart({\n  config = DEFAULT_CONFIG,\n  data,\n  title,\n  showTitle,\n  description,\n  children,\n  className,\n  chartProps,\n  formatValue = defaultTick,\n  hideDataTable = false,\n  empty,\n}: WaterfallChartProps) {\n  const chartId = useId().replace(/:/g, '')\n  const seriesKey = Object.keys(config)[0] ?? 'value'\n  const steps = useMemo(() => resolve(data), [data])\n\n  const context = useMemo<WaterfallContextValue>(\n    () => ({ config, seriesKey, steps, formatValue }),\n    [config, seriesKey, steps, formatValue],\n  )\n\n  const isEmpty = empty !== false && steps.length === 0\n\n  return (\n    <WaterfallContext.Provider value={context}>\n      <ChartFigure\n        title={title}\n        showTitle={showTitle}\n        description={description}\n        className={className}\n        table={\n          hideDataTable\n            ? false\n            : {\n                rows: steps as unknown as Record<string, unknown>[],\n                rowKey: 'name',\n                columns: [\n                  { key: 'change', label: 'Change' },\n                  { key: 'total', label: 'Running total' },\n                ],\n              }\n        }\n      >\n        {isEmpty ? (\n          <ChartEmpty {...(empty || {})} />\n        ) : (\n          <ChartContainer config={config}>\n            <RechartsBarChart\n              id={chartId}\n              accessibilityLayer\n              margin={CHART_MARGIN}\n              data={steps}\n              barCategoryGap=\"25%\"\n              {...chartProps}\n            >\n              {children}\n            </RechartsBarChart>\n          </ChartContainer>\n        )}\n      </ChartFigure>\n    </WaterfallContext.Provider>\n  )\n}\n\nexport interface WaterfallBarsProps {\n  /** The bars' corner. */\n  radius?: number\n  /**\n   * Joins each bar's closing edge to where the next one starts.\n   *\n   * On by default: without them a waterfall is a row of bars floating at\n   * unrelated heights, and the cascade — which is the entire point of the form\n   * — has to be reconstructed by the reader.\n   */\n  connectors?: boolean\n  /**\n   * Prints each step's signed change above or below its bar.\n   *\n   * Worth more here than on most charts: an intermediate bar has no baseline\n   * under it, so its length is the one thing a reader cannot get off the axis.\n   */\n  showValues?: boolean\n  /** Escape hatch onto the underlying Recharts bar. */\n  barProps?: ComponentProps<typeof RechartsBar>\n}\n\n/**\n * The bars and the connectors between them.\n *\n * Increases and totals take the solid series fill; decreases take the 45°\n * hatch. Texture rather than a second colour, because the whole set has to stay\n * legible in greyscale and under forced colours — and a total is told from an\n * increase by geometry instead, since it is the only kind of bar that stands on\n * the baseline.\n */\nfunction Bars({\n  radius = BAR_RADIUS,\n  connectors = true,\n  showValues = false,\n  barProps,\n}: WaterfallBarsProps) {\n  const { config, seriesKey, steps, formatValue } = useWaterfall()\n  const id = useId().replace(/:/g, '')\n\n  const shared = {\n    id,\n    seriesKey,\n    radius,\n    connectors,\n    showValues,\n    stepCount: steps.length,\n    formatValue,\n  }\n\n  return (\n    <>\n      {/* The baseline the totals stand on. A waterfall without a visible zero\n          asks the reader to take the floating bars on trust. */}\n      <RechartsReferenceLine y={0} stroke=\"var(--chart-grid)\" strokeWidth={1} />\n      <RechartsBar\n        dataKey={(row: unknown) => (row as ResolvedStep).span}\n        name={seriesKey}\n        isAnimationActive={false}\n        fill=\"transparent\"\n        shape={(props: unknown) => <StepShape {...(props as StepGeometry)} {...shared} />}\n        activeBar={(props: unknown) => <StepShape {...(props as StepGeometry)} {...shared} />}\n        {...barProps}\n      />\n      <defs>\n        <SeriesGradient id={id} dataKey={seriesKey} config={config} direction=\"vertical\" />\n        <BarHatchedFill id={id} dataKey={seriesKey} />\n      </defs>\n    </>\n  )\n}\n\n/** The geometry Recharts hands a custom bar shape, plus the step behind it. */\ninterface StepGeometry {\n  x?: number\n  y?: number\n  width?: number\n  height?: number\n  index?: number\n  payload?: ResolvedStep\n}\n\ninterface StepShapeProps extends StepGeometry {\n  id: string\n  seriesKey: string\n  radius: number\n  connectors: boolean\n  showValues: boolean\n  stepCount: number\n  formatValue: (value: number) => string\n}\n\n/** One step: its bar, its connector to the next step, and its label. */\nfunction StepShape({\n  x = 0,\n  y = 0,\n  width = 0,\n  height = 0,\n  index = -1,\n  payload,\n  id,\n  seriesKey,\n  radius,\n  connectors,\n  showValues,\n  stepCount,\n  formatValue,\n}: StepShapeProps) {\n  const plot = usePlotArea()\n\n  if (!payload) return null\n\n  const step = payload\n  const fill =\n    step.direction === 'decrease'\n      ? `url(#${id}-hatched-${seriesKey})`\n      : `url(#${id}-colors-${seriesKey})`\n\n  // Which edge of the rect the running total lands on. Everything downstream —\n  // the connector's height, where the label sits — hangs off this one fact,\n  // and it is a comparison rather than a re-derived scale so it stays right\n  // whatever domain the axis ends up with.\n  const closesAtTop = step.total >= step.span[1]\n  const closingY = closesAtTop ? y : y + height\n\n  // A zero-change step has no rect to see. It still has to appear, or the\n  // cascade silently loses a category and the axis stops matching the bars.\n  const drawnHeight = Math.max(height, 1)\n\n  // Recharts leaves a gap between category bands, and the connector has to\n  // cross it. One band is the plot's width over the number of steps, so the\n  // next bar's near edge is exactly one band along from this one's.\n  const band = plot && stepCount > 0 ? plot.width / stepCount : width\n  const hasNext = index >= 0 && index < stepCount - 1\n\n  return (\n    <g>\n      {connectors && hasNext && (\n        <line\n          x1={x + width}\n          y1={closingY}\n          x2={x + band}\n          y2={closingY}\n          stroke=\"var(--chart-cursor)\"\n          strokeWidth={1}\n          strokeDasharray=\"3 3\"\n        />\n      )}\n      <rect x={x} y={y} width={width} height={drawnHeight} rx={radius || undefined} fill={fill} />\n      {showValues && (\n        <text\n          x={x + width / 2}\n          // Above a rise, below a fall — so the label never sits inside the bar\n          // it is describing and never collides with the connector leaving it.\n          y={closesAtTop ? y - 6 : y + drawnHeight + 13}\n          textAnchor=\"middle\"\n          className=\"fill-(--ink) font-mono text-[11px] font-medium tabular-nums\"\n          style={{ pointerEvents: 'none' }}\n        >\n          {step.direction === 'total'\n            ? formatValue(step.total)\n            : `${step.change > 0 ? '+' : ''}${formatValue(step.change)}`}\n        </text>\n      )}\n    </g>\n  )\n}\n\n/** The step axis. */\nfunction XAxis({\n  dataKey = 'name',\n  tickLine = false,\n  axisLine = false,\n  tickMargin = 8,\n  minTickGap = 8,\n  label,\n  ...rest\n}: ChartXAxisProps) {\n  return (\n    <RechartsXAxis\n      dataKey={dataKey}\n      tickLine={tickLine}\n      axisLine={axisLine}\n      tickMargin={tickMargin}\n      minTickGap={minTickGap}\n      {...rest}\n    >\n      {axisLabel(label, 'x')}\n    </RechartsXAxis>\n  )\n}\n\n/** The value axis. */\nfunction YAxis({\n  tickLine = false,\n  axisLine = false,\n  tickMargin = 8,\n  width = 'auto',\n  label,\n  tickFormatter,\n  ...rest\n}: ChartYAxisProps) {\n  const { formatValue } = useWaterfall()\n\n  return (\n    <RechartsYAxis\n      tickLine={tickLine}\n      axisLine={axisLine}\n      tickMargin={tickMargin}\n      width={width}\n      tickFormatter={tickFormatter ?? formatValue}\n      {...rest}\n    >\n      {axisLabel(label, 'y')}\n    </RechartsYAxis>\n  )\n}\n\n/** Rules across the value axis. */\nfunction Grid({\n  strokeDasharray = '3 3',\n  vertical = false,\n  ...rest\n}: ComponentProps<typeof CartesianGrid>) {\n  return <CartesianGrid strokeDasharray={strokeDasharray} vertical={vertical} {...rest} />\n}\n\n/**\n * The hover panel, printing the change AND the total it leaves behind.\n *\n * The generic tooltip would print the bar's raw span, which is a pair of\n * running totals and reads as two unrelated numbers. Both facts a waterfall\n * carries — what this step did, and where the total stood afterwards — are\n * named here instead.\n */\nfunction Tooltip({ variant = 'solid', roundness = 'lg', defaultIndex }: ChartTooltipSlotProps) {\n  const { formatValue } = useWaterfall()\n\n  return (\n    <ChartTooltip\n      cursor={false}\n      defaultIndex={defaultIndex}\n      content={(props) => {\n        const { active, payload } = props as unknown as {\n          active?: boolean\n          payload?: { payload?: ResolvedStep }[]\n        }\n        const step = payload?.[0]?.payload\n        if (!active || !step) return <span className=\"p-4\" />\n\n        return (\n          <div\n            className={cn(\n              'grid min-w-40 gap-1.5 border border-(--rule-2) px-2.5 py-1.5 text-xs',\n              roundness === 'sm' && 'rounded-(--radius-sm)',\n              roundness === 'md' && 'rounded-(--radius)',\n              roundness === 'lg' && 'rounded-(--radius-lg)',\n              variant === 'frosted'\n                ? 'bg-(--chart-surface)/75 backdrop-blur-sm'\n                : 'bg-(--chart-surface)',\n            )}\n          >\n            <div className=\"font-medium text-(--ink)\">{step.name}</div>\n            {step.direction !== 'total' && (\n              <div className=\"flex justify-between gap-4 leading-none\">\n                <span className=\"text-(--ink-3-aa)\">Change</span>\n                <span className=\"font-mono font-medium tabular-nums text-(--ink)\">\n                  {step.change > 0 ? '+' : ''}\n                  {formatValue(step.change)}\n                </span>\n              </div>\n            )}\n            <div className=\"flex justify-between gap-4 leading-none\">\n              <span className=\"text-(--ink-3-aa)\">\n                {step.direction === 'total' ? 'Total' : 'Running total'}\n              </span>\n              <span className=\"font-mono font-medium tabular-nums text-(--ink)\">\n                {formatValue(step.total)}\n              </span>\n            </div>\n          </div>\n        )\n      }}\n    />\n  )\n}\n\n/** The decorative plate behind the plot. */\nfunction Background({ variant }: { variant: ChartBackgroundVariant }) {\n  return <ChartBackground variant={variant} />\n}\n\nWaterfallChart.Bars = Bars\nWaterfallChart.XAxis = XAxis\nWaterfallChart.YAxis = YAxis\nWaterfallChart.Grid = Grid\nWaterfallChart.Tooltip = Tooltip\nWaterfallChart.Background = Background\nWaterfallChart.ReferenceLine = ReferenceLine\nWaterfallChart.ReferenceBand = ReferenceBand\nWaterfallChart.Annotation = Annotation\n\nexport default WaterfallChart\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../../src/charts/WaterfallChart/WaterfallChart.tsx"],"sourcesContent":["'use client'\n\nimport {\n  createContext,\n  useContext,\n  useId,\n  useMemo,\n  type ComponentProps,\n  type ReactNode,\n} from 'react'\nimport {\n  Bar as RechartsBar,\n  BarChart as RechartsBarChart,\n  CartesianGrid,\n  ReferenceLine as RechartsReferenceLine,\n  XAxis as RechartsXAxis,\n  YAxis as RechartsYAxis,\n  usePlotArea,\n} from 'recharts'\nimport { ChartContainer, type ChartConfig } from '../lib/chart'\nimport { ChartFigure } from '../lib/figure'\nimport { type ChartEmptyProps } from '../lib/empty'\nimport { ChartBackground, type ChartBackgroundVariant } from '../lib/background'\nimport { ChartTooltip } from '../lib/tooltip'\nimport { BarHatchedFill, SeriesGradient } from '../lib/paint'\nimport { Annotation, ReferenceBand, ReferenceLine } from '../lib/annotations'\nimport { axisLabel } from '../lib/axis'\nimport { defaultTick } from '../lib/format'\nimport { cn } from '../../lib/cn'\nimport type { ChartXAxisProps, ChartYAxisProps } from '../BarChart/BarChart'\nimport type { ChartTooltipSlotProps } from '../AreaChart/AreaChart'\n\n/** The series a chart with only one of them falls back to. */\nconst DEFAULT_CONFIG: ChartConfig = { value: { label: 'Change' } }\n\nconst CHART_MARGIN = { top: 20, right: 12, bottom: 0, left: 12 }\n\n/** The corner every bar rounds to. */\nconst BAR_RADIUS = 2\n\n/** How a step moves the running total. */\nexport type WaterfallStepType = 'delta' | 'total'\n\n/** Which way a bar goes, which is what its texture encodes. */\nexport type WaterfallDirection = 'increase' | 'decrease' | 'total'\n\nexport interface WaterfallStep {\n  /** The step's name on the category axis. Doubles as its key. */\n  name: string\n  /**\n   * The signed change this step makes, or — on a `total` step — the absolute\n   * figure the running total is set to.\n   *\n   * Omit it on a `total` and the running total is used, which is the right\n   * default for the closing bar: an end total typed by hand can disagree with\n   * the deltas above it, and the chart would draw the disagreement without\n   * saying anything.\n   */\n  value?: number\n  /**\n   * `delta` (the default) adds `value` to the running total and floats the bar\n   * where that lands. `total` plants a bar on the baseline — an opening\n   * balance, a subtotal, a closing figure.\n   */\n  type?: WaterfallStepType\n}\n\n/** A step with its span, its direction and its running total worked out. */\ninterface ResolvedStep extends WaterfallStep {\n  type: WaterfallStepType\n  /**\n   * What this step moved the total by. On a `total` step that is the gap it\n   * closes — zero whenever the deltas above it already add up to it.\n   */\n  change: number\n  /** The running total once this step has been applied. */\n  total: number\n  /**\n   * The bar's two ends on the value axis, LOW first.\n   *\n   * Ascending because Recharts reads a floating bar's range that way and\n   * collapses a descending one to nothing — which is every decrease in the\n   * cascade. Which end the running total is at is recovered from `total`\n   * rather than from the order here.\n   */\n  span: [number, number]\n  direction: WaterfallDirection\n}\n\n/** A bar's two ends, low first — see `ResolvedStep.span`. */\nfunction ascending(a: number, b: number): [number, number] {\n  return a <= b ? [a, b] : [b, a]\n}\n\n/** The steps, walked in order, each carrying the total it leaves behind. */\nfunction resolve(data: WaterfallStep[]): ResolvedStep[] {\n  let running = 0\n\n  return data.map((step) => {\n    const type = step.type ?? 'delta'\n\n    if (type === 'total') {\n      const total = step.value ?? running\n      const resolved: ResolvedStep = {\n        ...step,\n        type,\n        change: total - running,\n        total,\n        span: ascending(0, total),\n        direction: 'total',\n      }\n      running = total\n      return resolved\n    }\n\n    const change = step.value ?? 0\n    const from = running\n    running += change\n\n    return {\n      ...step,\n      type,\n      change,\n      total: running,\n      span: ascending(from, running),\n      direction: change < 0 ? 'decrease' : 'increase',\n    }\n  })\n}\n\ninterface WaterfallContextValue {\n  config: ChartConfig\n  seriesKey: string\n  steps: ResolvedStep[]\n  formatValue: (value: number) => string\n}\n\nconst WaterfallContext = createContext<WaterfallContextValue | null>(null)\n\nfunction useWaterfall(): WaterfallContextValue {\n  const context = useContext(WaterfallContext)\n  if (!context) throw new Error('A waterfall part must be rendered inside <WaterfallChart>')\n  return context\n}\n\nexport interface WaterfallChartProps {\n  /**\n   * The single series — its label and its paint. Only the FIRST entry is read;\n   * a waterfall has one quantity and as many bars as it has steps.\n   */\n  config?: ChartConfig\n  /**\n   * The steps, in the order they are applied. Order is the arithmetic: the\n   * chart does not sort, because a different order is a different total at\n   * every intermediate bar.\n   */\n  data: WaterfallStep[]\n  /**\n   * What the chart shows, in a sentence a reader could act on. Required, and\n   * announced to a screen reader even when it is not printed.\n   */\n  title: string\n  /** Prints the title above the plot instead of hiding it from sight. */\n  showTitle?: boolean\n  /** A line under the title — the unit, the window, the caveat. */\n  description?: ReactNode\n  /** The composed parts — axes, grid, tooltip, and `<WaterfallChart.Bars>`. */\n  children: ReactNode\n  /** Merged onto the figure, last, so a call site can size or space it. */\n  className?: string\n  /** Escape hatch onto the raw Recharts chart element. */\n  chartProps?: ComponentProps<typeof RechartsBarChart>\n  /** Formats every number the chart prints — ticks, labels, tooltip, table. */\n  formatValue?: (value: number) => string\n  /** Drops the hidden table view. Only correct when the page prints the data itself. */\n  hideDataTable?: boolean\n  /**\n   * What the chart shows when it has nothing to draw. `false` keeps the axes,\n   * for a chart whose emptiness is itself the reading.\n   */\n  empty?: ChartEmptyProps | false\n}\n\n/**\n * How a total got from one figure to another — an opening balance, the signed\n * contributions that moved it, and where it closed.\n *\n * The form for \"why did this change\", which a pair of bars cannot answer and a\n * pie chart answers wrongly, because contributions can be NEGATIVE and a slice\n * cannot. Reach for `<BarChart>` when the parts do not have to add up to the\n * gap between two totals, and for `<FunnelChart>` when the quantity only ever\n * shrinks.\n *\n * **The connectors are the claim to be careful about.** They draw the steps as\n * a sequence — this happened, then this — and most breakdowns are not\n * sequential at all: churn and expansion in the same month are simultaneous,\n * and the order they are listed in is an editorial choice. The arithmetic\n * survives any order; the STORY does not, and a reader will take the leftmost\n * bar as the first cause. Two related traps: the intermediate bars are floating\n * lengths read against no baseline, so a small step high up the cascade is hard\n * to compare with a large one near zero; and any step that is itself a net of\n * two larger opposing movements is invisible as such. Where the order is\n * arbitrary, say so in the `description`.\n *\n * Recharts earns its place for the axes, grid and tooltip. Each bar is a\n * floating range — from the running total to the new one — with a custom shape\n * over it, because Recharts has no waterfall mark and the connectors have to be\n * drawn from the same geometry as the bars they join.\n *\n * @example\n * <WaterfallChart title=\"Revenue bridge, FY25\" data={steps}>\n *   <WaterfallChart.Grid />\n *   <WaterfallChart.XAxis />\n *   <WaterfallChart.YAxis label=\"AUD\" />\n *   <WaterfallChart.Tooltip />\n *   <WaterfallChart.Bars showValues />\n * </WaterfallChart>\n *\n * @example\n * const steps = [\n *   { name: 'FY24', value: 1200, type: 'total' as const },\n *   { name: 'New', value: 340 },\n *   { name: 'Churn', value: -180 },\n *   // No value: the closing bar is whatever the deltas add up to.\n *   { name: 'FY25', type: 'total' as const },\n * ]\n */\nexport function WaterfallChart({\n  config = DEFAULT_CONFIG,\n  data,\n  title,\n  showTitle,\n  description,\n  children,\n  className,\n  chartProps,\n  formatValue = defaultTick,\n  hideDataTable = false,\n  empty,\n}: WaterfallChartProps) {\n  const chartId = useId().replace(/:/g, '')\n  const seriesKey = Object.keys(config)[0] ?? 'value'\n  const steps = useMemo(() => resolve(data), [data])\n\n  const context = useMemo<WaterfallContextValue>(\n    () => ({ config, seriesKey, steps, formatValue }),\n    [config, seriesKey, steps, formatValue],\n  )\n\n  const isEmpty = empty !== false && steps.length === 0\n\n  return (\n    <WaterfallContext.Provider value={context}>\n      <ChartFigure\n        title={title}\n        showTitle={showTitle}\n        description={description}\n        className={className}\n        table={\n          hideDataTable\n            ? false\n            : {\n                rows: steps as unknown as Record<string, unknown>[],\n                rowKey: 'name',\n                columns: [\n                  { key: 'change', label: 'Change' },\n                  { key: 'total', label: 'Running total' },\n                ],\n              }\n        }\n        isEmpty={isEmpty}\n        empty={empty}\n      >\n        <ChartContainer config={config}>\n          <RechartsBarChart\n            id={chartId}\n            accessibilityLayer\n            margin={CHART_MARGIN}\n            data={steps}\n            barCategoryGap=\"25%\"\n            {...chartProps}\n          >\n            {children}\n          </RechartsBarChart>\n        </ChartContainer>\n      </ChartFigure>\n    </WaterfallContext.Provider>\n  )\n}\n\nexport interface WaterfallBarsProps {\n  /** The bars' corner. */\n  radius?: number\n  /**\n   * Joins each bar's closing edge to where the next one starts.\n   *\n   * On by default: without them a waterfall is a row of bars floating at\n   * unrelated heights, and the cascade — which is the entire point of the form\n   * — has to be reconstructed by the reader.\n   */\n  connectors?: boolean\n  /**\n   * Prints each step's signed change above or below its bar.\n   *\n   * Worth more here than on most charts: an intermediate bar has no baseline\n   * under it, so its length is the one thing a reader cannot get off the axis.\n   */\n  showValues?: boolean\n  /** Escape hatch onto the underlying Recharts bar. */\n  barProps?: ComponentProps<typeof RechartsBar>\n}\n\n/**\n * The bars and the connectors between them.\n *\n * Increases and totals take the solid series fill; decreases take the 45°\n * hatch. Texture rather than a second colour, because the whole set has to stay\n * legible in greyscale and under forced colours — and a total is told from an\n * increase by geometry instead, since it is the only kind of bar that stands on\n * the baseline.\n */\nfunction Bars({\n  radius = BAR_RADIUS,\n  connectors = true,\n  showValues = false,\n  barProps,\n}: WaterfallBarsProps) {\n  const { config, seriesKey, steps, formatValue } = useWaterfall()\n  const id = useId().replace(/:/g, '')\n\n  const shared = {\n    id,\n    seriesKey,\n    radius,\n    connectors,\n    showValues,\n    stepCount: steps.length,\n    formatValue,\n  }\n\n  return (\n    <>\n      {/* The baseline the totals stand on. A waterfall without a visible zero\n          asks the reader to take the floating bars on trust. */}\n      <RechartsReferenceLine y={0} stroke=\"var(--chart-grid)\" strokeWidth={1} />\n      <RechartsBar\n        dataKey={(row: unknown) => (row as ResolvedStep).span}\n        name={seriesKey}\n        isAnimationActive={false}\n        fill=\"transparent\"\n        shape={(props: unknown) => <StepShape {...(props as StepGeometry)} {...shared} />}\n        activeBar={(props: unknown) => <StepShape {...(props as StepGeometry)} {...shared} />}\n        {...barProps}\n      />\n      <defs>\n        <SeriesGradient id={id} dataKey={seriesKey} config={config} direction=\"vertical\" />\n        <BarHatchedFill id={id} dataKey={seriesKey} />\n      </defs>\n    </>\n  )\n}\n\n/** The geometry Recharts hands a custom bar shape, plus the step behind it. */\ninterface StepGeometry {\n  x?: number\n  y?: number\n  width?: number\n  height?: number\n  index?: number\n  payload?: ResolvedStep\n}\n\ninterface StepShapeProps extends StepGeometry {\n  id: string\n  seriesKey: string\n  radius: number\n  connectors: boolean\n  showValues: boolean\n  stepCount: number\n  formatValue: (value: number) => string\n}\n\n/** One step: its bar, its connector to the next step, and its label. */\nfunction StepShape({\n  x = 0,\n  y = 0,\n  width = 0,\n  height = 0,\n  index = -1,\n  payload,\n  id,\n  seriesKey,\n  radius,\n  connectors,\n  showValues,\n  stepCount,\n  formatValue,\n}: StepShapeProps) {\n  const plot = usePlotArea()\n\n  if (!payload) return null\n\n  const step = payload\n  const fill =\n    step.direction === 'decrease'\n      ? `url(#${id}-hatched-${seriesKey})`\n      : `url(#${id}-colors-${seriesKey})`\n\n  // Which edge of the rect the running total lands on. Everything downstream —\n  // the connector's height, where the label sits — hangs off this one fact,\n  // and it is a comparison rather than a re-derived scale so it stays right\n  // whatever domain the axis ends up with.\n  const closesAtTop = step.total >= step.span[1]\n  const closingY = closesAtTop ? y : y + height\n\n  // A zero-change step has no rect to see. It still has to appear, or the\n  // cascade silently loses a category and the axis stops matching the bars.\n  const drawnHeight = Math.max(height, 1)\n\n  // Recharts leaves a gap between category bands, and the connector has to\n  // cross it. One band is the plot's width over the number of steps, so the\n  // next bar's near edge is exactly one band along from this one's.\n  const band = plot && stepCount > 0 ? plot.width / stepCount : width\n  const hasNext = index >= 0 && index < stepCount - 1\n\n  return (\n    <g>\n      {connectors && hasNext && (\n        <line\n          x1={x + width}\n          y1={closingY}\n          x2={x + band}\n          y2={closingY}\n          stroke=\"var(--chart-cursor)\"\n          strokeWidth={1}\n          strokeDasharray=\"3 3\"\n        />\n      )}\n      <rect x={x} y={y} width={width} height={drawnHeight} rx={radius || undefined} fill={fill} />\n      {showValues && (\n        <text\n          x={x + width / 2}\n          // Above a rise, below a fall — so the label never sits inside the bar\n          // it is describing and never collides with the connector leaving it.\n          y={closesAtTop ? y - 6 : y + drawnHeight + 13}\n          textAnchor=\"middle\"\n          className=\"fill-(--ink) font-mono text-[11px] font-medium tabular-nums\"\n          style={{ pointerEvents: 'none' }}\n        >\n          {step.direction === 'total'\n            ? formatValue(step.total)\n            : `${step.change > 0 ? '+' : ''}${formatValue(step.change)}`}\n        </text>\n      )}\n    </g>\n  )\n}\n\n/** The step axis. */\nfunction XAxis({\n  dataKey = 'name',\n  tickLine = false,\n  axisLine = false,\n  tickMargin = 8,\n  minTickGap = 8,\n  label,\n  ...rest\n}: ChartXAxisProps) {\n  return (\n    <RechartsXAxis\n      dataKey={dataKey}\n      tickLine={tickLine}\n      axisLine={axisLine}\n      tickMargin={tickMargin}\n      minTickGap={minTickGap}\n      {...rest}\n    >\n      {axisLabel(label, 'x')}\n    </RechartsXAxis>\n  )\n}\n\n/** The value axis. */\nfunction YAxis({\n  tickLine = false,\n  axisLine = false,\n  tickMargin = 8,\n  width = 'auto',\n  label,\n  tickFormatter,\n  ...rest\n}: ChartYAxisProps) {\n  const { formatValue } = useWaterfall()\n\n  return (\n    <RechartsYAxis\n      tickLine={tickLine}\n      axisLine={axisLine}\n      tickMargin={tickMargin}\n      width={width}\n      tickFormatter={tickFormatter ?? formatValue}\n      {...rest}\n    >\n      {axisLabel(label, 'y')}\n    </RechartsYAxis>\n  )\n}\n\n/** Rules across the value axis. */\nfunction Grid({\n  strokeDasharray = '3 3',\n  vertical = false,\n  ...rest\n}: ComponentProps<typeof CartesianGrid>) {\n  return <CartesianGrid strokeDasharray={strokeDasharray} vertical={vertical} {...rest} />\n}\n\n/**\n * The hover panel, printing the change AND the total it leaves behind.\n *\n * The generic tooltip would print the bar's raw span, which is a pair of\n * running totals and reads as two unrelated numbers. Both facts a waterfall\n * carries — what this step did, and where the total stood afterwards — are\n * named here instead.\n */\nfunction Tooltip({ variant = 'solid', roundness = 'lg', defaultIndex }: ChartTooltipSlotProps) {\n  const { formatValue } = useWaterfall()\n\n  return (\n    <ChartTooltip\n      cursor={false}\n      defaultIndex={defaultIndex}\n      content={(props) => {\n        const { active, payload } = props as unknown as {\n          active?: boolean\n          payload?: { payload?: ResolvedStep }[]\n        }\n        const step = payload?.[0]?.payload\n        if (!active || !step) return <span className=\"p-4\" />\n\n        return (\n          <div\n            className={cn(\n              'grid min-w-40 gap-1.5 border border-(--rule-2) px-2.5 py-1.5 text-xs',\n              roundness === 'sm' && 'rounded-(--radius-sm)',\n              roundness === 'md' && 'rounded-(--radius)',\n              roundness === 'lg' && 'rounded-(--radius-lg)',\n              variant === 'frosted'\n                ? 'bg-(--chart-surface)/75 backdrop-blur-sm'\n                : 'bg-(--chart-surface)',\n            )}\n          >\n            <div className=\"font-medium text-(--ink)\">{step.name}</div>\n            {step.direction !== 'total' && (\n              <div className=\"flex justify-between gap-4 leading-none\">\n                <span className=\"text-(--ink-3-aa)\">Change</span>\n                <span className=\"font-mono font-medium tabular-nums text-(--ink)\">\n                  {step.change > 0 ? '+' : ''}\n                  {formatValue(step.change)}\n                </span>\n              </div>\n            )}\n            <div className=\"flex justify-between gap-4 leading-none\">\n              <span className=\"text-(--ink-3-aa)\">\n                {step.direction === 'total' ? 'Total' : 'Running total'}\n              </span>\n              <span className=\"font-mono font-medium tabular-nums text-(--ink)\">\n                {formatValue(step.total)}\n              </span>\n            </div>\n          </div>\n        )\n      }}\n    />\n  )\n}\n\n/** The decorative plate behind the plot. */\nfunction Background({ variant }: { variant: ChartBackgroundVariant }) {\n  return <ChartBackground variant={variant} />\n}\n\nWaterfallChart.Bars = Bars\nWaterfallChart.XAxis = XAxis\nWaterfallChart.YAxis = YAxis\nWaterfallChart.Grid = Grid\nWaterfallChart.Tooltip = Tooltip\nWaterfallChart.Background = Background\nWaterfallChart.ReferenceLine = ReferenceLine\nWaterfallChart.ReferenceBand = ReferenceBand\nWaterfallChart.Annotation = Annotation\n\nexport default WaterfallChart\n"],"mappings":"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","names":[]}

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

@@ -1,6 +1,7 @@
 import { ChartColumn } from './figure.js';
 export { downloadBlob } from '../../lib/svg-export.js';
 import 'react';
+import './empty.js';
 
 /**
  * Taking a chart off the page: a PNG of the plot, or a CSV of its rows.

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

@@ -1,5 +1,6 @@
 import * as react from 'react';
 import { ReactNode } from 'react';
+import { ChartEmptyProps } from './empty.js';
 
 interface ChartColumn {
     /** The row field this column reads. */
@@ -47,6 +48,19 @@ interface ChartFigureProps {
     children: ReactNode;
     /** The table view. Omit and it is generated; `false` opts out. */
     table?: Omit<ChartDataTableProps, 'caption'> | false;
+    /**
+     * Whether there is nothing to draw. The plot is replaced by `empty` when it
+     * is true.
+     *
+     * Named as a question rather than derived from `table.rows`, because a chart
+     * mid-load has no rows either and wants its skeleton, not a message.
+     */
+    isEmpty?: boolean;
+    /**
+     * What stands in for the plot when there is nothing to draw. `false` keeps
+     * the plot, for a chart whose emptiness is itself the reading.
+     */
+    empty?: ChartEmptyProps | false;
 }
 /**
  * The figure a chart is rendered inside: its name, its plot, and its data as a
@@ -55,7 +69,13 @@ interface ChartFigureProps {
  * Every chart root in the package wraps itself in this, so "the chart is
  * announced and its numbers are reachable" is a property of the system rather
  * than something each call site has to remember to add.
+ *
+ * The empty state is here for the same reason. Seven of the twenty charts had
+ * no `empty` at all — zero rows drew a named figure over a blank box, and
+ * `ChartDataTable` renders nothing below one row, so the picture and its text
+ * equivalent went silent together and the reader could not tell "no data" from
+ * "failed to load". A chart that forgets it now has to forget it here, once.
  */
-declare function ChartFigure({ title, showTitle, description, className, children, table, }: ChartFigureProps): react.JSX.Element;
+declare function ChartFigure({ title, showTitle, description, className, children, table, isEmpty, empty, }: ChartFigureProps): react.JSX.Element;
 
 export { type ChartColumn, ChartDataTable, type ChartDataTableProps, ChartFigure, type ChartFigureProps };

package/dist/charts/lib/figure.js

@@ -1,6 +1,7 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useId } from "react";
 import { cn } from "../../lib/cn.js";
+import { ChartEmpty } from "./empty.js";
 function ChartDataTable({ caption, rows, columns, rowKey }) {
   if (rows.length === 0 || columns.length === 0) return null;
   return /* @__PURE__ */ jsxs("table", { className: "sr-only", children: [
@@ -27,7 +28,9 @@ function ChartFigure({
   description,
   className,
   children,
-  table
+  table,
+  isEmpty = false,
+  empty
 }) {
   const captionId = `chart-title-${useId().replace(/:/g, "")}`;
   return (
@@ -47,7 +50,7 @@ function ChartFigure({
           ]
         }
       ),
-      children,
+      isEmpty && empty !== false ? /* @__PURE__ */ jsx(ChartEmpty, { ...empty || {} }) : children,
       table && /* @__PURE__ */ jsx(ChartDataTable, { caption: title, ...table })
     ] })
   );

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/charts/lib/figure.tsx"],"sourcesContent":["import { useId, type ReactNode } from 'react'\nimport { cn } from '../../lib/cn'\n\nexport interface ChartColumn {\n  /** The row field this column reads. */\n  key: string\n  /** What the column is called in the table header. */\n  label: ReactNode\n}\n\nexport interface ChartDataTableProps {\n  caption: string\n  rows: Record<string, unknown>[]\n  columns: ChartColumn[]\n  /** The field naming each row — the category, the date, the bucket. */\n  rowKey?: string\n}\n\n/**\n * The chart's data, as a table, for a reader who cannot see the chart.\n *\n * An SVG plot is a picture: `accessibilityLayer` gives Recharts' own keyboard\n * cursor and announces one point at a time, which is navigation rather than\n * access to the figures. This is the table view — visually hidden, in the\n * accessibility tree, and generated from the same rows the marks are drawn\n * from, so the two cannot disagree.\n *\n * `sr-only` rather than `hidden`: `display: none` removes it from the\n * accessibility tree as well as from the page, which would defeat the purpose.\n */\nexport function ChartDataTable({ caption, rows, columns, rowKey }: ChartDataTableProps) {\n  if (rows.length === 0 || columns.length === 0) return null\n\n  return (\n    <table className=\"sr-only\">\n      <caption>{caption}</caption>\n      <thead>\n        <tr>\n          {rowKey && <th scope=\"col\">{rowKey}</th>}\n          {columns.map((column) => (\n            <th key={column.key} scope=\"col\">\n              {column.label}\n            </th>\n          ))}\n        </tr>\n      </thead>\n      <tbody>\n        {rows.map((row, index) => (\n          <tr key={index}>\n            {rowKey && <th scope=\"row\">{cellText(row[rowKey]) || String(index + 1)}</th>}\n            {columns.map((column) => (\n              <td key={column.key}>{cellText(row[column.key])}</td>\n            ))}\n          </tr>\n        ))}\n      </tbody>\n    </table>\n  )\n}\n\n/** A cell value as text. Anything that is not a primitive reads as empty. */\nfunction cellText(value: unknown): string {\n  if (value === null || value === undefined) return ''\n  if (typeof value === 'number') return value.toLocaleString()\n  if (typeof value === 'string' || typeof value === 'boolean') return String(value)\n  return ''\n}\n\nexport interface ChartFigureProps {\n  /**\n   * What the chart shows, in a sentence a reader could act on — \"Visitors per\n   * month, 2026\" rather than \"Chart\".\n   *\n   * Required, and required for the same reason `Table.caption` and\n   * `Progress.label` are: a plot with no name announces nothing, and it is not\n   * a thing a call site can be trusted to remember. Hidden by default, because\n   * most call sites already print a heading above the chart; `showTitle` puts\n   * it back when they do not.\n   */\n  title: string\n  /** Prints the title above the plot instead of hiding it from sight. */\n  showTitle?: boolean\n  /** A line under the title — the unit, the window, the caveat. */\n  description?: ReactNode\n  className?: string\n  children: ReactNode\n  /** The table view. Omit and it is generated; `false` opts out. */\n  table?: Omit<ChartDataTableProps, 'caption'> | false\n}\n\n/**\n * The figure a chart is rendered inside: its name, its plot, and its data as a\n * table.\n *\n * Every chart root in the package wraps itself in this, so \"the chart is\n * announced and its numbers are reachable\" is a property of the system rather\n * than something each call site has to remember to add.\n */\nexport function ChartFigure({\n  title,\n  showTitle = false,\n  description,\n  className,\n  children,\n  table,\n}: ChartFigureProps) {\n  const captionId = `chart-title-${useId().replace(/:/g, '')}`\n\n  return (\n    // Named explicitly rather than relying on the caption. A `<figcaption>` IS\n    // the figure's accessible name per the spec, but support for deriving it is\n    // uneven across assistive technology — and a chart whose name resolves in\n    // only some screen readers is a chart with no name.\n    <figure aria-labelledby={captionId} className={cn('flex min-h-0 w-full flex-col', className)}>\n      <figcaption\n        id={captionId}\n        className={cn(!showTitle && 'sr-only', showTitle && 'mb-3 flex flex-col gap-1')}\n      >\n        <span className={cn(showTitle && 'font-heading text-[length:var(--fs-item)] text-(--ink)')}>{title}</span>\n        {description && (\n          <span className={cn(showTitle && 'mono-meta text-(--ink-3-aa)')}>{description}</span>\n        )}\n      </figcaption>\n      {children}\n      {table && <ChartDataTable caption={title} {...table} />}\n    </figure>\n  )\n}\n"],"mappings":"AAmCM,cAEE,YAFF;AAnCN,SAAS,aAA6B;AACtC,SAAS,UAAU;AA6BZ,SAAS,eAAe,EAAE,SAAS,MAAM,SAAS,OAAO,GAAwB;AACtF,MAAI,KAAK,WAAW,KAAK,QAAQ,WAAW,EAAG,QAAO;AAEtD,SACE,qBAAC,WAAM,WAAU,WACf;AAAA,wBAAC,aAAS,mBAAQ;AAAA,IAClB,oBAAC,WACC,+BAAC,QACE;AAAA,gBAAU,oBAAC,QAAG,OAAM,OAAO,kBAAO;AAAA,MAClC,QAAQ,IAAI,CAAC,WACZ,oBAAC,QAAoB,OAAM,OACxB,iBAAO,SADD,OAAO,GAEhB,CACD;AAAA,OACH,GACF;AAAA,IACA,oBAAC,WACE,eAAK,IAAI,CAAC,KAAK,UACd,qBAAC,QACE;AAAA,gBAAU,oBAAC,QAAG,OAAM,OAAO,mBAAS,IAAI,MAAM,CAAC,KAAK,OAAO,QAAQ,CAAC,GAAE;AAAA,MACtE,QAAQ,IAAI,CAAC,WACZ,oBAAC,QAAqB,mBAAS,IAAI,OAAO,GAAG,CAAC,KAArC,OAAO,GAAgC,CACjD;AAAA,SAJM,KAKT,CACD,GACH;AAAA,KACF;AAEJ;AAGA,SAAS,SAAS,OAAwB;AACxC,MAAI,UAAU,QAAQ,UAAU,OAAW,QAAO;AAClD,MAAI,OAAO,UAAU,SAAU,QAAO,MAAM,eAAe;AAC3D,MAAI,OAAO,UAAU,YAAY,OAAO,UAAU,UAAW,QAAO,OAAO,KAAK;AAChF,SAAO;AACT;AAgCO,SAAS,YAAY;AAAA,EAC1B;AAAA,EACA,YAAY;AAAA,EACZ;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAqB;AACnB,QAAM,YAAY,eAAe,MAAM,EAAE,QAAQ,MAAM,EAAE,CAAC;AAE1D;AAAA;AAAA;AAAA;AAAA;AAAA,IAKE,qBAAC,YAAO,mBAAiB,WAAW,WAAW,GAAG,gCAAgC,SAAS,GACzF;AAAA;AAAA,QAAC;AAAA;AAAA,UACC,IAAI;AAAA,UACJ,WAAW,GAAG,CAAC,aAAa,WAAW,aAAa,0BAA0B;AAAA,UAE9E;AAAA,gCAAC,UAAK,WAAW,GAAG,aAAa,wDAAwD,GAAI,iBAAM;AAAA,YAClG,eACC,oBAAC,UAAK,WAAW,GAAG,aAAa,6BAA6B,GAAI,uBAAY;AAAA;AAAA;AAAA,MAElF;AAAA,MACC;AAAA,MACA,SAAS,oBAAC,kBAAe,SAAS,OAAQ,GAAG,OAAO;AAAA,OACvD;AAAA;AAEJ;","names":[]}
+{"version":3,"sources":["../../../src/charts/lib/figure.tsx"],"sourcesContent":["import { useId, type ReactNode } from 'react'\nimport { cn } from '../../lib/cn'\nimport { ChartEmpty, type ChartEmptyProps } from './empty'\n\nexport interface ChartColumn {\n  /** The row field this column reads. */\n  key: string\n  /** What the column is called in the table header. */\n  label: ReactNode\n}\n\nexport interface ChartDataTableProps {\n  caption: string\n  rows: Record<string, unknown>[]\n  columns: ChartColumn[]\n  /** The field naming each row — the category, the date, the bucket. */\n  rowKey?: string\n}\n\n/**\n * The chart's data, as a table, for a reader who cannot see the chart.\n *\n * An SVG plot is a picture: `accessibilityLayer` gives Recharts' own keyboard\n * cursor and announces one point at a time, which is navigation rather than\n * access to the figures. This is the table view — visually hidden, in the\n * accessibility tree, and generated from the same rows the marks are drawn\n * from, so the two cannot disagree.\n *\n * `sr-only` rather than `hidden`: `display: none` removes it from the\n * accessibility tree as well as from the page, which would defeat the purpose.\n */\nexport function ChartDataTable({ caption, rows, columns, rowKey }: ChartDataTableProps) {\n  if (rows.length === 0 || columns.length === 0) return null\n\n  return (\n    <table className=\"sr-only\">\n      <caption>{caption}</caption>\n      <thead>\n        <tr>\n          {rowKey && <th scope=\"col\">{rowKey}</th>}\n          {columns.map((column) => (\n            <th key={column.key} scope=\"col\">\n              {column.label}\n            </th>\n          ))}\n        </tr>\n      </thead>\n      <tbody>\n        {rows.map((row, index) => (\n          <tr key={index}>\n            {rowKey && <th scope=\"row\">{cellText(row[rowKey]) || String(index + 1)}</th>}\n            {columns.map((column) => (\n              <td key={column.key}>{cellText(row[column.key])}</td>\n            ))}\n          </tr>\n        ))}\n      </tbody>\n    </table>\n  )\n}\n\n/** A cell value as text. Anything that is not a primitive reads as empty. */\nfunction cellText(value: unknown): string {\n  if (value === null || value === undefined) return ''\n  if (typeof value === 'number') return value.toLocaleString()\n  if (typeof value === 'string' || typeof value === 'boolean') return String(value)\n  return ''\n}\n\nexport interface ChartFigureProps {\n  /**\n   * What the chart shows, in a sentence a reader could act on — \"Visitors per\n   * month, 2026\" rather than \"Chart\".\n   *\n   * Required, and required for the same reason `Table.caption` and\n   * `Progress.label` are: a plot with no name announces nothing, and it is not\n   * a thing a call site can be trusted to remember. Hidden by default, because\n   * most call sites already print a heading above the chart; `showTitle` puts\n   * it back when they do not.\n   */\n  title: string\n  /** Prints the title above the plot instead of hiding it from sight. */\n  showTitle?: boolean\n  /** A line under the title — the unit, the window, the caveat. */\n  description?: ReactNode\n  className?: string\n  children: ReactNode\n  /** The table view. Omit and it is generated; `false` opts out. */\n  table?: Omit<ChartDataTableProps, 'caption'> | false\n  /**\n   * Whether there is nothing to draw. The plot is replaced by `empty` when it\n   * is true.\n   *\n   * Named as a question rather than derived from `table.rows`, because a chart\n   * mid-load has no rows either and wants its skeleton, not a message.\n   */\n  isEmpty?: boolean\n  /**\n   * What stands in for the plot when there is nothing to draw. `false` keeps\n   * the plot, for a chart whose emptiness is itself the reading.\n   */\n  empty?: ChartEmptyProps | false\n}\n\n/**\n * The figure a chart is rendered inside: its name, its plot, and its data as a\n * table.\n *\n * Every chart root in the package wraps itself in this, so \"the chart is\n * announced and its numbers are reachable\" is a property of the system rather\n * than something each call site has to remember to add.\n *\n * The empty state is here for the same reason. Seven of the twenty charts had\n * no `empty` at all — zero rows drew a named figure over a blank box, and\n * `ChartDataTable` renders nothing below one row, so the picture and its text\n * equivalent went silent together and the reader could not tell \"no data\" from\n * \"failed to load\". A chart that forgets it now has to forget it here, once.\n */\nexport function ChartFigure({\n  title,\n  showTitle = false,\n  description,\n  className,\n  children,\n  table,\n  isEmpty = false,\n  empty,\n}: ChartFigureProps) {\n  const captionId = `chart-title-${useId().replace(/:/g, '')}`\n\n  return (\n    // Named explicitly rather than relying on the caption. A `<figcaption>` IS\n    // the figure's accessible name per the spec, but support for deriving it is\n    // uneven across assistive technology — and a chart whose name resolves in\n    // only some screen readers is a chart with no name.\n    <figure aria-labelledby={captionId} className={cn('flex min-h-0 w-full flex-col', className)}>\n      <figcaption\n        id={captionId}\n        className={cn(!showTitle && 'sr-only', showTitle && 'mb-3 flex flex-col gap-1')}\n      >\n        <span className={cn(showTitle && 'font-heading text-[length:var(--fs-item)] text-(--ink)')}>{title}</span>\n        {description && (\n          <span className={cn(showTitle && 'mono-meta text-(--ink-3-aa)')}>{description}</span>\n        )}\n      </figcaption>\n      {isEmpty && empty !== false ? <ChartEmpty {...(empty || {})} /> : children}\n      {table && <ChartDataTable caption={title} {...table} />}\n    </figure>\n  )\n}\n"],"mappings":"AAoCM,cAEE,YAFF;AApCN,SAAS,aAA6B;AACtC,SAAS,UAAU;AACnB,SAAS,kBAAwC;AA6B1C,SAAS,eAAe,EAAE,SAAS,MAAM,SAAS,OAAO,GAAwB;AACtF,MAAI,KAAK,WAAW,KAAK,QAAQ,WAAW,EAAG,QAAO;AAEtD,SACE,qBAAC,WAAM,WAAU,WACf;AAAA,wBAAC,aAAS,mBAAQ;AAAA,IAClB,oBAAC,WACC,+BAAC,QACE;AAAA,gBAAU,oBAAC,QAAG,OAAM,OAAO,kBAAO;AAAA,MAClC,QAAQ,IAAI,CAAC,WACZ,oBAAC,QAAoB,OAAM,OACxB,iBAAO,SADD,OAAO,GAEhB,CACD;AAAA,OACH,GACF;AAAA,IACA,oBAAC,WACE,eAAK,IAAI,CAAC,KAAK,UACd,qBAAC,QACE;AAAA,gBAAU,oBAAC,QAAG,OAAM,OAAO,mBAAS,IAAI,MAAM,CAAC,KAAK,OAAO,QAAQ,CAAC,GAAE;AAAA,MACtE,QAAQ,IAAI,CAAC,WACZ,oBAAC,QAAqB,mBAAS,IAAI,OAAO,GAAG,CAAC,KAArC,OAAO,GAAgC,CACjD;AAAA,SAJM,KAKT,CACD,GACH;AAAA,KACF;AAEJ;AAGA,SAAS,SAAS,OAAwB;AACxC,MAAI,UAAU,QAAQ,UAAU,OAAW,QAAO;AAClD,MAAI,OAAO,UAAU,SAAU,QAAO,MAAM,eAAe;AAC3D,MAAI,OAAO,UAAU,YAAY,OAAO,UAAU,UAAW,QAAO,OAAO,KAAK;AAChF,SAAO;AACT;AAmDO,SAAS,YAAY;AAAA,EAC1B;AAAA,EACA,YAAY;AAAA,EACZ;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,UAAU;AAAA,EACV;AACF,GAAqB;AACnB,QAAM,YAAY,eAAe,MAAM,EAAE,QAAQ,MAAM,EAAE,CAAC;AAE1D;AAAA;AAAA;AAAA;AAAA;AAAA,IAKE,qBAAC,YAAO,mBAAiB,WAAW,WAAW,GAAG,gCAAgC,SAAS,GACzF;AAAA;AAAA,QAAC;AAAA;AAAA,UACC,IAAI;AAAA,UACJ,WAAW,GAAG,CAAC,aAAa,WAAW,aAAa,0BAA0B;AAAA,UAE9E;AAAA,gCAAC,UAAK,WAAW,GAAG,aAAa,wDAAwD,GAAI,iBAAM;AAAA,YAClG,eACC,oBAAC,UAAK,WAAW,GAAG,aAAa,6BAA6B,GAAI,uBAAY;AAAA;AAAA;AAAA,MAElF;AAAA,MACC,WAAW,UAAU,QAAQ,oBAAC,cAAY,GAAI,SAAS,CAAC,GAAI,IAAK;AAAA,MACjE,SAAS,oBAAC,kBAAe,SAAS,OAAQ,GAAG,OAAO;AAAA,OACvD;AAAA;AAEJ;","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/toolbar.d.ts

@@ -5,6 +5,7 @@ import { ChartColumn } from './figure.js';
 import './brush.js';
 import 'recharts';
 import './chart.js';
+import './empty.js';
 
 /** Which file a reader can take away. */
 type ChartExportFormat = 'png' | 'csv';

package/dist/components/Accordion/Accordion.js

@@ -23,7 +23,14 @@ function AccordionItem({ title, children, className, ...rest }) {
             }
           )
         ] }) }),
-        /* @__PURE__ */ jsx(AccordionPrimitive.Content, { className: "overflow-hidden text-sm leading-relaxed text-(--ink-2) data-[state=closed]:animate-[m22-accordion-up_var(--duration-base)_var(--ease)] data-[state=open]:animate-[m22-accordion-down_var(--duration-base)_var(--ease)]", children: /* @__PURE__ */ jsx("div", { className: "pb-4 pe-8", children }) })
+        /* @__PURE__ */ jsx(
+          AccordionPrimitive.Content,
+          {
+            "data-m22-animated": true,
+            className: "overflow-hidden text-sm leading-relaxed text-(--ink-2) data-[state=closed]:animate-[m22-accordion-up_var(--duration-base)_var(--ease)] data-[state=open]:animate-[m22-accordion-down_var(--duration-base)_var(--ease)]",
+            children: /* @__PURE__ */ jsx("div", { className: "pb-4 pe-8", children })
+          }
+        )
       ]
     }
   );

package/dist/components/Accordion/Accordion.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Accordion/Accordion.tsx"],"sourcesContent":["'use client'\n\nimport * as AccordionPrimitive from '@radix-ui/react-accordion'\nimport { Plus } from 'lucide-react'\nimport type { ComponentProps, ReactNode } from 'react'\nimport { cn } from '../../lib/cn'\n\n/**\n * Radix root, re-exported. Pass `type=\"single\" collapsible` for an FAQ and\n * `type=\"multiple\"` for a settings stack; Radix's own discriminated union then\n * types `value` correctly for each.\n */\nexport const Accordion = AccordionPrimitive.Root\n\nexport interface AccordionItemProps\n  extends Omit<ComponentProps<typeof AccordionPrimitive.Item>, 'children' | 'title'> {\n  /** The row's summary — what the reader clicks. Named `title` rather than\n   *  inherited from the DOM attribute of the same name, which is a tooltip. */\n  title: ReactNode\n  children: ReactNode\n}\n\n/**\n * One disclosure row: a hairline-ruled trigger and its panel.\n *\n * The marker is a plus that rotates into a minus, not a chevron. A chevron says\n * \"there is more below\"; a plus says \"this opens\" — and in a stack of rows the\n * difference decides whether the reader expects navigation or expansion.\n *\n * The panel animates on Radix's own `--radix-accordion-content-height`, so it\n * opens to its real height without measuring anything at the call site.\n *\n * @example\n * <Accordion type=\"single\" collapsible>\n *   <AccordionItem value=\"ship\" title=\"How do I ship it?\">Push to main.</AccordionItem>\n * </Accordion>\n */\nexport function AccordionItem({ title, children, className, ...rest }: AccordionItemProps) {\n  return (\n    <AccordionPrimitive.Item\n      className={cn('border-b border-(--rule)', className)}\n      {...rest}\n    >\n      <AccordionPrimitive.Header className=\"m-0\">\n        <AccordionPrimitive.Trigger className=\"group flex w-full items-center justify-between gap-4 py-4 text-start font-sans text-sm text-(--ink) transition-colors duration-(--duration-fast) hover:text-(--ink-2)\">\n          {title}\n          <Plus\n            size={16}\n            strokeWidth={1.5}\n            aria-hidden\n            className=\"shrink-0 text-(--ink-3-aa) transition-transform duration-(--duration-base) ease-(--ease-out-expo) group-data-[state=open]:rotate-45\"\n          />\n        </AccordionPrimitive.Trigger>\n      </AccordionPrimitive.Header>\n      <AccordionPrimitive.Content className=\"overflow-hidden text-sm leading-relaxed text-(--ink-2) data-[state=closed]:animate-[m22-accordion-up_var(--duration-base)_var(--ease)] data-[state=open]:animate-[m22-accordion-down_var(--duration-base)_var(--ease)]\">\n        <div className=\"pb-4 pe-8\">{children}</div>\n      </AccordionPrimitive.Content>\n    </AccordionPrimitive.Item>\n  )\n}\n\nexport default Accordion\n"],"mappings":";AA4CQ,SAEE,KAFF;AA1CR,YAAY,wBAAwB;AACpC,SAAS,YAAY;AAErB,SAAS,UAAU;AAOZ,MAAM,YAAY,mBAAmB;AAyBrC,SAAS,cAAc,EAAE,OAAO,UAAU,WAAW,GAAG,KAAK,GAAuB;AACzF,SACE;AAAA,IAAC,mBAAmB;AAAA,IAAnB;AAAA,MACC,WAAW,GAAG,4BAA4B,SAAS;AAAA,MAClD,GAAG;AAAA,MAEJ;AAAA,4BAAC,mBAAmB,QAAnB,EAA0B,WAAU,OACnC,+BAAC,mBAAmB,SAAnB,EAA2B,WAAU,yKACnC;AAAA;AAAA,UACD;AAAA,YAAC;AAAA;AAAA,cACC,MAAM;AAAA,cACN,aAAa;AAAA,cACb,eAAW;AAAA,cACX,WAAU;AAAA;AAAA,UACZ;AAAA,WACF,GACF;AAAA,QACA,oBAAC,mBAAmB,SAAnB,EAA2B,WAAU,0NACpC,8BAAC,SAAI,WAAU,aAAa,UAAS,GACvC;AAAA;AAAA;AAAA,EACF;AAEJ;AAEA,IAAO,oBAAQ;","names":[]}
+{"version":3,"sources":["../../../src/components/Accordion/Accordion.tsx"],"sourcesContent":["'use client'\n\nimport * as AccordionPrimitive from '@radix-ui/react-accordion'\nimport { Plus } from 'lucide-react'\nimport type { ComponentProps, ReactNode } from 'react'\nimport { cn } from '../../lib/cn'\n\n/**\n * Radix root, re-exported. Pass `type=\"single\" collapsible` for an FAQ and\n * `type=\"multiple\"` for a settings stack; Radix's own discriminated union then\n * types `value` correctly for each.\n */\nexport const Accordion = AccordionPrimitive.Root\n\nexport interface AccordionItemProps\n  extends Omit<ComponentProps<typeof AccordionPrimitive.Item>, 'children' | 'title'> {\n  /** The row's summary — what the reader clicks. Named `title` rather than\n   *  inherited from the DOM attribute of the same name, which is a tooltip. */\n  title: ReactNode\n  children: ReactNode\n}\n\n/**\n * One disclosure row: a hairline-ruled trigger and its panel.\n *\n * The marker is a plus that rotates into a minus, not a chevron. A chevron says\n * \"there is more below\"; a plus says \"this opens\" — and in a stack of rows the\n * difference decides whether the reader expects navigation or expansion.\n *\n * The panel animates on Radix's own `--radix-accordion-content-height`, so it\n * opens to its real height without measuring anything at the call site.\n *\n * @example\n * <Accordion type=\"single\" collapsible>\n *   <AccordionItem value=\"ship\" title=\"How do I ship it?\">Push to main.</AccordionItem>\n * </Accordion>\n */\nexport function AccordionItem({ title, children, className, ...rest }: AccordionItemProps) {\n  return (\n    <AccordionPrimitive.Item\n      className={cn('border-b border-(--rule)', className)}\n      {...rest}\n    >\n      <AccordionPrimitive.Header className=\"m-0\">\n        <AccordionPrimitive.Trigger className=\"group flex w-full items-center justify-between gap-4 py-4 text-start font-sans text-sm text-(--ink) transition-colors duration-(--duration-fast) hover:text-(--ink-2)\">\n          {title}\n          <Plus\n            size={16}\n            strokeWidth={1.5}\n            aria-hidden\n            className=\"shrink-0 text-(--ink-3-aa) transition-transform duration-(--duration-base) ease-(--ease-out-expo) group-data-[state=open]:rotate-45\"\n          />\n        </AccordionPrimitive.Trigger>\n      </AccordionPrimitive.Header>\n      <AccordionPrimitive.Content\n        data-m22-animated\n        className=\"overflow-hidden text-sm leading-relaxed text-(--ink-2) data-[state=closed]:animate-[m22-accordion-up_var(--duration-base)_var(--ease)] data-[state=open]:animate-[m22-accordion-down_var(--duration-base)_var(--ease)]\"\n      >\n        <div className=\"pb-4 pe-8\">{children}</div>\n      </AccordionPrimitive.Content>\n    </AccordionPrimitive.Item>\n  )\n}\n\nexport default Accordion\n"],"mappings":";AA4CQ,SAEE,KAFF;AA1CR,YAAY,wBAAwB;AACpC,SAAS,YAAY;AAErB,SAAS,UAAU;AAOZ,MAAM,YAAY,mBAAmB;AAyBrC,SAAS,cAAc,EAAE,OAAO,UAAU,WAAW,GAAG,KAAK,GAAuB;AACzF,SACE;AAAA,IAAC,mBAAmB;AAAA,IAAnB;AAAA,MACC,WAAW,GAAG,4BAA4B,SAAS;AAAA,MAClD,GAAG;AAAA,MAEJ;AAAA,4BAAC,mBAAmB,QAAnB,EAA0B,WAAU,OACnC,+BAAC,mBAAmB,SAAnB,EAA2B,WAAU,yKACnC;AAAA;AAAA,UACD;AAAA,YAAC;AAAA;AAAA,cACC,MAAM;AAAA,cACN,aAAa;AAAA,cACb,eAAW;AAAA,cACX,WAAU;AAAA;AAAA,UACZ;AAAA,WACF,GACF;AAAA,QACA;AAAA,UAAC,mBAAmB;AAAA,UAAnB;AAAA,YACC,qBAAiB;AAAA,YACjB,WAAU;AAAA,YAEV,8BAAC,SAAI,WAAU,aAAa,UAAS;AAAA;AAAA,QACvC;AAAA;AAAA;AAAA,EACF;AAEJ;AAEA,IAAO,oBAAQ;","names":[]}

package/dist/components/AppShell/AppShell.d.ts

@@ -42,6 +42,12 @@ interface AppShellProps extends HTMLAttributes<HTMLDivElement> {
  * cannot leave. The scrim is a `<button>` for the same reason — a `<div>` with
  * an `onClick` is not reachable by keyboard and not announced as anything.
  *
+ * Below `md` the closed drawer is `inert`. Sliding it off-screen is a visual
+ * state and nothing more: without that attribute every link in it stays
+ * focusable and stays in the accessibility tree, so Tab from the toggle walks
+ * into a menu nobody can see. Closing it also returns focus to the toggle,
+ * because the element focus was on is the element that just left.
+ *
  * @example
  * <AppShell brand={<Wordmark />} sidebar={<NavItem href="/">Home</NavItem>}>
  *   <Card>…</Card>