@misoto22/design 0.6.1 → 0.8.0

package/dist/diagrams/WorkflowFigure/WorkflowFigure.js

@@ -0,0 +1,259 @@
+"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,
+  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, "");
+  useSpecIdentity(spec, "WorkflowFigure");
+  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 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 = laneOf(node.lane, node.id);
+    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 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"
+    };
+  });
+  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 span2 = union(inside);
+    const left2 = span2 ? span2.x - 14 : GRID.railW - 14;
+    return {
+      lane,
+      index,
+      box: {
+        x: left2,
+        y: laneY(index) - 8,
+        w: (span2 ? span2.x + span2.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 ?? []).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",
+        {
+          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 = laneOf(group.lane, group.id);
+      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(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,
+    nodes: spec.nodes.map((node) => ({
+      id: node.id,
+      label: node.label,
+      sublabel: node.sublabel,
+      kind: node.type
+    })),
+    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,
+  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 { liveEdges, useSpecIdentity, warnUnknownLane } from '../lib/dev'\nimport { DiagramFrame, type FigureBand, 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, WorkflowEdgeRole, WorkflowSpec } from '../spec'\n\nconst VARIANTS: (Variant | 'return')[] = ['default', 'emphasis', 'security', 'dashed']\n\n/**\n * What a ROLE does to the line, where the author did not say it with a variant.\n *\n * `role` is about meaning and `variant` is about drawing, and for three of the\n * five roles the two answers coincide: an asynchronous hop and a path to the\n * exception lane are both the quiet line this system already has. `main` and\n * `branch` are deliberately absent — a main edge is heavier because `mainPath`\n * lists it, and a branch is simply an edge that is not on it, so both are\n * already carried by weight rather than by a second dash pattern.\n *\n * An explicit `variant` always wins: the author drew it on purpose.\n */\nconst ROLE_VARIANT: Partial<Record<WorkflowEdgeRole, Variant>> = {\n  async: 'dashed',\n  error: 'dashed',\n}\n\n/** How a line is drawn, once its role has had its say. */\nconst variantOf = (edge: WorkflowEdge): Variant | undefined =>\n  edge.variant ?? (edge.role ? ROLE_VARIANT[edge.role] : undefined)\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 * and so does `async`. `branch` adds no stroke of its own: a branch is an edge\n * the main path does not list, and that is already the difference on the page.\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  useSpecIdentity(spec, 'WorkflowFigure')\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  // A lane id nothing declares still resolves to a row — there is nowhere else\n  // to put the box — so the only thing that separates \"I meant lane 0\" from\n  // \"the renderer gave up\" is being told.\n  const laneOf = (id: string, owner: string) => {\n    const index = laneIndex.get(id)\n    if (index !== undefined) return index\n    warnUnknownLane('WorkflowFigure', owner, id)\n    return 0\n  }\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 = laneOf(node.lane, node.id)\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 edges = liveEdges('WorkflowFigure', spec.edges, (id) => boxes.has(id))\n  const wires = wiresFor(edges, boxes, (edge: WorkflowEdge): Partial<Wire> => {\n    const onMain = mainPairs.has(`${edge.from}→${edge.to}`)\n    const variant = variantOf(edge)\n    return {\n      edge: variant === edge.variant ? edge : { ...edge, variant },\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 rule per phase, drawn across the columns that phase\n          claims. A single rule spanning the figure made `toCol` a field the\n          type accepted and the picture could not show — two phases starting in\n          the same column printed their captions on top of each other, and a\n          phase's extent was not a thing a reader could see. */}\n      {(spec.phases ?? []).map((phase) => {\n        const span = spanBox(phase.fromCol, Math.max(phase.fromCol, phase.toCol), headerY + 8, 0)\n        const dashed = phase.variant === 'security' || phase.variant === 'dashed'\n        return (\n          <g key={phase.id} data-phase={phase.id} aria-hidden=\"true\">\n            <path\n              d={`M ${round(span.x)} ${round(span.y)} H ${round(span.x + span.w)}`}\n              className={\n                phase.variant === 'emphasis'\n                  ? 'stroke-(--diagram-rule-hard)'\n                  : 'stroke-(--diagram-rule)'\n              }\n              strokeWidth={phase.variant === 'emphasis' ? 1.6 : 1}\n              strokeDasharray={dashed ? '7 4' : undefined}\n            />\n            <text\n              x={round(span.x)}\n              y={round(headerY)}\n              className=\"fill-(--diagram-ink-3) font-mono [font-size:9px] [letter-spacing:0.14em] uppercase\"\n            >\n              {phase.label}\n            </text>\n          </g>\n        )\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 = laneOf(group.lane, group.id)\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(edges.map((edge) => variantOf(edge) ?? 'default'))]\n\n  // The lanes ARE the list's structure, not a phrase repeated on every row.\n  // WHO does a step is half of where the step sits, and it was drawn only in a\n  // gutter inside artwork a screen reader is told to skip.\n  const bands: FigureBand[] = spec.lanes.map((lane, index) => ({\n    kind: lane.variant === 'exception' ? 'Exception lane' : 'Lane',\n    label: lane.label,\n    ids: placed\n      .filter((entry) => entry.lane === index)\n      .sort((a, b) => a.node.col - b.node.col)\n      .map((entry) => entry.node.id),\n  }))\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: edges.map((edge) => ({\n      from: edge.from,\n      to: edge.to,\n      label: edge.label,\n    })),\n    bands,\n    // A phase and a group both cut ACROSS the lanes, so neither can be the\n    // list's structure without publishing a node twice. They are sentences.\n    notes: [\n      ...(spec.phases ?? []).map((phase) =>\n        span('Phase', phase.label, phase.fromCol, phase.toCol, spec.nodes, ''),\n      ),\n      ...(spec.groups ?? []).map((group) =>\n        span(\n          'Group',\n          group.label,\n          group.fromCol,\n          group.toCol,\n          spec.nodes.filter((node) => node.lane === group.lane),\n          ` in lane ${spec.lanes[laneIndex.get(group.lane) ?? 0]?.label ?? group.lane}`,\n        ),\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/** One phase or group, written out: what it covers, and what is inside it. */\nfunction span(\n  kind: string,\n  label: string,\n  fromCol: number,\n  toCol: number,\n  nodes: { col: number; label: string }[],\n  where: string,\n): string {\n  const inside = nodes.filter((node) => node.col >= fromCol && node.col <= toCol)\n  const held = inside.length > 0 ? `: ${inside.map((node) => node.label).join(', ')}` : ''\n  return `${kind} ${label} covers columns ${fromCol} to ${toCol}${where}${held}.`\n}\n\nexport default WorkflowFigure\n"],"mappings":";AA0FI,SAoHA,UApHA,KA8HM,YA9HN;AAxFJ,SAAS,OAAO,eAAe;AAC/B,SAAS,WAAW,iBAAiB,uBAAuB;AAC5D,SAAS,oBAA0E;AACnF,SAAS,SAAS,OAAO,WAAW,MAAM,OAAO,gBAA0B;AAC3E,SAAS,eAAe,qBAAqB;AAC7C,SAAS,WAAW,WAAW,OAAO,mBAAmB;AACzD,SAAS,aAAa,gBAA2B;AAGjD,MAAM,WAAmC,CAAC,WAAW,YAAY,YAAY,QAAQ;AAcrF,MAAM,eAA2D;AAAA,EAC/D,OAAO;AAAA,EACP,OAAO;AACT;AAGA,MAAM,YAAY,CAAC,SACjB,KAAK,YAAY,KAAK,OAAO,aAAa,KAAK,IAAI,IAAI;AAEzD,MAAM,OAAO;AAAA;AAAA,EAEX,OAAO;AAAA,EACP,SAAS;AAAA,EACT,MAAM;AAAA,EACN,MAAM;AAAA,EACN,OAAO;AAAA,EACP,SAAS;AACX;AA+BO,SAAS,eAAe;AAAA,EAC7B;AAAA,EACA;AAAA,EACA,SAAS;AAAA,EACT,QAAQ;AAAA,EACR,UAAU;AAAA,EACV;AAAA,EACA;AACF,GAAwB;AACtB,QAAM,MAAM,MAAM,EAAE,QAAQ,MAAM,EAAE;AACpC,kBAAgB,MAAM,gBAAgB;AACtC,QAAM,QAAQ;AAAA,IACZ,MAAM,WAAW,MAAM,KAAK,WAAW,YAAY;AAAA,IACnD,CAAC,MAAM,KAAK,WAAW,YAAY;AAAA,EACrC;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAM,KAAK;AAAA,MACX;AAAA,MACA,OAAO,KAAK;AAAA,MACZ,WAAW;AAAA,MACX;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAAA,EACF;AAEJ;AAGA,MAAM,OAAO,CAAC,QAAgB,KAAK,QAAQ,OAAO,KAAK,OAAO,KAAK;AACnE,MAAM,UAAU,CAAC,SAAiB,OAAe,GAAW,OAAoB;AAAA,EAC9E,GAAG,KAAK,OAAO;AAAA,EACf;AAAA,EACA,GAAG,KAAK,KAAK,IAAI,KAAK,OAAO,KAAK,OAAO;AAAA,EACzC;AACF;AAEA,SAAS,WACP,MACA,KACA,WACA,cACa;AACb,QAAM,YAAY,IAAI,IAAI,KAAK,MAAM,IAAI,CAAC,MAAM,UAAU,CAAC,KAAK,IAAI,KAAK,CAAC,CAAC;AAC3E,QAAM,QAAQ,CAAC,UAAkB,KAAK,UAAU,SAAS,KAAK,QAAQ,KAAK;AAK3E,QAAM,SAAS,CAAC,IAAY,UAAkB;AAC5C,UAAM,QAAQ,UAAU,IAAI,EAAE;AAC9B,QAAI,UAAU,OAAW,QAAO;AAChC,oBAAgB,kBAAkB,OAAO,EAAE;AAC3C,WAAO;AAAA,EACT;AAEA,QAAM,QAAQ,oBAAI,IAAiB;AACnC,QAAM,SAAS,KAAK,MAAM,IAAI,CAAC,SAAS;AACtC,UAAM,IAAI,KAAK,SAAS,KAAK;AAC7B,UAAM,QAAQ,SAAS,KAAK,OAAO,KAAK,OAAO,IAAI,MAAM,OAAO,GAAG,CAAC;AACpE,UAAM,IAAI,YAAY,MAAM,QAAQ,QAAQ,KAAK,QAAQ,GAAG,MAAM,KAAK,UAAU,CAAC;AAClF,UAAM,QAAQ,OAAO,KAAK,MAAM,KAAK,EAAE;AAEvC,UAAM,MAAW;AAAA,MACf,GAAG,KAAK,KAAK,GAAG;AAAA,MAChB,GAAG,MAAM,KAAK,KAAK,KAAK,QAAQ,KAAK,KAAK,KAAK,WAAW;AAAA,MAC1D;AAAA,MACA;AAAA,IACF;AACA,UAAM,IAAI,KAAK,IAAI,GAAG;AACtB,WAAO,EAAE,MAAM,KAAK,MAAM,MAAM;AAAA,EAClC,CAAC;AAID,QAAM,YAAY,oBAAI,IAAY;AAClC,WAAS,QAAQ,GAAG,SAAS,KAAK,UAAU,UAAU,KAAK,GAAG,SAAS,GAAG;AACxE,cAAU,IAAI,GAAG,KAAK,SAAU,KAAK,CAAC,SAAI,KAAK,SAAU,QAAQ,CAAC,CAAC,EAAE;AAAA,EACvE;AAEA,QAAM,QAAQ,UAAU,kBAAkB,KAAK,OAAO,CAAC,OAAO,MAAM,IAAI,EAAE,CAAC;AAC3E,QAAM,QAAQ,SAAS,OAAO,OAAO,CAAC,SAAsC;AAC1E,UAAM,SAAS,UAAU,IAAI,GAAG,KAAK,IAAI,SAAI,KAAK,EAAE,EAAE;AACtD,UAAM,UAAU,UAAU,IAAI;AAC9B,WAAO;AAAA,MACL,MAAM,YAAY,KAAK,UAAU,OAAO,EAAE,GAAG,MAAM,QAAQ;AAAA,MAC3D,QAAQ,SAAS,MAAM;AAAA,MACvB,MAAM,KAAK,SAAS;AAAA,IACtB;AAAA,EACF,CAAC;AACD,QAAM,EAAE,OAAO,OAAO,IAAI,YAAY,OAAO,GAAG;AAKhD,QAAM,YAAY,KAAK,MAAM,IAAI,CAAC,MAAM,UAAU;AAChD,UAAM,SAAS,OAAO,OAAO,CAAC,UAAU,MAAM,SAAS,KAAK,EAAE,IAAI,CAAC,UAAU,MAAM,GAAG;AACtF,UAAMA,QAAO,MAAM,MAAM;AACzB,UAAMC,QAAOD,QAAOA,MAAK,IAAI,KAAK,KAAK,QAAQ;AAC/C,WAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA,KAAK;AAAA,QACH,GAAGC;AAAA,QACH,GAAG,MAAM,KAAK,IAAI;AAAA,QAClB,IAAID,QAAOA,MAAK,IAAIA,MAAK,IAAI,KAAK,KAAK,CAAC,IAAI,KAAK,QAAQC;AAAA,QACzD,GAAG,KAAK,QAAQ;AAAA,MAClB;AAAA,IACF;AAAA,EACF,CAAC;AAED,QAAM,QAAQ,CAAC,GAAG,MAAM,OAAO,GAAG,GAAG,UAAU,IAAI,CAAC,UAAU,MAAM,GAAG,CAAC;AACxE,QAAM,UAAU,KAAK,UAAU;AAO/B,QAAM,YAAY,KAAK,IAAI,GAAG,GAAG,KAAK,MAAM,IAAI,CAAC,SAAS,UAAU,KAAK,OAAO,CAAC,CAAC,CAAC;AACnF,QAAM,MAAM,MAAM,KAAK,KAAK,EAAE,GAAG,GAAG,GAAG,GAAG,GAAG,KAAK,GAAG,IAAI;AACzD,QAAM,OAAO,KAAK,IAAI,IAAI,GAAG,KAAK,QAAQ,KAAK,SAAS;AACxD,QAAM,MAAM,KAAK,IAAI,IAAI,GAAG,UAAU,EAAE;AACxC,QAAM,SAAS;AAAA,IACb,EAAE,GAAG,MAAM,GAAG,KAAK,GAAG,IAAI,IAAI,IAAI,IAAI,MAAM,GAAG,IAAI,IAAI,IAAI,IAAI,IAAI;AAAA,IACnE;AAAA,EACF;AACA,QAAM,SAAS,aAAa,UAAU,SAAS,IAAI,IAAI,IAAI,SAAS,IAAI;AAExE,QAAM,UACJ,iCAMI;AAAA,UAAK,UAAU,CAAC,GAAG,IAAI,CAAC,UAAU;AAClC,YAAMD,QAAO,QAAQ,MAAM,SAAS,KAAK,IAAI,MAAM,SAAS,MAAM,KAAK,GAAG,UAAU,GAAG,CAAC;AACxF,YAAM,SAAS,MAAM,YAAY,cAAc,MAAM,YAAY;AACjE,aACE,qBAAC,OAAiB,cAAY,MAAM,IAAI,eAAY,QAClD;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,GAAG,KAAK,MAAMA,MAAK,CAAC,CAAC,IAAI,MAAMA,MAAK,CAAC,CAAC,MAAM,MAAMA,MAAK,IAAIA,MAAK,CAAC,CAAC;AAAA,YAClE,WACE,MAAM,YAAY,aACd,iCACA;AAAA,YAEN,aAAa,MAAM,YAAY,aAAa,MAAM;AAAA,YAClD,iBAAiB,SAAS,QAAQ;AAAA;AAAA,QACpC;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACC,GAAG,MAAMA,MAAK,CAAC;AAAA,YACf,GAAG,MAAM,OAAO;AAAA,YAChB,WAAU;AAAA,YAET,gBAAM;AAAA;AAAA,QACT;AAAA,WAjBM,MAAM,EAkBd;AAAA,IAEJ,CAAC;AAAA,IAGA,UAAU,IAAI,CAAC,EAAE,MAAM,IAAI,MAC1B,qBAAC,OAAgB,eAAY,QAC1B;AAAA,WAAK,YAAY,eAChB;AAAA,QAAC;AAAA;AAAA,UACC,GAAG,MAAM,IAAI,CAAC;AAAA,UACd,GAAG,MAAM,IAAI,CAAC;AAAA,UACd,OAAO,MAAM,IAAI,CAAC;AAAA,UAClB,QAAQ,MAAM,IAAI,CAAC;AAAA,UACnB,IAAI;AAAA,UACJ,WAAU;AAAA;AAAA,MACZ;AAAA,MAEF;AAAA,QAAC;AAAA;AAAA,UACC,GAAG,MAAM,KAAK,QAAQ,EAAE;AAAA,UACxB,GAAG,MAAM,IAAI,IAAI,IAAI,IAAI,IAAI,CAAC;AAAA,UAC9B,YAAW;AAAA,UACX,WAAU;AAAA,UAET,eAAK;AAAA;AAAA,MACR;AAAA,SAlBM,KAAK,EAmBb,CACD;AAAA,KAGC,KAAK,UAAU,CAAC,GAAG,IAAI,CAAC,UAAU;AAClC,YAAM,QAAQ,OAAO,MAAM,MAAM,MAAM,EAAE;AACzC,aACE;AAAA,QAAC;AAAA;AAAA,UAEC,KAAK,QAAQ,MAAM,SAAS,MAAM,OAAO,MAAM,KAAK,IAAI,GAAG,KAAK,QAAQ,CAAC;AAAA,UACzE,OAAO,MAAM;AAAA,UACb,QAAQ,MAAM,YAAY;AAAA;AAAA,QAHrB,MAAM;AAAA,MAIb;AAAA,IAEJ,CAAC;AAAA,IAEA;AAAA,IAEA,OAAO,IAAI,CAAC,EAAE,MAAM,IAAI,MACvB;AAAA,MAAC;AAAA;AAAA,QAEC,QAAQ,KAAK;AAAA,QACb;AAAA,QACA,OAAO,KAAK;AAAA,QACZ,UAAU,KAAK;AAAA,QACf,KAAK,KAAK;AAAA,QACV,MAAM,KAAK;AAAA,QACX,QAAQ,QAAQ,IAAI,KAAK,EAAE;AAAA,QAC3B,QAAQ,SAAS,CAAC,OAAO,IAAI,KAAK,EAAE,IAAI;AAAA,QACxC,UAAU,eAAe,MAAM,aAAa,KAAK,EAAE,IAAI;AAAA;AAAA,MATlD,KAAK;AAAA,IAUZ,CACD;AAAA,IAEA;AAAA,KACH;AAGF,QAAM,OAAO,CAAC,GAAG,IAAI,IAAI,MAAM,IAAI,CAAC,SAAS,UAAU,IAAI,KAAK,SAAS,CAAC,CAAC;AAK3E,QAAM,QAAsB,KAAK,MAAM,IAAI,CAAC,MAAM,WAAW;AAAA,IAC3D,MAAM,KAAK,YAAY,cAAc,mBAAmB;AAAA,IACxD,OAAO,KAAK;AAAA,IACZ,KAAK,OACF,OAAO,CAAC,UAAU,MAAM,SAAS,KAAK,EACtC,KAAK,CAAC,GAAG,MAAM,EAAE,KAAK,MAAM,EAAE,KAAK,GAAG,EACtC,IAAI,CAAC,UAAU,MAAM,KAAK,EAAE;AAAA,EACjC,EAAE;AAEF,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA,OAAO,KAAK,MAAM,IAAI,CAAC,UAAU;AAAA,MAC/B,IAAI,KAAK;AAAA,MACT,OAAO,KAAK;AAAA,MACZ,UAAU,KAAK;AAAA,MACf,MAAM,KAAK;AAAA,IACb,EAAE;AAAA,IACF,OAAO,MAAM,IAAI,CAAC,UAAU;AAAA,MAC1B,MAAM,KAAK;AAAA,MACX,IAAI,KAAK;AAAA,MACT,OAAO,KAAK;AAAA,IACd,EAAE;AAAA,IACF;AAAA;AAAA;AAAA,IAGA,OAAO;AAAA,MACL,IAAI,KAAK,UAAU,CAAC,GAAG;AAAA,QAAI,CAAC,UAC1B,KAAK,SAAS,MAAM,OAAO,MAAM,SAAS,MAAM,OAAO,KAAK,OAAO,EAAE;AAAA,MACvE;AAAA,MACA,IAAI,KAAK,UAAU,CAAC,GAAG;AAAA,QAAI,CAAC,UAC1B;AAAA,UACE;AAAA,UACA,MAAM;AAAA,UACN,MAAM;AAAA,UACN,MAAM;AAAA,UACN,KAAK,MAAM,OAAO,CAAC,SAAS,KAAK,SAAS,MAAM,IAAI;AAAA,UACpD,YAAY,KAAK,MAAM,UAAU,IAAI,MAAM,IAAI,KAAK,CAAC,GAAG,SAAS,MAAM,IAAI;AAAA,QAC7E;AAAA,MACF;AAAA,IACF;AAAA,IACA,QAAQ;AAAA,MACN,cAAc,MAAM,KAAK,KAAK,QAAQ,MAAM,UAAU,KAAK,KAAK,QAAQ,OAAO;AAAA,MAC/E,KAAK,KAAK,QAAQ;AAAA,IACpB;AAAA,EACF;AACF;AAGA,SAAS,KACP,MACA,OACA,SACA,OACA,OACA,OACQ;AACR,QAAM,SAAS,MAAM,OAAO,CAAC,SAAS,KAAK,OAAO,WAAW,KAAK,OAAO,KAAK;AAC9E,QAAM,OAAO,OAAO,SAAS,IAAI,KAAK,OAAO,IAAI,CAAC,SAAS,KAAK,KAAK,EAAE,KAAK,IAAI,CAAC,KAAK;AACtF,SAAO,GAAG,IAAI,IAAI,KAAK,mBAAmB,OAAO,OAAO,KAAK,GAAG,KAAK,GAAG,IAAI;AAC9E;AAEA,IAAO,yBAAQ;","names":["span","left"]}

package/dist/diagrams/index.d.ts

@@ -0,0 +1,17 @@
+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 { RasterFormat, RasterOptions, SerializeOptions, downloadBlob, exportFilename, rasterize, serializeSvg } from '../lib/svg-export.js';
+export { LegendEntry, kindLegend, resolveLegend, stateLegend, variantLegend } from './lib/legend.js';
+export { FigureChrome } from './lib/frame.js';
+import 'react';
+import './lib/geometry.js';

package/dist/diagrams/index.js

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

package/dist/diagrams/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/diagrams/index.ts"],"sourcesContent":["/**\n * @misoto22/design/diagrams — the public entry.\n *\n * Five renderers for the five diagram shapes software actually needs, plus the\n * chrome a reader explores one with. They ship from their own entry point\n * rather than from the package root for one reason: a page that renders a Badge\n * should not be paying for a routing engine. Nothing under `src/components`\n * imports anything here, so the main barrel stays the size it was.\n *\n * The specification types mirror\n * [archify](https://github.com/tt-a1i/archify)'s published JSON schemas, so a\n * document authored for that tool renders here with no translation step — in\n * this system's own monochrome terms rather than in archify's palette.\n *\n * The look ships with the rest of the package:\n *\n *   import '@misoto22/design/styles.css'\n *\n * Everything below is a consumer contract. Adding an export is cheap; changing\n * or removing one is a breaking change (DESIGN-API-001).\n */\n\n// ─── Specifications ───\nexport type {\n  ArchitectureBoundary,\n  ArchitectureComponent,\n  ArchitectureSpec,\n  DataflowEdge,\n  DataflowNode,\n  DataflowSpec,\n  DataflowStage,\n  DiagramCard,\n  DiagramMeta,\n  DiagramSpecAny,\n  DiagramView,\n  EdgeBase,\n  LegendMode,\n  LifecycleLane,\n  LifecycleSpec,\n  LifecycleState,\n  LifecycleStateKind,\n  LifecycleTransition,\n  NodeBase,\n  NodeKind,\n  Point,\n  RouteMode,\n  SequenceActivation,\n  SequenceMessage,\n  SequenceParticipant,\n  SequenceSegment,\n  SequenceSpec,\n  Side,\n  SourceRef,\n  Variant,\n  WorkflowEdge,\n  WorkflowEdgeRole,\n  WorkflowGroup,\n  WorkflowLane,\n  WorkflowNode,\n  WorkflowPhase,\n  WorkflowSpec,\n} from './spec'\n\n// ─── Figures ───\nexport * from './ArchitectureFigure/ArchitectureFigure'\nexport * from './WorkflowFigure/WorkflowFigure'\nexport * from './SequenceFigure/SequenceFigure'\nexport * from './DataflowFigure/DataflowFigure'\nexport * from './LifecycleFigure/LifecycleFigure'\n\n// ─── Chrome ───\nexport * from './DiagramCanvas/DiagramCanvas'\nexport * from './DiagramToolbar/DiagramToolbar'\nexport * from './DiagramExportMenu/DiagramExportMenu'\nexport * from './DiagramInspector/DiagramInspector'\nexport * from './DiagramMinimap/DiagramMinimap'\nexport * from './DiagramLegend/DiagramLegend'\n\n// ─── Taking a figure off the page ───\n/**\n * The export pipeline the menu runs, for a caller who needs a different one.\n *\n * `DiagramExportMenu` is five decisions already made — a plate behind the\n * artwork, 2× raster, a 1200 × 630 share card — and a caller who wants any of\n * them differently had nothing to build on: the serialiser is where the hard\n * half lives (resolving `var(--ink)` against the live element, so the file is\n * not an invisible rectangle), and it was private.\n */\nexport {\n  downloadBlob,\n  exportFilename,\n  rasterize,\n  serializeSvg,\n} from '../lib/svg-export'\nexport type { RasterFormat, RasterOptions, SerializeOptions } from '../lib/svg-export'\n\n// ─── Building a key ───\nexport { kindLegend, resolveLegend, stateLegend, variantLegend } from './lib/legend'\nexport type { LegendEntry } from './lib/legend'\n\n// ─── Shared chrome types ───\nexport type { FigureChrome } from './lib/frame'\n"],"mappings":"AAgEA,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AAGd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AAYd;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAIP,SAAS,YAAY,eAAe,aAAa,qBAAqB;","names":[]}

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

@@ -0,0 +1,61 @@
+/**
+ * The ways a diagram specification can typecheck and draw something else.
+ *
+ * A figure has no runtime validator and should not grow one: the specification
+ * is a plain object, the layout is arithmetic on numbers it already carries,
+ * and a schema check would be a second copy of the types. What it needs instead
+ * is the same thing the components have — a word at the moment the arithmetic
+ * is asked to do something the author cannot have meant.
+ *
+ * Every case here shares one shape: the renderer CAN produce a picture, so
+ * nothing throws, and the picture is not the one the specification describes.
+ * A lane id nothing declares resolves to lane 0 and the step is drawn in the
+ * wrong band; a stage past the last heading is drawn past the last heading; a
+ * message to a participant that does not exist is drawn nowhere at all. Each of
+ * those used to be silent, and silence is the one outcome ruled out: an author
+ * who cannot see the difference between "I placed this" and "the renderer gave
+ * up" has no way to find the mistake except by knowing what the picture should
+ * have looked like.
+ *
+ * All of it goes through `lib/warn`, so it is dev-only, printed once per
+ * problem, and dropped from a production bundle by the consumer's own bundler.
+ */
+/**
+ * Says so when a figure is handed the same object it was handed last time, with
+ * different contents inside it.
+ *
+ * Every figure memoises its model on the specification's IDENTITY, which is the
+ * only key that costs nothing to compare — and which a `spec.components.push()`
+ * does not change. The figure then goes on drawing the picture it was first
+ * given, through any number of re-renders, with no error and no clue.
+ *
+ * The fingerprint is only computed in development, and only ever compared with
+ * the previous render's: it is a diagnostic, not the memo key. Making it the
+ * memo key would put a `JSON.stringify` of the whole specification in front of
+ * every production render, which is a far worse trade than asking the author to
+ * build a new object.
+ */
+declare function useSpecIdentity(spec: unknown, component: string): void;
+/** Says so when a node names a lane the specification never declared. */
+declare function warnUnknownLane(component: string, nodeId: string, lane: string): void;
+/** Says so when a data-flow node sits past the last stage heading. */
+declare function warnStageOutOfRange(component: string, nodeId: string, stage: number, stages: number): void;
+/** Says so when two boxes were placed on exactly the same coordinate. */
+declare function warnCollision(component: string, ids: string[]): void;
+/**
+ * The edges whose two ends exist, with a word about the ones that do not.
+ *
+ * Routing already drops a line it cannot place — there is no box to draw it
+ * between — and the summary list used to iterate the specification instead, so
+ * the picture and its text equivalent disagreed: one showed nothing, the other
+ * reported a relationship to an id no node claims. Both halves now read this,
+ * which is what makes them agree by construction rather than by inspection.
+ */
+declare function liveEdges<E extends {
+    from: string;
+    to: string;
+}>(component: string, edges: E[] | undefined, known: (id: string) => boolean): E[];
+/** Says so when anything else in the spec points at an id nothing declares. */
+declare function warnUnknownRef(component: string, field: string, id: string, effect: string): void;
+
+export { liveEdges, useSpecIdentity, warnCollision, warnStageOutOfRange, warnUnknownLane, warnUnknownRef };

package/dist/diagrams/lib/dev.js

@@ -0,0 +1,96 @@
+"use client";
+import { useRef } from "react";
+import { DEV, warn } from "../../lib/warn.js";
+function useSpecIdentity(spec, component) {
+  const last = useRef(null);
+  if (!DEV) return;
+  const print = fingerprint(spec);
+  const previous = last.current;
+  last.current = { spec, print };
+  if (previous && previous.spec === spec && previous.print !== print) {
+    warn({
+      code: "DIAGRAM_SPEC_MUTATED",
+      problem: `${component} was given the same spec object with different contents. The model is memoised on the object's identity, so the figure is still drawing what that object held on the first render.`,
+      field: `${component}.spec`,
+      fix: "Build a new spec object for the change \u2014 { ...spec, nodes: [...] } \u2014 rather than mutating the one already passed.",
+      component
+    });
+  }
+}
+function fingerprint(value) {
+  try {
+    return JSON.stringify(value) ?? "";
+  } catch {
+    return "";
+  }
+}
+function warnUnknownLane(component, nodeId, lane) {
+  if (!DEV) return;
+  warn({
+    code: "DIAGRAM_LANE_UNKNOWN",
+    problem: `${component} was given the lane "${lane}" on "${nodeId}", which no lane in the specification declares. It falls back to the first lane, so the node is drawn in the right column and the wrong band.`,
+    field: `${component}.nodes[${nodeId}].lane`,
+    fix: `Use one of the ids in spec.lanes, or add a lane whose id is "${lane}".`,
+    component
+  });
+}
+function warnStageOutOfRange(component, nodeId, stage, stages) {
+  if (!DEV) return;
+  warn({
+    code: "DIAGRAM_STAGE_OUT_OF_RANGE",
+    problem: `${component} was given stage ${stage} on "${nodeId}" against ${stages} declared stages. A node's x is computed from its own index, so it is drawn past the last heading \u2014 in a column the axis does not label.`,
+    field: `${component}.nodes[${nodeId}].stage`,
+    fix: `Use a stage between 0 and ${Math.max(0, stages - 1)}, or declare the stages the pipeline actually has.`,
+    component
+  });
+}
+function warnCollision(component, ids) {
+  if (!DEV) return;
+  warn({
+    code: "DIAGRAM_CELL_COLLISION",
+    problem: `${component} placed ${ids.map((id) => `"${id}"`).join(" and ")} at the same coordinate, so one plate is drawn on top of the other. Both are still in the summary list, so the mistake exists only in the picture.`,
+    field: `${component}.components[${ids[0]}]`,
+    fix: "Give each of them its own row and col, or its own pos.",
+    component
+  });
+}
+function liveEdges(component, edges, known) {
+  if (!edges) return [];
+  const out = [];
+  for (const edge of edges) {
+    const missing = [edge.from, edge.to].filter((id) => !known(id));
+    if (missing.length === 0) {
+      out.push(edge);
+      continue;
+    }
+    if (DEV) {
+      warn({
+        code: "DIAGRAM_EDGE_DANGLING",
+        problem: `${component} was given a relationship ${edge.from} \u2192 ${edge.to}, and ${missing.map((id) => `"${id}"`).join(" and ")} is not a node the specification declares. There is nothing to draw it between, so it is left out of the picture and out of the summary.`,
+        field: `${component}.edges[${edge.from}\u2192${edge.to}]`,
+        fix: "Correct the id, or add the node it names.",
+        component
+      });
+    }
+  }
+  return out;
+}
+function warnUnknownRef(component, field, id, effect) {
+  if (!DEV) return;
+  warn({
+    code: "DIAGRAM_REF_UNKNOWN",
+    problem: `${component} was given "${id}" in ${field}, which no node in the specification declares, so ${effect}.`,
+    field: `${component}.${field}`,
+    fix: "Correct the id, or add the node it names.",
+    component
+  });
+}
+export {
+  liveEdges,
+  useSpecIdentity,
+  warnCollision,
+  warnStageOutOfRange,
+  warnUnknownLane,
+  warnUnknownRef
+};
+//# sourceMappingURL=dev.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/diagrams/lib/dev.ts"],"sourcesContent":["'use client'\n\nimport { useRef } from 'react'\nimport { DEV, warn } from '../../lib/warn'\n\n/**\n * The ways a diagram specification can typecheck and draw something else.\n *\n * A figure has no runtime validator and should not grow one: the specification\n * is a plain object, the layout is arithmetic on numbers it already carries,\n * and a schema check would be a second copy of the types. What it needs instead\n * is the same thing the components have — a word at the moment the arithmetic\n * is asked to do something the author cannot have meant.\n *\n * Every case here shares one shape: the renderer CAN produce a picture, so\n * nothing throws, and the picture is not the one the specification describes.\n * A lane id nothing declares resolves to lane 0 and the step is drawn in the\n * wrong band; a stage past the last heading is drawn past the last heading; a\n * message to a participant that does not exist is drawn nowhere at all. Each of\n * those used to be silent, and silence is the one outcome ruled out: an author\n * who cannot see the difference between \"I placed this\" and \"the renderer gave\n * up\" has no way to find the mistake except by knowing what the picture should\n * have looked like.\n *\n * All of it goes through `lib/warn`, so it is dev-only, printed once per\n * problem, and dropped from a production bundle by the consumer's own bundler.\n */\n\n/**\n * Says so when a figure is handed the same object it was handed last time, with\n * different contents inside it.\n *\n * Every figure memoises its model on the specification's IDENTITY, which is the\n * only key that costs nothing to compare — and which a `spec.components.push()`\n * does not change. The figure then goes on drawing the picture it was first\n * given, through any number of re-renders, with no error and no clue.\n *\n * The fingerprint is only computed in development, and only ever compared with\n * the previous render's: it is a diagnostic, not the memo key. Making it the\n * memo key would put a `JSON.stringify` of the whole specification in front of\n * every production render, which is a far worse trade than asking the author to\n * build a new object.\n */\nexport function useSpecIdentity(spec: unknown, component: string): void {\n  const last = useRef<{ spec: unknown; print: string } | null>(null)\n  if (!DEV) return\n\n  const print = fingerprint(spec)\n  const previous = last.current\n  last.current = { spec, print }\n\n  if (previous && previous.spec === spec && previous.print !== print) {\n    warn({\n      code: 'DIAGRAM_SPEC_MUTATED',\n      problem: `${component} was given the same spec object with different contents. The model is memoised on the object's identity, so the figure is still drawing what that object held on the first render.`,\n      field: `${component}.spec`,\n      fix: 'Build a new spec object for the change — { ...spec, nodes: [...] } — rather than mutating the one already passed.',\n      component,\n    })\n  }\n}\n\nfunction fingerprint(value: unknown): string {\n  try {\n    return JSON.stringify(value) ?? ''\n  } catch {\n    // A spec that cannot be serialised cannot be fingerprinted either. It is\n    // not this function's job to complain about that.\n    return ''\n  }\n}\n\n/** Says so when a node names a lane the specification never declared. */\nexport function warnUnknownLane(component: string, nodeId: string, lane: string): void {\n  if (!DEV) return\n  warn({\n    code: 'DIAGRAM_LANE_UNKNOWN',\n    problem: `${component} was given the lane \"${lane}\" on \"${nodeId}\", which no lane in the specification declares. It falls back to the first lane, so the node is drawn in the right column and the wrong band.`,\n    field: `${component}.nodes[${nodeId}].lane`,\n    fix: `Use one of the ids in spec.lanes, or add a lane whose id is \"${lane}\".`,\n    component,\n  })\n}\n\n/** Says so when a data-flow node sits past the last stage heading. */\nexport function warnStageOutOfRange(\n  component: string,\n  nodeId: string,\n  stage: number,\n  stages: number,\n): void {\n  if (!DEV) return\n  warn({\n    code: 'DIAGRAM_STAGE_OUT_OF_RANGE',\n    problem: `${component} was given stage ${stage} on \"${nodeId}\" against ${stages} declared stages. A node's x is computed from its own index, so it is drawn past the last heading — in a column the axis does not label.`,\n    field: `${component}.nodes[${nodeId}].stage`,\n    fix: `Use a stage between 0 and ${Math.max(0, stages - 1)}, or declare the stages the pipeline actually has.`,\n    component,\n  })\n}\n\n/** Says so when two boxes were placed on exactly the same coordinate. */\nexport function warnCollision(component: string, ids: string[]): void {\n  if (!DEV) return\n  warn({\n    code: 'DIAGRAM_CELL_COLLISION',\n    problem: `${component} placed ${ids.map((id) => `\"${id}\"`).join(' and ')} at the same coordinate, so one plate is drawn on top of the other. Both are still in the summary list, so the mistake exists only in the picture.`,\n    field: `${component}.components[${ids[0]}]`,\n    fix: 'Give each of them its own row and col, or its own pos.',\n    component,\n  })\n}\n\n/**\n * The edges whose two ends exist, with a word about the ones that do not.\n *\n * Routing already drops a line it cannot place — there is no box to draw it\n * between — and the summary list used to iterate the specification instead, so\n * the picture and its text equivalent disagreed: one showed nothing, the other\n * reported a relationship to an id no node claims. Both halves now read this,\n * which is what makes them agree by construction rather than by inspection.\n */\nexport function liveEdges<E extends { from: string; to: string }>(\n  component: string,\n  edges: E[] | undefined,\n  known: (id: string) => boolean,\n): E[] {\n  if (!edges) return []\n  const out: E[] = []\n  for (const edge of edges) {\n    const missing = [edge.from, edge.to].filter((id) => !known(id))\n    if (missing.length === 0) {\n      out.push(edge)\n      continue\n    }\n    if (DEV) {\n      warn({\n        code: 'DIAGRAM_EDGE_DANGLING',\n        problem: `${component} was given a relationship ${edge.from} → ${edge.to}, and ${missing.map((id) => `\"${id}\"`).join(' and ')} is not a node the specification declares. There is nothing to draw it between, so it is left out of the picture and out of the summary.`,\n        field: `${component}.edges[${edge.from}→${edge.to}]`,\n        fix: 'Correct the id, or add the node it names.',\n        component,\n      })\n    }\n  }\n  return out\n}\n\n/** Says so when anything else in the spec points at an id nothing declares. */\nexport function warnUnknownRef(\n  component: string,\n  field: string,\n  id: string,\n  effect: string,\n): void {\n  if (!DEV) return\n  warn({\n    code: 'DIAGRAM_REF_UNKNOWN',\n    problem: `${component} was given \"${id}\" in ${field}, which no node in the specification declares, so ${effect}.`,\n    field: `${component}.${field}`,\n    fix: 'Correct the id, or add the node it names.',\n    component,\n  })\n}\n"],"mappings":";AAEA,SAAS,cAAc;AACvB,SAAS,KAAK,YAAY;AAwCnB,SAAS,gBAAgB,MAAe,WAAyB;AACtE,QAAM,OAAO,OAAgD,IAAI;AACjE,MAAI,CAAC,IAAK;AAEV,QAAM,QAAQ,YAAY,IAAI;AAC9B,QAAM,WAAW,KAAK;AACtB,OAAK,UAAU,EAAE,MAAM,MAAM;AAE7B,MAAI,YAAY,SAAS,SAAS,QAAQ,SAAS,UAAU,OAAO;AAClE,SAAK;AAAA,MACH,MAAM;AAAA,MACN,SAAS,GAAG,SAAS;AAAA,MACrB,OAAO,GAAG,SAAS;AAAA,MACnB,KAAK;AAAA,MACL;AAAA,IACF,CAAC;AAAA,EACH;AACF;AAEA,SAAS,YAAY,OAAwB;AAC3C,MAAI;AACF,WAAO,KAAK,UAAU,KAAK,KAAK;AAAA,EAClC,QAAQ;AAGN,WAAO;AAAA,EACT;AACF;AAGO,SAAS,gBAAgB,WAAmB,QAAgB,MAAoB;AACrF,MAAI,CAAC,IAAK;AACV,OAAK;AAAA,IACH,MAAM;AAAA,IACN,SAAS,GAAG,SAAS,wBAAwB,IAAI,SAAS,MAAM;AAAA,IAChE,OAAO,GAAG,SAAS,UAAU,MAAM;AAAA,IACnC,KAAK,gEAAgE,IAAI;AAAA,IACzE;AAAA,EACF,CAAC;AACH;AAGO,SAAS,oBACd,WACA,QACA,OACA,QACM;AACN,MAAI,CAAC,IAAK;AACV,OAAK;AAAA,IACH,MAAM;AAAA,IACN,SAAS,GAAG,SAAS,oBAAoB,KAAK,QAAQ,MAAM,aAAa,MAAM;AAAA,IAC/E,OAAO,GAAG,SAAS,UAAU,MAAM;AAAA,IACnC,KAAK,6BAA6B,KAAK,IAAI,GAAG,SAAS,CAAC,CAAC;AAAA,IACzD;AAAA,EACF,CAAC;AACH;AAGO,SAAS,cAAc,WAAmB,KAAqB;AACpE,MAAI,CAAC,IAAK;AACV,OAAK;AAAA,IACH,MAAM;AAAA,IACN,SAAS,GAAG,SAAS,WAAW,IAAI,IAAI,CAAC,OAAO,IAAI,EAAE,GAAG,EAAE,KAAK,OAAO,CAAC;AAAA,IACxE,OAAO,GAAG,SAAS,eAAe,IAAI,CAAC,CAAC;AAAA,IACxC,KAAK;AAAA,IACL;AAAA,EACF,CAAC;AACH;AAWO,SAAS,UACd,WACA,OACA,OACK;AACL,MAAI,CAAC,MAAO,QAAO,CAAC;AACpB,QAAM,MAAW,CAAC;AAClB,aAAW,QAAQ,OAAO;AACxB,UAAM,UAAU,CAAC,KAAK,MAAM,KAAK,EAAE,EAAE,OAAO,CAAC,OAAO,CAAC,MAAM,EAAE,CAAC;AAC9D,QAAI,QAAQ,WAAW,GAAG;AACxB,UAAI,KAAK,IAAI;AACb;AAAA,IACF;AACA,QAAI,KAAK;AACP,WAAK;AAAA,QACH,MAAM;AAAA,QACN,SAAS,GAAG,SAAS,6BAA6B,KAAK,IAAI,WAAM,KAAK,EAAE,SAAS,QAAQ,IAAI,CAAC,OAAO,IAAI,EAAE,GAAG,EAAE,KAAK,OAAO,CAAC;AAAA,QAC7H,OAAO,GAAG,SAAS,UAAU,KAAK,IAAI,SAAI,KAAK,EAAE;AAAA,QACjD,KAAK;AAAA,QACL;AAAA,MACF,CAAC;AAAA,IACH;AAAA,EACF;AACA,SAAO;AACT;AAGO,SAAS,eACd,WACA,OACA,IACA,QACM;AACN,MAAI,CAAC,IAAK;AACV,OAAK;AAAA,IACH,MAAM;AAAA,IACN,SAAS,GAAG,SAAS,eAAe,EAAE,QAAQ,KAAK,qDAAqD,MAAM;AAAA,IAC9G,OAAO,GAAG,SAAS,IAAI,KAAK;AAAA,IAC5B,KAAK;AAAA,IACL;AAAA,EACF,CAAC;AACH;","names":[]}