@misoto22/design 0.6.0 → 0.7.0

package/dist/diagrams/DiagramExportMenu/DiagramExportMenu.js

@@ -0,0 +1,125 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { cn } from "../../lib/cn.js";
+import {
+  downloadBlob,
+  exportFilename,
+  rasterize,
+  readToken,
+  serializeSvg
+} from "../../lib/svg-export.js";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger
+} from "../../components/DropdownMenu/DropdownMenu.js";
+import { Button } from "../../components/Button/Button.js";
+const SHARE_CARD = { width: 1200, height: 630 };
+const ITEMS = [
+  { group: "Image", format: "png", title: "PNG", hint: "Lossless, 2\xD7 for retina" },
+  { group: "Image", format: "jpeg", title: "JPEG", hint: "Compact, flattened onto paper" },
+  { group: "Image", format: "webp", title: "WebP", hint: "Smaller, modern browsers" },
+  { group: "Vector", format: "svg", title: "SVG", hint: "Editable, colours resolved" },
+  { group: "Share", format: "share-card", title: "Share card", hint: "1200 \xD7 630 PNG" }
+];
+function DiagramExportMenu({
+  targetRef,
+  title,
+  trigger,
+  className,
+  onExport,
+  onResult
+}) {
+  const [busy, setBusy] = useState(null);
+  async function run(format) {
+    setBusy(format);
+    try {
+      if (onExport) {
+        await onExport(format);
+      } else {
+        await exportFigure(targetRef.current, title, format);
+      }
+      onResult?.({ format, ok: true });
+    } catch (cause) {
+      onResult?.({ format, ok: false, error: cause });
+    } finally {
+      setBusy(null);
+    }
+  }
+  const groups = [...new Set(ITEMS.map((item) => item.group))];
+  return /* @__PURE__ */ jsxs(DropdownMenu, { children: [
+    /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: trigger ?? /* @__PURE__ */ jsx(Button, { size: "sm", variant: "secondary", className, children: "Export" }) }),
+    /* @__PURE__ */ jsx(DropdownMenuContent, { align: "end", className: "w-64", children: groups.map((group, index) => /* @__PURE__ */ jsxs("div", { children: [
+      index > 0 && /* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
+      /* @__PURE__ */ jsx(DropdownMenuLabel, { children: group }),
+      ITEMS.filter((item) => item.group === group).map((item) => /* @__PURE__ */ jsxs(
+        "button",
+        {
+          type: "button",
+          disabled: busy !== null,
+          onClick: () => void run(item.format),
+          className: cn(
+            "flex w-full flex-col items-start gap-0.5 rounded-(--radius-sm) px-2 py-1.5 text-start",
+            "transition-colors duration-(--duration-fast)",
+            "hover:bg-(--stone) focus-visible:bg-(--stone) focus-visible:outline-none",
+            "disabled:pointer-events-none disabled:opacity-(--disabled-opacity)"
+          ),
+          children: [
+            /* @__PURE__ */ jsxs("span", { className: "text-[13px] leading-tight text-(--ink)", children: [
+              item.title,
+              busy === item.format && " \u2026"
+            ] }),
+            /* @__PURE__ */ jsx("span", { className: "mono-meta text-(--ink-3-aa)", children: item.hint })
+          ]
+        },
+        item.format
+      ))
+    ] }, group)) })
+  ] });
+}
+async function exportFigure(target, title, format) {
+  const svg = findArtwork(target);
+  if (!svg) throw new Error("exportFigure: found no <svg> to export inside the given element");
+  const paper = readToken(svg, "--diagram-surface", "#ffffff");
+  const ink = readToken(svg, "--ink", "#101010");
+  const font = getComputedStyle(svg).fontFamily || "sans-serif";
+  if (format === "share-card") {
+    const markup2 = serializeSvg(svg, {
+      padding: 56,
+      background: paper,
+      title,
+      titleColor: ink,
+      titleFont: font,
+      frame: SHARE_CARD
+    });
+    const blob2 = await rasterize(markup2, "png", { scale: 1 });
+    downloadBlob(blob2, exportFilename(title, "png", "share-card"));
+    return;
+  }
+  const markup = serializeSvg(svg, { padding: 20, background: paper });
+  if (format === "svg") {
+    downloadBlob(new Blob([markup], { type: "image/svg+xml;charset=utf-8" }), exportFilename(title, "svg"));
+    return;
+  }
+  const blob = await rasterize(markup, format, {
+    scale: 2,
+    // JPEG has no alpha channel, so an unflattened export lands on black.
+    background: format === "jpeg" ? paper : void 0
+  });
+  downloadBlob(blob, exportFilename(title, format));
+}
+function findArtwork(element) {
+  if (!element) return null;
+  if (element.tagName.toLowerCase() === "svg") return element;
+  return element.querySelector("svg[data-diagram-artwork]") ?? element.querySelector("svg");
+}
+var DiagramExportMenu_default = DiagramExportMenu;
+export {
+  DiagramExportMenu,
+  DiagramExportMenu_default as default,
+  exportFigure
+};
+//# sourceMappingURL=DiagramExportMenu.js.map

package/dist/diagrams/DiagramExportMenu/DiagramExportMenu.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/diagrams/DiagramExportMenu/DiagramExportMenu.tsx"],"sourcesContent":["'use client'\n\nimport { useState, type ReactNode, type RefObject } from 'react'\nimport { cn } from '../../lib/cn'\nimport {\n  downloadBlob,\n  exportFilename,\n  rasterize,\n  readToken,\n  serializeSvg,\n} from '../../lib/svg-export'\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from '../../components/DropdownMenu/DropdownMenu'\nimport { Button } from '../../components/Button/Button'\n\n/** The files a figure can be taken away as. */\nexport type ExportFormat = 'png' | 'jpeg' | 'webp' | 'svg' | 'share-card'\n\n/** What came of an export, for a page that wants to say so. */\nexport interface ExportResult {\n  format: ExportFormat\n  ok: boolean\n  error?: Error\n}\n\n/** A share card is a fixed frame, because the surfaces that consume one are. */\nconst SHARE_CARD = { width: 1200, height: 630 } as const\n\nconst ITEMS: { format: ExportFormat; title: string; hint: string; group: string }[] = [\n  { group: 'Image', format: 'png', title: 'PNG', hint: 'Lossless, 2× for retina' },\n  { group: 'Image', format: 'jpeg', title: 'JPEG', hint: 'Compact, flattened onto paper' },\n  { group: 'Image', format: 'webp', title: 'WebP', hint: 'Smaller, modern browsers' },\n  { group: 'Vector', format: 'svg', title: 'SVG', hint: 'Editable, colours resolved' },\n  { group: 'Share', format: 'share-card', title: 'Share card', hint: '1200 × 630 PNG' },\n]\n\nexport interface DiagramExportMenuProps {\n  /**\n   * The `<svg>` to export, or an element containing exactly one.\n   *\n   * A ref rather than a selector, because a page can hold several figures and a\n   * selector would export whichever the document happened to reach first.\n   */\n  targetRef: RefObject<HTMLElement | SVGSVGElement | null>\n  /** Names the file, and is printed on the share card. */\n  title: string\n  /** Replaces the trigger. */\n  trigger?: ReactNode\n  className?: string\n  /** Runs instead of the built-in export — for a caller with its own pipeline. */\n  onExport?: (format: ExportFormat) => void | Promise<void>\n  /** Told what happened, so a page can raise a toast. */\n  onResult?: (result: ExportResult) => void\n}\n\n/**\n * Taking the figure off the page: five files, one menu.\n *\n * WHY THE MENU DOES THE WORK rather than handing back a format: every one of\n * these exports is the same six steps — find the `<svg>`, walk it with\n * `getComputedStyle` to bake the custom properties into real colours,\n * serialise, rasterise, name the file, hand it to the browser — and only the\n * last two differ between them. A menu that emitted `'png'` and left the caller\n * to do the rest would be a menu that every consumer reimplements, badly, and\n * the interesting half (a serialised SVG resolves `var(--ink)` to nothing and\n * comes out invisible) is exactly the half a caller would not know to write.\n *\n * `onExport` is still there for a page with its own pipeline — a server-side\n * renderer, a different frame size — and taking it turns everything below into\n * a no-op.\n *\n * What each format actually is, stated rather than implied.\n *\n * **SVG** is the artwork with resolved colours. It is editable and it is the\n * only lossless one, but it carries no web fonts: a machine without the family\n * renders it in a fallback, so type metrics will differ.\n *\n * **PNG, JPEG and WebP** are the browser's own rasteriser re-drawing that SVG\n * at 2×. Not a screenshot — antialiasing and any effect a page stylesheet\n * applied from OUTSIDE the `<svg>` are not in it. **JPEG has no alpha**, so it\n * is flattened onto the resolved paper colour rather than onto black, which is\n * what a transparent PNG becomes when a format with no transparency is asked\n * to hold it.\n *\n * **The share card** is a 1200 × 630 frame with the title on it and the whole\n * diagram letterboxed inside — never cropped. A card that cropped to fill the\n * frame would be a picture of a different diagram.\n */\nexport function DiagramExportMenu({\n  targetRef,\n  title,\n  trigger,\n  className,\n  onExport,\n  onResult,\n}: DiagramExportMenuProps) {\n  const [busy, setBusy] = useState<ExportFormat | null>(null)\n\n  async function run(format: ExportFormat) {\n    setBusy(format)\n    try {\n      if (onExport) {\n        await onExport(format)\n      } else {\n        await exportFigure(targetRef.current, title, format)\n      }\n      onResult?.({ format, ok: true })\n    } catch (cause) {\n      // Never swallowed: a download is something the reader just asked for, and\n      // a click that quietly does nothing is indistinguishable from a broken\n      // button. The caller gets the error to put in front of them.\n      onResult?.({ format, ok: false, error: cause as Error })\n    } finally {\n      setBusy(null)\n    }\n  }\n\n  const groups = [...new Set(ITEMS.map((item) => item.group))]\n\n  return (\n    <DropdownMenu>\n      <DropdownMenuTrigger asChild>\n        {trigger ?? (\n          <Button size=\"sm\" variant=\"secondary\" className={className}>\n            Export\n          </Button>\n        )}\n      </DropdownMenuTrigger>\n      <DropdownMenuContent align=\"end\" className=\"w-64\">\n        {groups.map((group, index) => (\n          <div key={group}>\n            {index > 0 && <DropdownMenuSeparator />}\n            <DropdownMenuLabel>{group}</DropdownMenuLabel>\n            {ITEMS.filter((item) => item.group === group).map((item) => (\n              <button\n                key={item.format}\n                type=\"button\"\n                disabled={busy !== null}\n                onClick={() => void run(item.format)}\n                className={cn(\n                  'flex w-full flex-col items-start gap-0.5 rounded-(--radius-sm) px-2 py-1.5 text-start',\n                  'transition-colors duration-(--duration-fast)',\n                  'hover:bg-(--stone) focus-visible:bg-(--stone) focus-visible:outline-none',\n                  'disabled:pointer-events-none disabled:opacity-(--disabled-opacity)',\n                )}\n              >\n                <span className=\"text-[13px] leading-tight text-(--ink)\">\n                  {item.title}\n                  {busy === item.format && ' …'}\n                </span>\n                <span className=\"mono-meta text-(--ink-3-aa)\">{item.hint}</span>\n              </button>\n            ))}\n          </div>\n        ))}\n      </DropdownMenuContent>\n    </DropdownMenu>\n  )\n}\n\n/**\n * One figure, one format, one file.\n *\n * Exported so a page can wire a keyboard shortcut or its own button to exactly\n * what the menu does, without reimplementing the six steps.\n */\nexport async function exportFigure(\n  target: HTMLElement | SVGSVGElement | null,\n  title: string,\n  format: ExportFormat,\n): Promise<void> {\n  const svg = findArtwork(target)\n  if (!svg) throw new Error('exportFigure: found no <svg> to export inside the given element')\n\n  // Read against the LIVE element, so the file comes out in whichever theme the\n  // reader is looking at rather than in whichever one the code assumed.\n  const paper = readToken(svg, '--diagram-surface', '#ffffff')\n  const ink = readToken(svg, '--ink', '#101010')\n  const font = getComputedStyle(svg).fontFamily || 'sans-serif'\n\n  if (format === 'share-card') {\n    const markup = serializeSvg(svg, {\n      padding: 56,\n      background: paper,\n      title,\n      titleColor: ink,\n      titleFont: font,\n      frame: SHARE_CARD,\n    })\n    const blob = await rasterize(markup, 'png', { scale: 1 })\n    downloadBlob(blob, exportFilename(title, 'png', 'share-card'))\n    return\n  }\n\n  const markup = serializeSvg(svg, { padding: 20, background: paper })\n\n  if (format === 'svg') {\n    downloadBlob(new Blob([markup], { type: 'image/svg+xml;charset=utf-8' }), exportFilename(title, 'svg'))\n    return\n  }\n\n  const blob = await rasterize(markup, format, {\n    scale: 2,\n    // JPEG has no alpha channel, so an unflattened export lands on black.\n    background: format === 'jpeg' ? paper : undefined,\n  })\n  downloadBlob(blob, exportFilename(title, format))\n}\n\n/**\n * The figure's own `<svg>`, not the first one in the subtree.\n *\n * The distinction is load-bearing: a toolbar sits inside the same wrapper and\n * every icon in it is an `<svg>`. Looking for the artwork marker first is what\n * stops an export of a diagram from being a picture of a chevron.\n */\nfunction findArtwork(element: HTMLElement | SVGSVGElement | null): SVGSVGElement | null {\n  if (!element) return null\n  if (element.tagName.toLowerCase() === 'svg') return element as SVGSVGElement\n  return (\n    element.querySelector<SVGSVGElement>('svg[data-diagram-artwork]') ??\n    element.querySelector<SVGSVGElement>('svg')\n  )\n}\n\nexport default DiagramExportMenu\n"],"mappings":"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","names":["markup","blob"]}

package/dist/diagrams/DiagramInspector/DiagramInspector.d.ts

@@ -0,0 +1,70 @@
+import * as react from 'react';
+import { ReactNode } from 'react';
+
+/** One fact about the selected thing: a short label and its value. */
+interface InspectorFact {
+    label: string;
+    value: ReactNode;
+    /** Sets the value in mono — an id, a path, a version, a port. */
+    mono?: boolean;
+}
+/** A relationship the selected thing takes part in. */
+interface InspectorLink {
+    id?: string;
+    /** Which way it runs, relative to the selected node. */
+    direction: 'in' | 'out';
+    label: string;
+    /** What sits at the other end. */
+    peer: string;
+    onSelect?: () => void;
+}
+interface DiagramInspectorProps {
+    /** The kicker over the title — what KIND of thing this panel is showing. */
+    eyebrow?: string;
+    title: string;
+    description?: ReactNode;
+    facts?: InspectorFact[];
+    links?: InspectorLink[];
+    /** Buttons under the facts — copy a link, open the source. */
+    actions?: ReactNode;
+    onClose?: () => void;
+    className?: string;
+    /** Renders as a floating panel over the surface rather than in the flow. */
+    floating?: boolean;
+}
+/**
+ * What the reader just picked, written out.
+ *
+ * A diagram can hold about eight words per node before it stops being a diagram
+ * and starts being a document with lines drawn on it. Everything past those
+ * eight — the port, the owning team, the file it was read out of, the six
+ * relationships it takes part in — belongs beside the picture rather than
+ * inside it, and this is that place.
+ *
+ * NOT A DIALOG, and that is deliberate. An inspector is a REGION that changes
+ * with the selection, not a modal. Giving it `role="dialog"` would trap focus
+ * and demand dismissal for something the reader never opened — they clicked a
+ * node, and the panel followed. So it is a labelled region with
+ * `aria-live="polite"`, which is what makes a screen reader announce the new
+ * selection without stealing the cursor from whatever the reader was doing.
+ *
+ * The relationships are real buttons when they carry `onSelect`, which is how
+ * the diagram becomes navigable from the keyboard: a reader can walk the graph
+ * peer by peer without ever touching the picture.
+ *
+ * @example
+ * <DiagramInspector
+ *   eyebrow="Service"
+ *   title="API Server"
+ *   description="FastAPI, behind the load balancer."
+ *   facts={[
+ *     { label: 'Port', value: '8000', mono: true },
+ *     { label: 'Id', value: 'api', mono: true },
+ *   ]}
+ *   links={[{ direction: 'out', label: 'SQL', peer: 'PostgreSQL' }]}
+ *   onClose={() => setSelected(null)}
+ * />
+ */
+declare function DiagramInspector({ eyebrow, title, description, facts, links, actions, onClose, className, floating, }: DiagramInspectorProps): react.JSX.Element;
+
+export { DiagramInspector, type DiagramInspectorProps, type InspectorFact, type InspectorLink, DiagramInspector as default };

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) => /* @__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
+            }
+          )
+        ] }, fact.label)) }),
+        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          {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 };