@misoto22/design 0.6.1 → 0.8.0

package/dist/diagrams/LifecycleFigure/LifecycleFigure.js

@@ -0,0 +1,234 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useId, useMemo } from "react";
+import { cn } from "../../lib/cn.js";
+import { liveEdges, useSpecIdentity, warnUnknownLane } from "../lib/dev.js";
+import { DiagramFrame } from "../lib/frame.js";
+import { inflate, round, TYPE, textWidth, union, wrapText } from "../lib/geometry.js";
+import { resolveLegend, stateLegend } from "../lib/legend.js";
+import { Chip, PLATE, plateHeight, StatePlate } from "../lib/marks.js";
+import { renderWires, wiresFor } from "../lib/wires.js";
+const KINDS = [
+  "start",
+  "active",
+  "waiting",
+  "decision",
+  "success",
+  "failure",
+  "neutral",
+  "external"
+];
+const GRID = { originX: 132, originY: 56, colW: 158, gapX: 62, laneGap: 52, stateH: 68 };
+const SECONDARY_LANE_OFFSET = 2;
+function textRoom(width, kind) {
+  return kind === "decision" ? width * 0.56 : width - PLATE.padX * 2;
+}
+function LifecycleFigure({
+  spec,
+  className,
+  legend = "auto",
+  cards = true,
+  heading = true,
+  activeIds,
+  onSelectNode
+}) {
+  const uid = useId().replace(/:/g, "");
+  useSpecIdentity(spec, "LifecycleFigure");
+  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 lanes = spec.lanes ?? [{ id: "", label: "" }];
+  const laneIndex = new Map(lanes.map((lane, index) => [lane.id, index]));
+  const laneOf = (state) => {
+    if (!state.lane) return { index: 0, known: true };
+    const index = laneIndex.get(state.lane);
+    if (index !== void 0) return { index, known: true };
+    warnUnknownLane("LifecycleFigure", state.id, state.lane);
+    return { index: 0, known: false };
+  };
+  const boxes = /* @__PURE__ */ new Map();
+  const placed = spec.states.map((state) => {
+    const w = state.width ?? (state.type === "decision" ? GRID.colW + 34 : GRID.colW);
+    const lines = wrapText(state.label, TYPE.label, textRoom(w, state.type), 2);
+    const h = plateHeight(lines.length, Boolean(state.sublabel), true, state.height ?? GRID.stateH);
+    const { index: lane, known } = laneOf(state);
+    const col = state.col + (lane === 0 ? 0 : SECONDARY_LANE_OFFSET);
+    const x = GRID.originX + col * (GRID.colW + GRID.gapX);
+    const y = GRID.originY + lane * (GRID.stateH + GRID.laneGap) + (state.yOffset ?? 0);
+    const box = { x, y, w, h };
+    boxes.set(state.id, box);
+    return { state, box, lane, known };
+  });
+  const rail = placed.filter((entry) => entry.lane === 0 && entry.known).sort((a, b) => a.state.col - b.state.col);
+  const declared = new Set((spec.transitions ?? []).map((t) => `${t.from}\u2192${t.to}`));
+  const implied = rail.slice(0, -1).map((entry, index) => ({ from: entry.state.id, to: rail[index + 1].state.id })).filter((edge) => !declared.has(`${edge.from}\u2192${edge.to}`));
+  const transitions = liveEdges("LifecycleFigure", spec.transitions, (id) => boxes.has(id));
+  const wires = [
+    ...wiresFor(implied, boxes, () => ({ weight: 2.1 })),
+    ...wiresFor(transitions, boxes)
+  ];
+  const { paths, labels } = renderWires(wires, uid);
+  const extent = inflate(union([...boxes.values()]) ?? { x: 0, y: 0, w: 500, h: 240 }, 34);
+  const active = activeIds && activeIds.length > 0 ? new Set(activeIds) : null;
+  const laneRules = lanes.map((lane, index) => {
+    const inside = placed.filter((entry) => entry.lane === index).map((entry) => entry.box);
+    const span = union(inside);
+    return span ? { lane, y: span.y - 16, x1: extent.x + 18, x2: span.x + span.w } : null;
+  });
+  const artwork = /* @__PURE__ */ jsxs(Fragment, { children: [
+    laneRules.map(
+      (rule, index) => rule && rule.lane.label ? /* @__PURE__ */ jsxs("g", { "aria-hidden": "true", children: [
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: `M ${round(rule.x1)} ${round(rule.y)} H ${round(rule.x2)}`,
+            className: "stroke-(--diagram-rule) [stroke-width:1]"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "text",
+          {
+            x: round(rule.x1),
+            y: round(rule.y - 7),
+            className: "fill-(--diagram-ink-3) font-mono [font-size:10.5px] [letter-spacing:0.08em] uppercase",
+            children: rule.lane.label
+          }
+        )
+      ] }, `lane-${index}`) : null
+    ),
+    paths,
+    placed.map(({ state, box }) => {
+      const lines = wrapText(state.label, TYPE.label, textRoom(box.w, state.type), 2);
+      const bottomReserve = state.tag ? 20 : 0;
+      const blockHeight = lines.length * (TYPE.label * 1.25) + (state.sublabel ? TYPE.sub * 1.5 : 0);
+      const top = box.y + (box.h - bottomReserve - blockHeight) / 2;
+      const reversed = state.type === "start";
+      const centreX = box.x + box.w / 2;
+      return /* @__PURE__ */ jsx(
+        "g",
+        {
+          "data-node": state.id,
+          "data-active": active?.has(state.id) ? "" : void 0,
+          className: cn(
+            active && !active.has(state.id) && "opacity-25",
+            // The one figure that builds its own group instead of using
+            // NodePlate, and so the one figure whose selectable plates showed
+            // a text caret over a control.
+            onSelectNode && "cursor-pointer"
+          ),
+          onClick: onSelectNode ? () => onSelectNode(state.id) : void 0,
+          children: /* @__PURE__ */ jsxs(StatePlate, { box, kind: state.type, children: [
+            active?.has(state.id) && /* @__PURE__ */ jsx(
+              "rect",
+              {
+                x: round(box.x) - 3,
+                y: round(box.y) - 3,
+                width: round(box.w) + 6,
+                height: round(box.h) + 6,
+                rx: 9,
+                fill: "none",
+                className: "stroke-(--accent) [stroke-width:1.4]"
+              }
+            ),
+            state.step && /* @__PURE__ */ jsx(
+              "text",
+              {
+                x: round(box.x + 10),
+                y: round(box.y + 15),
+                className: reversed ? "fill-(--diagram-plate-ink) font-mono [font-size:9.5px] opacity-70" : "fill-(--diagram-ink-3) font-mono [font-size:9.5px]",
+                children: state.step
+              }
+            ),
+            lines.map((line, index) => /* @__PURE__ */ jsx(
+              "text",
+              {
+                x: round(centreX),
+                y: round(top + (index + 1) * TYPE.label * 1.25 - 3.5),
+                textAnchor: "middle",
+                className: reversed ? "fill-(--diagram-plate-ink) font-sans [font-size:13px]" : "fill-(--diagram-ink) font-sans [font-size:13px]",
+                children: line
+              },
+              index
+            )),
+            state.sublabel && /* @__PURE__ */ jsx(
+              "text",
+              {
+                x: round(centreX),
+                y: round(top + lines.length * TYPE.label * 1.25 + TYPE.sub),
+                textAnchor: "middle",
+                className: reversed ? "fill-(--diagram-plate-ink) font-mono [font-size:10.5px] opacity-70" : "fill-(--diagram-ink-3) font-mono [font-size:10.5px]",
+                children: state.sublabel
+              }
+            ),
+            state.tag && /* @__PURE__ */ jsx(Chip, { x: centreX, y: box.y + box.h - 9, text: state.tag, align: "middle" })
+          ] })
+        },
+        state.id
+      );
+    }),
+    labels
+  ] });
+  const used = [...new Set(spec.states.map((state) => state.type))];
+  const bands = spec.lanes && spec.lanes.length > 0 ? lanes.map((lane, index) => ({
+    kind: "Lane",
+    label: lane.label,
+    ids: placed.filter((entry) => entry.lane === index).sort((a, b) => a.state.col - b.state.col).map((entry) => entry.state.id)
+  })) : void 0;
+  const widest = Math.max(
+    0,
+    ...lanes.map((lane) => textWidth(lane.label, TYPE.band))
+  );
+  const railLeft = Math.min(extent.x, GRID.originX - widest - 30);
+  return {
+    extent: { ...extent, x: railLeft, w: extent.w + (extent.x - railLeft) },
+    artwork,
+    nodes: spec.states.map((state) => ({
+      id: state.id,
+      label: state.label,
+      sublabel: state.sublabel,
+      kind: state.type,
+      // Printed in the plate's corner, inside artwork a screen reader is told
+      // to skip — and a step number is the reading order of the machine.
+      detail: state.step ? `step ${state.step}` : void 0
+    })),
+    // The implied rail is DRAWN, so it is published. Leaving it out gave the
+    // text equivalent the exceptions and none of the spine: a five-state
+    // machine reading as four disconnected states and one error path.
+    edges: [
+      ...implied.map((edge) => ({ from: edge.from, to: edge.to })),
+      ...transitions.map((transition) => ({
+        from: transition.from,
+        to: transition.to,
+        label: [transition.label, transition.note].filter(Boolean).join(" \u2014 ") || void 0
+      }))
+    ],
+    bands,
+    legend: stateLegend(
+      resolveLegend(used, spec.meta.legend?.mode, KINDS, spec.meta.legend?.entries),
+      spec.meta.legend?.entries
+    )
+  };
+}
+var LifecycleFigure_default = LifecycleFigure;
+export {
+  LifecycleFigure,
+  LifecycleFigure_default as default
+};
+//# sourceMappingURL=LifecycleFigure.js.map

package/dist/diagrams/LifecycleFigure/LifecycleFigure.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/diagrams/LifecycleFigure/LifecycleFigure.tsx"],"sourcesContent":["'use client'\n\nimport { useId, useMemo } from 'react'\nimport { cn } from '../../lib/cn'\nimport { liveEdges, useSpecIdentity, warnUnknownLane } from '../lib/dev'\nimport { DiagramFrame, type FigureBand, type FigureChrome, type FigureModel } from '../lib/frame'\nimport { inflate, round, TYPE, textWidth, union, wrapText, type Box } from '../lib/geometry'\nimport { resolveLegend, stateLegend } from '../lib/legend'\nimport { Chip, PLATE, plateHeight, StatePlate } from '../lib/marks'\nimport { renderWires, wiresFor } from '../lib/wires'\nimport type { LifecycleSpec, LifecycleStateKind } from '../spec'\n\nconst KINDS: LifecycleStateKind[] = [\n  'start',\n  'active',\n  'waiting',\n  'decision',\n  'success',\n  'failure',\n  'neutral',\n  'external',\n]\n\nconst GRID = { originX: 132, originY: 56, colW: 158, gapX: 62, laneGap: 52, stateH: 68 }\n\n/**\n * How far a secondary lane's columns are shifted along the main rail.\n *\n * archify's lifecycle contract: the first lane holds the ordered phases in\n * columns 0–4, and a secondary lane's column N sits exactly beneath main column\n * N + 2. It is a convention rather than a derivation — the alternative would be\n * making every author restate a column index they already implied — and\n * honouring it is what keeps `executing → approval` a straight vertical drop\n * instead of a dogleg across two unrelated states.\n */\nconst SECONDARY_LANE_OFFSET = 2\n\n/** How much horizontal room a state's own shape leaves for its name. */\nfunction textRoom(width: number, kind: LifecycleStateKind): number {\n  return kind === 'decision' ? width * 0.56 : width - PLATE.padX * 2\n}\n\nexport interface LifecycleFigureProps extends FigureChrome {\n  spec: LifecycleSpec\n}\n\n/**\n * A state machine: what something can BE, and what moves it.\n *\n * The one figure here that spends colour, and it spends exactly the two tokens\n * this system reserves for state: `--success` on a terminal success,\n * `--danger` on a terminal failure. Nothing else in the package is allowed\n * those two, and a lifecycle diagram is the case they were reserved for — the\n * whole point of the picture is which end a run came out of.\n *\n * The other six kinds are carried by shape, so a greyscale print loses the two\n * outcomes' hue and keeps every other distinction: a start is a filled cap, a\n * decision is a diamond, a wait is a dashed frame, an external is a plate with\n * a cut corner.\n *\n * A RECOVERABLE FAILURE IS A FAILURE WITH A WAY BACK. `type: \"failure\"` says\n * how a state is drawn; a transition OUT of it is what says whether the run is\n * over. A retryable error and a terminal one look identical until you follow\n * the arrows, which is correct — the difference between them is a real edge in\n * the machine, not an adjective on a box.\n */\nexport function LifecycleFigure({\n  spec,\n  className,\n  legend = 'auto',\n  cards = true,\n  heading = true,\n  activeIds,\n  onSelectNode,\n}: LifecycleFigureProps) {\n  const uid = useId().replace(/:/g, '')\n  useSpecIdentity(spec, 'LifecycleFigure')\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: LifecycleSpec,\n  uid: string,\n  activeIds: string[] | undefined,\n  onSelectNode: ((id: string) => void) | undefined,\n): FigureModel {\n  const lanes = spec.lanes ?? [{ id: '', label: '' }]\n  const laneIndex = new Map(lanes.map((lane, index) => [lane.id, index]))\n\n  // A state that names no lane belongs to the first one — that is the documented\n  // default. A state that names a lane NOTHING DECLARES is a different thing:\n  // it also lands in the first lane, and the first lane is the main rail, so a\n  // typo does not merely misplace a box, it enrols the state in the spine and\n  // invents a transition the machine does not have. Hence the flag, and hence\n  // being told.\n  const laneOf = (state: { id: string; lane?: string }) => {\n    if (!state.lane) return { index: 0, known: true }\n    const index = laneIndex.get(state.lane)\n    if (index !== undefined) return { index, known: true }\n    warnUnknownLane('LifecycleFigure', state.id, state.lane)\n    return { index: 0, known: false }\n  }\n\n  const boxes = new Map<string, Box>()\n  const placed = spec.states.map((state) => {\n    // A diamond is only half as wide as its box where the label crosses it, so\n    // it gets a wider box for the same words. Sizing it like a rectangle is\n    // what pushes a decision's name out past its own two sloping edges.\n    const w = state.width ?? (state.type === 'decision' ? GRID.colW + 34 : GRID.colW)\n    const lines = wrapText(state.label, TYPE.label, textRoom(w, state.type), 2)\n    const h = plateHeight(lines.length, Boolean(state.sublabel), true, state.height ?? GRID.stateH)\n\n    const { index: lane, known } = laneOf(state)\n    const col = state.col + (lane === 0 ? 0 : SECONDARY_LANE_OFFSET)\n\n    // `yOffset` is applied, the way `WorkflowFigure` and `DataflowFigure` apply\n    // theirs. One field name meaning \"nudge this off its row\" in two figures\n    // and \"nothing\" in a third is not a safety measure — it is a specification\n    // that typechecks and draws something else, with nothing in the type to say\n    // which of the two it will be. A nudge that puts two plates on top of each\n    // other is visible; a nudge silently dropped is not.\n    const x = GRID.originX + col * (GRID.colW + GRID.gapX)\n    const y = GRID.originY + lane * (GRID.stateH + GRID.laneGap) + (state.yOffset ?? 0)\n\n    const box: Box = { x, y, w, h }\n    boxes.set(state.id, box)\n    return { state, box, lane, known }\n  })\n\n  // The main rail is IMPLICIT, and has to be. archify's lifecycle contract\n  // gives the first lane's columns 0..4 to the ordered phases and does not ask\n  // an author to restate `queued → planning → executing` as transitions —\n  // those are the diagram's spine, not its exceptions. Without them drawn, the\n  // top row reads as five unconnected boxes.\n  const rail = placed\n    .filter((entry) => entry.lane === 0 && entry.known)\n    .sort((a, b) => a.state.col - b.state.col)\n  const declared = new Set((spec.transitions ?? []).map((t) => `${t.from}→${t.to}`))\n  const implied = rail\n    .slice(0, -1)\n    .map((entry, index) => ({ from: entry.state.id, to: rail[index + 1]!.state.id }))\n    .filter((edge) => !declared.has(`${edge.from}→${edge.to}`))\n\n  const transitions = liveEdges('LifecycleFigure', spec.transitions, (id) => boxes.has(id))\n  const wires = [\n    ...wiresFor(implied, boxes, () => ({ weight: 2.1 })),\n    ...wiresFor(transitions, boxes),\n  ]\n  const { paths, labels } = renderWires(wires, uid)\n\n  const extent = inflate(union([...boxes.values()]) ?? { x: 0, y: 0, w: 500, h: 240 }, 34)\n  const active = activeIds && activeIds.length > 0 ? new Set(activeIds) : null\n\n  // A lane's rule spans what it actually holds. Drawing it across the figure's\n  // full width would claim a band reaches columns nothing in it occupies.\n  const laneRules = lanes.map((lane, index) => {\n    const inside = placed.filter((entry) => entry.lane === index).map((entry) => entry.box)\n    const span = union(inside)\n    return span ? { lane, y: span.y - 16, x1: extent.x + 18, x2: span.x + span.w } : null\n  })\n\n  const artwork = (\n    <>\n      {laneRules.map((rule, index) =>\n        rule && rule.lane.label ? (\n          <g key={`lane-${index}`} aria-hidden=\"true\">\n            <path\n              d={`M ${round(rule.x1)} ${round(rule.y)} H ${round(rule.x2)}`}\n              className=\"stroke-(--diagram-rule) [stroke-width:1]\"\n            />\n            <text\n              x={round(rule.x1)}\n              y={round(rule.y - 7)}\n              className=\"fill-(--diagram-ink-3) font-mono [font-size:10.5px] [letter-spacing:0.08em] uppercase\"\n            >\n              {rule.lane.label}\n            </text>\n          </g>\n        ) : null,\n      )}\n\n      {paths}\n\n      {placed.map(({ state, box }) => {\n        const lines = wrapText(state.label, TYPE.label, textRoom(box.w, state.type), 2)\n        const bottomReserve = state.tag ? 20 : 0\n        const blockHeight = lines.length * (TYPE.label * 1.25) + (state.sublabel ? TYPE.sub * 1.5 : 0)\n        const top = box.y + (box.h - bottomReserve - blockHeight) / 2\n        const reversed = state.type === 'start'\n        const centreX = box.x + box.w / 2\n\n        return (\n          <g\n            key={state.id}\n            data-node={state.id}\n            data-active={active?.has(state.id) ? '' : undefined}\n            className={cn(\n              active && !active.has(state.id) && 'opacity-25',\n              // The one figure that builds its own group instead of using\n              // NodePlate, and so the one figure whose selectable plates showed\n              // a text caret over a control.\n              onSelectNode && 'cursor-pointer',\n            )}\n            onClick={onSelectNode ? () => onSelectNode(state.id) : undefined}\n          >\n            <StatePlate box={box} kind={state.type}>\n              {active?.has(state.id) && (\n                <rect\n                  x={round(box.x) - 3}\n                  y={round(box.y) - 3}\n                  width={round(box.w) + 6}\n                  height={round(box.h) + 6}\n                  rx={9}\n                  fill=\"none\"\n                  className=\"stroke-(--accent) [stroke-width:1.4]\"\n                />\n              )}\n              {state.step && (\n                <text\n                  x={round(box.x + 10)}\n                  y={round(box.y + 15)}\n                  className={\n                    reversed\n                      ? 'fill-(--diagram-plate-ink) font-mono [font-size:9.5px] opacity-70'\n                      : 'fill-(--diagram-ink-3) font-mono [font-size:9.5px]'\n                  }\n                >\n                  {state.step}\n                </text>\n              )}\n              {lines.map((line, index) => (\n                <text\n                  key={index}\n                  x={round(centreX)}\n                  y={round(top + (index + 1) * TYPE.label * 1.25 - 3.5)}\n                  textAnchor=\"middle\"\n                  className={\n                    reversed\n                      ? 'fill-(--diagram-plate-ink) font-sans [font-size:13px]'\n                      : 'fill-(--diagram-ink) font-sans [font-size:13px]'\n                  }\n                >\n                  {line}\n                </text>\n              ))}\n              {state.sublabel && (\n                <text\n                  x={round(centreX)}\n                  y={round(top + lines.length * TYPE.label * 1.25 + TYPE.sub)}\n                  textAnchor=\"middle\"\n                  className={\n                    reversed\n                      ? 'fill-(--diagram-plate-ink) font-mono [font-size:10.5px] opacity-70'\n                      : 'fill-(--diagram-ink-3) font-mono [font-size:10.5px]'\n                  }\n                >\n                  {state.sublabel}\n                </text>\n              )}\n              {state.tag && <Chip x={centreX} y={box.y + box.h - 9} text={state.tag} align=\"middle\" />}\n            </StatePlate>\n          </g>\n        )\n      })}\n\n      {labels}\n\n    </>\n  )\n\n  const used = [...new Set(spec.states.map((state) => state.type))]\n\n  // Lanes group the list only when the specification actually has them: the\n  // single unnamed lane a laneless spec falls back to would publish a band\n  // called nothing, around every state in the figure.\n  const bands: FigureBand[] | undefined =\n    spec.lanes && spec.lanes.length > 0\n      ? lanes.map((lane, index) => ({\n          kind: 'Lane',\n          label: lane.label,\n          ids: placed\n            .filter((entry) => entry.lane === index)\n            .sort((a, b) => a.state.col - b.state.col)\n            .map((entry) => entry.state.id),\n        }))\n      : undefined\n  const widest = Math.max(\n    0,\n    ...lanes.map((lane) => textWidth(lane.label, TYPE.band)),\n  )\n\n  // Widening the frame to the LEFT for the lane names has to widen it, not\n  // slide it: moving `x` without adding the same amount to `w` trims exactly\n  // that much off the right-hand edge, which cost the last column of states.\n  const railLeft = Math.min(extent.x, GRID.originX - widest - 30)\n\n  return {\n    extent: { ...extent, x: railLeft, w: extent.w + (extent.x - railLeft) },\n    artwork,\n    nodes: spec.states.map((state) => ({\n      id: state.id,\n      label: state.label,\n      sublabel: state.sublabel,\n      kind: state.type,\n      // Printed in the plate's corner, inside artwork a screen reader is told\n      // to skip — and a step number is the reading order of the machine.\n      detail: state.step ? `step ${state.step}` : undefined,\n    })),\n    // The implied rail is DRAWN, so it is published. Leaving it out gave the\n    // text equivalent the exceptions and none of the spine: a five-state\n    // machine reading as four disconnected states and one error path.\n    edges: [\n      ...implied.map((edge) => ({ from: edge.from, to: edge.to })),\n      ...transitions.map((transition) => ({\n        from: transition.from,\n        to: transition.to,\n        label: [transition.label, transition.note].filter(Boolean).join(' — ') || undefined,\n      })),\n    ],\n    bands,\n    legend: stateLegend(\n      resolveLegend(used, spec.meta.legend?.mode, KINDS, spec.meta.legend?.entries),\n      spec.meta.legend?.entries,\n    ),\n  }\n}\n\nexport default LifecycleFigure\n"],"mappings":"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","names":[]}

package/dist/diagrams/SequenceFigure/SequenceFigure.d.ts

@@ -0,0 +1,38 @@
+import * as react from 'react';
+import { FigureChrome } from '../lib/frame.js';
+import { SequenceSpec } from '../spec.js';
+import '../lib/geometry.js';
+
+interface SequenceFigureProps extends FigureChrome {
+    spec: SequenceSpec;
+}
+/**
+ * A call chain over time: who asks whom, in what order, and what comes back.
+ *
+ * The one diagram type here whose vertical axis MEANS something. Every other
+ * figure's y is layout; a sequence's y is time, which is why a message carries
+ * an explicit `y` rather than an index — two calls 8 units apart happened
+ * together, and two 200 apart did not, and an evenly spaced list of messages
+ * would erase that distinction while looking tidier.
+ *
+ * **Lifelines** are hairlines, not solid rules, because they are the axis
+ * rather than the content. A lifeline drawn at the weight of a message is a
+ * diagram where seven vertical lines compete with twelve horizontal ones.
+ *
+ * **Activation bars** say who is BUSY, which is the fact a sequence diagram
+ * carries that a list of calls does not — the third participant's bar
+ * overlapping the second's is the reason to draw them at all.
+ *
+ * **Segments** band the axis into phases — request, fallback, response —
+ * printed as a rule with a mono caption rather than as a tinted panel, for the
+ * same reason architecture boundaries are: a second ground inside the figure
+ * would sit under every message label's mask.
+ *
+ * A `return` message is dashed AND takes an open arrowhead. Two signals rather
+ * than one, because the reply is the thing a reader most often needs to pick
+ * out of a dense trace, and a dash alone is doing the same work as `dashed`
+ * already does for an asynchronous call.
+ */
+declare function SequenceFigure({ spec, className, legend, cards, heading, activeIds, onSelectNode, }: SequenceFigureProps): react.JSX.Element;
+
+export { SequenceFigure, type SequenceFigureProps, SequenceFigure as default };

package/dist/diagrams/SequenceFigure/SequenceFigure.js

@@ -0,0 +1,261 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useId, useMemo } from "react";
+import { liveEdges, useSpecIdentity, warnUnknownRef } from "../lib/dev.js";
+import { DiagramFrame } from "../lib/frame.js";
+import { round, textWidth, TYPE } from "../lib/geometry.js";
+import { resolveLegend, variantLegend } from "../lib/legend.js";
+import { EdgeLabel, NodePlate } from "../lib/marks.js";
+const HEAD = { y: 44, h: 62, w: 148, gap: 40 };
+const VARIANTS = ["default", "emphasis", "security", "dashed", "return"];
+function SequenceFigure({
+  spec,
+  className,
+  legend = "auto",
+  cards = true,
+  heading = true,
+  activeIds,
+  onSelectNode
+}) {
+  const uid = useId().replace(/:/g, "");
+  useSpecIdentity(spec, "SequenceFigure");
+  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 natural = Math.max(
+    HEAD.w,
+    ...spec.participants.map(
+      (participant) => Math.max(
+        textWidth(participant.label, TYPE.label),
+        textWidth(participant.sublabel ?? "", TYPE.sub)
+      ) + 44
+    )
+  );
+  const colW = spec.meta.column_fit === "spread" ? natural : HEAD.w;
+  const pitch = colW + HEAD.gap;
+  const centre = /* @__PURE__ */ new Map();
+  const heads = spec.participants.map((participant, index) => {
+    const x = 40 + index * pitch;
+    centre.set(participant.id, x + colW / 2);
+    return { participant, box: { x, y: HEAD.y, w: colW, h: HEAD.h } };
+  });
+  const messages = liveEdges("SequenceFigure", spec.messages, (id) => centre.has(id));
+  const lastY = Math.max(
+    HEAD.y + HEAD.h + 80,
+    ...messages.map((message) => message.y),
+    ...(spec.activations ?? []).map((activation) => activation.to),
+    ...(spec.segments ?? []).map((segment) => segment.to)
+  );
+  const lifelineBottom = lastY + 42;
+  const active = activeIds && activeIds.length > 0 ? new Set(activeIds) : null;
+  const width = 40 + spec.participants.length * pitch - HEAD.gap + 40;
+  const artwork = /* @__PURE__ */ jsxs(Fragment, { children: [
+    (spec.segments ?? []).map((segment, index) => /* @__PURE__ */ jsxs("g", { "aria-hidden": "true", children: [
+      /* @__PURE__ */ jsx(
+        "path",
+        {
+          d: `M 20 ${round(segment.from)} H ${round(width - 20)}`,
+          className: "stroke-(--diagram-rule) [stroke-width:1] [stroke-dasharray:2_4]"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "rect",
+        {
+          x: 20,
+          y: round(segment.from - 7),
+          width: round(textWidth(segment.label, TYPE.band) + 14),
+          height: 14,
+          className: "fill-(--diagram-surface)"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "text",
+        {
+          x: 27,
+          y: round(segment.from + 3.5),
+          className: "fill-(--diagram-ink-3) font-mono [font-size:10.5px] [letter-spacing:0.08em] uppercase",
+          children: segment.label
+        }
+      )
+    ] }, `segment-${index}`)),
+    heads.map(({ participant, box }) => /* @__PURE__ */ jsx(
+      "path",
+      {
+        d: `M ${round(box.x + colW / 2)} ${round(box.y + box.h)} V ${round(lifelineBottom)}`,
+        className: "stroke-(--diagram-rule) [stroke-width:1]",
+        "aria-hidden": "true"
+      },
+      `life-${participant.id}`
+    )),
+    (spec.activations ?? []).map((activation, index) => {
+      const x = centre.get(activation.participant);
+      if (x === void 0) return null;
+      return /* @__PURE__ */ jsx(
+        "rect",
+        {
+          x: round(x - 5),
+          y: round(activation.from),
+          width: 10,
+          height: round(Math.max(6, activation.to - activation.from)),
+          rx: 2,
+          className: "fill-(--diagram-node-2) stroke-(--diagram-rule)",
+          strokeWidth: 1,
+          "aria-hidden": "true"
+        },
+        `act-${index}`
+      );
+    }),
+    messages.map((message, index) => {
+      const from = centre.get(message.from);
+      const to = centre.get(message.to);
+      if (from === void 0 || to === void 0) return null;
+      const forward = to >= from;
+      const inset = 6;
+      const x1 = forward ? from + inset : from - inset;
+      const x2 = forward ? to - inset : to + inset;
+      return /* @__PURE__ */ jsx(
+        "path",
+        {
+          d: `M ${round(x1)} ${round(message.y)} H ${round(x2)}`,
+          fill: "none",
+          "data-edge": message.id,
+          markerEnd: `url(#${_uid}-${messageMarker(message.variant)})`,
+          className: messageClasses(message.variant),
+          ...messageStroke(message.variant)
+        },
+        message.id ?? `msg-${index}`
+      );
+    }),
+    heads.map(({ participant, box }) => /* @__PURE__ */ jsx(
+      NodePlate,
+      {
+        nodeId: participant.id,
+        box,
+        label: participant.label,
+        sublabel: participant.sublabel,
+        kind: participant.type,
+        active: active?.has(participant.id),
+        dimmed: active ? !active.has(participant.id) : false,
+        onSelect: onSelectNode ? () => onSelectNode(participant.id) : void 0
+      },
+      participant.id
+    )),
+    messages.map((message, index) => {
+      const from = centre.get(message.from);
+      const to = centre.get(message.to);
+      if (from === void 0 || to === void 0 || !message.label) return null;
+      return /* @__PURE__ */ jsx(
+        EdgeLabel,
+        {
+          x: (from + to) / 2,
+          y: message.y,
+          axis: "x",
+          text: message.label
+        },
+        `label-${message.id ?? index}`
+      );
+    })
+  ] });
+  const used = [
+    ...new Set(messages.map((message) => message.variant ?? "default"))
+  ];
+  const across = (from, to) => messages.filter((message) => message.y >= from && message.y <= to && message.label).map((message) => message.label);
+  const named = new Map(spec.participants.map((p) => [p.id, p.label]));
+  return {
+    extent: { x: 0, y: 0, w: width, h: lifelineBottom + 24 },
+    artwork,
+    nodes: spec.participants.map((participant) => ({
+      id: participant.id,
+      label: participant.label,
+      sublabel: participant.sublabel,
+      kind: participant.type
+    })),
+    edges: messages.map((message) => ({
+      from: message.from,
+      to: message.to,
+      label: message.label
+    })),
+    // Segments band the TIME axis and activations sit on a lifeline, so neither
+    // groups the participants; both are statements the picture makes and the
+    // list did not carry at all.
+    notes: [
+      ...(spec.segments ?? []).map((segment) => {
+        const held = across(segment.from, segment.to);
+        return held.length > 0 ? `Phase ${segment.label} covers ${held.join(", ")}.` : `Phase ${segment.label} covers no message this figure labels.`;
+      }),
+      ...(spec.activations ?? []).flatMap((activation) => {
+        const who = named.get(activation.participant);
+        if (who === void 0) {
+          warnUnknownRef(
+            "SequenceFigure",
+            "activations[].participant",
+            activation.participant,
+            "the bar is drawn on no lifeline at all"
+          );
+          return [];
+        }
+        const held = across(activation.from, activation.to);
+        if (held.length > 1) return [`${who} is busy from ${held[0]} to ${held.at(-1)}.`];
+        if (held.length === 1) return [`${who} is busy during ${held[0]}.`];
+        return [`${who} is busy for a span none of the messages name.`];
+      })
+    ],
+    legend: variantLegend(
+      resolveLegend(used, spec.meta.legend?.mode, VARIANTS, spec.meta.legend?.entries),
+      spec.meta.legend?.entries
+    )
+  };
+}
+function messageMarker(variant) {
+  if (variant === "emphasis") return "arrow-strong";
+  if (variant === "return") return "arrow-open";
+  return "arrow";
+}
+function messageClasses(variant) {
+  switch (variant) {
+    case "emphasis":
+      return "stroke-(--diagram-line-strong)";
+    case "return":
+    case "dashed":
+      return "stroke-(--diagram-line-soft)";
+    default:
+      return "stroke-(--diagram-line)";
+  }
+}
+function messageStroke(variant) {
+  switch (variant) {
+    case "emphasis":
+      return { strokeWidth: 2 };
+    case "security":
+      return { strokeWidth: 1.4, strokeDasharray: "6 3" };
+    case "return":
+      return { strokeWidth: 1.2, strokeDasharray: "4 3.5" };
+    case "dashed":
+      return { strokeWidth: 1.2, strokeDasharray: "3 3" };
+    default:
+      return { strokeWidth: 1.4 };
+  }
+}
+var SequenceFigure_default = SequenceFigure;
+export {
+  SequenceFigure,
+  SequenceFigure_default as default
+};
+//# sourceMappingURL=SequenceFigure.js.map

package/dist/diagrams/SequenceFigure/SequenceFigure.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/diagrams/SequenceFigure/SequenceFigure.tsx"],"sourcesContent":["'use client'\n\nimport { useId, useMemo } from 'react'\nimport { liveEdges, useSpecIdentity, warnUnknownRef } from '../lib/dev'\nimport { DiagramFrame, type FigureChrome, type FigureModel } from '../lib/frame'\nimport { round, textWidth, TYPE, type Box } from '../lib/geometry'\nimport { resolveLegend, variantLegend } from '../lib/legend'\nimport { EdgeLabel, NodePlate } from '../lib/marks'\nimport type { SequenceSpec, Variant } from '../spec'\n\nconst HEAD = { y: 44, h: 62, w: 148, gap: 40 }\nconst VARIANTS: (Variant | 'return')[] = ['default', 'emphasis', 'security', 'dashed', 'return']\n\nexport interface SequenceFigureProps extends FigureChrome {\n  spec: SequenceSpec\n}\n\n/**\n * A call chain over time: who asks whom, in what order, and what comes back.\n *\n * The one diagram type here whose vertical axis MEANS something. Every other\n * figure's y is layout; a sequence's y is time, which is why a message carries\n * an explicit `y` rather than an index — two calls 8 units apart happened\n * together, and two 200 apart did not, and an evenly spaced list of messages\n * would erase that distinction while looking tidier.\n *\n * **Lifelines** are hairlines, not solid rules, because they are the axis\n * rather than the content. A lifeline drawn at the weight of a message is a\n * diagram where seven vertical lines compete with twelve horizontal ones.\n *\n * **Activation bars** say who is BUSY, which is the fact a sequence diagram\n * carries that a list of calls does not — the third participant's bar\n * overlapping the second's is the reason to draw them at all.\n *\n * **Segments** band the axis into phases — request, fallback, response —\n * printed as a rule with a mono caption rather than as a tinted panel, for the\n * same reason architecture boundaries are: a second ground inside the figure\n * would sit under every message label's mask.\n *\n * A `return` message is dashed AND takes an open arrowhead. Two signals rather\n * than one, because the reply is the thing a reader most often needs to pick\n * out of a dense trace, and a dash alone is doing the same work as `dashed`\n * already does for an asynchronous call.\n */\nexport function SequenceFigure({\n  spec,\n  className,\n  legend = 'auto',\n  cards = true,\n  heading = true,\n  activeIds,\n  onSelectNode,\n}: SequenceFigureProps) {\n  const uid = useId().replace(/:/g, '')\n  useSpecIdentity(spec, 'SequenceFigure')\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: SequenceSpec,\n  _uid: string,\n  activeIds: string[] | undefined,\n  onSelectNode: ((id: string) => void) | undefined,\n): FigureModel {\n  // A participant's box has to hold its own name. `spread` lets the widest\n  // label set the pitch for every column, which is the layout archify reaches\n  // for when a fixed 86-unit column would clip a meaningful name — and\n  // shortening the name instead is not a repair, it is a different diagram.\n  const natural = Math.max(\n    HEAD.w,\n    ...spec.participants.map(\n      (participant) =>\n        Math.max(\n          textWidth(participant.label, TYPE.label),\n          textWidth(participant.sublabel ?? '', TYPE.sub),\n        ) + 44,\n    ),\n  )\n  const colW = spec.meta.column_fit === 'spread' ? natural : HEAD.w\n  const pitch = colW + HEAD.gap\n\n  const centre = new Map<string, number>()\n  const heads = spec.participants.map((participant, index) => {\n    const x = 40 + index * pitch\n    centre.set(participant.id, x + colW / 2)\n    return { participant, box: { x, y: HEAD.y, w: colW, h: HEAD.h } as Box }\n  })\n\n  // A message to a participant nothing declares has no column to be drawn\n  // between, so the artwork returned null for it and the summary list went on\n  // reporting a call to a raw id — the picture and its text equivalent\n  // disagreeing about what the exchange contains. Both halves read this.\n  const messages = liveEdges('SequenceFigure', spec.messages, (id) => centre.has(id))\n\n  const lastY = Math.max(\n    HEAD.y + HEAD.h + 80,\n    ...messages.map((message) => message.y),\n    ...(spec.activations ?? []).map((activation) => activation.to),\n    ...(spec.segments ?? []).map((segment) => segment.to),\n  )\n  const lifelineBottom = lastY + 42\n\n  const active = activeIds && activeIds.length > 0 ? new Set(activeIds) : null\n  const width = 40 + spec.participants.length * pitch - HEAD.gap + 40\n\n  const artwork = (\n    <>\n      {/* Segments first: they are the ground the whole exchange happens on. */}\n      {(spec.segments ?? []).map((segment, index) => (\n        <g key={`segment-${index}`} aria-hidden=\"true\">\n          <path\n            d={`M 20 ${round(segment.from)} H ${round(width - 20)}`}\n            className=\"stroke-(--diagram-rule) [stroke-width:1] [stroke-dasharray:2_4]\"\n          />\n          <rect\n            x={20}\n            y={round(segment.from - 7)}\n            width={round(textWidth(segment.label, TYPE.band) + 14)}\n            height={14}\n            className=\"fill-(--diagram-surface)\"\n          />\n          <text\n            x={27}\n            y={round(segment.from + 3.5)}\n            className=\"fill-(--diagram-ink-3) font-mono [font-size:10.5px] [letter-spacing:0.08em] uppercase\"\n          >\n            {segment.label}\n          </text>\n        </g>\n      ))}\n\n      {/* Lifelines. */}\n      {heads.map(({ participant, box }) => (\n        <path\n          key={`life-${participant.id}`}\n          d={`M ${round(box.x + colW / 2)} ${round(box.y + box.h)} V ${round(lifelineBottom)}`}\n          className=\"stroke-(--diagram-rule) [stroke-width:1]\"\n          aria-hidden=\"true\"\n        />\n      ))}\n\n      {/* Activation bars. */}\n      {(spec.activations ?? []).map((activation, index) => {\n        const x = centre.get(activation.participant)\n        if (x === undefined) return null\n\n        return (\n          <rect\n            key={`act-${index}`}\n            x={round(x - 5)}\n            y={round(activation.from)}\n            width={10}\n            height={round(Math.max(6, activation.to - activation.from))}\n            rx={2}\n            className=\"fill-(--diagram-node-2) stroke-(--diagram-rule)\"\n            strokeWidth={1}\n            aria-hidden=\"true\"\n          />\n        )\n      })}\n\n      {/* Messages. */}\n      {messages.map((message, index) => {\n        const from = centre.get(message.from)\n        const to = centre.get(message.to)\n        if (from === undefined || to === undefined) return null\n        const forward = to >= from\n        const inset = 6\n        const x1 = forward ? from + inset : from - inset\n        const x2 = forward ? to - inset : to + inset\n        return (\n          <path\n            key={message.id ?? `msg-${index}`}\n            d={`M ${round(x1)} ${round(message.y)} H ${round(x2)}`}\n            fill=\"none\"\n            data-edge={message.id}\n            markerEnd={`url(#${_uid}-${messageMarker(message.variant)})`}\n            className={messageClasses(message.variant)}\n            {...messageStroke(message.variant)}\n          />\n        )\n      })}\n\n      {/* Participants, over the lines that end at them. */}\n      {heads.map(({ participant, box }) => (\n        <NodePlate\n          key={participant.id}\n          nodeId={participant.id}\n          box={box}\n          label={participant.label}\n          sublabel={participant.sublabel}\n          kind={participant.type}\n          active={active?.has(participant.id)}\n          dimmed={active ? !active.has(participant.id) : false}\n          onSelect={onSelectNode ? () => onSelectNode(participant.id) : undefined}\n        />\n      ))}\n\n      {/* Message wording last, so its mask covers every line. */}\n      {messages.map((message, index) => {\n        const from = centre.get(message.from)\n        const to = centre.get(message.to)\n        if (from === undefined || to === undefined || !message.label) return null\n        return (\n          <EdgeLabel\n            key={`label-${message.id ?? index}`}\n            x={(from + to) / 2}\n            y={message.y}\n            axis=\"x\"\n            text={message.label}\n          />\n        )\n      })}\n    </>\n  )\n\n  const used = [\n    ...new Set(messages.map((message) => message.variant ?? 'default')),\n  ] as (Variant | 'return')[]\n\n  // The messages a span of the axis holds, which is what both a segment caption\n  // and an activation bar are actually saying. Naming them by the calls inside\n  // them rather than by their y bounds is the only version of that fact a\n  // reader who cannot see the axis can use.\n  const across = (from: number, to: number) =>\n    messages\n      .filter((message) => message.y >= from && message.y <= to && message.label)\n      .map((message) => message.label as string)\n\n  const named = new Map(spec.participants.map((p) => [p.id, p.label]))\n\n  return {\n    extent: { x: 0, y: 0, w: width, h: lifelineBottom + 24 },\n    artwork,\n    nodes: spec.participants.map((participant) => ({\n      id: participant.id,\n      label: participant.label,\n      sublabel: participant.sublabel,\n      kind: participant.type,\n    })),\n    edges: messages.map((message) => ({\n      from: message.from,\n      to: message.to,\n      label: message.label,\n    })),\n    // Segments band the TIME axis and activations sit on a lifeline, so neither\n    // groups the participants; both are statements the picture makes and the\n    // list did not carry at all.\n    notes: [\n      ...(spec.segments ?? []).map((segment) => {\n        const held = across(segment.from, segment.to)\n        return held.length > 0\n          ? `Phase ${segment.label} covers ${held.join(', ')}.`\n          : `Phase ${segment.label} covers no message this figure labels.`\n      }),\n      ...(spec.activations ?? []).flatMap((activation) => {\n        const who = named.get(activation.participant)\n        if (who === undefined) {\n          warnUnknownRef(\n            'SequenceFigure',\n            'activations[].participant',\n            activation.participant,\n            'the bar is drawn on no lifeline at all',\n          )\n          return []\n        }\n        const held = across(activation.from, activation.to)\n        if (held.length > 1) return [`${who} is busy from ${held[0]} to ${held.at(-1)}.`]\n        if (held.length === 1) return [`${who} is busy during ${held[0]}.`]\n        return [`${who} is busy for a span none of the messages name.`]\n      }),\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\n/** Which arrowhead a message ends in. */\nfunction messageMarker(\n  variant: SequenceSpec['messages'][number]['variant'],\n): 'arrow' | 'arrow-strong' | 'arrow-open' {\n  if (variant === 'emphasis') return 'arrow-strong'\n  if (variant === 'return') return 'arrow-open'\n  return 'arrow'\n}\n\n/** A message's colour. Geometry goes through attributes — see `edgeClasses`. */\nfunction messageClasses(variant: SequenceSpec['messages'][number]['variant']): string {\n  switch (variant) {\n    case 'emphasis':\n      return 'stroke-(--diagram-line-strong)'\n    case 'return':\n    case 'dashed':\n      return 'stroke-(--diagram-line-soft)'\n    default:\n      return 'stroke-(--diagram-line)'\n  }\n}\n\n/** A message's width and dash pattern. Heavier than a map's line: it IS the content. */\nfunction messageStroke(variant: SequenceSpec['messages'][number]['variant']): {\n  strokeWidth: number\n  strokeDasharray?: string\n} {\n  switch (variant) {\n    case 'emphasis':\n      return { strokeWidth: 2 }\n    case 'security':\n      return { strokeWidth: 1.4, strokeDasharray: '6 3' }\n    case 'return':\n      return { strokeWidth: 1.2, strokeDasharray: '4 3.5' }\n    case 'dashed':\n      return { strokeWidth: 1.2, strokeDasharray: '3 3' }\n    default:\n      return { strokeWidth: 1.4 }\n  }\n}\n\nexport default SequenceFigure\n"],"mappings":"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","names":[]}

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

@@ -0,0 +1,36 @@
+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,
+ * and so does `async`. `branch` adds no stroke of its own: a branch is an edge
+ * the main path does not list, and that is already the difference on the page.
+ */
+declare function WorkflowFigure({ spec, className, legend, cards, heading, activeIds, onSelectNode, }: WorkflowFigureProps): react.JSX.Element;
+
+export { WorkflowFigure, type WorkflowFigureProps, WorkflowFigure as default };