@misoto22/design 0.7.0 → 0.8.0

package/dist/diagrams/LifecycleFigure/LifecycleFigure.js

@@ -1,6 +1,8 @@
 "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";
@@ -31,6 +33,7 @@ function LifecycleFigure({
   onSelectNode
 }) {
   const uid = useId().replace(/:/g, "");
+  useSpecIdentity(spec, "LifecycleFigure");
   const model = useMemo(
     () => buildModel(spec, uid, activeIds, onSelectNode),
     [spec, uid, activeIds, onSelectNode]
@@ -53,25 +56,33 @@ function LifecycleFigure({
 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 lane = laneIndex.get(state.lane ?? "") ?? 0;
+    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);
+    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 };
+    return { state, box, lane, known };
   });
-  const rail = placed.filter((entry) => entry.lane === 0).sort((a, b) => a.state.col - b.state.col);
+  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(spec.transitions, boxes)
+    ...wiresFor(transitions, boxes)
   ];
   const { paths, labels } = renderWires(wires, uid);
   const extent = inflate(union([...boxes.values()]) ?? { x: 0, y: 0, w: 500, h: 240 }, 34);
@@ -115,7 +126,13 @@ function buildModel(spec, uid, activeIds, onSelectNode) {
         {
           "data-node": state.id,
           "data-active": active?.has(state.id) ? "" : void 0,
-          className: active && !active.has(state.id) ? "opacity-25" : 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(
@@ -169,6 +186,11 @@ function buildModel(spec, uid, activeIds, onSelectNode) {
     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))
@@ -181,13 +203,23 @@ function buildModel(spec, uid, activeIds, onSelectNode) {
       id: state.id,
       label: state.label,
       sublabel: state.sublabel,
-      kind: state.type
-    })),
-    edges: (spec.transitions ?? []).map((transition) => ({
-      from: transition.from,
-      to: transition.to,
-      label: [transition.label, transition.note].filter(Boolean).join(" \u2014 ") || void 0
+      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

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/diagrams/LifecycleFigure/LifecycleFigure.tsx"],"sourcesContent":["'use client'\n\nimport { useId, useMemo } from 'react'\nimport { DiagramFrame, 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  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  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 lane = laneIndex.get(state.lane ?? '') ?? 0\n    const col = state.col + (lane === 0 ? 0 : SECONDARY_LANE_OFFSET)\n\n    // `yOffset` is deliberately NOT applied. It is an absolute nudge measured in\n    // archify's own lane heights, and this renderer's lanes are a different\n    // depth — so a 78-unit push that cleared a neighbour there drops a state\n    // squarely on top of the lane below here. Two overlapping plates are worse\n    // than a state sitting on its lane's centre line, which is where the\n    // specification put it before the nudge.\n    const x = GRID.originX + col * (GRID.colW + GRID.gapX)\n    const y = GRID.originY + lane * (GRID.stateH + GRID.laneGap)\n\n    const box: Box = { x, y, w, h }\n    boxes.set(state.id, box)\n    return { state, box, lane }\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)\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 wires = [\n    ...wiresFor(implied, boxes, () => ({ weight: 2.1 })),\n    ...wiresFor(spec.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={active && !active.has(state.id) ? 'opacity-25' : undefined}\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  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    })),\n    edges: (spec.transitions ?? []).map((transition) => ({\n      from: transition.from,\n      to: transition.to,\n      label: [transition.label, transition.note].filter(Boolean).join(' — ') || undefined,\n    })),\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":[]}
+{"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.js

@@ -1,6 +1,7 @@
 "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";
@@ -17,6 +18,7 @@ function SequenceFigure({
   onSelectNode
 }) {
   const uid = useId().replace(/:/g, "");
+  useSpecIdentity(spec, "SequenceFigure");
   const model = useMemo(
     () => buildModel(spec, uid, activeIds, onSelectNode),
     [spec, uid, activeIds, onSelectNode]
@@ -54,9 +56,10 @@ function buildModel(spec, _uid, activeIds, onSelectNode) {
     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,
-    ...spec.messages.map((message) => message.y),
+    ...messages.map((message) => message.y),
     ...(spec.activations ?? []).map((activation) => activation.to),
     ...(spec.segments ?? []).map((segment) => segment.to)
   );
@@ -119,7 +122,7 @@ function buildModel(spec, _uid, activeIds, onSelectNode) {
         `act-${index}`
       );
     }),
-    spec.messages.map((message, 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;
@@ -154,7 +157,7 @@ function buildModel(spec, _uid, activeIds, onSelectNode) {
       },
       participant.id
     )),
-    spec.messages.map((message, index) => {
+    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;
@@ -171,8 +174,10 @@ function buildModel(spec, _uid, activeIds, onSelectNode) {
     })
   ] });
   const used = [
-    ...new Set(spec.messages.map((message) => message.variant ?? "default"))
+    ...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,
@@ -182,11 +187,36 @@ function buildModel(spec, _uid, activeIds, onSelectNode) {
       sublabel: participant.sublabel,
       kind: participant.type
     })),
-    edges: spec.messages.map((message) => ({
+    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

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/diagrams/SequenceFigure/SequenceFigure.tsx"],"sourcesContent":["'use client'\n\nimport { useId, useMemo } from 'react'\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  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  const lastY = Math.max(\n    HEAD.y + HEAD.h + 80,\n    ...spec.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        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      {spec.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      {spec.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(spec.messages.map((message) => message.variant ?? 'default')),\n  ] as (Variant | 'return')[]\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: spec.messages.map((message) => ({\n      from: message.from,\n      to: message.to,\n      label: message.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\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":[]}
+{"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

@@ -27,7 +27,9 @@ interface WorkflowFigureProps extends FigureChrome {
  * 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.
+ * 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;
 

package/dist/diagrams/WorkflowFigure/WorkflowFigure.js

@@ -1,12 +1,18 @@
 "use client";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useId, useMemo } from "react";
+import { liveEdges, useSpecIdentity, warnUnknownLane } from "../lib/dev.js";
 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 ROLE_VARIANT = {
+  async: "dashed",
+  error: "dashed"
+};
+const variantOf = (edge) => edge.variant ?? (edge.role ? ROLE_VARIANT[edge.role] : void 0);
 const GRID = {
   /** The gutter the lane names live in. */
   railW: 118,
@@ -26,6 +32,7 @@ function WorkflowFigure({
   onSelectNode
 }) {
   const uid = useId().replace(/:/g, "");
+  useSpecIdentity(spec, "WorkflowFigure");
   const model = useMemo(
     () => buildModel(spec, uid, activeIds, onSelectNode),
     [spec, uid, activeIds, onSelectNode]
@@ -55,12 +62,18 @@ const spanBox = (fromCol, toCol, y, 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 laneOf = (id, owner) => {
+    const index = laneIndex.get(id);
+    if (index !== void 0) return index;
+    warnUnknownLane("WorkflowFigure", owner, id);
+    return 0;
+  };
   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 index = laneOf(node.lane, node.id);
     const box = {
       x: colX(node.col),
       y: laneY(index) + (GRID.laneH - h) / 2 + (node.yOffset ?? 0),
@@ -74,9 +87,12 @@ function buildModel(spec, uid, activeIds, onSelectNode) {
   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 edges = liveEdges("WorkflowFigure", spec.edges, (id) => boxes.has(id));
+  const wires = wiresFor(edges, boxes, (edge) => {
     const onMain = mainPairs.has(`${edge.from}\u2192${edge.to}`);
+    const variant = variantOf(edge);
     return {
+      edge: variant === edge.variant ? edge : { ...edge, variant },
       weight: onMain ? 2.1 : void 0,
       open: edge.role === "return"
     };
@@ -84,15 +100,15 @@ function buildModel(spec, uid, activeIds, onSelectNode) {
   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;
+    const span2 = union(inside);
+    const left2 = span2 ? span2.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,
+        w: (span2 ? span2.x + span2.w + 14 : colX(0) + GRID.colW) - left2,
         h: GRID.laneH + 16
       }
     };
@@ -109,26 +125,30 @@ function buildModel(spec, uid, activeIds, onSelectNode) {
   );
   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
-    )),
+    (spec.phases ?? []).map((phase) => {
+      const span2 = spanBox(phase.fromCol, Math.max(phase.fromCol, phase.toCol), headerY + 8, 0);
+      const dashed = phase.variant === "security" || phase.variant === "dashed";
+      return /* @__PURE__ */ jsxs("g", { "data-phase": phase.id, "aria-hidden": "true", children: [
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: `M ${round(span2.x)} ${round(span2.y)} H ${round(span2.x + span2.w)}`,
+            className: phase.variant === "emphasis" ? "stroke-(--diagram-rule-hard)" : "stroke-(--diagram-rule)",
+            strokeWidth: phase.variant === "emphasis" ? 1.6 : 1,
+            strokeDasharray: dashed ? "7 4" : void 0
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "text",
+          {
+            x: round(span2.x),
+            y: round(headerY),
+            className: "fill-(--diagram-ink-3) font-mono [font-size:9px] [letter-spacing:0.14em] uppercase",
+            children: phase.label
+          }
+        )
+      ] }, phase.id);
+    }),
     laneBoxes.map(({ lane, box }) => /* @__PURE__ */ jsxs("g", { "aria-hidden": "true", children: [
       lane.variant === "exception" && /* @__PURE__ */ jsx(
         "rect",
@@ -153,7 +173,7 @@ function buildModel(spec, uid, activeIds, onSelectNode) {
       )
     ] }, lane.id)),
     (spec.groups ?? []).map((group) => {
-      const index = laneIndex.get(group.lane) ?? 0;
+      const index = laneOf(group.lane, group.id);
       return /* @__PURE__ */ jsx(
         BandFrame,
         {
@@ -182,7 +202,12 @@ function buildModel(spec, uid, activeIds, onSelectNode) {
     )),
     labels
   ] });
-  const used = [...new Set((spec.edges ?? []).map((edge) => edge.variant ?? "default"))];
+  const used = [...new Set(edges.map((edge) => variantOf(edge) ?? "default"))];
+  const bands = spec.lanes.map((lane, index) => ({
+    kind: lane.variant === "exception" ? "Exception lane" : "Lane",
+    label: lane.label,
+    ids: placed.filter((entry) => entry.lane === index).sort((a, b) => a.node.col - b.node.col).map((entry) => entry.node.id)
+  }));
   return {
     extent,
     artwork,
@@ -192,17 +217,40 @@ function buildModel(spec, uid, activeIds, onSelectNode) {
       sublabel: node.sublabel,
       kind: node.type
     })),
-    edges: (spec.edges ?? []).map((edge) => ({
+    edges: edges.map((edge) => ({
       from: edge.from,
       to: edge.to,
       label: edge.label
     })),
+    bands,
+    // A phase and a group both cut ACROSS the lanes, so neither can be the
+    // list's structure without publishing a node twice. They are sentences.
+    notes: [
+      ...(spec.phases ?? []).map(
+        (phase) => span("Phase", phase.label, phase.fromCol, phase.toCol, spec.nodes, "")
+      ),
+      ...(spec.groups ?? []).map(
+        (group) => span(
+          "Group",
+          group.label,
+          group.fromCol,
+          group.toCol,
+          spec.nodes.filter((node) => node.lane === group.lane),
+          ` in lane ${spec.lanes[laneIndex.get(group.lane) ?? 0]?.label ?? group.lane}`
+        )
+      )
+    ],
     legend: variantLegend(
       resolveLegend(used, spec.meta.legend?.mode, VARIANTS, spec.meta.legend?.entries),
       spec.meta.legend?.entries
     )
   };
 }
+function span(kind, label, fromCol, toCol, nodes, where) {
+  const inside = nodes.filter((node) => node.col >= fromCol && node.col <= toCol);
+  const held = inside.length > 0 ? `: ${inside.map((node) => node.label).join(", ")}` : "";
+  return `${kind} ${label} covers columns ${fromCol} to ${toCol}${where}${held}.`;
+}
 var WorkflowFigure_default = WorkflowFigure;
 export {
   WorkflowFigure,