@kanzo-tech/graph 0.13.1 → 0.15.0

package/dist/parts/overlays.d.ts

@@ -1,5 +1,5 @@
 import { Graph } from '@cosmos.gl/graph';
-import { Resident, VertexId } from '../core/resident';
+import { VertexId } from '../core/types';
 export interface GraphOverlays {
     /** The box the overlays are positioned within — the canvas' own bounds. */
     hostRef: React.RefObject<HTMLDivElement | null>;
@@ -9,9 +9,12 @@ export interface GraphOverlays {
     labelRef: (vertex: VertexId) => (element: HTMLElement | null) => void;
     /** The labelled vertices, in the order the declutter pass should place them. */
     setLabelOrder: (vertices: VertexId[]) => void;
+    /** The vertex the card names; its box is measured again on the next paint. */
     setHovered: (vertex: VertexId | null) => void;
+    /** Where the hovered point is, in space — from the renderer, never read back from the GPU. */
+    hoverAt: (position: [number, number] | null) => void;
     /**
-     * Re-register the tracked points with cosmos.gl.
+     * Re-register the labelled points with cosmos.gl.
      *
      * Call it after the graph exists and whenever the set of overlaid nodes changes. It has to be
      * driven from outside because effects run in declaration order, so this hook's own effects cannot
@@ -23,11 +26,9 @@ export interface GraphOverlays {
     schedule: () => void;
 }
 /**
- * The labels, the hover card and the grid, positioned from the renderer every frame: points are
- * tracked by index through the resident map, and every overlay is held by identity.
+ * The labels, the hover card and the grid, positioned from the renderer every frame.
  */
 export declare function useOverlays(api: {
     getGraph: () => Graph | null;
-    getResident: () => Resident;
 }): GraphOverlays;
 //# sourceMappingURL=overlays.d.ts.map

package/dist/parts/overlays.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"overlays.d.ts","sourceRoot":"","sources":["../../src/parts/overlays.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAC9C,OAAO,KAAK,EAAE,QAAQ,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AA8C3D,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;;;GAGG;AACH,wBAAgB,WAAW,CAAC,GAAG,EAAE;IAAE,QAAQ,EAAE,MAAM,KAAK,GAAG,IAAI,CAAC;IAAC,WAAW,EAAE,MAAM,QAAQ,CAAA;CAAE,GAAG,aAAa,CA+N7G"}
+{"version":3,"file":"overlays.d.ts","sourceRoot":"","sources":["../../src/parts/overlays.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAC9C,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AA0C9C,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,8EAA8E;IAC9E,UAAU,EAAE,CAAC,MAAM,EAAE,QAAQ,GAAG,IAAI,KAAK,IAAI,CAAC;IAC9C,8FAA8F;IAC9F,OAAO,EAAE,CAAC,QAAQ,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,GAAG,IAAI,KAAK,IAAI,CAAC;IACrD;;;;;;;OAOG;IACH,KAAK,EAAE,MAAM,IAAI,CAAC;IAClB,qEAAqE;IACrE,QAAQ,EAAE,MAAM,IAAI,CAAC;CACtB;AAED;;GAEG;AACH,wBAAgB,WAAW,CAAC,GAAG,EAAE;IAAE,QAAQ,EAAE,MAAM,KAAK,GAAG,IAAI,CAAA;CAAE,GAAG,aAAa,CAuNhF"}

package/dist/parts/overlays.js

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

package/dist/parts/overlays.js.map

@@ -1 +1 @@
-{"version":3,"file":"overlays.js","sources":["../../src/parts/overlays.ts"],"sourcesContent":["\"use client\";\n\nimport { useCallback, useEffect, useRef } from \"react\";\nimport type { Graph } from \"@cosmos.gl/graph\";\nimport type { Resident, VertexId } from \"../core/resident\";\nimport { whenReady } from \"../render/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 labels, the hover card and the grid, positioned from the renderer every frame: points are\n * tracked by index through the resident map, and every overlay is held by identity.\n */\nexport function useOverlays(api: { getGraph: () => Graph | null; getResident: () => Resident }): 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: the canvas registers its labels the moment the first\n    // composition 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;AAyCO;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;;;;"}
+{"version":3,"file":"overlays.js","sources":["../../src/parts/overlays.ts"],"sourcesContent":["\"use client\";\n\nimport { useCallback, useEffect, useRef } from \"react\";\nimport type { Graph } from \"@cosmos.gl/graph\";\nimport type { VertexId } from \"../core/types\";\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**, and a vertex's id is its index in the buffers, so the\n * tracked set is the ids themselves. A vertex the page's filter hides has no position, and no overlay.\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  /** The vertex the card names; its box is measured again on the next paint. */\n  setHovered: (vertex: VertexId | null) => void;\n  /** Where the hovered point is, in space — from the renderer, never read back from the GPU. */\n  hoverAt: (position: [number, number] | null) => void;\n  /**\n   * Re-register the labelled 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 labels, the hover card and the grid, positioned from the renderer every frame.\n */\nexport function useOverlays(api: { getGraph: () => Graph | null }): GraphOverlays {\n  // Built once by the canvas and stable for its life, which is what makes it safe to name in the\n  // dependency arrays below.\n  const { getGraph } = 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  const hoveredAt = useRef<[number, number] | 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 labels are watching. The hovered one is not among them: a change\n   * of tracked set costs a readback, and the renderer already reports where the hovered point is.\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    graph.trackPointPositionsByIndices(order.current);\n  }, [getGraph]);\n\n  const paint = useCallback(() => {\n    const graph = getGraph();\n    if (!graph) return;\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    /** Where a vertex is in space, or `null` when it is not tracked yet or has no position. */\n    const at = (vertex: VertexId): [number, number] | null => {\n      positions ??= graph.getTrackedPointPositionsMap();\n      const point = positions.get(vertex);\n      return point && !Number.isNaN(point[0]) ? point : 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 = hoveredAt.current;\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]);\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  const hoverAt = useCallback(\n    (position: [number, number] | null) => {\n      hoveredAt.current = position;\n      schedule();\n    },\n    [schedule],\n  );\n\n  return { hostRef, gridRef, cardRef, labelRef, setLabelOrder, setHovered, hoverAt, track, schedule };\n}\n"],"names":[],"mappings":";;AAgCA;AA2CO;AAGL;AA2BE;AACA;AACgD;AAIhD;AACA;AAaA;AAEA;AACE;AACA;AACA;AAAkD;AAQpD;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;AAGL;AAEZ;AACA;AACF;AACS;AAGX;AACF;;;;"}

package/dist/react/use-graph-state.d.ts

@@ -1,11 +1,13 @@
-import { GraphState } from '../core/store';
+import { GraphSnapshot, GraphState } from '../core/store';
 /**
  * **A slice of the graph's state, and a render only when that slice moves** — TanStack Store's
  * `useStore(store, selector)`, over the root in context. The state changes at frame rate — a hover, a
- * tile, a tick of the layout — so reading all of it would re-render a toolbar on every hover.
+ * load, a tick of the layout — so reading all of it would re-render a toolbar on every hover.
  *
  * The selection is kept while the snapshot is the same object, and while `isEqual` says the new slice
  * equals the last one, so a selector may build an object as long as it passes a comparison for it.
  */
 export declare function useGraphState<T>(selector: (state: GraphState) => T, isEqual?: (a: T, b: T) => boolean): T;
+/** The parts' selector over what only they and the renderer read. Not on the barrel. */
+export declare function useGraphSnapshot<T>(selector: (state: GraphSnapshot) => T): T;
 //# sourceMappingURL=use-graph-state.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"use-graph-state.d.ts","sourceRoot":"","sources":["../../src/react/use-graph-state.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAGhD;;;;;;;GAOG;AACH,wBAAgB,aAAa,CAAC,CAAC,EAAE,QAAQ,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,CAAC,EAAE,OAAO,GAAE,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,KAAK,OAAmB,GAAG,CAAC,CAgBpH"}
+{"version":3,"file":"use-graph-state.d.ts","sourceRoot":"","sources":["../../src/react/use-graph-state.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAG/D;;;;;;;GAOG;AACH,wBAAgB,aAAa,CAAC,CAAC,EAAE,QAAQ,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,CAAC,EAAE,OAAO,GAAE,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,KAAK,OAAmB,GAAG,CAAC,CAgBpH;AAED,wFAAwF;AACxF,wBAAgB,gBAAgB,CAAC,CAAC,EAAE,QAAQ,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,CAAC,GAAG,CAAC,CAE5E"}

package/dist/react/use-graph-state.js

@@ -1,16 +1,20 @@
 "use client";
 import { useRef as c, useSyncExternalStore as l } from "react";
 import { useGraphContext as i } from "./graph-root.js";
-function p(s, o = Object.is) {
-  const n = i(), r = c(null), a = () => {
-    const e = n.getState(), t = r.current;
+function p(r, n = Object.is) {
+  const s = i(), u = c(null), o = () => {
+    const e = s.getState(), t = u.current;
     if (t && t.state === e) return t.value;
-    const u = s(e);
-    return t && o(t.value, u) ? (r.current = { state: e, value: t.value }, t.value) : (r.current = { state: e, value: u }, u);
+    const a = r(e);
+    return t && n(t.value, a) ? (u.current = { state: e, value: t.value }, t.value) : (u.current = { state: e, value: a }, a);
   };
-  return l(n.subscribe, a, a);
+  return l(s.subscribe, o, o);
+}
+function v(r) {
+  return p((n) => r(n));
 }
 export {
+  v as useGraphSnapshot,
   p as useGraphState
 };
 //# sourceMappingURL=use-graph-state.js.map

package/dist/react/use-graph-state.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-graph-state.js","sources":["../../src/react/use-graph-state.ts"],"sourcesContent":["\"use client\";\n\nimport { useRef, useSyncExternalStore } from \"react\";\nimport type { GraphState } from \"../core/store\";\nimport { useGraphContext } from \"./graph-root\";\n\n/**\n * **A slice of the graph's state, and a render only when that slice moves** — TanStack Store's\n * `useStore(store, selector)`, over the root in context. The state changes at frame rate — a hover, a\n * tile, a tick of the layout — so reading all of it would re-render a toolbar on every hover.\n *\n * The selection is kept while the snapshot is the same object, and while `isEqual` says the new slice\n * equals the last one, so a selector may build an object as long as it passes a comparison for it.\n */\nexport function useGraphState<T>(selector: (state: GraphState) => T, isEqual: (a: T, b: T) => boolean = Object.is): T {\n  const api = useGraphContext();\n  const memo = useRef<{ state: GraphState; value: T } | null>(null);\n  const read = () => {\n    const state = api.getState();\n    const last = memo.current;\n    if (last && last.state === state) return last.value;\n    const value = selector(state);\n    if (last && isEqual(last.value, value)) {\n      memo.current = { state, value: last.value };\n      return last.value;\n    }\n    memo.current = { state, value };\n    return value;\n  };\n  return useSyncExternalStore(api.subscribe, read, read);\n}\n"],"names":[],"mappings":";;;AAcO;AACL;AAGE;AAEA;AACA;AACA;AAKO;AAET;AACF;;;;"}
+{"version":3,"file":"use-graph-state.js","sources":["../../src/react/use-graph-state.ts"],"sourcesContent":["\"use client\";\n\nimport { useRef, useSyncExternalStore } from \"react\";\nimport type { GraphSnapshot, GraphState } from \"../core/store\";\nimport { useGraphContext } from \"./graph-root\";\n\n/**\n * **A slice of the graph's state, and a render only when that slice moves** — TanStack Store's\n * `useStore(store, selector)`, over the root in context. The state changes at frame rate — a hover, a\n * load, a tick of the layout — so reading all of it would re-render a toolbar on every hover.\n *\n * The selection is kept while the snapshot is the same object, and while `isEqual` says the new slice\n * equals the last one, so a selector may build an object as long as it passes a comparison for it.\n */\nexport function useGraphState<T>(selector: (state: GraphState) => T, isEqual: (a: T, b: T) => boolean = Object.is): T {\n  const api = useGraphContext();\n  const memo = useRef<{ state: GraphState; value: T } | null>(null);\n  const read = () => {\n    const state = api.getState();\n    const last = memo.current;\n    if (last && last.state === state) return last.value;\n    const value = selector(state);\n    if (last && isEqual(last.value, value)) {\n      memo.current = { state, value: last.value };\n      return last.value;\n    }\n    memo.current = { state, value };\n    return value;\n  };\n  return useSyncExternalStore(api.subscribe, read, read);\n}\n\n/** The parts' selector over what only they and the renderer read. Not on the barrel. */\nexport function useGraphSnapshot<T>(selector: (state: GraphSnapshot) => T): T {\n  return useGraphState((state) => selector(state as GraphSnapshot));\n}\n"],"names":[],"mappings":";;;AAcO;AACL;AAGE;AAEA;AACA;AACA;AAKO;AAET;AACF;AAGO;AACL;AACF;;;;;"}

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

@@ -1,6 +1,5 @@
-import { Resident, VertexId } from '../core/resident';
 import { GraphOptions, GraphState, GraphStore } from '../core/store';
-import { GraphCommands, SelectionSource, Tool } from '../core/types';
+import { GraphCommands, SelectionSource, Tool, VertexId } from '../core/types';
 import { Renderer, RendererEvents } from '../render/renderer';
 export type UseGraphProps = GraphOptions;
 /**
@@ -16,8 +15,6 @@ export interface GraphApi extends GraphCommands {
     subscribe(listener: () => void): () => void;
     /** The state now, for a callback; a render reads it with `useGraphState`. */
     getState(): GraphState;
-    /** Who is drawn right now, to resolve a buffer index to an identity. */
-    getResident(): Resident;
 }
 /** What the parts in this package reach and a host does not: the element and the renderer. */
 interface Internals {

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

@@ -1 +1 @@
-{"version":3,"file":"use-graph.d.ts","sourceRoot":"","sources":["../../src/react/use-graph.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,QAAQ,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAC3D,OAAO,EAAe,KAAK,YAAY,EAAE,KAAK,UAAU,EAAE,KAAK,UAAU,EAAE,MAAM,eAAe,CAAC;AACjG,OAAO,KAAK,EAAE,aAAa,EAAE,eAAe,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAC1E,OAAO,EAAkB,KAAK,QAAQ,EAAE,KAAK,cAAc,EAAE,MAAM,oBAAoB,CAAC;AAExF,MAAM,MAAM,aAAa,GAAG,YAAY,CAAC;AAEzC;;;;;GAKG;AACH,MAAM,WAAW,QAAS,SAAQ,aAAa;IAC7C,MAAM,CAAC,QAAQ,EAAE,SAAS,QAAQ,EAAE,GAAG,IAAI,EAAE,MAAM,CAAC,EAAE,eAAe,EAAE,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC7F,QAAQ,CAAC,MAAM,EAAE,QAAQ,GAAG,IAAI,GAAG,IAAI,CAAC;IACxC,OAAO,CAAC,IAAI,EAAE,IAAI,GAAG,IAAI,CAAC;IAC1B,SAAS,CAAC,QAAQ,EAAE,MAAM,IAAI,GAAG,MAAM,IAAI,CAAC;IAC5C,6EAA6E;IAC7E,QAAQ,IAAI,UAAU,CAAC;IACvB,wEAAwE;IACxE,WAAW,IAAI,QAAQ,CAAC;CACzB;AAED,8FAA8F;AAC9F,UAAU,SAAS;IACjB,KAAK,EAAE,UAAU,CAAC;IAClB,MAAM,CAAC,IAAI,EAAE,cAAc,EAAE,MAAM,CAAC,EAAE,cAAc,GAAG,MAAM,IAAI,CAAC;IAClE,QAAQ,IAAI,QAAQ,GAAG,IAAI,CAAC;CAC7B;AAID,wFAAwF;AACxF,wBAAgB,WAAW,CAAC,GAAG,EAAE,QAAQ,GAAG,SAAS,CAIpD;AAED;;;;;GAKG;AACH,wBAAgB,QAAQ,CAAC,KAAK,EAAE,aAAa,GAAG,QAAQ,CAyBvD"}
+{"version":3,"file":"use-graph.d.ts","sourceRoot":"","sources":["../../src/react/use-graph.ts"],"names":[],"mappings":"AAGA,OAAO,EAAe,KAAK,YAAY,EAAE,KAAK,UAAU,EAAE,KAAK,UAAU,EAAE,MAAM,eAAe,CAAC;AACjG,OAAO,KAAK,EAAE,aAAa,EAAE,eAAe,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AACpF,OAAO,EAAkB,KAAK,QAAQ,EAAE,KAAK,cAAc,EAAE,MAAM,oBAAoB,CAAC;AAExF,MAAM,MAAM,aAAa,GAAG,YAAY,CAAC;AAEzC;;;;;GAKG;AACH,MAAM,WAAW,QAAS,SAAQ,aAAa;IAC7C,MAAM,CAAC,QAAQ,EAAE,SAAS,QAAQ,EAAE,GAAG,IAAI,EAAE,MAAM,CAAC,EAAE,eAAe,EAAE,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC7F,QAAQ,CAAC,MAAM,EAAE,QAAQ,GAAG,IAAI,GAAG,IAAI,CAAC;IACxC,OAAO,CAAC,IAAI,EAAE,IAAI,GAAG,IAAI,CAAC;IAC1B,SAAS,CAAC,QAAQ,EAAE,MAAM,IAAI,GAAG,MAAM,IAAI,CAAC;IAC5C,6EAA6E;IAC7E,QAAQ,IAAI,UAAU,CAAC;CACxB;AAED,8FAA8F;AAC9F,UAAU,SAAS;IACjB,KAAK,EAAE,UAAU,CAAC;IAClB,MAAM,CAAC,IAAI,EAAE,cAAc,EAAE,MAAM,CAAC,EAAE,cAAc,GAAG,MAAM,IAAI,CAAC;IAClE,QAAQ,IAAI,QAAQ,GAAG,IAAI,CAAC;CAC7B;AAID,wFAAwF;AACxF,wBAAgB,WAAW,CAAC,GAAG,EAAE,QAAQ,GAAG,SAAS,CAIpD;AAED;;;;;GAKG;AACH,wBAAgB,QAAQ,CAAC,KAAK,EAAE,aAAa,GAAG,QAAQ,CAyBvD"}

package/dist/react/use-graph.js

@@ -1,87 +1,76 @@
 "use client";
-import { useRef as R, useCallback as k, useState as v, useEffect as l } from "react";
-import { createGraph as N } from "../core/store.js";
-import { createRenderer as z } from "../render/renderer.js";
+import { useRef as k, useCallback as R, useState as B, useEffect as i } from "react";
+import { createGraph as E } from "../core/store.js";
+import { createRenderer as G } from "../render/renderer.js";
 const f = /* @__PURE__ */ new WeakMap();
-function E(n) {
+function N(n) {
   const e = f.get(n);
   if (!e) throw new Error("a graph part was given an api useGraph did not build");
   return e;
 }
-function D(n) {
-  const e = R(n);
+function A(n) {
+  const e = k(n);
   e.current = n;
-  const s = k(
+  const r = R(
     (F) => ({
       ...F,
-      onFailure: (u) => e.current.onFailure(u),
-      onSelect: (u) => {
-        var r, a;
-        return (a = (r = e.current).onSelect) == null ? void 0 : a.call(r, u);
+      onFailure: (s) => e.current.onFailure(s),
+      onSelect: (s) => {
+        var l, a;
+        return (a = (l = e.current).onSelect) == null ? void 0 : a.call(l, s);
       },
-      onFocus: (u) => {
-        var r, a;
-        return (a = (r = e.current).onFocus) == null ? void 0 : a.call(r, u);
+      onFocus: (s) => {
+        var l, a;
+        return (a = (l = e.current).onFocus) == null ? void 0 : a.call(l, s);
       }
     }),
     []
-  ), [i] = v(() => G(N(s(n)))), { store: t } = E(i), { categories: c, corpus: o, fill: m, filterBy: p, limit: d, look: b, r: S, sim: g, simulate: h, stroke: y, symbol: B, title: O, type: w } = n;
-  return l(() => {
-    t.setOptions(s(e.current));
-  }, [t, s, c, o, m, p, d, b, S, g, h, y, B, O, w]), l(() => t.subscribe(() => {
-  }), [t]), i;
+  ), [c] = B(() => T(E(r(n)))), { store: t } = N(c), { categories: u, corpus: o, fill: m, filterBy: p, look: b, r: d, sim: S, simulate: h, stroke: g, symbol: w, title: y } = n;
+  return i(() => {
+    t.setOptions(r(e.current));
+  }, [t, r, u, o, m, p, b, d, S, h, g, w, y]), i(() => t.subscribe(() => {
+  }), [t]), c;
 }
-function G(n) {
+function T(n) {
   let e = null;
-  const s = (t) => (...c) => {
+  const r = (t) => (...u) => {
     var o;
-    return (o = e == null ? void 0 : e[t]) == null ? void 0 : o.call(e, ...c);
-  }, i = {
-    zoomBy: s("zoomBy"),
-    fit: s("fit"),
-    frameBox: s("frameBox"),
-    pause: s("pause"),
-    resume: s("resume"),
-    restart: s("restart"),
-    unpin: s("unpin"),
+    return (o = e == null ? void 0 : e[t]) == null ? void 0 : o.call(e, ...u);
+  }, c = {
+    zoomBy: r("zoomBy"),
+    fit: r("fit"),
+    pause: r("pause"),
+    resume: r("resume"),
+    restart: r("restart"),
+    unpin: r("unpin"),
     // Selecting and focusing are state, and hold without a renderer; centring is the camera's.
     reveal: (t) => {
       if (e) return e.reveal(t);
       n.select([t], "node", "Node"), n.focus(t);
     },
-    frameSelection: s("frameSelection"),
+    frameSelection: r("frameSelection"),
     clear: () => {
       n.select(null), n.focus(null);
     },
-    select: (t, c, o) => n.select(t, c, o),
+    select: (t, u, o) => n.select(t, u, o),
     setFocus: (t) => n.focus(t),
     setTool: (t) => n.setTool(t),
     subscribe: (t) => n.subscribe(t),
-    getState: () => n.getSnapshot(),
-    getResident: () => (e == null ? void 0 : e.resident()) ?? T
+    getState: () => n.getSnapshot()
   };
-  return f.set(i, {
+  return f.set(c, {
     store: n,
     renderer: () => e,
-    attach(t, c) {
-      const o = z(t, n, c);
+    attach(t, u) {
+      const o = G(t, n, u);
       return e = o, n.setRenderable(o !== null), () => {
         o == null || o.destroy(), e === o && (e = null);
       };
     }
-  }), i;
+  }), c;
 }
-const T = {
-  size: 0,
-  indexOf: () => {
-  },
-  at: () => {
-  },
-  indicesOf: () => [],
-  verticesAt: () => []
-};
 export {
-  E as internalsOf,
-  D as useGraph
+  N as internalsOf,
+  A as useGraph
 };
 //# sourceMappingURL=use-graph.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"use-graph.js","sources":["../../src/react/use-graph.ts"],"sourcesContent":["\"use client\";\n\nimport { useCallback, useEffect, useRef, useState } from \"react\";\nimport type { Resident, VertexId } from \"../core/resident\";\nimport { createGraph, type GraphOptions, type GraphState, type GraphStore } from \"../core/store\";\nimport type { GraphCommands, SelectionSource, Tool } from \"../core/types\";\nimport { createRenderer, type Renderer, type RendererEvents } from \"../render/renderer\";\n\nexport type UseGraphProps = GraphOptions;\n\n/**\n * **The commands, and the door to the state — stable for the life of the root.** Zag's split of an\n * api from its state, in TanStack Store's shape: the state is read through `useGraphState(selector)`\n * so a part re-renders on what it shows, and a host holding the api never re-renders because a\n * vertex was hovered.\n */\nexport interface GraphApi extends GraphCommands {\n  select(vertices: readonly VertexId[] | null, source?: SelectionSource, label?: string): void;\n  setFocus(vertex: VertexId | null): void;\n  setTool(tool: Tool): void;\n  subscribe(listener: () => void): () => void;\n  /** The state now, for a callback; a render reads it with `useGraphState`. */\n  getState(): GraphState;\n  /** Who is drawn right now, to resolve a buffer index to an identity. */\n  getResident(): Resident;\n}\n\n/** What the parts in this package reach and a host does not: the element and the renderer. */\ninterface Internals {\n  store: GraphStore;\n  attach(host: HTMLDivElement, events?: RendererEvents): () => void;\n  renderer(): Renderer | null;\n}\n\nconst INTERNALS = new WeakMap<GraphApi, Internals>();\n\n/** The parts' door to the renderer. Not on the barrel, and not on `GraphApi`'s type. */\nexport function internalsOf(api: GraphApi): Internals {\n  const found = INTERNALS.get(api);\n  if (!found) throw new Error(\"a graph part was given an api useGraph did not build\");\n  return found;\n}\n\n/**\n * **`useBaseQuery`'s three moves**: the store is created once in `useState`, handed the latest props\n * with `setOptions` in an effect — whose dependencies are the props themselves, so a render that\n * changed none does not reach it — and read through `useSyncExternalStore`, in `useGraphState`.\n * Callbacks are read through a ref, so a host's inline `onFailure` is never a change of options.\n */\nexport function useGraph(props: UseGraphProps): GraphApi {\n  const latest = useRef(props);\n  latest.current = props;\n  const forward = useCallback(\n    (options: UseGraphProps): UseGraphProps => ({\n      ...options,\n      onFailure: (message) => latest.current.onFailure(message),\n      onSelect: (selection) => latest.current.onSelect?.(selection),\n      onFocus: (vertex) => latest.current.onFocus?.(vertex),\n    }),\n    [],\n  );\n  const [api] = useState<GraphApi>(() => build(createGraph(forward(props))));\n  const { store } = internalsOf(api);\n\n  const { categories, corpus, fill, filterBy, limit, look, r, sim, simulate, stroke, symbol, title, type } = props;\n  useEffect(() => {\n    store.setOptions(forward(latest.current));\n  }, [store, forward, categories, corpus, fill, filterBy, limit, look, r, sim, simulate, stroke, symbol, title, type]);\n\n  // Subscribed here as well as by the parts, so the store's first-subscriber and last-subscriber\n  // moves follow the root's lifetime and not whichever part happened to mount first.\n  useEffect(() => store.subscribe(() => {}), [store]);\n\n  return api;\n}\n\nfunction build(store: GraphStore): GraphApi {\n  let renderer: Renderer | null = null;\n  const on =\n    <K extends keyof GraphCommands>(name: K) =>\n    (...args: Parameters<GraphCommands[K]>) =>\n      (renderer?.[name] as ((...a: Parameters<GraphCommands[K]>) => void) | undefined)?.(...args);\n  const api: GraphApi = {\n    zoomBy: on(\"zoomBy\"),\n    fit: on(\"fit\"),\n    frameBox: on(\"frameBox\"),\n    pause: on(\"pause\"),\n    resume: on(\"resume\"),\n    restart: on(\"restart\"),\n    unpin: on(\"unpin\"),\n    // Selecting and focusing are state, and hold without a renderer; centring is the camera's.\n    reveal: (vertex) => {\n      if (renderer) return renderer.reveal(vertex);\n      store.select([vertex], \"node\", \"Node\");\n      store.focus(vertex);\n    },\n    frameSelection: on(\"frameSelection\"),\n    clear: () => {\n      store.select(null);\n      store.focus(null);\n    },\n    select: (vertices, source, label) => store.select(vertices, source, label),\n    setFocus: (vertex) => store.focus(vertex),\n    setTool: (tool) => store.setTool(tool),\n    subscribe: (listener) => store.subscribe(listener),\n    getState: () => store.getSnapshot(),\n    getResident: () => renderer?.resident() ?? NOBODY,\n  };\n  INTERNALS.set(api, {\n    store,\n    renderer: () => renderer,\n    attach(host, events) {\n      const mounted = createRenderer(host, store, events);\n      renderer = mounted;\n      store.setRenderable(mounted !== null);\n      return () => {\n        mounted?.destroy();\n        if (renderer === mounted) renderer = null;\n      };\n    },\n  });\n  return api;\n}\n\nconst NOBODY: Resident = {\n  size: 0,\n  indexOf: () => undefined,\n  at: () => undefined,\n  indicesOf: () => [],\n  verticesAt: () => [],\n};\n"],"names":[],"mappings":";;;;AAkCA;AAGO;AACL;AACA;AACA;AACF;AAQO;AACL;AACA;AACA;AAAgB;AAC8B;AACvC;AACqD;;AAC/B;AAA0B;AAAA;;AAC9B;AAAyB;AAAA;AAAM;AAEtD;AAMF;AACE;AAAwC;AAKJ;AAGxC;AAEA;AACE;AACA;;AAGK;AAAqF;AACpE;AACD;AACN;AACU;AACN;AACE;AACE;AACJ;AAAA;AAGf;AACA;AACkB;AACpB;AACmC;AAEjC;AACgB;AAClB;AACyE;AACjC;AACH;AACY;AAC3B;AACqB;AAE7C;AAAmB;AACjB;AACgB;AAEd;AACA;AAGE;AACqC;AACvC;AACF;AAGJ;AAEA;AAAyB;AACjB;AACG;AAAA;AACL;AAAA;AACa;AAEnB;;;;;"}
+{"version":3,"file":"use-graph.js","sources":["../../src/react/use-graph.ts"],"sourcesContent":["\"use client\";\n\nimport { useCallback, useEffect, useRef, useState } from \"react\";\nimport { createGraph, type GraphOptions, type GraphState, type GraphStore } from \"../core/store\";\nimport type { GraphCommands, SelectionSource, Tool, VertexId } from \"../core/types\";\nimport { createRenderer, type Renderer, type RendererEvents } from \"../render/renderer\";\n\nexport type UseGraphProps = GraphOptions;\n\n/**\n * **The commands, and the door to the state — stable for the life of the root.** Zag's split of an\n * api from its state, in TanStack Store's shape: the state is read through `useGraphState(selector)`\n * so a part re-renders on what it shows, and a host holding the api never re-renders because a\n * vertex was hovered.\n */\nexport interface GraphApi extends GraphCommands {\n  select(vertices: readonly VertexId[] | null, source?: SelectionSource, label?: string): void;\n  setFocus(vertex: VertexId | null): void;\n  setTool(tool: Tool): void;\n  subscribe(listener: () => void): () => void;\n  /** The state now, for a callback; a render reads it with `useGraphState`. */\n  getState(): GraphState;\n}\n\n/** What the parts in this package reach and a host does not: the element and the renderer. */\ninterface Internals {\n  store: GraphStore;\n  attach(host: HTMLDivElement, events?: RendererEvents): () => void;\n  renderer(): Renderer | null;\n}\n\nconst INTERNALS = new WeakMap<GraphApi, Internals>();\n\n/** The parts' door to the renderer. Not on the barrel, and not on `GraphApi`'s type. */\nexport function internalsOf(api: GraphApi): Internals {\n  const found = INTERNALS.get(api);\n  if (!found) throw new Error(\"a graph part was given an api useGraph did not build\");\n  return found;\n}\n\n/**\n * **`useBaseQuery`'s three moves**: the store is created once in `useState`, handed the latest props\n * with `setOptions` in an effect — whose dependencies are the props themselves, so a render that\n * changed none does not reach it — and read through `useSyncExternalStore`, in `useGraphState`.\n * Callbacks are read through a ref, so a host's inline `onFailure` is never a change of options.\n */\nexport function useGraph(props: UseGraphProps): GraphApi {\n  const latest = useRef(props);\n  latest.current = props;\n  const forward = useCallback(\n    (options: UseGraphProps): UseGraphProps => ({\n      ...options,\n      onFailure: (message) => latest.current.onFailure(message),\n      onSelect: (selection) => latest.current.onSelect?.(selection),\n      onFocus: (vertex) => latest.current.onFocus?.(vertex),\n    }),\n    [],\n  );\n  const [api] = useState<GraphApi>(() => build(createGraph(forward(props))));\n  const { store } = internalsOf(api);\n\n  const { categories, corpus, fill, filterBy, look, r, sim, simulate, stroke, symbol, title } = props;\n  useEffect(() => {\n    store.setOptions(forward(latest.current));\n  }, [store, forward, categories, corpus, fill, filterBy, look, r, sim, simulate, stroke, symbol, title]);\n\n  // Subscribed here as well as by the parts, so the store's first-subscriber and last-subscriber\n  // moves follow the root's lifetime and not whichever part happened to mount first.\n  useEffect(() => store.subscribe(() => {}), [store]);\n\n  return api;\n}\n\nfunction build(store: GraphStore): GraphApi {\n  let renderer: Renderer | null = null;\n  const on =\n    <K extends keyof GraphCommands>(name: K) =>\n    (...args: Parameters<GraphCommands[K]>) =>\n      (renderer?.[name] as ((...a: Parameters<GraphCommands[K]>) => void) | undefined)?.(...args);\n  const api: GraphApi = {\n    zoomBy: on(\"zoomBy\"),\n    fit: on(\"fit\"),\n    pause: on(\"pause\"),\n    resume: on(\"resume\"),\n    restart: on(\"restart\"),\n    unpin: on(\"unpin\"),\n    // Selecting and focusing are state, and hold without a renderer; centring is the camera's.\n    reveal: (vertex) => {\n      if (renderer) return renderer.reveal(vertex);\n      store.select([vertex], \"node\", \"Node\");\n      store.focus(vertex);\n    },\n    frameSelection: on(\"frameSelection\"),\n    clear: () => {\n      store.select(null);\n      store.focus(null);\n    },\n    select: (vertices, source, label) => store.select(vertices, source, label),\n    setFocus: (vertex) => store.focus(vertex),\n    setTool: (tool) => store.setTool(tool),\n    subscribe: (listener) => store.subscribe(listener),\n    getState: () => store.getSnapshot(),\n  };\n  INTERNALS.set(api, {\n    store,\n    renderer: () => renderer,\n    attach(host, events) {\n      const mounted = createRenderer(host, store, events);\n      renderer = mounted;\n      store.setRenderable(mounted !== null);\n      return () => {\n        mounted?.destroy();\n        if (renderer === mounted) renderer = null;\n      };\n    },\n  });\n  return api;\n}\n\n"],"names":[],"mappings":";;;;AA+BA;AAGO;AACL;AACA;AACA;AACF;AAQO;AACL;AACA;AACA;AAAgB;AAC8B;AACvC;AACqD;;AAC/B;AAA0B;AAAA;;AAC9B;AAAyB;AAAA;AAAM;AAEtD;AAMF;AACE;AAAwC;AAKJ;AAGxC;AAEA;AACE;AACA;;AAGK;AAAqF;AACpE;AACD;AACN;AACI;AACE;AACE;AACJ;AAAA;AAGf;AACA;AACkB;AACpB;AACmC;AAEjC;AACgB;AAClB;AACyE;AACjC;AACH;AACY;AAC3B;AAExB;AAAmB;AACjB;AACgB;AAEd;AACA;AAGE;AACqC;AACvC;AACF;AAGJ;;;;;"}

package/dist/render/graph-looks.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"graph-looks.d.ts","sourceRoot":"","sources":["../../src/render/graph-looks.ts"],"names":[],"mappings":"AAmBA;;;;;;;;;;;;;GAaG;AACH,MAAM,MAAM,KAAK,GAAG,QAAQ,GAAG,QAAQ,GAAG,UAAU,GAAG,SAAS,GAAG,OAAO,CAAC;AAE3E;;;;;;;;;GASG;AACH,eAAO,MAAM,WAAW,EAAE,MAAM,CAAC,KAAK,EAAE,MAAM,CAM7C,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,eAAO,MAAM,WAAW,EAAE,KAAK,EAAgD,CAAC;AAEhF;;;;;;GAMG;AACH,eAAO,MAAM,WAAW,EAAE,KAAe,CAAC;AAE1C;;;;;;GAMG;AACH,MAAM,WAAW,IAAI;IACnB,qEAAqE;IACrE,IAAI,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACvB,IAAI,EAAE;QACJ;;;;;WAKG;QACH,MAAM,EAAE,OAAO,CAAC;QAChB,OAAO,EAAE,MAAM,CAAC;QAChB,KAAK,EAAE,MAAM,CAAC;QACd;;;;;;WAMG;QACH,KAAK,EAAE,MAAM,CAAC;QACd;;;;;;;;;;WAUG;QACH,KAAK,EAAE,OAAO,CAAC;QACf;;;;;;WAMG;QACH,IAAI,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;KACxB,CAAC;IACF,mEAAmE;IACnE,MAAM,EAAE,MAAM,CAAC;IACf,+FAA+F;IAC/F,QAAQ,EAAE,OAAO,CAAC;IAClB;;;;;;OAMG;IACH,IAAI,EAAE,OAAO,CAAC;CAuBf;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AACH,wBAAgB,QAAQ,CAAC,MAAM,GAAE,QAAQ,CAAC,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,SAAS,CAAC,CAAM,GAAG,IAAI,CA0BxF;AAED;;;;;;;;GAQG;AACH,eAAO,MAAM,YAAY,EAAE,IAAiB,CAAC;AAE7C;;;;;;GAMG;AACH,MAAM,WAAW,SAAU,SAAQ,OAAO,CAAC,IAAI,CAAC,IAAI,EAAE,MAAM,CAAC,CAAC;IAC5D,IAAI,CAAC,EAAE,OAAO,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC;CAC9B;AAED;;;;;;;GAOG;AACH,wBAAgB,WAAW,CAAC,KAAK,CAAC,EAAE,SAAS,GAAG,IAAI,CAGnD;AAED;;;;;;;;GAQG;AACH,eAAO,MAAM,UAAU,EAAE,MAAM,CAAC,KAAK,EAAE,MAAM,CAQ5C,CAAC"}
+{"version":3,"file":"graph-looks.d.ts","sourceRoot":"","sources":["../../src/render/graph-looks.ts"],"names":[],"mappings":"AAmBA;;;;;;;;;;;;;GAaG;AACH,MAAM,MAAM,KAAK,GAAG,QAAQ,GAAG,QAAQ,GAAG,UAAU,GAAG,SAAS,GAAG,OAAO,CAAC;AAE3E;;;;;;;;;GASG;AACH,eAAO,MAAM,WAAW,EAAE,MAAM,CAAC,KAAK,EAAE,MAAM,CAM7C,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,eAAO,MAAM,WAAW,EAAE,KAAK,EAAgD,CAAC;AAEhF;;;;;;GAMG;AACH,eAAO,MAAM,WAAW,EAAE,KAAe,CAAC;AAE1C;;;;;;GAMG;AACH,MAAM,WAAW,IAAI;IACnB,qEAAqE;IACrE,IAAI,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACvB,IAAI,EAAE;QACJ;;;;;WAKG;QACH,MAAM,EAAE,OAAO,CAAC;QAChB,OAAO,EAAE,MAAM,CAAC;QAChB,KAAK,EAAE,MAAM,CAAC;QACd;;;;;;WAMG;QACH,KAAK,EAAE,MAAM,CAAC;QACd;;;;;;;;;;WAUG;QACH,KAAK,EAAE,OAAO,CAAC;QACf;;;;;;WAMG;QACH,IAAI,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;KACxB,CAAC;IACF,mEAAmE;IACnE,MAAM,EAAE,MAAM,CAAC;IACf,+FAA+F;IAC/F,QAAQ,EAAE,OAAO,CAAC;IAClB;;;;;;OAMG;IACH,IAAI,EAAE,OAAO,CAAC;CAsBf;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AACH,wBAAgB,QAAQ,CAAC,MAAM,GAAE,QAAQ,CAAC,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,SAAS,CAAC,CAAM,GAAG,IAAI,CA0BxF;AAED;;;;;;;;GAQG;AACH,eAAO,MAAM,YAAY,EAAE,IAAiB,CAAC;AAE7C;;;;;;GAMG;AACH,MAAM,WAAW,SAAU,SAAQ,OAAO,CAAC,IAAI,CAAC,IAAI,EAAE,MAAM,CAAC,CAAC;IAC5D,IAAI,CAAC,EAAE,OAAO,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC;CAC9B;AAED;;;;;;;GAOG;AACH,wBAAgB,WAAW,CAAC,KAAK,CAAC,EAAE,SAAS,GAAG,IAAI,CAGnD;AAED;;;;;;;;GAQG;AACH,eAAO,MAAM,UAAU,EAAE,MAAM,CAAC,KAAK,EAAE,MAAM,CAQ5C,CAAC"}