@misoto22/design 0.6.1 → 0.7.0

package/dist/diagrams/DiagramInspector/DiagramInspector.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/diagrams/DiagramInspector/DiagramInspector.tsx"],"sourcesContent":["'use client'\n\nimport type { ReactNode } from 'react'\nimport { X } from 'lucide-react'\nimport { cn } from '../../lib/cn'\n\n/** One fact about the selected thing: a short label and its value. */\nexport interface InspectorFact {\n  label: string\n  value: ReactNode\n  /** Sets the value in mono — an id, a path, a version, a port. */\n  mono?: boolean\n}\n\n/** A relationship the selected thing takes part in. */\nexport interface InspectorLink {\n  id?: string\n  /** Which way it runs, relative to the selected node. */\n  direction: 'in' | 'out'\n  label: string\n  /** What sits at the other end. */\n  peer: string\n  onSelect?: () => void\n}\n\nexport interface DiagramInspectorProps {\n  /** The kicker over the title — what KIND of thing this panel is showing. */\n  eyebrow?: string\n  title: string\n  description?: ReactNode\n  facts?: InspectorFact[]\n  links?: InspectorLink[]\n  /** Buttons under the facts — copy a link, open the source. */\n  actions?: ReactNode\n  onClose?: () => void\n  className?: string\n  /** Renders as a floating panel over the surface rather than in the flow. */\n  floating?: boolean\n}\n\n/**\n * What the reader just picked, written out.\n *\n * A diagram can hold about eight words per node before it stops being a diagram\n * and starts being a document with lines drawn on it. Everything past those\n * eight — the port, the owning team, the file it was read out of, the six\n * relationships it takes part in — belongs beside the picture rather than\n * inside it, and this is that place.\n *\n * NOT A DIALOG, and that is deliberate. An inspector is a REGION that changes\n * with the selection, not a modal. Giving it `role=\"dialog\"` would trap focus\n * and demand dismissal for something the reader never opened — they clicked a\n * node, and the panel followed. So it is a labelled region with\n * `aria-live=\"polite\"`, which is what makes a screen reader announce the new\n * selection without stealing the cursor from whatever the reader was doing.\n *\n * The relationships are real buttons when they carry `onSelect`, which is how\n * the diagram becomes navigable from the keyboard: a reader can walk the graph\n * peer by peer without ever touching the picture.\n *\n * @example\n * <DiagramInspector\n *   eyebrow=\"Service\"\n *   title=\"API Server\"\n *   description=\"FastAPI, behind the load balancer.\"\n *   facts={[\n *     { label: 'Port', value: '8000', mono: true },\n *     { label: 'Id', value: 'api', mono: true },\n *   ]}\n *   links={[{ direction: 'out', label: 'SQL', peer: 'PostgreSQL' }]}\n *   onClose={() => setSelected(null)}\n * />\n */\nexport function DiagramInspector({\n  eyebrow,\n  title,\n  description,\n  facts = [],\n  links = [],\n  actions,\n  onClose,\n  className,\n  floating,\n}: DiagramInspectorProps) {\n  return (\n    <section\n      aria-label={`${title} details`}\n      aria-live=\"polite\"\n      className={cn(\n        'flex flex-col gap-3 rounded-(--radius-lg) border border-(--rule-2) bg-(--panel-bg) p-4',\n        floating && 'absolute bottom-3 start-3 z-(--z-sticky) w-72 max-w-[calc(100%-1.5rem)]',\n        className,\n      )}\n    >\n      <div className=\"flex items-start justify-between gap-3\">\n        <div className=\"flex min-w-0 flex-col gap-1\">\n          {eyebrow && <span className=\"eyebrow text-(--ink-3-aa)\">{eyebrow}</span>}\n          <h3 className=\"m-0 font-sans text-[15px] leading-tight font-normal text-(--ink)\">\n            {title}\n          </h3>\n        </div>\n        {onClose && (\n          <button\n            type=\"button\"\n            onClick={onClose}\n            aria-label=\"Clear the selection\"\n            className=\"-me-1 -mt-1 flex size-7 shrink-0 items-center justify-center rounded-(--radius-xs) text-(--ink-3-aa) transition-colors duration-(--duration-fast) hover:bg-(--stone) hover:text-(--ink) focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-(--ring)\"\n          >\n            <X size={14} strokeWidth={1.5} aria-hidden />\n          </button>\n        )}\n      </div>\n\n      {description && (\n        <p className=\"m-0 text-[13px] leading-[1.55] text-(--ink-2)\">{description}</p>\n      )}\n\n      {facts.length > 0 && (\n        // A definition list, because that is what this is: each row is a term\n        // and its value, and a grid of divs tells a screen reader nothing about\n        // which value belongs to which label.\n        <dl className=\"m-0 grid grid-cols-[auto_1fr] gap-x-4 gap-y-1.5\">\n          {facts.map((fact) => (\n            <div key={fact.label} className=\"contents\">\n              <dt className=\"mono-meta text-(--ink-3-aa)\">{fact.label}</dt>\n              <dd\n                className={cn(\n                  'm-0 min-w-0 break-words text-[13px] leading-snug text-(--ink)',\n                  fact.mono && 'font-mono text-[12px]',\n                )}\n              >\n                {fact.value}\n              </dd>\n            </div>\n          ))}\n        </dl>\n      )}\n\n      {links.length > 0 && (\n        <div className=\"flex flex-col gap-1 border-t border-(--rule) pt-3\">\n          <span className=\"eyebrow text-(--ink-3-aa)\">Relationships</span>\n          <ul className=\"m-0 flex list-none flex-col gap-0.5 p-0\">\n            {links.map((link, index) => {\n              const body = (\n                <>\n                  {/* The arrow is hidden from assistive tech and the direction\n                      spelled out instead: a screen reader reading \"→\" aloud is\n                      either silence or the word \"arrow\", and neither says which\n                      way the relationship runs. */}\n                  <span aria-hidden className=\"font-mono text-[12px] text-(--ink-3-aa)\">\n                    {link.direction === 'out' ? '→' : '←'}\n                  </span>\n                  <span className=\"sr-only\">\n                    {link.direction === 'out' ? 'to' : 'from'}\n                  </span>\n                  <span className=\"min-w-0 flex-1 truncate text-[13px] text-(--ink)\">\n                    {link.peer}\n                  </span>\n                  {link.label && (\n                    <span className=\"mono-meta shrink-0 text-(--ink-3-aa)\">{link.label}</span>\n                  )}\n                </>\n              )\n\n              const row = 'flex w-full items-baseline gap-2 rounded-(--radius-xs) px-1 py-1 text-start'\n\n              return (\n                <li key={link.id ?? index}>\n                  {link.onSelect ? (\n                    <button\n                      type=\"button\"\n                      onClick={link.onSelect}\n                      className={cn(\n                        row,\n                        'transition-colors duration-(--duration-fast) hover:bg-(--stone) focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-(--ring)',\n                      )}\n                    >\n                      {body}\n                    </button>\n                  ) : (\n                    <span className={row}>{body}</span>\n                  )}\n                </li>\n              )\n            })}\n          </ul>\n        </div>\n      )}\n\n      {actions && <div className=\"flex flex-wrap items-center gap-2 pt-1\">{actions}</div>}\n    </section>\n  )\n}\n\nexport default DiagramInspector\n"],"mappings":";AA+FQ,SAiDQ,UAhDM,KADd;AA5FR,SAAS,SAAS;AAClB,SAAS,UAAU;AAqEZ,SAAS,iBAAiB;AAAA,EAC/B;AAAA,EACA;AAAA,EACA;AAAA,EACA,QAAQ,CAAC;AAAA,EACT,QAAQ,CAAC;AAAA,EACT;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAA0B;AACxB,SACE;AAAA,IAAC;AAAA;AAAA,MACC,cAAY,GAAG,KAAK;AAAA,MACpB,aAAU;AAAA,MACV,WAAW;AAAA,QACT;AAAA,QACA,YAAY;AAAA,QACZ;AAAA,MACF;AAAA,MAEA;AAAA,6BAAC,SAAI,WAAU,0CACb;AAAA,+BAAC,SAAI,WAAU,+BACZ;AAAA,uBAAW,oBAAC,UAAK,WAAU,6BAA6B,mBAAQ;AAAA,YACjE,oBAAC,QAAG,WAAU,oEACX,iBACH;AAAA,aACF;AAAA,UACC,WACC;AAAA,YAAC;AAAA;AAAA,cACC,MAAK;AAAA,cACL,SAAS;AAAA,cACT,cAAW;AAAA,cACX,WAAU;AAAA,cAEV,8BAAC,KAAE,MAAM,IAAI,aAAa,KAAK,eAAW,MAAC;AAAA;AAAA,UAC7C;AAAA,WAEJ;AAAA,QAEC,eACC,oBAAC,OAAE,WAAU,iDAAiD,uBAAY;AAAA,QAG3E,MAAM,SAAS;AAAA;AAAA;AAAA,QAId,oBAAC,QAAG,WAAU,mDACX,gBAAM,IAAI,CAAC,SACV,qBAAC,SAAqB,WAAU,YAC9B;AAAA,8BAAC,QAAG,WAAU,+BAA+B,eAAK,OAAM;AAAA,UACxD;AAAA,YAAC;AAAA;AAAA,cACC,WAAW;AAAA,gBACT;AAAA,gBACA,KAAK,QAAQ;AAAA,cACf;AAAA,cAEC,eAAK;AAAA;AAAA,UACR;AAAA,aATQ,KAAK,KAUf,CACD,GACH;AAAA,QAGD,MAAM,SAAS,KACd,qBAAC,SAAI,WAAU,qDACb;AAAA,8BAAC,UAAK,WAAU,6BAA4B,2BAAa;AAAA,UACzD,oBAAC,QAAG,WAAU,2CACX,gBAAM,IAAI,CAAC,MAAM,UAAU;AAC1B,kBAAM,OACJ,iCAKE;AAAA,kCAAC,UAAK,eAAW,MAAC,WAAU,2CACzB,eAAK,cAAc,QAAQ,WAAM,UACpC;AAAA,cACA,oBAAC,UAAK,WAAU,WACb,eAAK,cAAc,QAAQ,OAAO,QACrC;AAAA,cACA,oBAAC,UAAK,WAAU,oDACb,eAAK,MACR;AAAA,cACC,KAAK,SACJ,oBAAC,UAAK,WAAU,wCAAwC,eAAK,OAAM;AAAA,eAEvE;AAGF,kBAAM,MAAM;AAEZ,mBACE,oBAAC,QACE,eAAK,WACJ;AAAA,cAAC;AAAA;AAAA,gBACC,MAAK;AAAA,gBACL,SAAS,KAAK;AAAA,gBACd,WAAW;AAAA,kBACT;AAAA,kBACA;AAAA,gBACF;AAAA,gBAEC;AAAA;AAAA,YACH,IAEA,oBAAC,UAAK,WAAW,KAAM,gBAAK,KAbvB,KAAK,MAAM,KAepB;AAAA,UAEJ,CAAC,GACH;AAAA,WACF;AAAA,QAGD,WAAW,oBAAC,SAAI,WAAU,0CAA0C,mBAAQ;AAAA;AAAA;AAAA,EAC/E;AAEJ;AAEA,IAAO,2BAAQ;","names":[]}

package/dist/diagrams/DiagramLegend/DiagramLegend.d.ts

@@ -0,0 +1,42 @@
+import * as react from 'react';
+import { ReactNode } from 'react';
+
+interface DiagramLegendEntry {
+    /** Stable key, and what a caller keys its own data by. */
+    key: string;
+    label: string;
+    /**
+     * The drawn mark, as SVG children on a 14 × 14 grid.
+     *
+     * Markup rather than a name from a fixed list, because the whole point of a
+     * key is that it shows the SAME mark the figure drew — and a figure that
+     * invented a new one would have to add it here too. `kindLegend`,
+     * `variantLegend` and `stateLegend` build the standard sets out of the
+     * renderers' own drawing code, so those can never drift.
+     */
+    sample: ReactNode;
+}
+interface DiagramLegendProps {
+    entries: DiagramLegendEntry[];
+    /** The kicker before the row. Pass null for a bare row. */
+    title?: string | null;
+    className?: string;
+}
+/**
+ * The key: which drawn form means which kind of thing.
+ *
+ * Not optional furniture in a monochrome system, and this is the one place that
+ * has to be said plainly. When the difference between a queue and a cache is a
+ * sigil rather than a colour, the key is the only place a reader is told what
+ * the sigil means — a figure whose forms are undocumented is a figure whose
+ * forms might as well not have been drawn.
+ *
+ * A `<ul>` rather than a row of `<span>`s: it is a list of pairs, and the count
+ * is part of what a screen reader should say about it.
+ *
+ * @example
+ * <DiagramLegend entries={kindLegend(['backend', 'database'])} />
+ */
+declare function DiagramLegend({ entries, title, className }: DiagramLegendProps): react.JSX.Element | null;
+
+export { DiagramLegend, type DiagramLegendEntry, type DiagramLegendProps, DiagramLegend as default };

package/dist/diagrams/DiagramLegend/DiagramLegend.js

@@ -0,0 +1,35 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "../../lib/cn.js";
+function DiagramLegend({ entries, title = "Key", className }) {
+  if (entries.length === 0) return null;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "flex flex-wrap items-baseline gap-x-5 gap-y-2 border-t border-(--rule) pt-3",
+        className
+      ),
+      children: [
+        title && /* @__PURE__ */ jsx("span", { className: "eyebrow text-(--ink-3-aa)", children: title }),
+        /* @__PURE__ */ jsx(
+          "ul",
+          {
+            className: "m-0 flex list-none flex-wrap items-center gap-x-4 gap-y-2 p-0",
+            "aria-label": title ?? "Key",
+            children: entries.map((entry) => /* @__PURE__ */ jsxs("li", { className: "flex items-center gap-2", children: [
+              /* @__PURE__ */ jsx("svg", { viewBox: "0 0 14 14", className: "size-4 shrink-0", "aria-hidden": "true", children: entry.sample }),
+              /* @__PURE__ */ jsx("span", { className: "mono-meta text-(--ink-2)", children: entry.label })
+            ] }, entry.key))
+          }
+        )
+      ]
+    }
+  );
+}
+var DiagramLegend_default = DiagramLegend;
+export {
+  DiagramLegend,
+  DiagramLegend_default as default
+};
+//# sourceMappingURL=DiagramLegend.js.map

package/dist/diagrams/DiagramLegend/DiagramLegend.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/diagrams/DiagramLegend/DiagramLegend.tsx"],"sourcesContent":["'use client'\n\nimport type { ReactNode } from 'react'\nimport { cn } from '../../lib/cn'\n\nexport interface DiagramLegendEntry {\n  /** Stable key, and what a caller keys its own data by. */\n  key: string\n  label: string\n  /**\n   * The drawn mark, as SVG children on a 14 × 14 grid.\n   *\n   * Markup rather than a name from a fixed list, because the whole point of a\n   * key is that it shows the SAME mark the figure drew — and a figure that\n   * invented a new one would have to add it here too. `kindLegend`,\n   * `variantLegend` and `stateLegend` build the standard sets out of the\n   * renderers' own drawing code, so those can never drift.\n   */\n  sample: ReactNode\n}\n\nexport interface DiagramLegendProps {\n  entries: DiagramLegendEntry[]\n  /** The kicker before the row. Pass null for a bare row. */\n  title?: string | null\n  className?: string\n}\n\n/**\n * The key: which drawn form means which kind of thing.\n *\n * Not optional furniture in a monochrome system, and this is the one place that\n * has to be said plainly. When the difference between a queue and a cache is a\n * sigil rather than a colour, the key is the only place a reader is told what\n * the sigil means — a figure whose forms are undocumented is a figure whose\n * forms might as well not have been drawn.\n *\n * A `<ul>` rather than a row of `<span>`s: it is a list of pairs, and the count\n * is part of what a screen reader should say about it.\n *\n * @example\n * <DiagramLegend entries={kindLegend(['backend', 'database'])} />\n */\nexport function DiagramLegend({ entries, title = 'Key', className }: DiagramLegendProps) {\n  if (entries.length === 0) return null\n\n  return (\n    <div\n      className={cn(\n        'flex flex-wrap items-baseline gap-x-5 gap-y-2 border-t border-(--rule) pt-3',\n        className,\n      )}\n    >\n      {title && <span className=\"eyebrow text-(--ink-3-aa)\">{title}</span>}\n      <ul\n        className=\"m-0 flex list-none flex-wrap items-center gap-x-4 gap-y-2 p-0\"\n        aria-label={title ?? 'Key'}\n      >\n        {entries.map((entry) => (\n          <li key={entry.key} className=\"flex items-center gap-2\">\n            <svg viewBox=\"0 0 14 14\" className=\"size-4 shrink-0\" aria-hidden=\"true\">\n              {entry.sample}\n            </svg>\n            <span className=\"mono-meta text-(--ink-2)\">{entry.label}</span>\n          </li>\n        ))}\n      </ul>\n    </div>\n  )\n}\n\nexport default DiagramLegend\n"],"mappings":";AAqDgB,cAMN,YANM;AAlDhB,SAAS,UAAU;AAwCZ,SAAS,cAAc,EAAE,SAAS,QAAQ,OAAO,UAAU,GAAuB;AACvF,MAAI,QAAQ,WAAW,EAAG,QAAO;AAEjC,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,QACT;AAAA,QACA;AAAA,MACF;AAAA,MAEC;AAAA,iBAAS,oBAAC,UAAK,WAAU,6BAA6B,iBAAM;AAAA,QAC7D;AAAA,UAAC;AAAA;AAAA,YACC,WAAU;AAAA,YACV,cAAY,SAAS;AAAA,YAEpB,kBAAQ,IAAI,CAAC,UACZ,qBAAC,QAAmB,WAAU,2BAC5B;AAAA,kCAAC,SAAI,SAAQ,aAAY,WAAU,mBAAkB,eAAY,QAC9D,gBAAM,QACT;AAAA,cACA,oBAAC,UAAK,WAAU,4BAA4B,gBAAM,OAAM;AAAA,iBAJjD,MAAM,GAKf,CACD;AAAA;AAAA,QACH;AAAA;AAAA;AAAA,EACF;AAEJ;AAEA,IAAO,wBAAQ;","names":[]}

package/dist/diagrams/DiagramMinimap/DiagramMinimap.d.ts

@@ -0,0 +1,61 @@
+import * as react from 'react';
+import { ReactNode } from 'react';
+import { CanvasView } from '../DiagramCanvas/DiagramCanvas.js';
+
+interface DiagramMinimapProps {
+    /** The whole artwork, at its natural size in CSS pixels. */
+    content: {
+        width: number;
+        height: number;
+    };
+    /** The frame the artwork is being looked at through, in CSS pixels. */
+    frame: {
+        width: number;
+        height: number;
+    };
+    /** Where that frame currently sits — a `DiagramCanvas`'s `onViewChange`. */
+    view: CanvasView;
+    /** A miniature of the artwork. Usually the same figure, rendered again. */
+    children?: ReactNode;
+    /** Called with a point in CONTENT coordinates when the reader picks one. */
+    onSeek?: (x: number, y: number) => void;
+    /** How wide the map is, in CSS pixels. Height follows the aspect ratio. */
+    width?: number;
+    className?: string;
+    label?: string;
+}
+/**
+ * Where you are in something bigger than the window.
+ *
+ * Two things at once, and both are needed: a miniature of the whole artwork,
+ * and a rectangle showing which part of it the frame is currently over. The
+ * miniature alone answers "what is there"; the rectangle answers "and where am
+ * I", which is the question a reader who has just panned twice actually has.
+ *
+ * THE RECTANGLE IS DERIVED, never stored. Its position comes out of the
+ * canvas's own view — the same three numbers the canvas is already transforming
+ * by — divided by the map's scale. Keeping a second copy of "where the viewport
+ * is" is how a minimap comes to disagree with the thing it is a map of, and a
+ * map that disagrees is worse than none.
+ *
+ * CLICKING RECENTRES rather than jumping. `onSeek` reports a point in CONTENT
+ * coordinates, which is what a canvas's `centerOn` takes. The minimap does not
+ * move anything itself: it has no authority over the view, it only says where
+ * the reader pointed.
+ *
+ * @example
+ * const canvas = useRef<DiagramCanvasHandle>(null)
+ * const [view, setView] = useState({ scale: 1, x: 0, y: 0 })
+ * // …
+ * <DiagramMinimap
+ *   content={{ width: 1400, height: 620 }}
+ *   frame={{ width: 720, height: 400 }}
+ *   view={view}
+ *   onSeek={(x, y) => canvas.current?.centerOn(x, y)}
+ * >
+ *   <ArchitectureFigure spec={spec} heading={false} legend="hidden" cards={false} />
+ * </DiagramMinimap>
+ */
+declare function DiagramMinimap({ content, frame, view, children, onSeek, width, className, label, }: DiagramMinimapProps): react.JSX.Element;
+
+export { DiagramMinimap, type DiagramMinimapProps, DiagramMinimap as default };

package/dist/diagrams/DiagramMinimap/DiagramMinimap.js

@@ -0,0 +1,79 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "../../lib/cn.js";
+function DiagramMinimap({
+  content,
+  frame,
+  view,
+  children,
+  onSeek,
+  width = 200,
+  className,
+  label = "Diagram overview"
+}) {
+  const scale = content.width > 0 ? width / content.width : 1;
+  const height = Math.max(1, content.height * scale);
+  const rect = {
+    x: -view.x / view.scale * scale,
+    y: -view.y / view.scale * scale,
+    w: frame.width / view.scale * scale,
+    h: frame.height / view.scale * scale
+  };
+  function seek(event) {
+    if (!onSeek) return;
+    const box = event.currentTarget.getBoundingClientRect();
+    onSeek((event.clientX - box.left) / scale, (event.clientY - box.top) / scale);
+  }
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "relative overflow-hidden rounded-(--radius) border border-(--rule-2) bg-(--panel-bg)",
+        className
+      ),
+      style: { width, height },
+      role: "group",
+      "aria-label": label,
+      children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            "aria-hidden": "true",
+            className: "pointer-events-none absolute start-0 top-0 origin-top-left",
+            style: { width: content.width, transform: `scale(${scale})` },
+            children
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cn("absolute inset-0", onSeek && "cursor-crosshair"),
+            onPointerDown: seek,
+            onPointerMove: (event) => {
+              if (event.buttons === 1) seek(event);
+            },
+            children: /* @__PURE__ */ jsx(
+              "div",
+              {
+                "aria-hidden": "true",
+                className: "absolute rounded-[2px] border border-(--accent) bg-(--accent-wash)",
+                style: {
+                  left: `${rect.x}px`,
+                  top: `${rect.y}px`,
+                  width: `${Math.max(4, rect.w)}px`,
+                  height: `${Math.max(4, rect.h)}px`
+                }
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+}
+var DiagramMinimap_default = DiagramMinimap;
+export {
+  DiagramMinimap,
+  DiagramMinimap_default as default
+};
+//# sourceMappingURL=DiagramMinimap.js.map

package/dist/diagrams/DiagramMinimap/DiagramMinimap.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/diagrams/DiagramMinimap/DiagramMinimap.tsx"],"sourcesContent":["'use client'\n\nimport type { PointerEvent as ReactPointerEvent, ReactNode } from 'react'\nimport { cn } from '../../lib/cn'\nimport type { CanvasView } from '../DiagramCanvas/DiagramCanvas'\n\nexport interface DiagramMinimapProps {\n  /** The whole artwork, at its natural size in CSS pixels. */\n  content: { width: number; height: number }\n  /** The frame the artwork is being looked at through, in CSS pixels. */\n  frame: { width: number; height: number }\n  /** Where that frame currently sits — a `DiagramCanvas`'s `onViewChange`. */\n  view: CanvasView\n  /** A miniature of the artwork. Usually the same figure, rendered again. */\n  children?: ReactNode\n  /** Called with a point in CONTENT coordinates when the reader picks one. */\n  onSeek?: (x: number, y: number) => void\n  /** How wide the map is, in CSS pixels. Height follows the aspect ratio. */\n  width?: number\n  className?: string\n  label?: string\n}\n\n/**\n * Where you are in something bigger than the window.\n *\n * Two things at once, and both are needed: a miniature of the whole artwork,\n * and a rectangle showing which part of it the frame is currently over. The\n * miniature alone answers \"what is there\"; the rectangle answers \"and where am\n * I\", which is the question a reader who has just panned twice actually has.\n *\n * THE RECTANGLE IS DERIVED, never stored. Its position comes out of the\n * canvas's own view — the same three numbers the canvas is already transforming\n * by — divided by the map's scale. Keeping a second copy of \"where the viewport\n * is\" is how a minimap comes to disagree with the thing it is a map of, and a\n * map that disagrees is worse than none.\n *\n * CLICKING RECENTRES rather than jumping. `onSeek` reports a point in CONTENT\n * coordinates, which is what a canvas's `centerOn` takes. The minimap does not\n * move anything itself: it has no authority over the view, it only says where\n * the reader pointed.\n *\n * @example\n * const canvas = useRef<DiagramCanvasHandle>(null)\n * const [view, setView] = useState({ scale: 1, x: 0, y: 0 })\n * // …\n * <DiagramMinimap\n *   content={{ width: 1400, height: 620 }}\n *   frame={{ width: 720, height: 400 }}\n *   view={view}\n *   onSeek={(x, y) => canvas.current?.centerOn(x, y)}\n * >\n *   <ArchitectureFigure spec={spec} heading={false} legend=\"hidden\" cards={false} />\n * </DiagramMinimap>\n */\nexport function DiagramMinimap({\n  content,\n  frame,\n  view,\n  children,\n  onSeek,\n  width = 200,\n  className,\n  label = 'Diagram overview',\n}: DiagramMinimapProps) {\n  const scale = content.width > 0 ? width / content.width : 1\n  const height = Math.max(1, content.height * scale)\n\n  // The frame's rectangle in content space, then in map space. `view.x` is how\n  // far the stage has been pushed, so the content coordinate at the frame's\n  // top-left corner is its negation over the zoom.\n  const rect = {\n    x: (-view.x / view.scale) * scale,\n    y: (-view.y / view.scale) * scale,\n    w: (frame.width / view.scale) * scale,\n    h: (frame.height / view.scale) * scale,\n  }\n\n  function seek(event: ReactPointerEvent<HTMLDivElement>) {\n    if (!onSeek) return\n    const box = event.currentTarget.getBoundingClientRect()\n    onSeek((event.clientX - box.left) / scale, (event.clientY - box.top) / scale)\n  }\n\n  return (\n    <div\n      className={cn(\n        'relative overflow-hidden rounded-(--radius) border border-(--rule-2) bg-(--panel-bg)',\n        className,\n      )}\n      style={{ width, height }}\n      role=\"group\"\n      aria-label={label}\n    >\n      {/* The miniature is decorative: the figure it mirrors already publishes\n          its own accessible summary, and a second copy would read the whole\n          diagram out twice. */}\n      <div\n        aria-hidden=\"true\"\n        className=\"pointer-events-none absolute start-0 top-0 origin-top-left\"\n        style={{ width: content.width, transform: `scale(${scale})` }}\n      >\n        {children}\n      </div>\n\n      <div\n        className={cn('absolute inset-0', onSeek && 'cursor-crosshair')}\n        onPointerDown={seek}\n        onPointerMove={(event) => {\n          if (event.buttons === 1) seek(event)\n        }}\n      >\n        <div\n          aria-hidden=\"true\"\n          className=\"absolute rounded-[2px] border border-(--accent) bg-(--accent-wash)\"\n          style={{\n            left: `${rect.x}px`,\n            top: `${rect.y}px`,\n            width: `${Math.max(4, rect.w)}px`,\n            height: `${Math.max(4, rect.h)}px`,\n          }}\n        />\n      </div>\n    </div>\n  )\n}\n\nexport default DiagramMinimap\n"],"mappings":";AAqFI,SAYE,KAZF;AAlFJ,SAAS,UAAU;AAoDZ,SAAS,eAAe;AAAA,EAC7B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,QAAQ;AAAA,EACR;AAAA,EACA,QAAQ;AACV,GAAwB;AACtB,QAAM,QAAQ,QAAQ,QAAQ,IAAI,QAAQ,QAAQ,QAAQ;AAC1D,QAAM,SAAS,KAAK,IAAI,GAAG,QAAQ,SAAS,KAAK;AAKjD,QAAM,OAAO;AAAA,IACX,GAAI,CAAC,KAAK,IAAI,KAAK,QAAS;AAAA,IAC5B,GAAI,CAAC,KAAK,IAAI,KAAK,QAAS;AAAA,IAC5B,GAAI,MAAM,QAAQ,KAAK,QAAS;AAAA,IAChC,GAAI,MAAM,SAAS,KAAK,QAAS;AAAA,EACnC;AAEA,WAAS,KAAK,OAA0C;AACtD,QAAI,CAAC,OAAQ;AACb,UAAM,MAAM,MAAM,cAAc,sBAAsB;AACtD,YAAQ,MAAM,UAAU,IAAI,QAAQ,QAAQ,MAAM,UAAU,IAAI,OAAO,KAAK;AAAA,EAC9E;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,QACT;AAAA,QACA;AAAA,MACF;AAAA,MACA,OAAO,EAAE,OAAO,OAAO;AAAA,MACvB,MAAK;AAAA,MACL,cAAY;AAAA,MAKZ;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,eAAY;AAAA,YACZ,WAAU;AAAA,YACV,OAAO,EAAE,OAAO,QAAQ,OAAO,WAAW,SAAS,KAAK,IAAI;AAAA,YAE3D;AAAA;AAAA,QACH;AAAA,QAEA;AAAA,UAAC;AAAA;AAAA,YACC,WAAW,GAAG,oBAAoB,UAAU,kBAAkB;AAAA,YAC9D,eAAe;AAAA,YACf,eAAe,CAAC,UAAU;AACxB,kBAAI,MAAM,YAAY,EAAG,MAAK,KAAK;AAAA,YACrC;AAAA,YAEA;AAAA,cAAC;AAAA;AAAA,gBACC,eAAY;AAAA,gBACZ,WAAU;AAAA,gBACV,OAAO;AAAA,kBACL,MAAM,GAAG,KAAK,CAAC;AAAA,kBACf,KAAK,GAAG,KAAK,CAAC;AAAA,kBACd,OAAO,GAAG,KAAK,IAAI,GAAG,KAAK,CAAC,CAAC;AAAA,kBAC7B,QAAQ,GAAG,KAAK,IAAI,GAAG,KAAK,CAAC,CAAC;AAAA,gBAChC;AAAA;AAAA,YACF;AAAA;AAAA,QACF;AAAA;AAAA;AAAA,EACF;AAEJ;AAEA,IAAO,yBAAQ;","names":[]}

package/dist/diagrams/DiagramToolbar/DiagramToolbar.d.ts

@@ -0,0 +1,48 @@
+import * as react from 'react';
+import { ComponentProps, ReactNode } from 'react';
+
+interface DiagramToolbarProps extends Omit<ComponentProps<'div'>, 'children'> {
+    children: ReactNode;
+    /** Where it sits. `floating` pins it over the surface it acts on. */
+    placement?: 'inline' | 'floating';
+    /** Which corner a floating bar pins to. */
+    align?: 'start' | 'end';
+    label: string;
+}
+/**
+ * A bar of actions that belong to the surface underneath them.
+ *
+ * The package already has `FloatingIconButton` for ONE pinned action. This is
+ * the container for several — which is a different problem, because several
+ * pinned buttons need to read as one object rather than as a scatter: one
+ * plate, one border, hairlines between the groups, and a single `role="toolbar"`
+ * so a screen reader announces a toolbar instead of six unrelated buttons.
+ *
+ * `role="toolbar"` also changes the keyboard contract, and callers should know
+ * what they are opting into: arrow keys are expected to move between the
+ * controls and Tab is expected to leave the bar. This component does not
+ * implement roving focus for you — a bar of three buttons where Tab visits all
+ * three is honest and fine — so pass `placement="inline"` and skip the role by
+ * using a plain `<div>` if that is not what you want.
+ *
+ * @example
+ * <DiagramToolbar label="Diagram actions" placement="floating">
+ *   <DiagramToolbarGroup>
+ *     <Button size="sm" variant="ghost">Theme</Button>
+ *   </DiagramToolbarGroup>
+ *   <DiagramToolbarGroup>
+ *     <DiagramExportMenu targetRef={svg} title="Request path" />
+ *   </DiagramToolbarGroup>
+ * </DiagramToolbar>
+ */
+declare function DiagramToolbar({ children, className, placement, align, label, ...rest }: DiagramToolbarProps): react.JSX.Element;
+/**
+ * One run of related controls inside the bar.
+ *
+ * Separated by a hairline rather than by space, because a gap large enough to
+ * read as a group boundary is also large enough to stop the bar reading as one
+ * object — which is the whole reason the controls were collected into a bar.
+ */
+declare function DiagramToolbarGroup({ children, className, ...rest }: ComponentProps<'div'>): react.JSX.Element;
+
+export { DiagramToolbar, DiagramToolbarGroup, type DiagramToolbarProps, DiagramToolbar as default };

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