@kanzo-tech/graph 0.14.0 → 0.15.1

package/dist/index.js

@@ -1,35 +1,29 @@
 import { GraphRoot as e, GraphRootProvider as p, useGraphContext as t } from "./react/graph-root.js";
-import { useGraph as f } from "./react/use-graph.js";
+import { useGraph as m } from "./react/use-graph.js";
 import { useGraphState as x } from "./react/use-graph-state.js";
 import { useGraphPrefs as G } from "./react/use-graph-prefs.js";
-import { GraphCanvas as d } from "./parts/graph-canvas.js";
-import { GraphLegend as l } from "./parts/graph-legend.js";
-import { GraphToolbar as v } from "./parts/graph-toolbar.js";
-import { GraphInspector as O } from "./parts/graph-inspector.js";
-import { ShapeGlyph as y } from "./parts/shape-glyph.js";
-import { lookFrom as F } from "./render/graph-looks.js";
-import { simFrom as P } from "./render/graph-sim.js";
-import { adaptive as S } from "./render/adaptive.js";
-import { scaleOf as g } from "./render/graph-model.js";
-import { denseOf as L, typeOf as T, vertexId as j } from "./core/resident.js";
+import { GraphCanvas as l } from "./parts/graph-canvas.js";
+import { GraphLegend as u } from "./parts/graph-legend.js";
+import { GraphToolbar as d } from "./parts/graph-toolbar.js";
+import { GraphInspector as v } from "./parts/graph-inspector.js";
+import { ShapeGlyph as F } from "./parts/shape-glyph.js";
+import { lookFrom as R } from "./render/graph-looks.js";
+import { simFrom as b } from "./render/graph-sim.js";
+import { scaleOf as k } from "./render/graph-model.js";
 export {
-  d as GraphCanvas,
-  O as GraphInspector,
-  l as GraphLegend,
+  l as GraphCanvas,
+  v as GraphInspector,
+  u as GraphLegend,
   e as GraphRoot,
   p as GraphRootProvider,
-  v as GraphToolbar,
-  y as ShapeGlyph,
-  S as adaptive,
-  L as denseOf,
-  F as lookFrom,
-  g as scaleOf,
-  P as simFrom,
-  T as typeOf,
-  f as useGraph,
+  d as GraphToolbar,
+  F as ShapeGlyph,
+  R as lookFrom,
+  k as scaleOf,
+  b as simFrom,
+  m as useGraph,
   t as useGraphContext,
   G as useGraphPrefs,
-  x as useGraphState,
-  j as vertexId
+  x as useGraphState
 };
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;"}

package/dist/parts/gesture.d.ts

@@ -1,7 +1,6 @@
 import { default as React } from 'react';
 import { Graph } from '@cosmos.gl/graph';
-import { Resident, VertexId } from '../core/resident';
-import { Selection, SelectionSource, Tool } from '../core/types';
+import { Selection, SelectionSource, Tool, VertexId } from '../core/types';
 /**
  * Drawing a selection on the canvas: the marquee, the lasso, and the keys that modify them.
  *
@@ -41,14 +40,6 @@ export interface GraphSelectionGesture {
 }
 export interface GraphSelectionOptions {
     getGraph: () => Graph | null;
-    /**
-     * Who is drawn right now — the only thing that can turn a hit-test index into an identity.
-     *
-     * A gesture selects positions on screen, and a position is a buffer index, which the next
-     * residency reuses for a different vertex. So the gesture resolves to identities here and now,
-     * while the answer that produced them is still the one on screen.
-     */
-    getResident: () => Resident;
     /** The live selection, for the modifiers to add to or subtract from. */
     getSelection: () => Selection | null;
     commit: (vertices: Set<VertexId> | null, source: SelectionSource, label: string) => void;

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

@@ -1 +1 @@
-{"version":3,"file":"gesture.d.ts","sourceRoot":"","sources":["../../src/parts/gesture.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAC9C,OAAO,KAAK,EAAE,QAAQ,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAC3D,OAAO,KAAK,EAAE,SAAS,EAAE,eAAe,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAEtE;;;;;;;;;;GAUG;AACH,MAAM,MAAM,KAAK,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;AAErC,wFAAwF;AACxF,MAAM,MAAM,IAAI,GAAG;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,KAAK,CAAC;IAAC,EAAE,EAAE,KAAK,CAAA;CAAE,GAAG;IAAE,IAAI,EAAE,OAAO,CAAC;IAAC,IAAI,EAAE,KAAK,EAAE,CAAA;CAAE,CAAC;AAS/F,4FAA4F;AAC5F,wBAAgB,UAAU,CAAC,IAAI,EAAE,IAAI,GAAG,IAAI,GAAG,KAAK,CAAC,aAAa,CAIjE;AAED,MAAM,WAAW,qBAAqB;IACpC,0DAA0D;IAC1D,IAAI,EAAE,IAAI,GAAG,IAAI,CAAC;IAClB,oFAAoF;IACpF,OAAO,EAAE,MAAM,GAAG,IAAI,CAAC;IACvB,mFAAmF;IACnF,MAAM,EAAE,IAAI,CAAC;IACb,QAAQ,EAAE;QACR,aAAa,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,YAAY,KAAK,IAAI,CAAC;QACnD,aAAa,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,YAAY,KAAK,IAAI,CAAC;QACnD,WAAW,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,YAAY,KAAK,IAAI,CAAC;QACjD,eAAe,EAAE,MAAM,IAAI,CAAC;KAC7B,CAAC;CACH;AAED,MAAM,WAAW,qBAAqB;IACpC,QAAQ,EAAE,MAAM,KAAK,GAAG,IAAI,CAAC;IAC7B;;;;;;OAMG;IACH,WAAW,EAAE,MAAM,QAAQ,CAAC;IAC5B,wEAAwE;IACxE,YAAY,EAAE,MAAM,SAAS,GAAG,IAAI,CAAC;IACrC,MAAM,EAAE,CAAC,QAAQ,EAAE,GAAG,CAAC,QAAQ,CAAC,GAAG,IAAI,EAAE,MAAM,EAAE,eAAe,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACzF,IAAI,EAAE,IAAI,CAAC;IACX,OAAO,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,IAAI,CAAC;CAC/B;AAOD,wBAAgB,UAAU,CAAC,OAAO,EAAE,qBAAqB,GAAG,qBAAqB,CA0IhF"}
+{"version":3,"file":"gesture.d.ts","sourceRoot":"","sources":["../../src/parts/gesture.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAC9C,OAAO,KAAK,EAAE,SAAS,EAAE,eAAe,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAEhF;;;;;;;;;;GAUG;AACH,MAAM,MAAM,KAAK,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;AAErC,wFAAwF;AACxF,MAAM,MAAM,IAAI,GAAG;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,KAAK,CAAC;IAAC,EAAE,EAAE,KAAK,CAAA;CAAE,GAAG;IAAE,IAAI,EAAE,OAAO,CAAC;IAAC,IAAI,EAAE,KAAK,EAAE,CAAA;CAAE,CAAC;AAS/F,4FAA4F;AAC5F,wBAAgB,UAAU,CAAC,IAAI,EAAE,IAAI,GAAG,IAAI,GAAG,KAAK,CAAC,aAAa,CAIjE;AAED,MAAM,WAAW,qBAAqB;IACpC,0DAA0D;IAC1D,IAAI,EAAE,IAAI,GAAG,IAAI,CAAC;IAClB,oFAAoF;IACpF,OAAO,EAAE,MAAM,GAAG,IAAI,CAAC;IACvB,mFAAmF;IACnF,MAAM,EAAE,IAAI,CAAC;IACb,QAAQ,EAAE;QACR,aAAa,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,YAAY,KAAK,IAAI,CAAC;QACnD,aAAa,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,YAAY,KAAK,IAAI,CAAC;QACnD,WAAW,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,YAAY,KAAK,IAAI,CAAC;QACjD,eAAe,EAAE,MAAM,IAAI,CAAC;KAC7B,CAAC;CACH;AAED,MAAM,WAAW,qBAAqB;IACpC,QAAQ,EAAE,MAAM,KAAK,GAAG,IAAI,CAAC;IAC7B,wEAAwE;IACxE,YAAY,EAAE,MAAM,SAAS,GAAG,IAAI,CAAC;IACrC,MAAM,EAAE,CAAC,QAAQ,EAAE,GAAG,CAAC,QAAQ,CAAC,GAAG,IAAI,EAAE,MAAM,EAAE,eAAe,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACzF,IAAI,EAAE,IAAI,CAAC;IACX,OAAO,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,IAAI,CAAC;CAC/B;AAOD,wBAAgB,UAAU,CAAC,OAAO,EAAE,qBAAqB,GAAG,qBAAqB,CAyIhF"}

package/dist/parts/gesture.js

@@ -1,17 +1,17 @@
 "use client";
-import { useState as m, useRef as R, useCallback as S, useEffect as I } from "react";
-const x = 3, K = 4, _ = 60;
-function D(l) {
+import { useState as m, useRef as A, useCallback as g, useEffect as R } from "react";
+const x = 3, I = 4, K = 60;
+function z(l) {
   if (!l) return { display: "none" };
   const [i = 0, a = 0] = l.tool === "rect" ? l.to : l.path[l.path.length - 1] ?? [];
   return { left: i + 14, top: a + 14 };
 }
-const q = {
+const _ = {
   rect: { source: "marquee", label: "Marquee" },
   lasso: { source: "lasso", label: "Lasso" }
 };
-function G(l) {
-  const { commit: i, getGraph: a, getResident: k, getSelection: v, setTool: y, tool: h } = l, [s, c] = m(null), [L, f] = m(null), [T, d] = m(!1), b = R(0), p = S(
+function D(l) {
+  const { commit: i, getGraph: a, getSelection: k, setTool: y, tool: h } = l, [s, c] = m(null), [v, f] = m(null), [L, p] = m(!1), b = A(0), w = g(
     (t) => {
       const e = a();
       if (!e) return [];
@@ -27,19 +27,19 @@ function G(l) {
       return t.path.length < 3 ? [] : Array.from(e.findPointsInPolygon(t.path));
     },
     [a]
-  ), E = S(
+  ), E = g(
     (t) => {
       const e = performance.now();
-      e - b.current < _ || (b.current = e, f(p(t).length));
+      e - b.current < K || (b.current = e, f(w(t).length));
     },
-    [p]
+    [w]
   );
-  I(() => {
+  R(() => {
     const t = (n) => {
-      n.key === "Shift" && d(!0), n.key === "Escape" && (c((r) => (r || (h ? y(null) : i(null, "node", "")), null)), f(null));
+      n.key === "Shift" && p(!0), n.key === "Escape" && (c((r) => (r || (h ? y(null) : i(null, "node", "")), null)), f(null));
     }, e = (n) => {
-      n.key === "Shift" && d(!1);
-    }, o = () => d(!1);
+      n.key === "Shift" && p(!1);
+    }, o = () => p(!1);
     return window.addEventListener("keydown", t), window.addEventListener("keyup", e), window.addEventListener("blur", o), () => {
       window.removeEventListener("keydown", t), window.removeEventListener("keyup", e), window.removeEventListener("blur", o);
     };
@@ -47,29 +47,29 @@ function G(l) {
   const M = (t) => {
     const e = t.currentTarget.getBoundingClientRect();
     return [t.clientX - e.left, t.clientY - e.top];
-  }, A = (t, e) => {
-    var P;
+  }, T = (t, e) => {
+    var S;
     if (c(null), f(null), !t) return;
-    const o = new Set(k().verticesAt(p(t)));
+    const o = new Set(w(t));
     if (o.size === 0 && !e.altKey) return;
-    const { label: n, source: r } = q[t.tool], u = ((P = v()) == null ? void 0 : P.vertices) ?? [];
+    const { label: n, source: r } = _[t.tool], u = ((S = k()) == null ? void 0 : S.vertices) ?? [];
     if (e.altKey) {
-      const w = new Set(u);
-      for (const C of o) w.delete(C);
-      i(w.size > 0 ? w : null, r, n);
+      const d = new Set(u);
+      for (const C of o) d.delete(C);
+      i(d.size > 0 ? d : null, r, n);
     } else e.metaKey || e.ctrlKey ? i(/* @__PURE__ */ new Set([...u, ...o]), r, n) : i(o, r, n);
-  }, g = h ?? (T ? "rect" : null);
+  }, P = h ?? (L ? "rect" : null);
   return {
     drag: s,
-    preview: L,
-    active: g,
+    preview: v,
+    active: P,
     handlers: {
       onPointerDown: (t) => {
         if (t.button !== 0) return;
         t.currentTarget.setPointerCapture(t.pointerId);
         const e = M(t);
         c(
-          g === "rect" ? { tool: "rect", from: e, to: e } : { tool: "lasso", path: [e] }
+          P === "rect" ? { tool: "rect", from: e, to: e } : { tool: "lasso", path: [e] }
         );
       },
       onPointerMove: (t) => {
@@ -81,11 +81,11 @@ function G(l) {
           return;
         }
         const o = s.path[s.path.length - 1];
-        if (Math.hypot(e[0] - o[0], e[1] - o[1]) < K) return;
+        if (Math.hypot(e[0] - o[0], e[1] - o[1]) < I) return;
         const n = { tool: "lasso", path: [...s.path, e] };
         c(n), E(n);
       },
-      onPointerUp: (t) => A(s, t),
+      onPointerUp: (t) => T(s, t),
       onPointerCancel: () => {
         c(null), f(null);
       }
@@ -93,7 +93,7 @@ function G(l) {
   };
 }
 export {
-  D as cursorChip,
-  G as useGesture
+  z as cursorChip,
+  D as useGesture
 };
 //# sourceMappingURL=gesture.js.map

package/dist/parts/gesture.js.map

@@ -1 +1 @@
-{"version":3,"file":"gesture.js","sources":["../../src/parts/gesture.ts"],"sourcesContent":["\"use client\";\n\nimport { useCallback, useEffect, useRef, useState } from \"react\";\nimport type React from \"react\";\nimport type { Graph } from \"@cosmos.gl/graph\";\nimport type { Resident, VertexId } from \"../core/resident\";\nimport type { Selection, SelectionSource, Tool } from \"../core/types\";\n\n/**\n * Drawing a selection on the canvas: the marquee, the lasso, and the keys that modify them.\n *\n * The whole gesture lives here — what is being drawn, how many nodes it currently holds, and what\n * happens when the pointer comes up. The component gets handlers to spread onto an overlay and the\n * state to draw it with; it does not need to know that Shift borrows the marquee or that a hit test\n * costs a GPU readback.\n *\n * Modifiers are read at *release*, not at press, because that is when the reader has decided:\n * `Alt` removes what was drawn from the selection, `⌘`/`Ctrl` adds it, and neither replaces.\n */\nexport type Point = [number, number];\n\n/** A selection gesture in flight. The two tools differ only in what they accumulate. */\nexport type Drag = { tool: \"rect\"; from: Point; to: Point } | { tool: \"lasso\"; path: Point[] };\n\n/** Below this the hit test would be answering about a click, not a box. */\nconst MIN_RECT = 3;\n/** A raw pointer stream makes a polygon of near-duplicate vertices; the hit test walks every one. */\nconst PATH_STEP = 4;\n/** Slower than the hand, faster than the eye — and one GPU readback per gesture frame is plenty. */\nconst MEASURE_MS = 60;\n\n/** The running count rides just off the cursor, at the edge the gesture is growing from. */\nexport function cursorChip(drag: Drag | null): React.CSSProperties {\n  if (!drag) return { display: \"none\" };\n  const [x = 0, y = 0] = drag.tool === \"rect\" ? drag.to : (drag.path[drag.path.length - 1] ?? []);\n  return { left: x + 14, top: y + 14 };\n}\n\nexport interface GraphSelectionGesture {\n  /** The gesture being drawn, for the overlay to render. */\n  drag: Drag | null;\n  /** How many nodes it holds right now, so the number lands before the mouse does. */\n  preview: number | null;\n  /** The tool actually in force: the chosen one, or the marquee Shift is lending. */\n  active: Tool;\n  handlers: {\n    onPointerDown: (event: React.PointerEvent) => void;\n    onPointerMove: (event: React.PointerEvent) => void;\n    onPointerUp: (event: React.PointerEvent) => void;\n    onPointerCancel: () => void;\n  };\n}\n\nexport interface GraphSelectionOptions {\n  getGraph: () => Graph | null;\n  /**\n   * Who is drawn right now — the only thing that can turn a hit-test index into an identity.\n   *\n   * A gesture selects positions on screen, and a position is a buffer index, which the next\n   * residency reuses for a different vertex. So the gesture resolves to identities here and now,\n   * while the answer that produced them is still the one on screen.\n   */\n  getResident: () => Resident;\n  /** The live selection, for the modifiers to add to or subtract from. */\n  getSelection: () => Selection | null;\n  commit: (vertices: Set<VertexId> | null, source: SelectionSource, label: string) => void;\n  tool: Tool;\n  setTool: (tool: Tool) => void;\n}\n\nconst NAME: Record<\"rect\" | \"lasso\", { source: SelectionSource; label: string }> = {\n  rect: { source: \"marquee\", label: \"Marquee\" },\n  lasso: { source: \"lasso\", label: \"Lasso\" },\n};\n\nexport function useGesture(options: GraphSelectionOptions): GraphSelectionGesture {\n  const { commit, getGraph, getResident, getSelection, setTool, tool } = options;\n  const [drag, setDrag] = useState<Drag | null>(null);\n  const [preview, setPreview] = useState<number | null>(null);\n  const [shift, setShift] = useState(false);\n  const measured = useRef(0);\n\n  const hitTest = useCallback(\n    (shape: Drag): number[] => {\n      const graph = getGraph();\n      if (!graph) return [];\n      // Before its device cosmos.gl answers `[]` here: a gesture over a graph that has not drawn\n      // selects nothing, which is what it looks like.\n      if (shape.tool === \"rect\") {\n        const [[ax, ay], [bx, by]] = [shape.from, shape.to];\n        if (Math.abs(bx - ax) < MIN_RECT || Math.abs(by - ay) < MIN_RECT) return [];\n        return Array.from(\n          graph.findPointsInRect([\n            [Math.min(ax, bx), Math.min(ay, by)],\n            [Math.max(ax, bx), Math.max(ay, by)],\n          ]),\n        );\n      }\n      if (shape.path.length < 3) return [];\n      return Array.from(graph.findPointsInPolygon(shape.path));\n    },\n    [getGraph],\n  );\n\n  // Both hit tests are a GPU pass followed by a synchronous `readPixels`, so running one per\n  // pointer event would stall the frame the gesture is being drawn into.\n  const measure = useCallback(\n    (shape: Drag) => {\n      const now = performance.now();\n      if (now - measured.current < MEASURE_MS) return;\n      measured.current = now;\n      setPreview(hitTest(shape).length);\n    },\n    [hitTest],\n  );\n\n  // Escape is the way out of everything, in layers: it abandons a drag in progress, then drops the\n  // tool, then clears what is held. And a window that loses focus never delivers the Shift keyup,\n  // which would leave the canvas unable to pan.\n  useEffect(() => {\n    const down = (event: KeyboardEvent) => {\n      if (event.key === \"Shift\") setShift(true);\n      if (event.key !== \"Escape\") return;\n      setDrag((current) => {\n        if (current) return null;\n        if (tool) setTool(null);\n        else commit(null, \"node\", \"\");\n        return null;\n      });\n      setPreview(null);\n    };\n    const up = (event: KeyboardEvent) => {\n      if (event.key === \"Shift\") setShift(false);\n    };\n    const blur = () => setShift(false);\n    window.addEventListener(\"keydown\", down);\n    window.addEventListener(\"keyup\", up);\n    window.addEventListener(\"blur\", blur);\n    return () => {\n      window.removeEventListener(\"keydown\", down);\n      window.removeEventListener(\"keyup\", up);\n      window.removeEventListener(\"blur\", blur);\n    };\n  }, [commit, setTool, tool]);\n\n  /** Screen coordinates inside the canvas — the space every cosmos.gl hit test speaks. */\n  const at = (event: React.PointerEvent): Point => {\n    const box = event.currentTarget.getBoundingClientRect();\n    return [event.clientX - box.left, event.clientY - box.top];\n  };\n\n  const finish = (shape: Drag | null, event: React.PointerEvent) => {\n    setDrag(null);\n    setPreview(null);\n    if (!shape) return;\n    // The one line the whole gesture turns on: the hit test answers in buffer indices, and they stop\n    // meaning anything the moment the resident set changes.\n    const vertices = new Set(getResident().verticesAt(hitTest(shape)));\n    // A gesture that caught nothing and asked for nothing is a misfire, not a request to clear —\n    // clearing is what the corner's own button and Escape are for.\n    if (vertices.size === 0 && !event.altKey) return;\n    const { label, source } = NAME[shape.tool];\n    const held = getSelection()?.vertices ?? [];\n    if (event.altKey) {\n      const next = new Set(held);\n      for (const vertex of vertices) next.delete(vertex);\n      commit(next.size > 0 ? next : null, source, label);\n    } else if (event.metaKey || event.ctrlKey) {\n      commit(new Set([...held, ...vertices]), source, label);\n    } else {\n      commit(vertices, source, label);\n    }\n  };\n\n  const active: Tool = tool ?? (shift ? \"rect\" : null);\n\n  return {\n    drag,\n    preview,\n    active,\n    handlers: {\n      onPointerDown: (event) => {\n        if (event.button !== 0) return;\n        event.currentTarget.setPointerCapture(event.pointerId);\n        const start = at(event);\n        setDrag(\n          active === \"rect\"\n            ? { tool: \"rect\", from: start, to: start }\n            : { tool: \"lasso\", path: [start] },\n        );\n      },\n      onPointerMove: (event) => {\n        if (!drag) return;\n        const next = at(event);\n        if (drag.tool === \"rect\") {\n          const shape: Drag = { ...drag, to: next };\n          setDrag(shape);\n          measure(shape);\n          return;\n        }\n        const last = drag.path[drag.path.length - 1] as Point;\n        if (Math.hypot(next[0] - last[0], next[1] - last[1]) < PATH_STEP) return;\n        const shape: Drag = { tool: \"lasso\", path: [...drag.path, next] };\n        setDrag(shape);\n        measure(shape);\n      },\n      onPointerUp: (event) => finish(drag, event),\n      onPointerCancel: () => {\n        setDrag(null);\n        setPreview(null);\n      },\n    },\n  };\n}\n"],"names":[],"mappings":";;AAyBA;AAOO;AACL;AACA;AACA;AACF;AAkCA;AAAmF;AAC/C;AAEpC;AAEO;AACL;AAMgB;AAEZ;AACA;AAGA;AACE;AACA;AACa;AACY;AACc;AACA;AACpC;AAAA;AAGL;AACuD;AACzD;AACS;AAKK;AAEZ;AACA;AAEgC;AAClC;AACQ;AAMV;AACE;AAEE;AAOe;AAGf;AAAyC;AAG3C;AAIE;AAEuC;AACzC;AAIF;AACE;AACA;AAAyD;;AAMzD;AAGA;AAGA;AACA;AAEA;AACE;AACA;AACA;AAAiD;AAInB;AAMlC;AAAO;AACL;AACA;AACA;AACU;AAEN;AACA;AACA;AACA;AAAA;AAGmC;AAAE;AAEvC;AAEE;AACA;AACA;AACE;AACA;AAEA;AAAA;AAEF;AACA;AACA;AACA;AACa;AACf;AAC0C;AAExC;AACe;AACjB;AAAA;AAGN;;;;;"}
+{"version":3,"file":"gesture.js","sources":["../../src/parts/gesture.ts"],"sourcesContent":["\"use client\";\n\nimport { useCallback, useEffect, useRef, useState } from \"react\";\nimport type React from \"react\";\nimport type { Graph } from \"@cosmos.gl/graph\";\nimport type { Selection, SelectionSource, Tool, VertexId } from \"../core/types\";\n\n/**\n * Drawing a selection on the canvas: the marquee, the lasso, and the keys that modify them.\n *\n * The whole gesture lives here — what is being drawn, how many nodes it currently holds, and what\n * happens when the pointer comes up. The component gets handlers to spread onto an overlay and the\n * state to draw it with; it does not need to know that Shift borrows the marquee or that a hit test\n * costs a GPU readback.\n *\n * Modifiers are read at *release*, not at press, because that is when the reader has decided:\n * `Alt` removes what was drawn from the selection, `⌘`/`Ctrl` adds it, and neither replaces.\n */\nexport type Point = [number, number];\n\n/** A selection gesture in flight. The two tools differ only in what they accumulate. */\nexport type Drag = { tool: \"rect\"; from: Point; to: Point } | { tool: \"lasso\"; path: Point[] };\n\n/** Below this the hit test would be answering about a click, not a box. */\nconst MIN_RECT = 3;\n/** A raw pointer stream makes a polygon of near-duplicate vertices; the hit test walks every one. */\nconst PATH_STEP = 4;\n/** Slower than the hand, faster than the eye — and one GPU readback per gesture frame is plenty. */\nconst MEASURE_MS = 60;\n\n/** The running count rides just off the cursor, at the edge the gesture is growing from. */\nexport function cursorChip(drag: Drag | null): React.CSSProperties {\n  if (!drag) return { display: \"none\" };\n  const [x = 0, y = 0] = drag.tool === \"rect\" ? drag.to : (drag.path[drag.path.length - 1] ?? []);\n  return { left: x + 14, top: y + 14 };\n}\n\nexport interface GraphSelectionGesture {\n  /** The gesture being drawn, for the overlay to render. */\n  drag: Drag | null;\n  /** How many nodes it holds right now, so the number lands before the mouse does. */\n  preview: number | null;\n  /** The tool actually in force: the chosen one, or the marquee Shift is lending. */\n  active: Tool;\n  handlers: {\n    onPointerDown: (event: React.PointerEvent) => void;\n    onPointerMove: (event: React.PointerEvent) => void;\n    onPointerUp: (event: React.PointerEvent) => void;\n    onPointerCancel: () => void;\n  };\n}\n\nexport interface GraphSelectionOptions {\n  getGraph: () => Graph | null;\n  /** The live selection, for the modifiers to add to or subtract from. */\n  getSelection: () => Selection | null;\n  commit: (vertices: Set<VertexId> | null, source: SelectionSource, label: string) => void;\n  tool: Tool;\n  setTool: (tool: Tool) => void;\n}\n\nconst NAME: Record<\"rect\" | \"lasso\", { source: SelectionSource; label: string }> = {\n  rect: { source: \"marquee\", label: \"Marquee\" },\n  lasso: { source: \"lasso\", label: \"Lasso\" },\n};\n\nexport function useGesture(options: GraphSelectionOptions): GraphSelectionGesture {\n  const { commit, getGraph, getSelection, setTool, tool } = options;\n  const [drag, setDrag] = useState<Drag | null>(null);\n  const [preview, setPreview] = useState<number | null>(null);\n  const [shift, setShift] = useState(false);\n  const measured = useRef(0);\n\n  const hitTest = useCallback(\n    (shape: Drag): number[] => {\n      const graph = getGraph();\n      if (!graph) return [];\n      // Before its device cosmos.gl answers `[]` here: a gesture over a graph that has not drawn\n      // selects nothing, which is what it looks like.\n      if (shape.tool === \"rect\") {\n        const [[ax, ay], [bx, by]] = [shape.from, shape.to];\n        if (Math.abs(bx - ax) < MIN_RECT || Math.abs(by - ay) < MIN_RECT) return [];\n        return Array.from(\n          graph.findPointsInRect([\n            [Math.min(ax, bx), Math.min(ay, by)],\n            [Math.max(ax, bx), Math.max(ay, by)],\n          ]),\n        );\n      }\n      if (shape.path.length < 3) return [];\n      return Array.from(graph.findPointsInPolygon(shape.path));\n    },\n    [getGraph],\n  );\n\n  // Both hit tests are a GPU pass followed by a synchronous `readPixels`, so running one per\n  // pointer event would stall the frame the gesture is being drawn into.\n  const measure = useCallback(\n    (shape: Drag) => {\n      const now = performance.now();\n      if (now - measured.current < MEASURE_MS) return;\n      measured.current = now;\n      setPreview(hitTest(shape).length);\n    },\n    [hitTest],\n  );\n\n  // Escape is the way out of everything, in layers: it abandons a drag in progress, then drops the\n  // tool, then clears what is held. And a window that loses focus never delivers the Shift keyup,\n  // which would leave the canvas unable to pan.\n  useEffect(() => {\n    const down = (event: KeyboardEvent) => {\n      if (event.key === \"Shift\") setShift(true);\n      if (event.key !== \"Escape\") return;\n      setDrag((current) => {\n        if (current) return null;\n        if (tool) setTool(null);\n        else commit(null, \"node\", \"\");\n        return null;\n      });\n      setPreview(null);\n    };\n    const up = (event: KeyboardEvent) => {\n      if (event.key === \"Shift\") setShift(false);\n    };\n    const blur = () => setShift(false);\n    window.addEventListener(\"keydown\", down);\n    window.addEventListener(\"keyup\", up);\n    window.addEventListener(\"blur\", blur);\n    return () => {\n      window.removeEventListener(\"keydown\", down);\n      window.removeEventListener(\"keyup\", up);\n      window.removeEventListener(\"blur\", blur);\n    };\n  }, [commit, setTool, tool]);\n\n  /** Screen coordinates inside the canvas — the space every cosmos.gl hit test speaks. */\n  const at = (event: React.PointerEvent): Point => {\n    const box = event.currentTarget.getBoundingClientRect();\n    return [event.clientX - box.left, event.clientY - box.top];\n  };\n\n  const finish = (shape: Drag | null, event: React.PointerEvent) => {\n    setDrag(null);\n    setPreview(null);\n    if (!shape) return;\n    // The hit test answers in buffer indices, and a drawn vertex's index is its id.\n    const vertices = new Set<VertexId>(hitTest(shape));\n    // A gesture that caught nothing and asked for nothing is a misfire, not a request to clear —\n    // clearing is what the corner's own button and Escape are for.\n    if (vertices.size === 0 && !event.altKey) return;\n    const { label, source } = NAME[shape.tool];\n    const held = getSelection()?.vertices ?? [];\n    if (event.altKey) {\n      const next = new Set(held);\n      for (const vertex of vertices) next.delete(vertex);\n      commit(next.size > 0 ? next : null, source, label);\n    } else if (event.metaKey || event.ctrlKey) {\n      commit(new Set([...held, ...vertices]), source, label);\n    } else {\n      commit(vertices, source, label);\n    }\n  };\n\n  const active: Tool = tool ?? (shift ? \"rect\" : null);\n\n  return {\n    drag,\n    preview,\n    active,\n    handlers: {\n      onPointerDown: (event) => {\n        if (event.button !== 0) return;\n        event.currentTarget.setPointerCapture(event.pointerId);\n        const start = at(event);\n        setDrag(\n          active === \"rect\"\n            ? { tool: \"rect\", from: start, to: start }\n            : { tool: \"lasso\", path: [start] },\n        );\n      },\n      onPointerMove: (event) => {\n        if (!drag) return;\n        const next = at(event);\n        if (drag.tool === \"rect\") {\n          const shape: Drag = { ...drag, to: next };\n          setDrag(shape);\n          measure(shape);\n          return;\n        }\n        const last = drag.path[drag.path.length - 1] as Point;\n        if (Math.hypot(next[0] - last[0], next[1] - last[1]) < PATH_STEP) return;\n        const shape: Drag = { tool: \"lasso\", path: [...drag.path, next] };\n        setDrag(shape);\n        measure(shape);\n      },\n      onPointerUp: (event) => finish(drag, event),\n      onPointerCancel: () => {\n        setDrag(null);\n        setPreview(null);\n      },\n    },\n  };\n}\n"],"names":[],"mappings":";;AAwBA;AAOO;AACL;AACA;AACA;AACF;AA0BA;AAAmF;AAC/C;AAEpC;AAEO;AACL;AAMgB;AAEZ;AACA;AAGA;AACE;AACA;AACa;AACY;AACc;AACA;AACpC;AAAA;AAGL;AACuD;AACzD;AACS;AAKK;AAEZ;AACA;AAEgC;AAClC;AACQ;AAMV;AACE;AAEE;AAOe;AAGf;AAAyC;AAG3C;AAIE;AAEuC;AACzC;AAIF;AACE;AACA;AAAyD;;AAMzD;AAEA;AAGA;AACA;AAEA;AACE;AACA;AACA;AAAiD;AAInB;AAMlC;AAAO;AACL;AACA;AACA;AACU;AAEN;AACA;AACA;AACA;AAAA;AAGmC;AAAE;AAEvC;AAEE;AACA;AACA;AACE;AACA;AAEA;AAAA;AAEF;AACA;AACA;AACA;AACa;AACf;AAC0C;AAExC;AACe;AACjB;AAAA;AAGN;;;;;"}

package/dist/parts/graph-canvas.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"graph-canvas.d.ts","sourceRoot":"","sources":["../../src/parts/graph-canvas.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAqD,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAc1F,MAAM,WAAW,gBAAiB,SAAQ,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC;IACnE,oFAAoF;IACpF,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AA+BD;;;;;;;;;GASG;AACH,wBAAgB,WAAW,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,IAAI,EAAE,GAAG,IAAI,EAAE,EAAE,gBAAgB,+BA0InF"}
+{"version":3,"file":"graph-canvas.d.ts","sourceRoot":"","sources":["../../src/parts/graph-canvas.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAqD,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAe1F,MAAM,WAAW,gBAAiB,SAAQ,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC;IACnE,oFAAoF;IACpF,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAkDD;;;;;;;;;GASG;AACH,wBAAgB,WAAW,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,IAAI,EAAE,GAAG,IAAI,EAAE,EAAE,gBAAgB,+BAgJnF"}

package/dist/parts/graph-canvas.js

@@ -1,185 +1,196 @@
 "use client";
-import { jsxs as y, jsx as t } from "react/jsx-runtime";
-import { useThemeTick as K, categoricalCapacity as P, Show as h, cn as Q } from "@kanzo-tech/ui";
-import { useMemo as S, useCallback as W, useRef as U, useState as V, useEffect as N } from "react";
-import { nameOf as X } from "../core/categories.js";
-import { denseOf as Y } from "../core/resident.js";
-import { useGraphContext as Z } from "../react/graph-root.js";
-import { internalsOf as ee } from "../react/use-graph.js";
-import { useGraphState as g } from "../react/use-graph-state.js";
-import { resolveLook as te } from "../render/graph-looks.js";
-import { scaleOf as re } from "../render/graph-model.js";
-import { useGesture as ne, cursorChip as ae } from "./gesture.js";
-import { useOverlays as oe } from "./overlays.js";
-import { ShapeGlyph as se } from "./shape-glyph.js";
-const j = "var(--brand-a5)";
-function le(c, s, m) {
-  const u = c.titles;
-  if (!u || s <= 0) return [];
-  const n = Array.from({ length: c.vertices }, (i, r) => r), d = c.sizes;
-  d && n.sort((i, r) => (d[r] ?? 0) - (d[i] ?? 0));
-  const l = n.slice(0, s), a = m === null ? void 0 : c.resident.indexOf(m);
-  return a !== void 0 && !l.includes(a) && l.unshift(a), l.flatMap((i) => {
-    const r = c.resident.at(i), v = u[i];
-    return r === void 0 || !v ? [] : [{ vertex: r, text: v }];
-  });
+import { jsxs as b, jsx as a } from "react/jsx-runtime";
+import { useThemeTick as Y, categoricalCapacity as Z, Show as g, cn as ee } from "@kanzo-tech/ui";
+import { useMemo as x, useCallback as $, useRef as te, useEffect as y, useState as oe } from "react";
+import { nameOf as ne } from "../core/categories.js";
+import { readTitles as re } from "../core/detail.js";
+import { useGraphContext as F } from "../react/graph-root.js";
+import { internalsOf as ae } from "../react/use-graph.js";
+import { useGraphState as m, useGraphSnapshot as S } from "../react/use-graph-state.js";
+import { resolveLook as se } from "../render/graph-looks.js";
+import { scaleOf as le } from "../render/graph-model.js";
+import { useGesture as ie, cursorChip as ce } from "./gesture.js";
+import { useOverlays as pe } from "./overlays.js";
+import { ShapeGlyph as de } from "./shape-glyph.js";
+const E = "color-mix(in oklab, var(--primary) 17%, transparent)";
+function me(u, d, i, p, s) {
+  const c = d.sizes, n = [];
+  if (c && p > 0)
+    for (let t = 0; t < u.size; t++) {
+      const r = c[t];
+      if (i && !i[t] || Number.isNaN(r) || n.length === p && r <= c[n[p - 1]]) continue;
+      let o = n.length;
+      for (; o > 0 && c[n[o - 1]] < r; ) o--;
+      n.splice(o, 0, t), n.length > p && n.pop();
+    }
+  return s === null || n.includes(s) ? n : [s, ...n];
+}
+function D(u) {
+  const d = F(), i = m((r) => r.corpus), p = m((r) => r.options.title), s = S((r) => r.geometry), [c, n] = oe(() => /* @__PURE__ */ new Map()), t = u.join(",");
+  return y(() => {
+    if (!i || !s || t === "") return;
+    const r = new AbortController();
+    return re(i, s, t.split(",").map(Number), p, r.signal).then(
+      (o) => !r.signal.aborted && n(o),
+      (o) => !r.signal.aborted && d.getState().options.onFailure(o instanceof Error ? o.message : String(o))
+    ), () => r.abort();
+  }, [d, i, s, t, p]), c;
 }
-const ie = {
+const ue = {
   opening: "Opening the corpus…",
-  reading: "Reading the corpus…"
+  loading: "Loading the graph…"
 };
-function Ne({ children: c, className: s, slot: m, ...u }) {
-  const n = Z(), { attach: d, renderer: l } = ee(n), a = g((e) => e.focus), i = g((e) => e.tool), r = g((e) => e.options), v = g((e) => {
-    var f;
-    return ((f = e.drawn) == null ? void 0 : f.domain) ?? e.domain;
-  }), x = g((e) => e.drawn === null ? ie[e.status] : void 0), p = S(() => te(r.look), [r.look]), k = W(() => {
+function Me({ children: u, className: d, slot: i, ...p }) {
+  const s = F(), { attach: c, renderer: n } = ae(s), t = m((e) => e.focus), r = m((e) => e.tool), o = m((e) => e.options), k = m((e) => {
+    var h;
+    return ((h = e.drawn) == null ? void 0 : h.domain) ?? e.domain;
+  }), w = m((e) => e.drawn === null ? ue[e.status] : void 0), f = x(() => se(o.look), [o.look]), R = $(() => {
     var e;
-    return ((e = l()) == null ? void 0 : e.graph) ?? null;
-  }, [l]), H = oe({ getGraph: k, getResident: n.getResident }), { cardRef: I, gridRef: $, hostRef: R, hoverAt: G, labelRef: L, schedule: b, setHovered: D, setLabelOrder: _, track: M } = H, T = U(null), [w, E] = V(null);
-  N(() => {
-    const e = T.current;
+    return ((e = n()) == null ? void 0 : e.graph) ?? null;
+  }, [n]), q = pe({ getGraph: R }), { cardRef: B, gridRef: J, hostRef: T, hoverAt: _, labelRef: K, schedule: v, setHovered: P, setLabelOrder: j, track: A } = q, I = te(null), G = S((e) => e.geometry), N = S((e) => e.encoding), W = S((e) => e.mask);
+  y(() => {
+    const e = I.current;
     if (e)
-      return d(e, { onFrame: b, onComposed: E, onHover: G });
-  }, [d, G, b]);
-  const F = K();
-  N(() => {
+      return c(e, { onFrame: v, onHover: _ });
+  }, [c, _, v]);
+  const Q = Y();
+  y(() => {
     var e;
-    (e = l()) == null || e.repaint();
-  }, [l, F]);
-  const O = S(
-    () => w ? le(w, p.labels, a) : [],
-    [w, a, p.labels]
+    (e = n()) == null || e.repaint();
+  }, [n, Q]);
+  const C = x(
+    () => G && N ? me(G, N, W, f.labels, t) : [],
+    [G, N, W, t, f.labels]
+  ), M = D(C), z = x(
+    () => C.flatMap((e) => M.get(e) ? [{ vertex: e, text: M.get(e) }] : []),
+    [C, M]
   );
-  N(() => {
-    _(O.map((e) => e.vertex)), M(), b();
-  }, [O, b, _, M, p.grid]);
-  const z = ne({
-    getGraph: k,
-    getResident: n.getResident,
-    getSelection: W(() => n.getState().selection, [n]),
-    commit: (e, f, J) => n.select(e ? [...e] : null, f, J),
-    setTool: n.setTool,
-    tool: i
-  }), { active: q, drag: o, preview: C } = z, A = R.current ? P(R.current) : void 0, B = S(() => re(r, A), [r, A]);
-  return /* @__PURE__ */ y(
+  y(() => {
+    j(z.map((e) => e.vertex)), A(), v();
+  }, [z, v, j, A, f.grid]);
+  const H = ie({
+    getGraph: R,
+    getSelection: $(() => s.getState().selection, [s]),
+    commit: (e, h, X) => s.select(e ? [...e] : null, h, X),
+    setTool: s.setTool,
+    tool: r
+  }), { active: U, drag: l, preview: O } = H, L = T.current ? Z(T.current) : void 0, V = x(() => le(o, L), [o, L]);
+  return /* @__PURE__ */ b(
     "div",
     {
-      ...u,
-      className: Q("relative isolate size-full overflow-hidden bg-background", s),
-      "data-slot": m ?? "graph-canvas",
-      ref: R,
+      ...p,
+      className: ee("relative isolate size-full overflow-hidden bg-background", d),
+      "data-slot": i ?? "graph-canvas",
+      ref: T,
       children: [
-        /* @__PURE__ */ t("div", { className: "size-full", "data-slot": "graph-canvas-surface", ref: T }),
-        /* @__PURE__ */ t(h, { when: p.grid, children: /* @__PURE__ */ t(
+        /* @__PURE__ */ a("div", { className: "size-full", "data-slot": "graph-canvas-surface", ref: I }),
+        /* @__PURE__ */ a(g, { when: f.grid, children: /* @__PURE__ */ a(
           "div",
           {
             className: "pointer-events-none absolute inset-0",
-            ref: $,
+            ref: J,
             style: { backgroundImage: "radial-gradient(var(--border) 1px, transparent 1px)" }
           }
         ) }),
-        /* @__PURE__ */ t(h, { when: p.vignette, children: /* @__PURE__ */ t(
+        /* @__PURE__ */ a(g, { when: f.vignette, children: /* @__PURE__ */ a(
           "div",
           {
             className: "pointer-events-none absolute inset-0",
             style: { background: "radial-gradient(ellipse 75% 65% at 50% 45%, transparent 30%, var(--background) 100%)" }
           }
         ) }),
-        /* @__PURE__ */ y("div", { className: "pointer-events-none absolute inset-0 overflow-hidden", children: [
-          O.map((e) => /* @__PURE__ */ t(
+        /* @__PURE__ */ b("div", { className: "pointer-events-none absolute inset-0 overflow-hidden", children: [
+          z.map((e) => /* @__PURE__ */ a(
             "span",
             {
               className: "absolute top-0 left-0 whitespace-nowrap font-medium text-[10px] text-foreground leading-none opacity-0 transition-opacity [text-shadow:0_0_3px_var(--background),0_0_6px_var(--background)]",
-              ref: L(e.vertex),
+              ref: K(e.vertex),
               children: e.text
             },
             String(e.vertex)
           )),
-          /* @__PURE__ */ t(
-            ce,
+          /* @__PURE__ */ a(
+            he,
             {
-              cardRef: I,
-              composition: w,
-              domain: v,
-              options: r,
-              scale: B,
-              schedule: b,
-              setHovered: D
+              cardRef: B,
+              domain: k,
+              encoding: N,
+              options: o,
+              scale: V,
+              schedule: v,
+              setHovered: P
             }
           )
         ] }),
-        /* @__PURE__ */ t(h, { when: q !== null, children: /* @__PURE__ */ y("div", { className: "absolute inset-0 cursor-crosshair", "data-slot": "graph-canvas-gesture", ...z.handlers, children: [
-          o && /* @__PURE__ */ t("svg", { className: "pointer-events-none size-full", children: o.tool === "rect" ? /* @__PURE__ */ t(
+        /* @__PURE__ */ a(g, { when: U !== null, children: /* @__PURE__ */ b("div", { className: "absolute inset-0 cursor-crosshair", "data-slot": "graph-canvas-gesture", ...H.handlers, children: [
+          l && /* @__PURE__ */ a("svg", { className: "pointer-events-none size-full", children: l.tool === "rect" ? /* @__PURE__ */ a(
             "rect",
             {
               className: "stroke-primary",
-              height: Math.abs(o.to[1] - o.from[1]),
+              height: Math.abs(l.to[1] - l.from[1]),
               strokeDasharray: "4 3",
               strokeWidth: 1,
-              style: { fill: j },
-              width: Math.abs(o.to[0] - o.from[0]),
-              x: Math.min(o.from[0], o.to[0]),
-              y: Math.min(o.from[1], o.to[1])
+              style: { fill: E },
+              width: Math.abs(l.to[0] - l.from[0]),
+              x: Math.min(l.from[0], l.to[0]),
+              y: Math.min(l.from[1], l.to[1])
             }
-          ) : o.path.length > 1 && /* @__PURE__ */ t(
+          ) : l.path.length > 1 && /* @__PURE__ */ a(
             "polygon",
             {
               className: "stroke-primary",
-              points: o.path.map(([e, f]) => `${e},${f}`).join(" "),
+              points: l.path.map(([e, h]) => `${e},${h}`).join(" "),
               strokeWidth: 1,
-              style: { fill: j }
+              style: { fill: E }
             }
           ) }),
-          /* @__PURE__ */ t(h, { when: C !== null, children: /* @__PURE__ */ y(
+          /* @__PURE__ */ a(g, { when: O !== null, children: /* @__PURE__ */ b(
             "span",
             {
               className: "pointer-events-none absolute rounded-sm bg-primary px-1.5 py-0.5 font-medium text-[10px] text-primary-foreground tabular-nums",
-              style: ae(o),
+              style: ce(l),
               children: [
-                C,
+                O,
                 " node",
-                C === 1 ? "" : "s"
+                O === 1 ? "" : "s"
               ]
             }
           ) })
         ] }) }),
-        /* @__PURE__ */ t(h, { when: x !== void 0, children: /* @__PURE__ */ t(
+        /* @__PURE__ */ a(g, { when: w !== void 0, children: /* @__PURE__ */ a(
           "p",
           {
             className: "pointer-events-none absolute inset-0 grid place-items-center text-muted-foreground text-xs",
             "data-slot": "graph-canvas-waiting",
-            children: x
+            children: w
           }
         ) }),
-        c
+        u
       ]
     }
   );
 }
-function ce({ cardRef: c, composition: s, domain: m, options: u, scale: n, schedule: d, setHovered: l }) {
-  var p;
-  const a = g((k) => k.hovered);
-  N(() => {
-    l(a), d();
-  }, [a, d, l]);
-  const i = a === null || s == null ? void 0 : s.resident.indexOf(a);
-  if (a === null || !s || i === void 0) return null;
-  const r = s.categories[i] ?? 0, x = (u.fill !== void 0 || u.symbol !== void 0) && r < m.length ? X(m[r], u.categories) : null;
-  return /* @__PURE__ */ y(
+function he({ cardRef: u, domain: d, encoding: i, options: p, scale: s, schedule: c, setHovered: n }) {
+  const t = m((w) => w.hovered), r = D(x(() => t === null ? [] : [t], [t]));
+  if (y(() => {
+    n(t), c();
+  }, [t, c, n, r]), t === null || !i || t >= i.ranks.length) return null;
+  const o = i.ranks[t] ?? 0, k = o < d.length ? ne(d[o], p.categories) : null;
+  return /* @__PURE__ */ b(
     "div",
     {
       className: "absolute top-0 left-0 flex w-max max-w-60 items-center gap-2 rounded-lg border bg-popover px-2.5 py-2 opacity-0 shadow-lg",
       "data-slot": "graph-canvas-card",
-      ref: c,
+      ref: u,
       children: [
-        /* @__PURE__ */ t(se, { className: "size-2.5 shrink-0", color: n.color(r), shape: n.shape(r) }),
-        /* @__PURE__ */ t("span", { className: "truncate font-medium text-popover-foreground text-sm leading-none", children: ((p = s.titles) == null ? void 0 : p[i]) || `#${Y(a)}` }),
-        /* @__PURE__ */ t(h, { when: x !== null, children: /* @__PURE__ */ t("span", { className: "text-muted-foreground text-xs", children: x }) })
+        /* @__PURE__ */ a(de, { className: "size-2.5 shrink-0", color: s.color(o), shape: s.shape(o) }),
+        /* @__PURE__ */ a("span", { className: "truncate font-medium text-popover-foreground text-sm leading-none", children: r.get(t) || `#${t}` }),
+        /* @__PURE__ */ a(g, { when: k !== null, children: /* @__PURE__ */ a("span", { className: "text-muted-foreground text-xs", children: k }) })
       ]
     }
   );
 }
 export {
-  Ne as GraphCanvas
+  Me as GraphCanvas
 };
 //# sourceMappingURL=graph-canvas.js.map