@misoto22/design 0.6.1 → 0.8.0

package/dist/diagrams/ArchitectureFigure/ArchitectureFigure.js

@@ -0,0 +1,175 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useId, useMemo } from "react";
+import { liveEdges, useSpecIdentity, warnCollision } from "../lib/dev.js";
+import { DiagramFrame } from "../lib/frame.js";
+import { inflate, round, TYPE, union, wrapText } from "../lib/geometry.js";
+import { kindLegend, resolveLegend } from "../lib/legend.js";
+import { BandFrame, 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 = { origin: [40, 48], cols: 4, cellW: 184, cellH: 72, gapX: 64, gapY: 76 };
+function ArchitectureFigure({
+  spec,
+  className,
+  legend = "auto",
+  cards = true,
+  heading = true,
+  activeIds,
+  onSelectNode
+}) {
+  const uid = useId().replace(/:/g, "");
+  useSpecIdentity(spec, "ArchitectureFigure");
+  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 flow(components, cols) {
+  const claimed = /* @__PURE__ */ new Set();
+  for (const component of components) {
+    if (!component.pos && (component.row !== void 0 || component.col !== void 0)) {
+      claimed.add(`${component.row ?? 0}:${component.col ?? 0}`);
+    }
+  }
+  let cursor = 0;
+  return (component) => {
+    if (component.row !== void 0 || component.col !== void 0) {
+      return [component.row ?? 0, component.col ?? 0];
+    }
+    while (claimed.has(`${Math.floor(cursor / cols)}:${cursor % cols}`)) cursor += 1;
+    const cell = [Math.floor(cursor / cols), cursor % cols];
+    claimed.add(`${cell[0]}:${cell[1]}`);
+    cursor += 1;
+    return cell;
+  };
+}
+function buildModel(spec, uid, activeIds, onSelectNode) {
+  const layout = { ...GRID, ...spec.layout };
+  const [originX, originY] = layout.origin;
+  const nextCell = flow(spec.components, Math.max(1, Math.round(layout.cols)));
+  const boxes = /* @__PURE__ */ new Map();
+  const cells = /* @__PURE__ */ new Map();
+  const named = new Map(spec.components.map((component) => [component.id, component.label]));
+  const placed = spec.components.map((component) => {
+    const labelWidth = component.size?.[0] ?? component.width ?? layout.cellW;
+    const lines = wrapText(component.label, TYPE.label, labelWidth - PLATE.padX * 2, 2);
+    const height = plateHeight(
+      lines.length,
+      Boolean(component.sublabel),
+      Boolean(component.type || component.tag),
+      component.size?.[1] ?? component.height ?? 0
+    );
+    const [row, col] = nextCell(component);
+    const x = component.pos ? component.pos[0] : originX + col * (layout.cellW + layout.gapX);
+    const y = component.pos ? component.pos[1] : originY + row * (layout.cellH + layout.gapY);
+    const box = { x, y, w: labelWidth, h: height };
+    boxes.set(component.id, box);
+    cells.set(`${round(x)}:${round(y)}`, [...cells.get(`${round(x)}:${round(y)}`) ?? [], component.id]);
+    return { component, box };
+  });
+  for (const ids of cells.values()) {
+    if (ids.length > 1) warnCollision("ArchitectureFigure", ids);
+  }
+  const boundaries = (spec.boundaries ?? []).map((boundary) => {
+    const inside = boundary.wraps.filter((id) => boxes.has(id));
+    const wrapped = inside.map((id) => boxes.get(id)).filter((box) => Boolean(box));
+    const extent2 = union(wrapped);
+    return { boundary, inside, box: extent2 ? inflate(extent2, boundary.pad ?? 28) : null };
+  });
+  const absolute = new Set(
+    spec.components.filter((component) => component.pos).map((component) => component.id)
+  );
+  const connections = liveEdges("ArchitectureFigure", spec.connections, (id) => boxes.has(id));
+  const wires = wiresFor(connections, boxes, (connection) => ({
+    keepWaypoints: absolute.has(connection.from) && absolute.has(connection.to)
+  }));
+  const { paths, labels } = renderWires(wires, uid);
+  const drawn = [...boxes.values(), ...boundaries.map((entry) => entry.box).filter((box) => Boolean(box))];
+  const extent = inflate(union(drawn) ?? { x: 0, y: 0, w: 400, h: 200 }, 22);
+  const active = activeIds && activeIds.length > 0 ? new Set(activeIds) : null;
+  const artwork = /* @__PURE__ */ jsxs(Fragment, { children: [
+    boundaries.map(
+      ({ boundary, box }, index) => box ? /* @__PURE__ */ jsx(
+        BandFrame,
+        {
+          box,
+          label: boundary.label,
+          dashed: boundary.kind === "security-group"
+        },
+        `${boundary.label}-${index}`
+      ) : null
+    ),
+    paths,
+    placed.map(({ component, box }) => /* @__PURE__ */ jsx(
+      NodePlate,
+      {
+        nodeId: component.id,
+        box,
+        label: component.label,
+        sublabel: component.sublabel,
+        tag: component.tag,
+        kind: component.type,
+        active: active?.has(component.id),
+        dimmed: active ? !active.has(component.id) : false,
+        onSelect: onSelectNode ? () => onSelectNode(component.id) : void 0
+      },
+      component.id
+    )),
+    labels
+  ] });
+  const used = [...new Set(spec.components.map((component) => component.type))];
+  return {
+    extent,
+    artwork,
+    nodes: spec.components.map((component) => ({
+      id: component.id,
+      label: component.label,
+      sublabel: component.sublabel,
+      kind: component.type
+    })),
+    edges: connections.map((connection) => ({
+      from: connection.from,
+      to: connection.to,
+      label: connection.label
+    })),
+    // A boundary is a statement — this runs there, that may reach it — drawn as
+    // a frame inside artwork a screen reader is told to skip. It groups nothing
+    // in the list, because two boundaries can hold the same component and a
+    // node published twice is a node the keyboard reaches twice.
+    notes: boundaries.map(({ boundary, inside }) => {
+      const kind = boundary.kind === "region" ? "Region" : "Security group";
+      const members = inside.map((id) => named.get(id) ?? id);
+      return members.length > 0 ? `${kind} ${boundary.label} encloses ${members.join(", ")}.` : `${kind} ${boundary.label} encloses nothing this figure draws.`;
+    }),
+    legend: kindLegend(
+      resolveLegend(used, spec.meta.legend?.mode, KINDS, spec.meta.legend?.entries),
+      spec.meta.legend?.entries
+    )
+  };
+}
+var ArchitectureFigure_default = ArchitectureFigure;
+export {
+  ArchitectureFigure,
+  ArchitectureFigure_default as default
+};
+//# sourceMappingURL=ArchitectureFigure.js.map

package/dist/diagrams/ArchitectureFigure/ArchitectureFigure.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/diagrams/ArchitectureFigure/ArchitectureFigure.tsx"],"sourcesContent":["'use client'\n\nimport { useId, useMemo } from 'react'\nimport { liveEdges, useSpecIdentity, warnCollision } from '../lib/dev'\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 { BandFrame, NodePlate, PLATE, plateHeight } from '../lib/marks'\nimport { renderWires, wiresFor } from '../lib/wires'\nimport type { ArchitectureComponent, ArchitectureSpec, NodeKind } from '../spec'\n\nconst KINDS: NodeKind[] = [\n  'frontend',\n  'backend',\n  'database',\n  'cloud',\n  'security',\n  'messagebus',\n  'external',\n]\n\n/** What a cell is, when the specification does not say. */\nconst GRID = { origin: [40, 48] as [number, number], cols: 4, cellW: 184, cellH: 72, gapX: 64, gapY: 76 }\n\nexport interface ArchitectureFigureProps extends FigureChrome {\n  spec: ArchitectureSpec\n}\n\n/**\n * A component map: services, datastores, boundaries, and what talks to what.\n *\n * Takes the same JSON an archify `architecture` specification carries —\n * `components`, `boundaries`, `connections` — and draws it in this system's own\n * terms: paper plates on a hairline, one reversed plate for the component the\n * diagram is about, and seven drawn sigils where archify uses seven hues.\n *\n * IT RENDERS ON A SERVER because every position is already in the\n * specification. A component gives a `row` and a `col` into a grid whose cell\n * size is either declared or defaulted, or it gives an absolute `pos` — nothing\n * here is solved for, relaxed, or measured. So the markup is a pure function of\n * the input, it is identical on the server and in the browser, and there is no\n * layout shift on hydration because there is no layout to do.\n *\n * A component that declares NEITHER flows: it takes the next free cell in\n * declaration order, wrapping at `layout.cols`. That is still arithmetic on\n * numbers the specification carries rather than a solver — and the alternative\n * was every unplaced component defaulting to row 0, column 0 and stacking into\n * one plate.\n *\n * BOUNDARIES ARE DRAWN FIRST, AND DRAWN DIFFERENTLY. A `region` is where\n * something RUNS — a VPC, a zone, a cluster — and is a solid frame. A\n * `security-group` is what may REACH it, and is dashed. That is not decoration:\n * an infrastructure diagram is very often read for exactly one of those two\n * questions, and a reader should be able to tell which line answers which\n * without reading either label.\n *\n * @example\n * <ArchitectureFigure\n *   spec={{\n *     meta: { title: 'Request path' },\n *     components: [\n *       { id: 'cdn', type: 'cloud', label: 'CloudFront', row: 0, col: 0 },\n *       { id: 'api', type: 'backend', label: 'FastAPI', sublabel: 'ECS', row: 0, col: 1 },\n *       { id: 'db', type: 'database', label: 'Postgres', row: 0, col: 2 },\n *     ],\n *     connections: [\n *       { from: 'cdn', to: 'api', label: 'HTTPS' },\n *       { from: 'api', to: 'db', label: 'SQL' },\n *     ],\n *   }}\n * />\n */\nexport function ArchitectureFigure({\n  spec,\n  className,\n  legend = 'auto',\n  cards = true,\n  heading = true,\n  activeIds,\n  onSelectNode,\n}: ArchitectureFigureProps) {\n  const uid = useId().replace(/:/g, '')\n  useSpecIdentity(spec, 'ArchitectureFigure')\n  const model = useMemo(() => buildModel(spec, uid, activeIds, onSelectNode), [spec, uid, activeIds, onSelectNode])\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\n/**\n * Where a component sits, for a specification that did not say.\n *\n * `row` and `col` are both optional and both defaulted to 0, which meant every\n * component that declared no placement was drawn in the same cell — a figure of\n * seven services rendering as one plate with six underneath it. Reading them as\n * \"put it in the next free cell\" is what `layout.cols` was always for.\n *\n * Cells an explicit `row`/`col` claims are reserved before the flow starts, so\n * an author who placed three of ten components keeps those three exactly where\n * they put them.\n */\nfunction flow(\n  components: ArchitectureComponent[],\n  cols: number,\n): (component: ArchitectureComponent) => [row: number, col: number] {\n  const claimed = new Set<string>()\n  for (const component of components) {\n    if (!component.pos && (component.row !== undefined || component.col !== undefined)) {\n      claimed.add(`${component.row ?? 0}:${component.col ?? 0}`)\n    }\n  }\n\n  let cursor = 0\n  return (component) => {\n    if (component.row !== undefined || component.col !== undefined) {\n      return [component.row ?? 0, component.col ?? 0]\n    }\n    while (claimed.has(`${Math.floor(cursor / cols)}:${cursor % cols}`)) cursor += 1\n    const cell: [number, number] = [Math.floor(cursor / cols), cursor % cols]\n    claimed.add(`${cell[0]}:${cell[1]}`)\n    cursor += 1\n    return cell\n  }\n}\n\nfunction buildModel(\n  spec: ArchitectureSpec,\n  uid: string,\n  activeIds: string[] | undefined,\n  onSelectNode: ((id: string) => void) | undefined,\n): FigureModel {\n  const layout = { ...GRID, ...spec.layout }\n  const [originX, originY] = layout.origin\n  const nextCell = flow(spec.components, Math.max(1, Math.round(layout.cols)))\n\n  const boxes = new Map<string, Box>()\n  const cells = new Map<string, string[]>()\n  const named = new Map(spec.components.map((component) => [component.id, component.label]))\n  const placed = spec.components.map((component) => {\n    // `layout.cellW` sets the PITCH and the plate's own width. Reading the\n    // module default here instead spaced the plates further apart at the width\n    // they already had, which is a grid with gaps rather than wider boxes.\n    const labelWidth = component.size?.[0] ?? component.width ?? layout.cellW\n    const lines = wrapText(component.label, TYPE.label, labelWidth - PLATE.padX * 2, 2)\n    const height = plateHeight(\n      lines.length,\n      Boolean(component.sublabel),\n      Boolean(component.type || component.tag),\n      component.size?.[1] ?? component.height ?? 0,\n    )\n\n    const [row, col] = nextCell(component)\n    const x = component.pos ? component.pos[0] : originX + col * (layout.cellW + layout.gapX)\n    const y = component.pos ? component.pos[1] : originY + row * (layout.cellH + layout.gapY)\n\n    const box: Box = { x, y, w: labelWidth, h: height }\n    boxes.set(component.id, box)\n    cells.set(`${round(x)}:${round(y)}`, [...(cells.get(`${round(x)}:${round(y)}`) ?? []), component.id])\n    return { component, box }\n  })\n\n  // Nothing else notices: two plates at one coordinate draw one on top of the\n  // other, and both are still in the summary — so the mistake exists in the\n  // picture and nowhere the author is looking. `warnCollision` is dev-only.\n  for (const ids of cells.values()) {\n    if (ids.length > 1) warnCollision('ArchitectureFigure', ids)\n  }\n\n  const boundaries = (spec.boundaries ?? []).map((boundary) => {\n    const inside = boundary.wraps.filter((id) => boxes.has(id))\n    const wrapped = inside.map((id) => boxes.get(id)).filter((box): box is Box => Boolean(box))\n    const extent = union(wrapped)\n    return { boundary, inside, box: extent ? inflate(extent, boundary.pad ?? 28) : null }\n  })\n\n  // A waypoint is only meaningful when both ends were placed absolutely — see\n  // `Wire.keepWaypoints`. In this diagram type that is common, which is why an\n  // archify architecture specification's hand-tuned routes survive the move.\n  const absolute = new Set(\n    spec.components.filter((component) => component.pos).map((component) => component.id),\n  )\n  const connections = liveEdges('ArchitectureFigure', spec.connections, (id) => boxes.has(id))\n  const wires = wiresFor(connections, boxes, (connection) => ({\n    keepWaypoints: absolute.has(connection.from) && absolute.has(connection.to),\n  }))\n  const { paths, labels } = renderWires(wires, uid)\n\n  const drawn = [...boxes.values(), ...boundaries.map((entry) => entry.box).filter((box): box is Box => Boolean(box))]\n  const extent = inflate(union(drawn) ?? { x: 0, y: 0, w: 400, h: 200 }, 22)\n\n  const active = activeIds && activeIds.length > 0 ? new Set(activeIds) : null\n\n  const artwork = (\n    <>\n      {boundaries.map(({ boundary, box }, index) =>\n        box ? (\n          <BandFrame\n            key={`${boundary.label}-${index}`}\n            box={box}\n            label={boundary.label}\n            dashed={boundary.kind === 'security-group'}\n          />\n        ) : null,\n      )}\n      {paths}\n      {placed.map(({ component, box }) => (\n        <NodePlate\n          key={component.id}\n          nodeId={component.id}\n          box={box}\n          label={component.label}\n          sublabel={component.sublabel}\n          tag={component.tag}\n          kind={component.type}\n          active={active?.has(component.id)}\n          dimmed={active ? !active.has(component.id) : false}\n          onSelect={onSelectNode ? () => onSelectNode(component.id) : undefined}\n        />\n      ))}\n      {labels}\n    </>\n  )\n\n  const used = [...new Set(spec.components.map((component) => component.type))]\n\n  return {\n    extent,\n    artwork,\n    nodes: spec.components.map((component) => ({\n      id: component.id,\n      label: component.label,\n      sublabel: component.sublabel,\n      kind: component.type,\n    })),\n    edges: connections.map((connection) => ({\n      from: connection.from,\n      to: connection.to,\n      label: connection.label,\n    })),\n    // A boundary is a statement — this runs there, that may reach it — drawn as\n    // a frame inside artwork a screen reader is told to skip. It groups nothing\n    // in the list, because two boundaries can hold the same component and a\n    // node published twice is a node the keyboard reaches twice.\n    notes: boundaries.map(({ boundary, inside }) => {\n      const kind = boundary.kind === 'region' ? 'Region' : 'Security group'\n      const members = inside.map((id) => named.get(id) ?? id)\n      return members.length > 0\n        ? `${kind} ${boundary.label} encloses ${members.join(', ')}.`\n        : `${kind} ${boundary.label} encloses nothing this figure draws.`\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 ArchitectureFigure\n"],"mappings":"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","names":["extent"]}

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,148 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useId, useMemo } from "react";
+import { liveEdges, useSpecIdentity, warnStageOutOfRange } from "../lib/dev.js";
+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, "");
+  useSpecIdentity(spec, "DataflowFigure");
+  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);
+    if (node.stage < 0 || node.stage >= spec.stages.length) {
+      warnStageOutOfRange("DataflowFigure", node.id, node.stage, spec.stages.length);
+    }
+    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 flows = liveEdges("DataflowFigure", spec.flows, (id) => boxes.has(id));
+  const wires = wiresFor(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))];
+  const inStage = (index) => spec.nodes.filter((node) => node.stage === index).sort((a, b) => a.row - b.row).map((node) => node.id);
+  const stray = spec.nodes.filter((node) => node.stage < 0 || node.stage >= spec.stages.length).map((node) => node.id);
+  const bands = [
+    ...spec.stages.map((stage, index) => ({
+      kind: "Stage",
+      label: stage.label,
+      ids: inStage(index)
+    })),
+    // Drawn past the last heading, so said that way rather than folded in
+    // beside nodes the axis does label.
+    ...stray.length > 0 ? [{ kind: "Stage", label: "outside the declared stages", ids: stray }] : []
+  ];
+  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: flows.map((flow) => ({
+      from: flow.from,
+      to: flow.to,
+      label: [flow.label, flow.classification].filter(Boolean).join(" \u2014 ") || void 0
+    })),
+    bands,
+    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 { liveEdges, useSpecIdentity, warnStageOutOfRange } from '../lib/dev'\nimport { DiagramFrame, type FigureBand, 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  useSpecIdentity(spec, 'DataflowFigure')\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    // The stage is an INDEX into the headings, and the x is arithmetic on it\n    // rather than a lookup — so a stage nothing declares is drawn a full column\n    // past the last heading, under no heading at all.\n    if (node.stage < 0 || node.stage >= spec.stages.length) {\n      warnStageOutOfRange('DataflowFigure', node.id, node.stage, spec.stages.length)\n    }\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 flows = liveEdges('DataflowFigure', spec.flows, (id) => boxes.has(id))\n  const wires = wiresFor(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  // The stages ARE the list's structure. \"How far has this got\" is the question\n  // the axis exists to answer, and it was printed only as headings inside\n  // artwork a screen reader is told to skip.\n  const inStage = (index: number) =>\n    spec.nodes\n      .filter((node) => node.stage === index)\n      .sort((a, b) => a.row - b.row)\n      .map((node) => node.id)\n\n  const stray = spec.nodes\n    .filter((node) => node.stage < 0 || node.stage >= spec.stages.length)\n    .map((node) => node.id)\n\n  const bands: FigureBand[] = [\n    ...spec.stages.map((stage, index) => ({\n      kind: 'Stage',\n      label: stage.label,\n      ids: inStage(index),\n    })),\n    // Drawn past the last heading, so said that way rather than folded in\n    // beside nodes the axis does label.\n    ...(stray.length > 0\n      ? [{ kind: 'Stage', label: 'outside the declared stages', ids: stray }]\n      : []),\n  ]\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: flows.map((flow) => ({\n      from: flow.from,\n      to: flow.to,\n      label: [flow.label, flow.classification].filter(Boolean).join(' — ') || undefined,\n    })),\n    bands,\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,78 @@
+import * as react from 'react';
+import { ReactNode, Ref } from 'react';
+
+interface CanvasView {
+    scale: number;
+    x: number;
+    y: number;
+    /**
+     * How big the frame was, in CSS pixels, when this view was reported.
+     *
+     * Carried on the view because everything that consumes a view needs it and
+     * nothing outside this component can measure it: a `DiagramMinimap`'s
+     * viewport rectangle is the frame's size over the zoom, and a caller who had
+     * to hand-declare that number was hand-declaring the one number that makes
+     * the map lie. Absent until the frame has been measured — the first render
+     * has no box yet — which is exactly when a map should draw nothing.
+     */
+    frame?: {
+        width: number;
+        height: 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 };