@misoto22/design 0.6.1 → 0.7.0

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 { 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":[]}

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,231 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useId, useMemo } from "react";
+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, "");
+  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 lastY = Math.max(
+    HEAD.y + HEAD.h + 80,
+    ...spec.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}`
+      );
+    }),
+    spec.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
+    )),
+    spec.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(spec.messages.map((message) => message.variant ?? "default"))
+  ];
+  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: spec.messages.map((message) => ({
+      from: message.from,
+      to: message.to,
+      label: message.label
+    })),
+    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 { 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":[]}

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

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

package/dist/diagrams/WorkflowFigure/WorkflowFigure.js

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

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

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

package/dist/diagrams/index.d.ts

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