@misoto22/design 0.6.0 → 0.7.0

package/dist/diagrams/DataflowFigure/DataflowFigure.d.ts

@@ -0,0 +1,28 @@
+import * as react from 'react';
+import { FigureChrome } from '../lib/frame.js';
+import { DataflowSpec } from '../spec.js';
+import '../lib/geometry.js';
+
+interface DataflowFigureProps extends FigureChrome {
+    spec: DataflowSpec;
+}
+/**
+ * A pipeline: where data comes from, what happens to it, and who ends up with
+ * it.
+ *
+ * Structurally close to an architecture map and read for a completely different
+ * question, which is why it is a separate renderer rather than a preset. An
+ * architecture diagram is read for "what talks to what". A data-flow diagram is
+ * read for "what is IN this arrow" — and that question is why `classification`
+ * gets its own mono chip under the label rather than being folded into the
+ * wording. `clickstream / PII touch` and `clickstream` are two different facts,
+ * and a governance reviewer is looking for the second one.
+ *
+ * Stages are printed as column headings on a rule across the top. They are the
+ * axis of the figure: a node's `stage` is its position along the pipeline, and
+ * a reader should be able to answer "how far has this got" by looking up rather
+ * than by tracing arrows.
+ */
+declare function DataflowFigure({ spec, className, legend, cards, heading, activeIds, onSelectNode, }: DataflowFigureProps): react.JSX.Element;
+
+export { DataflowFigure, type DataflowFigureProps, DataflowFigure as default };

package/dist/diagrams/DataflowFigure/DataflowFigure.js

@@ -0,0 +1,129 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useId, useMemo } from "react";
+import { DiagramFrame } from "../lib/frame.js";
+import { inflate, round, TYPE, union, wrapText } from "../lib/geometry.js";
+import { kindLegend, resolveLegend } from "../lib/legend.js";
+import { NodePlate, PLATE, plateHeight } from "../lib/marks.js";
+import { renderWires, wiresFor } from "../lib/wires.js";
+const KINDS = [
+  "frontend",
+  "backend",
+  "database",
+  "cloud",
+  "security",
+  "messagebus",
+  "external"
+];
+const GRID = { originX: 40, originY: 92, colW: 184, gapX: 78, rowH: 52, nodeH: 74 };
+function DataflowFigure({
+  spec,
+  className,
+  legend = "auto",
+  cards = true,
+  heading = true,
+  activeIds,
+  onSelectNode
+}) {
+  const uid = useId().replace(/:/g, "");
+  const model = useMemo(
+    () => buildModel(spec, uid, activeIds, onSelectNode),
+    [spec, uid, activeIds, onSelectNode]
+  );
+  return /* @__PURE__ */ jsx(
+    DiagramFrame,
+    {
+      meta: spec.meta,
+      model,
+      cards: spec.cards,
+      showCards: cards,
+      heading,
+      legend,
+      className,
+      activeIds,
+      onSelectNode
+    }
+  );
+}
+function buildModel(spec, uid, activeIds, onSelectNode) {
+  const boxes = /* @__PURE__ */ new Map();
+  const placed = spec.nodes.map((node) => {
+    const w = node.width ?? GRID.colW;
+    const lines = wrapText(node.label, TYPE.label, w - PLATE.padX * 2, 2);
+    const h = plateHeight(lines.length, Boolean(node.sublabel), true, node.height ?? 0);
+    const x = GRID.originX + node.stage * (GRID.colW + GRID.gapX);
+    const y = GRID.originY + node.row * (GRID.rowH + GRID.nodeH) + (node.yOffset ?? 0);
+    const box = { x, y, w, h };
+    boxes.set(node.id, box);
+    return { node, box };
+  });
+  const wires = wiresFor(spec.flows, boxes);
+  const { paths, labels } = renderWires(wires, uid);
+  const extent = inflate(union([...boxes.values()]) ?? { x: 0, y: 0, w: 500, h: 240 }, 30);
+  const headerY = Math.min(GRID.originY - 30, extent.y + 28);
+  const active = activeIds && activeIds.length > 0 ? new Set(activeIds) : null;
+  const artwork = /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      "path",
+      {
+        d: `M ${round(extent.x + 14)} ${round(headerY + 8)} H ${round(extent.x + extent.w - 14)}`,
+        className: "stroke-(--diagram-rule) [stroke-width:1]",
+        "aria-hidden": "true"
+      }
+    ),
+    spec.stages.map((stage, index) => /* @__PURE__ */ jsx(
+      "text",
+      {
+        x: round(GRID.originX + index * (GRID.colW + GRID.gapX)),
+        y: round(headerY),
+        className: "fill-(--diagram-ink-3) font-mono [font-size:10.5px] [letter-spacing:0.08em] uppercase",
+        "aria-hidden": "true",
+        children: stage.label
+      },
+      `${stage.label}-${index}`
+    )),
+    paths,
+    placed.map(({ node, box }) => /* @__PURE__ */ jsx(
+      NodePlate,
+      {
+        nodeId: node.id,
+        box,
+        label: node.label,
+        sublabel: node.sublabel,
+        tag: node.tag,
+        kind: node.type,
+        active: active?.has(node.id),
+        dimmed: active ? !active.has(node.id) : false,
+        onSelect: onSelectNode ? () => onSelectNode(node.id) : void 0
+      },
+      node.id
+    )),
+    labels
+  ] });
+  const used = [...new Set(spec.nodes.map((node) => node.type))];
+  return {
+    extent: { ...extent, y: headerY - 22, h: extent.h + (extent.y - (headerY - 22)) },
+    artwork,
+    nodes: spec.nodes.map((node) => ({
+      id: node.id,
+      label: node.label,
+      sublabel: node.sublabel,
+      kind: node.type
+    })),
+    edges: (spec.flows ?? []).map((flow) => ({
+      from: flow.from,
+      to: flow.to,
+      label: [flow.label, flow.classification].filter(Boolean).join(" \u2014 ") || void 0
+    })),
+    legend: kindLegend(
+      resolveLegend(used, spec.meta.legend?.mode, KINDS, spec.meta.legend?.entries),
+      spec.meta.legend?.entries
+    )
+  };
+}
+var DataflowFigure_default = DataflowFigure;
+export {
+  DataflowFigure,
+  DataflowFigure_default as default
+};
+//# sourceMappingURL=DataflowFigure.js.map

package/dist/diagrams/DataflowFigure/DataflowFigure.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/diagrams/DataflowFigure/DataflowFigure.tsx"],"sourcesContent":["'use client'\n\nimport { useId, useMemo } from 'react'\nimport { DiagramFrame, type FigureChrome, type FigureModel } from '../lib/frame'\nimport { inflate, round, TYPE, union, wrapText, type Box } from '../lib/geometry'\nimport { kindLegend, resolveLegend } from '../lib/legend'\nimport { NodePlate, PLATE, plateHeight } from '../lib/marks'\nimport { renderWires, wiresFor } from '../lib/wires'\nimport type { DataflowSpec, NodeKind } from '../spec'\n\nconst KINDS: NodeKind[] = [\n  'frontend',\n  'backend',\n  'database',\n  'cloud',\n  'security',\n  'messagebus',\n  'external',\n]\n\nconst GRID = { originX: 40, originY: 92, colW: 184, gapX: 78, rowH: 52, nodeH: 74 }\n\nexport interface DataflowFigureProps extends FigureChrome {\n  spec: DataflowSpec\n}\n\n/**\n * A pipeline: where data comes from, what happens to it, and who ends up with\n * it.\n *\n * Structurally close to an architecture map and read for a completely different\n * question, which is why it is a separate renderer rather than a preset. An\n * architecture diagram is read for \"what talks to what\". A data-flow diagram is\n * read for \"what is IN this arrow\" — and that question is why `classification`\n * gets its own mono chip under the label rather than being folded into the\n * wording. `clickstream / PII touch` and `clickstream` are two different facts,\n * and a governance reviewer is looking for the second one.\n *\n * Stages are printed as column headings on a rule across the top. They are the\n * axis of the figure: a node's `stage` is its position along the pipeline, and\n * a reader should be able to answer \"how far has this got\" by looking up rather\n * than by tracing arrows.\n */\nexport function DataflowFigure({\n  spec,\n  className,\n  legend = 'auto',\n  cards = true,\n  heading = true,\n  activeIds,\n  onSelectNode,\n}: DataflowFigureProps) {\n  const uid = useId().replace(/:/g, '')\n  const model = useMemo(\n    () => buildModel(spec, uid, activeIds, onSelectNode),\n    [spec, uid, activeIds, onSelectNode],\n  )\n\n  return (\n    <DiagramFrame\n      meta={spec.meta}\n      model={model}\n      cards={spec.cards}\n      showCards={cards}\n      heading={heading}\n      legend={legend}\n      className={className}\n      activeIds={activeIds}\n      onSelectNode={onSelectNode}\n    />\n  )\n}\n\nfunction buildModel(\n  spec: DataflowSpec,\n  uid: string,\n  activeIds: string[] | undefined,\n  onSelectNode: ((id: string) => void) | undefined,\n): FigureModel {\n  const boxes = new Map<string, Box>()\n  const placed = spec.nodes.map((node) => {\n    const w = node.width ?? GRID.colW\n    const lines = wrapText(node.label, TYPE.label, w - PLATE.padX * 2, 2)\n    const h = plateHeight(lines.length, Boolean(node.sublabel), true, node.height ?? 0)\n\n    const x = GRID.originX + node.stage * (GRID.colW + GRID.gapX)\n    const y = GRID.originY + node.row * (GRID.rowH + GRID.nodeH) + (node.yOffset ?? 0)\n\n    const box: Box = { x, y, w, h }\n    boxes.set(node.id, box)\n    return { node, box }\n  })\n\n  // Waypoints refer to the author's own grid, not this one — see\n  // `Wire.keepWaypoints`. A data-flow specification always places by stage and\n  // row, so there is never a case where honouring them would be correct.\n  const wires = wiresFor(spec.flows, boxes)\n  const { paths, labels } = renderWires(wires, uid)\n\n  const extent = inflate(union([...boxes.values()]) ?? { x: 0, y: 0, w: 500, h: 240 }, 30)\n  const headerY = Math.min(GRID.originY - 30, extent.y + 28)\n  const active = activeIds && activeIds.length > 0 ? new Set(activeIds) : null\n\n  const artwork = (\n    <>\n      {/* Stage headings, on one rule across the whole figure. */}\n      <path\n        d={`M ${round(extent.x + 14)} ${round(headerY + 8)} H ${round(extent.x + extent.w - 14)}`}\n        className=\"stroke-(--diagram-rule) [stroke-width:1]\"\n        aria-hidden=\"true\"\n      />\n      {spec.stages.map((stage, index) => (\n        <text\n          key={`${stage.label}-${index}`}\n          x={round(GRID.originX + index * (GRID.colW + GRID.gapX))}\n          y={round(headerY)}\n          className=\"fill-(--diagram-ink-3) font-mono [font-size:10.5px] [letter-spacing:0.08em] uppercase\"\n          aria-hidden=\"true\"\n        >\n          {stage.label}\n        </text>\n      ))}\n\n      {paths}\n\n      {placed.map(({ node, box }) => (\n        <NodePlate\n          key={node.id}\n          nodeId={node.id}\n          box={box}\n          label={node.label}\n          sublabel={node.sublabel}\n          tag={node.tag}\n          kind={node.type}\n          active={active?.has(node.id)}\n          dimmed={active ? !active.has(node.id) : false}\n          onSelect={onSelectNode ? () => onSelectNode(node.id) : undefined}\n        />\n      ))}\n\n      {labels}\n    </>\n  )\n\n  const used = [...new Set(spec.nodes.map((node) => node.type))]\n\n  return {\n    extent: { ...extent, y: headerY - 22, h: extent.h + (extent.y - (headerY - 22)) },\n    artwork,\n    nodes: spec.nodes.map((node) => ({\n      id: node.id,\n      label: node.label,\n      sublabel: node.sublabel,\n      kind: node.type,\n    })),\n    edges: (spec.flows ?? []).map((flow) => ({\n      from: flow.from,\n      to: flow.to,\n      label: [flow.label, flow.classification].filter(Boolean).join(' — ') || undefined,\n    })),\n    legend: kindLegend(\n      resolveLegend(used, spec.meta.legend?.mode, KINDS, spec.meta.legend?.entries),\n      spec.meta.legend?.entries,\n    ),\n  }\n}\n\nexport default DataflowFigure\n"],"mappings":"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","names":[]}

package/dist/diagrams/DiagramCanvas/DiagramCanvas.d.ts

@@ -0,0 +1,64 @@
+import * as react from 'react';
+import { ReactNode, Ref } from 'react';
+
+interface CanvasView {
+    scale: number;
+    x: number;
+    y: number;
+}
+/** What a caller can do to the canvas from outside it. */
+interface DiagramCanvasHandle {
+    zoomIn: () => void;
+    zoomOut: () => void;
+    reset: () => void;
+    /** Pans so a point in CONTENT coordinates sits in the middle of the frame. */
+    centerOn: (x: number, y: number) => void;
+    view: CanvasView;
+}
+interface DiagramCanvasProps {
+    children: ReactNode;
+    className?: string;
+    /** How tall the frame is. Anything CSS accepts. */
+    height?: string;
+    /** Told about every view change, for a minimap or a percentage readout. */
+    onViewChange?: (view: CanvasView) => void;
+    /** Hides the built-in zoom controls, for a caller supplying its own. */
+    controls?: boolean;
+    /** Names the region for assistive tech. */
+    label?: string;
+    ref?: Ref<DiagramCanvasHandle>;
+}
+/**
+ * A frame that a picture larger than it can be moved around inside.
+ *
+ * Pan with a drag, zoom with the controls or with ⌘/Ctrl and the wheel, and
+ * reset with a key. That is the whole of it — this is deliberately a VIEWPORT
+ * and not a diagram editor: nothing here knows what a node is, so it works for
+ * any oversized figure, an SVG, an image, a table that will not fold.
+ *
+ * Three decisions here are not obvious.
+ *
+ * **A plain wheel scrolls the page, not the diagram.** A canvas that swallows
+ * the wheel is a scroll trap: a reader flicking down an article hits the figure
+ * and the page stops moving for no reason they can see. Zooming needs the
+ * modifier — which is also the platform gesture for zoom everywhere else, and
+ * is what a trackpad pinch already sends.
+ *
+ * **The transform is on a wrapper, not on the content.** The child keeps its
+ * own coordinate space, so a figure inside can still be measured, exported and
+ * read by anything that walks it. Scaling the child directly would make every
+ * `getBoundingClientRect` inside it a lie.
+ *
+ * **Keyboard first, and the frame is a real tab stop.** `+` / `-` / `0` and the
+ * arrow keys move the view; the frame takes focus so they can be pressed at
+ * all. A canvas that only answers a drag is a canvas half the readers cannot
+ * operate.
+ *
+ * @example
+ * <DiagramCanvas height="26rem" label="Request path">
+ *   <ArchitectureFigure spec={spec} heading={false} legend="hidden" cards={false} />
+ * </DiagramCanvas>
+ */
+declare function DiagramCanvas({ children, className, height, onViewChange, controls, label, ref, }: DiagramCanvasProps): react.JSX.Element;
+
+export { type CanvasView, DiagramCanvas, type DiagramCanvasHandle, type DiagramCanvasProps, DiagramCanvas as default };

package/dist/diagrams/DiagramCanvas/DiagramCanvas.js

@@ -0,0 +1,222 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import {
+  useCallback,
+  useEffect,
+  useId,
+  useImperativeHandle,
+  useRef,
+  useState
+} from "react";
+import { cn } from "../../lib/cn.js";
+const MIN_SCALE = 0.35;
+const MAX_SCALE = 4;
+const STEP = 1.25;
+function DiagramCanvas({
+  children,
+  className,
+  height = "24rem",
+  onViewChange,
+  controls = true,
+  label = "Diagram canvas",
+  ref
+}) {
+  const uid = useId().replace(/:/g, "");
+  const frame = useRef(null);
+  const [view, setView] = useState({ scale: 1, x: 0, y: 0 });
+  const drag = useRef(null);
+  const apply = useCallback(
+    (next) => {
+      setView(next);
+      onViewChange?.(next);
+    },
+    [onViewChange]
+  );
+  const zoomAbout = useCallback(
+    (factor, originX, originY) => {
+      const box = frame.current?.getBoundingClientRect();
+      const cx = originX ?? (box ? box.width / 2 : 0);
+      const cy = originY ?? (box ? box.height / 2 : 0);
+      setView((current) => {
+        const scale = Math.min(MAX_SCALE, Math.max(MIN_SCALE, current.scale * factor));
+        const ratio = scale / current.scale;
+        const next = {
+          scale,
+          x: cx - (cx - current.x) * ratio,
+          y: cy - (cy - current.y) * ratio
+        };
+        onViewChange?.(next);
+        return next;
+      });
+    },
+    [onViewChange]
+  );
+  useImperativeHandle(
+    ref,
+    () => ({
+      zoomIn: () => zoomAbout(STEP),
+      zoomOut: () => zoomAbout(1 / STEP),
+      reset: () => apply({ scale: 1, x: 0, y: 0 }),
+      centerOn: (x, y) => {
+        const box = frame.current?.getBoundingClientRect();
+        if (!box) return;
+        setView((current) => {
+          const next = {
+            ...current,
+            x: box.width / 2 - x * current.scale,
+            y: box.height / 2 - y * current.scale
+          };
+          onViewChange?.(next);
+          return next;
+        });
+      },
+      view
+    }),
+    [apply, onViewChange, view, zoomAbout]
+  );
+  useEffect(() => {
+    const node = frame.current;
+    if (!node) return;
+    const onWheel = (event) => {
+      if (!event.ctrlKey && !event.metaKey) return;
+      event.preventDefault();
+      const box = node.getBoundingClientRect();
+      zoomAbout(
+        event.deltaY < 0 ? STEP : 1 / STEP,
+        event.clientX - box.left,
+        event.clientY - box.top
+      );
+    };
+    node.addEventListener("wheel", onWheel, { passive: false });
+    return () => node.removeEventListener("wheel", onWheel);
+  }, [zoomAbout]);
+  const onPointerDown = (event) => {
+    if (event.button !== 0) return;
+    drag.current = { pointer: event.pointerId, x: event.clientX - view.x, y: event.clientY - view.y };
+    event.currentTarget.setPointerCapture(event.pointerId);
+  };
+  const onPointerMove = (event) => {
+    const state = drag.current;
+    if (!state || state.pointer !== event.pointerId) return;
+    apply({ ...view, x: event.clientX - state.x, y: event.clientY - state.y });
+  };
+  const endDrag = (event) => {
+    if (drag.current?.pointer !== event.pointerId) return;
+    drag.current = null;
+    if (event.currentTarget.hasPointerCapture(event.pointerId)) {
+      event.currentTarget.releasePointerCapture(event.pointerId);
+    }
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "relative overflow-hidden rounded-(--radius-lg) border border-(--rule) bg-(--diagram-surface)",
+        className
+      ),
+      style: { height },
+      children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            ref: frame,
+            role: "group",
+            "aria-label": label,
+            "aria-describedby": `${uid}-hint`,
+            tabIndex: 0,
+            className: "size-full cursor-grab touch-none select-none outline-none focus-visible:ring-2 focus-visible:ring-(--ring) focus-visible:ring-inset active:cursor-grabbing",
+            onPointerDown,
+            onPointerMove,
+            onPointerUp: endDrag,
+            onPointerCancel: endDrag,
+            onKeyDown: (event) => {
+              const nudge = event.shiftKey ? 80 : 24;
+              switch (event.key) {
+                case "+":
+                case "=":
+                  event.preventDefault();
+                  zoomAbout(STEP);
+                  break;
+                case "-":
+                  event.preventDefault();
+                  zoomAbout(1 / STEP);
+                  break;
+                case "0":
+                  event.preventDefault();
+                  apply({ scale: 1, x: 0, y: 0 });
+                  break;
+                case "ArrowLeft":
+                  event.preventDefault();
+                  apply({ ...view, x: view.x + nudge });
+                  break;
+                case "ArrowRight":
+                  event.preventDefault();
+                  apply({ ...view, x: view.x - nudge });
+                  break;
+                case "ArrowUp":
+                  event.preventDefault();
+                  apply({ ...view, y: view.y + nudge });
+                  break;
+                case "ArrowDown":
+                  event.preventDefault();
+                  apply({ ...view, y: view.y - nudge });
+                  break;
+                default:
+                  break;
+              }
+            },
+            children: /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: "origin-top-left will-change-transform",
+                style: { transform: `translate(${view.x}px, ${view.y}px) scale(${view.scale})` },
+                "data-diagram-stage": "",
+                children
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsx("p", { id: `${uid}-hint`, className: "sr-only", children: "Drag to pan. Plus and minus zoom, zero resets, the arrow keys pan." }),
+        controls && /* @__PURE__ */ jsxs("div", { className: "absolute bottom-3 end-3 flex items-center gap-px rounded-(--radius) border border-(--rule-2) bg-(--panel-bg) p-0.5", children: [
+          /* @__PURE__ */ jsx(CanvasButton, { label: "Zoom out", onClick: () => zoomAbout(1 / STEP), children: /* @__PURE__ */ jsx("span", { "aria-hidden": true, children: "\u2212" }) }),
+          /* @__PURE__ */ jsxs(
+            "button",
+            {
+              type: "button",
+              onClick: () => apply({ scale: 1, x: 0, y: 0 }),
+              "aria-label": "Reset the view",
+              className: "min-w-12 rounded-(--radius-xs) px-1.5 py-1 mono-meta text-(--ink-2) transition-colors duration-(--duration-fast) hover:bg-(--stone) hover:text-(--ink) focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-(--ring)",
+              children: [
+                Math.round(view.scale * 100),
+                "%"
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx(CanvasButton, { label: "Zoom in", onClick: () => zoomAbout(STEP), children: /* @__PURE__ */ jsx("span", { "aria-hidden": true, children: "+" }) })
+        ] })
+      ]
+    }
+  );
+}
+function CanvasButton({
+  label,
+  onClick,
+  children
+}) {
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      onClick,
+      "aria-label": label,
+      className: "flex size-7 items-center justify-center rounded-(--radius-xs) font-mono text-[13px] leading-none text-(--ink-2) transition-colors duration-(--duration-fast) hover:bg-(--stone) hover:text-(--ink) focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-(--ring)",
+      children
+    }
+  );
+}
+var DiagramCanvas_default = DiagramCanvas;
+export {
+  DiagramCanvas,
+  DiagramCanvas_default as default
+};
+//# sourceMappingURL=DiagramCanvas.js.map

package/dist/diagrams/DiagramCanvas/DiagramCanvas.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/diagrams/DiagramCanvas/DiagramCanvas.tsx"],"sourcesContent":["'use client'\n\nimport {\n  useCallback,\n  useEffect,\n  useId,\n  useImperativeHandle,\n  useRef,\n  useState,\n  type PointerEvent as ReactPointerEvent,\n  type ReactNode,\n  type Ref,\n} from 'react'\nimport { cn } from '../../lib/cn'\n\nconst MIN_SCALE = 0.35\nconst MAX_SCALE = 4\nconst STEP = 1.25\n\nexport interface CanvasView {\n  scale: number\n  x: number\n  y: number\n}\n\n/** What a caller can do to the canvas from outside it. */\nexport interface DiagramCanvasHandle {\n  zoomIn: () => void\n  zoomOut: () => void\n  reset: () => void\n  /** Pans so a point in CONTENT coordinates sits in the middle of the frame. */\n  centerOn: (x: number, y: number) => void\n  view: CanvasView\n}\n\nexport interface DiagramCanvasProps {\n  children: ReactNode\n  className?: string\n  /** How tall the frame is. Anything CSS accepts. */\n  height?: string\n  /** Told about every view change, for a minimap or a percentage readout. */\n  onViewChange?: (view: CanvasView) => void\n  /** Hides the built-in zoom controls, for a caller supplying its own. */\n  controls?: boolean\n  /** Names the region for assistive tech. */\n  label?: string\n  ref?: Ref<DiagramCanvasHandle>\n}\n\n/**\n * A frame that a picture larger than it can be moved around inside.\n *\n * Pan with a drag, zoom with the controls or with ⌘/Ctrl and the wheel, and\n * reset with a key. That is the whole of it — this is deliberately a VIEWPORT\n * and not a diagram editor: nothing here knows what a node is, so it works for\n * any oversized figure, an SVG, an image, a table that will not fold.\n *\n * Three decisions here are not obvious.\n *\n * **A plain wheel scrolls the page, not the diagram.** A canvas that swallows\n * the wheel is a scroll trap: a reader flicking down an article hits the figure\n * and the page stops moving for no reason they can see. Zooming needs the\n * modifier — which is also the platform gesture for zoom everywhere else, and\n * is what a trackpad pinch already sends.\n *\n * **The transform is on a wrapper, not on the content.** The child keeps its\n * own coordinate space, so a figure inside can still be measured, exported and\n * read by anything that walks it. Scaling the child directly would make every\n * `getBoundingClientRect` inside it a lie.\n *\n * **Keyboard first, and the frame is a real tab stop.** `+` / `-` / `0` and the\n * arrow keys move the view; the frame takes focus so they can be pressed at\n * all. A canvas that only answers a drag is a canvas half the readers cannot\n * operate.\n *\n * @example\n * <DiagramCanvas height=\"26rem\" label=\"Request path\">\n *   <ArchitectureFigure spec={spec} heading={false} legend=\"hidden\" cards={false} />\n * </DiagramCanvas>\n */\nexport function DiagramCanvas({\n  children,\n  className,\n  height = '24rem',\n  onViewChange,\n  controls = true,\n  label = 'Diagram canvas',\n  ref,\n}: DiagramCanvasProps) {\n  const uid = useId().replace(/:/g, '')\n  const frame = useRef<HTMLDivElement>(null)\n  const [view, setView] = useState<CanvasView>({ scale: 1, x: 0, y: 0 })\n  const drag = useRef<{ pointer: number; x: number; y: number } | null>(null)\n\n  const apply = useCallback(\n    (next: CanvasView) => {\n      setView(next)\n      onViewChange?.(next)\n    },\n    [onViewChange],\n  )\n\n  /**\n   * Zooms about a fixed point in FRAME coordinates.\n   *\n   * The arithmetic is what makes the pointer stay on the thing it is over:\n   * the content point under the cursor must land back under the cursor, so the\n   * offset moves by the difference the scale change opened up. Without it, a\n   * zoom drifts toward the origin and a reader chases the node they were\n   * looking at.\n   */\n  const zoomAbout = useCallback(\n    (factor: number, originX?: number, originY?: number) => {\n      const box = frame.current?.getBoundingClientRect()\n      const cx = originX ?? (box ? box.width / 2 : 0)\n      const cy = originY ?? (box ? box.height / 2 : 0)\n\n      setView((current) => {\n        const scale = Math.min(MAX_SCALE, Math.max(MIN_SCALE, current.scale * factor))\n        const ratio = scale / current.scale\n        const next = {\n          scale,\n          x: cx - (cx - current.x) * ratio,\n          y: cy - (cy - current.y) * ratio,\n        }\n        onViewChange?.(next)\n        return next\n      })\n    },\n    [onViewChange],\n  )\n\n  useImperativeHandle(\n    ref,\n    () => ({\n      zoomIn: () => zoomAbout(STEP),\n      zoomOut: () => zoomAbout(1 / STEP),\n      reset: () => apply({ scale: 1, x: 0, y: 0 }),\n      centerOn: (x: number, y: number) => {\n        const box = frame.current?.getBoundingClientRect()\n        if (!box) return\n        setView((current) => {\n          const next = {\n            ...current,\n            x: box.width / 2 - x * current.scale,\n            y: box.height / 2 - y * current.scale,\n          }\n          onViewChange?.(next)\n          return next\n        })\n      },\n      view,\n    }),\n    [apply, onViewChange, view, zoomAbout],\n  )\n\n  // Registered imperatively because React marks `wheel` passive, and a passive\n  // listener cannot call preventDefault — so the modifier-wheel zoom would also\n  // scroll the page underneath it.\n  useEffect(() => {\n    const node = frame.current\n    if (!node) return\n\n    const onWheel = (event: WheelEvent) => {\n      if (!event.ctrlKey && !event.metaKey) return\n      event.preventDefault()\n      const box = node.getBoundingClientRect()\n      zoomAbout(\n        event.deltaY < 0 ? STEP : 1 / STEP,\n        event.clientX - box.left,\n        event.clientY - box.top,\n      )\n    }\n\n    node.addEventListener('wheel', onWheel, { passive: false })\n    return () => node.removeEventListener('wheel', onWheel)\n  }, [zoomAbout])\n\n  const onPointerDown = (event: ReactPointerEvent<HTMLDivElement>) => {\n    if (event.button !== 0) return\n    drag.current = { pointer: event.pointerId, x: event.clientX - view.x, y: event.clientY - view.y }\n    event.currentTarget.setPointerCapture(event.pointerId)\n  }\n\n  const onPointerMove = (event: ReactPointerEvent<HTMLDivElement>) => {\n    const state = drag.current\n    if (!state || state.pointer !== event.pointerId) return\n    apply({ ...view, x: event.clientX - state.x, y: event.clientY - state.y })\n  }\n\n  const endDrag = (event: ReactPointerEvent<HTMLDivElement>) => {\n    if (drag.current?.pointer !== event.pointerId) return\n    drag.current = null\n    if (event.currentTarget.hasPointerCapture(event.pointerId)) {\n      event.currentTarget.releasePointerCapture(event.pointerId)\n    }\n  }\n\n  return (\n    <div\n      className={cn(\n        'relative overflow-hidden rounded-(--radius-lg) border border-(--rule) bg-(--diagram-surface)',\n        className,\n      )}\n      style={{ height }}\n    >\n      <div\n        ref={frame}\n        role=\"group\"\n        aria-label={label}\n        aria-describedby={`${uid}-hint`}\n        tabIndex={0}\n        className=\"size-full cursor-grab touch-none select-none outline-none focus-visible:ring-2 focus-visible:ring-(--ring) focus-visible:ring-inset active:cursor-grabbing\"\n        onPointerDown={onPointerDown}\n        onPointerMove={onPointerMove}\n        onPointerUp={endDrag}\n        onPointerCancel={endDrag}\n        onKeyDown={(event) => {\n          const nudge = event.shiftKey ? 80 : 24\n          switch (event.key) {\n            case '+':\n            case '=':\n              event.preventDefault()\n              zoomAbout(STEP)\n              break\n            case '-':\n              event.preventDefault()\n              zoomAbout(1 / STEP)\n              break\n            case '0':\n              event.preventDefault()\n              apply({ scale: 1, x: 0, y: 0 })\n              break\n            case 'ArrowLeft':\n              event.preventDefault()\n              apply({ ...view, x: view.x + nudge })\n              break\n            case 'ArrowRight':\n              event.preventDefault()\n              apply({ ...view, x: view.x - nudge })\n              break\n            case 'ArrowUp':\n              event.preventDefault()\n              apply({ ...view, y: view.y + nudge })\n              break\n            case 'ArrowDown':\n              event.preventDefault()\n              apply({ ...view, y: view.y - nudge })\n              break\n            default:\n              break\n          }\n        }}\n      >\n        <div\n          className=\"origin-top-left will-change-transform\"\n          style={{ transform: `translate(${view.x}px, ${view.y}px) scale(${view.scale})` }}\n          data-diagram-stage=\"\"\n        >\n          {children}\n        </div>\n      </div>\n\n      <p id={`${uid}-hint`} className=\"sr-only\">\n        Drag to pan. Plus and minus zoom, zero resets, the arrow keys pan.\n      </p>\n\n      {controls && (\n        <div className=\"absolute bottom-3 end-3 flex items-center gap-px rounded-(--radius) border border-(--rule-2) bg-(--panel-bg) p-0.5\">\n          <CanvasButton label=\"Zoom out\" onClick={() => zoomAbout(1 / STEP)}>\n            <span aria-hidden>−</span>\n          </CanvasButton>\n          <button\n            type=\"button\"\n            onClick={() => apply({ scale: 1, x: 0, y: 0 })}\n            aria-label=\"Reset the view\"\n            className=\"min-w-12 rounded-(--radius-xs) px-1.5 py-1 mono-meta text-(--ink-2) transition-colors duration-(--duration-fast) hover:bg-(--stone) hover:text-(--ink) focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-(--ring)\"\n          >\n            {Math.round(view.scale * 100)}%\n          </button>\n          <CanvasButton label=\"Zoom in\" onClick={() => zoomAbout(STEP)}>\n            <span aria-hidden>+</span>\n          </CanvasButton>\n        </div>\n      )}\n    </div>\n  )\n}\n\nfunction CanvasButton({\n  label,\n  onClick,\n  children,\n}: {\n  label: string\n  onClick: () => void\n  children: ReactNode\n}) {\n  return (\n    <button\n      type=\"button\"\n      onClick={onClick}\n      aria-label={label}\n      className=\"flex size-7 items-center justify-center rounded-(--radius-xs) font-mono text-[13px] leading-none text-(--ink-2) transition-colors duration-(--duration-fast) hover:bg-(--stone) hover:text-(--ink) focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-(--ring)\"\n    >\n      {children}\n    </button>\n  )\n}\n\nexport default DiagramCanvas\n"],"mappings":"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","names":[]}

package/dist/diagrams/DiagramExportMenu/DiagramExportMenu.d.ts

@@ -0,0 +1,72 @@
+import * as react from 'react';
+import { RefObject, ReactNode } from 'react';
+
+/** The files a figure can be taken away as. */
+type ExportFormat = 'png' | 'jpeg' | 'webp' | 'svg' | 'share-card';
+/** What came of an export, for a page that wants to say so. */
+interface ExportResult {
+    format: ExportFormat;
+    ok: boolean;
+    error?: Error;
+}
+interface DiagramExportMenuProps {
+    /**
+     * The `<svg>` to export, or an element containing exactly one.
+     *
+     * A ref rather than a selector, because a page can hold several figures and a
+     * selector would export whichever the document happened to reach first.
+     */
+    targetRef: RefObject<HTMLElement | SVGSVGElement | null>;
+    /** Names the file, and is printed on the share card. */
+    title: string;
+    /** Replaces the trigger. */
+    trigger?: ReactNode;
+    className?: string;
+    /** Runs instead of the built-in export — for a caller with its own pipeline. */
+    onExport?: (format: ExportFormat) => void | Promise<void>;
+    /** Told what happened, so a page can raise a toast. */
+    onResult?: (result: ExportResult) => void;
+}
+/**
+ * Taking the figure off the page: five files, one menu.
+ *
+ * WHY THE MENU DOES THE WORK rather than handing back a format: every one of
+ * these exports is the same six steps — find the `<svg>`, walk it with
+ * `getComputedStyle` to bake the custom properties into real colours,
+ * serialise, rasterise, name the file, hand it to the browser — and only the
+ * last two differ between them. A menu that emitted `'png'` and left the caller
+ * to do the rest would be a menu that every consumer reimplements, badly, and
+ * the interesting half (a serialised SVG resolves `var(--ink)` to nothing and
+ * comes out invisible) is exactly the half a caller would not know to write.
+ *
+ * `onExport` is still there for a page with its own pipeline — a server-side
+ * renderer, a different frame size — and taking it turns everything below into
+ * a no-op.
+ *
+ * What each format actually is, stated rather than implied.
+ *
+ * **SVG** is the artwork with resolved colours. It is editable and it is the
+ * only lossless one, but it carries no web fonts: a machine without the family
+ * renders it in a fallback, so type metrics will differ.
+ *
+ * **PNG, JPEG and WebP** are the browser's own rasteriser re-drawing that SVG
+ * at 2×. Not a screenshot — antialiasing and any effect a page stylesheet
+ * applied from OUTSIDE the `<svg>` are not in it. **JPEG has no alpha**, so it
+ * is flattened onto the resolved paper colour rather than onto black, which is
+ * what a transparent PNG becomes when a format with no transparency is asked
+ * to hold it.
+ *
+ * **The share card** is a 1200 × 630 frame with the title on it and the whole
+ * diagram letterboxed inside — never cropped. A card that cropped to fill the
+ * frame would be a picture of a different diagram.
+ */
+declare function DiagramExportMenu({ targetRef, title, trigger, className, onExport, onResult, }: DiagramExportMenuProps): react.JSX.Element;
+/**
+ * One figure, one format, one file.
+ *
+ * Exported so a page can wire a keyboard shortcut or its own button to exactly
+ * what the menu does, without reimplementing the six steps.
+ */
+declare function exportFigure(target: HTMLElement | SVGSVGElement | null, title: string, format: ExportFormat): Promise<void>;
+
+export { DiagramExportMenu, type DiagramExportMenuProps, type ExportFormat, type ExportResult, DiagramExportMenu as default, exportFigure };