@misoto22/design 0.6.1 → 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/index.d.ts

@@ -31,11 +31,12 @@ export { SONIFY_DEFAULTS, SonifyController, SonifyOptions, SonifyPoint, SonifySe
 export { ChartSonifyButton, ChartSonifyButtonProps, Sonify, SonifyAlign, SonifyProps, UseSonifyOptions, UseSonifyResult, chartSonifySeries, useChartSonifySeries, useSonify } from './lib/sonify-control.js';
 export { ChartControls, ChartControlsProps, ChartExportFormat, ChartToolbar, ChartToolbarProps, Toolbar, ToolbarProps } from './lib/toolbar.js';
 export { ChartZoom, ChartZoomOptions, ChartZoomSurface, ChartZoomSurfaceProps, clampWindow, panWindow, useChartZoom, zoomWindow } from './lib/zoom.js';
-export { ChartPngOptions, chartToCsv, chartToPng, downloadBlob, exportFilename } from './lib/export.js';
+export { ChartPngOptions, chartToCsv, chartToPng, exportFilename } from './lib/export.js';
 export { ANNOTATION_LAYER, Annotation, AnnotationProps, AnnotationWeight, ReferenceBand, ReferenceBandProps, ReferenceLine, ReferenceLineProps } from './lib/annotations.js';
 export { ValueLabelMode, Values, ValuesProps } from './lib/values.js';
 export { ChartEmpty, ChartEmptyProps } from './lib/empty.js';
 export { NumberFormatOptions, NumberStyle, defaultTick, formatNumber } from './lib/format.js';
+export { downloadBlob } from '../lib/svg-export.js';
 import 'react';
 import 'recharts';
 import 'recharts/types/component/DefaultTooltipContent';

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

@@ -1,6 +1,23 @@
 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.
+ *
+ * The general half — walking a live tree to inline its resolved paint,
+ * serialising a standalone SVG document, rasterising one through a canvas — is
+ * not chart-shaped at all, and lives in `src/lib/svg-export.ts` shared with the
+ * diagrams entry. What is left here is what only a Recharts chart knows: which
+ * `<svg>` in the subtree is the plot, what a row of chart data looks like as a
+ * CSV record, and that the ground behind an exported plot is `--chart-surface`.
+ *
+ * Nothing here touches the DOM at module scope. Every browser API is reached
+ * for inside a function body, so this module is safe to import from a server
+ * component and only fails when a consumer actually asks for a file on a
+ * server, which is a call that cannot succeed anywhere.
+ */
 interface ChartPngOptions {
     /**
      * Printed above the plot in the exported image. Pass the figure's title: a
@@ -21,46 +38,27 @@ interface ChartPngOptions {
 /**
  * The chart's `<svg>`, rasterised to a PNG blob.
  *
- * ## The problem this function exists to solve
- *
- * Serialising the `<svg>` and handing it to an `<img>` puts it in a document
- * of its own. That document has none of the page's stylesheets, so every
- * `var(--color-desktop-0)`, `var(--chart-fill)` and `var(--ink)` in the markup
- * resolves to nothing — and a paint that resolves to nothing is not a fallback
- * colour, it is an invisible mark. Serialise a chart naively and you get an
- * empty rectangle with axes on it.
- *
- * ## The solution
+ * Three chart-specific decisions and nothing else. `serializeSvg` does the
+ * work, and its comment carries the reason a naive `XMLSerializer` export of a
+ * themed chart comes out as an empty rectangle with axes on it.
  *
- * Walk the live tree and the clone in step, and on every node write
- * `getComputedStyle`'s answer for the painted properties into an inline
- * `style`. Computed values have already had `var()` substituted by the engine,
- * so `fill: var(--color-desktop-0)` arrives as `fill: rgb(16, 16, 16)` — and,
- * because the walk reads the LIVE element, it reads it under whichever theme
- * is currently applied. Light and dark come out right for free, with no theme
- * argument anywhere in this file.
- *
- * `<stop>` elements are walked too, which is the half that is easy to miss: a
- * series is painted `fill="url(#…-colors-desktop)"`, the url survives
- * serialisation because the gradient is inside the same `<svg>`, and it is the
- * gradient's STOPS that carry the custom properties.
+ * 1. WHICH `<svg>` — the plot, not the first one in the subtree. See
+ *    `findPlotSvg`.
+ * 2. WHAT GROUND — `--chart-surface`, resolved against the live element, which
+ *    is what makes a dark-mode export come out dark rather than transparent.
+ * 3. WHAT INK AND FACE for the caption — `--ink` and the element's own
+ *    resolved family, so the exported title matches the page it came from.
  *
  * ## What this cannot capture, honestly
  *
  * - **Anything drawn in HTML.** The legend, the tooltip, the brush strip and
  *   the hidden data table are DOM, not SVG. The PNG is the plot.
- * - **Web fonts.** The isolated document cannot fetch the page's `@font-face`
- *   sources, so text is rasterised in whatever the resolved family stack finds
- *   locally. Type metrics will differ from the screen.
- * - **Cross-origin images.** A chart with an external `<image>` in it taints
- *   the canvas and `toBlob` throws; there is no way around it from script.
- * - **The exact rendering.** This is the browser's SVG rasteriser re-drawing
- *   the markup, not a screenshot. Antialiasing, `backdrop-filter` and any
- *   effect a page stylesheet applied from outside the `<svg>` are not in it.
+ * - **Web fonts, cross-origin images, and the exact rendering.** See
+ *   `serializeSvg` and `rasterize`.
  *
  * @example
  * const blob = await chartToPng(plotRef.current, { title: 'Visitors per month' })
- * downloadBlob(blob, 'visitors-per-month.png')
+ * downloadBlob(blob, exportFilename('Visitors per month', 'png'))
  */
 declare function chartToPng(element: HTMLElement | SVGSVGElement, options?: ChartPngOptions): Promise<Blob>;
 /**
@@ -83,21 +81,14 @@ declare function chartToPng(element: HTMLElement | SVGSVGElement, options?: Char
  * downloadBlob(new Blob([csv], { type: 'text/csv;charset=utf-8' }), 'visitors.csv')
  */
 declare function chartToCsv(rows: Record<string, unknown>[], columns: ChartColumn[]): string;
-/**
- * Hands a blob to the browser as a download.
- *
- * Throws rather than no-oping without a `document`: a download is something a
- * person just asked for, and a silent return would look to them like a click
- * that did nothing.
- */
-declare function downloadBlob(blob: Blob, filename: string): void;
+
 /**
  * A figure's title as a filename.
  *
- * Lowercase, ASCII-safe and hyphenated, because a downloaded file crosses into
- * shells, zip archives and Windows paths where a title's spaces and slashes
- * are someone else's problem.
+ * The shared slugger, with `chart` rather than `figure` as the fallback for a
+ * title that slugs to nothing — an export from this entry is a chart, and the
+ * name a reader finds in their downloads folder should say so.
  */
 declare function exportFilename(title: string, extension: string): string;
 
-export { type ChartPngOptions, chartToCsv, chartToPng, downloadBlob, exportFilename };
+export { type ChartPngOptions, chartToCsv, chartToPng, exportFilename };

package/dist/charts/lib/export.js

@@ -1,154 +1,28 @@
-const SVG_NS = "http://www.w3.org/2000/svg";
-const PAINTED_PROPERTIES = [
-  "display",
-  "visibility",
-  "opacity",
-  "color",
-  "fill",
-  "fill-opacity",
-  "fill-rule",
-  "stroke",
-  "stroke-opacity",
-  "stroke-width",
-  "stroke-linecap",
-  "stroke-linejoin",
-  "stroke-dasharray",
-  "stroke-dashoffset",
-  "stop-color",
-  "stop-opacity",
-  "flood-color",
-  "flood-opacity",
-  "mask",
-  "filter",
-  "clip-path",
-  "clip-rule",
-  "paint-order",
-  "mix-blend-mode",
-  "shape-rendering",
-  "text-anchor",
-  "dominant-baseline",
-  "font-family",
-  "font-size",
-  "font-style",
-  "font-weight",
-  "letter-spacing",
-  "text-transform"
-];
+import {
+  downloadBlob,
+  exportFilename as figureFilename,
+  rasterize,
+  readToken,
+  serializeSvg
+} from "../../lib/svg-export.js";
 async function chartToPng(element, options = {}) {
   const { title, scale = 2, background, padding = 16 } = options;
   const svg = findPlotSvg(element);
   if (!svg) throw new Error("chartToPng: found no <svg> to export inside the element it was given");
-  const box = svg.getBoundingClientRect();
-  const width = Math.ceil(box.width);
-  const height = Math.ceil(box.height);
-  if (width === 0 || height === 0) {
-    throw new Error("chartToPng: the chart has no measured size yet \u2014 export it after it renders");
-  }
-  const clone = svg.cloneNode(true);
-  inlinePaint(svg, clone);
-  clone.setAttribute("width", String(width));
-  clone.setAttribute("height", String(height));
-  const titleBand = title ? 30 : 0;
-  const totalWidth = width + padding * 2;
-  const totalHeight = height + padding * 2 + titleBand;
-  const page = document.createElementNS(SVG_NS, "svg");
-  page.setAttribute("xmlns", SVG_NS);
-  page.setAttribute("width", String(totalWidth));
-  page.setAttribute("height", String(totalHeight));
-  page.setAttribute("viewBox", `0 0 ${totalWidth} ${totalHeight}`);
-  const plate = document.createElementNS(SVG_NS, "rect");
-  plate.setAttribute("width", String(totalWidth));
-  plate.setAttribute("height", String(totalHeight));
-  plate.setAttribute("fill", background ?? readToken(element, "--chart-surface", "#ffffff"));
-  page.append(plate);
-  if (title) {
-    const caption = document.createElementNS(SVG_NS, "text");
-    caption.setAttribute("x", String(padding));
-    caption.setAttribute("y", String(padding + 14));
-    caption.setAttribute("fill", readToken(element, "--ink", "#101010"));
-    caption.setAttribute("font-size", "13");
-    caption.setAttribute("font-weight", "500");
-    caption.setAttribute("font-family", getComputedStyle(element).fontFamily || "sans-serif");
-    caption.textContent = title;
-    page.append(caption);
-  }
-  const group = document.createElementNS(SVG_NS, "g");
-  group.setAttribute("transform", `translate(${padding}, ${padding + titleBand})`);
-  group.append(clone);
-  page.append(group);
-  const markup = new XMLSerializer().serializeToString(page);
-  const url = URL.createObjectURL(
-    new Blob([`<?xml version="1.0" encoding="UTF-8"?>
-${markup}`], {
-      type: "image/svg+xml;charset=utf-8"
-    })
-  );
-  try {
-    const image = await loadImage(url);
-    const canvas = document.createElement("canvas");
-    canvas.width = Math.ceil(totalWidth * scale);
-    canvas.height = Math.ceil(totalHeight * scale);
-    const context = canvas.getContext("2d");
-    if (!context) throw new Error("chartToPng: this browser gave back no 2D canvas context");
-    context.drawImage(image, 0, 0, canvas.width, canvas.height);
-    return await canvasToBlob(canvas);
-  } finally {
-    URL.revokeObjectURL(url);
-  }
+  const markup = serializeSvg(svg, {
+    padding,
+    background: background ?? readToken(element, "--chart-surface", "#ffffff"),
+    title,
+    titleColor: readToken(element, "--ink", "#101010"),
+    titleFont: getComputedStyle(element).fontFamily || "sans-serif"
+  });
+  return rasterize(markup, "png", { scale });
 }
 function findPlotSvg(element) {
   if (element.tagName.toLowerCase() === "svg") return element;
   const scope = element.querySelector('[data-slot="chart"]') ?? element;
   return scope.querySelector("svg.recharts-surface") ?? scope.querySelector("svg");
 }
-function inlinePaint(live, clone) {
-  const computed = getComputedStyle(live);
-  let css = "";
-  for (const property of PAINTED_PROPERTIES) {
-    const value = computed.getPropertyValue(property);
-    if (value) css += `${property}:${value};`;
-  }
-  if (css) clone.setAttribute("style", css);
-  const children = live.children;
-  const clones = clone.children;
-  for (let index = 0; index < children.length; index += 1) {
-    const liveChild = children[index];
-    const cloneChild = clones[index];
-    if (liveChild && cloneChild) inlinePaint(liveChild, cloneChild);
-  }
-}
-function readToken(element, name, fallback) {
-  const value = getComputedStyle(element).getPropertyValue(name).trim();
-  return value && !value.includes("var(") ? value : fallback;
-}
-function loadImage(url) {
-  return new Promise((resolve, reject) => {
-    const image = new Image();
-    image.addEventListener("load", () => resolve(image));
-    image.addEventListener(
-      "error",
-      () => reject(new Error("chartToPng: the browser refused to decode the serialised chart"))
-    );
-    image.src = url;
-  });
-}
-function canvasToBlob(canvas) {
-  return new Promise((resolve, reject) => {
-    try {
-      canvas.toBlob((blob) => {
-        if (blob) resolve(blob);
-        else reject(new Error("chartToPng: the canvas produced no PNG data"));
-      }, "image/png");
-    } catch (cause) {
-      reject(
-        new Error(
-          "chartToPng: the canvas is tainted, which means the chart contains a cross-origin image",
-          { cause }
-        )
-      );
-    }
-  });
-}
 const UTF8_BOM = "\uFEFF";
 function chartToCsv(rows, columns) {
   if (columns.length === 0) return UTF8_BOM;
@@ -176,24 +50,8 @@ function cellText(value) {
   if (value instanceof Date) return value.toISOString();
   return "";
 }
-function downloadBlob(blob, filename) {
-  if (typeof document === "undefined") {
-    throw new Error("downloadBlob: needs a browser document \u2014 call it from an event handler");
-  }
-  const url = URL.createObjectURL(blob);
-  const anchor = document.createElement("a");
-  anchor.href = url;
-  anchor.download = filename;
-  anchor.rel = "noopener";
-  anchor.style.display = "none";
-  document.body.append(anchor);
-  anchor.click();
-  anchor.remove();
-  setTimeout(() => URL.revokeObjectURL(url), 0);
-}
 function exportFilename(title, extension) {
-  const slug = title.toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-+|-+$/g, "");
-  return `${slug || "chart"}.${extension}`;
+  return figureFilename(title, extension, "chart");
 }
 export {
   chartToCsv,