@misoto22/design 0.6.1 → 0.8.0

package/dist/diagrams/DiagramInspector/DiagramInspector.js

@@ -0,0 +1,94 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { X } from "lucide-react";
+import { cn } from "../../lib/cn.js";
+function DiagramInspector({
+  eyebrow,
+  title,
+  description,
+  facts = [],
+  links = [],
+  actions,
+  onClose,
+  className,
+  floating
+}) {
+  return /* @__PURE__ */ jsxs(
+    "section",
+    {
+      "aria-label": `${title} details`,
+      "aria-live": "polite",
+      className: cn(
+        "flex flex-col gap-3 rounded-(--radius-lg) border border-(--rule-2) bg-(--panel-bg) p-4",
+        floating && "absolute bottom-3 start-3 z-(--z-sticky) w-72 max-w-[calc(100%-1.5rem)]",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-3", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-col gap-1", children: [
+            eyebrow && /* @__PURE__ */ jsx("span", { className: "eyebrow text-(--ink-3-aa)", children: eyebrow }),
+            /* @__PURE__ */ jsx("h3", { className: "m-0 font-sans text-[15px] leading-tight font-normal text-(--ink)", children: title })
+          ] }),
+          onClose && /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: onClose,
+              "aria-label": "Clear the selection",
+              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)",
+              children: /* @__PURE__ */ jsx(X, { size: 14, strokeWidth: 1.5, "aria-hidden": true })
+            }
+          )
+        ] }),
+        description && /* @__PURE__ */ jsx("p", { className: "m-0 text-[13px] leading-[1.55] text-(--ink-2)", children: description }),
+        facts.length > 0 && // A definition list, because that is what this is: each row is a term
+        // and its value, and a grid of divs tells a screen reader nothing about
+        // which value belongs to which label.
+        /* @__PURE__ */ jsx("dl", { className: "m-0 grid grid-cols-[auto_1fr] gap-x-4 gap-y-1.5", children: facts.map((fact, index) => /* @__PURE__ */ jsxs("div", { className: "contents", children: [
+          /* @__PURE__ */ jsx("dt", { className: "mono-meta text-(--ink-3-aa)", children: fact.label }),
+          /* @__PURE__ */ jsx(
+            "dd",
+            {
+              className: cn(
+                "m-0 min-w-0 break-words text-[13px] leading-snug text-(--ink)",
+                fact.mono && "font-mono text-[12px]"
+              ),
+              children: fact.value
+            }
+          )
+        ] }, index)) }),
+        links.length > 0 && /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1 border-t border-(--rule) pt-3", children: [
+          /* @__PURE__ */ jsx("span", { className: "eyebrow text-(--ink-3-aa)", children: "Relationships" }),
+          /* @__PURE__ */ jsx("ul", { className: "m-0 flex list-none flex-col gap-0.5 p-0", children: links.map((link, index) => {
+            const body = /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "font-mono text-[12px] text-(--ink-3-aa)", children: link.direction === "out" ? "\u2192" : "\u2190" }),
+              /* @__PURE__ */ jsx("span", { className: "sr-only", children: link.direction === "out" ? "to" : "from" }),
+              /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 truncate text-[13px] text-(--ink)", children: link.peer }),
+              link.label && /* @__PURE__ */ jsx("span", { className: "mono-meta shrink-0 text-(--ink-3-aa)", children: link.label })
+            ] });
+            const row = "flex w-full items-baseline gap-2 rounded-(--radius-xs) px-1 py-1 text-start";
+            return /* @__PURE__ */ jsx("li", { children: link.onSelect ? /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                onClick: link.onSelect,
+                className: cn(
+                  row,
+                  "transition-colors duration-(--duration-fast) hover:bg-(--stone) focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-(--ring)"
+                ),
+                children: body
+              }
+            ) : /* @__PURE__ */ jsx("span", { className: row, children: body }) }, link.id ?? index);
+          }) })
+        ] }),
+        actions && /* @__PURE__ */ jsx("div", { className: "flex flex-wrap items-center gap-2 pt-1", children: actions })
+      ]
+    }
+  );
+}
+var DiagramInspector_default = DiagramInspector;
+export {
+  DiagramInspector,
+  DiagramInspector_default as default
+};
+//# sourceMappingURL=DiagramInspector.js.map

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          {/* Keyed by position, not by the label: two rows named \"Source\" is a\n              specification a caller is entitled to write — a node read out of\n              two files — and keying by the label made the second one collide\n              with the first rather than appear under it. */}\n          {facts.map((fact, index) => (\n            <div key={index} 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,SAqDQ,UApDM,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,mDAKX,gBAAM,IAAI,CAAC,MAAM,UAChB,qBAAC,SAAgB,WAAU,YACzB;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,KAUV,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,77 @@
+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.
+     *
+     * Optional because a `DiagramCanvas` now reports its own frame on every view
+     * it emits: wire `onViewChange` straight through and this is already right.
+     * Pass it only for a frame this component cannot be told about.
+     */
+    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, and clamped to the plate: a viewport that
+ * has been panned past the edge of the artwork is a viewport half over blank
+ * paper, and drawing the rectangle out there claims the map extends somewhere
+ * it does not. 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.
+ *
+ * NOTHING IS DRAWN UNTIL THE ARTWORK HAS A SIZE. `content` is usually a
+ * measurement, and a measurement's first value is zero — so the scale would be
+ * 1, the miniature would be the artwork's top-left corner at full size, and the
+ * rectangle would sit over it meaning nothing. An empty plate for one frame is
+ * the honest version of "not yet".
+ *
+ * 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. A drag keeps seeking, and only a drag that STARTED on the
+ * map does — a button held down somewhere else and dragged across is not this
+ * component's gesture to answer.
+ *
+ * @example
+ * const canvas = useRef<DiagramCanvasHandle>(null)
+ * const [view, setView] = useState({ scale: 1, x: 0, y: 0 })
+ * // …
+ * <DiagramMinimap
+ *   content={{ width: 1400, height: 620 }}
+ *   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,106 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useRef } from "react";
+import { cn } from "../../lib/cn.js";
+function DiagramMinimap({
+  content,
+  frame,
+  view,
+  children,
+  onSeek,
+  width = 200,
+  className,
+  label = "Diagram overview"
+}) {
+  const dragging = useRef(false);
+  const measured = content.width > 0 && content.height > 0;
+  const scale = measured ? width / content.width : 0;
+  const height = measured ? Math.max(1, content.height * scale) : Math.round(width / 2);
+  const box = frame ?? view.frame;
+  const rect = measured && box ? clamp(box, view, scale, width, height) : null;
+  function seek(event) {
+    if (!onSeek || !measured) return;
+    const map = event.currentTarget.getBoundingClientRect();
+    onSeek((event.clientX - map.left) / scale, (event.clientY - map.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: [
+        measured && /* @__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",
+          {
+            "data-seek": "",
+            className: cn("absolute inset-0", onSeek && measured && "cursor-crosshair"),
+            onPointerDown: (event) => {
+              dragging.current = true;
+              event.currentTarget.setPointerCapture(event.pointerId);
+              seek(event);
+            },
+            onPointerMove: (event) => {
+              if (dragging.current && event.buttons === 1) seek(event);
+            },
+            onPointerUp: (event) => {
+              dragging.current = false;
+              if (event.currentTarget.hasPointerCapture(event.pointerId)) {
+                event.currentTarget.releasePointerCapture(event.pointerId);
+              }
+            },
+            onPointerCancel: () => {
+              dragging.current = false;
+            },
+            children: rect && /* @__PURE__ */ jsx(
+              "div",
+              {
+                "aria-hidden": "true",
+                "data-viewport": "",
+                className: "absolute rounded-[2px] border border-(--accent) bg-(--accent-wash)",
+                style: {
+                  left: `${rect.x}px`,
+                  top: `${rect.y}px`,
+                  width: `${rect.w}px`,
+                  height: `${rect.h}px`
+                }
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+}
+function clamp(frame, view, scale, width, height) {
+  const x = -view.x / view.scale * scale;
+  const y = -view.y / view.scale * scale;
+  const left = Math.min(Math.max(x, 0), width);
+  const top = Math.min(Math.max(y, 0), height);
+  return {
+    x: left,
+    y: top,
+    // Floored at a few pixels so a deep zoom still leaves something to see.
+    w: Math.max(4, Math.min(x + frame.width / view.scale * scale, width) - left),
+    h: Math.max(4, Math.min(y + frame.height / view.scale * scale, height) - top)
+  };
+}
+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 { useRef, type PointerEvent as ReactPointerEvent, type 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  /**\n   * The frame the artwork is being looked at through, in CSS pixels.\n   *\n   * Optional because a `DiagramCanvas` now reports its own frame on every view\n   * it emits: wire `onViewChange` straight through and this is already right.\n   * Pass it only for a frame this component cannot be told about.\n   */\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, and clamped to the plate: a viewport that\n * has been panned past the edge of the artwork is a viewport half over blank\n * paper, and drawing the rectangle out there claims the map extends somewhere\n * it does not. Keeping a second copy of \"where the viewport is\" is how a\n * minimap comes to disagree with the thing it is a map of, and a map that\n * disagrees is worse than none.\n *\n * NOTHING IS DRAWN UNTIL THE ARTWORK HAS A SIZE. `content` is usually a\n * measurement, and a measurement's first value is zero — so the scale would be\n * 1, the miniature would be the artwork's top-left corner at full size, and the\n * rectangle would sit over it meaning nothing. An empty plate for one frame is\n * the honest version of \"not yet\".\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. A drag keeps seeking, and only a drag that STARTED on the\n * map does — a button held down somewhere else and dragged across is not this\n * component's gesture to answer.\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 *   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 dragging = useRef(false)\n\n  const measured = content.width > 0 && content.height > 0\n  const scale = measured ? width / content.width : 0\n  // Half the width is a neutral plate to hold the space, not a claim about the\n  // artwork's shape — nothing here knows it yet.\n  const height = measured ? Math.max(1, content.height * scale) : Math.round(width / 2)\n\n  const box = frame ?? view.frame\n  const rect = measured && box ? clamp(box, view, scale, width, height) : null\n\n  function seek(event: ReactPointerEvent<HTMLDivElement>) {\n    if (!onSeek || !measured) return\n    const map = event.currentTarget.getBoundingClientRect()\n    onSeek((event.clientX - map.left) / scale, (event.clientY - map.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      {measured && (\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\n      <div\n        data-seek=\"\"\n        className={cn('absolute inset-0', onSeek && measured && 'cursor-crosshair')}\n        onPointerDown={(event) => {\n          dragging.current = true\n          event.currentTarget.setPointerCapture(event.pointerId)\n          seek(event)\n        }}\n        onPointerMove={(event) => {\n          if (dragging.current && event.buttons === 1) seek(event)\n        }}\n        onPointerUp={(event) => {\n          dragging.current = false\n          if (event.currentTarget.hasPointerCapture(event.pointerId)) {\n            event.currentTarget.releasePointerCapture(event.pointerId)\n          }\n        }}\n        onPointerCancel={() => {\n          dragging.current = false\n        }}\n      >\n        {rect && (\n          <div\n            aria-hidden=\"true\"\n            data-viewport=\"\"\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: `${rect.w}px`,\n              height: `${rect.h}px`,\n            }}\n          />\n        )}\n      </div>\n    </div>\n  )\n}\n\n/**\n * The frame's rectangle in map space, cut to the map.\n *\n * `view.x` is how far the stage has been pushed, so the content coordinate at\n * the frame's top-left corner is its negation over the zoom. The intersection\n * with the plate is what keeps the rectangle a statement about the artwork: a\n * frame wider than the whole diagram used to draw a box hanging off both edges,\n * which reads as \"there is more over there\" and there is not.\n */\nfunction clamp(\n  frame: { width: number; height: number },\n  view: CanvasView,\n  scale: number,\n  width: number,\n  height: number,\n): { x: number; y: number; w: number; h: number } {\n  const x = (-view.x / view.scale) * scale\n  const y = (-view.y / view.scale) * scale\n  const left = Math.min(Math.max(x, 0), width)\n  const top = Math.min(Math.max(y, 0), height)\n  return {\n    x: left,\n    y: top,\n    // Floored at a few pixels so a deep zoom still leaves something to see.\n    w: Math.max(4, Math.min(x + (frame.width / view.scale) * scale, width) - left),\n    h: Math.max(4, Math.min(y + (frame.height / view.scale) * scale, height) - top),\n  }\n}\n\nexport default DiagramMinimap\n"],"mappings":"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","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 };