@kanzo-tech/graph 0.10.0 → 0.11.0

package/dist/index.d.ts

@@ -1,73 +1,40 @@
 /**
- * A GPU graph view, in the pieces a host actually composes.
- *
- * **`GraphCanvas` owns the three that never differ; the arrangement stays at the call site.** This
- * barrel said for a long time that there was no canvas component, on the argument that a graph
- * canvas is a toolbar, a legend, an inspector and a hover card — all of them per-product. That half
- * is still true and they are still yours. What the argument missed is that underneath them sit
- * three things that were identical everywhere and re-wired by hand each time: the renderer's
- * lifetime, the query loop that follows the camera, and the buffers a look implies.
- * `/docs/design/graph` has the measurement.
- *
- * **Why a package and not `@kanzo-tech/ui`.** The first admission rule is *domain-free —
- * nothing about RDF / SHACL / fossil / graphs / auth*. Graphs are excluded by name, deliberately:
- * `ui` is the generic vocabulary shared by every product. A sibling package is also the only place
- * a required WebGL peer belongs.
- *
- * **The measurements that shape it** are on `/docs/graph/benchmarks`: a live simulation is comfortable to
- * about 50,000 points and finished by 200,000, and past that the honest design is positions
- * precomputed once and stored as a column — which is why a simulation is opt-in here and off by
- * default, and why the render path is bounded rather than fast.
- */
-export { scaleOf, neighboursOf, type Channels } from './graph-model';
-export { lookFrom, type Look, type LookPatch, type Shape, } from './graph-looks';
-export { ShapeGlyph, type ShapeGlyphProps } from './shape-glyph';
-/**
- * The graph, in Ark's four pieces.
- *
- * `useGraph(props)` **creates** the api and `useGraphContext()` **reads** it, which is Ark's
- * convention and was inverted here: the reader was `useGraphCanvas` and there was no creator.
- * `GraphCanvas` is the shortcut that does both, and `GraphRootProvider` is what a host reaches for
- * when it has to call a hook *beside* the canvas — `useGraphOverlays` takes the api and the `events`
- * block reads `getGraph`/`getResident` off it, both from above the element where no context is
- * readable.
- *
- * That was not a symmetry we wanted for its own sake: it is what the workspace could not adopt
- * `GraphCanvas` without, and the `graphRef`/`residentRef` props that stood in for it are gone.
- */
-export { GraphCanvas, GraphRootProvider, useGraphContext, type GraphCanvasProps, type GraphRootProviderProps, } from './graph-canvas';
-export { useGraph, type GraphApi, type GraphEvents, type UseGraphProps } from './use-graph';
-export { useGraphOverlays, type GraphOverlays } from './use-graph-overlays';
-export { useGraphSelection, cursorChip } from './use-graph-selection';
-/**
- * Identity, and the map from it to the buffer index cosmos.gl draws at.
- *
- * The renderer addresses points by position in the arrays it was handed, and a resident set that
- * comes and goes reuses every position. So a vertex is the pair `(type_idx, dense_id)`, and
- * everything that outlives one answer is held as one and re-resolved through the `Resident` that
- * `useQueryLoop` rebuilds per answer. A host never builds its own: two maps of the same thing is
- * how one of them ends up describing buffers that are no longer on screen.
- */
-export { residentOf, vertexId, typeOf, denseOf, type Resident, type VertexId, } from './resident';
-/**
- * The bounded render path — a graph you never hold all of.
- *
- * A contract, not a format: anything that can answer "what is in this rectangle, at this zoom, in
- * at most this many marks" is a source. A tile fetched by a computed address is one; a relation
- * with `x`/`y` and a spatial predicate is another. This package renders and does not learn a storage layout,
- * which is what removed the ceiling rather than raising it.
- *
- * `useQueryLoop` is the loop that asks — it observes the camera, debounces, cancels what the
- * camera has already superseded, and pushes each answer into the renderer. **The source itself is
- * not here and there is one of it**: `openCorpus`, on `@kanzo-tech/graph/duckdb`, because a corpus
- * is read through a database and a database is an optional peer. What is left on this barrel is the
- * rendering surface — the hooks, the look, identity and the buffers a slice implies — and it draws
- * nothing on its own.
+ * The graph view over a fossil corpus. fossil reads and this package draws, and nothing crosses
+ * between them but the corpus contract: the host opens the corpus with fossil's `open` on the page's
+ * `engine()`, and `GraphRoot` draws it.
+ *
+ * Four layers, each the shape of a named reference — `/docs/design/graph`:
+ *
+ * - `core/` — a headless tileset in deck.gl's `Tileset2D` shape over `tileMatrix` and `scan`, and a
+ *   store in TanStack Query's observer shape. No React, no cosmos.gl, no SQL.
+ * - `render/` — tiles to cosmos.gl buffers: encoded once per tile, uploaded by kind, rendered once a
+ *   frame.
+ * - `react/` — `useGraph`, `GraphRoot`, `GraphRootProvider`, `useGraphContext`: Ark's four; and
+ *   `useGraphState`, TanStack Store's selector, because the api is commands and the state moves at
+ *   frame rate.
+ * - `parts/` — `GraphCanvas`, `GraphLegend`, `GraphToolbar`, `GraphInspector`: flat parts over the
+ *   one context. They own the vocabulary; the root's callbacks are the host's policy.
+ *
+ * **Why a package and not `@kanzo-tech/ui`.** The first admission rule is *domain-free — nothing
+ * about RDF / SHACL / fossil / graphs / auth*. Graphs are excluded by name, and a sibling package is
+ * the only place a required WebGL peer belongs.
  */
-export { shouldSlice, type BoundedSource, type Slice, type SliceRequest, type Viewport, } from './bounded';
-export { adaptive } from './adaptive';
-export { resolveToken, toHex, type Rgba } from './css-color';
-export { type GraphCommands, type Motion, type Selection, type SelectionSource, type Tool, } from './types';
-export { simFrom, type Sim } from './graph-sim';
-export { useGraphPrefs } from './use-graph-prefs';
+export { GraphRoot, GraphRootProvider, useGraphContext, type GraphRootProps, type GraphRootProviderProps, } from './react/graph-root';
+export { useGraph, type GraphApi, type UseGraphProps } from './react/use-graph';
+export { useGraphState } from './react/use-graph-state';
+export { useGraphPrefs } from './react/use-graph-prefs';
+export { GraphCanvas, type GraphCanvasProps } from './parts/graph-canvas';
+export { GraphLegend, type GraphLegendProps } from './parts/graph-legend';
+export { GraphToolbar, type GraphToolbarProps } from './parts/graph-toolbar';
+export { GraphInspector, type GraphInspectorProps } from './parts/graph-inspector';
+export { ShapeGlyph, type ShapeGlyphProps } from './parts/shape-glyph';
+export { lookFrom, type Look, type LookPatch, type Shape } from './render/graph-looks';
+export { simFrom, type Sim } from './render/graph-sim';
+export { adaptive } from './render/adaptive';
+export { scaleOf } from './render/graph-model';
+export type { Channels } from './core/channels';
+export { vertexId, typeOf, denseOf, type Resident, type VertexId } from './core/resident';
+export type { GraphCommands, Motion, Selection, SelectionSource, Tool } from './core/types';
+export type { Drawn, GraphState, GraphStatus } from './core/state';
+export type { VertexDetail } from './core/detail';
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;GAoBG;AAeH,OAAO,EAAE,OAAO,EAAE,YAAY,EAAE,KAAK,QAAQ,EAAE,MAAM,eAAe,CAAC;AAqBrE,OAAO,EAIL,QAAQ,EACR,KAAK,IAAI,EACT,KAAK,SAAS,EACd,KAAK,KAAK,GACX,MAAM,eAAe,CAAC;AAQvB,OAAO,EAAE,UAAU,EAAE,KAAK,eAAe,EAAE,MAAM,eAAe,CAAC;AAEjE;;;;;;;;;;;;GAYG;AACH,OAAO,EACL,WAAW,EACX,iBAAiB,EACjB,eAAe,EACf,KAAK,gBAAgB,EACrB,KAAK,sBAAsB,GAC5B,MAAM,gBAAgB,CAAC;AACxB,OAAO,EAAE,QAAQ,EAAE,KAAK,QAAQ,EAAE,KAAK,WAAW,EAAE,KAAK,aAAa,EAAE,MAAM,aAAa,CAAC;AAgC5F,OAAO,EAAE,gBAAgB,EAAE,KAAK,aAAa,EAAE,MAAM,sBAAsB,CAAC;AAC5E,OAAO,EAAE,iBAAiB,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AAEtE;;;;;;;;GAQG;AACH,OAAO,EACL,UAAU,EACV,QAAQ,EACR,MAAM,EACN,OAAO,EACP,KAAK,QAAQ,EACb,KAAK,QAAQ,GACd,MAAM,YAAY,CAAC;AAuBpB;;;;;;;;;;;;;;GAcG;AAoBH,OAAO,EACL,WAAW,EACX,KAAK,aAAa,EAClB,KAAK,KAAK,EACV,KAAK,YAAY,EACjB,KAAK,QAAQ,GACd,MAAM,WAAW,CAAC;AAsBnB,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAKtC,OAAO,EAAE,YAAY,EAAE,KAAK,EAAE,KAAK,IAAI,EAAE,MAAM,aAAa,CAAC;AAE7D,OAAO,EACL,KAAK,aAAa,EAClB,KAAK,MAAM,EACX,KAAK,SAAS,EACd,KAAK,eAAe,EACpB,KAAK,IAAI,GACV,MAAM,SAAS,CAAC;AASjB,OAAO,EAAE,OAAO,EAAE,KAAK,GAAG,EAAE,MAAM,aAAa,CAAC;AAIhD,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;GAoBG;AAEH,OAAO,EACL,SAAS,EACT,iBAAiB,EACjB,eAAe,EACf,KAAK,cAAc,EACnB,KAAK,sBAAsB,GAC5B,MAAM,oBAAoB,CAAC;AAC5B,OAAO,EAAE,QAAQ,EAAE,KAAK,QAAQ,EAAE,KAAK,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAChF,OAAO,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAC;AACxD,OAAO,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAC;AAExD,OAAO,EAAE,WAAW,EAAE,KAAK,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AAC1E,OAAO,EAAE,WAAW,EAAE,KAAK,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AAC1E,OAAO,EAAE,YAAY,EAAE,KAAK,iBAAiB,EAAE,MAAM,uBAAuB,CAAC;AAC7E,OAAO,EAAE,cAAc,EAAE,KAAK,mBAAmB,EAAE,MAAM,yBAAyB,CAAC;AACnF,OAAO,EAAE,UAAU,EAAE,KAAK,eAAe,EAAE,MAAM,qBAAqB,CAAC;AAIvE,OAAO,EAAE,QAAQ,EAAE,KAAK,IAAI,EAAE,KAAK,SAAS,EAAE,KAAK,KAAK,EAAE,MAAM,sBAAsB,CAAC;AACvF,OAAO,EAAE,OAAO,EAAE,KAAK,GAAG,EAAE,MAAM,oBAAoB,CAAC;AACvD,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAC;AAC/C,YAAY,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAIhD,OAAO,EAAE,QAAQ,EAAE,MAAM,EAAE,OAAO,EAAE,KAAK,QAAQ,EAAE,KAAK,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAE1F,YAAY,EAAE,aAAa,EAAE,MAAM,EAAE,SAAS,EAAE,eAAe,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAC5F,YAAY,EAAE,KAAK,EAAE,UAAU,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AACnE,YAAY,EAAE,YAAY,EAAE,MAAM,eAAe,CAAC"}

package/dist/index.js

@@ -1,37 +1,35 @@
-import { neighboursOf as e, scaleOf as p } from "./graph-model.js";
-import { lookFrom as f } from "./graph-looks.js";
-import { ShapeGlyph as s } from "./shape-glyph.js";
-import { GraphCanvas as a, GraphRootProvider as h, useGraphContext as i } from "./graph-canvas.js";
-import { useGraph as u } from "./use-graph.js";
-import { useGraphOverlays as n } from "./use-graph-overlays.js";
-import { cursorChip as v, useGraphSelection as O } from "./use-graph-selection.js";
-import { denseOf as y, residentOf as C, typeOf as S, vertexId as k } from "./resident.js";
-import { shouldSlice as P } from "./bounded.js";
-import { adaptive as g } from "./adaptive.js";
-import { resolveToken as I, toHex as R } from "./css-color.js";
-import { simFrom as j } from "./graph-sim.js";
-import { useGraphPrefs as w } from "./use-graph-prefs.js";
+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 { 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";
 export {
-  a as GraphCanvas,
-  h as GraphRootProvider,
-  s as ShapeGlyph,
-  g as adaptive,
-  v as cursorChip,
-  y as denseOf,
-  f as lookFrom,
-  e as neighboursOf,
-  C as residentOf,
-  I as resolveToken,
-  p as scaleOf,
-  P as shouldSlice,
-  j as simFrom,
-  R as toHex,
-  S as typeOf,
-  u as useGraph,
-  i as useGraphContext,
-  n as useGraphOverlays,
-  w as useGraphPrefs,
-  O as useGraphSelection,
-  k as vertexId
+  d as GraphCanvas,
+  O as GraphInspector,
+  l 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,
+  t as useGraphContext,
+  G as useGraphPrefs,
+  x as useGraphState,
+  j as vertexId
 };
 //# 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/{use-graph-selection.d.ts → parts/gesture.d.ts}

@@ -1,7 +1,7 @@
 import { default as React } from 'react';
 import { Graph } from '@cosmos.gl/graph';
-import { Resident, VertexId } from './resident';
-import { Selection, SelectionSource, Tool } from './types';
+import { Resident, VertexId } from '../core/resident';
+import { Selection, SelectionSource, Tool } from '../core/types';
 /**
  * Drawing a selection on the canvas: the marquee, the lasso, and the keys that modify them.
  *
@@ -55,5 +55,5 @@ export interface GraphSelectionOptions {
     tool: Tool;
     setTool: (tool: Tool) => void;
 }
-export declare function useGraphSelection(options: GraphSelectionOptions): GraphSelectionGesture;
-//# sourceMappingURL=use-graph-selection.d.ts.map
+export declare function useGesture(options: GraphSelectionOptions): GraphSelectionGesture;
+//# sourceMappingURL=gesture.d.ts.map

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

@@ -0,0 +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;AAGtE;;;;;;;;;;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,CA6IhF"}

package/dist/{use-graph-selection.js → parts/gesture.js}

@@ -1,6 +1,6 @@
 "use client";
-import { useState as m, useRef as C, useCallback as P, useEffect as I } from "react";
-import { isReady as K } from "./when-ready.js";
+import { useState as m, useRef as C, useCallback as S, useEffect as I } from "react";
+import { isReady as K } from "../render/when-ready.js";
 const x = 3, _ = 4, q = 60;
 function N(l) {
   if (!l) return { display: "none" };
@@ -12,7 +12,7 @@ const z = {
   lasso: { source: "lasso", label: "Lasso" }
 };
 function U(l) {
-  const { commit: i, getGraph: a, getResident: k, getSelection: v, setTool: y, tool: h } = l, [s, c] = m(null), [L, f] = m(null), [R, p] = m(!1), b = C(0), d = P(
+  const { commit: i, getGraph: a, getResident: k, getSelection: v, setTool: y, tool: h } = l, [s, c] = m(null), [L, f] = m(null), [R, d] = m(!1), b = C(0), p = S(
     (t) => {
       const e = a();
       if (!e) return [];
@@ -29,19 +29,19 @@ function U(l) {
       return t.path.length < 3 ? [] : Array.from(e.findPointsInPolygon(t.path));
     },
     [a]
-  ), E = P(
+  ), E = S(
     (t) => {
       const e = performance.now();
-      e - b.current < q || (b.current = e, f(d(t).length));
+      e - b.current < q || (b.current = e, f(p(t).length));
     },
-    [d]
+    [p]
   );
   I(() => {
     const t = (n) => {
-      n.key === "Shift" && p(!0), n.key === "Escape" && (c((r) => (r || (h ? y(null) : i(null, "node", "")), null)), f(null));
+      n.key === "Shift" && d(!0), n.key === "Escape" && (c((r) => (r || (h ? y(null) : i(null, "node", "")), null)), f(null));
     }, e = (n) => {
-      n.key === "Shift" && p(!1);
-    }, o = () => p(!1);
+      n.key === "Shift" && d(!1);
+    }, o = () => d(!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);
     };
@@ -50,28 +50,28 @@ function U(l) {
     const e = t.currentTarget.getBoundingClientRect();
     return [t.clientX - e.left, t.clientY - e.top];
   }, T = (t, e) => {
-    var g;
+    var P;
     if (c(null), f(null), !t) return;
-    const o = new Set(k().verticesAt(d(t)));
+    const o = new Set(k().verticesAt(p(t)));
     if (o.size === 0 && !e.altKey) return;
-    const { label: n, source: r } = z[t.tool], u = ((g = v()) == null ? void 0 : g.vertices) ?? [];
+    const { label: n, source: r } = z[t.tool], u = ((P = v()) == null ? void 0 : P.vertices) ?? [];
     if (e.altKey) {
       const w = new Set(u);
       for (const A of o) w.delete(A);
       i(w.size > 0 ? w : null, r, n);
     } else e.metaKey || e.ctrlKey ? i(/* @__PURE__ */ new Set([...u, ...o]), r, n) : i(o, r, n);
-  }, S = h ?? (R ? "rect" : null);
+  }, g = h ?? (R ? "rect" : null);
   return {
     drag: s,
     preview: L,
-    active: S,
+    active: g,
     handlers: {
       onPointerDown: (t) => {
         if (t.button !== 0) return;
         t.currentTarget.setPointerCapture(t.pointerId);
         const e = M(t);
         c(
-          S === "rect" ? { tool: "rect", from: e, to: e } : { tool: "lasso", path: [e] }
+          g === "rect" ? { tool: "rect", from: e, to: e } : { tool: "lasso", path: [e] }
         );
       },
       onPointerMove: (t) => {
@@ -96,6 +96,6 @@ function U(l) {
 }
 export {
   N as cursorChip,
-  U as useGraphSelection
+  U as useGesture
 };
-//# sourceMappingURL=use-graph-selection.js.map
+//# sourceMappingURL=gesture.js.map

package/dist/parts/gesture.js.map

@@ -0,0 +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\";\nimport { isReady } from \"../render/when-ready\";\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      // **Upstream's own words, on these two and on nothing else in its `.d.ts`:** *this method is\n      // synchronous and must only be called when the graph is ready*. There is nothing to await in\n      // a pointer handler, so the answer for a device that is not there is the honest one — a\n      // gesture over a graph that has not drawn selects nothing, which is what it looks like.\n      if (!isReady(graph)) return [];\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":";;;AA0BA;AAOO;AACL;AACA;AACA;AACF;AAkCA;AAAmF;AAC/C;AAEpC;AAEO;AACL;AAMgB;AAEZ;AACA;AAKA;AACA;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;;;;;"}

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

@@ -0,0 +1,17 @@
+import { ReactNode } from 'react';
+export interface GraphCanvasProps extends React.ComponentProps<"div"> {
+    /** The chrome — a toolbar, a legend, an inspector — positioned over the surface. */
+    children?: ReactNode;
+}
+/**
+ * **The element, and what the look declares over it** — the grid, the vignette, the labels and the
+ * hover card are fields of `Look`, so drawing them is the canvas's; the marquee and lasso gesture is
+ * too. Two layers: cosmos.gl fills the surface with a canvas of its own, so chrome parented there
+ * would be a sibling inside an element the renderer resizes. The frame is `isolate`, so a host's
+ * `z-index` on a child cannot escape into the page.
+ *
+ * The surface is never gated on the first answer: rendered behind a placeholder it deadlocks — no
+ * element, no renderer, no camera, no question. Waiting is an overlay over an empty canvas.
+ */
+export declare function GraphCanvas({ children, className, slot, ...rest }: GraphCanvasProps): import("react").JSX.Element;
+//# sourceMappingURL=graph-canvas.d.ts.map

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

@@ -0,0 +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;AAa1F,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,+BA0JnF"}

package/dist/parts/graph-canvas.js

@@ -0,0 +1,174 @@
+"use client";
+import { jsxs as g, jsx as t } from "react/jsx-runtime";
+import { useThemeTick as Q, categoricalCapacity as U, Show as v, cn as V } from "@kanzo-tech/ui";
+import { useMemo as w, useCallback as L, useRef as X, useState as Y, useEffect as G } from "react";
+import { nameOf as Z } from "../core/categories.js";
+import { denseOf as ee } from "../core/resident.js";
+import { useGraphContext as te } from "../react/graph-root.js";
+import { internalsOf as re } from "../react/use-graph.js";
+import { useGraphState as f } from "../react/use-graph-state.js";
+import { resolveLook as oe } from "../render/graph-looks.js";
+import { scaleOf as ne } from "../render/graph-model.js";
+import { useGesture as se, cursorChip as ae } from "./gesture.js";
+import { useOverlays as ie } from "./overlays.js";
+import { ShapeGlyph as le } from "./shape-glyph.js";
+const D = "var(--brand-a5)";
+function ce(p, x, b) {
+  const y = p.titles;
+  if (!y || x <= 0) return [];
+  const n = Array.from({ length: p.vertices }, (l, c) => c), u = p.sizes;
+  u && n.sort((l, c) => (u[c] ?? 0) - (u[l] ?? 0));
+  const i = n.slice(0, x), s = b === null ? void 0 : p.resident.indexOf(b);
+  return s !== void 0 && !i.includes(s) && i.unshift(s), i.flatMap((l) => {
+    const c = p.resident.at(l), o = y[l];
+    return c === void 0 || !o ? [] : [{ vertex: c, text: o }];
+  });
+}
+const de = {
+  opening: "Opening the corpus…",
+  reading: "Reading the corpus…"
+};
+function Re({ children: p, className: x, slot: b, ...y }) {
+  const n = te(), { attach: u, renderer: i } = re(n), s = f((e) => e.hovered), l = f((e) => e.focus), c = f((e) => e.tool), o = f((e) => e.options), N = f((e) => {
+    var a;
+    return ((a = e.drawn) == null ? void 0 : a.domain) ?? e.domain;
+  }), _ = f((e) => e.drawn === null ? de[e.status] : void 0), h = w(() => oe(o.look), [o.look]), M = L(() => {
+    var e;
+    return ((e = i()) == null ? void 0 : e.graph) ?? null;
+  }, [i]), E = ie({ getGraph: M, getResident: n.getResident }), { cardRef: F, gridRef: q, hostRef: R, labelRef: B, schedule: k, setHovered: T, setLabelOrder: z, track: W } = E, j = X(null), [d, J] = Y(null);
+  G(() => {
+    const e = j.current;
+    if (e)
+      return u(e, { onFrame: k, onComposed: J });
+  }, [u, k]);
+  const K = Q();
+  G(() => {
+    var e;
+    (e = i()) == null || e.repaint();
+  }, [i, K]);
+  const O = w(
+    () => d ? ce(d, h.labels, l) : [],
+    [d, l, h.labels]
+  );
+  G(() => {
+    z(O.map((e) => e.vertex)), T(s), W(), k();
+  }, [s, O, k, T, z, W, h.grid]);
+  const A = se({
+    getGraph: M,
+    getResident: n.getResident,
+    getSelection: L(() => n.getState().selection, [n]),
+    commit: (e, a, C) => n.select(e ? [...e] : null, a, C),
+    setTool: n.setTool,
+    tool: c
+  }), { active: P, drag: r, preview: S } = A, I = R.current ? U(R.current) : void 0, $ = w(() => ne(o, I), [o, I]), m = w(() => {
+    var H;
+    if (s === null || !d) return null;
+    const e = d.resident.indexOf(s);
+    if (e === void 0) return null;
+    const a = d.categories[e] ?? 0, C = o.fill !== void 0 || o.symbol !== void 0;
+    return {
+      rank: a,
+      title: ((H = d.titles) == null ? void 0 : H[e]) || `#${ee(s)}`,
+      category: C && a < N.length ? Z(N[a], o.categories) : null
+    };
+  }, [d, N, s, o]);
+  return /* @__PURE__ */ g(
+    "div",
+    {
+      ...y,
+      className: V("relative isolate size-full overflow-hidden bg-background", x),
+      "data-slot": b ?? "graph-canvas",
+      ref: R,
+      children: [
+        /* @__PURE__ */ t("div", { className: "size-full", "data-slot": "graph-canvas-surface", ref: j }),
+        /* @__PURE__ */ t(v, { when: h.grid, children: /* @__PURE__ */ t(
+          "div",
+          {
+            className: "pointer-events-none absolute inset-0",
+            ref: q,
+            style: { backgroundImage: "radial-gradient(var(--border) 1px, transparent 1px)" }
+          }
+        ) }),
+        /* @__PURE__ */ t(v, { when: h.vignette, children: /* @__PURE__ */ t(
+          "div",
+          {
+            className: "pointer-events-none absolute inset-0",
+            style: { background: "radial-gradient(ellipse 75% 65% at 50% 45%, transparent 30%, var(--background) 100%)" }
+          }
+        ) }),
+        /* @__PURE__ */ g("div", { className: "pointer-events-none absolute inset-0 overflow-hidden", children: [
+          O.map((e) => /* @__PURE__ */ t(
+            "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: B(e.vertex),
+              children: e.text
+            },
+            String(e.vertex)
+          )),
+          m && /* @__PURE__ */ g(
+            "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: F,
+              children: [
+                /* @__PURE__ */ t(le, { className: "size-2.5 shrink-0", color: $.color(m.rank), shape: $.shape(m.rank) }),
+                /* @__PURE__ */ t("span", { className: "truncate font-medium text-popover-foreground text-sm leading-none", children: m.title }),
+                m.category !== null && /* @__PURE__ */ t("span", { className: "text-muted-foreground text-xs", children: m.category })
+              ]
+            }
+          )
+        ] }),
+        /* @__PURE__ */ t(v, { when: P !== null, children: /* @__PURE__ */ g("div", { className: "absolute inset-0 cursor-crosshair", "data-slot": "graph-canvas-gesture", ...A.handlers, children: [
+          r && /* @__PURE__ */ t("svg", { className: "pointer-events-none size-full", children: r.tool === "rect" ? /* @__PURE__ */ t(
+            "rect",
+            {
+              className: "stroke-primary",
+              height: Math.abs(r.to[1] - r.from[1]),
+              strokeDasharray: "4 3",
+              strokeWidth: 1,
+              style: { fill: D },
+              width: Math.abs(r.to[0] - r.from[0]),
+              x: Math.min(r.from[0], r.to[0]),
+              y: Math.min(r.from[1], r.to[1])
+            }
+          ) : r.path.length > 1 && /* @__PURE__ */ t(
+            "polygon",
+            {
+              className: "stroke-primary",
+              points: r.path.map(([e, a]) => `${e},${a}`).join(" "),
+              strokeWidth: 1,
+              style: { fill: D }
+            }
+          ) }),
+          /* @__PURE__ */ t(v, { when: S !== null, children: /* @__PURE__ */ g(
+            "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(r),
+              children: [
+                S,
+                " node",
+                S === 1 ? "" : "s"
+              ]
+            }
+          ) })
+        ] }) }),
+        /* @__PURE__ */ t(v, { when: _ !== void 0, children: /* @__PURE__ */ t(
+          "p",
+          {
+            className: "pointer-events-none absolute inset-0 grid place-items-center text-muted-foreground text-xs",
+            "data-slot": "graph-canvas-waiting",
+            children: _
+          }
+        ) }),
+        p
+      ]
+    }
+  );
+}
+export {
+  Re as GraphCanvas
+};
+//# sourceMappingURL=graph-canvas.js.map

package/dist/parts/graph-canvas.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"graph-canvas.js","sources":["../../src/parts/graph-canvas.tsx"],"sourcesContent":["\"use client\";\n\nimport { categoricalCapacity, cn, Show, useThemeTick } from \"@kanzo-tech/ui\";\nimport { useCallback, useEffect, useMemo, useRef, useState, type ReactNode } from \"react\";\nimport { nameOf } from \"../core/categories\";\nimport { denseOf, type VertexId } from \"../core/resident\";\nimport { useGraphContext } from \"../react/graph-root\";\nimport { internalsOf } from \"../react/use-graph\";\nimport { useGraphState } from \"../react/use-graph-state\";\nimport type { Composition } from \"../render/compose\";\nimport { resolveLook } from \"../render/graph-looks\";\nimport { scaleOf } from \"../render/graph-model\";\nimport { cursorChip, useGesture } from \"./gesture\";\nimport { useOverlays } from \"./overlays\";\nimport { ShapeGlyph } from \"./shape-glyph\";\n\nexport interface GraphCanvasProps extends React.ComponentProps<\"div\"> {\n  /** The chrome — a toolbar, a legend, an inspector — positioned over the surface. */\n  children?: ReactNode;\n}\n\nconst WASH = \"var(--brand-a5)\";\n\ninterface Label {\n  vertex: VertexId;\n  text: string;\n}\n\n/** The biggest `budget` vertices by the ramp, the focused one first, each with its `title`. */\nfunction labelsOf(composition: Composition, budget: number, focus: VertexId | null): Label[] {\n  const titles = composition.titles;\n  if (!titles || budget <= 0) return [];\n  const order = Array.from({ length: composition.vertices }, (_, i) => i);\n  const ramp = composition.sizes;\n  if (ramp) order.sort((a, b) => (ramp[b] ?? 0) - (ramp[a] ?? 0));\n  const chosen = order.slice(0, budget);\n  const focused = focus === null ? undefined : composition.resident.indexOf(focus);\n  if (focused !== undefined && !chosen.includes(focused)) chosen.unshift(focused);\n  return chosen.flatMap((i) => {\n    const vertex = composition.resident.at(i);\n    const text = titles[i];\n    return vertex === undefined || !text ? [] : [{ vertex, text }];\n  });\n}\n\nconst WAITING: Partial<Record<string, string>> = {\n  opening: \"Opening the corpus…\",\n  reading: \"Reading the corpus…\",\n};\n\n/**\n * **The element, and what the look declares over it** — the grid, the vignette, the labels and the\n * hover card are fields of `Look`, so drawing them is the canvas's; the marquee and lasso gesture is\n * too. Two layers: cosmos.gl fills the surface with a canvas of its own, so chrome parented there\n * would be a sibling inside an element the renderer resizes. The frame is `isolate`, so a host's\n * `z-index` on a child cannot escape into the page.\n *\n * The surface is never gated on the first answer: rendered behind a placeholder it deadlocks — no\n * element, no renderer, no camera, no question. Waiting is an overlay over an empty canvas.\n */\nexport function GraphCanvas({ children, className, slot, ...rest }: GraphCanvasProps) {\n  const api = useGraphContext();\n  const { attach, renderer } = internalsOf(api);\n  const hovered = useGraphState((s) => s.hovered);\n  const focus = useGraphState((s) => s.focus);\n  const tool = useGraphState((s) => s.tool);\n  const options = useGraphState((s) => s.options);\n  const domain = useGraphState((s) => s.drawn?.domain ?? s.domain);\n  const waiting = useGraphState((s) => (s.drawn === null ? WAITING[s.status] : undefined));\n  const look = useMemo(() => resolveLook(options.look), [options.look]);\n  const getGraph = useCallback(() => renderer()?.graph ?? null, [renderer]);\n  const overlays = useOverlays({ getGraph, getResident: api.getResident });\n  const { cardRef, gridRef, hostRef, labelRef, schedule, setHovered, setLabelOrder, track } = overlays;\n  const surfaceRef = useRef<HTMLDivElement>(null);\n  const [composition, setComposition] = useState<Composition | null>(null);\n\n  useEffect(() => {\n    const surface = surfaceRef.current;\n    if (!surface) return;\n    return attach(surface, { onFrame: schedule, onComposed: setComposition });\n  }, [attach, schedule]);\n\n  const themeTick = useThemeTick();\n  useEffect(() => {\n    renderer()?.repaint();\n  }, [renderer, themeTick]);\n\n  const labels = useMemo(\n    () => (composition ? labelsOf(composition, look.labels, focus) : []),\n    [composition, focus, look.labels],\n  );\n  useEffect(() => {\n    setLabelOrder(labels.map((label) => label.vertex));\n    setHovered(hovered);\n    track();\n    schedule();\n  }, [hovered, labels, schedule, setHovered, setLabelOrder, track, look.grid]);\n\n  const gesture = useGesture({\n    getGraph,\n    getResident: api.getResident,\n    getSelection: useCallback(() => api.getState().selection, [api]),\n    commit: (vertices, source, label) => api.select(vertices ? [...vertices] : null, source, label),\n    setTool: api.setTool,\n    tool,\n  });\n  const { active, drag, preview } = gesture;\n\n  const capacity = hostRef.current ? categoricalCapacity(hostRef.current) : undefined;\n  const scale = useMemo(() => scaleOf(options, capacity), [options, capacity]);\n  const card = useMemo(() => {\n    if (hovered === null || !composition) return null;\n    const index = composition.resident.indexOf(hovered);\n    if (index === undefined) return null;\n    const rank = composition.categories[index] ?? 0;\n    const bound = options.fill !== undefined || options.symbol !== undefined;\n    return {\n      rank,\n      title: composition.titles?.[index] || `#${denseOf(hovered)}`,\n      category: bound && rank < domain.length ? nameOf(domain[rank], options.categories) : null,\n    };\n  }, [composition, domain, hovered, options]);\n\n  return (\n    <div\n      {...rest}\n      className={cn(\"relative isolate size-full overflow-hidden bg-background\", className)}\n      data-slot={slot ?? \"graph-canvas\"}\n      ref={hostRef}\n    >\n      <div className=\"size-full\" data-slot=\"graph-canvas-surface\" ref={surfaceRef} />\n      <Show when={look.grid}>\n        <div\n          className=\"pointer-events-none absolute inset-0\"\n          ref={gridRef}\n          style={{ backgroundImage: \"radial-gradient(var(--border) 1px, transparent 1px)\" }}\n        />\n      </Show>\n      <Show when={look.vignette}>\n        <div\n          className=\"pointer-events-none absolute inset-0\"\n          style={{ background: \"radial-gradient(ellipse 75% 65% at 50% 45%, transparent 30%, var(--background) 100%)\" }}\n        />\n      </Show>\n      <div className=\"pointer-events-none absolute inset-0 overflow-hidden\">\n        {labels.map((label) => (\n          <span\n            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)]\"\n            key={String(label.vertex)}\n            ref={labelRef(label.vertex)}\n          >\n            {label.text}\n          </span>\n        ))}\n        {card && (\n          <div\n            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\"\n            data-slot=\"graph-canvas-card\"\n            ref={cardRef}\n          >\n            <ShapeGlyph className=\"size-2.5 shrink-0\" color={scale.color(card.rank)} shape={scale.shape(card.rank)} />\n            <span className=\"truncate font-medium text-popover-foreground text-sm leading-none\">{card.title}</span>\n            {card.category !== null && <span className=\"text-muted-foreground text-xs\">{card.category}</span>}\n          </div>\n        )}\n      </div>\n      <Show when={active !== null}>\n        <div className=\"absolute inset-0 cursor-crosshair\" data-slot=\"graph-canvas-gesture\" {...gesture.handlers}>\n          {drag && (\n            <svg className=\"pointer-events-none size-full\">\n              {drag.tool === \"rect\" ? (\n                <rect\n                  className=\"stroke-primary\"\n                  height={Math.abs(drag.to[1] - drag.from[1])}\n                  strokeDasharray=\"4 3\"\n                  strokeWidth={1}\n                  style={{ fill: WASH }}\n                  width={Math.abs(drag.to[0] - drag.from[0])}\n                  x={Math.min(drag.from[0], drag.to[0])}\n                  y={Math.min(drag.from[1], drag.to[1])}\n                />\n              ) : (\n                drag.path.length > 1 && (\n                  <polygon\n                    className=\"stroke-primary\"\n                    points={drag.path.map(([x, y]) => `${x},${y}`).join(\" \")}\n                    strokeWidth={1}\n                    style={{ fill: WASH }}\n                  />\n                )\n              )}\n            </svg>\n          )}\n          <Show when={preview !== null}>\n            <span\n              className=\"pointer-events-none absolute rounded-sm bg-primary px-1.5 py-0.5 font-medium text-[10px] text-primary-foreground tabular-nums\"\n              style={cursorChip(drag)}\n            >\n              {preview} node{preview === 1 ? \"\" : \"s\"}\n            </span>\n          </Show>\n        </div>\n      </Show>\n      <Show when={waiting !== undefined}>\n        <p\n          className=\"pointer-events-none absolute inset-0 grid place-items-center text-muted-foreground text-xs\"\n          data-slot=\"graph-canvas-waiting\"\n        >\n          {waiting}\n        </p>\n      </Show>\n      {children}\n    </div>\n  );\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;AAqBA;AAQA;AACE;AACA;AACA;AAEA;AACA;AAEA;AAEE;AAEA;AAA6D;AAEjE;AAEA;AAAiD;AACtC;AAEX;AAYO;AACL;;AAMoC;AAAqB;;AAGtB;AAAqB;AAMxD;AACE;AACA;AACA;AAAwE;AAG1E;AACA;;AACE;AAAY;AAGd;AAAe;AACoD;AACjC;AAElC;AACE;AAGA;AAGF;AAA2B;AACzB;AACiB;AAC8C;AAC+B;AACjF;AACb;;AAOA;AACA;AACA;AACA;AAEA;AAAO;AACL;AAC0D;AAC2B;AAAA;AAIzF;AACE;AAAC;AAAA;AACK;AAC+E;AAChE;AACd;AAEL;AAA6E;AAE3E;AAAC;AAAA;AACW;AACL;AACqB;AAAsD;AAEpF;AAEE;AAAC;AAAA;AACW;AACW;AAAuF;AAEhH;AAEG;AACC;AAAC;AAAA;AACW;AAEgB;AAEnB;AAAA;AAHiB;AAK3B;AAEC;AAAC;AAAA;AACW;AACA;AACL;AAEL;AAAwG;AACR;AACN;AAAA;AAAA;AAAA;AAGhG;AAGK;AAGK;AAAC;AAAA;AACW;AACgC;AAC1B;AACH;AACE;AAC0B;AACL;AACA;AAAA;AAIpC;AAAC;AAAA;AACW;AAC6C;AAC1C;AACE;AAAK;AAI5B;AAGA;AAAC;AAAA;AACW;AACY;AAErB;AAAA;AAAQ;AAA2B;AAAA;AAAA;AAExC;AAEJ;AAEE;AAAC;AAAA;AACW;AACA;AAET;AAAA;AAEL;AACC;AAAA;AAAA;AAGP;;;;"}

package/dist/parts/graph-inspector.d.ts

@@ -0,0 +1,18 @@
+import { ReactNode } from 'react';
+import { VertexDetail } from '../core/detail';
+export interface GraphInspectorProps extends Omit<React.ComponentProps<"div">, "children"> {
+    /**
+     * More fields for the focused vertex, drawn inside its list after the corpus's own — a
+     * `DataListItem` each. A render prop rather than a table of formatters: what a product adds is
+     * markup, and the part never learns what any of it means.
+     */
+    children?: (detail: VertexDetail) => ReactNode;
+}
+/**
+ * **The focused vertex, fetched and laid out by the corpus's own types.** A tile carries what the
+ * channels project and nothing else, so the rest of the row is read when a reader focuses it — one
+ * payload tile, filtered to one `dense_id`, cancelled when the focus moves on. The fields are the
+ * type's, in the order the corpus declares them; the address and the position are the canvas's.
+ */
+export declare function GraphInspector({ children, className, slot, ...rest }: GraphInspectorProps): import("react").JSX.Element;
+//# sourceMappingURL=graph-inspector.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"graph-inspector.d.ts","sourceRoot":"","sources":["../../src/parts/graph-inspector.tsx"],"names":[],"mappings":"AAeA,OAAO,EAAgC,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAGrE,OAAO,EAAc,KAAK,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAQ/D,MAAM,WAAW,mBAAoB,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE,UAAU,CAAC;IACxF;;;;OAIG;IACH,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,YAAY,KAAK,SAAS,CAAC;CAChD;AAWD;;;;;GAKG;AACH,wBAAgB,cAAc,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,IAAI,EAAE,GAAG,IAAI,EAAE,EAAE,mBAAmB,+BAoFzF"}