@kanzo-tech/graph 0.14.0 → 0.15.0

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 { denseOf, type VertexId } from \"../core/resident\";\nimport type { GraphOptions } from \"../core/state\";\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 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, hoverAt, 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, onHover: hoverAt });\n  }, [attach, hoverAt, 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    track();\n    schedule();\n  }, [labels, schedule, 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\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          composition={composition}\n          domain={domain}\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  composition: Composition | null;\n  domain: readonly unknown[];\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, composition, domain, options, scale, schedule, setHovered }: HoverCardProps) {\n  const hovered = useGraphState((s) => s.hovered);\n  useEffect(() => {\n    setHovered(hovered);\n    schedule();\n  }, [hovered, schedule, setHovered]);\n\n  const index = hovered === null ? undefined : composition?.resident.indexOf(hovered);\n  if (hovered === null || !composition || index === undefined) return null;\n  const rank = composition.categories[index] ?? 0;\n  const bound = options.fill !== undefined || options.symbol !== undefined;\n  const category = bound && 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        {composition.titles?.[index] || `#${denseOf(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":";;;;;;;;;;;;;;AAsBA;AAQA;AACE;AACA;AACA;AAEA;AACA;AAEA;AAEE;AAEA;AAA6D;AAEjE;AAEA;AAAiD;AACtC;AAEX;AAYO;AACL;;AAKoC;AAAqB;;AAGtB;AAAqB;AAMxD;AACE;AACA;AACA;AAA0F;AAG5F;AACA;;AACE;AAAY;AAGd;AAAe;AACoD;AACjC;AAElC;AACE;AAEA;AAGF;AAA2B;AACzB;AACiB;AAC8C;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;AACA;AACE;AACA;AAGF;AACA;AACA;AAGA;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/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 instanceof Error ? error.message : String(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;AACiF;AAEnH;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;;;;"}

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

@@ -9,10 +9,10 @@ export interface GraphInspectorProps extends Omit<React.ComponentProps<"div">, "
     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.
+ * **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.
  */
 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;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"}
+{"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;AAWD;;;;;GAKG;AACH,wBAAgB,cAAc,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,IAAI,EAAE,GAAG,IAAI,EAAE,EAAE,mBAAmB,+BAuFzF"}

package/dist/parts/graph-inspector.js

@@ -1,84 +1,82 @@
 "use client";
-import { jsxs as s, jsx as e, Fragment as k } from "react/jsx-runtime";
-import { useChartCapacity as I, Show as p, Skeleton as D, Badge as L, Button as z, DataList as G, DataListItem as B, DataListItemLabel as F, DataListItemValue as M, cn as j } from "@kanzo-tech/ui";
-import { CrosshairIcon as A } from "lucide-react";
-import { useMemo as E, useState as V, useEffect as T } from "react";
-import { nameOf as $ } from "../core/categories.js";
-import { bindingOf as q } from "../core/channels.js";
-import { readVertex as H } from "../core/detail.js";
-import { denseOf as J } from "../core/resident.js";
-import { useGraphContext as K } from "../react/graph-root.js";
-import { internalsOf as P } from "../react/use-graph.js";
-import { useGraphState as d } from "../react/use-graph-state.js";
-import { scaleOf as Q } from "../render/graph-model.js";
-import { ShapeGlyph as R } from "./shape-glyph.js";
-const w = (a) => a instanceof Date ? a.toISOString().slice(0, 10) : a == null || a === "" ? "—" : String(a);
-function it({ children: a, className: S, slot: y, ...C }) {
-  const c = K(), o = d((t) => t.focus), h = d((t) => t.corpus), l = d((t) => t.options), O = d((t) => {
-    var r;
-    return ((r = t.drawn) == null ? void 0 : r.domain) ?? t.domain;
-  }), u = I(), x = E(() => Q(l, u), [l, u]), [f, g] = V(null);
-  T(() => {
-    const t = P(c).store.getSnapshot().matrix;
-    if (o === null || !h || !t) return;
-    const r = new AbortController();
-    return H(h, t, o, r.signal).then(
-      (i) => !r.signal.aborted && g({ vertex: o, detail: i }),
-      (i) => {
-        r.signal.aborted || (g({ vertex: o, detail: null }), c.getState().options.onFailure(i instanceof Error ? i.message : String(i)));
+import { jsxs as i, jsx as n, Fragment as O } from "react/jsx-runtime";
+import { useChartCapacity as B, Show as m, Skeleton as F, Badge as M, Button as T, DataList as j, DataListItem as A, DataListItemLabel as E, DataListItemValue as V, cn as $ } from "@kanzo-tech/ui";
+import { CrosshairIcon as q } from "lucide-react";
+import { useMemo as H, useState as J, useEffect as K } from "react";
+import { nameOf as P } from "../core/categories.js";
+import { bindingOf as Q } from "../core/channels.js";
+import { readVertex as R } from "../core/detail.js";
+import { useGraphContext as U } from "../react/graph-root.js";
+import { useGraphState as d, useGraphSnapshot as W } from "../react/use-graph-state.js";
+import { scaleOf as X } from "../render/graph-model.js";
+import { ShapeGlyph as Y } from "./shape-glyph.js";
+const w = (s) => s instanceof Date ? s.toISOString().slice(0, 10) : s == null || s === "" ? "—" : String(s);
+function ct({ children: s, className: C, slot: I, ...k }) {
+  var y;
+  const p = U(), o = d((t) => t.focus), h = d((t) => t.corpus), r = W((t) => t.geometry), l = d((t) => t.options), D = d((t) => {
+    var a;
+    return ((a = t.drawn) == null ? void 0 : a.domain) ?? t.domain;
+  }), g = B(), v = H(() => X(l, g), [l, g]), [f, b] = J(null);
+  K(() => {
+    if (o === null || !h || !r) return;
+    const t = new AbortController();
+    return R(h, r, o, t.signal).then(
+      (a) => !t.signal.aborted && b({ vertex: o, detail: a }),
+      (a) => {
+        t.signal.aborted || (b({ vertex: o, detail: null }), p.getState().options.onFailure(a instanceof Error ? a.message : String(a)));
       }
-    ), () => r.abort();
-  }, [c, h, o]);
-  const n = f !== null && f.vertex === o ? f.detail : void 0, v = (t) => {
-    var r;
-    return (r = n == null ? void 0 : n.fields.find((i) => i.name === t)) == null ? void 0 : r.value;
-  }, N = q(l).category, m = v(N), b = O.indexOf(typeof m == "bigint" ? Number(m) : m);
-  return /* @__PURE__ */ s("div", { ...C, className: j("space-y-3 text-sm", S), "data-slot": y ?? "graph-inspector", children: [
-    /* @__PURE__ */ e(p, { when: o === null, children: /* @__PURE__ */ e("p", { className: "text-muted-foreground text-xs", children: "Click a vertex on the canvas to inspect it." }) }),
-    /* @__PURE__ */ e(p, { when: o !== null && n === void 0, children: /* @__PURE__ */ e(D, { className: "h-24 w-full" }) }),
-    /* @__PURE__ */ e(p, { when: o !== null && n === null, children: /* @__PURE__ */ e("p", { className: "text-muted-foreground text-xs", children: "This vertex could not be read." }) }),
-    n && /* @__PURE__ */ s(k, { children: [
-      /* @__PURE__ */ s("div", { children: [
-        /* @__PURE__ */ e("p", { className: "truncate font-medium", "data-slot": "graph-inspector-title", children: l.title === void 0 ? `#${J(n.vertex)}` : w(v(l.title)) }),
-        /* @__PURE__ */ s("div", { className: "mt-1 flex items-center gap-1.5", children: [
-          /* @__PURE__ */ e(p, { when: N !== void 0, children: /* @__PURE__ */ s(L, { className: "gap-1 text-[10px]", size: "xs", variant: "outline", children: [
-            /* @__PURE__ */ e(
-              R,
+    ), () => t.abort();
+  }, [p, h, o, r]);
+  const e = f !== null && f.vertex === o ? f.detail : void 0, u = (t) => {
+    var a;
+    return (a = e == null ? void 0 : e.fields.find((z) => z.name === t)) == null ? void 0 : a.value;
+  }, c = Q(l), N = c.byTable ? e == null ? void 0 : e.table : u(c.category), S = D.findIndex((t) => String(t) === String(N)), G = c.byTable || c.category !== void 0, L = (y = r == null ? void 0 : r.tables.find((t) => t.name === (e == null ? void 0 : e.table))) == null ? void 0 : y.identity, x = u(l.title) ?? u(L);
+  return /* @__PURE__ */ i("div", { ...k, className: $("space-y-3 text-sm", C), "data-slot": I ?? "graph-inspector", children: [
+    /* @__PURE__ */ n(m, { when: o === null, children: /* @__PURE__ */ n("p", { className: "text-muted-foreground text-xs", children: "Click a vertex on the canvas to inspect it." }) }),
+    /* @__PURE__ */ n(m, { when: o !== null && e === void 0, children: /* @__PURE__ */ n(F, { className: "h-24 w-full" }) }),
+    /* @__PURE__ */ n(m, { when: o !== null && e === null, children: /* @__PURE__ */ n("p", { className: "text-muted-foreground text-xs", children: "This vertex could not be read." }) }),
+    e && /* @__PURE__ */ i(O, { children: [
+      /* @__PURE__ */ i("div", { children: [
+        /* @__PURE__ */ n("p", { className: "truncate font-medium", "data-slot": "graph-inspector-title", children: x == null ? `#${e.vertex}` : w(x) }),
+        /* @__PURE__ */ i("div", { className: "mt-1 flex items-center gap-1.5", children: [
+          /* @__PURE__ */ n(m, { when: G, children: /* @__PURE__ */ i(M, { className: "gap-1 text-[10px]", size: "xs", variant: "outline", children: [
+            /* @__PURE__ */ n(
+              Y,
               {
                 className: "size-2 shrink-0",
-                color: x.color(Math.max(0, b)),
-                shape: x.shape(Math.max(0, b))
+                color: v.color(Math.max(0, S)),
+                shape: v.shape(Math.max(0, S))
               }
             ),
-            $(m, l.categories)
+            P(N, l.categories)
           ] }) }),
-          /* @__PURE__ */ s(
-            z,
+          /* @__PURE__ */ i(
+            T,
             {
               className: "h-5 gap-1 text-[10px]",
-              onClick: () => c.reveal(n.vertex),
+              onClick: () => p.reveal(e.vertex),
               size: "sm",
               title: "Bring this vertex into view on the canvas",
               variant: "ghost",
               children: [
-                /* @__PURE__ */ e(A, { className: "size-3" }),
+                /* @__PURE__ */ n(q, { className: "size-3" }),
                 "Find on canvas"
               ]
             }
           )
         ] })
       ] }),
-      /* @__PURE__ */ s(G, { orientation: "vertical", children: [
-        n.fields.map((t) => /* @__PURE__ */ s(B, { className: "gap-0.5 py-0", children: [
-          /* @__PURE__ */ e(F, { className: "text-xs", children: t.name }),
-          /* @__PURE__ */ e(M, { className: "break-all", children: w(t.value) })
+      /* @__PURE__ */ i(j, { orientation: "vertical", children: [
+        e.fields.map((t) => /* @__PURE__ */ i(A, { className: "gap-0.5 py-0", children: [
+          /* @__PURE__ */ n(E, { className: "text-xs", children: t.name }),
+          /* @__PURE__ */ n(V, { className: "break-all", children: w(t.value) })
         ] }, t.name)),
-        a == null ? void 0 : a(n)
+        s == null ? void 0 : s(e)
       ] })
     ] })
   ] });
 }
 export {
-  it as GraphInspector
+  ct 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 { denseOf } from \"../core/resident\";\nimport { useGraphContext } from \"../react/graph-root\";\nimport { internalsOf } from \"../react/use-graph\";\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\ntype Answer = { vertex: bigint; detail: VertexDetail | null } | null;\n\n/**\n * **The focused vertex, fetched and laid out by the corpus's own types.** A tile carries what the\n * channels project and nothing else, so the rest of the row is read when a reader focuses it — one\n * payload tile, filtered to one `dense_id`, cancelled when the focus moves on. The fields are the\n * type's, in the order the corpus declares them; the address 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 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    const matrix = internalsOf(api).store.getSnapshot().matrix;\n    if (focus === null || !corpus || !matrix) return;\n    const aborter = new AbortController();\n    readVertex(corpus, matrix, 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: null });\n        api.getState().options.onFailure(error instanceof Error ? error.message : String(error));\n      },\n    );\n    return () => aborter.abort();\n  }, [api, corpus, focus]);\n\n  const current = answer !== null && answer.vertex === focus ? answer.detail : undefined;\n  const field = (name: string | undefined) => current?.fields.find((f) => f.name === name)?.value;\n  const category = bindingOf(options).category;\n  const value = field(category);\n  const rank = domain.indexOf(typeof value === \"bigint\" ? Number(value) : value);\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 && current === undefined}>\n        <Skeleton className=\"h-24 w-full\" />\n      </Show>\n      <Show when={focus !== null && current === null}>\n        <p className=\"text-muted-foreground text-xs\">This vertex could not be read.</p>\n      </Show>\n      {current && (\n        <>\n          <div>\n            <p className=\"truncate font-medium\" data-slot=\"graph-inspector-title\">\n              {options.title === undefined ? `#${denseOf(current.vertex)}` : text(field(options.title))}\n            </p>\n            <div className=\"mt-1 flex items-center gap-1.5\">\n              <Show when={category !== undefined}>\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(value, 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":";;;;;;;;;;;;;;AAoCA;AAcO;AACL;;AAIoC;AAAqB;AAKzD;AACE;AACA;AACA;AACA;AAAkD;AAC0B;AAExE;AAEuF;AACzF;AAEmB;AAGvB;;AAC4C;AAA8C;AAK1F;AAEI;AAEA;AAGA;AAGA;AAGI;AACE;AAEA;AAEE;AAEI;AAAA;AAAC;AAAA;AACW;AAC0B;AACA;AAAA;AAAA;AAEL;AAErC;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/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\ntype Answer = { vertex: VertexId; detail: VertexDetail | null } | 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: null });\n        api.getState().options.onFailure(error instanceof Error ? error.message : String(error));\n      },\n    );\n    return () => aborter.abort();\n  }, [api, corpus, focus, geometry]);\n\n  const current = answer !== null && answer.vertex === focus ? answer.detail : undefined;\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 && current === undefined}>\n        <Skeleton className=\"h-24 w-full\" />\n      </Show>\n      <Show when={focus !== null && current === null}>\n        <p className=\"text-muted-foreground text-xs\">This vertex could not be read.</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;AAcO;;AACL;;AAKoC;AAAqB;AAKzD;AACE;AACA;AACA;AAAoD;AACwB;AAExE;AAEuF;AACzF;AAEmB;AAGvB;;AAC4C;AAA8C;AAQ1F;AAEI;AAEA;AAGA;AAGA;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-legend.d.ts

@@ -1,9 +1,9 @@
 export type GraphLegendProps = React.ComponentProps<"div">;
 /**
- * **The categorical scale the canvas draws, as rows** — glyph, name and how many vertices the marks of
- * that category stand for in view, then what is drawn of the whole. The rows are the domain fixed
- * before any tile arrived, so a row never moves and a colour never changes hands; a category past the
- * palette's capacity is Other, as it is on the canvas.
+ * **The categorical scale the canvas draws, as rows** — glyph, name and how many vertices of that
+ * category are drawn, then what is drawn of the whole. Unbound, the categories are the vertex types.
+ * The rows are the domain fixed before the graph loaded, so a row never moves and a colour never
+ * changes hands; a category past the palette's capacity is Other, as it is on the canvas.
  *
  * Names are the root's `categories`, never this part's: a legend that renamed a category would be
  * encoding one product's policy, which is the parts rule's reversal.

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

@@ -1 +1 @@
-{"version":3,"file":"graph-legend.d.ts","sourceRoot":"","sources":["../../src/parts/graph-legend.tsx"],"names":[],"mappings":"AAUA,MAAM,MAAM,gBAAgB,GAAG,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,CAAC;AAI3D;;;;;;;;GAQG;AACH,wBAAgB,WAAW,CAAC,EAAE,SAAS,EAAE,IAAI,EAAE,GAAG,IAAI,EAAE,EAAE,gBAAgB,+BA6CzE"}
+{"version":3,"file":"graph-legend.d.ts","sourceRoot":"","sources":["../../src/parts/graph-legend.tsx"],"names":[],"mappings":"AAUA,MAAM,MAAM,gBAAgB,GAAG,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,CAAC;AAI3D;;;;;;;;GAQG;AACH,wBAAgB,WAAW,CAAC,EAAE,SAAS,EAAE,IAAI,EAAE,GAAG,IAAI,EAAE,EAAE,gBAAgB,+BA8CzE"}

package/dist/parts/graph-legend.js

@@ -1,52 +1,52 @@
 "use client";
 import { jsxs as s, jsx as a } from "react/jsx-runtime";
-import { useChartCapacity as S, Show as f, cn as x } from "@kanzo-tech/ui";
+import { useChartCapacity as S, Show as x, cn as b } from "@kanzo-tech/ui";
 import { useMemo as O } from "react";
-import { nameOf as v } from "../core/categories.js";
-import { bindingOf as G } from "../core/channels.js";
+import { nameOf as G } from "../core/categories.js";
+import { bindingOf as j } from "../core/channels.js";
 import { useGraphState as r } from "../react/use-graph-state.js";
-import { scaleOf as j } from "../render/graph-model.js";
-import { ShapeGlyph as N } from "./shape-glyph.js";
-const z = (l, c) => l.length === c.length && l.every((p, n) => p === c[n]);
+import { scaleOf as z } from "../render/graph-model.js";
+import { ShapeGlyph as y } from "./shape-glyph.js";
+const C = (l, c) => l.length === c.length && l.every((p, n) => p === c[n]);
 function E({ className: l, slot: c, ...p }) {
   const n = r((e) => e.options), u = r((e) => {
     var t;
     return ((t = e.drawn) == null ? void 0 : t.domain) ?? e.domain;
-  }, z), d = r((e) => {
+  }, C), i = r((e) => {
     var t;
     return ((t = e.drawn) == null ? void 0 : t.tally) ?? null;
-  }), w = r((e) => {
+  }), N = r((e) => {
     var t;
-    return ((t = e.drawn) == null ? void 0 : t.represented) ?? null;
-  }), y = r((e) => e.total), o = S(), i = O(() => j(n, o), [n, o]), g = G(n).category !== void 0, h = u.slice(0, o), b = d ? d.slice(o).reduce((e, t) => e + t, 0) : null, m = (e) => e == null ? "—" : e.toLocaleString();
+    return ((t = e.drawn) == null ? void 0 : t.vertices) ?? null;
+  }), w = r((e) => e.total), o = S(), d = O(() => z(n, o), [n, o]), g = j(n), f = g.byTable || g.category !== void 0, h = u.slice(0, o), v = i ? i.slice(o).reduce((e, t) => e + t, 0) : null, m = (e) => e == null ? "—" : e.toLocaleString();
   return /* @__PURE__ */ s(
     "div",
     {
       ...p,
-      className: x("rounded-lg border bg-card px-2.5 py-1.5 text-xs", l),
+      className: b("rounded-lg border bg-card px-2.5 py-1.5 text-xs", l),
       "data-slot": c ?? "graph-legend",
       children: [
-        /* @__PURE__ */ a(f, { when: g && h.length > 0, children: /* @__PURE__ */ s("ul", { className: "space-y-1", "data-slot": "graph-legend-items", children: [
+        /* @__PURE__ */ a(x, { when: f && h.length > 0, children: /* @__PURE__ */ s("ul", { className: "space-y-1", "data-slot": "graph-legend-items", children: [
           h.map((e, t) => /* @__PURE__ */ s("li", { className: "flex items-center gap-2", "data-slot": "graph-legend-item", children: [
-            /* @__PURE__ */ a(N, { className: "size-2.5 shrink-0", color: i.color(t), shape: i.shape(t) }),
-            /* @__PURE__ */ a("span", { className: "truncate", children: v(e, n.categories) }),
-            /* @__PURE__ */ a("span", { className: "ms-auto ps-4 text-muted-foreground tabular-nums", children: m(d ? d[t] ?? 0 : null) })
+            /* @__PURE__ */ a(y, { className: "size-2.5 shrink-0", color: d.color(t), shape: d.shape(t) }),
+            /* @__PURE__ */ a("span", { className: "truncate", children: G(e, n.categories) }),
+            /* @__PURE__ */ a("span", { className: "ms-auto ps-4 text-muted-foreground tabular-nums", children: m(i ? i[t] ?? 0 : null) })
           ] }, String(e))),
-          /* @__PURE__ */ a(f, { when: u.length > o, children: /* @__PURE__ */ s("li", { className: "flex items-center gap-2", "data-slot": "graph-legend-item", children: [
-            /* @__PURE__ */ a(N, { className: "size-2.5 shrink-0", color: i.color(o), shape: i.shape(o) }),
+          /* @__PURE__ */ a(x, { when: u.length > o, children: /* @__PURE__ */ s("li", { className: "flex items-center gap-2", "data-slot": "graph-legend-item", children: [
+            /* @__PURE__ */ a(y, { className: "size-2.5 shrink-0", color: d.color(o), shape: d.shape(o) }),
             /* @__PURE__ */ a("span", { children: "Other" }),
-            /* @__PURE__ */ a("span", { className: "ms-auto ps-4 text-muted-foreground tabular-nums", children: m(b) })
+            /* @__PURE__ */ a("span", { className: "ms-auto ps-4 text-muted-foreground tabular-nums", children: m(v) })
           ] }) })
         ] }) }),
         /* @__PURE__ */ s(
           "p",
           {
-            className: x("text-muted-foreground tabular-nums", g && h.length > 0 && "mt-1 border-t pt-1"),
+            className: b("text-muted-foreground tabular-nums", f && h.length > 0 && "mt-1 border-t pt-1"),
             "data-slot": "graph-legend-count",
             children: [
-              m(w),
+              m(N),
               " of ",
-              m(y),
+              m(w),
               " drawn"
             ]
           }

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

@@ -1 +1 @@
-{"version":3,"file":"graph-legend.js","sources":["../../src/parts/graph-legend.tsx"],"sourcesContent":["\"use client\";\n\nimport { cn, Show, useChartCapacity } from \"@kanzo-tech/ui\";\nimport { useMemo } from \"react\";\nimport { nameOf } from \"../core/categories\";\nimport { bindingOf } from \"../core/channels\";\nimport { useGraphState } from \"../react/use-graph-state\";\nimport { scaleOf } from \"../render/graph-model\";\nimport { ShapeGlyph } from \"./shape-glyph\";\n\nexport type GraphLegendProps = React.ComponentProps<\"div\">;\n\nconst shallow = (a: readonly unknown[], b: readonly unknown[]) => a.length === b.length && a.every((v, i) => v === b[i]);\n\n/**\n * **The categorical scale the canvas draws, as rows** — glyph, name and how many vertices the marks of\n * that category stand for in view, then what is drawn of the whole. The rows are the domain fixed\n * before any tile arrived, so a row never moves and a colour never changes hands; a category past the\n * palette's capacity is Other, as it is on the canvas.\n *\n * Names are the root's `categories`, never this part's: a legend that renamed a category would be\n * encoding one product's policy, which is the parts rule's reversal.\n */\nexport function GraphLegend({ className, slot, ...rest }: GraphLegendProps) {\n  const options = useGraphState((s) => s.options);\n  const domain = useGraphState((s) => s.drawn?.domain ?? s.domain, shallow);\n  const tally = useGraphState((s) => s.drawn?.tally ?? null);\n  const represented = useGraphState((s) => s.drawn?.represented ?? null);\n  const total = useGraphState((s) => s.total);\n  const capacity = useChartCapacity();\n  const scale = useMemo(() => scaleOf(options, capacity), [options, capacity]);\n  const bound = bindingOf(options).category !== undefined;\n  const shown = domain.slice(0, capacity);\n  const other = tally ? tally.slice(capacity).reduce((sum, n) => sum + n, 0) : null;\n  const count = (n: number | null | undefined) => (n === null || n === undefined ? \"—\" : n.toLocaleString());\n\n  return (\n    <div\n      {...rest}\n      className={cn(\"rounded-lg border bg-card px-2.5 py-1.5 text-xs\", className)}\n      data-slot={slot ?? \"graph-legend\"}\n    >\n      <Show when={bound && shown.length > 0}>\n        <ul className=\"space-y-1\" data-slot=\"graph-legend-items\">\n          {shown.map((value, rank) => (\n            <li className=\"flex items-center gap-2\" data-slot=\"graph-legend-item\" key={String(value)}>\n              <ShapeGlyph className=\"size-2.5 shrink-0\" color={scale.color(rank)} shape={scale.shape(rank)} />\n              <span className=\"truncate\">{nameOf(value, options.categories)}</span>\n              <span className=\"ms-auto ps-4 text-muted-foreground tabular-nums\">{count(tally ? (tally[rank] ?? 0) : null)}</span>\n            </li>\n          ))}\n          <Show when={domain.length > capacity}>\n            <li className=\"flex items-center gap-2\" data-slot=\"graph-legend-item\">\n              <ShapeGlyph className=\"size-2.5 shrink-0\" color={scale.color(capacity)} shape={scale.shape(capacity)} />\n              <span>Other</span>\n              <span className=\"ms-auto ps-4 text-muted-foreground tabular-nums\">{count(other)}</span>\n            </li>\n          </Show>\n        </ul>\n      </Show>\n      <p\n        className={cn(\"text-muted-foreground tabular-nums\", bound && shown.length > 0 && \"mt-1 border-t pt-1\")}\n        data-slot=\"graph-legend-count\"\n      >\n        {count(represented)} of {count(total)} drawn\n      </p>\n    </div>\n  );\n}\n"],"names":[],"mappings":";;;;;;;;;AAYA;AAWO;AACL;;AACoC;AAAqB;;AACtB;AAAkB;;AACZ;AAAwB;AASjE;AACE;AAAC;AAAA;AACK;AACsE;AACvD;AAEnB;AAEK;AAEG;AAA8F;AAChC;AAC8C;AAE/G;AAGG;AAAsG;AAC3F;AACqE;AAEpF;AAEJ;AACA;AAAC;AAAA;AACsG;AAC3F;AAET;AAAiB;AAAE;AAAgB;AAAE;AAAA;AAAA;AAAA;AACxC;AAAA;AAGN;;;;"}
+{"version":3,"file":"graph-legend.js","sources":["../../src/parts/graph-legend.tsx"],"sourcesContent":["\"use client\";\n\nimport { cn, Show, useChartCapacity } from \"@kanzo-tech/ui\";\nimport { useMemo } from \"react\";\nimport { nameOf } from \"../core/categories\";\nimport { bindingOf } from \"../core/channels\";\nimport { useGraphState } from \"../react/use-graph-state\";\nimport { scaleOf } from \"../render/graph-model\";\nimport { ShapeGlyph } from \"./shape-glyph\";\n\nexport type GraphLegendProps = React.ComponentProps<\"div\">;\n\nconst shallow = (a: readonly unknown[], b: readonly unknown[]) => a.length === b.length && a.every((v, i) => v === b[i]);\n\n/**\n * **The categorical scale the canvas draws, as rows** — glyph, name and how many vertices of that\n * category are drawn, then what is drawn of the whole. Unbound, the categories are the vertex types.\n * The rows are the domain fixed before the graph loaded, so a row never moves and a colour never\n * changes hands; a category past the palette's capacity is Other, as it is on the canvas.\n *\n * Names are the root's `categories`, never this part's: a legend that renamed a category would be\n * encoding one product's policy, which is the parts rule's reversal.\n */\nexport function GraphLegend({ className, slot, ...rest }: GraphLegendProps) {\n  const options = useGraphState((s) => s.options);\n  const domain = useGraphState((s) => s.drawn?.domain ?? s.domain, shallow);\n  const tally = useGraphState((s) => s.drawn?.tally ?? null);\n  const vertices = useGraphState((s) => s.drawn?.vertices ?? null);\n  const total = useGraphState((s) => s.total);\n  const capacity = useChartCapacity();\n  const scale = useMemo(() => scaleOf(options, capacity), [options, capacity]);\n  const binding = bindingOf(options);\n  const bound = binding.byTable || binding.category !== undefined;\n  const shown = domain.slice(0, capacity);\n  const other = tally ? tally.slice(capacity).reduce((sum, n) => sum + n, 0) : null;\n  const count = (n: number | null | undefined) => (n === null || n === undefined ? \"—\" : n.toLocaleString());\n\n  return (\n    <div\n      {...rest}\n      className={cn(\"rounded-lg border bg-card px-2.5 py-1.5 text-xs\", className)}\n      data-slot={slot ?? \"graph-legend\"}\n    >\n      <Show when={bound && shown.length > 0}>\n        <ul className=\"space-y-1\" data-slot=\"graph-legend-items\">\n          {shown.map((value, rank) => (\n            <li className=\"flex items-center gap-2\" data-slot=\"graph-legend-item\" key={String(value)}>\n              <ShapeGlyph className=\"size-2.5 shrink-0\" color={scale.color(rank)} shape={scale.shape(rank)} />\n              <span className=\"truncate\">{nameOf(value, options.categories)}</span>\n              <span className=\"ms-auto ps-4 text-muted-foreground tabular-nums\">{count(tally ? (tally[rank] ?? 0) : null)}</span>\n            </li>\n          ))}\n          <Show when={domain.length > capacity}>\n            <li className=\"flex items-center gap-2\" data-slot=\"graph-legend-item\">\n              <ShapeGlyph className=\"size-2.5 shrink-0\" color={scale.color(capacity)} shape={scale.shape(capacity)} />\n              <span>Other</span>\n              <span className=\"ms-auto ps-4 text-muted-foreground tabular-nums\">{count(other)}</span>\n            </li>\n          </Show>\n        </ul>\n      </Show>\n      <p\n        className={cn(\"text-muted-foreground tabular-nums\", bound && shown.length > 0 && \"mt-1 border-t pt-1\")}\n        data-slot=\"graph-legend-count\"\n      >\n        {count(vertices)} of {count(total)} drawn\n      </p>\n    </div>\n  );\n}\n"],"names":[],"mappings":";;;;;;;;;AAYA;AAWO;AACL;;AACoC;AAAqB;;AACtB;AAAkB;;AACf;AAAqB;AAU3D;AACE;AAAC;AAAA;AACK;AACsE;AACvD;AAEnB;AAEK;AAEG;AAA8F;AAChC;AAC8C;AAE/G;AAGG;AAAsG;AAC3F;AACqE;AAEpF;AAEJ;AACA;AAAC;AAAA;AACsG;AAC3F;AAET;AAAc;AAAE;AAAgB;AAAE;AAAA;AAAA;AAAA;AACrC;AAAA;AAGN;;;;"}

package/dist/parts/overlays.d.ts

@@ -1,5 +1,5 @@
 import { Graph } from '@cosmos.gl/graph';
-import { Resident, VertexId } from '../core/resident';
+import { VertexId } from '../core/types';
 export interface GraphOverlays {
     /** The box the overlays are positioned within — the canvas' own bounds. */
     hostRef: React.RefObject<HTMLDivElement | null>;
@@ -26,11 +26,9 @@ export interface GraphOverlays {
     schedule: () => void;
 }
 /**
- * The labels, the hover card and the grid, positioned from the renderer every frame: points are
- * tracked by index through the resident map, and every overlay is held by identity.
+ * The labels, the hover card and the grid, positioned from the renderer every frame.
  */
 export declare function useOverlays(api: {
     getGraph: () => Graph | null;
-    getResident: () => Resident;
 }): GraphOverlays;
 //# sourceMappingURL=overlays.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"overlays.d.ts","sourceRoot":"","sources":["../../src/parts/overlays.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAC9C,OAAO,KAAK,EAAE,QAAQ,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AA6C3D,MAAM,WAAW,aAAa;IAC5B,2EAA2E;IAC3E,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;IAChD,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;IAChD,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;IAChD,mDAAmD;IACnD,QAAQ,EAAE,CAAC,MAAM,EAAE,QAAQ,KAAK,CAAC,OAAO,EAAE,WAAW,GAAG,IAAI,KAAK,IAAI,CAAC;IACtE,gFAAgF;IAChF,aAAa,EAAE,CAAC,QAAQ,EAAE,QAAQ,EAAE,KAAK,IAAI,CAAC;IAC9C,8EAA8E;IAC9E,UAAU,EAAE,CAAC,MAAM,EAAE,QAAQ,GAAG,IAAI,KAAK,IAAI,CAAC;IAC9C,8FAA8F;IAC9F,OAAO,EAAE,CAAC,QAAQ,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,GAAG,IAAI,KAAK,IAAI,CAAC;IACrD;;;;;;;OAOG;IACH,KAAK,EAAE,MAAM,IAAI,CAAC;IAClB,qEAAqE;IACrE,QAAQ,EAAE,MAAM,IAAI,CAAC;CACtB;AAED;;;GAGG;AACH,wBAAgB,WAAW,CAAC,GAAG,EAAE;IAAE,QAAQ,EAAE,MAAM,KAAK,GAAG,IAAI,CAAC;IAAC,WAAW,EAAE,MAAM,QAAQ,CAAA;CAAE,GAAG,aAAa,CAgO7G"}
+{"version":3,"file":"overlays.d.ts","sourceRoot":"","sources":["../../src/parts/overlays.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;AAC9C,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AA0C9C,MAAM,WAAW,aAAa;IAC5B,2EAA2E;IAC3E,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;IAChD,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;IAChD,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;IAChD,mDAAmD;IACnD,QAAQ,EAAE,CAAC,MAAM,EAAE,QAAQ,KAAK,CAAC,OAAO,EAAE,WAAW,GAAG,IAAI,KAAK,IAAI,CAAC;IACtE,gFAAgF;IAChF,aAAa,EAAE,CAAC,QAAQ,EAAE,QAAQ,EAAE,KAAK,IAAI,CAAC;IAC9C,8EAA8E;IAC9E,UAAU,EAAE,CAAC,MAAM,EAAE,QAAQ,GAAG,IAAI,KAAK,IAAI,CAAC;IAC9C,8FAA8F;IAC9F,OAAO,EAAE,CAAC,QAAQ,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,GAAG,IAAI,KAAK,IAAI,CAAC;IACrD;;;;;;;OAOG;IACH,KAAK,EAAE,MAAM,IAAI,CAAC;IAClB,qEAAqE;IACrE,QAAQ,EAAE,MAAM,IAAI,CAAC;CACtB;AAED;;GAEG;AACH,wBAAgB,WAAW,CAAC,GAAG,EAAE;IAAE,QAAQ,EAAE,MAAM,KAAK,GAAG,IAAI,CAAA;CAAE,GAAG,aAAa,CAuNhF"}

package/dist/parts/overlays.js

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