@misoto22/design 0.6.1 → 0.7.0

package/dist/agent/catalog.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.6.1",
+  "version": "0.7.0",
   "groups": [
     "Actions",
     "Forms",
@@ -9,7 +9,8 @@
     "Display",
     "Surfaces",
     "Data",
-    "Charts"
+    "Charts",
+    "Diagrams"
   ],
   "components": [
     {
@@ -1613,6 +1614,211 @@
         "line-chart",
         "sparkline"
       ]
+    },
+    {
+      "slug": "architecture-figure",
+      "entry": "@misoto22/design/diagrams",
+      "name": "ArchitectureFigure",
+      "group": "Diagrams",
+      "summary": "A component map: services, datastores, trust boundaries, and what talks to what.",
+      "when": "Reach for it when the question is \"what talks to what\". If the question is \"in what order\", that is a workflow or a sequence; if it is \"what is in this arrow\", that is a data flow.",
+      "accessibility": [
+        "The <svg> is role=\"img\" with a name, so a screen reader announces a picture instead of walking two hundred <text> nodes in drawing order.",
+        "The diagram’s content is published beside it as an ordinary list — every node with its kind, every relationship as \"A → B: over HTTPS\". That list is where the meaning lives for anyone not looking at the picture.",
+        "Passing onSelectNode turns that list into real buttons, which is the keyboard’s only route to a selection: the plates inside the picture are presentational by construction."
+      ],
+      "related": [
+        "dataflow-figure",
+        "diagram",
+        "diagram-canvas"
+      ]
+    },
+    {
+      "slug": "workflow-figure",
+      "entry": "@misoto22/design/diagrams",
+      "name": "WorkflowFigure",
+      "group": "Diagrams",
+      "summary": "A process in lanes and phases, with the main path drawn heavier than its branches.",
+      "when": "A runbook, an approval chain, a CI pipeline — anything with an owner per step. mainPath is what turns fourteen boxes into a diagram with a subject.",
+      "accessibility": [
+        "Same contract as every figure: a named picture, with its nodes and relationships published as text beside it.",
+        "The exception lane is the one washed band in the system’s diagrams, and it is still labelled — the wash is not carrying the meaning on its own."
+      ],
+      "related": [
+        "lifecycle-figure",
+        "sequence-figure",
+        "steps"
+      ]
+    },
+    {
+      "slug": "sequence-figure",
+      "entry": "@misoto22/design/diagrams",
+      "name": "SequenceFigure",
+      "group": "Diagrams",
+      "summary": "A call chain over time: who asks whom, in what order, and what comes back.",
+      "when": "The only figure whose vertical axis means something. A message carries an explicit y, so two calls eight units apart happened together and two two hundred apart did not.",
+      "accessibility": [
+        "Return messages are dashed AND take an open arrowhead — two signals, because the reply is what a reader most often needs to pick out of a dense trace.",
+        "The message list beside the picture reads in order, which is the same order the axis is drawn in."
+      ],
+      "related": [
+        "workflow-figure",
+        "architecture-figure"
+      ]
+    },
+    {
+      "slug": "dataflow-figure",
+      "entry": "@misoto22/design/diagrams",
+      "name": "DataflowFigure",
+      "group": "Diagrams",
+      "summary": "A pipeline: where data comes from, what happens to it, and who ends up with it.",
+      "when": "Structurally close to an architecture map, read for a different question. classification gets its own chip because a governance reviewer is looking for exactly that.",
+      "accessibility": [
+        "A flow’s classification is folded into its summary line, so \"clickstream — PII touch\" reaches a reader who cannot see the chip."
+      ],
+      "related": [
+        "architecture-figure",
+        "lifecycle-figure"
+      ]
+    },
+    {
+      "slug": "lifecycle-figure",
+      "entry": "@misoto22/design/diagrams",
+      "name": "LifecycleFigure",
+      "group": "Diagrams",
+      "summary": "A state machine: what something can be, and what moves it between states.",
+      "when": "The one figure that spends colour, and it spends exactly the two tokens the system reserves for state. Every other distinction is shape, so a greyscale print keeps six of the eight.",
+      "accessibility": [
+        "success and failure are the only coloured marks in the package’s diagrams, and each is also a distinct plate shape — colour is never the only carrier.",
+        "The main rail is drawn between consecutive states in the first lane even when the specification does not list those transitions, because they are the diagram’s spine rather than its exceptions."
+      ],
+      "related": [
+        "workflow-figure",
+        "steps"
+      ]
+    },
+    {
+      "slug": "diagram-canvas",
+      "entry": "@misoto22/design/diagrams",
+      "name": "DiagramCanvas",
+      "group": "Diagrams",
+      "summary": "A frame that a picture larger than it can be panned and zoomed inside.",
+      "when": "Any oversized figure — an SVG, an image, a table that will not fold. It knows nothing about nodes, which is what makes it reusable.",
+      "accessibility": [
+        "The frame is a real tab stop, so the keyboard controls can be pressed at all.",
+        "A plain wheel scrolls the page. Zoom needs the platform modifier, so the canvas is never a scroll trap in the middle of an article."
+      ],
+      "keyboard": [
+        {
+          "keys": [
+            "+",
+            "="
+          ],
+          "does": "Zooms in about the centre of the frame."
+        },
+        {
+          "keys": [
+            "-"
+          ],
+          "does": "Zooms out."
+        },
+        {
+          "keys": [
+            "0"
+          ],
+          "does": "Resets the scale and the offset together."
+        },
+        {
+          "keys": [
+            "←",
+            "→",
+            "↑",
+            "↓"
+          ],
+          "does": "Pans. Shift pans further per press."
+        }
+      ],
+      "related": [
+        "diagram-minimap",
+        "architecture-figure",
+        "scroll-area"
+      ]
+    },
+    {
+      "slug": "diagram-toolbar",
+      "entry": "@misoto22/design/diagrams",
+      "name": "DiagramToolbar",
+      "group": "Diagrams",
+      "summary": "A bar of actions belonging to the surface underneath them.",
+      "when": "FloatingIconButton is one pinned action. This is the container for several, so they read as one object rather than as a scatter.",
+      "accessibility": [
+        "role=\"toolbar\" announces a toolbar rather than six unrelated buttons. It does not implement roving focus — Tab visits every control, which is honest for a bar of three."
+      ],
+      "related": [
+        "floating-icon-button",
+        "diagram-export-menu"
+      ]
+    },
+    {
+      "slug": "diagram-export-menu",
+      "entry": "@misoto22/design/diagrams",
+      "name": "DiagramExportMenu",
+      "group": "Diagrams",
+      "summary": "Taking the figure off the page: PNG, JPEG, WebP, SVG and a 1200×630 share card.",
+      "when": "It does the export rather than emitting a format name, because the interesting half — baking custom properties into real colours before serialising — is the half a caller would not know to write.",
+      "accessibility": [
+        "A failed export is reported through onResult rather than swallowed: a click that quietly does nothing is indistinguishable from a broken button."
+      ],
+      "related": [
+        "dropdown-menu",
+        "diagram-toolbar"
+      ]
+    },
+    {
+      "slug": "diagram-inspector",
+      "entry": "@misoto22/design/diagrams",
+      "name": "DiagramInspector",
+      "group": "Diagrams",
+      "summary": "What the reader just picked, written out beside the picture.",
+      "when": "A node holds about eight words before it stops being a node. Everything past those — the port, the owner, the six relationships — belongs here.",
+      "accessibility": [
+        "A labelled region with aria-live=\"polite\", not a dialog: the reader clicked a node, they did not open anything, so focus is never trapped or demanded.",
+        "Relationships are real buttons when they carry onSelect, which is how the graph becomes walkable peer by peer from the keyboard."
+      ],
+      "related": [
+        "card",
+        "diagram-canvas"
+      ]
+    },
+    {
+      "slug": "diagram-minimap",
+      "entry": "@misoto22/design/diagrams",
+      "name": "DiagramMinimap",
+      "group": "Diagrams",
+      "summary": "Where you are in something bigger than the window.",
+      "when": "Pairs with DiagramCanvas. The viewport rectangle is derived from the canvas’s own view, never stored — a map that disagrees with its territory is worse than none.",
+      "accessibility": [
+        "The miniature is aria-hidden. The figure it mirrors already publishes its own summary, and a second copy would read the whole diagram out twice."
+      ],
+      "related": [
+        "diagram-canvas"
+      ]
+    },
+    {
+      "slug": "diagram-legend",
+      "entry": "@misoto22/design/diagrams",
+      "name": "DiagramLegend",
+      "group": "Diagrams",
+      "summary": "The key: which drawn form means which kind of thing.",
+      "when": "Not optional furniture in a monochrome system. When a queue and a cache differ by a sigil rather than a colour, this is the only place a reader is told what the sigil means.",
+      "accessibility": [
+        "A list of pairs rather than a row of spans, so the count is part of what a screen reader says about it.",
+        "kindLegend, variantLegend and stateLegend build the standard sets out of the renderers’ own drawing code, so the key can never drift from the figure."
+      ],
+      "related": [
+        "architecture-figure",
+        "lifecycle-figure"
+      ]
     }
   ],
   "exports": {
@@ -1786,7 +1992,21 @@
     "TreemapExtras": "TreemapChart",
     "WaterfallChart": "WaterfallChart",
     "WaterfallStepType": "WaterfallChart",
-    "WaterfallDirection": "WaterfallChart"
+    "WaterfallDirection": "WaterfallChart",
+    "ArchitectureFigure": "ArchitectureFigure",
+    "DataflowFigure": "DataflowFigure",
+    "DiagramCanvas": "DiagramCanvas",
+    "DiagramExportMenu": "DiagramExportMenu",
+    "exportFigure": "DiagramExportMenu",
+    "ExportFormat": "DiagramExportMenu",
+    "DiagramInspector": "DiagramInspector",
+    "DiagramLegend": "DiagramLegend",
+    "DiagramMinimap": "DiagramMinimap",
+    "DiagramToolbar": "DiagramToolbar",
+    "DiagramToolbarGroup": "DiagramToolbar",
+    "LifecycleFigure": "LifecycleFigure",
+    "SequenceFigure": "SequenceFigure",
+    "WorkflowFigure": "WorkflowFigure"
   },
   "themeAxes": [
     {

package/dist/agent/index.md

@@ -1,4 +1,4 @@
-# @misoto22/design 0.6.1
+# @misoto22/design 0.7.0
 
 > Monochrome design system: portable CSS tokens and accessible React 19
 > primitives. Components ship compiled — import them, do not copy them.
@@ -129,3 +129,17 @@ re-pointed in a stylesheet.
 - **Histogram** — The shape of one distribution.
 - **WaterfallChart** — How a total got from one figure to another.
 - **Facet** — The same chart once per group, on one shared scale.
+
+### Diagrams
+
+- **ArchitectureFigure** — A component map: services, datastores, trust boundaries, and what talks to what.
+- **WorkflowFigure** — A process in lanes and phases, with the main path drawn heavier than its branches.
+- **SequenceFigure** — A call chain over time: who asks whom, in what order, and what comes back.
+- **DataflowFigure** — A pipeline: where data comes from, what happens to it, and who ends up with it.
+- **LifecycleFigure** — A state machine: what something can be, and what moves it between states.
+- **DiagramCanvas** — A frame that a picture larger than it can be panned and zoomed inside.
+- **DiagramToolbar** — A bar of actions belonging to the surface underneath them.
+- **DiagramExportMenu** — Taking the figure off the page: PNG, JPEG, WebP, SVG and a 1200×630 share card.
+- **DiagramInspector** — What the reader just picked, written out beside the picture.
+- **DiagramMinimap** — Where you are in something bigger than the window.
+- **DiagramLegend** — The key: which drawn form means which kind of thing.

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,22 @@
 import { ChartColumn } from './figure.js';
+export { downloadBlob } from '../../lib/svg-export.js';
 import 'react';
 
+/**
+ * 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 +37,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 +80,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,