@misoto22/design 0.6.0 → 0.7.0

package/dist/diagrams/DiagramToolbar/DiagramToolbar.js

@@ -0,0 +1,53 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { cn } from "../../lib/cn.js";
+function DiagramToolbar({
+  children,
+  className,
+  placement = "inline",
+  align = "end",
+  label,
+  ...rest
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      role: "toolbar",
+      "aria-label": label,
+      "aria-orientation": "horizontal",
+      className: cn(
+        "flex items-center gap-1 rounded-(--radius) border border-(--rule-2) bg-(--panel-bg) p-1",
+        placement === "floating" && "absolute top-3 z-(--z-sticky)",
+        placement === "floating" && (align === "end" ? "end-3" : "start-3"),
+        className
+      ),
+      ...rest,
+      children
+    }
+  );
+}
+function DiagramToolbarGroup({
+  children,
+  className,
+  ...rest
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "flex items-center gap-0.5",
+        "border-s border-(--rule) ps-1 first:border-s-0 first:ps-0",
+        className
+      ),
+      ...rest,
+      children
+    }
+  );
+}
+var DiagramToolbar_default = DiagramToolbar;
+export {
+  DiagramToolbar,
+  DiagramToolbarGroup,
+  DiagramToolbar_default as default
+};
+//# sourceMappingURL=DiagramToolbar.js.map

package/dist/diagrams/DiagramToolbar/DiagramToolbar.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/diagrams/DiagramToolbar/DiagramToolbar.tsx"],"sourcesContent":["'use client'\n\nimport type { ComponentProps, ReactNode } from 'react'\nimport { cn } from '../../lib/cn'\n\nexport interface DiagramToolbarProps extends Omit<ComponentProps<'div'>, 'children'> {\n  children: ReactNode\n  /** Where it sits. `floating` pins it over the surface it acts on. */\n  placement?: 'inline' | 'floating'\n  /** Which corner a floating bar pins to. */\n  align?: 'start' | 'end'\n  label: string\n}\n\n/**\n * A bar of actions that belong to the surface underneath them.\n *\n * The package already has `FloatingIconButton` for ONE pinned action. This is\n * the container for several — which is a different problem, because several\n * pinned buttons need to read as one object rather than as a scatter: one\n * plate, one border, hairlines between the groups, and a single `role=\"toolbar\"`\n * so a screen reader announces a toolbar instead of six unrelated buttons.\n *\n * `role=\"toolbar\"` also changes the keyboard contract, and callers should know\n * what they are opting into: arrow keys are expected to move between the\n * controls and Tab is expected to leave the bar. This component does not\n * implement roving focus for you — a bar of three buttons where Tab visits all\n * three is honest and fine — so pass `placement=\"inline\"` and skip the role by\n * using a plain `<div>` if that is not what you want.\n *\n * @example\n * <DiagramToolbar label=\"Diagram actions\" placement=\"floating\">\n *   <DiagramToolbarGroup>\n *     <Button size=\"sm\" variant=\"ghost\">Theme</Button>\n *   </DiagramToolbarGroup>\n *   <DiagramToolbarGroup>\n *     <DiagramExportMenu targetRef={svg} title=\"Request path\" />\n *   </DiagramToolbarGroup>\n * </DiagramToolbar>\n */\nexport function DiagramToolbar({\n  children,\n  className,\n  placement = 'inline',\n  align = 'end',\n  label,\n  ...rest\n}: DiagramToolbarProps) {\n  return (\n    <div\n      role=\"toolbar\"\n      aria-label={label}\n      aria-orientation=\"horizontal\"\n      className={cn(\n        'flex items-center gap-1 rounded-(--radius) border border-(--rule-2) bg-(--panel-bg) p-1',\n        placement === 'floating' && 'absolute top-3 z-(--z-sticky)',\n        placement === 'floating' && (align === 'end' ? 'end-3' : 'start-3'),\n        className,\n      )}\n      {...rest}\n    >\n      {children}\n    </div>\n  )\n}\n\n/**\n * One run of related controls inside the bar.\n *\n * Separated by a hairline rather than by space, because a gap large enough to\n * read as a group boundary is also large enough to stop the bar reading as one\n * object — which is the whole reason the controls were collected into a bar.\n */\nexport function DiagramToolbarGroup({\n  children,\n  className,\n  ...rest\n}: ComponentProps<'div'>) {\n  return (\n    <div\n      className={cn(\n        'flex items-center gap-0.5',\n        'border-s border-(--rule) ps-1 first:border-s-0 first:ps-0',\n        className,\n      )}\n      {...rest}\n    >\n      {children}\n    </div>\n  )\n}\n\nexport default DiagramToolbar\n"],"mappings":";AAiDI;AA9CJ,SAAS,UAAU;AAqCZ,SAAS,eAAe;AAAA,EAC7B;AAAA,EACA;AAAA,EACA,YAAY;AAAA,EACZ,QAAQ;AAAA,EACR;AAAA,EACA,GAAG;AACL,GAAwB;AACtB,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL,cAAY;AAAA,MACZ,oBAAiB;AAAA,MACjB,WAAW;AAAA,QACT;AAAA,QACA,cAAc,cAAc;AAAA,QAC5B,cAAc,eAAe,UAAU,QAAQ,UAAU;AAAA,QACzD;AAAA,MACF;AAAA,MACC,GAAG;AAAA,MAEH;AAAA;AAAA,EACH;AAEJ;AASO,SAAS,oBAAoB;AAAA,EAClC;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAA0B;AACxB,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,QACT;AAAA,QACA;AAAA,QACA;AAAA,MACF;AAAA,MACC,GAAG;AAAA,MAEH;AAAA;AAAA,EACH;AAEJ;AAEA,IAAO,yBAAQ;","names":[]}

package/dist/diagrams/LifecycleFigure/LifecycleFigure.d.ts

@@ -0,0 +1,31 @@
+import * as react from 'react';
+import { FigureChrome } from '../lib/frame.js';
+import { LifecycleSpec } from '../spec.js';
+import '../lib/geometry.js';
+
+interface LifecycleFigureProps extends FigureChrome {
+    spec: LifecycleSpec;
+}
+/**
+ * A state machine: what something can BE, and what moves it.
+ *
+ * The one figure here that spends colour, and it spends exactly the two tokens
+ * this system reserves for state: `--success` on a terminal success,
+ * `--danger` on a terminal failure. Nothing else in the package is allowed
+ * those two, and a lifecycle diagram is the case they were reserved for — the
+ * whole point of the picture is which end a run came out of.
+ *
+ * The other six kinds are carried by shape, so a greyscale print loses the two
+ * outcomes' hue and keeps every other distinction: a start is a filled cap, a
+ * decision is a diamond, a wait is a dashed frame, an external is a plate with
+ * a cut corner.
+ *
+ * A RECOVERABLE FAILURE IS A FAILURE WITH A WAY BACK. `type: "failure"` says
+ * how a state is drawn; a transition OUT of it is what says whether the run is
+ * over. A retryable error and a terminal one look identical until you follow
+ * the arrows, which is correct — the difference between them is a real edge in
+ * the machine, not an adjective on a box.
+ */
+declare function LifecycleFigure({ spec, className, legend, cards, heading, activeIds, onSelectNode, }: LifecycleFigureProps): react.JSX.Element;
+
+export { LifecycleFigure, type LifecycleFigureProps, LifecycleFigure as default };

package/dist/diagrams/LifecycleFigure/LifecycleFigure.js

@@ -0,0 +1,202 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useId, useMemo } from "react";
+import { DiagramFrame } from "../lib/frame.js";
+import { inflate, round, TYPE, textWidth, union, wrapText } from "../lib/geometry.js";
+import { resolveLegend, stateLegend } from "../lib/legend.js";
+import { Chip, PLATE, plateHeight, StatePlate } from "../lib/marks.js";
+import { renderWires, wiresFor } from "../lib/wires.js";
+const KINDS = [
+  "start",
+  "active",
+  "waiting",
+  "decision",
+  "success",
+  "failure",
+  "neutral",
+  "external"
+];
+const GRID = { originX: 132, originY: 56, colW: 158, gapX: 62, laneGap: 52, stateH: 68 };
+const SECONDARY_LANE_OFFSET = 2;
+function textRoom(width, kind) {
+  return kind === "decision" ? width * 0.56 : width - PLATE.padX * 2;
+}
+function LifecycleFigure({
+  spec,
+  className,
+  legend = "auto",
+  cards = true,
+  heading = true,
+  activeIds,
+  onSelectNode
+}) {
+  const uid = useId().replace(/:/g, "");
+  const model = useMemo(
+    () => buildModel(spec, uid, activeIds, onSelectNode),
+    [spec, uid, activeIds, onSelectNode]
+  );
+  return /* @__PURE__ */ jsx(
+    DiagramFrame,
+    {
+      meta: spec.meta,
+      model,
+      cards: spec.cards,
+      showCards: cards,
+      heading,
+      legend,
+      className,
+      activeIds,
+      onSelectNode
+    }
+  );
+}
+function buildModel(spec, uid, activeIds, onSelectNode) {
+  const lanes = spec.lanes ?? [{ id: "", label: "" }];
+  const laneIndex = new Map(lanes.map((lane, index) => [lane.id, index]));
+  const boxes = /* @__PURE__ */ new Map();
+  const placed = spec.states.map((state) => {
+    const w = state.width ?? (state.type === "decision" ? GRID.colW + 34 : GRID.colW);
+    const lines = wrapText(state.label, TYPE.label, textRoom(w, state.type), 2);
+    const h = plateHeight(lines.length, Boolean(state.sublabel), true, state.height ?? GRID.stateH);
+    const lane = laneIndex.get(state.lane ?? "") ?? 0;
+    const col = state.col + (lane === 0 ? 0 : SECONDARY_LANE_OFFSET);
+    const x = GRID.originX + col * (GRID.colW + GRID.gapX);
+    const y = GRID.originY + lane * (GRID.stateH + GRID.laneGap);
+    const box = { x, y, w, h };
+    boxes.set(state.id, box);
+    return { state, box, lane };
+  });
+  const rail = placed.filter((entry) => entry.lane === 0).sort((a, b) => a.state.col - b.state.col);
+  const declared = new Set((spec.transitions ?? []).map((t) => `${t.from}\u2192${t.to}`));
+  const implied = rail.slice(0, -1).map((entry, index) => ({ from: entry.state.id, to: rail[index + 1].state.id })).filter((edge) => !declared.has(`${edge.from}\u2192${edge.to}`));
+  const wires = [
+    ...wiresFor(implied, boxes, () => ({ weight: 2.1 })),
+    ...wiresFor(spec.transitions, boxes)
+  ];
+  const { paths, labels } = renderWires(wires, uid);
+  const extent = inflate(union([...boxes.values()]) ?? { x: 0, y: 0, w: 500, h: 240 }, 34);
+  const active = activeIds && activeIds.length > 0 ? new Set(activeIds) : null;
+  const laneRules = lanes.map((lane, index) => {
+    const inside = placed.filter((entry) => entry.lane === index).map((entry) => entry.box);
+    const span = union(inside);
+    return span ? { lane, y: span.y - 16, x1: extent.x + 18, x2: span.x + span.w } : null;
+  });
+  const artwork = /* @__PURE__ */ jsxs(Fragment, { children: [
+    laneRules.map(
+      (rule, index) => rule && rule.lane.label ? /* @__PURE__ */ jsxs("g", { "aria-hidden": "true", children: [
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: `M ${round(rule.x1)} ${round(rule.y)} H ${round(rule.x2)}`,
+            className: "stroke-(--diagram-rule) [stroke-width:1]"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "text",
+          {
+            x: round(rule.x1),
+            y: round(rule.y - 7),
+            className: "fill-(--diagram-ink-3) font-mono [font-size:10.5px] [letter-spacing:0.08em] uppercase",
+            children: rule.lane.label
+          }
+        )
+      ] }, `lane-${index}`) : null
+    ),
+    paths,
+    placed.map(({ state, box }) => {
+      const lines = wrapText(state.label, TYPE.label, textRoom(box.w, state.type), 2);
+      const bottomReserve = state.tag ? 20 : 0;
+      const blockHeight = lines.length * (TYPE.label * 1.25) + (state.sublabel ? TYPE.sub * 1.5 : 0);
+      const top = box.y + (box.h - bottomReserve - blockHeight) / 2;
+      const reversed = state.type === "start";
+      const centreX = box.x + box.w / 2;
+      return /* @__PURE__ */ jsx(
+        "g",
+        {
+          "data-node": state.id,
+          "data-active": active?.has(state.id) ? "" : void 0,
+          className: active && !active.has(state.id) ? "opacity-25" : void 0,
+          onClick: onSelectNode ? () => onSelectNode(state.id) : void 0,
+          children: /* @__PURE__ */ jsxs(StatePlate, { box, kind: state.type, children: [
+            active?.has(state.id) && /* @__PURE__ */ jsx(
+              "rect",
+              {
+                x: round(box.x) - 3,
+                y: round(box.y) - 3,
+                width: round(box.w) + 6,
+                height: round(box.h) + 6,
+                rx: 9,
+                fill: "none",
+                className: "stroke-(--accent) [stroke-width:1.4]"
+              }
+            ),
+            state.step && /* @__PURE__ */ jsx(
+              "text",
+              {
+                x: round(box.x + 10),
+                y: round(box.y + 15),
+                className: reversed ? "fill-(--diagram-plate-ink) font-mono [font-size:9.5px] opacity-70" : "fill-(--diagram-ink-3) font-mono [font-size:9.5px]",
+                children: state.step
+              }
+            ),
+            lines.map((line, index) => /* @__PURE__ */ jsx(
+              "text",
+              {
+                x: round(centreX),
+                y: round(top + (index + 1) * TYPE.label * 1.25 - 3.5),
+                textAnchor: "middle",
+                className: reversed ? "fill-(--diagram-plate-ink) font-sans [font-size:13px]" : "fill-(--diagram-ink) font-sans [font-size:13px]",
+                children: line
+              },
+              index
+            )),
+            state.sublabel && /* @__PURE__ */ jsx(
+              "text",
+              {
+                x: round(centreX),
+                y: round(top + lines.length * TYPE.label * 1.25 + TYPE.sub),
+                textAnchor: "middle",
+                className: reversed ? "fill-(--diagram-plate-ink) font-mono [font-size:10.5px] opacity-70" : "fill-(--diagram-ink-3) font-mono [font-size:10.5px]",
+                children: state.sublabel
+              }
+            ),
+            state.tag && /* @__PURE__ */ jsx(Chip, { x: centreX, y: box.y + box.h - 9, text: state.tag, align: "middle" })
+          ] })
+        },
+        state.id
+      );
+    }),
+    labels
+  ] });
+  const used = [...new Set(spec.states.map((state) => state.type))];
+  const widest = Math.max(
+    0,
+    ...lanes.map((lane) => textWidth(lane.label, TYPE.band))
+  );
+  const railLeft = Math.min(extent.x, GRID.originX - widest - 30);
+  return {
+    extent: { ...extent, x: railLeft, w: extent.w + (extent.x - railLeft) },
+    artwork,
+    nodes: spec.states.map((state) => ({
+      id: state.id,
+      label: state.label,
+      sublabel: state.sublabel,
+      kind: state.type
+    })),
+    edges: (spec.transitions ?? []).map((transition) => ({
+      from: transition.from,
+      to: transition.to,
+      label: [transition.label, transition.note].filter(Boolean).join(" \u2014 ") || void 0
+    })),
+    legend: stateLegend(
+      resolveLegend(used, spec.meta.legend?.mode, KINDS, spec.meta.legend?.entries),
+      spec.meta.legend?.entries
+    )
+  };
+}
+var LifecycleFigure_default = LifecycleFigure;
+export {
+  LifecycleFigure,
+  LifecycleFigure_default as default
+};
+//# sourceMappingURL=LifecycleFigure.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/diagrams/LifecycleFigure/LifecycleFigure.tsx"],"sourcesContent":["'use client'\n\nimport { useId, useMemo } from 'react'\nimport { 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":[]}