@kanzo-tech/graph 0.25.0 → 0.27.0

package/dist/parts/graph-canvas.js

@@ -1,22 +1,22 @@
 "use client";
-import { jsxs as b, jsx as a } from "react/jsx-runtime";
+import { jsxs as x, jsx as a } from "react/jsx-runtime";
 import { useThemeTick as Y, categoricalCapacity as Z, Show as f, 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 { useMemo as b, useCallback as $, useRef as te, useEffect as y, useState as oe } from "react";
+import { nameOf as re } from "../core/categories.js";
+import { readTitles as ne } from "../core/source.js";
 import { useGraphContext as D } 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 { useGraphState as u, useGraphSnapshot as R } 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 F = "color-mix(in oklab, var(--primary) 17%, transparent)";
-function me(u, d, i, p, s) {
+function ue(m, d, i, p, s) {
   const c = d.sizes, o = [];
   if (c && p > 0)
-    for (let t = 0; t < u.size; t++) {
+    for (let t = 0; t < m.size; t++) {
       const n = c[t];
       if (i && !i[t] || Number.isNaN(n) || o.length === p && n <= c[o[p - 1]]) continue;
       let r = o.length;
@@ -25,65 +25,66 @@ function me(u, d, i, p, s) {
     }
   return s === null || o.includes(s) ? o : [s, ...o];
 }
-function E(u) {
-  const d = D(), i = m((n) => n.corpus), p = m((n) => n.options.title), s = S((n) => n.geometry), [c, o] = oe(() => /* @__PURE__ */ new Map()), t = u.join(",");
+function E(m) {
+  const d = D(), i = u((n) => n.structure), p = u((n) => n.options.title), s = u((n) => n.options.coordinator), [c, o] = oe(() => /* @__PURE__ */ new Map()), t = m.join(",");
   return y(() => {
     if (!i || !s || t === "") return;
-    const n = new AbortController();
-    return re(i, s, t.split(",").map(Number), p, n.signal).then(
-      (r) => !n.signal.aborted && o(r),
-      (r) => !n.signal.aborted && d.getState().options.onFailure(r)
-    ), () => n.abort();
+    let n = !0;
+    return ne(s, i, t.split(",").map(Number), p).then(
+      (r) => n && o(r),
+      (r) => n && d.getState().options.onFailure(r)
+    ), () => {
+      n = !1;
+    };
   }, [d, i, s, t, p]), c;
 }
-const ue = {
-  opening: "Opening the corpus…",
+const me = {
   loading: "Loading the graph…"
 };
-function Me({ children: u, className: d, slot: i, ...p }) {
-  const s = D(), { attach: c, renderer: o } = ae(s), t = m((e) => e.focus), n = m((e) => e.tool), r = m((e) => e.options), k = m((e) => {
+function ze({ children: m, className: d, slot: i, ...p }) {
+  const s = D(), { attach: c, renderer: o } = ae(s), t = u((e) => e.focus), n = u((e) => e.tool), r = u((e) => e.options), k = u((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), g = x(() => se(r.look), [r.look]), R = $(() => {
+  }), w = u((e) => e.drawn === null ? me[e.status] : void 0), g = b(() => se(r.look), [r.look]), _ = $(() => {
     var e;
     return ((e = o()) == null ? void 0 : e.graph) ?? null;
-  }, [o]), 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);
+  }, [o]), q = pe({ getGraph: _ }), { cardRef: B, gridRef: J, hostRef: S, hoverAt: O, labelRef: K, schedule: v, setHovered: P, setLabelOrder: j, track: I } = q, W = te(null), T = R((e) => e.geometry), N = R((e) => e.encoding), A = R((e) => e.mask);
   y(() => {
-    const e = I.current;
+    const e = W.current;
     if (e)
-      return c(e, { onFrame: v, onHover: _ });
-  }, [c, _, v]);
+      return c(e, { onFrame: v, onHover: O });
+  }, [c, O, v]);
   const Q = Y();
   y(() => {
     var e;
     (e = o()) == null || e.repaint();
   }, [o, Q]);
-  const C = x(
-    () => G && N ? me(G, N, W, g.labels, t) : [],
-    [G, N, W, t, g.labels]
-  ), M = E(C), z = x(
-    () => C.flatMap((e) => M.get(e) ? [{ vertex: e, text: M.get(e) }] : []),
-    [C, M]
+  const G = b(
+    () => T && N ? ue(T, N, A, g.labels, t) : [],
+    [T, N, A, t, g.labels]
+  ), M = E(G), z = b(
+    () => G.flatMap((e) => M.get(e) ? [{ vertex: e, text: M.get(e) }] : []),
+    [G, M]
   );
   y(() => {
-    j(z.map((e) => e.vertex)), A(), v();
-  }, [z, v, j, A, g.grid]);
+    j(z.map((e) => e.vertex)), I(), v();
+  }, [z, v, j, I, g.grid]);
   const H = ie({
-    getGraph: R,
+    getGraph: _,
     getSelection: $(() => s.getState().selection, [s]),
     commit: (e, h, X) => s.select(e ? [...e] : null, h, X),
     setTool: s.setTool,
     tool: n
-  }), { active: U, drag: l, preview: O } = H, L = T.current ? Z(T.current) : void 0, V = x(() => le(r, L), [r, L]);
-  return /* @__PURE__ */ b(
+  }), { active: U, drag: l, preview: C } = H, L = S.current ? Z(S.current) : void 0, V = b(() => le(r, L), [r, L]);
+  return /* @__PURE__ */ x(
     "div",
     {
       ...p,
       className: ee("relative isolate size-full overflow-hidden bg-background", d),
       "data-slot": i ?? "graph-canvas",
-      ref: T,
+      ref: S,
       children: [
-        /* @__PURE__ */ a("div", { className: "size-full", "data-slot": "graph-canvas-surface", ref: I }),
+        /* @__PURE__ */ a("div", { className: "size-full", "data-slot": "graph-canvas-surface", ref: W }),
         /* @__PURE__ */ a(f, { when: g.grid, children: /* @__PURE__ */ a(
           "div",
           {
@@ -99,7 +100,7 @@ function Me({ children: u, className: d, slot: i, ...p }) {
             style: { background: "radial-gradient(ellipse 75% 65% at 50% 45%, transparent 30%, var(--background) 100%)" }
           }
         ) }),
-        /* @__PURE__ */ b("div", { className: "pointer-events-none absolute inset-0 overflow-hidden", children: [
+        /* @__PURE__ */ x("div", { className: "pointer-events-none absolute inset-0 overflow-hidden", children: [
           z.map((e) => /* @__PURE__ */ a(
             "span",
             {
@@ -122,7 +123,7 @@ function Me({ children: u, className: d, slot: i, ...p }) {
             }
           )
         ] }),
-        /* @__PURE__ */ a(f, { when: U !== null, children: /* @__PURE__ */ b("div", { className: "absolute inset-0 cursor-crosshair", "data-slot": "graph-canvas-gesture", ...H.handlers, children: [
+        /* @__PURE__ */ a(f, { when: U !== null, children: /* @__PURE__ */ x("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",
             {
@@ -144,15 +145,15 @@ function Me({ children: u, className: d, slot: i, ...p }) {
               style: { fill: F }
             }
           ) }),
-          /* @__PURE__ */ a(f, { when: O !== null, children: /* @__PURE__ */ b(
+          /* @__PURE__ */ a(f, { when: C !== null, children: /* @__PURE__ */ x(
             "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: ce(l),
               children: [
-                O,
+                C,
                 " node",
-                O === 1 ? "" : "s"
+                C === 1 ? "" : "s"
               ]
             }
           ) })
@@ -165,23 +166,23 @@ function Me({ children: u, className: d, slot: i, ...p }) {
             children: w
           }
         ) }),
-        u
+        m
       ]
     }
   );
 }
-function he({ cardRef: u, domain: d, encoding: i, options: p, scale: s, schedule: c, setHovered: o }) {
-  const t = m((w) => w.hovered), n = E(x(() => t === null ? [] : [t], [t]));
+function he({ cardRef: m, domain: d, encoding: i, options: p, scale: s, schedule: c, setHovered: o }) {
+  const t = u((w) => w.hovered), n = E(b(() => t === null ? [] : [t], [t]));
   if (y(() => {
     o(t), c();
   }, [t, c, o, n]), t === null || !i || t >= i.ranks.length) return null;
-  const r = i.ranks[t] ?? 0, k = r < d.length ? ne(d[r], p.categories) : null;
-  return /* @__PURE__ */ b(
+  const r = i.ranks[t] ?? 0, k = r < d.length ? re(d[r], p.categories) : null;
+  return /* @__PURE__ */ x(
     "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: u,
+      ref: m,
       children: [
         /* @__PURE__ */ a(de, { className: "size-2.5 shrink-0", color: s.color(r), shape: s.shape(r) }),
         /* @__PURE__ */ a("span", { className: "truncate font-medium text-popover-foreground text-sm leading-none", children: n.get(t) || `#${t}` }),
@@ -191,6 +192,6 @@ function he({ cardRef: u, domain: d, encoding: i, options: p, scale: s, schedule
   );
 }
 export {
-  Me as GraphCanvas
+  ze as GraphCanvas
 };
 //# sourceMappingURL=graph-canvas.js.map

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

@@ -1 +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 { readTitles } from \"../core/detail\";\nimport type { Encoding, Geometry } from \"../core/load\";\nimport type { GraphOptions } from \"../core/state\";\nimport type { VertexId } from \"../core/types\";\nimport { useGraphContext } from \"../react/graph-root\";\nimport { internalsOf } from \"../react/use-graph\";\nimport { useGraphSnapshot, useGraphState } from \"../react/use-graph-state\";\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 = \"color-mix(in oklab, var(--primary) 17%, transparent)\";\n\n/**\n * The biggest `budget` surviving vertices by the ramp, the focused one first. One pass, keeping the\n * best few in order: a sort of every vertex to name twenty-six of them is the cost this avoids.\n */\nfunction labelled(geometry: Geometry, encoding: Encoding, mask: Uint8Array | null, budget: number, focus: VertexId | null): VertexId[] {\n  const ramp = encoding.sizes;\n  const best: VertexId[] = [];\n  if (ramp && budget > 0) {\n    for (let id = 0; id < geometry.size; id++) {\n      const value = ramp[id] as number;\n      if ((mask && !mask[id]) || Number.isNaN(value)) continue;\n      if (best.length === budget && value <= (ramp[best[budget - 1] as number] as number)) continue;\n      let at = best.length;\n      while (at > 0 && (ramp[best[at - 1] as number] as number) < value) at--;\n      best.splice(at, 0, id);\n      if (best.length > budget) best.pop();\n    }\n  }\n  return focus === null || best.includes(focus) ? best : [focus, ...best];\n}\n\n/** A label's text is read for the vertices that carry one, never carried for every vertex. */\nfunction useTitles(vertices: readonly VertexId[]): ReadonlyMap<VertexId, string> {\n  const api = useGraphContext();\n  const corpus = useGraphState((s) => s.corpus);\n  const title = useGraphState((s) => s.options.title);\n  const geometry = useGraphSnapshot((s) => s.geometry);\n  const [titles, setTitles] = useState<ReadonlyMap<VertexId, string>>(() => new Map());\n  const key = vertices.join(\",\");\n  useEffect(() => {\n    if (!corpus || !geometry || key === \"\") return;\n    const aborter = new AbortController();\n    readTitles(corpus, geometry, key.split(\",\").map(Number), title, aborter.signal).then(\n      (found) => !aborter.signal.aborted && setTitles(found),\n      (error: unknown) => !aborter.signal.aborted && api.getState().options.onFailure(error),\n    );\n    return () => aborter.abort();\n  }, [api, corpus, geometry, key, title]);\n  return titles;\n}\n\nconst WAITING: Partial<Record<string, string>> = {\n  opening: \"Opening the corpus…\",\n  loading: \"Loading the graph…\",\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 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 });\n  const { cardRef, gridRef, hostRef, hoverAt, labelRef, schedule, setHovered, setLabelOrder, track } = overlays;\n  const surfaceRef = useRef<HTMLDivElement>(null);\n  const geometry = useGraphSnapshot((s) => s.geometry);\n  const encoding = useGraphSnapshot((s) => s.encoding);\n  const mask = useGraphSnapshot((s) => s.mask);\n\n  useEffect(() => {\n    const surface = surfaceRef.current;\n    if (!surface) return;\n    return attach(surface, { onFrame: schedule, onHover: hoverAt });\n  }, [attach, hoverAt, schedule]);\n\n  const themeTick = useThemeTick();\n  useEffect(() => {\n    renderer()?.repaint();\n  }, [renderer, themeTick]);\n\n  const labelledIds = useMemo(\n    () => (geometry && encoding ? labelled(geometry, encoding, mask, look.labels, focus) : []),\n    [geometry, encoding, mask, focus, look.labels],\n  );\n  const titles = useTitles(labelledIds);\n  const labels = useMemo(\n    () => labelledIds.flatMap((vertex) => (titles.get(vertex) ? [{ vertex, text: titles.get(vertex) as string }] : [])),\n    [labelledIds, titles],\n  );\n  useEffect(() => {\n    setLabelOrder(labels.map((label) => label.vertex));\n    track();\n    schedule();\n  }, [labels, schedule, setLabelOrder, track, look.grid]);\n\n  const gesture = useGesture({\n    getGraph,\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\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        <HoverCard\n          cardRef={cardRef}\n          domain={domain}\n          encoding={encoding}\n          options={options}\n          scale={scale}\n          schedule={schedule}\n          setHovered={setHovered}\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\ninterface HoverCardProps {\n  cardRef: React.RefObject<HTMLDivElement | null>;\n  domain: readonly unknown[];\n  encoding: Encoding | null;\n  options: GraphOptions;\n  scale: ReturnType<typeof scaleOf>;\n  schedule: () => void;\n  setHovered: (vertex: VertexId | null) => void;\n}\n\n/** The only part that re-renders on a hover: the canvas and its labels do not. */\nfunction HoverCard({ cardRef, domain, encoding, options, scale, schedule, setHovered }: HoverCardProps) {\n  const hovered = useGraphState((s) => s.hovered);\n  const titles = useTitles(useMemo(() => (hovered === null ? [] : [hovered]), [hovered]));\n  useEffect(() => {\n    setHovered(hovered);\n    schedule();\n  }, [hovered, schedule, setHovered, titles]);\n\n  if (hovered === null || !encoding || hovered >= encoding.ranks.length) return null;\n  const rank = encoding.ranks[hovered] ?? 0;\n  const category = rank < domain.length ? nameOf(domain[rank], options.categories) : null;\n  return (\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(rank)} shape={scale.shape(rank)} />\n      <span className=\"truncate font-medium text-popover-foreground text-sm leading-none\">\n        {titles.get(hovered) || `#${hovered}`}\n      </span>\n      <Show when={category !== null}>\n        <span className=\"text-muted-foreground text-xs\">{category}</span>\n      </Show>\n    </div>\n  );\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;AAuBA;AAMA;AACE;AAEA;AACE;AACE;AAEA;AACA;AACA;AACA;AAC+B;AAGnC;AACF;AAGA;AACE;AAMA;AACE;AACA;AACA;AAAgF;AACzB;AACgC;AAElE;AAGzB;AAEA;AAAiD;AACtC;AAEX;AAYO;AACL;;AAKoC;AAAqB;;AAGtB;AAAqB;AAQxD;AACE;AACA;AACA;AAA8D;AAGhE;AACA;;AACE;AAAY;AAGd;AAAoB;AACqE;AAC1C;AAGhC;AACqG;AAC9F;AAEtB;AACE;AAEA;AAGF;AAA2B;AACzB;AAC+D;AAC+B;AACjF;AACb;AAOF;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;AACD;AAAC;AAAA;AACC;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAAA;AAEJ;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;AAaA;AACE;AAOA;AAJE;AACA;AAIF;AAEA;AACE;AAAC;AAAA;AACW;AACA;AACL;AAEL;AAA8F;AAG9F;AAGA;AAAA;AAAA;AAGN;;;;"}
+{"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 { readTitles } from \"../core/source\";\nimport type { Encoding, Geometry } from \"../core/load\";\nimport type { GraphOptions } from \"../core/state\";\nimport type { VertexId } from \"../core/types\";\nimport { useGraphContext } from \"../react/graph-root\";\nimport { internalsOf } from \"../react/use-graph\";\nimport { useGraphSnapshot, useGraphState } from \"../react/use-graph-state\";\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 = \"color-mix(in oklab, var(--primary) 17%, transparent)\";\n\n/**\n * The biggest `budget` surviving vertices by the ramp, the focused one first. One pass, keeping the\n * best few in order: a sort of every vertex to name twenty-six of them is the cost this avoids.\n */\nfunction labelled(geometry: Geometry, encoding: Encoding, mask: Uint8Array | null, budget: number, focus: VertexId | null): VertexId[] {\n  const ramp = encoding.sizes;\n  const best: VertexId[] = [];\n  if (ramp && budget > 0) {\n    for (let id = 0; id < geometry.size; id++) {\n      const value = ramp[id] as number;\n      if ((mask && !mask[id]) || Number.isNaN(value)) continue;\n      if (best.length === budget && value <= (ramp[best[budget - 1] as number] as number)) continue;\n      let at = best.length;\n      while (at > 0 && (ramp[best[at - 1] as number] as number) < value) at--;\n      best.splice(at, 0, id);\n      if (best.length > budget) best.pop();\n    }\n  }\n  return focus === null || best.includes(focus) ? best : [focus, ...best];\n}\n\n/** A label's text is read for the vertices that carry one, never carried for every vertex. */\nfunction useTitles(vertices: readonly VertexId[]): ReadonlyMap<VertexId, string> {\n  const api = useGraphContext();\n  const structure = useGraphState((s) => s.structure);\n  const title = useGraphState((s) => s.options.title);\n  const coordinator = useGraphState((s) => s.options.coordinator);\n  const [titles, setTitles] = useState<ReadonlyMap<VertexId, string>>(() => new Map());\n  const key = vertices.join(\",\");\n  useEffect(() => {\n    if (!structure || !coordinator || key === \"\") return;\n    let current = true;\n    readTitles(coordinator, structure, key.split(\",\").map(Number), title).then(\n      (found) => current && setTitles(found),\n      (error: unknown) => current && api.getState().options.onFailure(error),\n    );\n    return () => {\n      current = false;\n    };\n  }, [api, structure, coordinator, key, title]);\n  return titles;\n}\n\nconst WAITING: Partial<Record<string, string>> = {\n  loading: \"Loading the graph…\",\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 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 });\n  const { cardRef, gridRef, hostRef, hoverAt, labelRef, schedule, setHovered, setLabelOrder, track } = overlays;\n  const surfaceRef = useRef<HTMLDivElement>(null);\n  const geometry = useGraphSnapshot((s) => s.geometry);\n  const encoding = useGraphSnapshot((s) => s.encoding);\n  const mask = useGraphSnapshot((s) => s.mask);\n\n  useEffect(() => {\n    const surface = surfaceRef.current;\n    if (!surface) return;\n    return attach(surface, { onFrame: schedule, onHover: hoverAt });\n  }, [attach, hoverAt, schedule]);\n\n  const themeTick = useThemeTick();\n  useEffect(() => {\n    renderer()?.repaint();\n  }, [renderer, themeTick]);\n\n  const labelledIds = useMemo(\n    () => (geometry && encoding ? labelled(geometry, encoding, mask, look.labels, focus) : []),\n    [geometry, encoding, mask, focus, look.labels],\n  );\n  const titles = useTitles(labelledIds);\n  const labels = useMemo(\n    () => labelledIds.flatMap((vertex) => (titles.get(vertex) ? [{ vertex, text: titles.get(vertex) as string }] : [])),\n    [labelledIds, titles],\n  );\n  useEffect(() => {\n    setLabelOrder(labels.map((label) => label.vertex));\n    track();\n    schedule();\n  }, [labels, schedule, setLabelOrder, track, look.grid]);\n\n  const gesture = useGesture({\n    getGraph,\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\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        <HoverCard\n          cardRef={cardRef}\n          domain={domain}\n          encoding={encoding}\n          options={options}\n          scale={scale}\n          schedule={schedule}\n          setHovered={setHovered}\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\ninterface HoverCardProps {\n  cardRef: React.RefObject<HTMLDivElement | null>;\n  domain: readonly unknown[];\n  encoding: Encoding | null;\n  options: GraphOptions;\n  scale: ReturnType<typeof scaleOf>;\n  schedule: () => void;\n  setHovered: (vertex: VertexId | null) => void;\n}\n\n/** The only part that re-renders on a hover: the canvas and its labels do not. */\nfunction HoverCard({ cardRef, domain, encoding, options, scale, schedule, setHovered }: HoverCardProps) {\n  const hovered = useGraphState((s) => s.hovered);\n  const titles = useTitles(useMemo(() => (hovered === null ? [] : [hovered]), [hovered]));\n  useEffect(() => {\n    setHovered(hovered);\n    schedule();\n  }, [hovered, schedule, setHovered, titles]);\n\n  if (hovered === null || !encoding || hovered >= encoding.ranks.length) return null;\n  const rank = encoding.ranks[hovered] ?? 0;\n  const category = rank < domain.length ? nameOf(domain[rank], options.categories) : null;\n  return (\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(rank)} shape={scale.shape(rank)} />\n      <span className=\"truncate font-medium text-popover-foreground text-sm leading-none\">\n        {titles.get(hovered) || `#${hovered}`}\n      </span>\n      <Show when={category !== null}>\n        <span className=\"text-muted-foreground text-xs\">{category}</span>\n      </Show>\n    </div>\n  );\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;AAuBA;AAMA;AACE;AAEA;AACE;AACE;AAEA;AACA;AACA;AACA;AAC+B;AAGnC;AACF;AAGA;AACE;AAMA;AACE;AACA;AACA;AAAsE;AAC/B;AACgC;AAGrE;AAAU;AACZ;AAGJ;AAEA;AAAiD;AAEjD;AAYO;AACL;;AAKoC;AAAqB;;AAGtB;AAAqB;AAQxD;AACE;AACA;AACA;AAA8D;AAGhE;AACA;;AACE;AAAY;AAGd;AAAoB;AACqE;AAC1C;AAGhC;AACqG;AAC9F;AAEtB;AACE;AAEA;AAGF;AAA2B;AACzB;AAC+D;AAC+B;AACjF;AACb;AAOF;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;AACD;AAAC;AAAA;AACC;AACA;AACA;AACA;AACA;AACA;AACA;AAAA;AAAA;AAEJ;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;AAaA;AACE;AAOA;AAJE;AACA;AAIF;AAEA;AACE;AAAC;AAAA;AACW;AACA;AACL;AAEL;AAA8F;AAG9F;AAGA;AAAA;AAAA;AAGN;;;;"}

package/dist/parts/graph-counts.js

@@ -6,23 +6,23 @@ const v = { notation: "compact", maximumFractionDigits: 1 };
 function r({ value: o }) {
   return o == null ? "—" : /* @__PURE__ */ n(b, { value: o, ...v });
 }
-function N({ className: o, slot: u, spinner: c = !1, ...l }) {
+function N({ className: o, slot: c, spinner: u = !1, ...l }) {
   const m = e((t) => {
     var a;
     return (a = t.drawn) == null ? void 0 : a.vertices;
   }), d = e((t) => {
     var a;
     return (a = t.drawn) == null ? void 0 : a.edges;
-  }), g = e((t) => t.total), s = e((t) => t.status === "opening" || t.status === "loading"), p = e((t) => t.motion === "running");
+  }), g = e((t) => t.total), s = e((t) => t.status === "loading"), p = e((t) => t.motion === "running");
   return /* @__PURE__ */ i(
     "p",
     {
       "aria-busy": s || void 0,
       ...l,
       className: x("flex items-center gap-1.5 text-muted-foreground text-xs tabular-nums", o),
-      "data-slot": u ?? "graph-counts",
+      "data-slot": c ?? "graph-counts",
       children: [
-        /* @__PURE__ */ n(f, { when: c && (s || p), children: /* @__PURE__ */ n(h, { "aria-label": s ? "Loading" : "Laying out", className: "size-3" }) }),
+        /* @__PURE__ */ n(f, { when: u && (s || p), children: /* @__PURE__ */ n(h, { "aria-label": s ? "Loading" : "Laying out", className: "size-3" }) }),
         /* @__PURE__ */ i("span", { children: [
           /* @__PURE__ */ n(r, { value: m }),
           " of ",

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

@@ -1 +1 @@
-{"version":3,"file":"graph-counts.js","sources":["../../src/parts/graph-counts.tsx"],"sourcesContent":["\"use client\";\n\nimport { cn, FormatNumber, Show, Spinner } from \"@kanzo-tech/ui\";\nimport { useGraphState } from \"../react/use-graph-state\";\n\nexport interface GraphCountsProps extends React.ComponentProps<\"p\"> {\n  /** Draws a spinner while the corpus opens, the graph loads or a layout runs — for a host with no status of its own beside it. */\n  spinner?: boolean;\n}\n\nconst COMPACT = { notation: \"compact\", maximumFractionDigits: 1 } as const;\n\nfunction Count({ value }: { value: number | null | undefined }) {\n  return value === null || value === undefined ? \"—\" : <FormatNumber value={value} {...COMPACT} />;\n}\n\n/**\n * **What is drawn of the whole, in one sentence** — \"1.2K of 5K nodes drawn · 8K edges\". `drawn`\n * shrinks with the page's filter and `total` is the manifest's, so the sentence is the filter's\n * effect; an edge counts when both its ends are drawn. A figure not yet known is \"—\", and the\n * numbers are compact in the nearest `LocaleProvider`'s locale.\n *\n * `aria-busy` follows `status`, because only a load changes these figures; a running layout moves\n * the points and not the counts, so it reaches the spinner alone, named \"Laying out\".\n */\nexport function GraphCounts({ className, slot, spinner = false, ...rest }: GraphCountsProps) {\n  const vertices = useGraphState((s) => s.drawn?.vertices);\n  const edges = useGraphState((s) => s.drawn?.edges);\n  const total = useGraphState((s) => s.total);\n  const busy = useGraphState((s) => s.status === \"opening\" || s.status === \"loading\");\n  const laying = useGraphState((s) => s.motion === \"running\");\n\n  return (\n    <p\n      aria-busy={busy || undefined}\n      {...rest}\n      className={cn(\"flex items-center gap-1.5 text-muted-foreground text-xs tabular-nums\", className)}\n      data-slot={slot ?? \"graph-counts\"}\n    >\n      <Show when={spinner && (busy || laying)}>\n        <Spinner aria-label={busy ? \"Loading\" : \"Laying out\"} className=\"size-3\" />\n      </Show>\n      <span>\n        <Count value={vertices} /> of <Count value={total} /> nodes drawn · <Count value={edges} /> edges\n      </span>\n    </p>\n  );\n}\n"],"names":[],"mappings":";;;;AAUA;AAEA;AACE;AACF;AAWO;AACL;;AAAsC;AAAS;;AACZ;AAAS;AAK5C;AACE;AAAC;AAAA;AACoB;AACf;AAC2F;AAC5E;AAEnB;AAEA;AAEE;AAAwB;AAAE;AAAyB;AAAE;AAAoC;AAAE;AAC7F;AAAA;AAAA;AAGN;;;;"}
+{"version":3,"file":"graph-counts.js","sources":["../../src/parts/graph-counts.tsx"],"sourcesContent":["\"use client\";\n\nimport { cn, FormatNumber, Show, Spinner } from \"@kanzo-tech/ui\";\nimport { useGraphState } from \"../react/use-graph-state\";\n\nexport interface GraphCountsProps extends React.ComponentProps<\"p\"> {\n  /** Draws a spinner while the corpus opens, the graph loads or a layout runs — for a host with no status of its own beside it. */\n  spinner?: boolean;\n}\n\nconst COMPACT = { notation: \"compact\", maximumFractionDigits: 1 } as const;\n\nfunction Count({ value }: { value: number | null | undefined }) {\n  return value === null || value === undefined ? \"—\" : <FormatNumber value={value} {...COMPACT} />;\n}\n\n/**\n * **What is drawn of the whole, in one sentence** — \"1.2K of 5K nodes drawn · 8K edges\". `drawn`\n * shrinks with the page's filter and `total` is the manifest's, so the sentence is the filter's\n * effect; an edge counts when both its ends are drawn. A figure not yet known is \"—\", and the\n * numbers are compact in the nearest `LocaleProvider`'s locale.\n *\n * `aria-busy` follows `status`, because only a load changes these figures; a running layout moves\n * the points and not the counts, so it reaches the spinner alone, named \"Laying out\".\n */\nexport function GraphCounts({ className, slot, spinner = false, ...rest }: GraphCountsProps) {\n  const vertices = useGraphState((s) => s.drawn?.vertices);\n  const edges = useGraphState((s) => s.drawn?.edges);\n  const total = useGraphState((s) => s.total);\n  const busy = useGraphState((s) => s.status === \"loading\");\n  const laying = useGraphState((s) => s.motion === \"running\");\n\n  return (\n    <p\n      aria-busy={busy || undefined}\n      {...rest}\n      className={cn(\"flex items-center gap-1.5 text-muted-foreground text-xs tabular-nums\", className)}\n      data-slot={slot ?? \"graph-counts\"}\n    >\n      <Show when={spinner && (busy || laying)}>\n        <Spinner aria-label={busy ? \"Loading\" : \"Laying out\"} className=\"size-3\" />\n      </Show>\n      <span>\n        <Count value={vertices} /> of <Count value={total} /> nodes drawn · <Count value={edges} /> edges\n      </span>\n    </p>\n  );\n}\n"],"names":[],"mappings":";;;;AAUA;AAEA;AACE;AACF;AAWO;AACL;;AAAsC;AAAS;;AACZ;AAAS;AAK5C;AACE;AAAC;AAAA;AACoB;AACf;AAC2F;AAC5E;AAEnB;AAEA;AAEE;AAAwB;AAAE;AAAyB;AAAE;AAAoC;AAAE;AAC7F;AAAA;AAAA;AAGN;;;;"}

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

@@ -1,5 +1,5 @@
 import { ReactNode } from 'react';
-import { VertexDetail } from '../core/detail';
+import { VertexDetail } from '../core/source';
 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
@@ -11,8 +11,8 @@ export interface GraphInspectorProps extends Omit<React.ComponentProps<"div">, "
 /**
  * **The focused vertex, fetched and laid out by the corpus's own tables.** The loaded graph carries
  * what the channels project and nothing else, so the rest of the row is read when a reader focuses
- * it — a scan of its table, filtered to its key, cancelled when the focus moves on. The fields are the
- * table's, in the order the manifest declares them; the key and the position are the canvas's.
+ * it — one statement on its table, by its key, through the page's coordinator. The fields are the
+ * table's, in the order the manifest declares them; the key is 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

@@ -1 +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;AAO/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;AAYD;;;;;GAKG;AACH,wBAAgB,cAAc,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,IAAI,EAAE,GAAG,IAAI,EAAE,EAAE,mBAAmB,+BA0FzF"}
+{"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;AAO/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;AAYD;;;;;GAKG;AACH,wBAAgB,cAAc,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,IAAI,EAAE,GAAG,IAAI,EAAE,EAAE,mBAAmB,+BA4FzF"}

package/dist/parts/graph-inspector.js

@@ -1,60 +1,62 @@
 "use client";
-import { jsxs as i, jsx as n, Fragment as T } from "react/jsx-runtime";
-import { useChartCapacity as B, Show as d, Skeleton as F, Badge as M, Button as j, DataList as A, DataListItem as V, DataListItemLabel as E, DataListItemValue as $, cn as q } from "@kanzo-tech/ui";
+import { jsxs as s, jsx as n, Fragment as T } from "react/jsx-runtime";
+import { useChartCapacity as B, Show as p, Skeleton as F, Badge as M, Button as j, DataList as V, DataListItem as A, DataListItemLabel as E, DataListItemValue as $, cn as q } from "@kanzo-tech/ui";
 import { CrosshairIcon as H } from "lucide-react";
 import { useMemo as J, useState as K, useEffect as P } from "react";
 import { nameOf as Q } from "../core/categories.js";
 import { bindingOf as R } from "../core/channels.js";
-import { readVertex as U } from "../core/detail.js";
+import { readVertex as U } from "../core/source.js";
 import { useGraphContext as W } from "../react/graph-root.js";
-import { useGraphState as p, useGraphSnapshot as X } from "../react/use-graph-state.js";
-import { scaleOf as Y } from "../render/graph-model.js";
-import { ShapeGlyph as Z } from "./shape-glyph.js";
-const C = (a) => a instanceof Date ? a.toISOString().slice(0, 10) : a == null || a === "" ? "—" : String(a);
-function mt({ children: a, className: I, slot: k, ...D }) {
+import { useGraphState as c } from "../react/use-graph-state.js";
+import { scaleOf as X } from "../render/graph-model.js";
+import { ShapeGlyph as Y } from "./shape-glyph.js";
+const I = (a) => a instanceof Date ? a.toISOString().slice(0, 10) : a == null || a === "" ? "—" : String(a);
+function ce({ children: a, className: k, slot: C, ...D }) {
   var S;
-  const h = W(), s = p((t) => t.focus), u = p((t) => t.corpus), r = X((t) => t.geometry), l = p((t) => t.options), G = p((t) => {
+  const h = W(), i = c((e) => e.focus), r = c((e) => e.structure), f = c((e) => e.options.coordinator), l = c((e) => e.options), L = c((e) => {
     var o;
-    return ((o = t.drawn) == null ? void 0 : o.domain) ?? t.domain;
-  }), v = B(), b = J(() => Y(l, v), [l, v]), [f, N] = K(null);
+    return ((o = e.drawn) == null ? void 0 : o.domain) ?? e.domain;
+  }), v = B(), N = J(() => X(l, v), [l, v]), [u, b] = K(null);
   P(() => {
-    if (s === null || !u || !r) return;
-    const t = new AbortController();
-    return U(u, r, s, t.signal).then(
-      (o) => !t.signal.aborted && N({ vertex: s, detail: o }),
+    if (i === null || !r || !f) return;
+    let e = !0;
+    return U(f, r, i).then(
+      (o) => e && b({ vertex: i, detail: o }),
       (o) => {
-        t.signal.aborted || (N({ vertex: s, detail: !1 }), h.getState().options.onFailure(o));
+        e && (b({ vertex: i, detail: !1 }), h.getState().options.onFailure(o));
       }
-    ), () => t.abort();
-  }, [h, u, s, r]);
-  const c = f !== null && f.vertex === s ? f.detail : void 0, e = c || null, x = (t) => {
+    ), () => {
+      e = !1;
+    };
+  }, [h, f, i, r]);
+  const m = u !== null && u.vertex === i ? u.detail : void 0, t = m || null, x = (e) => {
     var o;
-    return (o = e == null ? void 0 : e.fields.find((O) => O.name === t)) == null ? void 0 : o.value;
-  }, m = R(l), w = m.byTable ? e == null ? void 0 : e.table : x(m.category), y = G.findIndex((t) => String(t) === String(w)), L = m.byTable || m.category !== void 0, z = (S = r == null ? void 0 : r.tables.find((t) => t.name === (e == null ? void 0 : e.table))) == null ? void 0 : S.identity, g = x(l.title) ?? x(z);
-  return /* @__PURE__ */ i("div", { ...D, className: q("space-y-3 text-sm", I), "data-slot": k ?? "graph-inspector", children: [
-    /* @__PURE__ */ n(d, { when: s === null, children: /* @__PURE__ */ n("p", { className: "text-muted-foreground text-xs", children: "Click a vertex on the canvas to inspect it." }) }),
-    /* @__PURE__ */ n(d, { when: s !== null && c === void 0, children: /* @__PURE__ */ n(F, { className: "h-24 w-full" }) }),
-    /* @__PURE__ */ n(d, { when: s !== null && c !== void 0 && !e, children: /* @__PURE__ */ n("p", { className: "text-muted-foreground text-xs", children: c === null ? "This vertex is not in the corpus." : "This vertex could not be read." }) }),
-    e && /* @__PURE__ */ i(T, { children: [
-      /* @__PURE__ */ i("div", { children: [
-        /* @__PURE__ */ n("p", { className: "truncate font-medium", "data-slot": "graph-inspector-title", children: g == null ? `#${e.vertex}` : C(g) }),
-        /* @__PURE__ */ i("div", { className: "mt-1 flex items-center gap-1.5", children: [
-          /* @__PURE__ */ n(d, { when: L, children: /* @__PURE__ */ i(M, { className: "gap-1 text-[10px]", size: "xs", variant: "outline", children: [
+    return (o = t == null ? void 0 : t.fields.find((O) => O.name === e)) == null ? void 0 : o.value;
+  }, d = R(l), y = d.byTable ? t == null ? void 0 : t.table : x(d.category), w = L.findIndex((e) => String(e) === String(y)), z = d.byTable || d.category !== void 0, G = (S = r == null ? void 0 : r.vertices.find((e) => e.name === (t == null ? void 0 : t.table))) == null ? void 0 : S.identity, g = x(l.title) ?? x(G);
+  return /* @__PURE__ */ s("div", { ...D, className: q("space-y-3 text-sm", k), "data-slot": C ?? "graph-inspector", children: [
+    /* @__PURE__ */ n(p, { when: i === null, children: /* @__PURE__ */ n("p", { className: "text-muted-foreground text-xs", children: "Click a vertex on the canvas to inspect it." }) }),
+    /* @__PURE__ */ n(p, { when: i !== null && m === void 0, children: /* @__PURE__ */ n(F, { className: "h-24 w-full" }) }),
+    /* @__PURE__ */ n(p, { when: i !== null && m !== void 0 && !t, children: /* @__PURE__ */ n("p", { className: "text-muted-foreground text-xs", children: m === null ? "This vertex is not in the corpus." : "This vertex could not be read." }) }),
+    t && /* @__PURE__ */ s(T, { children: [
+      /* @__PURE__ */ s("div", { children: [
+        /* @__PURE__ */ n("p", { className: "truncate font-medium", "data-slot": "graph-inspector-title", children: g == null ? `#${t.vertex}` : I(g) }),
+        /* @__PURE__ */ s("div", { className: "mt-1 flex items-center gap-1.5", children: [
+          /* @__PURE__ */ n(p, { when: z, children: /* @__PURE__ */ s(M, { className: "gap-1 text-[10px]", size: "xs", variant: "outline", children: [
             /* @__PURE__ */ n(
-              Z,
+              Y,
               {
                 className: "size-2 shrink-0",
-                color: b.color(Math.max(0, y)),
-                shape: b.shape(Math.max(0, y))
+                color: N.color(Math.max(0, w)),
+                shape: N.shape(Math.max(0, w))
               }
             ),
-            Q(w, l.categories)
+            Q(y, l.categories)
           ] }) }),
-          /* @__PURE__ */ i(
+          /* @__PURE__ */ s(
             j,
             {
               className: "h-5 gap-1 text-[10px]",
-              onClick: () => h.reveal(e.vertex),
+              onClick: () => h.reveal(t.vertex),
               size: "sm",
               title: "Bring this vertex into view on the canvas",
               variant: "ghost",
@@ -66,17 +68,17 @@ function mt({ children: a, className: I, slot: k, ...D }) {
           )
         ] })
       ] }),
-      /* @__PURE__ */ i(A, { orientation: "vertical", children: [
-        e.fields.map((t) => /* @__PURE__ */ i(V, { className: "gap-0.5 py-0", children: [
-          /* @__PURE__ */ n(E, { className: "text-xs", children: t.name }),
-          /* @__PURE__ */ n($, { className: "break-all", children: C(t.value) })
-        ] }, t.name)),
-        a == null ? void 0 : a(e)
+      /* @__PURE__ */ s(V, { orientation: "vertical", children: [
+        t.fields.map((e) => /* @__PURE__ */ s(A, { className: "gap-0.5 py-0", children: [
+          /* @__PURE__ */ n(E, { className: "text-xs", children: e.name }),
+          /* @__PURE__ */ n($, { className: "break-all", children: I(e.value) })
+        ] }, e.name)),
+        a == null ? void 0 : a(t)
       ] })
     ] })
   ] });
 }
 export {
-  mt as GraphInspector
+  ce as GraphInspector
 };
 //# sourceMappingURL=graph-inspector.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"graph-inspector.js","sources":["../../src/parts/graph-inspector.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  Badge,\n  Button,\n  cn,\n  DataList,\n  DataListItem,\n  DataListItemLabel,\n  DataListItemValue,\n  Show,\n  Skeleton,\n  useChartCapacity,\n} from \"@kanzo-tech/ui\";\nimport { CrosshairIcon } from \"lucide-react\";\nimport { useEffect, useMemo, useState, type ReactNode } from \"react\";\nimport { nameOf } from \"../core/categories\";\nimport { bindingOf } from \"../core/channels\";\nimport { readVertex, type VertexDetail } from \"../core/detail\";\nimport type { VertexId } from \"../core/types\";\nimport { useGraphContext } from \"../react/graph-root\";\nimport { useGraphSnapshot, useGraphState } from \"../react/use-graph-state\";\nimport { scaleOf } from \"../render/graph-model\";\nimport { ShapeGlyph } from \"./shape-glyph\";\n\nexport interface GraphInspectorProps extends Omit<React.ComponentProps<\"div\">, \"children\"> {\n  /**\n   * More fields for the focused vertex, drawn inside its list after the corpus's own — a\n   * `DataListItem` each. A render prop rather than a table of formatters: what a product adds is\n   * markup, and the part never learns what any of it means.\n   */\n  children?: (detail: VertexDetail) => ReactNode;\n}\n\n/** A cell, as text — a `DATE` arrives as a `Date`, and a 64-bit column as a `bigint`. */\nconst text = (value: unknown): string => {\n  if (value instanceof Date) return value.toISOString().slice(0, 10);\n  if (value === null || value === undefined || value === \"\") return \"—\";\n  return String(value);\n};\n\n/** `null` is no such vertex in the corpus; `false` is a read that did not answer. */\ntype Answer = { vertex: VertexId; detail: VertexDetail | null | false } | null;\n\n/**\n * **The focused vertex, fetched and laid out by the corpus's own tables.** The loaded graph carries\n * what the channels project and nothing else, so the rest of the row is read when a reader focuses\n * it — a scan of its table, filtered to its key, cancelled when the focus moves on. The fields are the\n * table's, in the order the manifest declares them; the key and the position are the canvas's.\n */\nexport function GraphInspector({ children, className, slot, ...rest }: GraphInspectorProps) {\n  const api = useGraphContext();\n  const focus = useGraphState((s) => s.focus);\n  const corpus = useGraphState((s) => s.corpus);\n  const geometry = useGraphSnapshot((s) => s.geometry);\n  const options = useGraphState((s) => s.options);\n  const domain = useGraphState((s) => s.drawn?.domain ?? s.domain);\n  const capacity = useChartCapacity();\n  const scale = useMemo(() => scaleOf(options, capacity), [options, capacity]);\n  const [answer, setAnswer] = useState<Answer>(null);\n\n  useEffect(() => {\n    if (focus === null || !corpus || !geometry) return;\n    const aborter = new AbortController();\n    readVertex(corpus, geometry, focus, aborter.signal).then(\n      (detail) => !aborter.signal.aborted && setAnswer({ vertex: focus, detail }),\n      (error: unknown) => {\n        if (aborter.signal.aborted) return;\n        setAnswer({ vertex: focus, detail: false });\n        api.getState().options.onFailure(error);\n      },\n    );\n    return () => aborter.abort();\n  }, [api, corpus, focus, geometry]);\n\n  const answered = answer !== null && answer.vertex === focus ? answer.detail : undefined;\n  const current = answered || null;\n  const field = (name: string | undefined) => current?.fields.find((f) => f.name === name)?.value;\n  const binding = bindingOf(options);\n  const category = binding.byTable ? current?.table : field(binding.category);\n  const rank = domain.findIndex((value) => String(value) === String(category));\n  const bound = binding.byTable || binding.category !== undefined;\n  const identity = geometry?.tables.find((table) => table.name === current?.table)?.identity;\n  const heading = field(options.title) ?? field(identity);\n\n  return (\n    <div {...rest} className={cn(\"space-y-3 text-sm\", className)} data-slot={slot ?? \"graph-inspector\"}>\n      <Show when={focus === null}>\n        <p className=\"text-muted-foreground text-xs\">Click a vertex on the canvas to inspect it.</p>\n      </Show>\n      <Show when={focus !== null && answered === undefined}>\n        <Skeleton className=\"h-24 w-full\" />\n      </Show>\n      <Show when={focus !== null && answered !== undefined && !current}>\n        <p className=\"text-muted-foreground text-xs\">\n          {answered === null ? \"This vertex is not in the corpus.\" : \"This vertex could not be read.\"}\n        </p>\n      </Show>\n      {current && (\n        <>\n          <div>\n            <p className=\"truncate font-medium\" data-slot=\"graph-inspector-title\">\n              {heading === undefined || heading === null ? `#${current.vertex}` : text(heading)}\n            </p>\n            <div className=\"mt-1 flex items-center gap-1.5\">\n              <Show when={bound}>\n                <Badge className=\"gap-1 text-[10px]\" size=\"xs\" variant=\"outline\">\n                  <ShapeGlyph\n                    className=\"size-2 shrink-0\"\n                    color={scale.color(Math.max(0, rank))}\n                    shape={scale.shape(Math.max(0, rank))}\n                  />\n                  {nameOf(category, options.categories)}\n                </Badge>\n              </Show>\n              <Button\n                className=\"h-5 gap-1 text-[10px]\"\n                onClick={() => api.reveal(current.vertex)}\n                size=\"sm\"\n                title=\"Bring this vertex into view on the canvas\"\n                variant=\"ghost\"\n              >\n                <CrosshairIcon className=\"size-3\" />\n                Find on canvas\n              </Button>\n            </div>\n          </div>\n          <DataList orientation=\"vertical\">\n            {current.fields.map((f) => (\n              <DataListItem className=\"gap-0.5 py-0\" key={f.name}>\n                <DataListItemLabel className=\"text-xs\">{f.name}</DataListItemLabel>\n                <DataListItemValue className=\"break-all\">{text(f.value)}</DataListItemValue>\n              </DataListItem>\n            ))}\n            {children?.(current)}\n          </DataList>\n        </>\n      )}\n    </div>\n  );\n}\n"],"names":[],"mappings":";;;;;;;;;;;;AAmCA;AAeO;;AACL;;AAKoC;AAAqB;AAKzD;AACE;AACA;AACA;AAAoD;AACwB;AAExE;AAEsC;AACxC;AAEmB;AAGvB;;AAE4C;AAA8C;AAQ1F;AAEI;AAEA;AAGA;AAKA;AAGI;AACE;AAEA;AAEE;AAEI;AAAA;AAAC;AAAA;AACW;AAC0B;AACA;AAAA;AAAA;AAEF;AAExC;AACA;AAAC;AAAA;AACW;AAC8B;AACnC;AACC;AACE;AAER;AAAkC;AAAE;AAAA;AAAA;AAAA;AAGxC;AACF;AAEG;AAEG;AAA+C;AACS;AAE3D;AACW;AACd;AACF;AAIR;;;;"}
+{"version":3,"file":"graph-inspector.js","sources":["../../src/parts/graph-inspector.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  Badge,\n  Button,\n  cn,\n  DataList,\n  DataListItem,\n  DataListItemLabel,\n  DataListItemValue,\n  Show,\n  Skeleton,\n  useChartCapacity,\n} from \"@kanzo-tech/ui\";\nimport { CrosshairIcon } from \"lucide-react\";\nimport { useEffect, useMemo, useState, type ReactNode } from \"react\";\nimport { nameOf } from \"../core/categories\";\nimport { bindingOf } from \"../core/channels\";\nimport { readVertex, type VertexDetail } from \"../core/source\";\nimport type { VertexId } from \"../core/types\";\nimport { useGraphContext } from \"../react/graph-root\";\nimport { useGraphState } from \"../react/use-graph-state\";\nimport { scaleOf } from \"../render/graph-model\";\nimport { ShapeGlyph } from \"./shape-glyph\";\n\nexport interface GraphInspectorProps extends Omit<React.ComponentProps<\"div\">, \"children\"> {\n  /**\n   * More fields for the focused vertex, drawn inside its list after the corpus's own — a\n   * `DataListItem` each. A render prop rather than a table of formatters: what a product adds is\n   * markup, and the part never learns what any of it means.\n   */\n  children?: (detail: VertexDetail) => ReactNode;\n}\n\n/** A cell, as text — a `DATE` arrives as a `Date`, and a 64-bit column as a `bigint`. */\nconst text = (value: unknown): string => {\n  if (value instanceof Date) return value.toISOString().slice(0, 10);\n  if (value === null || value === undefined || value === \"\") return \"—\";\n  return String(value);\n};\n\n/** `null` is no such vertex in the corpus; `false` is a read that did not answer. */\ntype Answer = { vertex: VertexId; detail: VertexDetail | null | false } | null;\n\n/**\n * **The focused vertex, fetched and laid out by the corpus's own tables.** The loaded graph carries\n * what the channels project and nothing else, so the rest of the row is read when a reader focuses\n * it — one statement on its table, by its key, through the page's coordinator. The fields are the\n * table's, in the order the manifest declares them; the key is the canvas's.\n */\nexport function GraphInspector({ children, className, slot, ...rest }: GraphInspectorProps) {\n  const api = useGraphContext();\n  const focus = useGraphState((s) => s.focus);\n  const structure = useGraphState((s) => s.structure);\n  const coordinator = useGraphState((s) => s.options.coordinator);\n  const options = useGraphState((s) => s.options);\n  const domain = useGraphState((s) => s.drawn?.domain ?? s.domain);\n  const capacity = useChartCapacity();\n  const scale = useMemo(() => scaleOf(options, capacity), [options, capacity]);\n  const [answer, setAnswer] = useState<Answer>(null);\n\n  useEffect(() => {\n    if (focus === null || !structure || !coordinator) return;\n    let current = true;\n    readVertex(coordinator, structure, focus).then(\n      (detail) => current && setAnswer({ vertex: focus, detail }),\n      (error: unknown) => {\n        if (!current) return;\n        setAnswer({ vertex: focus, detail: false });\n        api.getState().options.onFailure(error);\n      },\n    );\n    return () => {\n      current = false;\n    };\n  }, [api, coordinator, focus, structure]);\n\n  const answered = answer !== null && answer.vertex === focus ? answer.detail : undefined;\n  const current = answered || null;\n  const field = (name: string | undefined) => current?.fields.find((f) => f.name === name)?.value;\n  const binding = bindingOf(options);\n  const category = binding.byTable ? current?.table : field(binding.category);\n  const rank = domain.findIndex((value) => String(value) === String(category));\n  const bound = binding.byTable || binding.category !== undefined;\n  const identity = structure?.vertices.find((table) => table.name === current?.table)?.identity;\n  const heading = field(options.title) ?? field(identity);\n\n  return (\n    <div {...rest} className={cn(\"space-y-3 text-sm\", className)} data-slot={slot ?? \"graph-inspector\"}>\n      <Show when={focus === null}>\n        <p className=\"text-muted-foreground text-xs\">Click a vertex on the canvas to inspect it.</p>\n      </Show>\n      <Show when={focus !== null && answered === undefined}>\n        <Skeleton className=\"h-24 w-full\" />\n      </Show>\n      <Show when={focus !== null && answered !== undefined && !current}>\n        <p className=\"text-muted-foreground text-xs\">\n          {answered === null ? \"This vertex is not in the corpus.\" : \"This vertex could not be read.\"}\n        </p>\n      </Show>\n      {current && (\n        <>\n          <div>\n            <p className=\"truncate font-medium\" data-slot=\"graph-inspector-title\">\n              {heading === undefined || heading === null ? `#${current.vertex}` : text(heading)}\n            </p>\n            <div className=\"mt-1 flex items-center gap-1.5\">\n              <Show when={bound}>\n                <Badge className=\"gap-1 text-[10px]\" size=\"xs\" variant=\"outline\">\n                  <ShapeGlyph\n                    className=\"size-2 shrink-0\"\n                    color={scale.color(Math.max(0, rank))}\n                    shape={scale.shape(Math.max(0, rank))}\n                  />\n                  {nameOf(category, options.categories)}\n                </Badge>\n              </Show>\n              <Button\n                className=\"h-5 gap-1 text-[10px]\"\n                onClick={() => api.reveal(current.vertex)}\n                size=\"sm\"\n                title=\"Bring this vertex into view on the canvas\"\n                variant=\"ghost\"\n              >\n                <CrosshairIcon className=\"size-3\" />\n                Find on canvas\n              </Button>\n            </div>\n          </div>\n          <DataList orientation=\"vertical\">\n            {current.fields.map((f) => (\n              <DataListItem className=\"gap-0.5 py-0\" key={f.name}>\n                <DataListItemLabel className=\"text-xs\">{f.name}</DataListItemLabel>\n                <DataListItemValue className=\"break-all\">{text(f.value)}</DataListItemValue>\n              </DataListItem>\n            ))}\n            {children?.(current)}\n          </DataList>\n        </>\n      )}\n    </div>\n  );\n}\n"],"names":["current"],"mappings":";;;;;;;;;;;;AAmCA;AAeO;;AACL;;AAKoC;AAAqB;AAKzD;AACE;AACA;AACA;AAA0C;AACkB;AAExD;AAEsC;AACxC;AAGAA;AAAU;AACZ;AAGF;;AAE4C;AAA8C;AAQ1F;AAEI;AAEA;AAGA;AAKA;AAGI;AACE;AAEA;AAEE;AAEI;AAAA;AAAC;AAAA;AACW;AAC0B;AACA;AAAA;AAAA;AAEF;AAExC;AACA;AAAC;AAAA;AACW;AAC8B;AACnC;AACC;AACE;AAER;AAAkC;AAAE;AAAA;AAAA;AAAA;AAGxC;AACF;AAEG;AAEG;AAA+C;AACS;AAE3D;AACW;AACd;AACF;AAIR;;;;"}

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

@@ -4,14 +4,14 @@ export interface GraphSearchProps extends Pick<React.ComponentProps<typeof Combo
     limit?: number;
 }
 /**
- * **Find a vertex by its text and go to it.** Every drawn vertex's `title` — or its table's
- * `identity` — is read once, then filtered in the browser as the reader types: no query per
- * keystroke. The list is ordered by the `r` ramp, so with `r="degree"` the hubs come first, and each
- * match is named by the root's `categories`. Picking one is `reveal`: the canvas frames it and
- * selects it with its neighbours, and `GraphInspector` reads it.
+ * **Find a vertex by its text and go to it** — Cosmograph's search: each pause in typing asks the
+ * corpus for the first `limit` vertices whose `title` — or its table's `identity` — contains the text,
+ * case-insensitively, one `ILIKE` over every vertex table through the page's coordinator. Nothing is
+ * read before the reader types, and no vertex's text is held in the page. Each match is named by the
+ * root's `categories`; picking one is `reveal`: the canvas frames it and selects it with its
+ * neighbours, and `GraphInspector` reads it.
  *
- * A vertex the page's filter hides is not offered, because there is nothing on the canvas to go to.
- * A read that fails is handed to `onFailure` whole and the input says so, rather than staying disabled.
+ * A read that fails is handed to `onFailure` whole and the input says so.
  */
 export declare function GraphSearch({ className, limit, placeholder, size }: GraphSearchProps): import("react").JSX.Element;
 //# sourceMappingURL=graph-search.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"graph-search.d.ts","sourceRoot":"","sources":["../../src/parts/graph-search.tsx"],"names":[],"mappings":"AAEA,OAAO,EAIL,aAAa,EAMd,MAAM,gBAAgB,CAAC;AAUxB,MAAM,WAAW,gBAAiB,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,aAAa,CAAC,EAAE,WAAW,GAAG,aAAa,GAAG,MAAM,CAAC;IAC9H,8EAA8E;IAC9E,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAmCD;;;;;;;;;GASG;AACH,wBAAgB,WAAW,CAAC,EAAE,SAAS,EAAE,KAAU,EAAE,WAA4B,EAAE,IAAW,EAAE,EAAE,gBAAgB,+BAkFjH"}
+{"version":3,"file":"graph-search.d.ts","sourceRoot":"","sources":["../../src/parts/graph-search.tsx"],"names":[],"mappings":"AAEA,OAAO,EAIL,aAAa,EAKd,MAAM,gBAAgB,CAAC;AASxB,MAAM,WAAW,gBAAiB,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,aAAa,CAAC,EAAE,WAAW,GAAG,aAAa,GAAG,MAAM,CAAC;IAC9H,8EAA8E;IAC9E,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAcD;;;;;;;;;GASG;AACH,wBAAgB,WAAW,CAAC,EAAE,SAAS,EAAE,KAAU,EAAE,WAA4B,EAAE,IAAW,EAAE,EAAE,gBAAgB,+BA+EjH"}