@misoto22/design 0.6.0 → 0.7.0

package/dist/diagrams/WorkflowFigure/WorkflowFigure.d.ts

@@ -0,0 +1,34 @@
+import * as react from 'react';
+import { FigureChrome } from '../lib/frame.js';
+import { WorkflowSpec } from '../spec.js';
+import '../lib/geometry.js';
+
+interface WorkflowFigureProps extends FigureChrome {
+    spec: WorkflowSpec;
+}
+/**
+ * A process: who does what, in what order, and where it can go wrong.
+ *
+ * Three structures stacked on one grid, and they are three because they answer
+ * three different questions a reader brings to a runbook.
+ *
+ * **Lanes** are rows and answer WHO. A lane marked `exception` is the one band
+ * that gets a wash rather than a rule, and it earns the exception to the
+ * frames-are-rules law because nothing routes across it — it IS the ground for
+ * the failure path, not a frame drawn over the happy one.
+ *
+ * **Phases** are columns across every lane and answer WHEN. Printed as captions
+ * on one header rule, because a phase is an axis label. **Groups** are frames
+ * inside a single lane and answer WHAT BELONGS TOGETHER — a planning loop, an
+ * evidence path.
+ *
+ * THE MAIN PATH IS HEAVIER, and that is the whole hierarchy. `mainPath` lists
+ * the node ids a reader should be able to follow without thinking. Every edge
+ * between two consecutive ids on it is drawn at the emphasis weight whatever
+ * its own variant says, which is the one thing that turns fourteen boxes and
+ * nineteen arrows into a diagram with a subject. An `error` role goes the other
+ * way — dashed and soft — so the exception path recedes without disappearing.
+ */
+declare function WorkflowFigure({ spec, className, legend, cards, heading, activeIds, onSelectNode, }: WorkflowFigureProps): react.JSX.Element;
+
+export { WorkflowFigure, type WorkflowFigureProps, WorkflowFigure as default };

package/dist/diagrams/WorkflowFigure/WorkflowFigure.js

@@ -0,0 +1,211 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useId, useMemo } from "react";
+import { DiagramFrame } from "../lib/frame.js";
+import { inflate, round, textWidth, TYPE, union, wrapText } from "../lib/geometry.js";
+import { resolveLegend, variantLegend } from "../lib/legend.js";
+import { BandFrame, NodePlate, PLATE, plateHeight } from "../lib/marks.js";
+import { renderWires, wiresFor } from "../lib/wires.js";
+const VARIANTS = ["default", "emphasis", "security", "dashed"];
+const GRID = {
+  /** The gutter the lane names live in. */
+  railW: 118,
+  originY: 74,
+  colW: 168,
+  gapX: 58,
+  laneH: 92,
+  laneGap: 40
+};
+function WorkflowFigure({
+  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
+    }
+  );
+}
+const colX = (col) => GRID.railW + col * (GRID.colW + GRID.gapX);
+const spanBox = (fromCol, toCol, y, h) => ({
+  x: colX(fromCol),
+  y,
+  w: colX(toCol) + GRID.colW - colX(fromCol),
+  h
+});
+function buildModel(spec, uid, activeIds, onSelectNode) {
+  const laneIndex = new Map(spec.lanes.map((lane, index) => [lane.id, index]));
+  const laneY = (index) => GRID.originY + index * (GRID.laneH + GRID.laneGap);
+  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 index = laneIndex.get(node.lane) ?? 0;
+    const box = {
+      x: colX(node.col),
+      y: laneY(index) + (GRID.laneH - h) / 2 + (node.yOffset ?? 0),
+      w,
+      h
+    };
+    boxes.set(node.id, box);
+    return { node, box, lane: index };
+  });
+  const mainPairs = /* @__PURE__ */ new Set();
+  for (let index = 0; index < (spec.mainPath?.length ?? 0) - 1; index += 1) {
+    mainPairs.add(`${spec.mainPath[index]}\u2192${spec.mainPath[index + 1]}`);
+  }
+  const wires = wiresFor(spec.edges, boxes, (edge) => {
+    const onMain = mainPairs.has(`${edge.from}\u2192${edge.to}`);
+    return {
+      weight: onMain ? 2.1 : void 0,
+      open: edge.role === "return"
+    };
+  });
+  const { paths, labels } = renderWires(wires, uid);
+  const laneBoxes = spec.lanes.map((lane, index) => {
+    const inside = placed.filter((entry) => entry.lane === index).map((entry) => entry.box);
+    const span = union(inside);
+    const left2 = span ? span.x - 14 : GRID.railW - 14;
+    return {
+      lane,
+      index,
+      box: {
+        x: left2,
+        y: laneY(index) - 8,
+        w: (span ? span.x + span.w + 14 : colX(0) + GRID.colW) - left2,
+        h: GRID.laneH + 16
+      }
+    };
+  });
+  const drawn = [...boxes.values(), ...laneBoxes.map((entry) => entry.box)];
+  const headerY = GRID.originY - 30;
+  const railTextW = Math.max(0, ...spec.lanes.map((lane) => textWidth(lane.label, 9)));
+  const raw = union(drawn) ?? { x: 0, y: 0, w: 600, h: 300 };
+  const left = Math.min(raw.x, GRID.railW - 26 - railTextW);
+  const top = Math.min(raw.y, headerY - 14);
+  const extent = inflate(
+    { x: left, y: top, w: raw.x + raw.w - left, h: raw.y + raw.h - top },
+    24
+  );
+  const active = activeIds && activeIds.length > 0 ? new Set(activeIds) : null;
+  const artwork = /* @__PURE__ */ jsxs(Fragment, { children: [
+    (spec.phases ?? []).length > 0 && /* @__PURE__ */ jsx(
+      "path",
+      {
+        d: `M ${round(GRID.railW)} ${round(headerY + 8)} H ${round(extent.x + extent.w - 20)}`,
+        className: "stroke-(--diagram-rule)",
+        strokeWidth: 1,
+        "aria-hidden": "true"
+      }
+    ),
+    (spec.phases ?? []).map((phase) => /* @__PURE__ */ jsx(
+      "text",
+      {
+        x: round(colX(phase.fromCol)),
+        y: round(headerY),
+        className: "fill-(--diagram-ink-3) font-mono [font-size:9px] [letter-spacing:0.14em] uppercase",
+        "aria-hidden": "true",
+        children: phase.label
+      },
+      phase.id
+    )),
+    laneBoxes.map(({ lane, box }) => /* @__PURE__ */ jsxs("g", { "aria-hidden": "true", children: [
+      lane.variant === "exception" && /* @__PURE__ */ jsx(
+        "rect",
+        {
+          x: round(box.x),
+          y: round(box.y),
+          width: round(box.w),
+          height: round(box.h),
+          rx: 10,
+          className: "fill-(--diagram-band) [rx:var(--radius-lg)] [ry:var(--radius-lg)]"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "text",
+        {
+          x: round(GRID.railW - 26),
+          y: round(box.y + box.h / 2 + 3),
+          textAnchor: "end",
+          className: "fill-(--diagram-ink-3) font-mono [font-size:9px] [letter-spacing:0.14em] uppercase",
+          children: lane.label
+        }
+      )
+    ] }, lane.id)),
+    (spec.groups ?? []).map((group) => {
+      const index = laneIndex.get(group.lane) ?? 0;
+      return /* @__PURE__ */ jsx(
+        BandFrame,
+        {
+          box: spanBox(group.fromCol, group.toCol, laneY(index) - 2, GRID.laneH + 4),
+          label: group.label,
+          dashed: group.variant === "security"
+        },
+        group.id
+      );
+    }),
+    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.edges ?? []).map((edge) => edge.variant ?? "default"))];
+  return {
+    extent,
+    artwork,
+    nodes: spec.nodes.map((node) => ({
+      id: node.id,
+      label: node.label,
+      sublabel: node.sublabel,
+      kind: node.type
+    })),
+    edges: (spec.edges ?? []).map((edge) => ({
+      from: edge.from,
+      to: edge.to,
+      label: edge.label
+    })),
+    legend: variantLegend(
+      resolveLegend(used, spec.meta.legend?.mode, VARIANTS, spec.meta.legend?.entries),
+      spec.meta.legend?.entries
+    )
+  };
+}
+var WorkflowFigure_default = WorkflowFigure;
+export {
+  WorkflowFigure,
+  WorkflowFigure_default as default
+};
+//# sourceMappingURL=WorkflowFigure.js.map

package/dist/diagrams/WorkflowFigure/WorkflowFigure.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/diagrams/WorkflowFigure/WorkflowFigure.tsx"],"sourcesContent":["'use client'\n\nimport { useId, useMemo } from 'react'\nimport { DiagramFrame, type FigureChrome, type FigureModel } from '../lib/frame'\nimport { inflate, round, textWidth, TYPE, union, wrapText, type Box } from '../lib/geometry'\nimport { resolveLegend, variantLegend } from '../lib/legend'\nimport { BandFrame, NodePlate, PLATE, plateHeight } from '../lib/marks'\nimport { renderWires, wiresFor, type Wire } from '../lib/wires'\nimport type { Variant, WorkflowEdge, WorkflowSpec } from '../spec'\n\nconst VARIANTS: (Variant | 'return')[] = ['default', 'emphasis', 'security', 'dashed']\n\nconst GRID = {\n  /** The gutter the lane names live in. */\n  railW: 118,\n  originY: 74,\n  colW: 168,\n  gapX: 58,\n  laneH: 92,\n  laneGap: 40,\n}\n\nexport interface WorkflowFigureProps extends FigureChrome {\n  spec: WorkflowSpec\n}\n\n/**\n * A process: who does what, in what order, and where it can go wrong.\n *\n * Three structures stacked on one grid, and they are three because they answer\n * three different questions a reader brings to a runbook.\n *\n * **Lanes** are rows and answer WHO. A lane marked `exception` is the one band\n * that gets a wash rather than a rule, and it earns the exception to the\n * frames-are-rules law because nothing routes across it — it IS the ground for\n * the failure path, not a frame drawn over the happy one.\n *\n * **Phases** are columns across every lane and answer WHEN. Printed as captions\n * on one header rule, because a phase is an axis label. **Groups** are frames\n * inside a single lane and answer WHAT BELONGS TOGETHER — a planning loop, an\n * evidence path.\n *\n * THE MAIN PATH IS HEAVIER, and that is the whole hierarchy. `mainPath` lists\n * the node ids a reader should be able to follow without thinking. Every edge\n * between two consecutive ids on it is drawn at the emphasis weight whatever\n * its own variant says, which is the one thing that turns fourteen boxes and\n * nineteen arrows into a diagram with a subject. An `error` role goes the other\n * way — dashed and soft — so the exception path recedes without disappearing.\n */\nexport function WorkflowFigure({\n  spec,\n  className,\n  legend = 'auto',\n  cards = true,\n  heading = true,\n  activeIds,\n  onSelectNode,\n}: WorkflowFigureProps) {\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\n/** The x of a column's left edge, and of the whole span from `from` to `to`. */\nconst colX = (col: number) => GRID.railW + col * (GRID.colW + GRID.gapX)\nconst spanBox = (fromCol: number, toCol: number, y: number, h: number): Box => ({\n  x: colX(fromCol),\n  y,\n  w: colX(toCol) + GRID.colW - colX(fromCol),\n  h,\n})\n\nfunction buildModel(\n  spec: WorkflowSpec,\n  uid: string,\n  activeIds: string[] | undefined,\n  onSelectNode: ((id: string) => void) | undefined,\n): FigureModel {\n  const laneIndex = new Map(spec.lanes.map((lane, index) => [lane.id, index]))\n  const laneY = (index: number) => GRID.originY + index * (GRID.laneH + GRID.laneGap)\n\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    const index = laneIndex.get(node.lane) ?? 0\n\n    const box: Box = {\n      x: colX(node.col),\n      y: laneY(index) + (GRID.laneH - h) / 2 + (node.yOffset ?? 0),\n      w,\n      h,\n    }\n    boxes.set(node.id, box)\n    return { node, box, lane: index }\n  })\n\n  // Consecutive pairs on the main path, so the edge between them can be drawn\n  // at the weight that says \"follow this one\".\n  const mainPairs = new Set<string>()\n  for (let index = 0; index < (spec.mainPath?.length ?? 0) - 1; index += 1) {\n    mainPairs.add(`${spec.mainPath![index]}→${spec.mainPath![index + 1]}`)\n  }\n\n  const wires = wiresFor(spec.edges, boxes, (edge: WorkflowEdge): Partial<Wire> => {\n    const onMain = mainPairs.has(`${edge.from}→${edge.to}`)\n    return {\n      weight: onMain ? 2.1 : undefined,\n      open: edge.role === 'return',\n    }\n  })\n  const { paths, labels } = renderWires(wires, uid)\n\n  // A lane's band spans what the lane actually holds. Starting it at the rail\n  // instead ran the exception wash under the label gutter, which made the\n  // gutter look like part of the band rather than like the axis it is.\n  const laneBoxes = spec.lanes.map((lane, index) => {\n    const inside = placed.filter((entry) => entry.lane === index).map((entry) => entry.box)\n    const span = union(inside)\n    const left = span ? span.x - 14 : GRID.railW - 14\n    return {\n      lane,\n      index,\n      box: {\n        x: left,\n        y: laneY(index) - 8,\n        w: (span ? span.x + span.w + 14 : colX(0) + GRID.colW) - left,\n        h: GRID.laneH + 16,\n      } as Box,\n    }\n  })\n\n  const drawn = [...boxes.values(), ...laneBoxes.map((entry) => entry.box)]\n  const headerY = GRID.originY - 30\n\n  // The frame has to hold what is printed OUTSIDE the boxes too: the lane names\n  // in the gutter and the phase captions above the header rule. Sizing the\n  // extent from the boxes alone clipped both — and a clipped axis label is the\n  // one kind of overflow a reader reads as a broken renderer rather than as a\n  // long word.\n  const railTextW = Math.max(0, ...spec.lanes.map((lane) => textWidth(lane.label, 9)))\n  const raw = union(drawn) ?? { x: 0, y: 0, w: 600, h: 300 }\n  const left = Math.min(raw.x, GRID.railW - 26 - railTextW)\n  const top = Math.min(raw.y, headerY - 14)\n  const extent = inflate(\n    { x: left, y: top, w: raw.x + raw.w - left, h: raw.y + raw.h - top },\n    24,\n  )\n  const active = activeIds && activeIds.length > 0 ? new Set(activeIds) : null\n\n  const artwork = (\n    <>\n      {/* Phases: one header rule across the figure, with a caption per span. */}\n      {(spec.phases ?? []).length > 0 && (\n        <path\n          d={`M ${round(GRID.railW)} ${round(headerY + 8)} H ${round(extent.x + extent.w - 20)}`}\n          className=\"stroke-(--diagram-rule)\"\n          strokeWidth={1}\n          aria-hidden=\"true\"\n        />\n      )}\n      {(spec.phases ?? []).map((phase) => (\n        <text\n          key={phase.id}\n          x={round(colX(phase.fromCol))}\n          y={round(headerY)}\n          className=\"fill-(--diagram-ink-3) font-mono [font-size:9px] [letter-spacing:0.14em] uppercase\"\n          aria-hidden=\"true\"\n        >\n          {phase.label}\n        </text>\n      ))}\n\n      {/* Lanes. The exception band is the one wash in the system's diagrams. */}\n      {laneBoxes.map(({ lane, box }) => (\n        <g key={lane.id} aria-hidden=\"true\">\n          {lane.variant === 'exception' && (\n            <rect\n              x={round(box.x)}\n              y={round(box.y)}\n              width={round(box.w)}\n              height={round(box.h)}\n              rx={10}\n              className=\"fill-(--diagram-band) [rx:var(--radius-lg)] [ry:var(--radius-lg)]\"\n            />\n          )}\n          <text\n            x={round(GRID.railW - 26)}\n            y={round(box.y + box.h / 2 + 3)}\n            textAnchor=\"end\"\n            className=\"fill-(--diagram-ink-3) font-mono [font-size:9px] [letter-spacing:0.14em] uppercase\"\n          >\n            {lane.label}\n          </text>\n        </g>\n      ))}\n\n      {/* Groups: a frame inside one lane. */}\n      {(spec.groups ?? []).map((group) => {\n        const index = laneIndex.get(group.lane) ?? 0\n        return (\n          <BandFrame\n            key={group.id}\n            box={spanBox(group.fromCol, group.toCol, laneY(index) - 2, GRID.laneH + 4)}\n            label={group.label}\n            dashed={group.variant === 'security'}\n          />\n        )\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.edges ?? []).map((edge) => edge.variant ?? 'default'))]\n\n  return {\n    extent,\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.edges ?? []).map((edge) => ({\n      from: edge.from,\n      to: edge.to,\n      label: edge.label,\n    })),\n    legend: variantLegend(\n      resolveLegend(used, spec.meta.legend?.mode, VARIANTS, spec.meta.legend?.entries),\n      spec.meta.legend?.entries,\n    ),\n  }\n}\n\nexport default WorkflowFigure\n"],"mappings":"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","names":["left"]}

package/dist/diagrams/index.d.ts

@@ -0,0 +1,16 @@
+export { ArchitectureBoundary, ArchitectureComponent, ArchitectureSpec, DataflowEdge, DataflowNode, DataflowSpec, DataflowStage, DiagramCard, DiagramMeta, DiagramSpecAny, DiagramView, EdgeBase, LegendMode, LifecycleLane, LifecycleSpec, LifecycleState, LifecycleStateKind, LifecycleTransition, NodeBase, NodeKind, Point, RouteMode, SequenceActivation, SequenceMessage, SequenceParticipant, SequenceSegment, SequenceSpec, Side, SourceRef, Variant, WorkflowEdge, WorkflowEdgeRole, WorkflowGroup, WorkflowLane, WorkflowNode, WorkflowPhase, WorkflowSpec } from './spec.js';
+export { ArchitectureFigure, ArchitectureFigureProps } from './ArchitectureFigure/ArchitectureFigure.js';
+export { WorkflowFigure, WorkflowFigureProps } from './WorkflowFigure/WorkflowFigure.js';
+export { SequenceFigure, SequenceFigureProps } from './SequenceFigure/SequenceFigure.js';
+export { DataflowFigure, DataflowFigureProps } from './DataflowFigure/DataflowFigure.js';
+export { LifecycleFigure, LifecycleFigureProps } from './LifecycleFigure/LifecycleFigure.js';
+export { CanvasView, DiagramCanvas, DiagramCanvasHandle, DiagramCanvasProps } from './DiagramCanvas/DiagramCanvas.js';
+export { DiagramToolbar, DiagramToolbarGroup, DiagramToolbarProps } from './DiagramToolbar/DiagramToolbar.js';
+export { DiagramExportMenu, DiagramExportMenuProps, ExportFormat, ExportResult, exportFigure } from './DiagramExportMenu/DiagramExportMenu.js';
+export { DiagramInspector, DiagramInspectorProps, InspectorFact, InspectorLink } from './DiagramInspector/DiagramInspector.js';
+export { DiagramMinimap, DiagramMinimapProps } from './DiagramMinimap/DiagramMinimap.js';
+export { DiagramLegend, DiagramLegendEntry, DiagramLegendProps } from './DiagramLegend/DiagramLegend.js';
+export { LegendEntry, kindLegend, resolveLegend, stateLegend, variantLegend } from './lib/legend.js';
+export { FigureChrome } from './lib/frame.js';
+import 'react';
+import './lib/geometry.js';

package/dist/diagrams/index.js

@@ -0,0 +1,19 @@
+export * from "./ArchitectureFigure/ArchitectureFigure.js";
+export * from "./WorkflowFigure/WorkflowFigure.js";
+export * from "./SequenceFigure/SequenceFigure.js";
+export * from "./DataflowFigure/DataflowFigure.js";
+export * from "./LifecycleFigure/LifecycleFigure.js";
+export * from "./DiagramCanvas/DiagramCanvas.js";
+export * from "./DiagramToolbar/DiagramToolbar.js";
+export * from "./DiagramExportMenu/DiagramExportMenu.js";
+export * from "./DiagramInspector/DiagramInspector.js";
+export * from "./DiagramMinimap/DiagramMinimap.js";
+export * from "./DiagramLegend/DiagramLegend.js";
+import { kindLegend, resolveLegend, stateLegend, variantLegend } from "./lib/legend.js";
+export {
+  kindLegend,
+  resolveLegend,
+  stateLegend,
+  variantLegend
+};
+//# sourceMappingURL=index.js.map

package/dist/diagrams/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/diagrams/index.ts"],"sourcesContent":["/**\n * @misoto22/design/diagrams — the public entry.\n *\n * Five renderers for the five diagram shapes software actually needs, plus the\n * chrome a reader explores one with. They ship from their own entry point\n * rather than from the package root for one reason: a page that renders a Badge\n * should not be paying for a routing engine. Nothing under `src/components`\n * imports anything here, so the main barrel stays the size it was.\n *\n * The specification types mirror\n * [archify](https://github.com/tt-a1i/archify)'s published JSON schemas, so a\n * document authored for that tool renders here with no translation step — in\n * this system's own monochrome terms rather than in archify's palette.\n *\n * The look ships with the rest of the package:\n *\n *   import '@misoto22/design/styles.css'\n *\n * Everything below is a consumer contract. Adding an export is cheap; changing\n * or removing one is a breaking change (DESIGN-API-001).\n */\n\n// ─── Specifications ───\nexport type {\n  ArchitectureBoundary,\n  ArchitectureComponent,\n  ArchitectureSpec,\n  DataflowEdge,\n  DataflowNode,\n  DataflowSpec,\n  DataflowStage,\n  DiagramCard,\n  DiagramMeta,\n  DiagramSpecAny,\n  DiagramView,\n  EdgeBase,\n  LegendMode,\n  LifecycleLane,\n  LifecycleSpec,\n  LifecycleState,\n  LifecycleStateKind,\n  LifecycleTransition,\n  NodeBase,\n  NodeKind,\n  Point,\n  RouteMode,\n  SequenceActivation,\n  SequenceMessage,\n  SequenceParticipant,\n  SequenceSegment,\n  SequenceSpec,\n  Side,\n  SourceRef,\n  Variant,\n  WorkflowEdge,\n  WorkflowEdgeRole,\n  WorkflowGroup,\n  WorkflowLane,\n  WorkflowNode,\n  WorkflowPhase,\n  WorkflowSpec,\n} from './spec'\n\n// ─── Figures ───\nexport * from './ArchitectureFigure/ArchitectureFigure'\nexport * from './WorkflowFigure/WorkflowFigure'\nexport * from './SequenceFigure/SequenceFigure'\nexport * from './DataflowFigure/DataflowFigure'\nexport * from './LifecycleFigure/LifecycleFigure'\n\n// ─── Chrome ───\nexport * from './DiagramCanvas/DiagramCanvas'\nexport * from './DiagramToolbar/DiagramToolbar'\nexport * from './DiagramExportMenu/DiagramExportMenu'\nexport * from './DiagramInspector/DiagramInspector'\nexport * from './DiagramMinimap/DiagramMinimap'\nexport * from './DiagramLegend/DiagramLegend'\n\n// ─── Building a key ───\nexport { kindLegend, resolveLegend, stateLegend, variantLegend } from './lib/legend'\nexport type { LegendEntry } from './lib/legend'\n\n// ─── Shared chrome types ───\nexport type { FigureChrome } from './lib/frame'\n"],"mappings":"AAgEA,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AAGd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AAGd,SAAS,YAAY,eAAe,aAAa,qBAAqB;","names":[]}

package/dist/diagrams/lib/frame.d.ts

@@ -0,0 +1,97 @@
+import * as react from 'react';
+import { ReactNode } from 'react';
+import { LegendMode, DiagramCard, DiagramMeta } from '../spec.js';
+import { Box } from './geometry.js';
+
+/**
+ * What a figure hands the frame around it.
+ *
+ * Five renderers produce this one shape, which is what lets the title, the
+ * accessible summary, the key and the conclusion cards be written once. A
+ * renderer's only job is placing marks; everything a reader needs AROUND the
+ * picture is the same question in all five cases.
+ */
+interface FigureModel {
+    /** The extent the artwork was drawn into. */
+    extent: Box;
+    artwork: ReactNode;
+    /** Every drawn box, for the summary list. */
+    nodes: {
+        id: string;
+        label: string;
+        sublabel?: string;
+        kind?: string;
+    }[];
+    /** Every drawn line, for the summary list. */
+    edges: {
+        from: string;
+        to: string;
+        label?: string;
+    }[];
+    /** The kinds actually used, and how each is drawn. */
+    legend: {
+        key: string;
+        label: string;
+        sample: ReactNode;
+    }[];
+}
+interface FigureChrome {
+    className?: string;
+    /** Prints the key under the figure. `auto` shows only the kinds in use. */
+    legend?: LegendMode;
+    /** Prints the conclusion cards under the figure. Defaults to true. */
+    cards?: boolean;
+    /** Prints the title and subtitle over the figure. Defaults to true. */
+    heading?: boolean;
+    /** Node ids currently lit. Everything else is dimmed. */
+    activeIds?: string[];
+    /**
+     * Called when a reader picks a node.
+     *
+     * Giving this turns the summary list from a description into a control: the
+     * same list a screen reader reads becomes the keyboard's route to selection,
+     * and the plates in the picture become the pointer's route to the same thing.
+     */
+    onSelectNode?: (id: string) => void;
+}
+/**
+ * The shell every figure sits in: a heading, the picture, a key, the cards, and
+ * the part that makes the picture mean anything to a reader who cannot see it.
+ *
+ * ## The accessibility decision, stated rather than implied
+ *
+ * The `<svg>` carries `role="img"` and a label, which makes its whole subtree
+ * presentational. That is the honest description of what it is — a picture —
+ * and it is what stops a screen reader from walking two hundred `<text>`
+ * elements in drawing order, which is neither reading order nor useful.
+ *
+ * The diagram's CONTENT is then published beside it as an ordinary list: every
+ * node with what kind of thing it is, and every relationship as "A → B: over
+ * HTTPS". That list is where the meaning lives for anyone not looking at the
+ * picture, and it is why this component takes a model rather than markup — a
+ * frame handed a finished `<svg>` could not have written it.
+ *
+ * The list is visually hidden by default and NOT hidden from assistive
+ * technology, which is the opposite of what `aria-hidden` would do and the
+ * whole point.
+ */
+declare function DiagramFrame({ meta, model, cards, className, legend, showCards, heading, activeIds, onSelectNode, }: {
+    meta: DiagramMeta;
+    model: FigureModel;
+    cards?: DiagramCard[];
+    showCards?: boolean;
+} & Omit<FigureChrome, 'cards'>): react.JSX.Element;
+/**
+ * The conclusion cards under a figure.
+ *
+ * Archify keys these by hue — cyan, emerald, rose. Here the key selects a MARK:
+ * a filled square, a ring, a bar, a diagonal. Seven cards in a row stay seven
+ * distinguishable cards on paper-white, and the same row survives being
+ * printed.
+ */
+declare function CardGrid({ cards, className }: {
+    cards: DiagramCard[];
+    className?: string;
+}): react.JSX.Element;
+
+export { CardGrid, DiagramFrame, type FigureChrome, type FigureModel };

package/dist/diagrams/lib/frame.js

@@ -0,0 +1,116 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useId } from "react";
+import { cn } from "../../lib/cn.js";
+import { viewBoxOf } from "./geometry.js";
+import { DiagramLegend } from "../DiagramLegend/DiagramLegend.js";
+import { DiagramDefs } from "./marks.js";
+function DiagramFrame({
+  meta,
+  model,
+  cards,
+  className,
+  legend = "auto",
+  showCards = true,
+  heading = true,
+  activeIds,
+  onSelectNode
+}) {
+  const uid = useId().replace(/:/g, "");
+  const titleId = `${uid}-title`;
+  const descId = `${uid}-desc`;
+  const byId = new Map(model.nodes.map((node) => [node.id, node]));
+  const description = `${model.nodes.length} elements and ${model.edges.length} relationships. ${meta.subtitle ?? ""}`.trim();
+  const showLegend = legend !== "hidden" && model.legend.length > 0;
+  return /* @__PURE__ */ jsxs("figure", { className: cn("m-0 flex flex-col gap-5", className), children: [
+    heading && /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1.5", children: [
+      /* @__PURE__ */ jsx("h3", { className: "m-0 font-heading text-[length:var(--fs-sub)] font-normal leading-[1.15] tracking-[-0.015em] text-(--ink)", children: meta.title }),
+      meta.subtitle && /* @__PURE__ */ jsx("span", { className: "mono-meta text-(--ink-3-aa)", children: meta.subtitle })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "overflow-x-auto rounded-(--radius-lg) border border-(--rule) bg-(--diagram-surface) p-[clamp(0.75rem,calc(1.6*var(--fluid)),1.25rem)] scroll-slim", children: /* @__PURE__ */ jsxs(
+      "svg",
+      {
+        viewBox: viewBoxOf(model.extent),
+        role: "img",
+        "aria-labelledby": `${titleId} ${descId}`,
+        className: "block h-auto w-full max-w-full font-sans",
+        "data-diagram-artwork": "",
+        children: [
+          /* @__PURE__ */ jsx("title", { id: titleId, children: meta.title }),
+          /* @__PURE__ */ jsx("desc", { id: descId, children: description }),
+          /* @__PURE__ */ jsx(DiagramDefs, { uid }),
+          model.artwork
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsxs("div", { className: "sr-only", children: [
+      /* @__PURE__ */ jsx("p", { children: description }),
+      /* @__PURE__ */ jsx("ul", { children: model.nodes.map((node) => /* @__PURE__ */ jsx("li", { children: onSelectNode ? /* @__PURE__ */ jsx("button", { type: "button", onClick: () => onSelectNode(node.id), children: summaryLine(node) }) : summaryLine(node) }, node.id)) }),
+      model.edges.length > 0 && /* @__PURE__ */ jsx("ul", { children: model.edges.map((edge, index) => /* @__PURE__ */ jsxs("li", { children: [
+        byId.get(edge.from)?.label ?? edge.from,
+        " \u2192 ",
+        byId.get(edge.to)?.label ?? edge.to,
+        edge.label ? `: ${edge.label}` : ""
+      ] }, index)) })
+    ] }),
+    showLegend && /* @__PURE__ */ jsx(DiagramLegend, { entries: model.legend }),
+    showCards && cards && cards.length > 0 && /* @__PURE__ */ jsx(CardGrid, { cards }),
+    activeIds && activeIds.length > 0 && /* @__PURE__ */ jsx("span", { className: "sr-only", role: "status", children: `${activeIds.length} highlighted` })
+  ] });
+}
+function summaryLine(node) {
+  const parts = [node.label];
+  if (node.kind) parts.push(`(${node.kind})`);
+  if (node.sublabel) parts.push(`\u2014 ${node.sublabel}`);
+  return parts.join(" ");
+}
+function CardGrid({ cards, className }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "grid gap-3 sm:grid-cols-2 lg:grid-cols-3",
+        className
+      ),
+      children: cards.map((card) => /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2.5 border-t border-(--ink) pt-3", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsx(CardMark, { shape: card.dot }),
+          /* @__PURE__ */ jsx("span", { className: "font-sans text-[13.5px] leading-[1.35] text-(--ink)", children: card.title })
+        ] }),
+        /* @__PURE__ */ jsx("ul", { className: "m-0 flex list-none flex-col gap-1.5 p-0", children: card.items.map((item, index) => /* @__PURE__ */ jsx(
+          "li",
+          {
+            className: "text-[12.5px] leading-[1.55] text-(--ink-2) ps-3 -indent-3 before:content-['\u2014'] before:pe-1.5 before:text-(--ink-3-aa)",
+            children: item
+          },
+          index
+        )) })
+      ] }, card.title))
+    }
+  );
+}
+function CardMark({ shape }) {
+  const common = "size-2.5 shrink-0";
+  switch (shape) {
+    case "cyan":
+      return /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: cn(common, "bg-(--ink)") });
+    case "emerald":
+      return /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: cn(common, "rounded-full bg-(--ink)") });
+    case "violet":
+      return /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: cn(common, "rounded-full border border-(--ink)") });
+    case "amber":
+      return /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: cn(common, "border border-(--ink)") });
+    case "rose":
+      return /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: cn(common, "rotate-45 bg-(--ink)") });
+    case "orange":
+      return /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: cn(common, "rotate-45 border border-(--ink)") });
+    case "slate":
+    default:
+      return /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: cn("h-1 w-2.5 shrink-0 bg-(--ink-3-aa)") });
+  }
+}
+export {
+  CardGrid,
+  DiagramFrame
+};
+//# sourceMappingURL=frame.js.map

package/dist/diagrams/lib/frame.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/diagrams/lib/frame.tsx"],"sourcesContent":["'use client'\n\nimport { useId, type ReactNode } from 'react'\nimport { cn } from '../../lib/cn'\nimport type { DiagramCard, DiagramMeta, LegendMode } from '../spec'\nimport { viewBoxOf, type Box } from './geometry'\nimport { DiagramLegend } from '../DiagramLegend/DiagramLegend'\nimport { DiagramDefs } from './marks'\n\n/**\n * What a figure hands the frame around it.\n *\n * Five renderers produce this one shape, which is what lets the title, the\n * accessible summary, the key and the conclusion cards be written once. A\n * renderer's only job is placing marks; everything a reader needs AROUND the\n * picture is the same question in all five cases.\n */\nexport interface FigureModel {\n  /** The extent the artwork was drawn into. */\n  extent: Box\n  artwork: ReactNode\n  /** Every drawn box, for the summary list. */\n  nodes: { id: string; label: string; sublabel?: string; kind?: string }[]\n  /** Every drawn line, for the summary list. */\n  edges: { from: string; to: string; label?: string }[]\n  /** The kinds actually used, and how each is drawn. */\n  legend: { key: string; label: string; sample: ReactNode }[]\n}\n\nexport interface FigureChrome {\n  className?: string\n  /** Prints the key under the figure. `auto` shows only the kinds in use. */\n  legend?: LegendMode\n  /** Prints the conclusion cards under the figure. Defaults to true. */\n  cards?: boolean\n  /** Prints the title and subtitle over the figure. Defaults to true. */\n  heading?: boolean\n  /** Node ids currently lit. Everything else is dimmed. */\n  activeIds?: string[]\n  /**\n   * Called when a reader picks a node.\n   *\n   * Giving this turns the summary list from a description into a control: the\n   * same list a screen reader reads becomes the keyboard's route to selection,\n   * and the plates in the picture become the pointer's route to the same thing.\n   */\n  onSelectNode?: (id: string) => void\n}\n\n/**\n * The shell every figure sits in: a heading, the picture, a key, the cards, and\n * the part that makes the picture mean anything to a reader who cannot see it.\n *\n * ## The accessibility decision, stated rather than implied\n *\n * The `<svg>` carries `role=\"img\"` and a label, which makes its whole subtree\n * presentational. That is the honest description of what it is — a picture —\n * and it is what stops a screen reader from walking two hundred `<text>`\n * elements in drawing order, which is neither reading order nor useful.\n *\n * The diagram's CONTENT is then published beside it as an ordinary list: every\n * node with what kind of thing it is, and every relationship as \"A → B: over\n * HTTPS\". That list is where the meaning lives for anyone not looking at the\n * picture, and it is why this component takes a model rather than markup — a\n * frame handed a finished `<svg>` could not have written it.\n *\n * The list is visually hidden by default and NOT hidden from assistive\n * technology, which is the opposite of what `aria-hidden` would do and the\n * whole point.\n */\nexport function DiagramFrame({\n  meta,\n  model,\n  cards,\n  className,\n  legend = 'auto',\n  showCards = true,\n  heading = true,\n  activeIds,\n  onSelectNode,\n}: {\n  meta: DiagramMeta\n  model: FigureModel\n  cards?: DiagramCard[]\n  showCards?: boolean\n} & Omit<FigureChrome, 'cards'>) {\n  const uid = useId().replace(/:/g, '')\n  const titleId = `${uid}-title`\n  const descId = `${uid}-desc`\n\n  const byId = new Map(model.nodes.map((node) => [node.id, node]))\n  const description = `${model.nodes.length} elements and ${model.edges.length} relationships. ${\n    meta.subtitle ?? ''\n  }`.trim()\n\n  const showLegend = legend !== 'hidden' && model.legend.length > 0\n\n  return (\n    <figure className={cn('m-0 flex flex-col gap-5', className)}>\n      {/* The title is set in the editorial serif, which is the system's own\n          answer to \"this is a heading\" — and it is what stops a figure from\n          reading as a screenshot dropped into the page. The subtitle stays in\n          the meta voice underneath it. */}\n      {heading && (\n        <div className=\"flex flex-col gap-1.5\">\n          <h3 className=\"m-0 font-heading text-[length:var(--fs-sub)] font-normal leading-[1.15] tracking-[-0.015em] text-(--ink)\">\n            {meta.title}\n          </h3>\n          {meta.subtitle && <span className=\"mono-meta text-(--ink-3-aa)\">{meta.subtitle}</span>}\n        </div>\n      )}\n\n      <div className=\"overflow-x-auto rounded-(--radius-lg) border border-(--rule) bg-(--diagram-surface) p-[clamp(0.75rem,calc(1.6*var(--fluid)),1.25rem)] scroll-slim\">\n        <svg\n          viewBox={viewBoxOf(model.extent)}\n          role=\"img\"\n          aria-labelledby={`${titleId} ${descId}`}\n          className=\"block h-auto w-full max-w-full font-sans\"\n          data-diagram-artwork=\"\"\n        >\n          <title id={titleId}>{meta.title}</title>\n          <desc id={descId}>{description}</desc>\n          <DiagramDefs uid={uid} />\n          {model.artwork}\n        </svg>\n      </div>\n\n      {/* The picture's content, for anyone not looking at the picture. */}\n      <div className=\"sr-only\">\n        <p>{description}</p>\n        <ul>\n          {model.nodes.map((node) => (\n            <li key={node.id}>\n              {onSelectNode ? (\n                <button type=\"button\" onClick={() => onSelectNode(node.id)}>\n                  {summaryLine(node)}\n                </button>\n              ) : (\n                summaryLine(node)\n              )}\n            </li>\n          ))}\n        </ul>\n        {model.edges.length > 0 && (\n          <ul>\n            {model.edges.map((edge, index) => (\n              <li key={index}>\n                {(byId.get(edge.from)?.label ?? edge.from)} → {(byId.get(edge.to)?.label ?? edge.to)}\n                {edge.label ? `: ${edge.label}` : ''}\n              </li>\n            ))}\n          </ul>\n        )}\n      </div>\n\n      {showLegend && <DiagramLegend entries={model.legend} />}\n\n      {showCards && cards && cards.length > 0 && <CardGrid cards={cards} />}\n\n      {activeIds && activeIds.length > 0 && <span className=\"sr-only\" role=\"status\">{`${activeIds.length} highlighted`}</span>}\n    </figure>\n  )\n}\n\nfunction summaryLine(node: { label: string; sublabel?: string; kind?: string }): string {\n  const parts = [node.label]\n  if (node.kind) parts.push(`(${node.kind})`)\n  if (node.sublabel) parts.push(`— ${node.sublabel}`)\n  return parts.join(' ')\n}\n\n/**\n * The conclusion cards under a figure.\n *\n * Archify keys these by hue — cyan, emerald, rose. Here the key selects a MARK:\n * a filled square, a ring, a bar, a diagonal. Seven cards in a row stay seven\n * distinguishable cards on paper-white, and the same row survives being\n * printed.\n */\nexport function CardGrid({ cards, className }: { cards: DiagramCard[]; className?: string }) {\n  return (\n    <div\n      className={cn(\n        'grid gap-3 sm:grid-cols-2 lg:grid-cols-3',\n        className,\n      )}\n    >\n      {cards.map((card) => (\n        <div key={card.title} className=\"flex flex-col gap-2.5 border-t border-(--ink) pt-3\">\n          <div className=\"flex items-center gap-2\">\n            <CardMark shape={card.dot} />\n            <span className=\"font-sans text-[13.5px] leading-[1.35] text-(--ink)\">{card.title}</span>\n          </div>\n          <ul className=\"m-0 flex list-none flex-col gap-1.5 p-0\">\n            {card.items.map((item, index) => (\n              <li\n                key={index}\n                className=\"text-[12.5px] leading-[1.55] text-(--ink-2) ps-3 -indent-3 before:content-['—'] before:pe-1.5 before:text-(--ink-3-aa)\"\n              >\n                {item}\n              </li>\n            ))}\n          </ul>\n        </div>\n      ))}\n    </div>\n  )\n}\n\n/** Seven marks, one per archify dot name, and not one of them a hue. */\nfunction CardMark({ shape }: { shape: DiagramCard['dot'] }) {\n  const common = 'size-2.5 shrink-0'\n  switch (shape) {\n    case 'cyan':\n      return <span aria-hidden className={cn(common, 'bg-(--ink)')} />\n    case 'emerald':\n      return <span aria-hidden className={cn(common, 'rounded-full bg-(--ink)')} />\n    case 'violet':\n      return <span aria-hidden className={cn(common, 'rounded-full border border-(--ink)')} />\n    case 'amber':\n      return <span aria-hidden className={cn(common, 'border border-(--ink)')} />\n    case 'rose':\n      return <span aria-hidden className={cn(common, 'rotate-45 bg-(--ink)')} />\n    case 'orange':\n      return <span aria-hidden className={cn(common, 'rotate-45 border border-(--ink)')} />\n    case 'slate':\n    default:\n      return <span aria-hidden className={cn('h-1 w-2.5 shrink-0 bg-(--ink-3-aa)')} />\n  }\n}\n"],"mappings":"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","names":[]}