@50arms/ui 0.0.0-stage → 35.2.0

package/dist/components/graph-explorer/GraphExplorer.js

@@ -0,0 +1,441 @@
+import { jsx as o, jsxs as z } from "react/jsx-runtime";
+import { useState as C, useCallback as M, useMemo as h, useId as ve, useRef as ee, useEffect as xe } from "react";
+import { cn as R } from "../../lib/cn.js";
+import { Dialog as we } from "../Dialog.js";
+import { Icon as L } from "../Icon.js";
+import { IconButton as B } from "../IconButton.js";
+import { LAYOUT_DEFAULTS as ye, neighbourhood as Ee, edgePath as Oe } from "../node-canvas/layout.js";
+import { neighbourhoodTree as Te, layoutExplorerTree as Ie, frameBoxFor as De } from "./tree-layout.js";
+import { useCamera as Ae } from "./use-camera.js";
+import { useUiStrings as te } from "../../lib/i18n/provider.js";
+import { useNumberFormat as ze } from "../../lib/i18n/number-format.js";
+const Me = "32rem", Ne = "28rem", Se = 16, _e = 2, ke = 13, Fe = 14, Le = ke / Fe;
+function Be(i) {
+  return i ? i instanceof Set ? i : new Set(i) : /* @__PURE__ */ new Set();
+}
+function Ce({ label: i }) {
+  return /* @__PURE__ */ o("div", { className: "flex min-h-full flex-col justify-center gap-1 px-3 py-2", children: /* @__PURE__ */ o("span", { className: "text-sm font-medium text-primary", children: i }) });
+}
+function ue({
+  tree: i,
+  crossLinks: c = [],
+  label: u,
+  renderNode: f,
+  focusId: l,
+  onFocusRequest: y,
+  visitedIds: q,
+  onNodeClick: N,
+  nodeWidth: S,
+  nodeHeight: b,
+  height: T,
+  disabled: v,
+  resetKey: _,
+  framePadding: V,
+  minReadableScale: k = Le,
+  showToolbar: $,
+  className: P
+}) {
+  const H = te().graphExplorer, j = ze(), U = ve(), [x, I] = C(null), [D, X] = C({}), A = ee(/* @__PURE__ */ new Map()), F = ee(/* @__PURE__ */ new Map()), Z = M((e) => {
+    let t = F.current.get(e);
+    return t || (t = (r) => {
+      const s = A.current.get(e);
+      if (s && (s.disconnect(), A.current.delete(e)), !r) return;
+      const m = new ResizeObserver((d) => {
+        const g = d[0];
+        if (!g) return;
+        const O = Math.ceil(g.contentRect.height);
+        X((W) => W[e] === O ? W : { ...W, [e]: O });
+      });
+      m.observe(r), A.current.set(e, m);
+    }, F.current.set(e, t), t);
+  }, []);
+  xe(() => {
+    const e = A.current;
+    return () => {
+      for (const t of e.values()) t.disconnect();
+      e.clear();
+    };
+  }, []);
+  const E = h(
+    () => ({
+      nodes: i.nodes.map((e) => {
+        const t = D[e.id], r = e.height ?? b ?? ye.nodeHeight;
+        return t && t > r ? { ...e, height: t } : e;
+      })
+    }),
+    [i, D, b]
+  ), n = h(
+    () => Ie(E, c, { nodeWidth: S, nodeHeight: b }),
+    [E, c, S, b]
+  ), p = h(() => new Map(n.nodes.map((e) => [e.id, e])), [n.nodes]), w = M((e) => p.get(e) ?? null, [p]), re = h(() => {
+    const e = new Map(E.nodes.map((s) => [s.id, s.parentId])), t = /* @__PURE__ */ new Map();
+    function r(s) {
+      const m = t.get(s);
+      if (m !== void 0) return m;
+      const d = e.get(s) ?? null, g = d === null ? 0 : r(d) + 1;
+      return t.set(s, g), g;
+    }
+    for (const s of E.nodes) r(s.id);
+    return t;
+  }, [E]), fe = h(() => l ? De(n, l) : null, [l, n]), me = h(() => l ? w(l) : null, [l, w]), a = Ae({
+    contentBox: { x: 0, y: 0, width: n.width, height: n.height },
+    frameBox: fe,
+    frameKey: l,
+    framePadding: V,
+    minReadableScale: k,
+    focusBox: me,
+    boxOf: w,
+    disabled: v,
+    resetKey: _,
+    onClick: ({ target: e }) => {
+      const r = e.closest("[data-explorer-node]")?.getAttribute("data-explorer-node");
+      r && se(r);
+    }
+  }), [Y, J] = C(null), oe = h(() => {
+    if (n.nodes.length === 0) return null;
+    const e = i.nodes.filter((s) => s.parentId === null).map((s) => s.id);
+    return [...(e.length > 0 ? e : [n.nodes[0].id]).map((s) => p.get(s)).filter((s) => !!s)].sort((s, m) => s.y - m.y)[0]?.id ?? n.nodes[0].id;
+  }, [n.nodes, i.nodes, p]), ne = Y && p.has(Y) ? Y : oe, se = M(
+    (e) => {
+      const t = p.get(e);
+      J(e), t?.node && N?.(t.node), y(e);
+    },
+    [p, N, y]
+  ), ae = ee(null), G = M(
+    (e) => {
+      J(e), a.flyTo(e), queueMicrotask(() => {
+        ae.current?.querySelector(`[data-explorer-node="${CSS.escape(e)}"]`)?.focus();
+      });
+    },
+    [a]
+  ), ie = h(
+    () => [...n.edges, ...n.crossLinks],
+    [n.edges, n.crossLinks]
+  );
+  function le(e, t) {
+    if (!p.has(e)) return null;
+    const r = re.get(e);
+    if (r === void 0) return null;
+    const s = n.nodes.filter((d) => re.get(d.id) === r).sort((d, g) => d.x - g.x), m = s.findIndex((d) => d.id === e);
+    return s[m + t]?.id ?? null;
+  }
+  function pe(e) {
+    return n.edges.find((t) => t.to === e)?.from ?? null;
+  }
+  function he(e) {
+    return n.edges.find((t) => t.from === e)?.to ?? null;
+  }
+  function ge(e, t) {
+    if (!v)
+      switch (e.key) {
+        case "+":
+        case "=":
+          e.preventDefault(), a.zoomIn();
+          return;
+        case "-":
+        case "_":
+          e.preventDefault(), a.zoomOut();
+          return;
+        case "0":
+          e.preventDefault(), a.fitAll();
+          return;
+        case "Home":
+          e.preventDefault(), a.flyTo(t);
+          return;
+        /* DX-3401: ranks now run top to bottom, so Up/Down follow the backbone
+           (parent/child) and Left/Right move between siblings — the mirror of
+           the pre-DX-3401 mapping, which matched the old left-to-right ranking. */
+        case "ArrowUp": {
+          const r = pe(t);
+          r && (e.preventDefault(), G(r));
+          return;
+        }
+        case "ArrowDown": {
+          const r = he(t);
+          r && (e.preventDefault(), G(r));
+          return;
+        }
+        case "ArrowLeft": {
+          const r = le(t, -1);
+          r && (e.preventDefault(), G(r));
+          return;
+        }
+        case "ArrowRight": {
+          const r = le(t, 1);
+          r && (e.preventDefault(), G(r));
+          return;
+        }
+        case "Enter":
+        case " ":
+          e.preventDefault(), se(t);
+          return;
+      }
+  }
+  const Q = x ?? l ?? null, K = h(
+    () => Q ? Ee(Q, ie, _e) : null,
+    [Q, ie]
+  );
+  function ce(e) {
+    if (!e.node)
+      throw new Error(`GraphExplorer: placed node "${e.id}" has no backing data (expected a tree leaf)`);
+    return e.node;
+  }
+  const be = (e, t) => {
+    const r = ce(e);
+    return f ? f(r, t) : /* @__PURE__ */ o(Ce, { label: r.label });
+  };
+  return /* @__PURE__ */ z(
+    "div",
+    {
+      ref: ae,
+      "data-explorer-viewport": !0,
+      className: R(
+        "relative min-w-0 overflow-hidden select-none touch-none rounded-xl border border-border bg-canvas-subtle",
+        v ? "cursor-default" : a.panning ? "cursor-grabbing" : "cursor-grab",
+        P
+      ),
+      style: { height: T },
+      children: [
+        /* @__PURE__ */ o(
+          "div",
+          {
+            ref: a.bindViewport,
+            role: "tree",
+            "aria-label": u,
+            "aria-describedby": U,
+            "data-camera-viewport": !0,
+            className: "absolute inset-0",
+            style: { visibility: n.nodes.length > 0 && n.width === 0 ? "hidden" : "visible" },
+            children: /* @__PURE__ */ z(
+              "div",
+              {
+                "data-animating": a.animating || void 0,
+                className: R(
+                  "absolute top-0 left-0 origin-top-left",
+                  /* `transition-[var(--tx-colors),transform]`, not a bare
+                     `transition-transform` — `transition-property` is not
+                     additive, so naming only `transform` would silently drop the
+                     global colour-fade transition every other element inherits
+                     (see `styles/motion.css`'s own note on `--tx-colors`). */
+                  a.animating && "transition-[var(--tx-colors),transform] duration-(--dur-slowest) ease-(--ease-gentle)"
+                ),
+                style: { transform: `translate(${a.camera.x}px, ${a.camera.y}px) scale(${a.camera.scale})` },
+                children: [
+                  /* @__PURE__ */ z(
+                    "svg",
+                    {
+                      "aria-hidden": "true",
+                      className: "pointer-events-none absolute overflow-visible text-border-strong",
+                      width: n.width || 1,
+                      height: n.height || 1,
+                      children: [
+                        n.edges.map((e) => /* @__PURE__ */ o(de, { edge: e, neighbours: K }, `b:${e.from}->${e.to}`)),
+                        n.crossLinks.map((e) => /* @__PURE__ */ o(de, { edge: e, neighbours: K, dashed: !0 }, `x:${e.from}->${e.to}`))
+                      ]
+                    }
+                  ),
+                  n.nodes.map((e) => {
+                    const t = ce(e), r = e.id === l, s = q.has(e.id), m = e.id === ne, d = K?.get(e.id) ?? null, g = K !== null && d === null;
+                    return /* @__PURE__ */ o(
+                      "div",
+                      {
+                        ref: Z(e.id),
+                        "data-explorer-node": e.id,
+                        "data-visited": s || void 0,
+                        role: "treeitem",
+                        "aria-label": t.label,
+                        "aria-current": r ? "location" : void 0,
+                        tabIndex: m ? 0 : -1,
+                        onFocus: () => J(e.id),
+                        onKeyDown: (O) => ge(O, e.id),
+                        onMouseEnter: () => I(e.id),
+                        onMouseLeave: () => I((O) => O === e.id ? null : O),
+                        className: R(
+                          "absolute overflow-visible rounded-lg border bg-surface-raised outline-none",
+                          "transition-[var(--tx-colors),box-shadow,opacity] duration-(--dur-fast) ease-snappy",
+                          "focus-visible:ring-2 focus-visible:ring-accent-border",
+                          r ? "border-accent-border elevate-md ring-2 ring-accent-border/40" : "border-border-subtle elevate-sm",
+                          g && "opacity-40"
+                        ),
+                        style: { left: e.x, top: e.y, width: e.width, minHeight: e.height },
+                        children: be(e, { isTabStop: m, isFocused: r, isVisited: s, distance: d })
+                      },
+                      e.id
+                    );
+                  })
+                ]
+              }
+            )
+          }
+        ),
+        (a.frameOverflow.left || a.frameOverflow.right || a.frameOverflow.top || a.frameOverflow.bottom) && /* @__PURE__ */ z("div", { "aria-hidden": "true", className: "pointer-events-none absolute inset-0", children: [
+          a.frameOverflow.left && /* @__PURE__ */ o(
+            "div",
+            {
+              "data-frame-edge-cue": "left",
+              className: "absolute inset-y-0 left-0 w-8 bg-gradient-to-r from-canvas-subtle to-transparent"
+            }
+          ),
+          a.frameOverflow.right && /* @__PURE__ */ o(
+            "div",
+            {
+              "data-frame-edge-cue": "right",
+              className: "absolute inset-y-0 right-0 w-8 bg-gradient-to-l from-canvas-subtle to-transparent"
+            }
+          ),
+          a.frameOverflow.top && /* @__PURE__ */ o(
+            "div",
+            {
+              "data-frame-edge-cue": "top",
+              className: "absolute inset-x-0 top-0 h-8 bg-gradient-to-b from-canvas-subtle to-transparent"
+            }
+          ),
+          a.frameOverflow.bottom && /* @__PURE__ */ o(
+            "div",
+            {
+              "data-frame-edge-cue": "bottom",
+              className: "absolute inset-x-0 bottom-0 h-8 bg-gradient-to-t from-canvas-subtle to-transparent"
+            }
+          )
+        ] }),
+        $ && !v && /* @__PURE__ */ o(
+          Re,
+          {
+            onZoomIn: a.zoomIn,
+            onZoomOut: a.zoomOut,
+            onFitAll: a.fitAll,
+            onReset: () => a.flyTo(l ?? ne ?? oe ?? "")
+          }
+        ),
+        /* @__PURE__ */ o("p", { id: U, role: "status", "aria-live": "polite", className: "sr-only", children: H.showing(n.nodes.length, j(n.nodes.length), u) })
+      ]
+    }
+  );
+}
+function de({
+  edge: i,
+  neighbours: c,
+  dashed: u
+}) {
+  const f = c !== null && c.has(i.from) && c.has(i.to);
+  return /* @__PURE__ */ o(
+    "path",
+    {
+      d: Oe(i),
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: c ? f ? 2 : 1 : u ? 1 : 1.5,
+      strokeDasharray: u ? "4 4" : void 0,
+      opacity: u ? c ? f ? 0.8 : 0.25 : 0.5 : c ? f ? 1 : 0.35 : 1
+    }
+  );
+}
+function Re({
+  onZoomIn: i,
+  onZoomOut: c,
+  onFitAll: u,
+  onReset: f
+}) {
+  const l = te().graphExplorer;
+  return /* @__PURE__ */ z("div", { className: "absolute right-2 bottom-2 flex items-center gap-1 rounded-lg border border-border bg-surface/95 p-1 shadow-sm backdrop-blur-sm", children: [
+    /* @__PURE__ */ o(B, { icon: /* @__PURE__ */ o(L, { name: "minus", size: "sm" }), label: l.zoomOut, size: "sm", onClick: c }),
+    /* @__PURE__ */ o(B, { icon: /* @__PURE__ */ o(L, { name: "plus", size: "sm" }), label: l.zoomIn, size: "sm", onClick: i }),
+    /* @__PURE__ */ o(B, { icon: /* @__PURE__ */ o(L, { name: "maximize-2", size: "sm" }), label: l.fitAll, size: "sm", onClick: u }),
+    /* @__PURE__ */ o(B, { icon: /* @__PURE__ */ o(L, { name: "crosshair", size: "sm" }), label: l.resetToFocus, size: "sm", onClick: f })
+  ] });
+}
+function $e({
+  tree: i,
+  crossLinks: c = [],
+  label: u,
+  renderNode: f,
+  variant: l = "explorer",
+  focusId: y,
+  defaultFocusId: q = null,
+  onFocusIdChange: N,
+  visitedIds: S,
+  onNodeClick: b,
+  onExpand: T,
+  nodeWidth: v,
+  nodeHeight: _,
+  height: V = Me,
+  minReadableScale: k,
+  disabled: $,
+  className: P
+}) {
+  const H = te().graphExplorer, [j, U] = C(q), x = y !== void 0 ? y : j, I = M(
+    (w) => {
+      y === void 0 && U(w), N?.(w);
+    },
+    [y, N]
+  ), D = h(() => Be(S), [S]), X = i.nodes, [A, F] = C(!1), Z = M(() => {
+    T ? T() : F(!0);
+  }, [T]);
+  if (l === "explorer")
+    return /* @__PURE__ */ o("div", { className: R("relative", P), children: /* @__PURE__ */ o(
+      ue,
+      {
+        tree: i,
+        crossLinks: c,
+        label: u,
+        renderNode: f,
+        focusId: x,
+        onFocusRequest: I,
+        visitedIds: D,
+        onNodeClick: b,
+        nodeWidth: v,
+        nodeHeight: _,
+        height: V,
+        minReadableScale: k,
+        disabled: $,
+        resetKey: X,
+        showToolbar: !0
+      }
+    ) });
+  const E = x ? Te(i, x) : null, n = i.nodes.find((w) => w.parentId === null) ?? i.nodes[0], p = E ?? { nodes: n ? [{ ...n, parentId: null }] : [] };
+  return /* @__PURE__ */ z("div", { className: R("relative", P), children: [
+    /* @__PURE__ */ o(
+      ue,
+      {
+        tree: p,
+        crossLinks: c,
+        label: H.minimap(u),
+        focusId: x,
+        onFocusRequest: I,
+        visitedIds: D,
+        onNodeClick: b,
+        renderNode: f,
+        nodeWidth: v,
+        nodeHeight: _,
+        height: Ne,
+        minReadableScale: k,
+        disabled: $,
+        resetKey: x,
+        framePadding: Se
+      }
+    ),
+    /* @__PURE__ */ o("div", { className: "absolute top-2 right-2", children: /* @__PURE__ */ o(B, { icon: /* @__PURE__ */ o(L, { name: "maximize-2", size: "sm" }), label: H.expand, size: "sm", onClick: Z }) }),
+    !T && /* @__PURE__ */ o(we, { open: A, onOpenChange: F, title: u, size: "xl", children: /* @__PURE__ */ o(
+      $e,
+      {
+        tree: i,
+        crossLinks: c,
+        label: u,
+        renderNode: f,
+        variant: "explorer",
+        focusId: x,
+        onFocusIdChange: I,
+        visitedIds: D,
+        onNodeClick: b,
+        nodeWidth: v,
+        nodeHeight: _,
+        height: "70vh",
+        minReadableScale: k
+      }
+    ) })
+  ] });
+}
+export {
+  $e as GraphExplorer
+};
+//# sourceMappingURL=GraphExplorer.js.map

package/dist/components/graph-explorer/GraphExplorer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"GraphExplorer.js","sources":["../../../src/components/graph-explorer/GraphExplorer.tsx"],"sourcesContent":["import { useCallback, useEffect, useId, useMemo, useRef, useState } from \"react\";\nimport { cn } from \"../../lib/cn\";\nimport { useNumberFormat, useUiStrings } from \"../../lib/i18n\";\nimport { Dialog } from \"../Dialog\";\nimport { Icon } from \"../Icon\";\nimport { IconButton } from \"../IconButton\";\nimport { LAYOUT_DEFAULTS, neighbourhood } from \"../node-canvas/layout\";\nimport type { CanvasNode, CanvasPlacedEdge, PlacedNode } from \"../node-canvas/types\";\nimport { edgePath, frameBoxFor, layoutExplorerTree, neighbourhoodTree } from \"./tree-layout\";\nimport { useCamera } from \"./use-camera\";\nimport type { CrossLink, ExplorerNodeRenderContext, ExplorerNodeRenderer, ExplorerTree, GraphExplorerVariant } from \"./types\";\n\n/* ============================================================================\n   GRAPH EXPLORER — a static tree you explore with a camera. (DX-3376)\n\n   THE OPERATOR'S OWN WORDS, FROM THE CARD: `NodeCanvas`'s concept map was\n   \"super confusing and unusable\" — a cyclic-cluster box nobody could read,\n   titles cut off with an ellipsis, nodes you could accidentally drag out of\n   place, and no sense of where you are. Every one of those is addressed by a\n   DIFFERENT mechanism than `NodeCanvas` uses, not a tuned version of the same\n   one — see `types.ts`'s module doc for why this is a sibling component\n   rather than an extension.\n\n   WHAT \"STATIC\" MEANS HERE: the LAYOUT never moves once computed (modulo a\n   node's own height settling once its wrapped content is measured — see\n   `measuredHeights` below). What moves is the CAMERA — pan, zoom, and the\n   animated fly-to a controlled `focusId` drives. That is the whole design in\n   one sentence: dragging a node is meaningless when nothing about the\n   drawing is negotiable, so dragging is repurposed to mean \"move the camera\"\n   instead, which is what `use-camera.ts` implements.\n   ========================================================================= */\n\nconst DEFAULT_HEIGHT = \"32rem\";\n/* DX-3405: tall enough to hold THREE ranks (parent + focus + children) at\n   the readable floor (`MIN_READABLE_TITLE_SCALE`) WITHOUT vertical clipping\n   — DX-3401's original 9rem, and DX-3404's follow-up bump to 15rem, both\n   assumed every node stays at `LAYOUT_DEFAULTS.nodeHeight` (76px); neither\n   accounted for a node whose title actually WRAPS (measured taller via the\n   `ResizeObserver` in `GraphExplorerSurface`, above). Measured against\n   `src/demo/pages/GraphExplorerPage.tsx`'s own tree — which deliberately\n   includes a several-line wrapping title exactly to stress this — focusing\n   the node ONE RANK ABOVE the wrapping title (so the tall node is a CHILD,\n   the worst case: the child row's height, not just the focus row's, grows)\n   measured a required frame height of ~332px at the floor scale. Rounded\n   up with real headroom rather than shaving it to the wire, since a\n   slightly-longer title than this demo's is one edit away. camera-math.ts's\n   `fitBoxWithFloor` is what actually keeps the frame's full vertical extent\n   centred in whatever height this is — this constant only has to be TALL\n   ENOUGH; the centring guarantees it is never clipped once it is. */\nconst MINIMAP_HEIGHT = \"28rem\";\n/** Padding around the minimap's auto-framed box — deliberately much smaller\n    than the explorer's own `CAMERA_DEFAULTS.fitPadding` (64px), which would\n    eat most of a compact strip's own height. DX-3401. */\nconst MINIMAP_FRAME_PADDING = 16;\n/** Hops the hover/focus neighbourhood highlight reaches — same distance\n    `NodeCanvas` uses (`FOCUS_HOPS` in `NodeCanvas.tsx`), for a consistent feel. */\nconst HOVER_HOPS = 2;\n\n/** Smallest a node title may render on screen before the automatic frame-fit\n    (mount / focus change — `useCamera`'s `minReadableScale`) stops shrinking\n    to show the whole frame and instead holds this scale, centring on the\n    focused node so the rest is reached by panning (DX-3404). ~13px is about\n    the smallest UI text stays comfortably legible. This bounds ONLY the\n    automatic fit — `fitAll` (the manual \"fit everything\" control) is\n    unaffected and may still zoom out past it on purpose. */\nconst MIN_READABLE_TITLE_PX = 13;\n/** `DefaultNodeBody`'s title is `text-sm` (14px at camera scale 1) — the\n    camera scales the whole node, title included, so the floor above has to\n    be expressed as a FRACTION of this base, not as a raw pixel value. A\n    `renderNode` with a different title size should derive its own\n    `minReadableScale` from `MIN_READABLE_TITLE_PX` the same way and pass it\n    as a prop, rather than assuming this default. */\nconst DEFAULT_NODE_TITLE_PX = 14;\n/** @default for `GraphExplorerProps.minReadableScale` — ~0.93 for the default node body. */\nconst MIN_READABLE_TITLE_SCALE = MIN_READABLE_TITLE_PX / DEFAULT_NODE_TITLE_PX;\n\nexport interface GraphExplorerProps<Extra = unknown> {\n  tree: ExplorerTree<Extra>;\n  /** Secondary relationships drawn over the fixed layout. Never affects positions. */\n  crossLinks?: readonly CrossLink[];\n  /** The accessible name of the whole structure. Required — see `NodeCanvasProps.label`. */\n  label: string;\n  /** The node body. Defaults to the label, wrapped, never truncated. */\n  renderNode?: ExplorerNodeRenderer<Extra>;\n  /** @default \"explorer\" */\n  variant?: GraphExplorerVariant;\n  /** Which node the camera centres on, with a \"you are here\" highlight. Controlled. */\n  focusId?: string | null;\n  /** Initial `focusId` for uncontrolled use. */\n  defaultFocusId?: string | null;\n  /** Fired when the controlled `focusId` would change — a node click, or `flyTo` via the keyboard. Never fired with `null`: nothing in this component ever clears focus, only moves it. */\n  onFocusIdChange?: (id: string) => void;\n  /** Nodes styled as already seen. */\n  visitedIds?: ReadonlySet<string> | readonly string[];\n  /** Fired when an ordinary node is clicked or activated by keyboard. */\n  onNodeClick?: (node: CanvasNode<Extra>) => void;\n  /** `variant=\"minimap\"` only: the expand affordance's handler. Defaults to an in-place full-screen dialog. */\n  onExpand?: () => void;\n  /** Cross-axis extent of a node that does not need more, in px — the rank's OWN axis (ranks spread along y, DX-3401's vertical default) unless `orientation` is overridden. @default LAYOUT_DEFAULTS.nodeWidth */\n  nodeWidth?: number;\n  /** Along-axis extent BEFORE a taller node's own content grows it — the axis ranks advance along. @default LAYOUT_DEFAULTS.nodeHeight */\n  nodeHeight?: number;\n  /** Floor on the automatic frame-fit's scale (mount / focus change, both\n      `variant`s) — below this, the camera holds the floor and centres on the\n      focused node instead of shrinking the whole frame to fit; `fitAll`\n      stays unaffected (DX-3404). See `MIN_READABLE_TITLE_SCALE`'s own\n      comment for the derivation; override when `renderNode` uses a\n      different title font size. @default MIN_READABLE_TITLE_SCALE */\n  minReadableScale?: number;\n  /** `variant=\"explorer\"` only: height of the viewport. @default \"32rem\" */\n  height?: string;\n  /** Nothing pans, zooms or clicks. Reading is unaffected. */\n  disabled?: boolean;\n  className?: string;\n}\n\nfunction toVisitedSet(visitedIds: ReadonlySet<string> | readonly string[] | undefined): ReadonlySet<string> {\n  if (!visitedIds) return new Set();\n  return visitedIds instanceof Set ? visitedIds : new Set(visitedIds);\n}\n\nfunction DefaultNodeBody({ label }: { label: string }) {\n  return (\n    <div className=\"flex min-h-full flex-col justify-center gap-1 px-3 py-2\">\n      <span className=\"text-sm font-medium text-primary\">{label}</span>\n    </div>\n  );\n}\n\n/** The shared render core — an `explorer` viewport, or the tree a `minimap` shows inside a dialog. */\nfunction GraphExplorerSurface<Extra>({\n  tree,\n  crossLinks = [],\n  label,\n  renderNode,\n  focusId,\n  onFocusRequest,\n  visitedIds,\n  onNodeClick,\n  nodeWidth,\n  nodeHeight,\n  height,\n  disabled,\n  resetKey,\n  framePadding,\n  minReadableScale = MIN_READABLE_TITLE_SCALE,\n  showToolbar,\n  className,\n}: {\n  tree: ExplorerTree<Extra>;\n  crossLinks?: readonly CrossLink[];\n  label: string;\n  renderNode?: ExplorerNodeRenderer<Extra>;\n  focusId: string | null;\n  onFocusRequest: (id: string) => void;\n  visitedIds: ReadonlySet<string>;\n  onNodeClick?: (node: CanvasNode<Extra>) => void;\n  nodeWidth?: number;\n  nodeHeight?: number;\n  height: string;\n  disabled?: boolean;\n  resetKey: unknown;\n  /** Padding around the automatic camera frame — see `useCamera`'s own `framePadding`. `undefined` uses its default (the explorer's own generous padding); the minimap passes a much smaller value. */\n  framePadding?: number;\n  /** Forwarded to `useCamera`'s own `minReadableScale` — see `GraphExplorerProps.minReadableScale`. */\n  minReadableScale?: number;\n  /** The camera toolbar (zoom/fit/reset) lives here, not in `GraphExplorer` itself — it drives THIS surface's own `useCamera` instance, and a second instance would fall out of sync with the one actually rendering. */\n  showToolbar?: boolean;\n  className?: string;\n}) {\n  const strings = useUiStrings().graphExplorer;\n  const fmt = useNumberFormat();\n  const statusId = useId();\n  const [hoveredId, setHoveredId] = useState<string | null>(null);\n\n  /* --- height measurement: a node's box grows to fit its wrapped content ---\n\n     `layoutExplorerTree` needs a height PER NODE up front to give dagre\n     spacing to work with. The true height is a fact about rendered content\n     this component does not know until the browser has laid it out once —\n     so the first pass uses the caller's default, a `ResizeObserver` per node\n     corrects it, and the corrected height feeds the NEXT layout pass. The\n     node element itself is never clipped in between (`overflow-visible`,\n     `min-height` rather than a fixed `height` — see the node's own\n     `className` below), so \"never truncated\" holds on every frame, including\n     the first one, independent of whether measurement has caught up yet. */\n  const [measuredHeights, setMeasuredHeights] = useState<Record<string, number>>({});\n  const nodeObservers = useRef(new Map<string, ResizeObserver>());\n  /**\n   * Ref callbacks cached by id — NOT recreated on every call.\n   *\n   * `bindNodeMeasure(id)` is invoked inline in JSX (`ref={bindNodeMeasure(placed.id)}`),\n   * so without this cache every render — including one triggered by nothing\n   * more than a hover (`onMouseEnter`/`onMouseLeave` below) or a pan's\n   * `camera` state update — would hand React a FRESH closure identity for\n   * every visible node's ref, and React tears down and reattaches a ref\n   * whose identity changed. That means disconnecting and recreating a real\n   * `ResizeObserver` per node on every such render — exactly the stable-ref\n   * requirement `node-canvas/use-canvas-gestures.ts`'s own `bindNode` cache\n   * exists for, for the identical reason.\n   */\n  const nodeMeasureBindings = useRef(new Map<string, (el: HTMLDivElement | null) => void>());\n  const bindNodeMeasure = useCallback((id: string) => {\n    let cached = nodeMeasureBindings.current.get(id);\n    if (cached) return cached;\n    cached = (el: HTMLDivElement | null) => {\n      const existing = nodeObservers.current.get(id);\n      if (existing) {\n        existing.disconnect();\n        nodeObservers.current.delete(id);\n      }\n      if (!el) return;\n      const observer = new ResizeObserver((entries) => {\n        const entry = entries[0];\n        if (!entry) return;\n        const measured = Math.ceil(entry.contentRect.height);\n        setMeasuredHeights((current) => (current[id] === measured ? current : { ...current, [id]: measured }));\n      });\n      observer.observe(el);\n      nodeObservers.current.set(id, observer);\n    };\n    nodeMeasureBindings.current.set(id, cached);\n    return cached;\n  }, []);\n  useEffect(() => {\n    const observers = nodeObservers.current;\n    return () => {\n      for (const observer of observers.values()) observer.disconnect();\n      observers.clear();\n    };\n  }, []);\n\n  const sizedTree = useMemo<ExplorerTree<Extra>>(\n    () => ({\n      nodes: tree.nodes.map((node) => {\n        const measured = measuredHeights[node.id];\n        /* The EFFECTIVE default a node would otherwise get from\n           `layoutExplorerTree` — never just `node.height ?? nodeHeight`,\n           which is `undefined` (falsy) for the ordinary case of neither\n           being set, and previously made THIS branch read \"no explicit\n           height was ever given, so ANY measured value overrides\" — a\n           measured height SMALLER than the true default (`LAYOUT_DEFAULTS\n           .nodeHeight`, 76) still got applied, silently shrinking the node's\n           layout box below what dagre would otherwise have given it and\n           shifting every other node packed against the same rank. */\n        const base = node.height ?? nodeHeight ?? LAYOUT_DEFAULTS.nodeHeight;\n        return measured && measured > base ? { ...node, height: measured } : node;\n      }),\n    }),\n    [tree, measuredHeights, nodeHeight],\n  );\n\n  const layout = useMemo(\n    () => layoutExplorerTree(sizedTree, crossLinks, { nodeWidth, nodeHeight }),\n    [sizedTree, crossLinks, nodeWidth, nodeHeight],\n  );\n  const byId = useMemo(() => new Map(layout.nodes.map((n) => [n.id, n])), [layout.nodes]);\n  const boxOf = useCallback((id: string) => byId.get(id) ?? null, [byId]);\n\n  /* --- rank, by TOPOLOGY, never by rounding a pixel coordinate ---\n\n     `siblingOf` (below) needs \"every node dagre put in the same rank.\"\n     Rounding a placed box's along-axis coordinate looks like a shortcut for\n     that, but it silently breaks under the one thing this component already\n     does dynamically: `sizedTree` (above) feeds a per-node MEASURED height\n     into the layout once a node's wrapped content settles. dagre centres\n     every node in a rank on the SAME along-axis coordinate — so two same-rank\n     nodes of DIFFERENT height end up with different placed top-left\n     coordinates (`center - height / 2`) even though dagre agrees they're one\n     rank. Depth from each node's own `parentId` chain is the fact dagre's\n     ranking is actually built from, so it can never disagree with dagre\n     regardless of what any node measures. */\n  const depthOf = useMemo(() => {\n    const parentOf = new Map(sizedTree.nodes.map((node) => [node.id, node.parentId]));\n    const cache = new Map<string, number>();\n    function depth(id: string): number {\n      const cached = cache.get(id);\n      if (cached !== undefined) return cached;\n      const parentId = parentOf.get(id) ?? null;\n      const result = parentId === null ? 0 : depth(parentId) + 1;\n      cache.set(id, result);\n      return result;\n    }\n    for (const node of sizedTree.nodes) depth(node.id);\n    return cache;\n  }, [sizedTree]);\n\n  /* --- the camera's automatic frame: focus + its parent + its children ---\n\n     DX-3401. Feeds `useCamera`'s `frameBox`/`frameKey`, which is the SOLE\n     driver of the automatic mount/focus-change fit (see that hook's own\n     comment on why this replaced a separate `flyTo`-on-`focusId`-change\n     effect that raced it). `null` when there is no focus yet — `useCamera`\n     falls back to fitting `contentBox` (the whole tree) in that case, the\n     ordinary \"nothing focused\" view. */\n  const frameBox = useMemo(() => (focusId ? frameBoxFor(layout, focusId) : null), [focusId, layout]);\n  /* The narrow target `minReadableScale` centres on once it clamps the fit —\n     the focused node's own box, distinct from the wider `frameBox` (focus +\n     parent + children) above (DX-3404). */\n  const focusBox = useMemo(() => (focusId ? boxOf(focusId) : null), [focusId, boxOf]);\n\n  const camera = useCamera({\n    contentBox: { x: 0, y: 0, width: layout.width, height: layout.height },\n    frameBox,\n    frameKey: focusId,\n    framePadding,\n    minReadableScale,\n    focusBox,\n    boxOf,\n    disabled,\n    resetKey,\n    onClick: ({ target }) => {\n      const el = target.closest<HTMLElement>(\"[data-explorer-node]\");\n      const id = el?.getAttribute(\"data-explorer-node\");\n      if (id) activate(id);\n    },\n  });\n\n  /* --- roving tab stop + activation --- */\n  const [internalTabStop, setInternalTabStop] = useState<string | null>(null);\n  const defaultTabStopId = useMemo(() => {\n    if (layout.nodes.length === 0) return null;\n    const roots = tree.nodes.filter((n) => n.parentId === null).map((n) => n.id);\n    const candidates = roots.length > 0 ? roots : [layout.nodes[0]!.id];\n    const placed = candidates.map((id) => byId.get(id)).filter((n): n is PlacedNode<Extra> => Boolean(n));\n    return [...placed].sort((a, b) => a.y - b.y)[0]?.id ?? layout.nodes[0]!.id;\n  }, [layout.nodes, tree.nodes, byId]);\n  const tabStopId = internalTabStop && byId.has(internalTabStop) ? internalTabStop : defaultTabStopId;\n\n  const activate = useCallback(\n    (id: string) => {\n      const placed = byId.get(id);\n      setInternalTabStop(id);\n      if (placed?.node) onNodeClick?.(placed.node);\n      onFocusRequest(id);\n    },\n    [byId, onNodeClick, onFocusRequest],\n  );\n\n  const rootRef = useRef<HTMLDivElement | null>(null);\n  /**\n   * Moves the roving tab stop AND the camera — unlike `NodeCanvas`'s own\n   * `focusNode`, which only needs the DOM focus move because its plane pans\n   * via real `scrollLeft`/`scrollTop` and `el.scrollIntoView()` (called right\n   * after `.focus()` there) is enough to bring an off-screen target into\n   * view. This plane pans via a CSS `transform` instead — there is no native\n   * scroll container for `scrollIntoView` to act on — so without an explicit\n   * `camera.flyTo` here, arrow-key navigation across a tree larger than the\n   * viewport would move DOM focus off-screen with no visual feedback at all.\n   */\n  const focusNode = useCallback(\n    (id: string) => {\n      setInternalTabStop(id);\n      camera.flyTo(id);\n      queueMicrotask(() => {\n        rootRef.current?.querySelector<HTMLElement>(`[data-explorer-node=\"${CSS.escape(id)}\"]`)?.focus();\n      });\n    },\n    [camera],\n  );\n\n  const allEdges = useMemo(\n    () => [...layout.edges, ...layout.crossLinks],\n    [layout.edges, layout.crossLinks],\n  );\n\n  /* DX-3401: rank mates are found by DEPTH (`depthOf`, topological), never by\n     rounding a placed coordinate — see that memo's own comment for why a\n     geometric rank axis breaks the moment same-rank nodes measure different\n     heights. Within a rank, `x` is still the right SORT key (vertical\n     orientation spreads siblings along x) — only which nodes COUNT as the\n     rank changed. */\n  function siblingOf(id: string, step: number): string | null {\n    if (!byId.has(id)) return null;\n    const rank = depthOf.get(id);\n    if (rank === undefined) return null;\n    const rankMates = layout.nodes\n      .filter((n) => depthOf.get(n.id) === rank)\n      .sort((a, b) => a.x - b.x);\n    const index = rankMates.findIndex((n) => n.id === id);\n    return rankMates[index + step]?.id ?? null;\n  }\n  function predecessorOf(id: string): string | null {\n    return layout.edges.find((e) => e.to === id)?.from ?? null;\n  }\n  function successorOf(id: string): string | null {\n    return layout.edges.find((e) => e.from === id)?.to ?? null;\n  }\n\n  function onKeyDown(event: React.KeyboardEvent, id: string) {\n    if (disabled) return;\n    switch (event.key) {\n      case \"+\":\n      case \"=\":\n        event.preventDefault();\n        camera.zoomIn();\n        return;\n      case \"-\":\n      case \"_\":\n        event.preventDefault();\n        camera.zoomOut();\n        return;\n      case \"0\":\n        event.preventDefault();\n        camera.fitAll();\n        return;\n      case \"Home\":\n        event.preventDefault();\n        camera.flyTo(id);\n        return;\n      /* DX-3401: ranks now run top to bottom, so Up/Down follow the backbone\n         (parent/child) and Left/Right move between siblings — the mirror of\n         the pre-DX-3401 mapping, which matched the old left-to-right ranking. */\n      case \"ArrowUp\": {\n        const target = predecessorOf(id);\n        if (target) {\n          event.preventDefault();\n          focusNode(target);\n        }\n        return;\n      }\n      case \"ArrowDown\": {\n        const target = successorOf(id);\n        if (target) {\n          event.preventDefault();\n          focusNode(target);\n        }\n        return;\n      }\n      case \"ArrowLeft\": {\n        const target = siblingOf(id, -1);\n        if (target) {\n          event.preventDefault();\n          focusNode(target);\n        }\n        return;\n      }\n      case \"ArrowRight\": {\n        const target = siblingOf(id, 1);\n        if (target) {\n          event.preventDefault();\n          focusNode(target);\n        }\n        return;\n      }\n      case \"Enter\":\n      case \" \":\n        event.preventDefault();\n        activate(id);\n        return;\n      default:\n    }\n  }\n\n  const referenceId = hoveredId ?? focusId ?? null;\n  const neighbours = useMemo(\n    () => (referenceId ? neighbourhood(referenceId, allEdges, HOVER_HOPS) : null),\n    [referenceId, allEdges],\n  );\n\n  /* `placed.node` is typed nullable (`PlacedNode` is shared with `NodeCanvas`,\n     where it IS null for a collapsed group/cycle placeholder) but a tree-only\n     layout never produces one — `layoutExplorerTree` feeds `layoutGraph` no\n     groups and a scope that never condenses (see `tree-layout.ts`'s module\n     doc). A null here means that invariant broke, which is worth failing loud\n     over rather than silently drawing a placeholder with no real data. */\n  function nodeOf(placed: PlacedNode<Extra>): CanvasNode<Extra> {\n    if (!placed.node) {\n      throw new Error(`GraphExplorer: placed node \"${placed.id}\" has no backing data (expected a tree leaf)`);\n    }\n    return placed.node;\n  }\n\n  const body = (placed: PlacedNode<Extra>, context: ExplorerNodeRenderContext): React.ReactNode => {\n    const node = nodeOf(placed);\n    if (renderNode) return renderNode(node, context);\n    return <DefaultNodeBody label={node.label} />;\n  };\n\n  return (\n    <div\n      ref={rootRef}\n      data-explorer-viewport\n      className={cn(\n        \"relative min-w-0 overflow-hidden select-none touch-none rounded-xl border border-border bg-canvas-subtle\",\n        disabled ? \"cursor-default\" : camera.panning ? \"cursor-grabbing\" : \"cursor-grab\",\n        className,\n      )}\n      style={{ height }}\n    >\n      {/* DX-5084: the tree is the camera viewport, NOT the outer frame. A `role=\"tree\"`\n         may own only treeitems (axe `aria-required-children`), and the frame also\n         holds the zoom toolbar's buttons and the `role=\"status\"` live region, so\n         putting the role on the frame made every explorer an invalid tree. The\n         viewport holds the nodes and nothing else. */}\n      <div\n        ref={camera.bindViewport}\n        role=\"tree\"\n        aria-label={label}\n        aria-describedby={statusId}\n        data-camera-viewport\n        className=\"absolute inset-0\"\n        style={{ visibility: layout.nodes.length > 0 && layout.width === 0 ? \"hidden\" : \"visible\" }}\n      >\n        <div\n          data-animating={camera.animating || undefined}\n          className={cn(\n            \"absolute top-0 left-0 origin-top-left\",\n            /* `transition-[var(--tx-colors),transform]`, not a bare\n               `transition-transform` — `transition-property` is not\n               additive, so naming only `transform` would silently drop the\n               global colour-fade transition every other element inherits\n               (see `styles/motion.css`'s own note on `--tx-colors`). */\n            camera.animating && \"transition-[var(--tx-colors),transform] duration-(--dur-slowest) ease-(--ease-gentle)\",\n          )}\n          style={{ transform: `translate(${camera.camera.x}px, ${camera.camera.y}px) scale(${camera.camera.scale})` }}\n        >\n          <svg\n            aria-hidden=\"true\"\n            className=\"pointer-events-none absolute overflow-visible text-border-strong\"\n            width={layout.width || 1}\n            height={layout.height || 1}\n          >\n            {layout.edges.map((edge) => (\n              <EdgeLine key={`b:${edge.from}->${edge.to}`} edge={edge} neighbours={neighbours} />\n            ))}\n            {layout.crossLinks.map((edge) => (\n              <EdgeLine key={`x:${edge.from}->${edge.to}`} edge={edge} neighbours={neighbours} dashed />\n            ))}\n          </svg>\n\n          {layout.nodes.map((placed) => {\n            const node = nodeOf(placed);\n            const isFocused = placed.id === focusId;\n            const isVisited = visitedIds.has(placed.id);\n            const isTabStop = placed.id === tabStopId;\n            const distance = neighbours?.get(placed.id) ?? null;\n            const dimmed = neighbours !== null && distance === null;\n\n            return (\n              <div\n                key={placed.id}\n                ref={bindNodeMeasure(placed.id)}\n                data-explorer-node={placed.id}\n                data-visited={isVisited || undefined}\n                role=\"treeitem\"\n                aria-label={node.label}\n                aria-current={isFocused ? \"location\" : undefined}\n                tabIndex={isTabStop ? 0 : -1}\n                onFocus={() => setInternalTabStop(placed.id)}\n                onKeyDown={(event) => onKeyDown(event, placed.id)}\n                onMouseEnter={() => setHoveredId(placed.id)}\n                onMouseLeave={() => setHoveredId((current) => (current === placed.id ? null : current))}\n                className={cn(\n                  \"absolute overflow-visible rounded-lg border bg-surface-raised outline-none\",\n                  \"transition-[var(--tx-colors),box-shadow,opacity] duration-(--dur-fast) ease-snappy\",\n                  \"focus-visible:ring-2 focus-visible:ring-accent-border\",\n                  isFocused ? \"border-accent-border elevate-md ring-2 ring-accent-border/40\" : \"border-border-subtle elevate-sm\",\n                  dimmed && \"opacity-40\",\n                )}\n                style={{ left: placed.x, top: placed.y, width: placed.width, minHeight: placed.height }}\n              >\n                {body(placed, { isTabStop, isFocused, isVisited, distance })}\n              </div>\n            );\n          })}\n        </div>\n      </div>\n\n      {/* DX-3404: the automatic frame-fit clamped to `minReadableScale` and\n          `frameBox` still extends past the viewport on these sides — a\n          subtle fade cueing that the rest is reached by panning, not that\n          the drawing ends here. CSS-only, `aria-hidden` (the \"you are here\"\n          semantics live on the focused node itself, `role=\"treeitem\"`\n          `aria-current`, not on this purely visual cue). */}\n      {(camera.frameOverflow.left || camera.frameOverflow.right || camera.frameOverflow.top || camera.frameOverflow.bottom) && (\n        <div aria-hidden=\"true\" className=\"pointer-events-none absolute inset-0\">\n          {camera.frameOverflow.left && (\n            <div\n              data-frame-edge-cue=\"left\"\n              className=\"absolute inset-y-0 left-0 w-8 bg-gradient-to-r from-canvas-subtle to-transparent\"\n            />\n          )}\n          {camera.frameOverflow.right && (\n            <div\n              data-frame-edge-cue=\"right\"\n              className=\"absolute inset-y-0 right-0 w-8 bg-gradient-to-l from-canvas-subtle to-transparent\"\n            />\n          )}\n          {camera.frameOverflow.top && (\n            <div\n              data-frame-edge-cue=\"top\"\n              className=\"absolute inset-x-0 top-0 h-8 bg-gradient-to-b from-canvas-subtle to-transparent\"\n            />\n          )}\n          {camera.frameOverflow.bottom && (\n            <div\n              data-frame-edge-cue=\"bottom\"\n              className=\"absolute inset-x-0 bottom-0 h-8 bg-gradient-to-t from-canvas-subtle to-transparent\"\n            />\n          )}\n        </div>\n      )}\n\n      {showToolbar && !disabled && (\n        <CameraToolbar\n          onZoomIn={camera.zoomIn}\n          onZoomOut={camera.zoomOut}\n          onFitAll={camera.fitAll}\n          onReset={() => camera.flyTo(focusId ?? tabStopId ?? defaultTabStopId ?? \"\")}\n        />\n      )}\n\n      <p id={statusId} role=\"status\" aria-live=\"polite\" className=\"sr-only\">\n        {strings.showing(layout.nodes.length, fmt(layout.nodes.length), label)}\n      </p>\n    </div>\n  );\n}\n\nfunction EdgeLine({\n  edge,\n  neighbours,\n  dashed,\n}: {\n  edge: CanvasPlacedEdge;\n  neighbours: Map<string, number> | null;\n  dashed?: boolean;\n}) {\n  const highlighted = neighbours !== null && neighbours.has(edge.from) && neighbours.has(edge.to);\n  return (\n    <path\n      d={edgePath(edge)}\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth={neighbours ? (highlighted ? 2 : 1) : dashed ? 1 : 1.5}\n      strokeDasharray={dashed ? \"4 4\" : undefined}\n      opacity={dashed ? (neighbours ? (highlighted ? 0.8 : 0.25) : 0.5) : neighbours ? (highlighted ? 1 : 0.35) : 1}\n    />\n  );\n}\n\n/**\n * The on-screen camera toolbar — zoom in, zoom out, fit all, reset to focus.\n * Real buttons, so every one is a keyboard equivalent for free; `+`/`-`/`0`/\n * `Home` on the canvas itself are the direct shortcuts (`onKeyDown` above).\n * The caller (`GraphExplorerSurface`) only ever mounts this when the surface\n * is NOT disabled — a disabled surface hides the toolbar entirely rather\n * than showing greyed-out buttons for a camera that already ignores input.\n */\nfunction CameraToolbar({\n  onZoomIn,\n  onZoomOut,\n  onFitAll,\n  onReset,\n}: {\n  onZoomIn: () => void;\n  onZoomOut: () => void;\n  onFitAll: () => void;\n  onReset: () => void;\n}) {\n  const strings = useUiStrings().graphExplorer;\n  return (\n    <div className=\"absolute right-2 bottom-2 flex items-center gap-1 rounded-lg border border-border bg-surface/95 p-1 shadow-sm backdrop-blur-sm\">\n      <IconButton icon={<Icon name=\"minus\" size=\"sm\" />} label={strings.zoomOut} size=\"sm\" onClick={onZoomOut} />\n      <IconButton icon={<Icon name=\"plus\" size=\"sm\" />} label={strings.zoomIn} size=\"sm\" onClick={onZoomIn} />\n      <IconButton icon={<Icon name=\"maximize-2\" size=\"sm\" />} label={strings.fitAll} size=\"sm\" onClick={onFitAll} />\n      <IconButton icon={<Icon name=\"crosshair\" size=\"sm\" />} label={strings.resetToFocus} size=\"sm\" onClick={onReset} />\n    </div>\n  );\n}\n\nexport function GraphExplorer<Extra = unknown>({\n  tree,\n  crossLinks = [],\n  label,\n  renderNode,\n  variant = \"explorer\",\n  focusId: controlledFocusId,\n  defaultFocusId = null,\n  onFocusIdChange,\n  visitedIds,\n  onNodeClick,\n  onExpand,\n  nodeWidth,\n  nodeHeight,\n  height = DEFAULT_HEIGHT,\n  minReadableScale,\n  disabled,\n  className,\n}: GraphExplorerProps<Extra>) {\n  const strings = useUiStrings().graphExplorer;\n  const [uncontrolledFocusId, setUncontrolledFocusId] = useState<string | null>(defaultFocusId);\n  const focusId = controlledFocusId !== undefined ? controlledFocusId : uncontrolledFocusId;\n  const requestFocus = useCallback(\n    (id: string) => {\n      if (controlledFocusId === undefined) setUncontrolledFocusId(id);\n      onFocusIdChange?.(id);\n    },\n    [controlledFocusId, onFocusIdChange],\n  );\n\n  const visited = useMemo(() => toVisitedSet(visitedIds), [visitedIds]);\n\n  /* A different tree resets the camera to fit it — same \"new data resets the\n     view\" rule `NodeCanvas` applies to its own scope, keyed on the arrays'\n     identity for the same reason (see `NodeCanvas.tsx`'s own comment on this). */\n  const resetKey = tree.nodes;\n\n  const [expanded, setExpanded] = useState(false);\n  const expand = useCallback(() => {\n    if (onExpand) onExpand();\n    else setExpanded(true);\n  }, [onExpand]);\n\n  if (variant === \"explorer\") {\n    return (\n      <div className={cn(\"relative\", className)}>\n        <GraphExplorerSurface\n          tree={tree}\n          crossLinks={crossLinks}\n          label={label}\n          renderNode={renderNode}\n          focusId={focusId}\n          onFocusRequest={requestFocus}\n          visitedIds={visited}\n          onNodeClick={onNodeClick}\n          nodeWidth={nodeWidth}\n          nodeHeight={nodeHeight}\n          height={height}\n          minReadableScale={minReadableScale}\n          disabled={disabled}\n          resetKey={resetKey}\n          showToolbar\n        />\n      </div>\n    );\n  }\n\n  /* --- minimap: a compact strip around `focusId`, with an expand affordance ---\n\n     `neighbourhoodTree` returns `null` whenever there is no `focusId` yet (the\n     ordinary uncontrolled-mount case — `focusId` defaults to `null`) or the\n     given `focusId` names a node not present in `tree` (stale id, data still\n     loading). The fallback below must still hand `layoutExplorerTree` a\n     WELL-FORMED tree — in particular a node whose `parentId` really is `null`\n     — because `tree.nodes[0]` is not guaranteed to BE a root: for a tree\n     whose nodes are not root-first, seeding a single-node fallback with that\n     node's own (now-dangling, since nothing else is kept) `parentId` throws\n     inside `layoutExplorerTree` (`\"names parent ... which is not in this\n     tree\"`) instead of rendering a placeholder. Preferring an actual root\n     when one exists, and force-clearing `parentId` either way, keeps this\n     fallback exactly as inert as `neighbourhoodTree`'s own re-rooting already\n     guarantees for every OTHER path through this component. */\n  /* A plain expression, NOT a `useMemo` — this sits after the `explorer`\n     branch's early `return` above, and a hook here would be called\n     conditionally on `variant`, breaking the Rules of Hooks the moment a\n     consumer's `variant` prop ever changed between renders of the same\n     instance. `GraphExplorerSurface` below already memoizes the expensive\n     step (`layoutExplorerTree`) keyed off its own `tree` prop identity, so\n     recomputing this cheap lookup on every render costs nothing real. */\n  const neighbourhoodFound = focusId ? neighbourhoodTree(tree, focusId) : null;\n  const minimapFallbackRoot = tree.nodes.find((node) => node.parentId === null) ?? tree.nodes[0];\n  const minimapTree: ExplorerTree<Extra> =\n    neighbourhoodFound ?? { nodes: minimapFallbackRoot ? [{ ...minimapFallbackRoot, parentId: null }] : [] };\n\n  return (\n    <div className={cn(\"relative\", className)}>\n      <GraphExplorerSurface\n        tree={minimapTree}\n        crossLinks={crossLinks}\n        label={strings.minimap(label)}\n        focusId={focusId}\n        onFocusRequest={requestFocus}\n        visitedIds={visited}\n        onNodeClick={onNodeClick}\n        renderNode={renderNode}\n        nodeWidth={nodeWidth}\n        nodeHeight={nodeHeight}\n        height={MINIMAP_HEIGHT}\n        minReadableScale={minReadableScale}\n        disabled={disabled}\n        resetKey={focusId}\n        framePadding={MINIMAP_FRAME_PADDING}\n      />\n      <div className=\"absolute top-2 right-2\">\n        <IconButton icon={<Icon name=\"maximize-2\" size=\"sm\" />} label={strings.expand} size=\"sm\" onClick={expand} />\n      </div>\n\n      {!onExpand && (\n        <Dialog open={expanded} onOpenChange={setExpanded} title={label} size=\"xl\">\n          <GraphExplorer\n            tree={tree}\n            crossLinks={crossLinks}\n            label={label}\n            renderNode={renderNode}\n            variant=\"explorer\"\n            focusId={focusId}\n            onFocusIdChange={requestFocus}\n            visitedIds={visited}\n            onNodeClick={onNodeClick}\n            nodeWidth={nodeWidth}\n            nodeHeight={nodeHeight}\n            height=\"70vh\"\n            minReadableScale={minReadableScale}\n          />\n        </Dialog>\n      )}\n    </div>\n  );\n}\n"],"names":["DEFAULT_HEIGHT","MINIMAP_HEIGHT","MINIMAP_FRAME_PADDING","HOVER_HOPS","MIN_READABLE_TITLE_PX","DEFAULT_NODE_TITLE_PX","MIN_READABLE_TITLE_SCALE","toVisitedSet","visitedIds","DefaultNodeBody","label","jsx","GraphExplorerSurface","tree","crossLinks","renderNode","focusId","onFocusRequest","onNodeClick","nodeWidth","nodeHeight","height","disabled","resetKey","framePadding","minReadableScale","showToolbar","className","strings","useUiStrings","fmt","useNumberFormat","statusId","useId","hoveredId","setHoveredId","useState","measuredHeights","setMeasuredHeights","nodeObservers","useRef","nodeMeasureBindings","bindNodeMeasure","useCallback","id","cached","el","existing","observer","entries","entry","measured","current","useEffect","observers","sizedTree","useMemo","node","base","LAYOUT_DEFAULTS","layout","layoutExplorerTree","byId","n","boxOf","depthOf","parentOf","cache","depth","parentId","result","frameBox","frameBoxFor","focusBox","camera","useCamera","target","internalTabStop","setInternalTabStop","defaultTabStopId","roots","a","b","tabStopId","activate","placed","rootRef","focusNode","allEdges","siblingOf","step","rank","rankMates","index","predecessorOf","e","successorOf","onKeyDown","event","referenceId","neighbours","neighbourhood","nodeOf","body","context","jsxs","cn","edge","EdgeLine","isFocused","isVisited","isTabStop","distance","dimmed","CameraToolbar","dashed","highlighted","edgePath","onZoomIn","onZoomOut","onFitAll","onReset","IconButton","Icon","GraphExplorer","variant","controlledFocusId","defaultFocusId","onFocusIdChange","onExpand","uncontrolledFocusId","setUncontrolledFocusId","requestFocus","visited","expanded","setExpanded","expand","neighbourhoodFound","neighbourhoodTree","minimapFallbackRoot","minimapTree","Dialog"],"mappings":"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"}

package/dist/components/graph-explorer/camera-math.js

@@ -0,0 +1,102 @@
+const f = {
+  /* Below this a graph of any real size is an unreadable smear of lines.
+     Above the max, a single node fills more of the viewport than a "you are
+     here" highlight needs. Both are soft limits a caller can widen. */
+  minScale: 0.15,
+  maxScale: 3,
+  /* `fitAll` never zooms IN past 100% just because the graph is small — a
+     three-node tree filling the screen at 240% reads as broken, not helpful. */
+  fitMaxScale: 1,
+  /* Clear space around the drawing that `fitAll` leaves on every side, so the
+     outermost nodes are not pressed against the viewport's edge. */
+  fitPadding: 64
+};
+function y(t, n = {}) {
+  const i = n.minScale ?? f.minScale, h = n.maxScale ?? f.maxScale;
+  return Math.min(Math.max(t, i), h);
+}
+function r(t, n) {
+  return {
+    x: (n.x - t.x) / t.scale,
+    y: (n.y - t.y) / t.scale
+  };
+}
+function o(t, n) {
+  return {
+    x: t.x + n.x * t.scale,
+    y: t.y + n.y * t.scale
+  };
+}
+function M(t, n, i, h = {}) {
+  const c = y(t.scale * i, h), e = r(t, n);
+  return {
+    scale: c,
+    x: n.x - e.x * c,
+    y: n.y - e.y * c
+  };
+}
+function s(t, n, i) {
+  const h = "width" in t ? { x: t.x + t.width / 2, y: t.y + t.height / 2 } : t;
+  return {
+    scale: i,
+    x: n.width / 2 - h.x * i,
+    y: n.height / 2 - h.y * i
+  };
+}
+function w(t) {
+  if (t.length === 0) return null;
+  let n = 1 / 0, i = 1 / 0, h = -1 / 0, c = -1 / 0;
+  for (const e of t)
+    n = Math.min(n, e.x), i = Math.min(i, e.y), h = Math.max(h, e.x + e.width), c = Math.max(c, e.y + e.height);
+  return { x: n, y: i, width: h - n, height: c - i };
+}
+function g(t, n, i = {}) {
+  const h = i.padding ?? f.fitPadding, c = i.maxScale ?? f.fitMaxScale, e = i.minScale ?? f.minScale, a = n.width - h * 2, l = n.height - h * 2;
+  if (t.width <= 0 || t.height <= 0 || a <= 0 || l <= 0)
+    return s(t, n, c);
+  const d = y(Math.min(a / t.width, l / t.height), {
+    minScale: e,
+    maxScale: c
+  });
+  return s(t, n, d);
+}
+function O(t, n, i = {}) {
+  if (t.width <= 0 || t.height <= 0 || n.width <= 0)
+    return { scale: y(1, i), x: 0, y: 0 };
+  const h = y(n.width / t.width, i);
+  return { scale: h, x: (n.width - t.width * h) / 2, y: 0 };
+}
+const x = 0.5;
+function u(t, n, i) {
+  const h = o(i, { x: t.x, y: t.y }), c = o(i, { x: t.x + t.width, y: t.y + t.height });
+  return {
+    left: h.x < -x,
+    right: c.x > n.width + x,
+    top: h.y < -x,
+    bottom: c.y > n.height + x
+  };
+}
+function I(t, n, i = {}) {
+  const { minReadableScale: h, focusBox: c = t, ...e } = i, a = g(t, n, e);
+  if (h === void 0 || a.scale >= h)
+    return { camera: a, overflow: u(t, n, a) };
+  const l = Math.max(h, f.minScale), d = c.x + c.width / 2, S = t.y + t.height / 2, m = {
+    scale: l,
+    x: n.width / 2 - d * l,
+    y: n.height / 2 - S * l
+  };
+  return { camera: m, overflow: u(t, n, m) };
+}
+export {
+  f as CAMERA_DEFAULTS,
+  s as centerOn,
+  y as clampScale,
+  g as fitBox,
+  I as fitBoxWithFloor,
+  O as fitWidth,
+  r as toContentPoint,
+  o as toScreenPoint,
+  w as unionBox,
+  M as zoomAtPoint
+};
+//# sourceMappingURL=camera-math.js.map