@misoto22/design 0.7.0 → 0.9.0

package/dist/components/ToggleGroup/ToggleGroup.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/ToggleGroup/ToggleGroup.tsx"],"sourcesContent":["'use client'\n\nimport * as ToggleGroupPrimitive from '@radix-ui/react-toggle-group'\nimport { createContext, useContext, useState, type ComponentProps } from 'react'\nimport { cn } from '../../lib/cn'\nimport { useSelectionIndicator } from '../../lib/useSelectionIndicator'\n\nexport type ToggleGroupProps = ComponentProps<typeof ToggleGroupPrimitive.Root>\n\n/** Lets an item know whether the group tracks one value or several. */\nconst SingleValueContext = createContext<string | null>(null)\n\n/**\n * A segmented control: several options, one strip.\n *\n * `type=\"single\"` is a choice — Radix gives it radio semantics, and it is the\n * right shape for a view switcher or a density setting. `type=\"multiple\"` is a\n * set of independent toggles, which is a different thing announced differently;\n * choosing the wrong one is how a \"filter by tag\" control ends up telling a\n * screen reader that picking one tag unpicks the others.\n *\n * The two look different on purpose. A single-value strip moves ONE filled pill\n * between its options, so the eye follows a thing travelling; a multiple-value\n * strip fills each pressed option separately, because there is no single\n * selection to travel. Two people looking at a screenshot should be able to\n * tell which kind they are looking at, and before this they could not.\n *\n * Distinct from `Tabs`, which switches PANELS and owns a tabpanel relationship.\n * A toggle group changes a value.\n *\n * @example\n * <ToggleGroup type=\"single\" defaultValue=\"grid\" aria-label=\"Layout\">\n *   <ToggleGroupItem value=\"grid\">Grid</ToggleGroupItem>\n *   <ToggleGroupItem value=\"list\">List</ToggleGroupItem>\n * </ToggleGroup>\n */\nexport function ToggleGroup({ className, children, ...props }: ToggleGroupProps) {\n  // Tracked here rather than left to Radix alone, because the sliding pill has\n  // to know which item to measure — and an uncontrolled group never tells\n  // anyone what it picked.\n  const single = props.type === 'single'\n  const [uncontrolled, setUncontrolled] = useState<string>(\n    (single ? (props.defaultValue as string | undefined) : undefined) ?? '',\n  )\n  const value = single ? ((props.value as string | undefined) ?? uncontrolled) : null\n  const [ref, indicator] = useSelectionIndicator<HTMLDivElement>(value)\n\n  const root = (\n    <ToggleGroupPrimitive.Root\n      ref={ref}\n      className={cn(\n        // `w-fit` as well as `inline-flex`: a flex or grid parent stretches its\n        // children to the track by default, and `inline-flex` does not opt out\n        // of that. Without it the strip grew to whatever the widest sibling was\n        // — a label above it — and left dead space after the last segment.\n        'relative inline-flex w-fit items-center gap-1 rounded-(--radius-pill) border border-(--rule-2) p-1',\n        className,\n      )}\n      {...props}\n      onValueChange={(next: never) => {\n        if (single) setUncontrolled((next as string) ?? '')\n        ;(props.onValueChange as ((v: never) => void) | undefined)?.(next)\n      }}\n    >\n      {single && indicator.ready && (\n        <span\n          aria-hidden\n          data-m22-animated\n          className=\"absolute rounded-(--radius-pill) bg-(--accent) transition-[transform,width] duration-(--duration-base) ease-(--ease-out-expo) motion-reduce:transition-none\"\n          style={{\n            transform: `translate(${indicator.offset}px, ${indicator.top}px)`,\n            width: indicator.width,\n            height: indicator.height,\n            insetInlineStart: 0,\n            top: 0,\n          }}\n        />\n      )}\n      {children}\n    </ToggleGroupPrimitive.Root>\n  )\n\n  return single ? (\n    <SingleValueContext.Provider value={value}>{root}</SingleValueContext.Provider>\n  ) : (\n    root\n  )\n}\n\nexport type ToggleGroupItemProps = ComponentProps<typeof ToggleGroupPrimitive.Item>\n\n/**\n * One segment.\n *\n * In a single-value group the item draws no background of its own — the\n * travelling pill behind it does — so it only changes ink. In a multiple-value\n * group it fills, because there is nothing travelling.\n */\nexport function ToggleGroupItem({ className, value, ...props }: ToggleGroupItemProps) {\n  const selected = useContext(SingleValueContext)\n  const isSingle = selected !== null\n  const active = isSingle && selected === value\n\n  return (\n    <ToggleGroupPrimitive.Item\n      value={value}\n      data-indicator-active={active ? 'true' : undefined}\n      className={cn(\n        'relative z-1 inline-flex min-h-(--control-h-sm) items-center justify-center gap-2 rounded-(--radius-pill) px-3.5 text-sm transition-colors duration-(--duration-fast) disabled:opacity-(--disabled-opacity) disabled:pointer-events-none',\n        isSingle\n          ? active\n            ? 'text-(--accent-foreground)'\n            : 'text-(--ink-3-aa) hover:text-(--ink)'\n          : 'text-(--ink-3-aa) hover:text-(--ink) data-[state=on]:bg-(--accent) data-[state=on]:text-(--accent-foreground)',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nexport default ToggleGroup\n"],"mappings":";AAgDI,SAiBI,KAjBJ;AA9CJ,YAAY,0BAA0B;AACtC,SAAS,eAAe,YAAY,gBAAqC;AACzE,SAAS,UAAU;AACnB,SAAS,6BAA6B;AAKtC,MAAM,qBAAqB,cAA6B,IAAI;AA0BrD,SAAS,YAAY,EAAE,WAAW,UAAU,GAAG,MAAM,GAAqB;AAI/E,QAAM,SAAS,MAAM,SAAS;AAC9B,QAAM,CAAC,cAAc,eAAe,IAAI;AAAA,KACrC,SAAU,MAAM,eAAsC,WAAc;AAAA,EACvE;AACA,QAAM,QAAQ,SAAW,MAAM,SAAgC,eAAgB;AAC/E,QAAM,CAAC,KAAK,SAAS,IAAI,sBAAsC,KAAK;AAEpE,QAAM,OACJ;AAAA,IAAC,qBAAqB;AAAA,IAArB;AAAA,MACC;AAAA,MACA,WAAW;AAAA;AAAA;AAAA;AAAA;AAAA,QAKT;AAAA,QACA;AAAA,MACF;AAAA,MACC,GAAG;AAAA,MACJ,eAAe,CAAC,SAAgB;AAC9B,YAAI,OAAQ,iBAAiB,QAAmB,EAAE;AACjD,QAAC,MAAM,gBAAqD,IAAI;AAAA,MACnE;AAAA,MAEC;AAAA,kBAAU,UAAU,SACnB;AAAA,UAAC;AAAA;AAAA,YACC,eAAW;AAAA,YACX,qBAAiB;AAAA,YACjB,WAAU;AAAA,YACV,OAAO;AAAA,cACL,WAAW,aAAa,UAAU,MAAM,OAAO,UAAU,GAAG;AAAA,cAC5D,OAAO,UAAU;AAAA,cACjB,QAAQ,UAAU;AAAA,cAClB,kBAAkB;AAAA,cAClB,KAAK;AAAA,YACP;AAAA;AAAA,QACF;AAAA,QAED;AAAA;AAAA;AAAA,EACH;AAGF,SAAO,SACL,oBAAC,mBAAmB,UAAnB,EAA4B,OAAe,gBAAK,IAEjD;AAEJ;AAWO,SAAS,gBAAgB,EAAE,WAAW,OAAO,GAAG,MAAM,GAAyB;AACpF,QAAM,WAAW,WAAW,kBAAkB;AAC9C,QAAM,WAAW,aAAa;AAC9B,QAAM,SAAS,YAAY,aAAa;AAExC,SACE;AAAA,IAAC,qBAAqB;AAAA,IAArB;AAAA,MACC;AAAA,MACA,yBAAuB,SAAS,SAAS;AAAA,MACzC,WAAW;AAAA,QACT;AAAA,QACA,WACI,SACE,+BACA,yCACF;AAAA,QACJ;AAAA,MACF;AAAA,MACC,GAAG;AAAA;AAAA,EACN;AAEJ;AAEA,IAAO,sBAAQ;","names":[]}
+{"version":3,"sources":["../../../src/components/ToggleGroup/ToggleGroup.tsx"],"sourcesContent":["'use client'\n\nimport * as ToggleGroupPrimitive from '@radix-ui/react-toggle-group'\nimport { createContext, useContext, useState, type ComponentProps } from 'react'\nimport { cn } from '../../lib/cn'\nimport { useFieldControl } from '../Field/field-control'\nimport { useSelectionIndicator } from '../../lib/useSelectionIndicator'\n\nexport type ToggleGroupProps = ComponentProps<typeof ToggleGroupPrimitive.Root>\n\n/** Lets an item know whether the group tracks one value or several. */\nconst SingleValueContext = createContext<string | null>(null)\n\n/**\n * A segmented control: several options, one strip.\n *\n * `type=\"single\"` is a choice — Radix gives it radio semantics, and it is the\n * right shape for a view switcher or a density setting. `type=\"multiple\"` is a\n * set of independent toggles, which is a different thing announced differently;\n * choosing the wrong one is how a \"filter by tag\" control ends up telling a\n * screen reader that picking one tag unpicks the others.\n *\n * The two look different on purpose. A single-value strip moves ONE filled pill\n * between its options, so the eye follows a thing travelling; a multiple-value\n * strip fills each pressed option separately, because there is no single\n * selection to travel. Two people looking at a screenshot should be able to\n * tell which kind they are looking at, and before this they could not.\n *\n * Distinct from `Tabs`, which switches PANELS and owns a tabpanel relationship.\n * A toggle group changes a value.\n *\n * Inside a `Field` the strip takes its name from that label, by pointing back at\n * it — the root is a div, and `<label for>` does not bind to one, so the words\n * above it do not click through. Standing alone it still needs its own\n * `aria-label`.\n *\n * @example\n * <ToggleGroup type=\"single\" defaultValue=\"grid\" aria-label=\"Layout\">\n *   <ToggleGroupItem value=\"grid\">Grid</ToggleGroupItem>\n *   <ToggleGroupItem value=\"list\">List</ToggleGroupItem>\n * </ToggleGroup>\n */\nexport function ToggleGroup({\n  className,\n  children,\n  'aria-required': ariaRequired,\n  ...props\n}: ToggleGroupProps) {\n  const field = useFieldControl()\n  const named = props['aria-label'] != null || props['aria-labelledby'] != null\n\n  // Tracked here rather than left to Radix alone, because the sliding pill has\n  // to know which item to measure — and an uncontrolled group never tells\n  // anyone what it picked.\n  const single = props.type === 'single'\n  const [uncontrolled, setUncontrolled] = useState<string>(\n    (single ? (props.defaultValue as string | undefined) : undefined) ?? '',\n  )\n  const value = single ? ((props.value as string | undefined) ?? uncontrolled) : null\n  const [ref, indicator] = useSelectionIndicator<HTMLDivElement>(value)\n\n  const root = (\n    <ToggleGroupPrimitive.Root\n      ref={ref}\n      aria-labelledby={named ? undefined : field?.labelId}\n      // Only on the single-value strip. Radix gives that one role=\"radiogroup\",\n      // which takes aria-required; a multiple-value strip is a role=\"toolbar\",\n      // where the attribute is not allowed at all — so a Field's `required`\n      // reaches one shape of this control and not the other.\n      aria-required={props.type === 'single' ? ariaRequired : undefined}\n      className={cn(\n        // `w-fit` as well as `inline-flex`: a flex or grid parent stretches its\n        // children to the track by default, and `inline-flex` does not opt out\n        // of that. Without it the strip grew to whatever the widest sibling was\n        // — a label above it — and left dead space after the last segment.\n        'relative inline-flex w-fit items-center gap-1 rounded-(--radius-pill) border border-(--rule-2) p-1',\n        className,\n      )}\n      {...props}\n      onValueChange={(next: never) => {\n        if (single) setUncontrolled((next as string) ?? '')\n        ;(props.onValueChange as ((v: never) => void) | undefined)?.(next)\n      }}\n    >\n      {single && indicator.ready && (\n        <span\n          aria-hidden\n          data-m22-animated\n          className=\"absolute rounded-(--radius-pill) bg-(--accent) transition-[transform,width] duration-(--duration-base) ease-(--ease-out-expo) motion-reduce:transition-none\"\n          style={{\n            transform: `translate(${indicator.offset}px, ${indicator.top}px)`,\n            width: indicator.width,\n            height: indicator.height,\n            insetInlineStart: 0,\n            top: 0,\n          }}\n        />\n      )}\n      {children}\n    </ToggleGroupPrimitive.Root>\n  )\n\n  return single ? (\n    <SingleValueContext.Provider value={value}>{root}</SingleValueContext.Provider>\n  ) : (\n    root\n  )\n}\n\nexport type ToggleGroupItemProps = ComponentProps<typeof ToggleGroupPrimitive.Item>\n\n/**\n * One segment.\n *\n * In a single-value group the item draws no background of its own — the\n * travelling pill behind it does — so it only changes ink. In a multiple-value\n * group it fills, because there is nothing travelling.\n */\nexport function ToggleGroupItem({ className, value, ...props }: ToggleGroupItemProps) {\n  const selected = useContext(SingleValueContext)\n  const isSingle = selected !== null\n  const active = isSingle && selected === value\n\n  return (\n    <ToggleGroupPrimitive.Item\n      value={value}\n      data-indicator-active={active ? 'true' : undefined}\n      className={cn(\n        'relative z-1 inline-flex min-h-(--control-h-sm) items-center justify-center gap-2 rounded-(--radius-pill) px-3.5 text-sm transition-colors duration-(--duration-fast) disabled:opacity-(--disabled-opacity) disabled:pointer-events-none',\n        isSingle\n          ? active\n            ? 'text-(--accent-foreground)'\n            : 'text-(--ink-3-aa) hover:text-(--ink)'\n          : 'text-(--ink-3-aa) hover:text-(--ink) data-[state=on]:bg-(--accent) data-[state=on]:text-(--accent-foreground)',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nexport default ToggleGroup\n"],"mappings":";AA8DI,SAuBI,KAvBJ;AA5DJ,YAAY,0BAA0B;AACtC,SAAS,eAAe,YAAY,gBAAqC;AACzE,SAAS,UAAU;AACnB,SAAS,uBAAuB;AAChC,SAAS,6BAA6B;AAKtC,MAAM,qBAAqB,cAA6B,IAAI;AA+BrD,SAAS,YAAY;AAAA,EAC1B;AAAA,EACA;AAAA,EACA,iBAAiB;AAAA,EACjB,GAAG;AACL,GAAqB;AACnB,QAAM,QAAQ,gBAAgB;AAC9B,QAAM,QAAQ,MAAM,YAAY,KAAK,QAAQ,MAAM,iBAAiB,KAAK;AAKzE,QAAM,SAAS,MAAM,SAAS;AAC9B,QAAM,CAAC,cAAc,eAAe,IAAI;AAAA,KACrC,SAAU,MAAM,eAAsC,WAAc;AAAA,EACvE;AACA,QAAM,QAAQ,SAAW,MAAM,SAAgC,eAAgB;AAC/E,QAAM,CAAC,KAAK,SAAS,IAAI,sBAAsC,KAAK;AAEpE,QAAM,OACJ;AAAA,IAAC,qBAAqB;AAAA,IAArB;AAAA,MACC;AAAA,MACA,mBAAiB,QAAQ,SAAY,OAAO;AAAA,MAK5C,iBAAe,MAAM,SAAS,WAAW,eAAe;AAAA,MACxD,WAAW;AAAA;AAAA;AAAA;AAAA;AAAA,QAKT;AAAA,QACA;AAAA,MACF;AAAA,MACC,GAAG;AAAA,MACJ,eAAe,CAAC,SAAgB;AAC9B,YAAI,OAAQ,iBAAiB,QAAmB,EAAE;AACjD,QAAC,MAAM,gBAAqD,IAAI;AAAA,MACnE;AAAA,MAEC;AAAA,kBAAU,UAAU,SACnB;AAAA,UAAC;AAAA;AAAA,YACC,eAAW;AAAA,YACX,qBAAiB;AAAA,YACjB,WAAU;AAAA,YACV,OAAO;AAAA,cACL,WAAW,aAAa,UAAU,MAAM,OAAO,UAAU,GAAG;AAAA,cAC5D,OAAO,UAAU;AAAA,cACjB,QAAQ,UAAU;AAAA,cAClB,kBAAkB;AAAA,cAClB,KAAK;AAAA,YACP;AAAA;AAAA,QACF;AAAA,QAED;AAAA;AAAA;AAAA,EACH;AAGF,SAAO,SACL,oBAAC,mBAAmB,UAAnB,EAA4B,OAAe,gBAAK,IAEjD;AAEJ;AAWO,SAAS,gBAAgB,EAAE,WAAW,OAAO,GAAG,MAAM,GAAyB;AACpF,QAAM,WAAW,WAAW,kBAAkB;AAC9C,QAAM,WAAW,aAAa;AAC9B,QAAM,SAAS,YAAY,aAAa;AAExC,SACE;AAAA,IAAC,qBAAqB;AAAA,IAArB;AAAA,MACC;AAAA,MACA,yBAAuB,SAAS,SAAS;AAAA,MACzC,WAAW;AAAA,QACT;AAAA,QACA,WACI,SACE,+BACA,yCACF;AAAA,QACJ;AAAA,MACF;AAAA,MACC,GAAG;AAAA;AAAA,EACN;AAEJ;AAEA,IAAO,sBAAQ;","names":[]}

package/dist/components/Toolbar/Toolbar.d.ts

@@ -0,0 +1,55 @@
+import * as react from 'react';
+import { HTMLAttributes, ReactNode } from 'react';
+
+/**
+ * Which edge the bar sticks to, or neither.
+ *
+ * `bottom` is the form footer — the actions stay in reach while a long form
+ * scrolls under them. `top` is the filter bar over a list. `static` is the same
+ * bar with no stickiness, for a short page or a bar inside a dialog that is
+ * already the height of its content.
+ */
+type ToolbarPosition = 'bottom' | 'top' | 'static';
+type ToolbarAlign = 'start' | 'center' | 'end' | 'between';
+interface ToolbarProps extends HTMLAttributes<HTMLDivElement> {
+    /**
+     * Names the bar for a screen reader — "Form actions", "List filters".
+     * Required, because a group with no name is announced as "group" and a page
+     * with two of them is a page with two identical announcements.
+     */
+    label: string;
+    /** Which edge the bar sticks to. See {@link ToolbarPosition}. */
+    position?: ToolbarPosition;
+    /** Where the contents sit along the inline axis. */
+    align?: ToolbarAlign;
+    children: ReactNode;
+}
+/**
+ * The bar of actions at the edge of a working surface.
+ *
+ * Two page templates built the same thing independently — a sticky strip on
+ * `--paper` with a rule along the edge it sticks to — which is the signal that
+ * it belongs here rather than in each of them.
+ *
+ * The ground is opaque `--paper` and not a blur. Content scrolls UNDER this
+ * bar, so anything translucent puts the last row of a table behind the submit
+ * button and makes both unreadable; `FloatingIconButton` blurs because it
+ * floats over a gap, which is a different problem.
+ *
+ * It is not `role="toolbar"`. That role's contract is a single tab stop with
+ * arrow keys moving between the controls inside it, and this implements no such
+ * thing — declaring the role without the behaviour tells a screen-reader user
+ * to press arrow keys that do nothing. It is a named `group`, so the controls
+ * keep their own places in the tab order and the bar is still announced.
+ *
+ * @example
+ * <Toolbar label="Form actions">
+ *   <Button variant="secondary">Cancel</Button>
+ *   <Button type="submit">Save changes</Button>
+ * </Toolbar>
+ * @example
+ * <Toolbar label="List filters" position="top" align="between">…</Toolbar>
+ */
+declare function Toolbar({ label, position, align, className, children, ...rest }: ToolbarProps): react.JSX.Element;
+
+export { Toolbar, type ToolbarAlign, type ToolbarPosition, type ToolbarProps, Toolbar as default };

package/dist/components/Toolbar/Toolbar.js

@@ -0,0 +1,43 @@
+import { jsx } from "react/jsx-runtime";
+import { cn } from "../../lib/cn.js";
+const POSITION = {
+  bottom: "sticky bottom-0 z-(--z-sticky) border-t border-(--rule-2)",
+  top: "sticky top-0 z-(--z-sticky) border-b border-(--rule-2)",
+  static: "border-t border-(--rule-2)"
+};
+const ALIGN = {
+  start: "justify-start",
+  center: "justify-center",
+  end: "justify-end",
+  between: "justify-between"
+};
+function Toolbar({
+  label,
+  position = "bottom",
+  align = "end",
+  className,
+  children,
+  ...rest
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      role: "group",
+      "aria-label": label,
+      className: cn(
+        "flex flex-wrap items-center gap-3 bg-(--paper) px-4 py-3",
+        POSITION[position],
+        ALIGN[align],
+        className
+      ),
+      ...rest,
+      children
+    }
+  );
+}
+var Toolbar_default = Toolbar;
+export {
+  Toolbar,
+  Toolbar_default as default
+};
+//# sourceMappingURL=Toolbar.js.map

package/dist/components/Toolbar/Toolbar.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/Toolbar/Toolbar.tsx"],"sourcesContent":["import type { HTMLAttributes, ReactNode } from 'react'\nimport { cn } from '../../lib/cn'\n\n/**\n * Which edge the bar sticks to, or neither.\n *\n * `bottom` is the form footer — the actions stay in reach while a long form\n * scrolls under them. `top` is the filter bar over a list. `static` is the same\n * bar with no stickiness, for a short page or a bar inside a dialog that is\n * already the height of its content.\n */\nexport type ToolbarPosition = 'bottom' | 'top' | 'static'\n\nexport type ToolbarAlign = 'start' | 'center' | 'end' | 'between'\n\nexport interface ToolbarProps extends HTMLAttributes<HTMLDivElement> {\n  /**\n   * Names the bar for a screen reader — \"Form actions\", \"List filters\".\n   * Required, because a group with no name is announced as \"group\" and a page\n   * with two of them is a page with two identical announcements.\n   */\n  label: string\n  /** Which edge the bar sticks to. See {@link ToolbarPosition}. */\n  position?: ToolbarPosition\n  /** Where the contents sit along the inline axis. */\n  align?: ToolbarAlign\n  children: ReactNode\n}\n\nconst POSITION: Record<ToolbarPosition, string> = {\n  bottom: 'sticky bottom-0 z-(--z-sticky) border-t border-(--rule-2)',\n  top: 'sticky top-0 z-(--z-sticky) border-b border-(--rule-2)',\n  static: 'border-t border-(--rule-2)',\n}\n\nconst ALIGN: Record<ToolbarAlign, string> = {\n  start: 'justify-start',\n  center: 'justify-center',\n  end: 'justify-end',\n  between: 'justify-between',\n}\n\n/**\n * The bar of actions at the edge of a working surface.\n *\n * Two page templates built the same thing independently — a sticky strip on\n * `--paper` with a rule along the edge it sticks to — which is the signal that\n * it belongs here rather than in each of them.\n *\n * The ground is opaque `--paper` and not a blur. Content scrolls UNDER this\n * bar, so anything translucent puts the last row of a table behind the submit\n * button and makes both unreadable; `FloatingIconButton` blurs because it\n * floats over a gap, which is a different problem.\n *\n * It is not `role=\"toolbar\"`. That role's contract is a single tab stop with\n * arrow keys moving between the controls inside it, and this implements no such\n * thing — declaring the role without the behaviour tells a screen-reader user\n * to press arrow keys that do nothing. It is a named `group`, so the controls\n * keep their own places in the tab order and the bar is still announced.\n *\n * @example\n * <Toolbar label=\"Form actions\">\n *   <Button variant=\"secondary\">Cancel</Button>\n *   <Button type=\"submit\">Save changes</Button>\n * </Toolbar>\n * @example\n * <Toolbar label=\"List filters\" position=\"top\" align=\"between\">…</Toolbar>\n */\nexport function Toolbar({\n  label,\n  position = 'bottom',\n  align = 'end',\n  className,\n  children,\n  ...rest\n}: ToolbarProps) {\n  return (\n    <div\n      role=\"group\"\n      aria-label={label}\n      className={cn(\n        'flex flex-wrap items-center gap-3 bg-(--paper) px-4 py-3',\n        POSITION[position],\n        ALIGN[align],\n        className,\n      )}\n      {...rest}\n    >\n      {children}\n    </div>\n  )\n}\n\nexport default Toolbar\n"],"mappings":"AA6EI;AA5EJ,SAAS,UAAU;AA4BnB,MAAM,WAA4C;AAAA,EAChD,QAAQ;AAAA,EACR,KAAK;AAAA,EACL,QAAQ;AACV;AAEA,MAAM,QAAsC;AAAA,EAC1C,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,KAAK;AAAA,EACL,SAAS;AACX;AA4BO,SAAS,QAAQ;AAAA,EACtB;AAAA,EACA,WAAW;AAAA,EACX,QAAQ;AAAA,EACR;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAiB;AACf,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL,cAAY;AAAA,MACZ,WAAW;AAAA,QACT;AAAA,QACA,SAAS,QAAQ;AAAA,QACjB,MAAM,KAAK;AAAA,QACX;AAAA,MACF;AAAA,MACC,GAAG;AAAA,MAEH;AAAA;AAAA,EACH;AAEJ;AAEA,IAAO,kBAAQ;","names":[]}

package/dist/diagrams/ArchitectureFigure/ArchitectureFigure.d.ts

@@ -21,6 +21,12 @@ interface ArchitectureFigureProps extends FigureChrome {
  * the input, it is identical on the server and in the browser, and there is no
  * layout shift on hydration because there is no layout to do.
  *
+ * A component that declares NEITHER flows: it takes the next free cell in
+ * declaration order, wrapping at `layout.cols`. That is still arithmetic on
+ * numbers the specification carries rather than a solver — and the alternative
+ * was every unplaced component defaulting to row 0, column 0 and stacking into
+ * one plate.
+ *
  * BOUNDARIES ARE DRAWN FIRST, AND DRAWN DIFFERENTLY. A `region` is where
  * something RUNS — a VPC, a zone, a cluster — and is a solid frame. A
  * `security-group` is what may REACH it, and is dashed. That is not decoration:

package/dist/diagrams/ArchitectureFigure/ArchitectureFigure.js

@@ -1,8 +1,9 @@
 "use client";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useId, useMemo } from "react";
+import { liveEdges, useSpecIdentity, warnCollision } from "../lib/dev.js";
 import { DiagramFrame } from "../lib/frame.js";
-import { inflate, TYPE, union, wrapText } from "../lib/geometry.js";
+import { inflate, round, TYPE, union, wrapText } from "../lib/geometry.js";
 import { kindLegend, resolveLegend } from "../lib/legend.js";
 import { BandFrame, NodePlate, PLATE, plateHeight } from "../lib/marks.js";
 import { renderWires, wiresFor } from "../lib/wires.js";
@@ -26,6 +27,7 @@ function ArchitectureFigure({
   onSelectNode
 }) {
   const uid = useId().replace(/:/g, "");
+  useSpecIdentity(spec, "ArchitectureFigure");
   const model = useMemo(() => buildModel(spec, uid, activeIds, onSelectNode), [spec, uid, activeIds, onSelectNode]);
   return /* @__PURE__ */ jsx(
     DiagramFrame,
@@ -42,12 +44,34 @@ function ArchitectureFigure({
     }
   );
 }
+function flow(components, cols) {
+  const claimed = /* @__PURE__ */ new Set();
+  for (const component of components) {
+    if (!component.pos && (component.row !== void 0 || component.col !== void 0)) {
+      claimed.add(`${component.row ?? 0}:${component.col ?? 0}`);
+    }
+  }
+  let cursor = 0;
+  return (component) => {
+    if (component.row !== void 0 || component.col !== void 0) {
+      return [component.row ?? 0, component.col ?? 0];
+    }
+    while (claimed.has(`${Math.floor(cursor / cols)}:${cursor % cols}`)) cursor += 1;
+    const cell = [Math.floor(cursor / cols), cursor % cols];
+    claimed.add(`${cell[0]}:${cell[1]}`);
+    cursor += 1;
+    return cell;
+  };
+}
 function buildModel(spec, uid, activeIds, onSelectNode) {
   const layout = { ...GRID, ...spec.layout };
   const [originX, originY] = layout.origin;
+  const nextCell = flow(spec.components, Math.max(1, Math.round(layout.cols)));
   const boxes = /* @__PURE__ */ new Map();
+  const cells = /* @__PURE__ */ new Map();
+  const named = new Map(spec.components.map((component) => [component.id, component.label]));
   const placed = spec.components.map((component) => {
-    const labelWidth = component.size?.[0] ?? component.width ?? GRID.cellW;
+    const labelWidth = component.size?.[0] ?? component.width ?? layout.cellW;
     const lines = wrapText(component.label, TYPE.label, labelWidth - PLATE.padX * 2, 2);
     const height = plateHeight(
       lines.length,
@@ -55,21 +79,28 @@ function buildModel(spec, uid, activeIds, onSelectNode) {
       Boolean(component.type || component.tag),
       component.size?.[1] ?? component.height ?? 0
     );
-    const x = component.pos ? component.pos[0] : originX + (component.col ?? 0) * (layout.cellW + layout.gapX);
-    const y = component.pos ? component.pos[1] : originY + (component.row ?? 0) * (layout.cellH + layout.gapY);
+    const [row, col] = nextCell(component);
+    const x = component.pos ? component.pos[0] : originX + col * (layout.cellW + layout.gapX);
+    const y = component.pos ? component.pos[1] : originY + row * (layout.cellH + layout.gapY);
     const box = { x, y, w: labelWidth, h: height };
     boxes.set(component.id, box);
+    cells.set(`${round(x)}:${round(y)}`, [...cells.get(`${round(x)}:${round(y)}`) ?? [], component.id]);
     return { component, box };
   });
+  for (const ids of cells.values()) {
+    if (ids.length > 1) warnCollision("ArchitectureFigure", ids);
+  }
   const boundaries = (spec.boundaries ?? []).map((boundary) => {
-    const wrapped = boundary.wraps.map((id) => boxes.get(id)).filter((box) => Boolean(box));
+    const inside = boundary.wraps.filter((id) => boxes.has(id));
+    const wrapped = inside.map((id) => boxes.get(id)).filter((box) => Boolean(box));
     const extent2 = union(wrapped);
-    return { boundary, box: extent2 ? inflate(extent2, boundary.pad ?? 28) : null };
+    return { boundary, inside, box: extent2 ? inflate(extent2, boundary.pad ?? 28) : null };
   });
   const absolute = new Set(
     spec.components.filter((component) => component.pos).map((component) => component.id)
   );
-  const wires = wiresFor(spec.connections, boxes, (connection) => ({
+  const connections = liveEdges("ArchitectureFigure", spec.connections, (id) => boxes.has(id));
+  const wires = wiresFor(connections, boxes, (connection) => ({
     keepWaypoints: absolute.has(connection.from) && absolute.has(connection.to)
   }));
   const { paths, labels } = renderWires(wires, uid);
@@ -116,11 +147,20 @@ function buildModel(spec, uid, activeIds, onSelectNode) {
       sublabel: component.sublabel,
       kind: component.type
     })),
-    edges: (spec.connections ?? []).map((connection) => ({
+    edges: connections.map((connection) => ({
       from: connection.from,
       to: connection.to,
       label: connection.label
     })),
+    // A boundary is a statement — this runs there, that may reach it — drawn as
+    // a frame inside artwork a screen reader is told to skip. It groups nothing
+    // in the list, because two boundaries can hold the same component and a
+    // node published twice is a node the keyboard reaches twice.
+    notes: boundaries.map(({ boundary, inside }) => {
+      const kind = boundary.kind === "region" ? "Region" : "Security group";
+      const members = inside.map((id) => named.get(id) ?? id);
+      return members.length > 0 ? `${kind} ${boundary.label} encloses ${members.join(", ")}.` : `${kind} ${boundary.label} encloses nothing this figure draws.`;
+    }),
     legend: kindLegend(
       resolveLegend(used, spec.meta.legend?.mode, KINDS, spec.meta.legend?.entries),
       spec.meta.legend?.entries

package/dist/diagrams/ArchitectureFigure/ArchitectureFigure.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/diagrams/ArchitectureFigure/ArchitectureFigure.tsx"],"sourcesContent":["'use client'\n\nimport { useId, useMemo } from 'react'\nimport { DiagramFrame, type FigureChrome, type FigureModel } from '../lib/frame'\nimport { inflate, TYPE, union, wrapText, type Box } from '../lib/geometry'\nimport { kindLegend, resolveLegend } from '../lib/legend'\nimport { BandFrame, NodePlate, PLATE, plateHeight } from '../lib/marks'\nimport { renderWires, wiresFor } from '../lib/wires'\nimport type { ArchitectureSpec, NodeKind } from '../spec'\n\nconst KINDS: NodeKind[] = [\n  'frontend',\n  'backend',\n  'database',\n  'cloud',\n  'security',\n  'messagebus',\n  'external',\n]\n\n/** What a cell is, when the specification does not say. */\nconst GRID = { origin: [40, 48] as [number, number], cols: 4, cellW: 184, cellH: 72, gapX: 64, gapY: 76 }\n\nexport interface ArchitectureFigureProps extends FigureChrome {\n  spec: ArchitectureSpec\n}\n\n/**\n * A component map: services, datastores, boundaries, and what talks to what.\n *\n * Takes the same JSON an archify `architecture` specification carries —\n * `components`, `boundaries`, `connections` — and draws it in this system's own\n * terms: paper plates on a hairline, one reversed plate for the component the\n * diagram is about, and seven drawn sigils where archify uses seven hues.\n *\n * IT RENDERS ON A SERVER because every position is already in the\n * specification. A component gives a `row` and a `col` into a grid whose cell\n * size is either declared or defaulted, or it gives an absolute `pos` — nothing\n * here is solved for, relaxed, or measured. So the markup is a pure function of\n * the input, it is identical on the server and in the browser, and there is no\n * layout shift on hydration because there is no layout to do.\n *\n * BOUNDARIES ARE DRAWN FIRST, AND DRAWN DIFFERENTLY. A `region` is where\n * something RUNS — a VPC, a zone, a cluster — and is a solid frame. A\n * `security-group` is what may REACH it, and is dashed. That is not decoration:\n * an infrastructure diagram is very often read for exactly one of those two\n * questions, and a reader should be able to tell which line answers which\n * without reading either label.\n *\n * @example\n * <ArchitectureFigure\n *   spec={{\n *     meta: { title: 'Request path' },\n *     components: [\n *       { id: 'cdn', type: 'cloud', label: 'CloudFront', row: 0, col: 0 },\n *       { id: 'api', type: 'backend', label: 'FastAPI', sublabel: 'ECS', row: 0, col: 1 },\n *       { id: 'db', type: 'database', label: 'Postgres', row: 0, col: 2 },\n *     ],\n *     connections: [\n *       { from: 'cdn', to: 'api', label: 'HTTPS' },\n *       { from: 'api', to: 'db', label: 'SQL' },\n *     ],\n *   }}\n * />\n */\nexport function ArchitectureFigure({\n  spec,\n  className,\n  legend = 'auto',\n  cards = true,\n  heading = true,\n  activeIds,\n  onSelectNode,\n}: ArchitectureFigureProps) {\n  const uid = useId().replace(/:/g, '')\n  const model = useMemo(() => buildModel(spec, uid, activeIds, onSelectNode), [spec, uid, activeIds, onSelectNode])\n\n  return (\n    <DiagramFrame\n      meta={spec.meta}\n      model={model}\n      cards={spec.cards}\n      showCards={cards}\n      heading={heading}\n      legend={legend}\n      className={className}\n      activeIds={activeIds}\n      onSelectNode={onSelectNode}\n    />\n  )\n}\n\nfunction buildModel(\n  spec: ArchitectureSpec,\n  uid: string,\n  activeIds: string[] | undefined,\n  onSelectNode: ((id: string) => void) | undefined,\n): FigureModel {\n  const layout = { ...GRID, ...spec.layout }\n  const [originX, originY] = layout.origin\n\n  const boxes = new Map<string, Box>()\n  const placed = spec.components.map((component) => {\n    const labelWidth = component.size?.[0] ?? component.width ?? GRID.cellW\n    const lines = wrapText(component.label, TYPE.label, labelWidth - PLATE.padX * 2, 2)\n    const height = plateHeight(\n      lines.length,\n      Boolean(component.sublabel),\n      Boolean(component.type || component.tag),\n      component.size?.[1] ?? component.height ?? 0,\n    )\n\n    const x = component.pos ? component.pos[0] : originX + (component.col ?? 0) * (layout.cellW + layout.gapX)\n    const y = component.pos ? component.pos[1] : originY + (component.row ?? 0) * (layout.cellH + layout.gapY)\n\n    const box: Box = { x, y, w: labelWidth, h: height }\n    boxes.set(component.id, box)\n    return { component, box }\n  })\n\n  const boundaries = (spec.boundaries ?? []).map((boundary) => {\n    const wrapped = boundary.wraps.map((id) => boxes.get(id)).filter((box): box is Box => Boolean(box))\n    const extent = union(wrapped)\n    return { boundary, box: extent ? inflate(extent, boundary.pad ?? 28) : null }\n  })\n\n  // A waypoint is only meaningful when both ends were placed absolutely — see\n  // `Wire.keepWaypoints`. In this diagram type that is common, which is why an\n  // archify architecture specification's hand-tuned routes survive the move.\n  const absolute = new Set(\n    spec.components.filter((component) => component.pos).map((component) => component.id),\n  )\n  const wires = wiresFor(spec.connections, boxes, (connection) => ({\n    keepWaypoints: absolute.has(connection.from) && absolute.has(connection.to),\n  }))\n  const { paths, labels } = renderWires(wires, uid)\n\n  const drawn = [...boxes.values(), ...boundaries.map((entry) => entry.box).filter((box): box is Box => Boolean(box))]\n  const extent = inflate(union(drawn) ?? { x: 0, y: 0, w: 400, h: 200 }, 22)\n\n  const active = activeIds && activeIds.length > 0 ? new Set(activeIds) : null\n\n  const artwork = (\n    <>\n      {boundaries.map(({ boundary, box }, index) =>\n        box ? (\n          <BandFrame\n            key={`${boundary.label}-${index}`}\n            box={box}\n            label={boundary.label}\n            dashed={boundary.kind === 'security-group'}\n          />\n        ) : null,\n      )}\n      {paths}\n      {placed.map(({ component, box }) => (\n        <NodePlate\n          key={component.id}\n          nodeId={component.id}\n          box={box}\n          label={component.label}\n          sublabel={component.sublabel}\n          tag={component.tag}\n          kind={component.type}\n          active={active?.has(component.id)}\n          dimmed={active ? !active.has(component.id) : false}\n          onSelect={onSelectNode ? () => onSelectNode(component.id) : undefined}\n        />\n      ))}\n      {labels}\n    </>\n  )\n\n  const used = [...new Set(spec.components.map((component) => component.type))]\n\n  return {\n    extent,\n    artwork,\n    nodes: spec.components.map((component) => ({\n      id: component.id,\n      label: component.label,\n      sublabel: component.sublabel,\n      kind: component.type,\n    })),\n    edges: (spec.connections ?? []).map((connection) => ({\n      from: connection.from,\n      to: connection.to,\n      label: connection.label,\n    })),\n    legend: kindLegend(\n      resolveLegend(used, spec.meta.legend?.mode, KINDS, spec.meta.legend?.entries),\n      spec.meta.legend?.entries,\n    ),\n  }\n}\n\nexport default ArchitectureFigure\n"],"mappings":"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","names":["extent"]}
+{"version":3,"sources":["../../../src/diagrams/ArchitectureFigure/ArchitectureFigure.tsx"],"sourcesContent":["'use client'\n\nimport { useId, useMemo } from 'react'\nimport { liveEdges, useSpecIdentity, warnCollision } from '../lib/dev'\nimport { DiagramFrame, type FigureChrome, type FigureModel } from '../lib/frame'\nimport { inflate, round, TYPE, union, wrapText, type Box } from '../lib/geometry'\nimport { kindLegend, resolveLegend } from '../lib/legend'\nimport { BandFrame, NodePlate, PLATE, plateHeight } from '../lib/marks'\nimport { renderWires, wiresFor } from '../lib/wires'\nimport type { ArchitectureComponent, ArchitectureSpec, NodeKind } from '../spec'\n\nconst KINDS: NodeKind[] = [\n  'frontend',\n  'backend',\n  'database',\n  'cloud',\n  'security',\n  'messagebus',\n  'external',\n]\n\n/** What a cell is, when the specification does not say. */\nconst GRID = { origin: [40, 48] as [number, number], cols: 4, cellW: 184, cellH: 72, gapX: 64, gapY: 76 }\n\nexport interface ArchitectureFigureProps extends FigureChrome {\n  spec: ArchitectureSpec\n}\n\n/**\n * A component map: services, datastores, boundaries, and what talks to what.\n *\n * Takes the same JSON an archify `architecture` specification carries —\n * `components`, `boundaries`, `connections` — and draws it in this system's own\n * terms: paper plates on a hairline, one reversed plate for the component the\n * diagram is about, and seven drawn sigils where archify uses seven hues.\n *\n * IT RENDERS ON A SERVER because every position is already in the\n * specification. A component gives a `row` and a `col` into a grid whose cell\n * size is either declared or defaulted, or it gives an absolute `pos` — nothing\n * here is solved for, relaxed, or measured. So the markup is a pure function of\n * the input, it is identical on the server and in the browser, and there is no\n * layout shift on hydration because there is no layout to do.\n *\n * A component that declares NEITHER flows: it takes the next free cell in\n * declaration order, wrapping at `layout.cols`. That is still arithmetic on\n * numbers the specification carries rather than a solver — and the alternative\n * was every unplaced component defaulting to row 0, column 0 and stacking into\n * one plate.\n *\n * BOUNDARIES ARE DRAWN FIRST, AND DRAWN DIFFERENTLY. A `region` is where\n * something RUNS — a VPC, a zone, a cluster — and is a solid frame. A\n * `security-group` is what may REACH it, and is dashed. That is not decoration:\n * an infrastructure diagram is very often read for exactly one of those two\n * questions, and a reader should be able to tell which line answers which\n * without reading either label.\n *\n * @example\n * <ArchitectureFigure\n *   spec={{\n *     meta: { title: 'Request path' },\n *     components: [\n *       { id: 'cdn', type: 'cloud', label: 'CloudFront', row: 0, col: 0 },\n *       { id: 'api', type: 'backend', label: 'FastAPI', sublabel: 'ECS', row: 0, col: 1 },\n *       { id: 'db', type: 'database', label: 'Postgres', row: 0, col: 2 },\n *     ],\n *     connections: [\n *       { from: 'cdn', to: 'api', label: 'HTTPS' },\n *       { from: 'api', to: 'db', label: 'SQL' },\n *     ],\n *   }}\n * />\n */\nexport function ArchitectureFigure({\n  spec,\n  className,\n  legend = 'auto',\n  cards = true,\n  heading = true,\n  activeIds,\n  onSelectNode,\n}: ArchitectureFigureProps) {\n  const uid = useId().replace(/:/g, '')\n  useSpecIdentity(spec, 'ArchitectureFigure')\n  const model = useMemo(() => buildModel(spec, uid, activeIds, onSelectNode), [spec, uid, activeIds, onSelectNode])\n\n  return (\n    <DiagramFrame\n      meta={spec.meta}\n      model={model}\n      cards={spec.cards}\n      showCards={cards}\n      heading={heading}\n      legend={legend}\n      className={className}\n      activeIds={activeIds}\n      onSelectNode={onSelectNode}\n    />\n  )\n}\n\n/**\n * Where a component sits, for a specification that did not say.\n *\n * `row` and `col` are both optional and both defaulted to 0, which meant every\n * component that declared no placement was drawn in the same cell — a figure of\n * seven services rendering as one plate with six underneath it. Reading them as\n * \"put it in the next free cell\" is what `layout.cols` was always for.\n *\n * Cells an explicit `row`/`col` claims are reserved before the flow starts, so\n * an author who placed three of ten components keeps those three exactly where\n * they put them.\n */\nfunction flow(\n  components: ArchitectureComponent[],\n  cols: number,\n): (component: ArchitectureComponent) => [row: number, col: number] {\n  const claimed = new Set<string>()\n  for (const component of components) {\n    if (!component.pos && (component.row !== undefined || component.col !== undefined)) {\n      claimed.add(`${component.row ?? 0}:${component.col ?? 0}`)\n    }\n  }\n\n  let cursor = 0\n  return (component) => {\n    if (component.row !== undefined || component.col !== undefined) {\n      return [component.row ?? 0, component.col ?? 0]\n    }\n    while (claimed.has(`${Math.floor(cursor / cols)}:${cursor % cols}`)) cursor += 1\n    const cell: [number, number] = [Math.floor(cursor / cols), cursor % cols]\n    claimed.add(`${cell[0]}:${cell[1]}`)\n    cursor += 1\n    return cell\n  }\n}\n\nfunction buildModel(\n  spec: ArchitectureSpec,\n  uid: string,\n  activeIds: string[] | undefined,\n  onSelectNode: ((id: string) => void) | undefined,\n): FigureModel {\n  const layout = { ...GRID, ...spec.layout }\n  const [originX, originY] = layout.origin\n  const nextCell = flow(spec.components, Math.max(1, Math.round(layout.cols)))\n\n  const boxes = new Map<string, Box>()\n  const cells = new Map<string, string[]>()\n  const named = new Map(spec.components.map((component) => [component.id, component.label]))\n  const placed = spec.components.map((component) => {\n    // `layout.cellW` sets the PITCH and the plate's own width. Reading the\n    // module default here instead spaced the plates further apart at the width\n    // they already had, which is a grid with gaps rather than wider boxes.\n    const labelWidth = component.size?.[0] ?? component.width ?? layout.cellW\n    const lines = wrapText(component.label, TYPE.label, labelWidth - PLATE.padX * 2, 2)\n    const height = plateHeight(\n      lines.length,\n      Boolean(component.sublabel),\n      Boolean(component.type || component.tag),\n      component.size?.[1] ?? component.height ?? 0,\n    )\n\n    const [row, col] = nextCell(component)\n    const x = component.pos ? component.pos[0] : originX + col * (layout.cellW + layout.gapX)\n    const y = component.pos ? component.pos[1] : originY + row * (layout.cellH + layout.gapY)\n\n    const box: Box = { x, y, w: labelWidth, h: height }\n    boxes.set(component.id, box)\n    cells.set(`${round(x)}:${round(y)}`, [...(cells.get(`${round(x)}:${round(y)}`) ?? []), component.id])\n    return { component, box }\n  })\n\n  // Nothing else notices: two plates at one coordinate draw one on top of the\n  // other, and both are still in the summary — so the mistake exists in the\n  // picture and nowhere the author is looking. `warnCollision` is dev-only.\n  for (const ids of cells.values()) {\n    if (ids.length > 1) warnCollision('ArchitectureFigure', ids)\n  }\n\n  const boundaries = (spec.boundaries ?? []).map((boundary) => {\n    const inside = boundary.wraps.filter((id) => boxes.has(id))\n    const wrapped = inside.map((id) => boxes.get(id)).filter((box): box is Box => Boolean(box))\n    const extent = union(wrapped)\n    return { boundary, inside, box: extent ? inflate(extent, boundary.pad ?? 28) : null }\n  })\n\n  // A waypoint is only meaningful when both ends were placed absolutely — see\n  // `Wire.keepWaypoints`. In this diagram type that is common, which is why an\n  // archify architecture specification's hand-tuned routes survive the move.\n  const absolute = new Set(\n    spec.components.filter((component) => component.pos).map((component) => component.id),\n  )\n  const connections = liveEdges('ArchitectureFigure', spec.connections, (id) => boxes.has(id))\n  const wires = wiresFor(connections, boxes, (connection) => ({\n    keepWaypoints: absolute.has(connection.from) && absolute.has(connection.to),\n  }))\n  const { paths, labels } = renderWires(wires, uid)\n\n  const drawn = [...boxes.values(), ...boundaries.map((entry) => entry.box).filter((box): box is Box => Boolean(box))]\n  const extent = inflate(union(drawn) ?? { x: 0, y: 0, w: 400, h: 200 }, 22)\n\n  const active = activeIds && activeIds.length > 0 ? new Set(activeIds) : null\n\n  const artwork = (\n    <>\n      {boundaries.map(({ boundary, box }, index) =>\n        box ? (\n          <BandFrame\n            key={`${boundary.label}-${index}`}\n            box={box}\n            label={boundary.label}\n            dashed={boundary.kind === 'security-group'}\n          />\n        ) : null,\n      )}\n      {paths}\n      {placed.map(({ component, box }) => (\n        <NodePlate\n          key={component.id}\n          nodeId={component.id}\n          box={box}\n          label={component.label}\n          sublabel={component.sublabel}\n          tag={component.tag}\n          kind={component.type}\n          active={active?.has(component.id)}\n          dimmed={active ? !active.has(component.id) : false}\n          onSelect={onSelectNode ? () => onSelectNode(component.id) : undefined}\n        />\n      ))}\n      {labels}\n    </>\n  )\n\n  const used = [...new Set(spec.components.map((component) => component.type))]\n\n  return {\n    extent,\n    artwork,\n    nodes: spec.components.map((component) => ({\n      id: component.id,\n      label: component.label,\n      sublabel: component.sublabel,\n      kind: component.type,\n    })),\n    edges: connections.map((connection) => ({\n      from: connection.from,\n      to: connection.to,\n      label: connection.label,\n    })),\n    // A boundary is a statement — this runs there, that may reach it — drawn as\n    // a frame inside artwork a screen reader is told to skip. It groups nothing\n    // in the list, because two boundaries can hold the same component and a\n    // node published twice is a node the keyboard reaches twice.\n    notes: boundaries.map(({ boundary, inside }) => {\n      const kind = boundary.kind === 'region' ? 'Region' : 'Security group'\n      const members = inside.map((id) => named.get(id) ?? id)\n      return members.length > 0\n        ? `${kind} ${boundary.label} encloses ${members.join(', ')}.`\n        : `${kind} ${boundary.label} encloses nothing this figure draws.`\n    }),\n    legend: kindLegend(\n      resolveLegend(used, spec.meta.legend?.mode, KINDS, spec.meta.legend?.entries),\n      spec.meta.legend?.entries,\n    ),\n  }\n}\n\nexport default ArchitectureFigure\n"],"mappings":"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","names":["extent"]}

package/dist/diagrams/DataflowFigure/DataflowFigure.js

@@ -1,6 +1,7 @@
 "use client";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useId, useMemo } from "react";
+import { liveEdges, useSpecIdentity, warnStageOutOfRange } from "../lib/dev.js";
 import { DiagramFrame } from "../lib/frame.js";
 import { inflate, round, TYPE, union, wrapText } from "../lib/geometry.js";
 import { kindLegend, resolveLegend } from "../lib/legend.js";
@@ -26,6 +27,7 @@ function DataflowFigure({
   onSelectNode
 }) {
   const uid = useId().replace(/:/g, "");
+  useSpecIdentity(spec, "DataflowFigure");
   const model = useMemo(
     () => buildModel(spec, uid, activeIds, onSelectNode),
     [spec, uid, activeIds, onSelectNode]
@@ -51,13 +53,17 @@ function buildModel(spec, uid, activeIds, onSelectNode) {
     const w = node.width ?? GRID.colW;
     const lines = wrapText(node.label, TYPE.label, w - PLATE.padX * 2, 2);
     const h = plateHeight(lines.length, Boolean(node.sublabel), true, node.height ?? 0);
+    if (node.stage < 0 || node.stage >= spec.stages.length) {
+      warnStageOutOfRange("DataflowFigure", node.id, node.stage, spec.stages.length);
+    }
     const x = GRID.originX + node.stage * (GRID.colW + GRID.gapX);
     const y = GRID.originY + node.row * (GRID.rowH + GRID.nodeH) + (node.yOffset ?? 0);
     const box = { x, y, w, h };
     boxes.set(node.id, box);
     return { node, box };
   });
-  const wires = wiresFor(spec.flows, boxes);
+  const flows = liveEdges("DataflowFigure", spec.flows, (id) => boxes.has(id));
+  const wires = wiresFor(flows, boxes);
   const { paths, labels } = renderWires(wires, uid);
   const extent = inflate(union([...boxes.values()]) ?? { x: 0, y: 0, w: 500, h: 240 }, 30);
   const headerY = Math.min(GRID.originY - 30, extent.y + 28);
@@ -101,6 +107,18 @@ function buildModel(spec, uid, activeIds, onSelectNode) {
     labels
   ] });
   const used = [...new Set(spec.nodes.map((node) => node.type))];
+  const inStage = (index) => spec.nodes.filter((node) => node.stage === index).sort((a, b) => a.row - b.row).map((node) => node.id);
+  const stray = spec.nodes.filter((node) => node.stage < 0 || node.stage >= spec.stages.length).map((node) => node.id);
+  const bands = [
+    ...spec.stages.map((stage, index) => ({
+      kind: "Stage",
+      label: stage.label,
+      ids: inStage(index)
+    })),
+    // Drawn past the last heading, so said that way rather than folded in
+    // beside nodes the axis does label.
+    ...stray.length > 0 ? [{ kind: "Stage", label: "outside the declared stages", ids: stray }] : []
+  ];
   return {
     extent: { ...extent, y: headerY - 22, h: extent.h + (extent.y - (headerY - 22)) },
     artwork,
@@ -110,11 +128,12 @@ function buildModel(spec, uid, activeIds, onSelectNode) {
       sublabel: node.sublabel,
       kind: node.type
     })),
-    edges: (spec.flows ?? []).map((flow) => ({
+    edges: flows.map((flow) => ({
       from: flow.from,
       to: flow.to,
       label: [flow.label, flow.classification].filter(Boolean).join(" \u2014 ") || void 0
     })),
+    bands,
     legend: kindLegend(
       resolveLegend(used, spec.meta.legend?.mode, KINDS, spec.meta.legend?.entries),
       spec.meta.legend?.entries

package/dist/diagrams/DataflowFigure/DataflowFigure.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/diagrams/DataflowFigure/DataflowFigure.tsx"],"sourcesContent":["'use client'\n\nimport { useId, useMemo } from 'react'\nimport { DiagramFrame, type FigureChrome, type FigureModel } from '../lib/frame'\nimport { inflate, round, TYPE, union, wrapText, type Box } from '../lib/geometry'\nimport { kindLegend, resolveLegend } from '../lib/legend'\nimport { NodePlate, PLATE, plateHeight } from '../lib/marks'\nimport { renderWires, wiresFor } from '../lib/wires'\nimport type { DataflowSpec, NodeKind } from '../spec'\n\nconst KINDS: NodeKind[] = [\n  'frontend',\n  'backend',\n  'database',\n  'cloud',\n  'security',\n  'messagebus',\n  'external',\n]\n\nconst GRID = { originX: 40, originY: 92, colW: 184, gapX: 78, rowH: 52, nodeH: 74 }\n\nexport interface DataflowFigureProps extends FigureChrome {\n  spec: DataflowSpec\n}\n\n/**\n * A pipeline: where data comes from, what happens to it, and who ends up with\n * it.\n *\n * Structurally close to an architecture map and read for a completely different\n * question, which is why it is a separate renderer rather than a preset. An\n * architecture diagram is read for \"what talks to what\". A data-flow diagram is\n * read for \"what is IN this arrow\" — and that question is why `classification`\n * gets its own mono chip under the label rather than being folded into the\n * wording. `clickstream / PII touch` and `clickstream` are two different facts,\n * and a governance reviewer is looking for the second one.\n *\n * Stages are printed as column headings on a rule across the top. They are the\n * axis of the figure: a node's `stage` is its position along the pipeline, and\n * a reader should be able to answer \"how far has this got\" by looking up rather\n * than by tracing arrows.\n */\nexport function DataflowFigure({\n  spec,\n  className,\n  legend = 'auto',\n  cards = true,\n  heading = true,\n  activeIds,\n  onSelectNode,\n}: DataflowFigureProps) {\n  const uid = useId().replace(/:/g, '')\n  const model = useMemo(\n    () => buildModel(spec, uid, activeIds, onSelectNode),\n    [spec, uid, activeIds, onSelectNode],\n  )\n\n  return (\n    <DiagramFrame\n      meta={spec.meta}\n      model={model}\n      cards={spec.cards}\n      showCards={cards}\n      heading={heading}\n      legend={legend}\n      className={className}\n      activeIds={activeIds}\n      onSelectNode={onSelectNode}\n    />\n  )\n}\n\nfunction buildModel(\n  spec: DataflowSpec,\n  uid: string,\n  activeIds: string[] | undefined,\n  onSelectNode: ((id: string) => void) | undefined,\n): FigureModel {\n  const boxes = new Map<string, Box>()\n  const placed = spec.nodes.map((node) => {\n    const w = node.width ?? GRID.colW\n    const lines = wrapText(node.label, TYPE.label, w - PLATE.padX * 2, 2)\n    const h = plateHeight(lines.length, Boolean(node.sublabel), true, node.height ?? 0)\n\n    const x = GRID.originX + node.stage * (GRID.colW + GRID.gapX)\n    const y = GRID.originY + node.row * (GRID.rowH + GRID.nodeH) + (node.yOffset ?? 0)\n\n    const box: Box = { x, y, w, h }\n    boxes.set(node.id, box)\n    return { node, box }\n  })\n\n  // Waypoints refer to the author's own grid, not this one — see\n  // `Wire.keepWaypoints`. A data-flow specification always places by stage and\n  // row, so there is never a case where honouring them would be correct.\n  const wires = wiresFor(spec.flows, boxes)\n  const { paths, labels } = renderWires(wires, uid)\n\n  const extent = inflate(union([...boxes.values()]) ?? { x: 0, y: 0, w: 500, h: 240 }, 30)\n  const headerY = Math.min(GRID.originY - 30, extent.y + 28)\n  const active = activeIds && activeIds.length > 0 ? new Set(activeIds) : null\n\n  const artwork = (\n    <>\n      {/* Stage headings, on one rule across the whole figure. */}\n      <path\n        d={`M ${round(extent.x + 14)} ${round(headerY + 8)} H ${round(extent.x + extent.w - 14)}`}\n        className=\"stroke-(--diagram-rule) [stroke-width:1]\"\n        aria-hidden=\"true\"\n      />\n      {spec.stages.map((stage, index) => (\n        <text\n          key={`${stage.label}-${index}`}\n          x={round(GRID.originX + index * (GRID.colW + GRID.gapX))}\n          y={round(headerY)}\n          className=\"fill-(--diagram-ink-3) font-mono [font-size:10.5px] [letter-spacing:0.08em] uppercase\"\n          aria-hidden=\"true\"\n        >\n          {stage.label}\n        </text>\n      ))}\n\n      {paths}\n\n      {placed.map(({ node, box }) => (\n        <NodePlate\n          key={node.id}\n          nodeId={node.id}\n          box={box}\n          label={node.label}\n          sublabel={node.sublabel}\n          tag={node.tag}\n          kind={node.type}\n          active={active?.has(node.id)}\n          dimmed={active ? !active.has(node.id) : false}\n          onSelect={onSelectNode ? () => onSelectNode(node.id) : undefined}\n        />\n      ))}\n\n      {labels}\n    </>\n  )\n\n  const used = [...new Set(spec.nodes.map((node) => node.type))]\n\n  return {\n    extent: { ...extent, y: headerY - 22, h: extent.h + (extent.y - (headerY - 22)) },\n    artwork,\n    nodes: spec.nodes.map((node) => ({\n      id: node.id,\n      label: node.label,\n      sublabel: node.sublabel,\n      kind: node.type,\n    })),\n    edges: (spec.flows ?? []).map((flow) => ({\n      from: flow.from,\n      to: flow.to,\n      label: [flow.label, flow.classification].filter(Boolean).join(' — ') || undefined,\n    })),\n    legend: kindLegend(\n      resolveLegend(used, spec.meta.legend?.mode, KINDS, spec.meta.legend?.entries),\n      spec.meta.legend?.entries,\n    ),\n  }\n}\n\nexport default DataflowFigure\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../../src/diagrams/DataflowFigure/DataflowFigure.tsx"],"sourcesContent":["'use client'\n\nimport { useId, useMemo } from 'react'\nimport { liveEdges, useSpecIdentity, warnStageOutOfRange } from '../lib/dev'\nimport { DiagramFrame, type FigureBand, type FigureChrome, type FigureModel } from '../lib/frame'\nimport { inflate, round, TYPE, union, wrapText, type Box } from '../lib/geometry'\nimport { kindLegend, resolveLegend } from '../lib/legend'\nimport { NodePlate, PLATE, plateHeight } from '../lib/marks'\nimport { renderWires, wiresFor } from '../lib/wires'\nimport type { DataflowSpec, NodeKind } from '../spec'\n\nconst KINDS: NodeKind[] = [\n  'frontend',\n  'backend',\n  'database',\n  'cloud',\n  'security',\n  'messagebus',\n  'external',\n]\n\nconst GRID = { originX: 40, originY: 92, colW: 184, gapX: 78, rowH: 52, nodeH: 74 }\n\nexport interface DataflowFigureProps extends FigureChrome {\n  spec: DataflowSpec\n}\n\n/**\n * A pipeline: where data comes from, what happens to it, and who ends up with\n * it.\n *\n * Structurally close to an architecture map and read for a completely different\n * question, which is why it is a separate renderer rather than a preset. An\n * architecture diagram is read for \"what talks to what\". A data-flow diagram is\n * read for \"what is IN this arrow\" — and that question is why `classification`\n * gets its own mono chip under the label rather than being folded into the\n * wording. `clickstream / PII touch` and `clickstream` are two different facts,\n * and a governance reviewer is looking for the second one.\n *\n * Stages are printed as column headings on a rule across the top. They are the\n * axis of the figure: a node's `stage` is its position along the pipeline, and\n * a reader should be able to answer \"how far has this got\" by looking up rather\n * than by tracing arrows.\n */\nexport function DataflowFigure({\n  spec,\n  className,\n  legend = 'auto',\n  cards = true,\n  heading = true,\n  activeIds,\n  onSelectNode,\n}: DataflowFigureProps) {\n  const uid = useId().replace(/:/g, '')\n  useSpecIdentity(spec, 'DataflowFigure')\n  const model = useMemo(\n    () => buildModel(spec, uid, activeIds, onSelectNode),\n    [spec, uid, activeIds, onSelectNode],\n  )\n\n  return (\n    <DiagramFrame\n      meta={spec.meta}\n      model={model}\n      cards={spec.cards}\n      showCards={cards}\n      heading={heading}\n      legend={legend}\n      className={className}\n      activeIds={activeIds}\n      onSelectNode={onSelectNode}\n    />\n  )\n}\n\nfunction buildModel(\n  spec: DataflowSpec,\n  uid: string,\n  activeIds: string[] | undefined,\n  onSelectNode: ((id: string) => void) | undefined,\n): FigureModel {\n  const boxes = new Map<string, Box>()\n  const placed = spec.nodes.map((node) => {\n    const w = node.width ?? GRID.colW\n    const lines = wrapText(node.label, TYPE.label, w - PLATE.padX * 2, 2)\n    const h = plateHeight(lines.length, Boolean(node.sublabel), true, node.height ?? 0)\n\n    // The stage is an INDEX into the headings, and the x is arithmetic on it\n    // rather than a lookup — so a stage nothing declares is drawn a full column\n    // past the last heading, under no heading at all.\n    if (node.stage < 0 || node.stage >= spec.stages.length) {\n      warnStageOutOfRange('DataflowFigure', node.id, node.stage, spec.stages.length)\n    }\n\n    const x = GRID.originX + node.stage * (GRID.colW + GRID.gapX)\n    const y = GRID.originY + node.row * (GRID.rowH + GRID.nodeH) + (node.yOffset ?? 0)\n\n    const box: Box = { x, y, w, h }\n    boxes.set(node.id, box)\n    return { node, box }\n  })\n\n  // Waypoints refer to the author's own grid, not this one — see\n  // `Wire.keepWaypoints`. A data-flow specification always places by stage and\n  // row, so there is never a case where honouring them would be correct.\n  const flows = liveEdges('DataflowFigure', spec.flows, (id) => boxes.has(id))\n  const wires = wiresFor(flows, boxes)\n  const { paths, labels } = renderWires(wires, uid)\n\n  const extent = inflate(union([...boxes.values()]) ?? { x: 0, y: 0, w: 500, h: 240 }, 30)\n  const headerY = Math.min(GRID.originY - 30, extent.y + 28)\n  const active = activeIds && activeIds.length > 0 ? new Set(activeIds) : null\n\n  const artwork = (\n    <>\n      {/* Stage headings, on one rule across the whole figure. */}\n      <path\n        d={`M ${round(extent.x + 14)} ${round(headerY + 8)} H ${round(extent.x + extent.w - 14)}`}\n        className=\"stroke-(--diagram-rule) [stroke-width:1]\"\n        aria-hidden=\"true\"\n      />\n      {spec.stages.map((stage, index) => (\n        <text\n          key={`${stage.label}-${index}`}\n          x={round(GRID.originX + index * (GRID.colW + GRID.gapX))}\n          y={round(headerY)}\n          className=\"fill-(--diagram-ink-3) font-mono [font-size:10.5px] [letter-spacing:0.08em] uppercase\"\n          aria-hidden=\"true\"\n        >\n          {stage.label}\n        </text>\n      ))}\n\n      {paths}\n\n      {placed.map(({ node, box }) => (\n        <NodePlate\n          key={node.id}\n          nodeId={node.id}\n          box={box}\n          label={node.label}\n          sublabel={node.sublabel}\n          tag={node.tag}\n          kind={node.type}\n          active={active?.has(node.id)}\n          dimmed={active ? !active.has(node.id) : false}\n          onSelect={onSelectNode ? () => onSelectNode(node.id) : undefined}\n        />\n      ))}\n\n      {labels}\n    </>\n  )\n\n  const used = [...new Set(spec.nodes.map((node) => node.type))]\n\n  // The stages ARE the list's structure. \"How far has this got\" is the question\n  // the axis exists to answer, and it was printed only as headings inside\n  // artwork a screen reader is told to skip.\n  const inStage = (index: number) =>\n    spec.nodes\n      .filter((node) => node.stage === index)\n      .sort((a, b) => a.row - b.row)\n      .map((node) => node.id)\n\n  const stray = spec.nodes\n    .filter((node) => node.stage < 0 || node.stage >= spec.stages.length)\n    .map((node) => node.id)\n\n  const bands: FigureBand[] = [\n    ...spec.stages.map((stage, index) => ({\n      kind: 'Stage',\n      label: stage.label,\n      ids: inStage(index),\n    })),\n    // Drawn past the last heading, so said that way rather than folded in\n    // beside nodes the axis does label.\n    ...(stray.length > 0\n      ? [{ kind: 'Stage', label: 'outside the declared stages', ids: stray }]\n      : []),\n  ]\n\n  return {\n    extent: { ...extent, y: headerY - 22, h: extent.h + (extent.y - (headerY - 22)) },\n    artwork,\n    nodes: spec.nodes.map((node) => ({\n      id: node.id,\n      label: node.label,\n      sublabel: node.sublabel,\n      kind: node.type,\n    })),\n    edges: flows.map((flow) => ({\n      from: flow.from,\n      to: flow.to,\n      label: [flow.label, flow.classification].filter(Boolean).join(' — ') || undefined,\n    })),\n    bands,\n    legend: kindLegend(\n      resolveLegend(used, spec.meta.legend?.mode, KINDS, spec.meta.legend?.entries),\n      spec.meta.legend?.entries,\n    ),\n  }\n}\n\nexport default DataflowFigure\n"],"mappings":"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","names":[]}

package/dist/diagrams/DiagramCanvas/DiagramCanvas.d.ts

@@ -5,6 +5,20 @@ interface CanvasView {
     scale: number;
     x: number;
     y: number;
+    /**
+     * How big the frame was, in CSS pixels, when this view was reported.
+     *
+     * Carried on the view because everything that consumes a view needs it and
+     * nothing outside this component can measure it: a `DiagramMinimap`'s
+     * viewport rectangle is the frame's size over the zoom, and a caller who had
+     * to hand-declare that number was hand-declaring the one number that makes
+     * the map lie. Absent until the frame has been measured — the first render
+     * has no box yet — which is exactly when a map should draw nothing.
+     */
+    frame?: {
+        width: number;
+        height: number;
+    };
 }
 /** What a caller can do to the canvas from outside it. */
 interface DiagramCanvasHandle {

package/dist/diagrams/DiagramCanvas/DiagramCanvas.js

@@ -25,12 +25,17 @@ function DiagramCanvas({
   const frame = useRef(null);
   const [view, setView] = useState({ scale: 1, x: 0, y: 0 });
   const drag = useRef(null);
+  const measure = useCallback(() => {
+    const box = frame.current?.getBoundingClientRect();
+    return box && box.width > 0 ? { width: box.width, height: box.height } : void 0;
+  }, []);
   const apply = useCallback(
     (next) => {
-      setView(next);
-      onViewChange?.(next);
+      const measured = { ...next, frame: measure() };
+      setView(measured);
+      onViewChange?.(measured);
     },
-    [onViewChange]
+    [measure, onViewChange]
   );
   const zoomAbout = useCallback(
     (factor, originX, originY) => {
@@ -43,13 +48,14 @@ function DiagramCanvas({
         const next = {
           scale,
           x: cx - (cx - current.x) * ratio,
-          y: cy - (cy - current.y) * ratio
+          y: cy - (cy - current.y) * ratio,
+          frame: measure()
         };
         onViewChange?.(next);
         return next;
       });
     },
-    [onViewChange]
+    [measure, onViewChange]
   );
   useImperativeHandle(
     ref,
@@ -64,7 +70,8 @@ function DiagramCanvas({
           const next = {
             ...current,
             x: box.width / 2 - x * current.scale,
-            y: box.height / 2 - y * current.scale
+            y: box.height / 2 - y * current.scale,
+            frame: measure()
           };
           onViewChange?.(next);
           return next;
@@ -72,7 +79,7 @@ function DiagramCanvas({
       },
       view
     }),
-    [apply, onViewChange, view, zoomAbout]
+    [apply, measure, onViewChange, view, zoomAbout]
   );
   useEffect(() => {
     const node = frame.current;

package/dist/diagrams/DiagramCanvas/DiagramCanvas.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/diagrams/DiagramCanvas/DiagramCanvas.tsx"],"sourcesContent":["'use client'\n\nimport {\n  useCallback,\n  useEffect,\n  useId,\n  useImperativeHandle,\n  useRef,\n  useState,\n  type PointerEvent as ReactPointerEvent,\n  type ReactNode,\n  type Ref,\n} from 'react'\nimport { cn } from '../../lib/cn'\n\nconst MIN_SCALE = 0.35\nconst MAX_SCALE = 4\nconst STEP = 1.25\n\nexport interface CanvasView {\n  scale: number\n  x: number\n  y: number\n}\n\n/** What a caller can do to the canvas from outside it. */\nexport interface DiagramCanvasHandle {\n  zoomIn: () => void\n  zoomOut: () => void\n  reset: () => void\n  /** Pans so a point in CONTENT coordinates sits in the middle of the frame. */\n  centerOn: (x: number, y: number) => void\n  view: CanvasView\n}\n\nexport interface DiagramCanvasProps {\n  children: ReactNode\n  className?: string\n  /** How tall the frame is. Anything CSS accepts. */\n  height?: string\n  /** Told about every view change, for a minimap or a percentage readout. */\n  onViewChange?: (view: CanvasView) => void\n  /** Hides the built-in zoom controls, for a caller supplying its own. */\n  controls?: boolean\n  /** Names the region for assistive tech. */\n  label?: string\n  ref?: Ref<DiagramCanvasHandle>\n}\n\n/**\n * A frame that a picture larger than it can be moved around inside.\n *\n * Pan with a drag, zoom with the controls or with ⌘/Ctrl and the wheel, and\n * reset with a key. That is the whole of it — this is deliberately a VIEWPORT\n * and not a diagram editor: nothing here knows what a node is, so it works for\n * any oversized figure, an SVG, an image, a table that will not fold.\n *\n * Three decisions here are not obvious.\n *\n * **A plain wheel scrolls the page, not the diagram.** A canvas that swallows\n * the wheel is a scroll trap: a reader flicking down an article hits the figure\n * and the page stops moving for no reason they can see. Zooming needs the\n * modifier — which is also the platform gesture for zoom everywhere else, and\n * is what a trackpad pinch already sends.\n *\n * **The transform is on a wrapper, not on the content.** The child keeps its\n * own coordinate space, so a figure inside can still be measured, exported and\n * read by anything that walks it. Scaling the child directly would make every\n * `getBoundingClientRect` inside it a lie.\n *\n * **Keyboard first, and the frame is a real tab stop.** `+` / `-` / `0` and the\n * arrow keys move the view; the frame takes focus so they can be pressed at\n * all. A canvas that only answers a drag is a canvas half the readers cannot\n * operate.\n *\n * @example\n * <DiagramCanvas height=\"26rem\" label=\"Request path\">\n *   <ArchitectureFigure spec={spec} heading={false} legend=\"hidden\" cards={false} />\n * </DiagramCanvas>\n */\nexport function DiagramCanvas({\n  children,\n  className,\n  height = '24rem',\n  onViewChange,\n  controls = true,\n  label = 'Diagram canvas',\n  ref,\n}: DiagramCanvasProps) {\n  const uid = useId().replace(/:/g, '')\n  const frame = useRef<HTMLDivElement>(null)\n  const [view, setView] = useState<CanvasView>({ scale: 1, x: 0, y: 0 })\n  const drag = useRef<{ pointer: number; x: number; y: number } | null>(null)\n\n  const apply = useCallback(\n    (next: CanvasView) => {\n      setView(next)\n      onViewChange?.(next)\n    },\n    [onViewChange],\n  )\n\n  /**\n   * Zooms about a fixed point in FRAME coordinates.\n   *\n   * The arithmetic is what makes the pointer stay on the thing it is over:\n   * the content point under the cursor must land back under the cursor, so the\n   * offset moves by the difference the scale change opened up. Without it, a\n   * zoom drifts toward the origin and a reader chases the node they were\n   * looking at.\n   */\n  const zoomAbout = useCallback(\n    (factor: number, originX?: number, originY?: number) => {\n      const box = frame.current?.getBoundingClientRect()\n      const cx = originX ?? (box ? box.width / 2 : 0)\n      const cy = originY ?? (box ? box.height / 2 : 0)\n\n      setView((current) => {\n        const scale = Math.min(MAX_SCALE, Math.max(MIN_SCALE, current.scale * factor))\n        const ratio = scale / current.scale\n        const next = {\n          scale,\n          x: cx - (cx - current.x) * ratio,\n          y: cy - (cy - current.y) * ratio,\n        }\n        onViewChange?.(next)\n        return next\n      })\n    },\n    [onViewChange],\n  )\n\n  useImperativeHandle(\n    ref,\n    () => ({\n      zoomIn: () => zoomAbout(STEP),\n      zoomOut: () => zoomAbout(1 / STEP),\n      reset: () => apply({ scale: 1, x: 0, y: 0 }),\n      centerOn: (x: number, y: number) => {\n        const box = frame.current?.getBoundingClientRect()\n        if (!box) return\n        setView((current) => {\n          const next = {\n            ...current,\n            x: box.width / 2 - x * current.scale,\n            y: box.height / 2 - y * current.scale,\n          }\n          onViewChange?.(next)\n          return next\n        })\n      },\n      view,\n    }),\n    [apply, onViewChange, view, zoomAbout],\n  )\n\n  // Registered imperatively because React marks `wheel` passive, and a passive\n  // listener cannot call preventDefault — so the modifier-wheel zoom would also\n  // scroll the page underneath it.\n  useEffect(() => {\n    const node = frame.current\n    if (!node) return\n\n    const onWheel = (event: WheelEvent) => {\n      if (!event.ctrlKey && !event.metaKey) return\n      event.preventDefault()\n      const box = node.getBoundingClientRect()\n      zoomAbout(\n        event.deltaY < 0 ? STEP : 1 / STEP,\n        event.clientX - box.left,\n        event.clientY - box.top,\n      )\n    }\n\n    node.addEventListener('wheel', onWheel, { passive: false })\n    return () => node.removeEventListener('wheel', onWheel)\n  }, [zoomAbout])\n\n  const onPointerDown = (event: ReactPointerEvent<HTMLDivElement>) => {\n    if (event.button !== 0) return\n    drag.current = { pointer: event.pointerId, x: event.clientX - view.x, y: event.clientY - view.y }\n    event.currentTarget.setPointerCapture(event.pointerId)\n  }\n\n  const onPointerMove = (event: ReactPointerEvent<HTMLDivElement>) => {\n    const state = drag.current\n    if (!state || state.pointer !== event.pointerId) return\n    apply({ ...view, x: event.clientX - state.x, y: event.clientY - state.y })\n  }\n\n  const endDrag = (event: ReactPointerEvent<HTMLDivElement>) => {\n    if (drag.current?.pointer !== event.pointerId) return\n    drag.current = null\n    if (event.currentTarget.hasPointerCapture(event.pointerId)) {\n      event.currentTarget.releasePointerCapture(event.pointerId)\n    }\n  }\n\n  return (\n    <div\n      className={cn(\n        'relative overflow-hidden rounded-(--radius-lg) border border-(--rule) bg-(--diagram-surface)',\n        className,\n      )}\n      style={{ height }}\n    >\n      <div\n        ref={frame}\n        role=\"group\"\n        aria-label={label}\n        aria-describedby={`${uid}-hint`}\n        tabIndex={0}\n        className=\"size-full cursor-grab touch-none select-none outline-none focus-visible:ring-2 focus-visible:ring-(--ring) focus-visible:ring-inset active:cursor-grabbing\"\n        onPointerDown={onPointerDown}\n        onPointerMove={onPointerMove}\n        onPointerUp={endDrag}\n        onPointerCancel={endDrag}\n        onKeyDown={(event) => {\n          const nudge = event.shiftKey ? 80 : 24\n          switch (event.key) {\n            case '+':\n            case '=':\n              event.preventDefault()\n              zoomAbout(STEP)\n              break\n            case '-':\n              event.preventDefault()\n              zoomAbout(1 / STEP)\n              break\n            case '0':\n              event.preventDefault()\n              apply({ scale: 1, x: 0, y: 0 })\n              break\n            case 'ArrowLeft':\n              event.preventDefault()\n              apply({ ...view, x: view.x + nudge })\n              break\n            case 'ArrowRight':\n              event.preventDefault()\n              apply({ ...view, x: view.x - nudge })\n              break\n            case 'ArrowUp':\n              event.preventDefault()\n              apply({ ...view, y: view.y + nudge })\n              break\n            case 'ArrowDown':\n              event.preventDefault()\n              apply({ ...view, y: view.y - nudge })\n              break\n            default:\n              break\n          }\n        }}\n      >\n        <div\n          className=\"origin-top-left will-change-transform\"\n          style={{ transform: `translate(${view.x}px, ${view.y}px) scale(${view.scale})` }}\n          data-diagram-stage=\"\"\n        >\n          {children}\n        </div>\n      </div>\n\n      <p id={`${uid}-hint`} className=\"sr-only\">\n        Drag to pan. Plus and minus zoom, zero resets, the arrow keys pan.\n      </p>\n\n      {controls && (\n        <div className=\"absolute bottom-3 end-3 flex items-center gap-px rounded-(--radius) border border-(--rule-2) bg-(--panel-bg) p-0.5\">\n          <CanvasButton label=\"Zoom out\" onClick={() => zoomAbout(1 / STEP)}>\n            <span aria-hidden>−</span>\n          </CanvasButton>\n          <button\n            type=\"button\"\n            onClick={() => apply({ scale: 1, x: 0, y: 0 })}\n            aria-label=\"Reset the view\"\n            className=\"min-w-12 rounded-(--radius-xs) px-1.5 py-1 mono-meta text-(--ink-2) 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            {Math.round(view.scale * 100)}%\n          </button>\n          <CanvasButton label=\"Zoom in\" onClick={() => zoomAbout(STEP)}>\n            <span aria-hidden>+</span>\n          </CanvasButton>\n        </div>\n      )}\n    </div>\n  )\n}\n\nfunction CanvasButton({\n  label,\n  onClick,\n  children,\n}: {\n  label: string\n  onClick: () => void\n  children: ReactNode\n}) {\n  return (\n    <button\n      type=\"button\"\n      onClick={onClick}\n      aria-label={label}\n      className=\"flex size-7 items-center justify-center rounded-(--radius-xs) font-mono text-[13px] leading-none text-(--ink-2) 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      {children}\n    </button>\n  )\n}\n\nexport default DiagramCanvas\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../../src/diagrams/DiagramCanvas/DiagramCanvas.tsx"],"sourcesContent":["'use client'\n\nimport {\n  useCallback,\n  useEffect,\n  useId,\n  useImperativeHandle,\n  useRef,\n  useState,\n  type PointerEvent as ReactPointerEvent,\n  type ReactNode,\n  type Ref,\n} from 'react'\nimport { cn } from '../../lib/cn'\n\nconst MIN_SCALE = 0.35\nconst MAX_SCALE = 4\nconst STEP = 1.25\n\nexport interface CanvasView {\n  scale: number\n  x: number\n  y: number\n  /**\n   * How big the frame was, in CSS pixels, when this view was reported.\n   *\n   * Carried on the view because everything that consumes a view needs it and\n   * nothing outside this component can measure it: a `DiagramMinimap`'s\n   * viewport rectangle is the frame's size over the zoom, and a caller who had\n   * to hand-declare that number was hand-declaring the one number that makes\n   * the map lie. Absent until the frame has been measured — the first render\n   * has no box yet — which is exactly when a map should draw nothing.\n   */\n  frame?: { width: number; height: number }\n}\n\n/** What a caller can do to the canvas from outside it. */\nexport interface DiagramCanvasHandle {\n  zoomIn: () => void\n  zoomOut: () => void\n  reset: () => void\n  /** Pans so a point in CONTENT coordinates sits in the middle of the frame. */\n  centerOn: (x: number, y: number) => void\n  view: CanvasView\n}\n\nexport interface DiagramCanvasProps {\n  children: ReactNode\n  className?: string\n  /** How tall the frame is. Anything CSS accepts. */\n  height?: string\n  /** Told about every view change, for a minimap or a percentage readout. */\n  onViewChange?: (view: CanvasView) => void\n  /** Hides the built-in zoom controls, for a caller supplying its own. */\n  controls?: boolean\n  /** Names the region for assistive tech. */\n  label?: string\n  ref?: Ref<DiagramCanvasHandle>\n}\n\n/**\n * A frame that a picture larger than it can be moved around inside.\n *\n * Pan with a drag, zoom with the controls or with ⌘/Ctrl and the wheel, and\n * reset with a key. That is the whole of it — this is deliberately a VIEWPORT\n * and not a diagram editor: nothing here knows what a node is, so it works for\n * any oversized figure, an SVG, an image, a table that will not fold.\n *\n * Three decisions here are not obvious.\n *\n * **A plain wheel scrolls the page, not the diagram.** A canvas that swallows\n * the wheel is a scroll trap: a reader flicking down an article hits the figure\n * and the page stops moving for no reason they can see. Zooming needs the\n * modifier — which is also the platform gesture for zoom everywhere else, and\n * is what a trackpad pinch already sends.\n *\n * **The transform is on a wrapper, not on the content.** The child keeps its\n * own coordinate space, so a figure inside can still be measured, exported and\n * read by anything that walks it. Scaling the child directly would make every\n * `getBoundingClientRect` inside it a lie.\n *\n * **Keyboard first, and the frame is a real tab stop.** `+` / `-` / `0` and the\n * arrow keys move the view; the frame takes focus so they can be pressed at\n * all. A canvas that only answers a drag is a canvas half the readers cannot\n * operate.\n *\n * @example\n * <DiagramCanvas height=\"26rem\" label=\"Request path\">\n *   <ArchitectureFigure spec={spec} heading={false} legend=\"hidden\" cards={false} />\n * </DiagramCanvas>\n */\nexport function DiagramCanvas({\n  children,\n  className,\n  height = '24rem',\n  onViewChange,\n  controls = true,\n  label = 'Diagram canvas',\n  ref,\n}: DiagramCanvasProps) {\n  const uid = useId().replace(/:/g, '')\n  const frame = useRef<HTMLDivElement>(null)\n  const [view, setView] = useState<CanvasView>({ scale: 1, x: 0, y: 0 })\n  const drag = useRef<{ pointer: number; x: number; y: number } | null>(null)\n\n  /** The frame's own size, or nothing when it has not been laid out yet. */\n  const measure = useCallback(() => {\n    const box = frame.current?.getBoundingClientRect()\n    return box && box.width > 0 ? { width: box.width, height: box.height } : undefined\n  }, [])\n\n  const apply = useCallback(\n    (next: CanvasView) => {\n      const measured = { ...next, frame: measure() }\n      setView(measured)\n      onViewChange?.(measured)\n    },\n    [measure, onViewChange],\n  )\n\n  /**\n   * Zooms about a fixed point in FRAME coordinates.\n   *\n   * The arithmetic is what makes the pointer stay on the thing it is over:\n   * the content point under the cursor must land back under the cursor, so the\n   * offset moves by the difference the scale change opened up. Without it, a\n   * zoom drifts toward the origin and a reader chases the node they were\n   * looking at.\n   */\n  const zoomAbout = useCallback(\n    (factor: number, originX?: number, originY?: number) => {\n      const box = frame.current?.getBoundingClientRect()\n      const cx = originX ?? (box ? box.width / 2 : 0)\n      const cy = originY ?? (box ? box.height / 2 : 0)\n\n      setView((current) => {\n        const scale = Math.min(MAX_SCALE, Math.max(MIN_SCALE, current.scale * factor))\n        const ratio = scale / current.scale\n        const next = {\n          scale,\n          x: cx - (cx - current.x) * ratio,\n          y: cy - (cy - current.y) * ratio,\n          frame: measure(),\n        }\n        onViewChange?.(next)\n        return next\n      })\n    },\n    [measure, onViewChange],\n  )\n\n  useImperativeHandle(\n    ref,\n    () => ({\n      zoomIn: () => zoomAbout(STEP),\n      zoomOut: () => zoomAbout(1 / STEP),\n      reset: () => apply({ scale: 1, x: 0, y: 0 }),\n      centerOn: (x: number, y: number) => {\n        const box = frame.current?.getBoundingClientRect()\n        if (!box) return\n        setView((current) => {\n          const next = {\n            ...current,\n            x: box.width / 2 - x * current.scale,\n            y: box.height / 2 - y * current.scale,\n            frame: measure(),\n          }\n          onViewChange?.(next)\n          return next\n        })\n      },\n      view,\n    }),\n    [apply, measure, onViewChange, view, zoomAbout],\n  )\n\n  // Registered imperatively because React marks `wheel` passive, and a passive\n  // listener cannot call preventDefault — so the modifier-wheel zoom would also\n  // scroll the page underneath it.\n  useEffect(() => {\n    const node = frame.current\n    if (!node) return\n\n    const onWheel = (event: WheelEvent) => {\n      if (!event.ctrlKey && !event.metaKey) return\n      event.preventDefault()\n      const box = node.getBoundingClientRect()\n      zoomAbout(\n        event.deltaY < 0 ? STEP : 1 / STEP,\n        event.clientX - box.left,\n        event.clientY - box.top,\n      )\n    }\n\n    node.addEventListener('wheel', onWheel, { passive: false })\n    return () => node.removeEventListener('wheel', onWheel)\n  }, [zoomAbout])\n\n  const onPointerDown = (event: ReactPointerEvent<HTMLDivElement>) => {\n    if (event.button !== 0) return\n    drag.current = { pointer: event.pointerId, x: event.clientX - view.x, y: event.clientY - view.y }\n    event.currentTarget.setPointerCapture(event.pointerId)\n  }\n\n  const onPointerMove = (event: ReactPointerEvent<HTMLDivElement>) => {\n    const state = drag.current\n    if (!state || state.pointer !== event.pointerId) return\n    apply({ ...view, x: event.clientX - state.x, y: event.clientY - state.y })\n  }\n\n  const endDrag = (event: ReactPointerEvent<HTMLDivElement>) => {\n    if (drag.current?.pointer !== event.pointerId) return\n    drag.current = null\n    if (event.currentTarget.hasPointerCapture(event.pointerId)) {\n      event.currentTarget.releasePointerCapture(event.pointerId)\n    }\n  }\n\n  return (\n    <div\n      className={cn(\n        'relative overflow-hidden rounded-(--radius-lg) border border-(--rule) bg-(--diagram-surface)',\n        className,\n      )}\n      style={{ height }}\n    >\n      <div\n        ref={frame}\n        role=\"group\"\n        aria-label={label}\n        aria-describedby={`${uid}-hint`}\n        tabIndex={0}\n        className=\"size-full cursor-grab touch-none select-none outline-none focus-visible:ring-2 focus-visible:ring-(--ring) focus-visible:ring-inset active:cursor-grabbing\"\n        onPointerDown={onPointerDown}\n        onPointerMove={onPointerMove}\n        onPointerUp={endDrag}\n        onPointerCancel={endDrag}\n        onKeyDown={(event) => {\n          const nudge = event.shiftKey ? 80 : 24\n          switch (event.key) {\n            case '+':\n            case '=':\n              event.preventDefault()\n              zoomAbout(STEP)\n              break\n            case '-':\n              event.preventDefault()\n              zoomAbout(1 / STEP)\n              break\n            case '0':\n              event.preventDefault()\n              apply({ scale: 1, x: 0, y: 0 })\n              break\n            case 'ArrowLeft':\n              event.preventDefault()\n              apply({ ...view, x: view.x + nudge })\n              break\n            case 'ArrowRight':\n              event.preventDefault()\n              apply({ ...view, x: view.x - nudge })\n              break\n            case 'ArrowUp':\n              event.preventDefault()\n              apply({ ...view, y: view.y + nudge })\n              break\n            case 'ArrowDown':\n              event.preventDefault()\n              apply({ ...view, y: view.y - nudge })\n              break\n            default:\n              break\n          }\n        }}\n      >\n        <div\n          className=\"origin-top-left will-change-transform\"\n          style={{ transform: `translate(${view.x}px, ${view.y}px) scale(${view.scale})` }}\n          data-diagram-stage=\"\"\n        >\n          {children}\n        </div>\n      </div>\n\n      <p id={`${uid}-hint`} className=\"sr-only\">\n        Drag to pan. Plus and minus zoom, zero resets, the arrow keys pan.\n      </p>\n\n      {controls && (\n        <div className=\"absolute bottom-3 end-3 flex items-center gap-px rounded-(--radius) border border-(--rule-2) bg-(--panel-bg) p-0.5\">\n          <CanvasButton label=\"Zoom out\" onClick={() => zoomAbout(1 / STEP)}>\n            <span aria-hidden>−</span>\n          </CanvasButton>\n          <button\n            type=\"button\"\n            onClick={() => apply({ scale: 1, x: 0, y: 0 })}\n            aria-label=\"Reset the view\"\n            className=\"min-w-12 rounded-(--radius-xs) px-1.5 py-1 mono-meta text-(--ink-2) 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            {Math.round(view.scale * 100)}%\n          </button>\n          <CanvasButton label=\"Zoom in\" onClick={() => zoomAbout(STEP)}>\n            <span aria-hidden>+</span>\n          </CanvasButton>\n        </div>\n      )}\n    </div>\n  )\n}\n\nfunction CanvasButton({\n  label,\n  onClick,\n  children,\n}: {\n  label: string\n  onClick: () => void\n  children: ReactNode\n}) {\n  return (\n    <button\n      type=\"button\"\n      onClick={onClick}\n      aria-label={label}\n      className=\"flex size-7 items-center justify-center rounded-(--radius-xs) font-mono text-[13px] leading-none text-(--ink-2) 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      {children}\n    </button>\n  )\n}\n\nexport default DiagramCanvas\n"],"mappings":"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","names":[]}