@kanzo-tech/graph 0.1.0 → 0.2.0

package/dist/use-graph-overlays.d.ts

@@ -1,27 +1,5 @@
-import { Graph } from '@cosmos.gl/graph';
-import { Resident, VertexId } from './resident';
-/**
- * Everything that floats over the canvas and has to keep up with it: the hub labels, the hover
- * card, and the grid's lock to the graph's own space.
- *
- * One rAF for all three, because they answer the same question — *where is the camera now* — and
- * three independent loops would read the same transform three times a frame. React never runs: the
- * overlays move by imperative style writes, and a re-render per frame would be a re-render per
- * frame.
- *
- * **An overlay is attached to a vertex, not to a slot.** Everything here outlives an answer — a
- * label element is kept across renders, a hover survives a query — so the tracked set is identities
- * and the buffer index is resolved through `Resident` at the moment of painting. Held as indices, a
- * label would keep its position and change which node it was naming the first time the resident set
- * moved, with the text and the dot disagreeing and nothing raised.
- *
- * This lived inside the canvas component among seven other concerns, and that is not a filing
- * detail: the scheduler below once kept a cancelled `requestAnimationFrame` handle in `frame`,
- * which silently disabled every overlay for the life of the page. It took a long time to find in a
- * 700-line component and would have been obvious here.
- */
-/** Dot spacing at zoom 1. The painter keeps the on-screen spacing inside [GRID, 2·GRID). */
-export declare const GRID = 22;
+import { VertexId } from './resident';
+import { GraphApi } from './use-graph';
 export interface GraphOverlays {
     /** The box the overlays are positioned within — the canvas' own bounds. */
     hostRef: React.RefObject<HTMLDivElement | null>;
@@ -44,10 +22,23 @@ export interface GraphOverlays {
     /** Ask for a repaint. Coalesced — many calls in a frame cost one. */
     schedule: () => void;
 }
-export interface GraphOverlayOptions {
-    getGraph: () => Graph | null;
-    /** Who is drawn right now, for turning a tracked vertex into the buffer index cosmos.gl wants. */
-    getResident: () => Resident;
-}
-export declare function useGraphOverlays(options: GraphOverlayOptions): GraphOverlays;
+/**
+ * **The api, not two getters off it.**
+ *
+ * This took `{ getGraph, getResident }` — an options object whose two members were copied out of
+ * `GraphApi` — and that shape is the reason `getGraph` and `getResident` are on the api at all
+ * beside the `slice` and `resident` values it already publishes. A host composing the two wrote the
+ * hook's argument by hand out of the object it had just been given, which is a re-statement rather
+ * than a decision: there is no useful call where the two come from different graphs.
+ *
+ * `GraphOverlayOptions` went with it. It named a shape a caller had to assemble, and what a caller
+ * has is the api.
+ *
+ * **The ordering follows, and it is the honest one.** This has to be called *after* `useGraph`,
+ * because it now takes what `useGraph` returns. The other half of the cycle — a look change owes the
+ * overlays a repaint, and a look change does not tick — stays where it was: `useGraph` takes a
+ * `schedule` callback, and a host bridges the two with one ref. One indirection, in the direction
+ * that genuinely needs one, instead of two accessors threaded around an object the host is holding.
+ */
+export declare function useGraphOverlays(api: GraphApi): GraphOverlays;
 //# sourceMappingURL=use-graph-overlays.d.ts.map

package/dist/use-graph-overlays.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"use-graph-overlays.d.ts","sourceRoot":"","sources":["../src/use-graph-overlays.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAC9C,OAAO,KAAK,EAAE,QAAQ,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAGrD;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,4FAA4F;AAC5F,eAAO,MAAM,IAAI,KAAK,CAAC;AAcvB,MAAM,WAAW,aAAa;IAC5B,2EAA2E;IAC3E,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;IAChD,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;IAChD,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;IAChD,mDAAmD;IACnD,QAAQ,EAAE,CAAC,MAAM,EAAE,QAAQ,KAAK,CAAC,OAAO,EAAE,WAAW,GAAG,IAAI,KAAK,IAAI,CAAC;IACtE,gFAAgF;IAChF,aAAa,EAAE,CAAC,QAAQ,EAAE,QAAQ,EAAE,KAAK,IAAI,CAAC;IAC9C,UAAU,EAAE,CAAC,MAAM,EAAE,QAAQ,GAAG,IAAI,KAAK,IAAI,CAAC;IAC9C;;;;;;;OAOG;IACH,KAAK,EAAE,MAAM,IAAI,CAAC;IAClB,qEAAqE;IACrE,QAAQ,EAAE,MAAM,IAAI,CAAC;CACtB;AAED,MAAM,WAAW,mBAAmB;IAClC,QAAQ,EAAE,MAAM,KAAK,GAAG,IAAI,CAAC;IAC7B,kGAAkG;IAClG,WAAW,EAAE,MAAM,QAAQ,CAAC;CAC7B;AAED,wBAAgB,gBAAgB,CAAC,OAAO,EAAE,mBAAmB,GAAG,aAAa,CA2M5E"}
+{"version":3,"file":"use-graph-overlays.d.ts","sourceRoot":"","sources":["../src/use-graph-overlays.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAC3C,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AA8C5C,MAAM,WAAW,aAAa;IAC5B,2EAA2E;IAC3E,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;IAChD,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;IAChD,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;IAChD,mDAAmD;IACnD,QAAQ,EAAE,CAAC,MAAM,EAAE,QAAQ,KAAK,CAAC,OAAO,EAAE,WAAW,GAAG,IAAI,KAAK,IAAI,CAAC;IACtE,gFAAgF;IAChF,aAAa,EAAE,CAAC,QAAQ,EAAE,QAAQ,EAAE,KAAK,IAAI,CAAC;IAC9C,UAAU,EAAE,CAAC,MAAM,EAAE,QAAQ,GAAG,IAAI,KAAK,IAAI,CAAC;IAC9C;;;;;;;OAOG;IACH,KAAK,EAAE,MAAM,IAAI,CAAC;IAClB,qEAAqE;IACrE,QAAQ,EAAE,MAAM,IAAI,CAAC;CACtB;AAED;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAgB,gBAAgB,CAAC,GAAG,EAAE,QAAQ,GAAG,aAAa,CA+N7D"}

package/dist/use-graph-overlays.js

@@ -1,14 +1,14 @@
 "use client";
-import { useRef as r, useCallback as x, useEffect as H } from "react";
-import { whenReady as N } from "./when-ready.js";
-const Q = 22, I = 14, w = 8, U = 10, V = 12, M = 3, C = (P, l, f) => Math.min(Math.max(P, l), Math.max(l, f));
+import { useRef as r, useCallback as x, useEffect as S } from "react";
+import { whenReady as Q } from "./when-ready.js";
+const T = 22, C = 14, w = 8, U = 10, V = 12, M = 3, F = (P, l, f) => Math.min(Math.max(P, l), Math.max(l, f));
 function tt(P) {
-  const { getGraph: l, getResident: f } = P, T = r(null), z = r(null), O = r(null), A = r(/* @__PURE__ */ new Map()), L = r(/* @__PURE__ */ new Map()), m = r([]), E = r(null), $ = r(null), S = r(null), p = r(0), F = x(() => {
+  const { getGraph: l, getResident: f } = P, O = r(null), $ = r(null), _ = r(null), A = r(/* @__PURE__ */ new Map()), L = r(/* @__PURE__ */ new Map()), m = r([]), k = r(null), E = r(null), B = r(null), p = r(0), W = x(() => {
     const t = l();
     if (!t) return;
-    const o = E.current, i = o === null || m.current.includes(o) ? m.current : [...m.current, o];
-    N(t, (u) => u.trackPointPositionsByIndices(f().indicesOf(i)));
-  }, [l, f]), _ = x(() => {
+    const o = k.current, i = o === null || m.current.includes(o) ? m.current : [...m.current, o];
+    Q(t, (u) => u.trackPointPositionsByIndices(f().indicesOf(i)));
+  }, [l, f]), D = x(() => {
     const t = l();
     if (!t) return;
     const o = f();
@@ -16,7 +16,7 @@ function tt(P) {
     const u = (n) => {
       const e = o.indexOf(n);
       return e === void 0 ? null : (i ?? (i = t.getTrackedPointPositionsMap()), i.get(e) ?? null);
-    }, B = [], g = S.current;
+    }, H = [], g = B.current;
     for (const n of m.current) {
       const e = A.current.get(n);
       if (!e) continue;
@@ -25,72 +25,74 @@ function tt(P) {
         e.style.opacity = "0";
         continue;
       }
-      const [c, h] = t.spaceToScreenPosition(a);
+      const [c, d] = t.spaceToScreenPosition(a);
       let s = L.current.get(n);
       s === void 0 && (s = e.offsetWidth, L.current.set(n, s));
-      const d = c - s / 2, G = d + s, b = h - U, R = b - V, J = g !== null && (G < 0 || b < 0 || d > g.width || R > g.height), K = B.some((v) => d < v[2] && G > v[0] && R < v[3] && b > v[1]);
-      if (J || K) {
+      const h = c - s / 2, z = h + s, b = d - U, R = b - V, K = g !== null && (z < 0 || b < 0 || h > g.width || R > g.height), N = H.some((v) => h < v[2] && z > v[0] && R < v[3] && b > v[1]);
+      if (K || N) {
         e.style.opacity = "0";
         continue;
       }
-      B.push([d - M, R - M, G + M, b + M]), e.style.transform = `translate(${Math.round(d)}px, ${Math.round(R)}px)`, e.style.opacity = "1";
+      H.push([h - M, R - M, z + M, b + M]), e.style.transform = `translate(${Math.round(h)}px, ${Math.round(R)}px)`, e.style.opacity = "1";
     }
-    const k = z.current;
-    if (k) {
+    const G = $.current;
+    if (G) {
       const n = t.getZoomLevel();
       if (n > 0) {
-        const e = Q * n / 2 ** Math.floor(Math.log2(n)), [a, c] = t.spaceToScreenPosition([0, 0]), h = (s) => (s % e + e) % e;
-        k.style.backgroundSize = `${e}px ${e}px`, k.style.backgroundPosition = `${h(a)}px ${h(c)}px`;
+        const e = T * n / 2 ** Math.floor(Math.log2(n)), [a, c] = t.spaceToScreenPosition([0, 0]), d = (s) => (s % e + e) % e;
+        G.style.backgroundSize = `${e}px ${e}px`, G.style.backgroundPosition = `${d(a)}px ${d(c)}px`;
       }
     }
-    const y = O.current, D = E.current;
-    if (y && D !== null && g) {
-      const n = u(D);
+    const y = _.current, I = k.current;
+    if (y && I !== null && g) {
+      const n = u(I);
       if (n) {
         const [e, a] = t.spaceToScreenPosition(n);
-        let c = $.current;
-        c || (c = { width: y.offsetWidth, height: y.offsetHeight }, $.current = c);
-        const h = a - I - c.height, s = a + I, d = h >= w ? h : s;
+        let c = E.current;
+        c || (c = { width: y.offsetWidth, height: y.offsetHeight }, E.current = c);
+        const d = a - C - c.height, s = a + C, h = d >= w ? d : s;
         y.style.transform = `translate(${Math.round(
-          C(e - c.width / 2, w, g.width - c.width - w)
-        )}px, ${Math.round(C(d, w, g.height - c.height - w))}px)`, y.style.opacity = "1";
+          F(e - c.width / 2, w, g.width - c.width - w)
+        )}px, ${Math.round(F(h, w, g.height - c.height - w))}px)`, y.style.opacity = "1";
       }
     }
   }, [l, f]);
-  H(() => {
-    const t = T.current;
+  S(() => {
+    const t = O.current;
     if (!t) return;
     const o = new ResizeObserver(([i]) => {
       const u = i == null ? void 0 : i.contentRect;
-      u && (S.current = { width: u.width, height: u.height });
+      u && (B.current = { width: u.width, height: u.height });
     });
     return o.observe(t), () => o.disconnect();
+  }, []), S(() => {
+    const t = $.current;
+    t && (t.style.backgroundSize = `${T}px ${T}px`);
   }, []);
-  const W = x(() => {
+  const q = x(() => {
     p.current || (p.current = requestAnimationFrame(() => {
-      p.current = 0, _();
+      p.current = 0, D();
     }));
-  }, [_]);
-  H(
+  }, [D]);
+  S(
     () => () => {
       p.current && cancelAnimationFrame(p.current), p.current = 0;
     },
     []
   );
-  const q = x(
+  const Z = x(
     (t) => (o) => {
       o ? A.current.set(t, o) : A.current.delete(t);
     },
     []
-  ), Z = x((t) => {
+  ), j = x((t) => {
     m.current = t, L.current.clear();
-  }, []), j = x((t) => {
-    E.current = t, $.current = null;
+  }, []), J = x((t) => {
+    k.current = t, E.current = null;
   }, []);
-  return { hostRef: T, gridRef: z, cardRef: O, labelRef: q, setLabelOrder: Z, setHovered: j, track: F, schedule: W };
+  return { hostRef: O, gridRef: $, cardRef: _, labelRef: Z, setLabelOrder: j, setHovered: J, track: W, schedule: q };
 }
 export {
-  Q as GRID,
   tt as useGraphOverlays
 };
 //# sourceMappingURL=use-graph-overlays.js.map

package/dist/use-graph-overlays.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-graph-overlays.js","sources":["../src/use-graph-overlays.ts"],"sourcesContent":["\"use client\";\n\nimport { useCallback, useEffect, useRef } from \"react\";\nimport type { Graph } from \"@cosmos.gl/graph\";\nimport type { Resident, VertexId } from \"./resident\";\nimport { whenReady } from \"./when-ready\";\n\n/**\n * Everything that floats over the canvas and has to keep up with it: the hub labels, the hover\n * card, and the grid's lock to the graph's own space.\n *\n * One rAF for all three, because they answer the same question — *where is the camera now* — and\n * three independent loops would read the same transform three times a frame. React never runs: the\n * overlays move by imperative style writes, and a re-render per frame would be a re-render per\n * frame.\n *\n * **An overlay is attached to a vertex, not to a slot.** Everything here outlives an answer — a\n * label element is kept across renders, a hover survives a query — so the tracked set is identities\n * and the buffer index is resolved through `Resident` at the moment of painting. Held as indices, a\n * label would keep its position and change which node it was naming the first time the resident set\n * moved, with the text and the dot disagreeing and nothing raised.\n *\n * This lived inside the canvas component among seven other concerns, and that is not a filing\n * detail: the scheduler below once kept a cancelled `requestAnimationFrame` handle in `frame`,\n * which silently disabled every overlay for the life of the page. It took a long time to find in a\n * 700-line component and would have been obvious here.\n */\n\n/** Dot spacing at zoom 1. The painter keeps the on-screen spacing inside [GRID, 2·GRID). */\nexport const GRID = 22;\n\n/** How far the hover card clears its node, and the margin it keeps from the canvas edge. */\nconst CARD_GAP = 14;\nconst CARD_EDGE = 8;\n\n/** How far a label floats above its node, how tall its box is, and the air it demands around it. */\nconst LABEL_LIFT = 10;\nconst LABEL_HEIGHT = 12;\nconst LABEL_GAP = 3;\n\nconst clamp = (value: number, low: number, high: number) =>\n  Math.min(Math.max(value, low), Math.max(low, high));\n\nexport interface GraphOverlays {\n  /** The box the overlays are positioned within — the canvas' own bounds. */\n  hostRef: React.RefObject<HTMLDivElement | null>;\n  gridRef: React.RefObject<HTMLDivElement | null>;\n  cardRef: React.RefObject<HTMLDivElement | null>;\n  /** A `ref` callback for a given vertex's label. */\n  labelRef: (vertex: VertexId) => (element: HTMLElement | null) => void;\n  /** The labelled vertices, in the order the declutter pass should place them. */\n  setLabelOrder: (vertices: VertexId[]) => void;\n  setHovered: (vertex: VertexId | null) => void;\n  /**\n   * Re-register the tracked points with cosmos.gl.\n   *\n   * Call it after the graph exists and whenever the set of overlaid nodes changes. It has to be\n   * driven from outside because effects run in declaration order, so this hook's own effects cannot\n   * see a graph that a later hook is about to construct — and that construction is exactly what\n   * clears the registration.\n   */\n  track: () => void;\n  /** Ask for a repaint. Coalesced — many calls in a frame cost one. */\n  schedule: () => void;\n}\n\nexport interface GraphOverlayOptions {\n  getGraph: () => Graph | null;\n  /** Who is drawn right now, for turning a tracked vertex into the buffer index cosmos.gl wants. */\n  getResident: () => Resident;\n}\n\nexport function useGraphOverlays(options: GraphOverlayOptions): GraphOverlays {\n  const { getGraph, getResident } = options;\n  const hostRef = useRef<HTMLDivElement>(null);\n  const gridRef = useRef<HTMLDivElement>(null);\n  const cardRef = useRef<HTMLDivElement>(null);\n  const labelEls = useRef(new Map<VertexId, HTMLElement>());\n  /** Label widths, measured once each — reading `offsetWidth` every frame would force layout. */\n  const widths = useRef(new Map<VertexId, number>());\n  const order = useRef<VertexId[]>([]);\n  const hoveredRef = useRef<VertexId | null>(null);\n  /** The card's box, measured once per hover, for the same reason. */\n  const cardSize = useRef<{ width: number; height: number } | null>(null);\n  /** The canvas' own box, kept by a `ResizeObserver` — see the effect below. */\n  const box = useRef<{ width: number; height: number } | null>(null);\n  const frame = useRef(0);\n\n  /**\n   * Tell cosmos.gl which points the overlays are watching: the labelled ones, plus the hovered one.\n   *\n   * Registration is *not* self-maintaining. `Points.updatePositions()` ends in an argument-less\n   * `trackPointsByIndices()` that clears it, and that runs whenever `isPointPositionsUpdateNeeded`\n   * is set — which only `setPointPositions` does. So the registration survives every look change and\n   * every slider, and is lost exactly once per graph: at construction, on the `render()` that\n   * follows `setPointPositions`. Hence a caller-driven re-register rather than a one-shot.\n   */\n  const track = useCallback(() => {\n    const graph = getGraph();\n    if (!graph) return;\n    const hovered = hoveredRef.current;\n    const watched =\n      hovered === null || order.current.includes(hovered)\n        ? order.current\n        : [...order.current, hovered];\n    // Registration is a device call like any other, and this one is *only* reached before the\n    // device in the case that matters: a host registers its labels the moment the first slice\n    // lands, which is the same commit the graph is still being built in. Dropped there, the\n    // tracked map stays empty and every overlay sits at `opacity: 0` for ever.\n    whenReady(graph, (ready) => ready.trackPointPositionsByIndices(getResident().indicesOf(watched)));\n  }, [getGraph, getResident]);\n\n  const paint = useCallback(() => {\n    const graph = getGraph();\n    if (!graph) return;\n    const resident = getResident();\n    /**\n     * Positions come from the tracking API, not from `getPointPositions()`.\n     *\n     * The difference is what gets read back per frame. `getPointPositions()` is a synchronous\n     * `readPixels` of the *whole* position framebuffer — 10,000 bytes at this corpus size, plus an\n     * O(n) array build — on every animation frame the simulation runs. Tracking reads a\n     * `ceil(√k)²` texture for the k points that actually carry an overlay: 576 bytes for Atlas'\n     * 26 labels and a hovered node. It also caches while the simulation is stopped, so a settled\n     * graph costs no readback at all until something moves.\n     */\n    // Read lazily: with labels off and nothing hovered, the only overlay left is the grid, which\n    // needs the transform and not the points.\n    let positions: ReadonlyMap<number, [number, number]> | null = null;\n    /**\n     * Where a vertex is on screen, or `null` when it is not drawn at all.\n     *\n     * Two ways to be absent and they are one answer here: not resident — the query moved on and this\n     * vertex is not in the current buffers — or resident and not yet tracked. Both mean *do not draw\n     * an overlay for it*, and the alternative to asking is drawing it at whatever the stale index now\n     * holds, which is a label on the wrong node.\n     */\n    const at = (vertex: VertexId): [number, number] | null => {\n      const index = resident.indexOf(vertex);\n      if (index === undefined) return null;\n      positions ??= graph.getTrackedPointPositionsMap();\n      return positions.get(index) ?? null;\n    };\n\n    // Placed boxes, in importance order. A label that would land on one already down is dropped\n    // rather than drawn over it — an unreadable pile of overlapping names is worse than a sparser\n    // set of legible ones.\n    const placed: [number, number, number, number][] = [];\n    const bounds = box.current;\n    for (const vertex of order.current) {\n      const element = labelEls.current.get(vertex);\n      if (!element) continue;\n      const point = at(vertex);\n      if (!point) {\n        element.style.opacity = \"0\";\n        continue;\n      }\n      const [x, y] = graph.spaceToScreenPosition(point);\n      let width = widths.current.get(vertex);\n      if (width === undefined) {\n        width = element.offsetWidth;\n        widths.current.set(vertex, width);\n      }\n      const x1 = x - width / 2;\n      const x2 = x1 + width;\n      const y2 = y - LABEL_LIFT;\n      const y1 = y2 - LABEL_HEIGHT;\n      const offscreen =\n        bounds !== null && (x2 < 0 || y2 < 0 || x1 > bounds.width || y1 > bounds.height);\n      const collides = placed.some((r) => x1 < r[2] && x2 > r[0] && y1 < r[3] && y2 > r[1]);\n      if (offscreen || collides) {\n        element.style.opacity = \"0\";\n        continue;\n      }\n      placed.push([x1 - LABEL_GAP, y1 - LABEL_GAP, x2 + LABEL_GAP, y2 + LABEL_GAP]);\n      // Positioned at the box that was just tested, in pixels. The previous version measured a\n      // rectangle here and then drew the label somewhere else — `translate(-50%, -160%)` offsets by\n      // percentages of the element's own size, so the collision box sat about nine pixels below the\n      // text it was meant to protect and neighbouring labels overlapped anyway.\n      element.style.transform = `translate(${Math.round(x1)}px, ${Math.round(y1)}px)`;\n      element.style.opacity = \"1\";\n    }\n    // The grid belongs to the graph's space, not to the viewport: it slides with a pan and\n    // subdivides on zoom, so the spacing on screen never leaves [GRID, 2·GRID). Without that a\n    // fixed grid reads as wallpaper and the canvas stops feeling like somewhere you can move.\n    const grid = gridRef.current;\n    if (grid) {\n      const k = graph.getZoomLevel();\n      if (k > 0) {\n        const step = (GRID * k) / 2 ** Math.floor(Math.log2(k));\n        const [ox, oy] = graph.spaceToScreenPosition([0, 0]);\n        const wrap = (v: number) => ((v % step) + step) % step;\n        grid.style.backgroundSize = `${step}px ${step}px`;\n        grid.style.backgroundPosition = `${wrap(ox)}px ${wrap(oy)}px`;\n      }\n    }\n\n    // The card sits above the node, flips below when the top runs out, and is held inside the\n    // canvas on both axes. It used to be centred with percentage transforms, which cannot know\n    // about an edge — and since this layer clips, a node near a border showed half a tooltip.\n    const card = cardRef.current;\n    const hovered = hoveredRef.current;\n    if (card && hovered !== null && bounds) {\n      const point = at(hovered);\n      if (point) {\n        const [x, y] = graph.spaceToScreenPosition(point);\n        let size = cardSize.current;\n        if (!size) {\n          size = { width: card.offsetWidth, height: card.offsetHeight };\n          cardSize.current = size;\n        }\n        const above = y - CARD_GAP - size.height;\n        const below = y + CARD_GAP;\n        const top = above >= CARD_EDGE ? above : below;\n        card.style.transform = `translate(${Math.round(\n          clamp(x - size.width / 2, CARD_EDGE, bounds.width - size.width - CARD_EDGE),\n        )}px, ${Math.round(clamp(top, CARD_EDGE, bounds.height - size.height - CARD_EDGE))}px)`;\n        card.style.opacity = \"1\";\n      }\n    }\n  }, [getGraph, getResident]);\n\n  // The canvas' box, measured when it changes rather than when it is read. `getBoundingClientRect()`\n  // inside `paint` was one forced layout per animation frame, in a painter that caches `offsetWidth`\n  // for exactly that reason.\n  useEffect(() => {\n    const host = hostRef.current;\n    if (!host) return;\n    const observer = new ResizeObserver(([entry]) => {\n      const size = entry?.contentRect;\n      if (size) box.current = { width: size.width, height: size.height };\n    });\n    observer.observe(host);\n    return () => observer.disconnect();\n  }, []);\n\n  const schedule = useCallback(() => {\n    if (frame.current) return;\n    frame.current = requestAnimationFrame(() => {\n      frame.current = 0;\n      paint();\n    });\n  }, [paint]);\n\n  useEffect(\n    () => () => {\n      if (frame.current) cancelAnimationFrame(frame.current);\n      // Clearing the handle is the whole point of this cleanup, not the cancel. `frame` doubles as\n      // the \"a paint is already queued\" flag, and StrictMode runs setup → cleanup → setup on the\n      // same instance, so the refs survive. Leaving a cancelled handle behind made every later\n      // `schedule()` believe a frame was still pending and return early — permanently.\n      frame.current = 0;\n    },\n    [],\n  );\n\n  const labelRef = useCallback(\n    (vertex: VertexId) => (element: HTMLElement | null) => {\n      if (element) labelEls.current.set(vertex, element);\n      else labelEls.current.delete(vertex);\n    },\n    [],\n  );\n\n  const setLabelOrder = useCallback((vertices: VertexId[]) => {\n    order.current = vertices;\n    widths.current.clear();\n  }, []);\n\n  const setHovered = useCallback((vertex: VertexId | null) => {\n    hoveredRef.current = vertex;\n    cardSize.current = null;\n  }, []);\n\n  return { hostRef, gridRef, cardRef, labelRef, setLabelOrder, setHovered, track, schedule };\n}\n"],"names":[],"mappings":";;;AA6BO;AA2CA;AACL;AAyBE;AACA;AACA;AASA;AAAgG;AAIhG;AACA;AACA;AAaA;AASA;AACE;AACA;AAE+B;AAQjC;AACE;AACA;AACA;AACA;AACE;AACA;AAAA;AAEF;AACA;AACA;AAIA;AAOA;AACE;AACA;AAAA;AAEF;AAMwB;AAK1B;AACA;AACE;AACA;AACE;AAGA;AACyD;AAC3D;AAMF;AAEA;AACE;AACA;AACE;AACA;AACA;AAIA;AAGA;AAAyC;AACmC;AAEvD;AACvB;AACF;AAMF;AACE;AACA;AACA;AACE;AACA;AAA0D;AAE5D;AACsB;AAGxB;AACE;AAEE;AACA;AACD;AAGH;AAAA;AAEI;AAKgB;AAClB;AACA;AAGF;AAAiB;AAEb;AACmC;AACrC;AACA;AAIA;AACe;AAIf;AACmB;AAGrB;AACF;;;;;"}
+{"version":3,"file":"use-graph-overlays.js","sources":["../src/use-graph-overlays.ts"],"sourcesContent":["\"use client\";\n\nimport { useCallback, useEffect, useRef } from \"react\";\nimport type { VertexId } from \"./resident\";\nimport type { GraphApi } from \"./use-graph\";\nimport { whenReady } from \"./when-ready\";\n\n/**\n * Everything that floats over the canvas and has to keep up with it: the hub labels, the hover\n * card, and the grid's lock to the graph's own space.\n *\n * One rAF for all three, because they answer the same question — *where is the camera now* — and\n * three independent loops would read the same transform three times a frame. React never runs: the\n * overlays move by imperative style writes, and a re-render per frame would be a re-render per\n * frame.\n *\n * **An overlay is attached to a vertex, not to a slot.** Everything here outlives an answer — a\n * label element is kept across renders, a hover survives a query — so the tracked set is identities\n * and the buffer index is resolved through `Resident` at the moment of painting. Held as indices, a\n * label would keep its position and change which node it was naming the first time the resident set\n * moved, with the text and the dot disagreeing and nothing raised.\n *\n * This lived inside the canvas component among seven other concerns, and that is not a filing\n * detail: the scheduler below once kept a cancelled `requestAnimationFrame` handle in `frame`,\n * which silently disabled every overlay for the life of the page. It took a long time to find in a\n * 700-line component and would have been obvious here.\n */\n\n/**\n * Dot spacing at zoom 1. The painter keeps the on-screen spacing inside [GRID, 2·GRID).\n *\n * **Not on the barrel any more.** Both call sites that imported it wrote the same line —\n * `backgroundSize: \\`${GRID}px ${GRID}px\\`` — as the *initial* value of a style `paint` overwrites\n * on its first frame. So the number was public to spell a value this hook was about to replace, and\n * the effect below writes it instead: the element the hook owns is seeded by the hook that owns it.\n */\nconst GRID = 22;\n\n/** How far the hover card clears its node, and the margin it keeps from the canvas edge. */\nconst CARD_GAP = 14;\nconst CARD_EDGE = 8;\n\n/** How far a label floats above its node, how tall its box is, and the air it demands around it. */\nconst LABEL_LIFT = 10;\nconst LABEL_HEIGHT = 12;\nconst LABEL_GAP = 3;\n\nconst clamp = (value: number, low: number, high: number) =>\n  Math.min(Math.max(value, low), Math.max(low, high));\n\nexport interface GraphOverlays {\n  /** The box the overlays are positioned within — the canvas' own bounds. */\n  hostRef: React.RefObject<HTMLDivElement | null>;\n  gridRef: React.RefObject<HTMLDivElement | null>;\n  cardRef: React.RefObject<HTMLDivElement | null>;\n  /** A `ref` callback for a given vertex's label. */\n  labelRef: (vertex: VertexId) => (element: HTMLElement | null) => void;\n  /** The labelled vertices, in the order the declutter pass should place them. */\n  setLabelOrder: (vertices: VertexId[]) => void;\n  setHovered: (vertex: VertexId | null) => void;\n  /**\n   * Re-register the tracked points with cosmos.gl.\n   *\n   * Call it after the graph exists and whenever the set of overlaid nodes changes. It has to be\n   * driven from outside because effects run in declaration order, so this hook's own effects cannot\n   * see a graph that a later hook is about to construct — and that construction is exactly what\n   * clears the registration.\n   */\n  track: () => void;\n  /** Ask for a repaint. Coalesced — many calls in a frame cost one. */\n  schedule: () => void;\n}\n\n/**\n * **The api, not two getters off it.**\n *\n * This took `{ getGraph, getResident }` — an options object whose two members were copied out of\n * `GraphApi` — and that shape is the reason `getGraph` and `getResident` are on the api at all\n * beside the `slice` and `resident` values it already publishes. A host composing the two wrote the\n * hook's argument by hand out of the object it had just been given, which is a re-statement rather\n * than a decision: there is no useful call where the two come from different graphs.\n *\n * `GraphOverlayOptions` went with it. It named a shape a caller had to assemble, and what a caller\n * has is the api.\n *\n * **The ordering follows, and it is the honest one.** This has to be called *after* `useGraph`,\n * because it now takes what `useGraph` returns. The other half of the cycle — a look change owes the\n * overlays a repaint, and a look change does not tick — stays where it was: `useGraph` takes a\n * `schedule` callback, and a host bridges the two with one ref. One indirection, in the direction\n * that genuinely needs one, instead of two accessors threaded around an object the host is holding.\n */\nexport function useGraphOverlays(api: GraphApi): GraphOverlays {\n  // Both are built once by `useGraph` and are stable for the life of the component, which is what\n  // makes them safe to name in the dependency arrays below.\n  const { getGraph, getResident } = api;\n  const hostRef = useRef<HTMLDivElement>(null);\n  const gridRef = useRef<HTMLDivElement>(null);\n  const cardRef = useRef<HTMLDivElement>(null);\n  const labelEls = useRef(new Map<VertexId, HTMLElement>());\n  /** Label widths, measured once each — reading `offsetWidth` every frame would force layout. */\n  const widths = useRef(new Map<VertexId, number>());\n  const order = useRef<VertexId[]>([]);\n  const hoveredRef = useRef<VertexId | null>(null);\n  /** The card's box, measured once per hover, for the same reason. */\n  const cardSize = useRef<{ width: number; height: number } | null>(null);\n  /** The canvas' own box, kept by a `ResizeObserver` — see the effect below. */\n  const box = useRef<{ width: number; height: number } | null>(null);\n  const frame = useRef(0);\n\n  /**\n   * Tell cosmos.gl which points the overlays are watching: the labelled ones, plus the hovered one.\n   *\n   * Registration is *not* self-maintaining. `Points.updatePositions()` ends in an argument-less\n   * `trackPointsByIndices()` that clears it, and that runs whenever `isPointPositionsUpdateNeeded`\n   * is set — which only `setPointPositions` does. So the registration survives every look change and\n   * every slider, and is lost exactly once per graph: at construction, on the `render()` that\n   * follows `setPointPositions`. Hence a caller-driven re-register rather than a one-shot.\n   */\n  const track = useCallback(() => {\n    const graph = getGraph();\n    if (!graph) return;\n    const hovered = hoveredRef.current;\n    const watched =\n      hovered === null || order.current.includes(hovered)\n        ? order.current\n        : [...order.current, hovered];\n    // Registration is a device call like any other, and this one is *only* reached before the\n    // device in the case that matters: a host registers its labels the moment the first slice\n    // lands, which is the same commit the graph is still being built in. Dropped there, the\n    // tracked map stays empty and every overlay sits at `opacity: 0` for ever.\n    whenReady(graph, (ready) => ready.trackPointPositionsByIndices(getResident().indicesOf(watched)));\n  }, [getGraph, getResident]);\n\n  const paint = useCallback(() => {\n    const graph = getGraph();\n    if (!graph) return;\n    const resident = getResident();\n    /**\n     * Positions come from the tracking API, not from `getPointPositions()`.\n     *\n     * The difference is what gets read back per frame. `getPointPositions()` is a synchronous\n     * `readPixels` of the *whole* position framebuffer — 10,000 bytes at this corpus size, plus an\n     * O(n) array build — on every animation frame the simulation runs. Tracking reads a\n     * `ceil(√k)²` texture for the k points that actually carry an overlay: 576 bytes for Atlas'\n     * 26 labels and a hovered node. It also caches while the simulation is stopped, so a settled\n     * graph costs no readback at all until something moves.\n     */\n    // Read lazily: with labels off and nothing hovered, the only overlay left is the grid, which\n    // needs the transform and not the points.\n    let positions: ReadonlyMap<number, [number, number]> | null = null;\n    /**\n     * Where a vertex is on screen, or `null` when it is not drawn at all.\n     *\n     * Two ways to be absent and they are one answer here: not resident — the query moved on and this\n     * vertex is not in the current buffers — or resident and not yet tracked. Both mean *do not draw\n     * an overlay for it*, and the alternative to asking is drawing it at whatever the stale index now\n     * holds, which is a label on the wrong node.\n     */\n    const at = (vertex: VertexId): [number, number] | null => {\n      const index = resident.indexOf(vertex);\n      if (index === undefined) return null;\n      positions ??= graph.getTrackedPointPositionsMap();\n      return positions.get(index) ?? null;\n    };\n\n    // Placed boxes, in importance order. A label that would land on one already down is dropped\n    // rather than drawn over it — an unreadable pile of overlapping names is worse than a sparser\n    // set of legible ones.\n    const placed: [number, number, number, number][] = [];\n    const bounds = box.current;\n    for (const vertex of order.current) {\n      const element = labelEls.current.get(vertex);\n      if (!element) continue;\n      const point = at(vertex);\n      if (!point) {\n        element.style.opacity = \"0\";\n        continue;\n      }\n      const [x, y] = graph.spaceToScreenPosition(point);\n      let width = widths.current.get(vertex);\n      if (width === undefined) {\n        width = element.offsetWidth;\n        widths.current.set(vertex, width);\n      }\n      const x1 = x - width / 2;\n      const x2 = x1 + width;\n      const y2 = y - LABEL_LIFT;\n      const y1 = y2 - LABEL_HEIGHT;\n      const offscreen =\n        bounds !== null && (x2 < 0 || y2 < 0 || x1 > bounds.width || y1 > bounds.height);\n      const collides = placed.some((r) => x1 < r[2] && x2 > r[0] && y1 < r[3] && y2 > r[1]);\n      if (offscreen || collides) {\n        element.style.opacity = \"0\";\n        continue;\n      }\n      placed.push([x1 - LABEL_GAP, y1 - LABEL_GAP, x2 + LABEL_GAP, y2 + LABEL_GAP]);\n      // Positioned at the box that was just tested, in pixels. The previous version measured a\n      // rectangle here and then drew the label somewhere else — `translate(-50%, -160%)` offsets by\n      // percentages of the element's own size, so the collision box sat about nine pixels below the\n      // text it was meant to protect and neighbouring labels overlapped anyway.\n      element.style.transform = `translate(${Math.round(x1)}px, ${Math.round(y1)}px)`;\n      element.style.opacity = \"1\";\n    }\n    // The grid belongs to the graph's space, not to the viewport: it slides with a pan and\n    // subdivides on zoom, so the spacing on screen never leaves [GRID, 2·GRID). Without that a\n    // fixed grid reads as wallpaper and the canvas stops feeling like somewhere you can move.\n    const grid = gridRef.current;\n    if (grid) {\n      const k = graph.getZoomLevel();\n      if (k > 0) {\n        const step = (GRID * k) / 2 ** Math.floor(Math.log2(k));\n        const [ox, oy] = graph.spaceToScreenPosition([0, 0]);\n        const wrap = (v: number) => ((v % step) + step) % step;\n        grid.style.backgroundSize = `${step}px ${step}px`;\n        grid.style.backgroundPosition = `${wrap(ox)}px ${wrap(oy)}px`;\n      }\n    }\n\n    // The card sits above the node, flips below when the top runs out, and is held inside the\n    // canvas on both axes. It used to be centred with percentage transforms, which cannot know\n    // about an edge — and since this layer clips, a node near a border showed half a tooltip.\n    const card = cardRef.current;\n    const hovered = hoveredRef.current;\n    if (card && hovered !== null && bounds) {\n      const point = at(hovered);\n      if (point) {\n        const [x, y] = graph.spaceToScreenPosition(point);\n        let size = cardSize.current;\n        if (!size) {\n          size = { width: card.offsetWidth, height: card.offsetHeight };\n          cardSize.current = size;\n        }\n        const above = y - CARD_GAP - size.height;\n        const below = y + CARD_GAP;\n        const top = above >= CARD_EDGE ? above : below;\n        card.style.transform = `translate(${Math.round(\n          clamp(x - size.width / 2, CARD_EDGE, bounds.width - size.width - CARD_EDGE),\n        )}px, ${Math.round(clamp(top, CARD_EDGE, bounds.height - size.height - CARD_EDGE))}px)`;\n        card.style.opacity = \"1\";\n      }\n    }\n  }, [getGraph, getResident]);\n\n  // The canvas' box, measured when it changes rather than when it is read. `getBoundingClientRect()`\n  // inside `paint` was one forced layout per animation frame, in a painter that caches `offsetWidth`\n  // for exactly that reason.\n  useEffect(() => {\n    const host = hostRef.current;\n    if (!host) return;\n    const observer = new ResizeObserver(([entry]) => {\n      const size = entry?.contentRect;\n      if (size) box.current = { width: size.width, height: size.height };\n    });\n    observer.observe(host);\n    return () => observer.disconnect();\n  }, []);\n\n  /**\n   * The grid's spacing at rest, written before the camera has said anything.\n   *\n   * `paint` sets this every frame from the live zoom, but only once there is a graph and a zoom to\n   * read — and the element is mounted well before that. The two hosts that drew a grid were each\n   * writing this same line inline off an exported `GRID`, which is a constant published so a call\n   * site could spell the value this hook was about to overwrite. Seeding it here is the same picture\n   * with the number staying where the painter that maintains it lives.\n   *\n   * The `backgroundImage` is not seeded: what the dots are made of is the host's decision — the\n   * border colour, a gradient, whatever the surface wants — and only the *spacing* has to agree with\n   * the camera.\n   */\n  useEffect(() => {\n    const grid = gridRef.current;\n    if (grid) grid.style.backgroundSize = `${GRID}px ${GRID}px`;\n  }, []);\n\n  const schedule = useCallback(() => {\n    if (frame.current) return;\n    frame.current = requestAnimationFrame(() => {\n      frame.current = 0;\n      paint();\n    });\n  }, [paint]);\n\n  useEffect(\n    () => () => {\n      if (frame.current) cancelAnimationFrame(frame.current);\n      // Clearing the handle is the whole point of this cleanup, not the cancel. `frame` doubles as\n      // the \"a paint is already queued\" flag, and StrictMode runs setup → cleanup → setup on the\n      // same instance, so the refs survive. Leaving a cancelled handle behind made every later\n      // `schedule()` believe a frame was still pending and return early — permanently.\n      frame.current = 0;\n    },\n    [],\n  );\n\n  const labelRef = useCallback(\n    (vertex: VertexId) => (element: HTMLElement | null) => {\n      if (element) labelEls.current.set(vertex, element);\n      else labelEls.current.delete(vertex);\n    },\n    [],\n  );\n\n  const setLabelOrder = useCallback((vertices: VertexId[]) => {\n    order.current = vertices;\n    widths.current.clear();\n  }, []);\n\n  const setHovered = useCallback((vertex: VertexId | null) => {\n    hoveredRef.current = vertex;\n    cardSize.current = null;\n  }, []);\n\n  return { hostRef, gridRef, cardRef, labelRef, setLabelOrder, setHovered, track, schedule };\n}\n"],"names":[],"mappings":";;;AAoCA;AAuDO;AAGL;AAyBE;AACA;AACA;AASA;AAAgG;AAIhG;AACA;AACA;AAaA;AASA;AACE;AACA;AAE+B;AAQjC;AACE;AACA;AACA;AACA;AACE;AACA;AAAA;AAEF;AACA;AACA;AAIA;AAOA;AACE;AACA;AAAA;AAEF;AAMwB;AAK1B;AACA;AACE;AACA;AACE;AAGA;AACyD;AAC3D;AAMF;AAEA;AACE;AACA;AACE;AACA;AACA;AAIA;AAGA;AAAyC;AACmC;AAEvD;AACvB;AACF;AAMF;AACE;AACA;AACA;AACE;AACA;AAA0D;AAE5D;AACsB;AAiBtB;AACA;AAAuD;AAGzD;AACE;AAEE;AACA;AACD;AAGH;AAAA;AAEI;AAKgB;AAClB;AACA;AAGF;AAAiB;AAEb;AACmC;AACrC;AACA;AAIA;AACe;AAIf;AACmB;AAGrB;AACF;;;;"}

package/dist/use-graph.d.ts

@@ -1,7 +1,7 @@
 import { Graph } from '@cosmos.gl/graph';
 import { RefObject } from 'react';
 import { BoundedSource, Slice } from './bounded';
-import { Look } from './graph-looks';
+import { LookPatch } from './graph-looks';
 import { Resident, VertexId } from './resident';
 import { Sim } from './graph-sim';
 import { Motion } from './types';
@@ -11,10 +11,10 @@ import { Motion } from './types';
  * **This is Ark's `useX(props) → api`, and the reason it exists is a host that could not adopt
  * `GraphCanvas`.** The component owned the renderer, the query loop and the look, and published them
  * through a context — which a legend or an inspector can read, because those are `children`. What
- * cannot read a context is anything that sits *above* the element: `useGraphOverlays` wants
- * `getGraph` and `getResident`, the `events` block wants the same accessors, and both are arguments
- * to a hook called in the component that renders the canvas rather than inside it. The workspace
- * needed them in thirty places and so kept its own copy of all three.
+ * cannot read a context is anything that sits *above* the element: `useGraphOverlays` wants the api
+ * itself, the `events` block wants the accessors on it, and both are arguments to a hook called in
+ * the component that renders the canvas rather than inside it. The workspace needed them in thirty
+ * places and so kept its own copy of all three.
  *
  * The general answer to that circularity is Ark's, and it is a shape rather than a feature: the
  * factory builds the api where the host can hold it, the provider takes it and renders. What the
@@ -58,9 +58,23 @@ export interface UseGraphProps {
      * **One appearance input**, where there were two: a `Display` rode beside this with its own
      * defaults, spelling the edge layer, the backdrop and two multipliers over numbers the look
      * already computes. `lookFrom(values)` resolves the whole picture from the axes a person chose.
+     *
+     * **A patch, not a whole `Look` — which is what `DEFAULT_LOOK` was for.** This took the complete
+     * object, so a host that wanted the vignette on wrote `{ ...DEFAULT_LOOK, vignette: true }` and
+     * the package exported the default to make that expressible. That spread is a *copy*: the host
+     * now holds every number this package chose, and stops tracking any of them the moment one moves
+     * here. Passing `{ vignette: true }` says what the host decided and leaves the rest ours. `link`
+     * merges one level down, so `{ link: { render: false } }` keeps the measured opacity and width.
+     *
+     * Memoise it, or pass a literal only when it does not change: the reference is what the buffers
+     * are rebuilt on. Omitted entirely, it costs nothing — the shared default is returned by identity.
+     */
+    look?: LookPatch;
+    /**
+     * The force coefficients, as a patch over this package's own — `look`'s twin in every respect,
+     * including why `DEFAULT_SIM` is no longer exported to spread from.
      */
-    look?: Look;
-    sim?: Sim;
+    sim?: Partial<Sim>;
     /**
      * Off by default, and that is the correct default rather than a cautious one: a bounded source
      * hands back the coordinates its next spatial query is expressed in, so a force moves the picture
@@ -131,9 +145,9 @@ export interface UseGraphProps {
      * off. A host drawing no labels passes nothing.
      *
      * It goes through the props rather than being read off the api because `useGraphOverlays` is
-     * declared *after* this hook — it needs `getGraph` and `getResident` from it. A host bridges the
-     * two with one ref, which is the smallest honest answer to a cycle that is genuinely mutual:
-     * overlays need the graph, and the graph's repaint owes the overlays a nudge.
+     * declared *after* this hook — it takes what this hook returns. A host bridges the two with one
+     * ref, which is the smallest honest answer to a cycle that is genuinely mutual: the overlays need
+     * the graph, and the graph's repaint owes the overlays a nudge.
      */
     schedule?: () => void;
 }
@@ -156,6 +170,20 @@ export interface GraphApi {
      * attaches it itself, and nothing works until something does.
      */
     hostRef: RefObject<HTMLDivElement | null>;
+    /**
+     * The renderer and the current map, read from inside a callback that was created once.
+     *
+     * **These two nearly left with `GraphOverlayOptions`, and the census is why they stayed.** The
+     * reason they were on the api was that `useGraphOverlays` asked for them as a pair, so every host
+     * copied them out of this object into that hook's argument — which is a re-statement, and that
+     * hook takes the api now. What kept them is a different set of readers: `useGraphSelection` takes
+     * both (its `commit` is a policy only a product can write, so it cannot be folded into the api the
+     * way the overlays were), and a real consumer outside this repository reads `getGraph` and
+     * `getResident` off `useGraphContext()` to paint its own mask over the buffers. Both are reads
+     * from inside a callback registered once, which is exactly the case `slice` and `resident` cannot
+     * serve — a value would re-render every consumer on every camera move to hand back a reference
+     * they only dereference when something is clicked.
+     */
     getGraph: () => Graph | null;
     getResident: () => Resident;
     /** The answer currently drawn, or `null` before the first one. */

package/dist/use-graph.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"use-graph.d.ts","sourceRoot":"","sources":["../src/use-graph.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"use-graph.d.ts","sourceRoot":"","sources":["../src/use-graph.ts"],"names":[],"mappings":"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"}

package/dist/use-graph.js

@@ -1,101 +1,102 @@
 "use client";
-import { useMemo as P, useRef as s, useCallback as R } from "react";
-import { DEFAULT_LOOK as j } from "./graph-looks.js";
-import { isColour as q } from "./graph-model.js";
-import { residentOf as z } from "./resident.js";
-import { useQueryLoop as H } from "./use-query-loop.js";
-import { useRenderer as I } from "./use-renderer.js";
-import { useGraphLook as J } from "./use-graph-look.js";
-const S = z(null);
-function nr(C) {
+import { useMemo as l, useRef as c, useCallback as b } from "react";
+import { resolveLook as I } from "./graph-looks.js";
+import { isColour as J } from "./graph-model.js";
+import { residentOf as K } from "./resident.js";
+import { resolveSim as U } from "./graph-sim.js";
+import { useQueryLoop as V } from "./use-query-loop.js";
+import { useRenderer as W } from "./use-renderer.js";
+import { useGraphLook as X } from "./use-graph-look.js";
+const _ = K(null);
+function ir(x) {
   const {
-    clusters: D,
-    debounce: E,
-    events: a,
+    clusters: B,
+    debounce: D,
+    events: p,
     fill: i,
-    limit: L,
-    look: b = j,
-    onFailure: p,
-    pinned: x,
-    r: B,
-    report: G,
+    limit: E,
+    look: d,
+    onFailure: k,
+    pinned: G,
+    r: L,
+    report: y,
     reportProgress: T,
-    schedule: y,
-    sim: F,
-    simulate: Z = !1,
-    source: w,
-    stroke: d,
-    symbol: l
-  } = C, A = q(i) ? l : i, K = P(() => ({ fill: i, stroke: d, symbol: l }), [i, d, l]), u = s(null), f = s(null), c = s(S), { explore: M, pending: N, refresh: m, resident: k, slice: v, sliced: Q, total: U } = H({
-    debounce: E,
-    fill: A,
+    schedule: Z,
+    sim: v,
+    simulate: w = !1,
+    source: F,
+    stroke: h,
+    symbol: m
+  } = x, M = l(() => I(d), [d]), N = l(() => U(v), [v]), Q = J(i) ? m : i, S = l(() => ({ fill: i, stroke: h, symbol: m }), [i, h, m]), u = c(null), f = c(null), s = c(_), { explore: Y, pending: j, refresh: a, resident: g, slice: P, sliced: q, total: z } = V({
+    debounce: D,
+    fill: Q,
     graphRef: f,
     hostRef: u,
-    limit: L,
-    onError: p,
-    pinned: x,
-    r: B,
-    source: w
+    limit: E,
+    onError: k,
+    pinned: G,
+    r: L,
+    source: F
   });
-  c.current = k;
-  const g = R(() => f.current, []), Y = R(() => c.current, []), t = s(a);
-  t.current = a;
-  const h = s(m);
-  h.current = m;
-  const _ = P(
+  s.current = g;
+  const O = b(() => f.current, []), A = b(() => s.current, []), t = c(p);
+  t.current = p;
+  const R = c(a);
+  R.current = a;
+  const H = l(
     () => ({
       onBackgroundClick: () => {
-        var r, e;
-        return (e = (r = t.current) == null ? void 0 : r.onBackgroundClick) == null ? void 0 : e.call(r);
+        var r, o;
+        return (o = (r = t.current) == null ? void 0 : r.onBackgroundClick) == null ? void 0 : o.call(r);
       },
       onDragEnd: (r) => {
-        var o, n;
-        const e = c.current.at(r);
-        e !== void 0 && ((n = (o = t.current) == null ? void 0 : o.onDragEnd) == null || n.call(o, e));
+        var e, n;
+        const o = s.current.at(r);
+        o !== void 0 && ((n = (e = t.current) == null ? void 0 : e.onDragEnd) == null || n.call(e, o));
       },
-      onPointClick: (r, e) => {
-        var n, O;
-        const o = c.current.at(e);
-        o !== void 0 && ((O = (n = t.current) == null ? void 0 : n.onPointClick) == null || O.call(n, o, r, e));
+      onPointClick: (r, o) => {
+        var n, C;
+        const e = s.current.at(o);
+        e !== void 0 && ((C = (n = t.current) == null ? void 0 : n.onPointClick) == null || C.call(n, e, r, o));
       },
       onPointerOut: () => {
-        var r, e;
-        return (e = (r = t.current) == null ? void 0 : r.onPointerOut) == null ? void 0 : e.call(r);
+        var r, o;
+        return (o = (r = t.current) == null ? void 0 : r.onPointerOut) == null ? void 0 : o.call(r);
       },
       onPointerOver: (r) => {
-        var o, n;
-        const e = c.current.at(r);
-        e !== void 0 && ((n = (o = t.current) == null ? void 0 : o.onPointerOver) == null || n.call(o, e, r));
+        var e, n;
+        const o = s.current.at(r);
+        o !== void 0 && ((n = (e = t.current) == null ? void 0 : e.onPointerOver) == null || n.call(e, o, r));
       },
       onTick: () => {
-        var r, e;
-        return (e = (r = t.current) == null ? void 0 : r.onTick) == null ? void 0 : e.call(r);
+        var r, o;
+        return (o = (r = t.current) == null ? void 0 : r.onTick) == null ? void 0 : o.call(r);
       },
       // The camera moved, so the graph is re-asked. A host that forgot this line got a canvas that
       // drew its first answer and never asked again — which is what `refresh` being the host's
       // responsibility used to cost.
       onZoom: () => {
-        var r, e;
-        h.current(), (e = (r = t.current) == null ? void 0 : r.onZoom) == null || e.call(r);
+        var r, o;
+        R.current(), (o = (r = t.current) == null ? void 0 : r.onZoom) == null || o.call(r);
       }
     }),
     // Built once: every reference inside is a ref this hook owns, so there is nothing to depend on.
     // It used to close over a ref object a host could substitute, which is the prop this file deletes.
     []
   );
-  return I({
-    clusters: D,
-    events: _,
+  return W({
+    clusters: B,
+    events: H,
     graphRef: f,
     hostRef: u,
-    onFailure: p,
-    report: G,
+    onFailure: k,
+    report: y,
     reportProgress: T,
-    sim: F,
-    simulate: Z
-  }), J({ channels: K, getGraph: g, hostRef: u, look: b, schedule: y, slice: v }), { explore: M, getGraph: g, getResident: Y, hostRef: u, pending: N, refresh: m, resident: k, slice: v, sliced: Q, total: U };
+    sim: N,
+    simulate: w
+  }), X({ channels: S, getGraph: O, hostRef: u, look: M, schedule: Z, slice: P }), { explore: Y, getGraph: O, getResident: A, hostRef: u, pending: j, refresh: a, resident: g, slice: P, sliced: q, total: z };
 }
 export {
-  nr as useGraph
+  ir as useGraph
 };
 //# sourceMappingURL=use-graph.js.map