@misoto22/design 0.6.1 → 0.7.0

package/dist/diagrams/index.js

@@ -0,0 +1,19 @@
+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 { kindLegend, resolveLegend, stateLegend, variantLegend } from "./lib/legend.js";
+export {
+  kindLegend,
+  resolveLegend,
+  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// ─── 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;AAGd,SAAS,YAAY,eAAe,aAAa,qBAAqB;","names":[]}

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

@@ -0,0 +1,97 @@
+import * as react from 'react';
+import { ReactNode } from 'react';
+import { LegendMode, DiagramCard, DiagramMeta } from '../spec.js';
+import { Box } from './geometry.js';
+
+/**
+ * What a figure hands the frame around it.
+ *
+ * Five renderers produce this one shape, which is what lets the title, the
+ * accessible summary, the key and the conclusion cards be written once. A
+ * renderer's only job is placing marks; everything a reader needs AROUND the
+ * picture is the same question in all five cases.
+ */
+interface FigureModel {
+    /** The extent the artwork was drawn into. */
+    extent: Box;
+    artwork: ReactNode;
+    /** Every drawn box, for the summary list. */
+    nodes: {
+        id: string;
+        label: string;
+        sublabel?: string;
+        kind?: string;
+    }[];
+    /** Every drawn line, for the summary list. */
+    edges: {
+        from: string;
+        to: string;
+        label?: string;
+    }[];
+    /** The kinds actually used, and how each is drawn. */
+    legend: {
+        key: string;
+        label: string;
+        sample: ReactNode;
+    }[];
+}
+interface FigureChrome {
+    className?: string;
+    /** Prints the key under the figure. `auto` shows only the kinds in use. */
+    legend?: LegendMode;
+    /** Prints the conclusion cards under the figure. Defaults to true. */
+    cards?: boolean;
+    /** Prints the title and subtitle over the figure. Defaults to true. */
+    heading?: boolean;
+    /** Node ids currently lit. Everything else is dimmed. */
+    activeIds?: string[];
+    /**
+     * Called when a reader picks a node.
+     *
+     * Giving this turns the summary list from a description into a control: the
+     * same list a screen reader reads becomes the keyboard's route to selection,
+     * and the plates in the picture become the pointer's route to the same thing.
+     */
+    onSelectNode?: (id: string) => void;
+}
+/**
+ * The shell every figure sits in: a heading, the picture, a key, the cards, and
+ * the part that makes the picture mean anything to a reader who cannot see it.
+ *
+ * ## The accessibility decision, stated rather than implied
+ *
+ * The `<svg>` carries `role="img"` and a label, which makes its whole subtree
+ * presentational. That is the honest description of what it is — a picture —
+ * and it is what stops a screen reader from walking two hundred `<text>`
+ * elements in drawing order, which is neither reading order nor useful.
+ *
+ * The diagram's CONTENT is then published beside it as an ordinary list: every
+ * node with what kind of thing it is, and every relationship as "A → B: over
+ * HTTPS". That list is where the meaning lives for anyone not looking at the
+ * picture, and it is why this component takes a model rather than markup — a
+ * frame handed a finished `<svg>` could not have written it.
+ *
+ * The list is visually hidden by default and NOT hidden from assistive
+ * technology, which is the opposite of what `aria-hidden` would do and the
+ * whole point.
+ */
+declare function DiagramFrame({ meta, model, cards, className, legend, showCards, heading, activeIds, onSelectNode, }: {
+    meta: DiagramMeta;
+    model: FigureModel;
+    cards?: DiagramCard[];
+    showCards?: boolean;
+} & Omit<FigureChrome, 'cards'>): react.JSX.Element;
+/**
+ * The conclusion cards under a figure.
+ *
+ * Archify keys these by hue — cyan, emerald, rose. Here the key selects a MARK:
+ * a filled square, a ring, a bar, a diagonal. Seven cards in a row stay seven
+ * distinguishable cards on paper-white, and the same row survives being
+ * printed.
+ */
+declare function CardGrid({ cards, className }: {
+    cards: DiagramCard[];
+    className?: string;
+}): react.JSX.Element;
+
+export { CardGrid, DiagramFrame, type FigureChrome, type FigureModel };

package/dist/diagrams/lib/frame.js

@@ -0,0 +1,116 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useId } from "react";
+import { cn } from "../../lib/cn.js";
+import { viewBoxOf } from "./geometry.js";
+import { DiagramLegend } from "../DiagramLegend/DiagramLegend.js";
+import { DiagramDefs } from "./marks.js";
+function DiagramFrame({
+  meta,
+  model,
+  cards,
+  className,
+  legend = "auto",
+  showCards = true,
+  heading = true,
+  activeIds,
+  onSelectNode
+}) {
+  const uid = useId().replace(/:/g, "");
+  const titleId = `${uid}-title`;
+  const descId = `${uid}-desc`;
+  const byId = new Map(model.nodes.map((node) => [node.id, node]));
+  const description = `${model.nodes.length} elements and ${model.edges.length} relationships. ${meta.subtitle ?? ""}`.trim();
+  const showLegend = legend !== "hidden" && model.legend.length > 0;
+  return /* @__PURE__ */ jsxs("figure", { className: cn("m-0 flex flex-col gap-5", className), children: [
+    heading && /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1.5", children: [
+      /* @__PURE__ */ jsx("h3", { className: "m-0 font-heading text-[length:var(--fs-sub)] font-normal leading-[1.15] tracking-[-0.015em] text-(--ink)", children: meta.title }),
+      meta.subtitle && /* @__PURE__ */ jsx("span", { className: "mono-meta text-(--ink-3-aa)", children: meta.subtitle })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "overflow-x-auto rounded-(--radius-lg) border border-(--rule) bg-(--diagram-surface) p-[clamp(0.75rem,calc(1.6*var(--fluid)),1.25rem)] scroll-slim", children: /* @__PURE__ */ jsxs(
+      "svg",
+      {
+        viewBox: viewBoxOf(model.extent),
+        role: "img",
+        "aria-labelledby": `${titleId} ${descId}`,
+        className: "block h-auto w-full max-w-full font-sans",
+        "data-diagram-artwork": "",
+        children: [
+          /* @__PURE__ */ jsx("title", { id: titleId, children: meta.title }),
+          /* @__PURE__ */ jsx("desc", { id: descId, children: description }),
+          /* @__PURE__ */ jsx(DiagramDefs, { uid }),
+          model.artwork
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsxs("div", { className: "sr-only", children: [
+      /* @__PURE__ */ jsx("p", { children: description }),
+      /* @__PURE__ */ jsx("ul", { children: model.nodes.map((node) => /* @__PURE__ */ jsx("li", { children: onSelectNode ? /* @__PURE__ */ jsx("button", { type: "button", onClick: () => onSelectNode(node.id), children: summaryLine(node) }) : summaryLine(node) }, node.id)) }),
+      model.edges.length > 0 && /* @__PURE__ */ jsx("ul", { children: model.edges.map((edge, index) => /* @__PURE__ */ jsxs("li", { children: [
+        byId.get(edge.from)?.label ?? edge.from,
+        " \u2192 ",
+        byId.get(edge.to)?.label ?? edge.to,
+        edge.label ? `: ${edge.label}` : ""
+      ] }, index)) })
+    ] }),
+    showLegend && /* @__PURE__ */ jsx(DiagramLegend, { entries: model.legend }),
+    showCards && cards && cards.length > 0 && /* @__PURE__ */ jsx(CardGrid, { cards }),
+    activeIds && activeIds.length > 0 && /* @__PURE__ */ jsx("span", { className: "sr-only", role: "status", children: `${activeIds.length} highlighted` })
+  ] });
+}
+function summaryLine(node) {
+  const parts = [node.label];
+  if (node.kind) parts.push(`(${node.kind})`);
+  if (node.sublabel) parts.push(`\u2014 ${node.sublabel}`);
+  return parts.join(" ");
+}
+function CardGrid({ cards, className }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "grid gap-3 sm:grid-cols-2 lg:grid-cols-3",
+        className
+      ),
+      children: cards.map((card) => /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2.5 border-t border-(--ink) pt-3", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsx(CardMark, { shape: card.dot }),
+          /* @__PURE__ */ jsx("span", { className: "font-sans text-[13.5px] leading-[1.35] text-(--ink)", children: card.title })
+        ] }),
+        /* @__PURE__ */ jsx("ul", { className: "m-0 flex list-none flex-col gap-1.5 p-0", children: card.items.map((item, index) => /* @__PURE__ */ jsx(
+          "li",
+          {
+            className: "text-[12.5px] leading-[1.55] text-(--ink-2) ps-3 -indent-3 before:content-['\u2014'] before:pe-1.5 before:text-(--ink-3-aa)",
+            children: item
+          },
+          index
+        )) })
+      ] }, card.title))
+    }
+  );
+}
+function CardMark({ shape }) {
+  const common = "size-2.5 shrink-0";
+  switch (shape) {
+    case "cyan":
+      return /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: cn(common, "bg-(--ink)") });
+    case "emerald":
+      return /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: cn(common, "rounded-full bg-(--ink)") });
+    case "violet":
+      return /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: cn(common, "rounded-full border border-(--ink)") });
+    case "amber":
+      return /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: cn(common, "border border-(--ink)") });
+    case "rose":
+      return /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: cn(common, "rotate-45 bg-(--ink)") });
+    case "orange":
+      return /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: cn(common, "rotate-45 border border-(--ink)") });
+    case "slate":
+    default:
+      return /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: cn("h-1 w-2.5 shrink-0 bg-(--ink-3-aa)") });
+  }
+}
+export {
+  CardGrid,
+  DiagramFrame
+};
+//# sourceMappingURL=frame.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/diagrams/lib/frame.tsx"],"sourcesContent":["'use client'\n\nimport { useId, type ReactNode } from 'react'\nimport { cn } from '../../lib/cn'\nimport type { DiagramCard, DiagramMeta, LegendMode } from '../spec'\nimport { viewBoxOf, type Box } from './geometry'\nimport { DiagramLegend } from '../DiagramLegend/DiagramLegend'\nimport { DiagramDefs } from './marks'\n\n/**\n * What a figure hands the frame around it.\n *\n * Five renderers produce this one shape, which is what lets the title, the\n * accessible summary, the key and the conclusion cards be written once. A\n * renderer's only job is placing marks; everything a reader needs AROUND the\n * picture is the same question in all five cases.\n */\nexport interface FigureModel {\n  /** The extent the artwork was drawn into. */\n  extent: Box\n  artwork: ReactNode\n  /** Every drawn box, for the summary list. */\n  nodes: { id: string; label: string; sublabel?: string; kind?: string }[]\n  /** Every drawn line, for the summary list. */\n  edges: { from: string; to: string; label?: string }[]\n  /** The kinds actually used, and how each is drawn. */\n  legend: { key: string; label: string; sample: ReactNode }[]\n}\n\nexport interface FigureChrome {\n  className?: string\n  /** Prints the key under the figure. `auto` shows only the kinds in use. */\n  legend?: LegendMode\n  /** Prints the conclusion cards under the figure. Defaults to true. */\n  cards?: boolean\n  /** Prints the title and subtitle over the figure. Defaults to true. */\n  heading?: boolean\n  /** Node ids currently lit. Everything else is dimmed. */\n  activeIds?: string[]\n  /**\n   * Called when a reader picks a node.\n   *\n   * Giving this turns the summary list from a description into a control: the\n   * same list a screen reader reads becomes the keyboard's route to selection,\n   * and the plates in the picture become the pointer's route to the same thing.\n   */\n  onSelectNode?: (id: string) => void\n}\n\n/**\n * The shell every figure sits in: a heading, the picture, a key, the cards, and\n * the part that makes the picture mean anything to a reader who cannot see it.\n *\n * ## The accessibility decision, stated rather than implied\n *\n * The `<svg>` carries `role=\"img\"` and a label, which makes its whole subtree\n * presentational. That is the honest description of what it is — a picture —\n * and it is what stops a screen reader from walking two hundred `<text>`\n * elements in drawing order, which is neither reading order nor useful.\n *\n * The diagram's CONTENT is then published beside it as an ordinary list: every\n * node with what kind of thing it is, and every relationship as \"A → B: over\n * HTTPS\". That list is where the meaning lives for anyone not looking at the\n * picture, and it is why this component takes a model rather than markup — a\n * frame handed a finished `<svg>` could not have written it.\n *\n * The list is visually hidden by default and NOT hidden from assistive\n * technology, which is the opposite of what `aria-hidden` would do and the\n * whole point.\n */\nexport function DiagramFrame({\n  meta,\n  model,\n  cards,\n  className,\n  legend = 'auto',\n  showCards = true,\n  heading = true,\n  activeIds,\n  onSelectNode,\n}: {\n  meta: DiagramMeta\n  model: FigureModel\n  cards?: DiagramCard[]\n  showCards?: boolean\n} & Omit<FigureChrome, 'cards'>) {\n  const uid = useId().replace(/:/g, '')\n  const titleId = `${uid}-title`\n  const descId = `${uid}-desc`\n\n  const byId = new Map(model.nodes.map((node) => [node.id, node]))\n  const description = `${model.nodes.length} elements and ${model.edges.length} relationships. ${\n    meta.subtitle ?? ''\n  }`.trim()\n\n  const showLegend = legend !== 'hidden' && model.legend.length > 0\n\n  return (\n    <figure className={cn('m-0 flex flex-col gap-5', className)}>\n      {/* The title is set in the editorial serif, which is the system's own\n          answer to \"this is a heading\" — and it is what stops a figure from\n          reading as a screenshot dropped into the page. The subtitle stays in\n          the meta voice underneath it. */}\n      {heading && (\n        <div className=\"flex flex-col gap-1.5\">\n          <h3 className=\"m-0 font-heading text-[length:var(--fs-sub)] font-normal leading-[1.15] tracking-[-0.015em] text-(--ink)\">\n            {meta.title}\n          </h3>\n          {meta.subtitle && <span className=\"mono-meta text-(--ink-3-aa)\">{meta.subtitle}</span>}\n        </div>\n      )}\n\n      <div className=\"overflow-x-auto rounded-(--radius-lg) border border-(--rule) bg-(--diagram-surface) p-[clamp(0.75rem,calc(1.6*var(--fluid)),1.25rem)] scroll-slim\">\n        <svg\n          viewBox={viewBoxOf(model.extent)}\n          role=\"img\"\n          aria-labelledby={`${titleId} ${descId}`}\n          className=\"block h-auto w-full max-w-full font-sans\"\n          data-diagram-artwork=\"\"\n        >\n          <title id={titleId}>{meta.title}</title>\n          <desc id={descId}>{description}</desc>\n          <DiagramDefs uid={uid} />\n          {model.artwork}\n        </svg>\n      </div>\n\n      {/* The picture's content, for anyone not looking at the picture. */}\n      <div className=\"sr-only\">\n        <p>{description}</p>\n        <ul>\n          {model.nodes.map((node) => (\n            <li key={node.id}>\n              {onSelectNode ? (\n                <button type=\"button\" onClick={() => onSelectNode(node.id)}>\n                  {summaryLine(node)}\n                </button>\n              ) : (\n                summaryLine(node)\n              )}\n            </li>\n          ))}\n        </ul>\n        {model.edges.length > 0 && (\n          <ul>\n            {model.edges.map((edge, index) => (\n              <li key={index}>\n                {(byId.get(edge.from)?.label ?? edge.from)} → {(byId.get(edge.to)?.label ?? edge.to)}\n                {edge.label ? `: ${edge.label}` : ''}\n              </li>\n            ))}\n          </ul>\n        )}\n      </div>\n\n      {showLegend && <DiagramLegend entries={model.legend} />}\n\n      {showCards && cards && cards.length > 0 && <CardGrid cards={cards} />}\n\n      {activeIds && activeIds.length > 0 && <span className=\"sr-only\" role=\"status\">{`${activeIds.length} highlighted`}</span>}\n    </figure>\n  )\n}\n\nfunction summaryLine(node: { label: string; sublabel?: string; kind?: string }): string {\n  const parts = [node.label]\n  if (node.kind) parts.push(`(${node.kind})`)\n  if (node.sublabel) parts.push(`— ${node.sublabel}`)\n  return parts.join(' ')\n}\n\n/**\n * The conclusion cards under a figure.\n *\n * Archify keys these by hue — cyan, emerald, rose. Here the key selects a MARK:\n * a filled square, a ring, a bar, a diagonal. Seven cards in a row stay seven\n * distinguishable cards on paper-white, and the same row survives being\n * printed.\n */\nexport function CardGrid({ cards, className }: { cards: DiagramCard[]; className?: string }) {\n  return (\n    <div\n      className={cn(\n        'grid gap-3 sm:grid-cols-2 lg:grid-cols-3',\n        className,\n      )}\n    >\n      {cards.map((card) => (\n        <div key={card.title} className=\"flex flex-col gap-2.5 border-t border-(--ink) pt-3\">\n          <div className=\"flex items-center gap-2\">\n            <CardMark shape={card.dot} />\n            <span className=\"font-sans text-[13.5px] leading-[1.35] text-(--ink)\">{card.title}</span>\n          </div>\n          <ul className=\"m-0 flex list-none flex-col gap-1.5 p-0\">\n            {card.items.map((item, index) => (\n              <li\n                key={index}\n                className=\"text-[12.5px] leading-[1.55] text-(--ink-2) ps-3 -indent-3 before:content-['—'] before:pe-1.5 before:text-(--ink-3-aa)\"\n              >\n                {item}\n              </li>\n            ))}\n          </ul>\n        </div>\n      ))}\n    </div>\n  )\n}\n\n/** Seven marks, one per archify dot name, and not one of them a hue. */\nfunction CardMark({ shape }: { shape: DiagramCard['dot'] }) {\n  const common = 'size-2.5 shrink-0'\n  switch (shape) {\n    case 'cyan':\n      return <span aria-hidden className={cn(common, 'bg-(--ink)')} />\n    case 'emerald':\n      return <span aria-hidden className={cn(common, 'rounded-full bg-(--ink)')} />\n    case 'violet':\n      return <span aria-hidden className={cn(common, 'rounded-full border border-(--ink)')} />\n    case 'amber':\n      return <span aria-hidden className={cn(common, 'border border-(--ink)')} />\n    case 'rose':\n      return <span aria-hidden className={cn(common, 'rotate-45 bg-(--ink)')} />\n    case 'orange':\n      return <span aria-hidden className={cn(common, 'rotate-45 border border-(--ink)')} />\n    case 'slate':\n    default:\n      return <span aria-hidden className={cn('h-1 w-2.5 shrink-0 bg-(--ink-3-aa)')} />\n  }\n}\n"],"mappings":"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","names":[]}

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

@@ -0,0 +1,114 @@
+/**
+ * The arithmetic every figure shares: boxes, text extents, and the frame that
+ * ends up around them.
+ *
+ * Everything here is a pure function of numbers already in the specification.
+ * That is not a stylistic preference — it is what lets these figures render on
+ * a server. A layout that measured real text would need a DOM, a layout that
+ * relaxed a force graph would need to settle, and neither can produce the same
+ * markup twice. Both would hydrate into a different picture than the one that
+ * was sent, which for a diagram is worse than not rendering at all.
+ */
+/** A rectangle in the figure's user-unit space. */
+interface Box {
+    x: number;
+    y: number;
+    w: number;
+    h: number;
+}
+declare const centerOf: (box: Box) => [number, number];
+/** Grows a rectangle by `pad` on every side. */
+declare function inflate(box: Box, pad: number): Box;
+/** The smallest rectangle containing all of them. Returns null for an empty list. */
+declare function union(boxes: Box[]): Box | null;
+/**
+ * How wide a run of text is, without measuring it.
+ *
+ * A real measurement needs a DOM and the loaded face, and this module has
+ * neither by design — so this is an estimate, and the honest thing is to say
+ * what kind. Latin glyphs in the system's sans average close to 0.52em of
+ * advance across ordinary label text; digits and capitals run wider; a CJK
+ * ideograph is a full em by definition, as is a fullwidth punctuation mark.
+ *
+ * The estimate is used for two things and neither needs to be exact: choosing a
+ * box wide enough that a label is not clipped, and deciding where a line's
+ * label mask sits. Both fail gracefully — a box a few units too wide is
+ * invisible, and a mask a few units too wide hides a little more of a line than
+ * it had to.
+ *
+ * It is deliberately NOT used to justify, wrap mid-word, or letter-space
+ * anything. Those need the real face.
+ */
+declare function textWidth(text: string, fontSize: number): number;
+/**
+ * A label broken to fit a width, with a hard cap on how many lines it may take.
+ *
+ * Breaks on spaces for Latin and between characters for CJK, which has no
+ * spaces to break on. A word longer than the whole line is left to overflow
+ * rather than hyphenated: an identifier — `TenantMainMiddleware` — split across
+ * two lines is harder to read than one that runs slightly wide, and the caller
+ * sized the box from `textWidth` anyway.
+ *
+ * The last line is ellipsised when the text does not fit in `maxLines`, because
+ * silently dropping the tail is how a diagram comes to say something it does
+ * not mean.
+ */
+declare function wrapText(text: string, fontSize: number, maxWidth: number, maxLines?: number): string[];
+/**
+ * The type scale inside a figure, in user units.
+ *
+ * Fixed numbers rather than tokens, because these are SVG geometry: a `<text>`
+ * sized in `rem` inside a scaled `viewBox` changes size when the figure is
+ * zoomed, which means a diagram at 200% is a different diagram. The figure
+ * scales as one picture, so its type scales with it.
+ */
+declare const TYPE: {
+    /** A node's name. */
+    readonly label: 13;
+    /** The line under it. */
+    readonly sub: 10.5;
+    /** A mono chip: a tag, a classification, a step number. */
+    readonly chip: 9.5;
+    /** A relationship's own wording. */
+    readonly edge: 10.5;
+    /** A band, lane or stage heading. */
+    readonly band: 10.5;
+};
+/** Default box sizes per diagram type, in user units. */
+declare const BOX: {
+    readonly node: {
+        readonly w: 168;
+        readonly h: 62;
+    };
+    readonly wide: {
+        readonly w: 200;
+        readonly h: 62;
+    };
+    readonly participant: {
+        readonly w: 128;
+        readonly h: 46;
+    };
+};
+/**
+ * How tall a box has to be to hold what it was given.
+ *
+ * A declared height is a FLOOR, not a ceiling. When a specification asks for a
+ * 64-unit box and then puts two lines of label, a sublabel and a tag chip in
+ * it, honouring the 64 prints the tag over the sublabel — which reads as a
+ * rendering fault rather than as a box that was asked to hold too much. Growing
+ * the box is visible and correct; clipping is invisible and wrong.
+ */
+declare function nodeHeight(labelLines: number, hasSub: boolean, hasTag?: boolean, base?: number): number;
+/** `viewBox` as the attribute wants it. */
+declare function viewBoxOf(box: Box): string;
+/**
+ * Coordinates rounded to a tenth.
+ *
+ * SVG happily accepts eighteen decimal places and puts every one of them in the
+ * markup, which on a figure with two hundred line segments is a measurable
+ * share of the document. A tenth of a user unit is well under a device pixel at
+ * any zoom a reader will use.
+ */
+declare function round(value: number): number;
+
+export { BOX, type Box, TYPE, centerOf, inflate, nodeHeight, round, textWidth, union, viewBoxOf, wrapText };

package/dist/diagrams/lib/geometry.js

@@ -0,0 +1,113 @@
+const centerOf = (box) => [box.x + box.w / 2, box.y + box.h / 2];
+function inflate(box, pad) {
+  return { x: box.x - pad, y: box.y - pad, w: box.w + pad * 2, h: box.h + pad * 2 };
+}
+function union(boxes) {
+  if (boxes.length === 0) return null;
+  let minX = Infinity;
+  let minY = Infinity;
+  let maxX = -Infinity;
+  let maxY = -Infinity;
+  for (const box of boxes) {
+    if (box.x < minX) minX = box.x;
+    if (box.y < minY) minY = box.y;
+    if (box.x + box.w > maxX) maxX = box.x + box.w;
+    if (box.y + box.h > maxY) maxY = box.y + box.h;
+  }
+  return { x: minX, y: minY, w: maxX - minX, h: maxY - minY };
+}
+function textWidth(text, fontSize) {
+  let em = 0;
+  for (const character of text) {
+    const code = character.codePointAt(0) ?? 0;
+    if (code > 11903) {
+      em += 1;
+    } else if (character === " ") {
+      em += 0.26;
+    } else if (/[.,:;'`!|iljtIf()[\]{}]/.test(character)) {
+      em += 0.31;
+    } else if (/[A-Z0-9@#%&WM]/.test(character)) {
+      em += 0.62;
+    } else {
+      em += 0.52;
+    }
+  }
+  return em * fontSize;
+}
+function wrapText(text, fontSize, maxWidth, maxLines = 2) {
+  if (textWidth(text, fontSize) <= maxWidth) return [text];
+  const lines = [];
+  let current = "";
+  const tokens = text.match(/[⺀-鿿豈-﫿＀-￯]|[^\s⺀-鿿]+|\s+/g) ?? [text];
+  for (const token of tokens) {
+    const candidate = current + token;
+    if (current !== "" && textWidth(candidate.trimEnd(), fontSize) > maxWidth) {
+      lines.push(current.trimEnd());
+      current = token.trimStart();
+      if (lines.length === maxLines) break;
+    } else {
+      current = candidate;
+    }
+  }
+  if (lines.length < maxLines && current.trim() !== "") lines.push(current.trimEnd());
+  if (lines.length === maxLines) {
+    const placed = lines.join("").replace(/\s+/g, "");
+    const whole = text.replace(/\s+/g, "");
+    if (placed.length < whole.length) {
+      const last = lines[maxLines - 1] ?? "";
+      lines[maxLines - 1] = `${clampToWidth(last, fontSize, maxWidth - textWidth("\u2026", fontSize))}\u2026`;
+    }
+  }
+  return lines;
+}
+function clampToWidth(text, fontSize, maxWidth) {
+  let width = 0;
+  let out = "";
+  for (const character of text) {
+    const next = textWidth(character, fontSize);
+    if (width + next > maxWidth) break;
+    width += next;
+    out += character;
+  }
+  return out.trimEnd();
+}
+const TYPE = {
+  /** A node's name. */
+  label: 13,
+  /** The line under it. */
+  sub: 10.5,
+  /** A mono chip: a tag, a classification, a step number. */
+  chip: 9.5,
+  /** A relationship's own wording. */
+  edge: 10.5,
+  /** A band, lane or stage heading. */
+  band: 10.5
+};
+const BOX = {
+  node: { w: 168, h: 62 },
+  wide: { w: 200, h: 62 },
+  participant: { w: 128, h: 46 }
+};
+function nodeHeight(labelLines, hasSub, hasTag = false, base = BOX.node.h) {
+  const content = 20 + labelLines * (TYPE.label * 1.25) + (hasSub ? TYPE.sub * 1.5 : 0) + (hasTag ? 20 : 0);
+  return Math.max(base, Math.ceil(content));
+}
+function viewBoxOf(box) {
+  return `${round(box.x)} ${round(box.y)} ${round(box.w)} ${round(box.h)}`;
+}
+function round(value) {
+  return Math.round(value * 10) / 10;
+}
+export {
+  BOX,
+  TYPE,
+  centerOf,
+  inflate,
+  nodeHeight,
+  round,
+  textWidth,
+  union,
+  viewBoxOf,
+  wrapText
+};
+//# sourceMappingURL=geometry.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/diagrams/lib/geometry.ts"],"sourcesContent":["/**\n * The arithmetic every figure shares: boxes, text extents, and the frame that\n * ends up around them.\n *\n * Everything here is a pure function of numbers already in the specification.\n * That is not a stylistic preference — it is what lets these figures render on\n * a server. A layout that measured real text would need a DOM, a layout that\n * relaxed a force graph would need to settle, and neither can produce the same\n * markup twice. Both would hydrate into a different picture than the one that\n * was sent, which for a diagram is worse than not rendering at all.\n */\n\n/** A rectangle in the figure's user-unit space. */\nexport interface Box {\n  x: number\n  y: number\n  w: number\n  h: number\n}\n\nexport const centerOf = (box: Box): [number, number] => [box.x + box.w / 2, box.y + box.h / 2]\n\n/** Grows a rectangle by `pad` on every side. */\nexport function inflate(box: Box, pad: number): Box {\n  return { x: box.x - pad, y: box.y - pad, w: box.w + pad * 2, h: box.h + pad * 2 }\n}\n\n/** The smallest rectangle containing all of them. Returns null for an empty list. */\nexport function union(boxes: Box[]): Box | null {\n  if (boxes.length === 0) return null\n  let minX = Infinity\n  let minY = Infinity\n  let maxX = -Infinity\n  let maxY = -Infinity\n  for (const box of boxes) {\n    if (box.x < minX) minX = box.x\n    if (box.y < minY) minY = box.y\n    if (box.x + box.w > maxX) maxX = box.x + box.w\n    if (box.y + box.h > maxY) maxY = box.y + box.h\n  }\n  return { x: minX, y: minY, w: maxX - minX, h: maxY - minY }\n}\n\n/**\n * How wide a run of text is, without measuring it.\n *\n * A real measurement needs a DOM and the loaded face, and this module has\n * neither by design — so this is an estimate, and the honest thing is to say\n * what kind. Latin glyphs in the system's sans average close to 0.52em of\n * advance across ordinary label text; digits and capitals run wider; a CJK\n * ideograph is a full em by definition, as is a fullwidth punctuation mark.\n *\n * The estimate is used for two things and neither needs to be exact: choosing a\n * box wide enough that a label is not clipped, and deciding where a line's\n * label mask sits. Both fail gracefully — a box a few units too wide is\n * invisible, and a mask a few units too wide hides a little more of a line than\n * it had to.\n *\n * It is deliberately NOT used to justify, wrap mid-word, or letter-space\n * anything. Those need the real face.\n */\nexport function textWidth(text: string, fontSize: number): number {\n  let em = 0\n  for (const character of text) {\n    const code = character.codePointAt(0) ?? 0\n    if (code > 0x2e7f) {\n      // CJK, kana, hangul, fullwidth forms — one em each.\n      em += 1\n    } else if (character === ' ') {\n      em += 0.26\n    } else if (/[.,:;'`!|iljtIf()[\\]{}]/.test(character)) {\n      em += 0.31\n    } else if (/[A-Z0-9@#%&WM]/.test(character)) {\n      em += 0.62\n    } else {\n      em += 0.52\n    }\n  }\n  return em * fontSize\n}\n\n/**\n * A label broken to fit a width, with a hard cap on how many lines it may take.\n *\n * Breaks on spaces for Latin and between characters for CJK, which has no\n * spaces to break on. A word longer than the whole line is left to overflow\n * rather than hyphenated: an identifier — `TenantMainMiddleware` — split across\n * two lines is harder to read than one that runs slightly wide, and the caller\n * sized the box from `textWidth` anyway.\n *\n * The last line is ellipsised when the text does not fit in `maxLines`, because\n * silently dropping the tail is how a diagram comes to say something it does\n * not mean.\n */\nexport function wrapText(\n  text: string,\n  fontSize: number,\n  maxWidth: number,\n  maxLines = 2,\n): string[] {\n  if (textWidth(text, fontSize) <= maxWidth) return [text]\n\n  const lines: string[] = []\n  let current = ''\n\n  // Latin words stay whole; a CJK run is a sequence of individual break\n  // opportunities, so each ideograph becomes its own token.\n  const tokens = text.match(/[⺀-鿿豈-﫿＀-￯]|[^\\s⺀-鿿]+|\\s+/g) ?? [text]\n\n  for (const token of tokens) {\n    const candidate = current + token\n    if (current !== '' && textWidth(candidate.trimEnd(), fontSize) > maxWidth) {\n      lines.push(current.trimEnd())\n      current = token.trimStart()\n      if (lines.length === maxLines) break\n    } else {\n      current = candidate\n    }\n  }\n\n  if (lines.length < maxLines && current.trim() !== '') lines.push(current.trimEnd())\n\n  if (lines.length === maxLines) {\n    // Anything still unplaced belongs to the last line, which must therefore\n    // admit that it is truncated.\n    const placed = lines.join('').replace(/\\s+/g, '')\n    const whole = text.replace(/\\s+/g, '')\n    if (placed.length < whole.length) {\n      const last = lines[maxLines - 1] ?? ''\n      lines[maxLines - 1] = `${clampToWidth(last, fontSize, maxWidth - textWidth('…', fontSize))}…`\n    }\n  }\n\n  return lines\n}\n\n/** The longest prefix of `text` that fits, character by character. */\nfunction clampToWidth(text: string, fontSize: number, maxWidth: number): string {\n  let width = 0\n  let out = ''\n  for (const character of text) {\n    const next = textWidth(character, fontSize)\n    if (width + next > maxWidth) break\n    width += next\n    out += character\n  }\n  return out.trimEnd()\n}\n\n/**\n * The type scale inside a figure, in user units.\n *\n * Fixed numbers rather than tokens, because these are SVG geometry: a `<text>`\n * sized in `rem` inside a scaled `viewBox` changes size when the figure is\n * zoomed, which means a diagram at 200% is a different diagram. The figure\n * scales as one picture, so its type scales with it.\n */\nexport const TYPE = {\n  /** A node's name. */\n  label: 13,\n  /** The line under it. */\n  sub: 10.5,\n  /** A mono chip: a tag, a classification, a step number. */\n  chip: 9.5,\n  /** A relationship's own wording. */\n  edge: 10.5,\n  /** A band, lane or stage heading. */\n  band: 10.5,\n} as const\n\n/** Default box sizes per diagram type, in user units. */\nexport const BOX = {\n  node: { w: 168, h: 62 },\n  wide: { w: 200, h: 62 },\n  participant: { w: 128, h: 46 },\n} as const\n\n/**\n * How tall a box has to be to hold what it was given.\n *\n * A declared height is a FLOOR, not a ceiling. When a specification asks for a\n * 64-unit box and then puts two lines of label, a sublabel and a tag chip in\n * it, honouring the 64 prints the tag over the sublabel — which reads as a\n * rendering fault rather than as a box that was asked to hold too much. Growing\n * the box is visible and correct; clipping is invisible and wrong.\n */\nexport function nodeHeight(\n  labelLines: number,\n  hasSub: boolean,\n  hasTag = false,\n  base: number = BOX.node.h,\n): number {\n  const content =\n    20 + labelLines * (TYPE.label * 1.25) + (hasSub ? TYPE.sub * 1.5 : 0) + (hasTag ? 20 : 0)\n  return Math.max(base, Math.ceil(content))\n}\n\n/** `viewBox` as the attribute wants it. */\nexport function viewBoxOf(box: Box): string {\n  return `${round(box.x)} ${round(box.y)} ${round(box.w)} ${round(box.h)}`\n}\n\n/**\n * Coordinates rounded to a tenth.\n *\n * SVG happily accepts eighteen decimal places and puts every one of them in the\n * markup, which on a figure with two hundred line segments is a measurable\n * share of the document. A tenth of a user unit is well under a device pixel at\n * any zoom a reader will use.\n */\nexport function round(value: number): number {\n  return Math.round(value * 10) / 10\n}\n"],"mappings":"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","names":[]}

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

@@ -0,0 +1,32 @@
+import { NodeKind, LegendMode, LifecycleStateKind, Variant } from '../spec.js';
+
+type LegendEntry = {
+    key: string;
+    label: string;
+    sample: React.ReactNode;
+};
+/**
+ * Which entries the key shows.
+ *
+ * `auto` — the default and the truthful one — lists only the kinds the figure
+ * actually drew. A key that names seven kinds beside a figure using three is
+ * not more informative; it is four claims the picture does not support.
+ */
+declare function resolveLegend<T extends string>(used: T[], mode?: LegendMode, all?: T[], overrides?: Record<string, {
+    label?: string;
+    visible?: boolean;
+}>): T[];
+/** A key entry for each node kind, drawn with the same sigil the figure uses. */
+declare function kindLegend(kinds: NodeKind[], overrides?: Record<string, {
+    label?: string;
+}>): LegendEntry[];
+/** A key entry for each relationship variant, drawn as the line itself. */
+declare function variantLegend(variants: (Variant | 'return')[], overrides?: Record<string, {
+    label?: string;
+}>): LegendEntry[];
+/** A key entry for each lifecycle state kind, drawn as its plate. */
+declare function stateLegend(kinds: LifecycleStateKind[], overrides?: Record<string, {
+    label?: string;
+}>): LegendEntry[];
+
+export { type LegendEntry, kindLegend, resolveLegend, stateLegend, variantLegend };

package/dist/diagrams/lib/legend.js

@@ -0,0 +1,84 @@
+import { jsx } from "react/jsx-runtime";
+import { KIND_WORD, Sigil } from "./marks.js";
+const VARIANT_LABEL = {
+  default: "Call",
+  emphasis: "Primary path",
+  security: "Crosses a trust boundary",
+  dashed: "Asynchronous",
+  return: "Return"
+};
+const STATE_LABEL = {
+  start: "Entry",
+  active: "Working",
+  waiting: "Waiting",
+  decision: "Decision",
+  success: "Succeeded",
+  failure: "Failed",
+  neutral: "Idle",
+  external: "External"
+};
+function resolveLegend(used, mode = "auto", all = [], overrides) {
+  if (mode === "hidden") return [];
+  const base = mode === "all" ? all : [...new Set(used)];
+  return base.filter((key) => overrides?.[key]?.visible !== false);
+}
+function kindLegend(kinds, overrides) {
+  return kinds.map((kind) => ({
+    key: kind,
+    // The key names a kind with the SAME word the plate's eyebrow prints. They
+    // were two vocabularies for one fact — a plate reading SERVICE beside a key
+    // reading "Datastore" — which is the one thing a key must never do.
+    label: overrides?.[kind]?.label ?? KIND_WORD[kind],
+    sample: /* @__PURE__ */ jsx("g", { transform: "translate(1, 1)", children: /* @__PURE__ */ jsx(Sigil, { kind, x: 0, y: 0 }) })
+  }));
+}
+function variantLegend(variants, overrides) {
+  return variants.map((variant) => ({
+    key: variant,
+    label: overrides?.[variant]?.label ?? VARIANT_LABEL[variant],
+    sample: /* @__PURE__ */ jsx(
+      "path",
+      {
+        d: "M 0.5 7 H 13.5",
+        fill: "none",
+        className: variant === "emphasis" ? "stroke-(--diagram-line-strong) [stroke-width:2.4]" : variant === "security" ? "stroke-(--diagram-line) [stroke-width:1.6] [stroke-dasharray:4_2]" : variant === "dashed" || variant === "return" ? "stroke-(--diagram-line-soft) [stroke-width:1.6] [stroke-dasharray:3_2.5]" : "stroke-(--diagram-line) [stroke-width:1.6]"
+      }
+    )
+  }));
+}
+function stateLegend(kinds, overrides) {
+  return kinds.map((kind) => ({
+    key: kind,
+    label: overrides?.[kind]?.label ?? STATE_LABEL[kind],
+    sample: kind === "decision" ? /* @__PURE__ */ jsx(
+      "path",
+      {
+        d: "M 7 1 L 13 7 L 7 13 L 1 7 Z",
+        className: "fill-(--diagram-node) stroke-(--diagram-rule-hard) [stroke-width:1.2]"
+      }
+    ) : kind === "external" ? /* @__PURE__ */ jsx(
+      "path",
+      {
+        d: "M 1 2 H 9.5 L 13 5.5 V 12 H 1 Z",
+        className: "fill-(--diagram-node-2) stroke-(--diagram-rule) [stroke-width:1.2]"
+      }
+    ) : /* @__PURE__ */ jsx(
+      "rect",
+      {
+        x: "1",
+        y: "3",
+        width: "12",
+        height: "8",
+        rx: kind === "start" ? 4 : 2,
+        className: kind === "start" ? "fill-(--diagram-plate) stroke-(--diagram-plate) [stroke-width:1.2]" : kind === "success" ? "fill-(--success-wash) stroke-(--success) [stroke-width:1.2]" : kind === "failure" ? "fill-(--danger-wash) stroke-(--danger) [stroke-width:1.2]" : kind === "waiting" ? "fill-(--diagram-node) stroke-(--diagram-rule) [stroke-width:1.2] [stroke-dasharray:3_2]" : kind === "neutral" ? "fill-(--diagram-node-2) stroke-(--diagram-rule) [stroke-width:1.2]" : "fill-(--diagram-node) stroke-(--diagram-rule-hard) [stroke-width:1.2]"
+      }
+    )
+  }));
+}
+export {
+  kindLegend,
+  resolveLegend,
+  stateLegend,
+  variantLegend
+};
+//# sourceMappingURL=legend.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/diagrams/lib/legend.tsx"],"sourcesContent":["import type { LegendMode, LifecycleStateKind, NodeKind, Variant } from '../spec'\nimport { KIND_WORD, Sigil } from './marks'\n\nconst VARIANT_LABEL: Record<Variant | 'return', string> = {\n  default: 'Call',\n  emphasis: 'Primary path',\n  security: 'Crosses a trust boundary',\n  dashed: 'Asynchronous',\n  return: 'Return',\n}\n\nconst STATE_LABEL: Record<LifecycleStateKind, string> = {\n  start: 'Entry',\n  active: 'Working',\n  waiting: 'Waiting',\n  decision: 'Decision',\n  success: 'Succeeded',\n  failure: 'Failed',\n  neutral: 'Idle',\n  external: 'External',\n}\n\nexport type LegendEntry = { key: string; label: string; sample: React.ReactNode }\n\n/**\n * Which entries the key shows.\n *\n * `auto` — the default and the truthful one — lists only the kinds the figure\n * actually drew. A key that names seven kinds beside a figure using three is\n * not more informative; it is four claims the picture does not support.\n */\nexport function resolveLegend<T extends string>(\n  used: T[],\n  mode: LegendMode = 'auto',\n  all: T[] = [],\n  overrides?: Record<string, { label?: string; visible?: boolean }>,\n): T[] {\n  if (mode === 'hidden') return []\n  const base = mode === 'all' ? all : [...new Set(used)]\n  return base.filter((key) => overrides?.[key]?.visible !== false)\n}\n\n/** A key entry for each node kind, drawn with the same sigil the figure uses. */\nexport function kindLegend(\n  kinds: NodeKind[],\n  overrides?: Record<string, { label?: string }>,\n): LegendEntry[] {\n  return kinds.map((kind) => ({\n    key: kind,\n    // The key names a kind with the SAME word the plate's eyebrow prints. They\n    // were two vocabularies for one fact — a plate reading SERVICE beside a key\n    // reading \"Datastore\" — which is the one thing a key must never do.\n    label: overrides?.[kind]?.label ?? KIND_WORD[kind],\n    sample: (\n      <g transform=\"translate(1, 1)\">\n        <Sigil kind={kind} x={0} y={0} />\n      </g>\n    ),\n  }))\n}\n\n/** A key entry for each relationship variant, drawn as the line itself. */\nexport function variantLegend(\n  variants: (Variant | 'return')[],\n  overrides?: Record<string, { label?: string }>,\n): LegendEntry[] {\n  return variants.map((variant) => ({\n    key: variant,\n    label: overrides?.[variant]?.label ?? VARIANT_LABEL[variant],\n    sample: (\n      <path\n        d=\"M 0.5 7 H 13.5\"\n        fill=\"none\"\n        className={\n          variant === 'emphasis'\n            ? 'stroke-(--diagram-line-strong) [stroke-width:2.4]'\n            : variant === 'security'\n              ? 'stroke-(--diagram-line) [stroke-width:1.6] [stroke-dasharray:4_2]'\n              : variant === 'dashed' || variant === 'return'\n                ? 'stroke-(--diagram-line-soft) [stroke-width:1.6] [stroke-dasharray:3_2.5]'\n                : 'stroke-(--diagram-line) [stroke-width:1.6]'\n        }\n      />\n    ),\n  }))\n}\n\n/** A key entry for each lifecycle state kind, drawn as its plate. */\nexport function stateLegend(\n  kinds: LifecycleStateKind[],\n  overrides?: Record<string, { label?: string }>,\n): LegendEntry[] {\n  return kinds.map((kind) => ({\n    key: kind,\n    label: overrides?.[kind]?.label ?? STATE_LABEL[kind],\n    sample:\n      kind === 'decision' ? (\n        <path\n          d=\"M 7 1 L 13 7 L 7 13 L 1 7 Z\"\n          className=\"fill-(--diagram-node) stroke-(--diagram-rule-hard) [stroke-width:1.2]\"\n        />\n      ) : kind === 'external' ? (\n        <path\n          d=\"M 1 2 H 9.5 L 13 5.5 V 12 H 1 Z\"\n          className=\"fill-(--diagram-node-2) stroke-(--diagram-rule) [stroke-width:1.2]\"\n        />\n      ) : (\n        <rect\n          x=\"1\"\n          y=\"3\"\n          width=\"12\"\n          height=\"8\"\n          rx={kind === 'start' ? 4 : 2}\n          className={\n            kind === 'start'\n              ? 'fill-(--diagram-plate) stroke-(--diagram-plate) [stroke-width:1.2]'\n              : kind === 'success'\n                ? 'fill-(--success-wash) stroke-(--success) [stroke-width:1.2]'\n                : kind === 'failure'\n                  ? 'fill-(--danger-wash) stroke-(--danger) [stroke-width:1.2]'\n                  : kind === 'waiting'\n                    ? 'fill-(--diagram-node) stroke-(--diagram-rule) [stroke-width:1.2] [stroke-dasharray:3_2]'\n                    : kind === 'neutral'\n                      ? 'fill-(--diagram-node-2) stroke-(--diagram-rule) [stroke-width:1.2]'\n                      : 'fill-(--diagram-node) stroke-(--diagram-rule-hard) [stroke-width:1.2]'\n          }\n        />\n      ),\n  }))\n}\n"],"mappings":"AAuDQ;AAtDR,SAAS,WAAW,aAAa;AAEjC,MAAM,gBAAoD;AAAA,EACxD,SAAS;AAAA,EACT,UAAU;AAAA,EACV,UAAU;AAAA,EACV,QAAQ;AAAA,EACR,QAAQ;AACV;AAEA,MAAM,cAAkD;AAAA,EACtD,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,SAAS;AAAA,EACT,UAAU;AAAA,EACV,SAAS;AAAA,EACT,SAAS;AAAA,EACT,SAAS;AAAA,EACT,UAAU;AACZ;AAWO,SAAS,cACd,MACA,OAAmB,QACnB,MAAW,CAAC,GACZ,WACK;AACL,MAAI,SAAS,SAAU,QAAO,CAAC;AAC/B,QAAM,OAAO,SAAS,QAAQ,MAAM,CAAC,GAAG,IAAI,IAAI,IAAI,CAAC;AACrD,SAAO,KAAK,OAAO,CAAC,QAAQ,YAAY,GAAG,GAAG,YAAY,KAAK;AACjE;AAGO,SAAS,WACd,OACA,WACe;AACf,SAAO,MAAM,IAAI,CAAC,UAAU;AAAA,IAC1B,KAAK;AAAA;AAAA;AAAA;AAAA,IAIL,OAAO,YAAY,IAAI,GAAG,SAAS,UAAU,IAAI;AAAA,IACjD,QACE,oBAAC,OAAE,WAAU,mBACX,8BAAC,SAAM,MAAY,GAAG,GAAG,GAAG,GAAG,GACjC;AAAA,EAEJ,EAAE;AACJ;AAGO,SAAS,cACd,UACA,WACe;AACf,SAAO,SAAS,IAAI,CAAC,aAAa;AAAA,IAChC,KAAK;AAAA,IACL,OAAO,YAAY,OAAO,GAAG,SAAS,cAAc,OAAO;AAAA,IAC3D,QACE;AAAA,MAAC;AAAA;AAAA,QACC,GAAE;AAAA,QACF,MAAK;AAAA,QACL,WACE,YAAY,aACR,sDACA,YAAY,aACV,sEACA,YAAY,YAAY,YAAY,WAClC,6EACA;AAAA;AAAA,IAEZ;AAAA,EAEJ,EAAE;AACJ;AAGO,SAAS,YACd,OACA,WACe;AACf,SAAO,MAAM,IAAI,CAAC,UAAU;AAAA,IAC1B,KAAK;AAAA,IACL,OAAO,YAAY,IAAI,GAAG,SAAS,YAAY,IAAI;AAAA,IACnD,QACE,SAAS,aACP;AAAA,MAAC;AAAA;AAAA,QACC,GAAE;AAAA,QACF,WAAU;AAAA;AAAA,IACZ,IACE,SAAS,aACX;AAAA,MAAC;AAAA;AAAA,QACC,GAAE;AAAA,QACF,WAAU;AAAA;AAAA,IACZ,IAEA;AAAA,MAAC;AAAA;AAAA,QACC,GAAE;AAAA,QACF,GAAE;AAAA,QACF,OAAM;AAAA,QACN,QAAO;AAAA,QACP,IAAI,SAAS,UAAU,IAAI;AAAA,QAC3B,WACE,SAAS,UACL,uEACA,SAAS,YACP,gEACA,SAAS,YACP,8DACA,SAAS,YACP,4FACA,SAAS,YACP,uEACA;AAAA;AAAA,IAEhB;AAAA,EAEN,EAAE;AACJ;","names":[]}