@opendata-ai/openchart-vanilla 8.4.1 → 8.5.1

package/dist/chunk-WOLX5EZT.js

@@ -0,0 +1,3577 @@
+import {
+  AnimationScheduler,
+  SpatialIndex,
+  createTooltipManager,
+  createTween,
+  observeResize,
+  prefersReducedMotion,
+  resolveDarkMode,
+  resolveEase
+} from "./chunk-2OJZBMXM.js";
+import {
+  resolvedSurface
+} from "./chunk-NG7CVCI2.js";
+
+// src/graph/renderer-registry.ts
+var registry = /* @__PURE__ */ new Map();
+function registerGraphRenderer(dimensions, factory) {
+  registry.set(dimensions, factory);
+}
+function getGraphRenderer(dimensions) {
+  return registry.get(dimensions);
+}
+var GRAPH_3D_NOT_REGISTERED_ERROR = 'createGraph: dimensions: 3 requires import "@opendata-ai/openchart-vanilla/graph-3d"';
+
+// src/graph-mount.ts
+import { buildEdgeTooltip, compileGraph } from "@opendata-ai/openchart-engine";
+
+// src/graph/camera.ts
+import { interpolateZoom } from "d3-interpolate";
+
+// src/graph/zoom.ts
+var ZoomTransform = class _ZoomTransform {
+  constructor(x, y, k) {
+    this.x = x;
+    this.y = y;
+    this.k = k;
+  }
+  /** Convert screen coordinates to graph coordinates. */
+  screenToGraph(sx, sy) {
+    return {
+      x: (sx - this.x) / this.k,
+      y: (sy - this.y) / this.k
+    };
+  }
+  /** Convert graph coordinates to screen coordinates. */
+  graphToScreen(gx, gy) {
+    return {
+      x: gx * this.k + this.x,
+      y: gy * this.k + this.y
+    };
+  }
+  /**
+   * Zoom to a target scale, keeping the given screen-space pivot
+   * point fixed (content under the cursor stays under the cursor).
+   */
+  zoomAt(targetK, pivotX, pivotY) {
+    const gx = (pivotX - this.x) / this.k;
+    const gy = (pivotY - this.y) / this.k;
+    return new _ZoomTransform(pivotX - gx * targetK, pivotY - gy * targetK, targetK);
+  }
+  /** Pan by a screen-space delta. */
+  pan(dx, dy) {
+    return new _ZoomTransform(this.x + dx, this.y + dy, this.k);
+  }
+  /**
+   * Compute a transform that fits all nodes within the given canvas
+   * dimensions with the specified padding.
+   *
+   * Returns the transform and the ideal content height (in screen pixels)
+   * so callers can shrink the canvas to eliminate dead space.
+   */
+  static fitBounds(nodes, canvasW, canvasH, padding = 40, opts) {
+    if (nodes.length === 0) {
+      return { transform: _ZoomTransform.identity(), contentHeight: canvasH };
+    }
+    const insetTop = Math.min(Math.max(0, opts?.insetTop ?? 0), canvasH * 0.4);
+    let minX = Infinity;
+    let minY = Infinity;
+    let maxX = -Infinity;
+    let maxY = -Infinity;
+    for (const n of nodes) {
+      const r = n.radius;
+      if (n.x - r < minX) minX = n.x - r;
+      if (n.y - r < minY) minY = n.y - r;
+      if (n.x + r > maxX) maxX = n.x + r;
+      if (n.y + r > maxY) maxY = n.y + r;
+    }
+    let graphW = maxX - minX;
+    let graphH = maxY - minY;
+    if (graphW === 0 && graphH === 0) {
+      return {
+        transform: new _ZoomTransform(
+          canvasW / 2 - minX,
+          insetTop + (canvasH - insetTop) / 2 - minY,
+          1
+        ),
+        contentHeight: padding * 2 + insetTop
+      };
+    }
+    if (opts?.spread !== false && nodes.length > 50) {
+      const spread = 1 + Math.sqrt(nodes.length) / 120;
+      const cx2 = (minX + maxX) / 2;
+      const cy2 = (minY + maxY) / 2;
+      graphW *= spread;
+      graphH *= spread;
+      minX = cx2 - graphW / 2;
+      maxX = cx2 + graphW / 2;
+      minY = cy2 - graphH / 2;
+      maxY = cy2 + graphH / 2;
+    }
+    const availW = canvasW - padding * 2;
+    const availH = canvasH - insetTop - padding * 2;
+    const k = Math.min(1, availW / graphW, availH / graphH);
+    const cx = (minX + maxX) / 2;
+    const cy = (minY + maxY) / 2;
+    const tx = canvasW / 2 - cx * k;
+    const ty = insetTop + (canvasH - insetTop) / 2 - cy * k;
+    const contentHeight = graphH * k + padding * 2 + insetTop;
+    return {
+      transform: new _ZoomTransform(tx, ty, k),
+      contentHeight
+    };
+  }
+  /** Identity transform (no pan, no zoom). */
+  static identity() {
+    return new _ZoomTransform(0, 0, 1);
+  }
+};
+
+// src/graph/camera.ts
+var K_MIN = 0.05;
+var K_MAX = 15;
+var AUTO_MIN_MS = 400;
+var AUTO_MAX_MS = 600;
+var AUTO_SCALE = 0.6;
+function transformToView(t, viewport) {
+  const cx = (viewport.width / 2 - t.x) / t.k;
+  const cy = (viewport.height / 2 - t.y) / t.k;
+  const width = viewport.width / t.k;
+  return [cx, cy, width];
+}
+function viewToTransform(view, viewport) {
+  const [cx, cy, width] = view;
+  const k = clampK(viewport.width / width);
+  const x = viewport.width / 2 - cx * k;
+  const y = viewport.height / 2 - cy * k;
+  return new ZoomTransform(x, y, k);
+}
+function clampK(k) {
+  if (!Number.isFinite(k) || k <= 0) return K_MIN;
+  return Math.min(K_MAX, Math.max(K_MIN, k));
+}
+function createCameraFlight(inputs) {
+  const { from, viewport, apply, onDone, opts } = inputs;
+  const ease = resolveEase(opts?.ease ?? "smooth");
+  const isProvider = typeof inputs.to === "function";
+  const fromView = transformToView(from, viewport);
+  function targetView() {
+    const to = isProvider ? inputs.to() : inputs.to;
+    return transformToView(to, viewport);
+  }
+  let interp = interpolateZoom(fromView, targetView());
+  const resolvedDuration = resolveDuration(opts?.duration, interp.duration);
+  let startTime = null;
+  let finished = false;
+  function applyAt(t) {
+    if (isProvider) interp = interpolateZoom(fromView, targetView());
+    const view = interp(t);
+    if (view.some((v) => !Number.isFinite(v))) {
+      apply(viewToTransform(targetView(), viewport));
+      return;
+    }
+    apply(viewToTransform(view, viewport));
+  }
+  return {
+    tick(now) {
+      if (finished) return false;
+      if (startTime === null) startTime = now;
+      const raw = resolvedDuration <= 0 ? 1 : Math.min(1, (now - startTime) / resolvedDuration);
+      applyAt(ease(raw));
+      if (raw >= 1) {
+        finished = true;
+        onDone?.();
+        return false;
+      }
+      return true;
+    },
+    finish() {
+      if (finished) return;
+      finished = true;
+      applyAt(1);
+      onDone?.();
+    },
+    cancel() {
+      finished = true;
+    }
+  };
+}
+function createCameraFollow(inputs) {
+  let finished = false;
+  return {
+    tick() {
+      if (finished) return false;
+      if (!inputs.isActive()) {
+        finished = true;
+        return false;
+      }
+      inputs.apply(inputs.target());
+      return true;
+    },
+    finish() {
+      finished = true;
+    },
+    cancel() {
+      finished = true;
+    }
+  };
+}
+function resolveDuration(duration, interpDuration) {
+  if (typeof duration === "number") return Math.max(1, duration);
+  const scaled = interpDuration * AUTO_SCALE;
+  return Math.max(AUTO_MIN_MS, Math.min(AUTO_MAX_MS, Math.max(1, scaled)));
+}
+
+// src/graph/canvas-renderer.ts
+import { BRAND_FONT_SIZE, BRAND_MIN_WIDTH } from "@opendata-ai/openchart-core";
+
+// src/graph/entrance.ts
+function nodeEnterProgress(globalT, index, total, buckets = 8) {
+  const g = globalT <= 0 ? 0 : globalT >= 1 ? 1 : globalT;
+  const start = total > 0 ? index / total * 0.4 : 0;
+  const local = (g - start) / 0.6;
+  const clamped = local <= 0 ? 0 : local >= 1 ? 1 : local;
+  const b = Math.max(1, Math.floor(buckets));
+  return Math.round(clamped * b) / b;
+}
+var ENTRANCE_STAGGER_MAX_NODES = 3e3;
+var ENTRANCE_DRIFT_PX = 16;
+function centroid(nodes) {
+  let cx = 0;
+  let cy = 0;
+  for (const n of nodes) {
+    cx += n.x;
+    cy += n.y;
+  }
+  cx /= nodes.length;
+  cy /= nodes.length;
+  return { cx, cy };
+}
+function hashId(id) {
+  let h = 2166136261;
+  for (let i = 0; i < id.length; i++) {
+    h ^= id.charCodeAt(i);
+    h = Math.imul(h, 16777619);
+  }
+  return h >>> 0;
+}
+function entranceOrder(nodes) {
+  const rank = /* @__PURE__ */ new Map();
+  if (nodes.length === 0) return rank;
+  const sorted = [...nodes].sort((a, b) => {
+    const ha = hashId(a.id);
+    const hb = hashId(b.id);
+    return ha - hb || (a.id < b.id ? -1 : a.id > b.id ? 1 : 0);
+  });
+  for (let i = 0; i < sorted.length; i++) rank.set(sorted[i].id, i);
+  return rank;
+}
+function entranceOffsets(nodes, dist = ENTRANCE_DRIFT_PX) {
+  const offsets = /* @__PURE__ */ new Map();
+  if (nodes.length === 0) return offsets;
+  const { cx, cy } = centroid(nodes);
+  for (const n of nodes) {
+    const dx = n.x - cx;
+    const dy = n.y - cy;
+    const len = Math.sqrt(dx * dx + dy * dy);
+    if (len < 1e-6) {
+      offsets.set(n.id, { x: 0, y: -dist });
+    } else {
+      offsets.set(n.id, { x: dx / len * dist, y: dy / len * dist });
+    }
+  }
+  return offsets;
+}
+function popScale(t) {
+  if (t <= 0) return 0;
+  if (t >= 1) return 1;
+  const c1 = 1.70158;
+  const c3 = c1 + 1;
+  const u = t - 1;
+  return 1 + c3 * u * u * u + c1 * u * u;
+}
+function popAlpha(t) {
+  const a = t / 0.6;
+  return a >= 1 ? 1 : a <= 0 ? 0 : a;
+}
+function driftFactor(t) {
+  const u = 1 - (t <= 0 ? 0 : t >= 1 ? 1 : t);
+  return u * u;
+}
+
+// src/graph/canvas-renderer.ts
+var LABEL_FONT_MIN = 9;
+var LABEL_FONT_MAX = 12;
+var EDGE_ALPHA_DEFAULT_LIGHT = 0.3;
+var EDGE_ALPHA_DEFAULT_DARK = 0.25;
+var EDGE_ALPHA_CONNECTED = 1;
+var SEARCH_NON_MATCH_ALPHA = 0.25;
+var DEFAULT_DIM_OPACITY = 0.3;
+var LABEL_BUDGET_MIN = 12;
+var LABEL_BUDGET_MAX = 80;
+var LABEL_BUDGET_PER_ZOOM = 30;
+var CROSSFADE_MAX_EDGES = 2e4;
+function edgeTier(edge, focus) {
+  if (!focus.hasActive) return "default";
+  return focus.connected.has(edge.source) && focus.connected.has(edge.target) ? "connected" : "dimmed";
+}
+function nodeTier(node, focus, exemptIds) {
+  if (!focus.hasActive) return "default";
+  if (exemptIds?.has(node.id)) return "connected";
+  return focus.connected.has(node.id) ? "connected" : "dimmed";
+}
+function edgeTierAlpha(tier, dimOpacity, defaultAlpha) {
+  switch (tier) {
+    case "connected":
+      return EDGE_ALPHA_CONNECTED;
+    case "dimmed":
+      return dimOpacity / 3;
+    default:
+      return defaultAlpha;
+  }
+}
+function nodeTierAlpha(tier, dimOpacity) {
+  switch (tier) {
+    case "dimmed":
+      return dimOpacity;
+    default:
+      return 1;
+  }
+}
+function lerp(a, b, t) {
+  return a + (b - a) * t;
+}
+var ZERO_SHIFT = { x: 0, y: 0 };
+function makeEntranceReveal(entrance, total) {
+  const g = entrance.t;
+  const { stagger, order, offsets } = entrance;
+  const rankOf = (node) => order?.get(node.id) ?? node.index;
+  const nodeT = (node) => stagger ? nodeEnterProgress(g, rankOf(node), total) : g;
+  const edgeAlpha = Math.max(0, (g - 0.3) / 0.7);
+  const globalRamp = 0.6 + 0.4 * g;
+  return {
+    nodeAlpha: (node) => stagger ? popAlpha(nodeT(node)) : globalRamp,
+    nodeScale: (node) => stagger ? popScale(nodeT(node)) : globalRamp,
+    shift: (id) => {
+      if (!stagger || !offsets || !order) return ZERO_SHIFT;
+      const off = offsets.get(id);
+      if (!off) return ZERO_SHIFT;
+      const f = driftFactor(nodeEnterProgress(g, order.get(id) ?? 0, total));
+      return f > 0 ? { x: off.x * f, y: off.y * f } : ZERO_SHIFT;
+    },
+    edgeAlpha,
+    labelAlpha: g
+  };
+}
+function deriveFocus(hoveredNodeId, selectedNodeIds, adjacencyMap) {
+  const hasActive = hoveredNodeId !== null || selectedNodeIds.size > 0;
+  const connected = /* @__PURE__ */ new Set();
+  if (hasActive) {
+    const active = /* @__PURE__ */ new Set();
+    if (hoveredNodeId) active.add(hoveredNodeId);
+    for (const id of selectedNodeIds) active.add(id);
+    for (const id of active) {
+      connected.add(id);
+      const neighbors = adjacencyMap.get(id);
+      if (neighbors) for (const nid of neighbors) connected.add(nid);
+    }
+  }
+  return { hasActive, connected, searchMatches: null, selected: selectedNodeIds };
+}
+var GLOW_NODE_THRESHOLD = 2e3;
+var GLOW_RADIUS_MULTIPLIER = 1.3;
+var GLOW_ALPHA = 0.1;
+var CULL_MARGIN = 50;
+var TWO_PI = Math.PI * 2;
+var MIN_SCREEN_RADIUS = 2.5;
+function labelBudget(zoom) {
+  const raw = Math.round(zoom * LABEL_BUDGET_PER_ZOOM);
+  return Math.max(LABEL_BUDGET_MIN, Math.min(LABEL_BUDGET_MAX, raw));
+}
+function boxesOverlap(a, b) {
+  return a.x0 < b.x1 && b.x0 < a.x1 && a.y0 < b.y1 && b.y0 < a.y1;
+}
+function visibleRect(canvasWidth, canvasHeight, transform, margin = CULL_MARGIN) {
+  const { x, y, k } = transform;
+  return {
+    minX: (-x - margin) / k,
+    minY: (-y - margin) / k,
+    maxX: (canvasWidth - x + margin) / k,
+    maxY: (canvasHeight - y + margin) / k
+  };
+}
+function nodeInView(node, rect) {
+  return node.x + node.radius >= rect.minX && node.x - node.radius <= rect.maxX && node.y + node.radius >= rect.minY && node.y - node.radius <= rect.maxY;
+}
+function edgeInView(edge, rect) {
+  return edge.sourceX >= rect.minX && edge.sourceX <= rect.maxX && edge.sourceY >= rect.minY && edge.sourceY <= rect.maxY || edge.targetX >= rect.minX && edge.targetX <= rect.maxX && edge.targetY >= rect.minY && edge.targetY <= rect.maxY;
+}
+var DASH_PATTERNS = {
+  solid: [],
+  dashed: [6, 4],
+  dotted: [2, 3]
+};
+var GraphCanvasRenderer = class {
+  canvas;
+  // biome-ignore lint/correctness/noUnusedPrivateClassMembers: accessed via this-destructuring
+  ctx;
+  dpr;
+  // biome-ignore lint/correctness/noUnusedPrivateClassMembers: accessed via this-destructuring
+  cssWidth = 0;
+  // biome-ignore lint/correctness/noUnusedPrivateClassMembers: accessed via this-destructuring
+  cssHeight = 0;
+  constructor(canvas) {
+    this.canvas = canvas;
+    this.ctx = canvas.getContext("2d");
+    this.dpr = typeof window !== "undefined" ? window.devicePixelRatio || 1 : 1;
+  }
+  /** Update canvas dimensions with DPR scaling. CSS size stays at css values. */
+  resize(width, height) {
+    this.cssWidth = width;
+    this.cssHeight = height;
+    this.canvas.width = width * this.dpr;
+    this.canvas.height = height * this.dpr;
+  }
+  /** Clear canvas and render the full graph state. */
+  render(state) {
+    const { ctx, dpr, cssWidth, cssHeight } = this;
+    const {
+      nodes,
+      edges,
+      transform,
+      hoveredNodeId,
+      hoveredEdgeId,
+      selectedNodeIds,
+      adjacencyMap,
+      theme,
+      searchMatches,
+      isGesturing
+    } = state;
+    const dimOpacity = state.dimOpacity ?? DEFAULT_DIM_OPACITY;
+    const nextFocus = state.focus?.next ?? deriveFocus(hoveredNodeId, selectedNodeIds, adjacencyMap);
+    const crossfade = state.focus && state.focus.t < 1 && !isGesturing ? state.focus : null;
+    const entrance = state.entrance && state.entrance.t < 1 ? makeEntranceReveal(state.entrance, nodes.length) : null;
+    const enterAlpha = state.enterAlpha ?? null;
+    const enterAlphaFor = (id) => enterAlpha?.get(id) ?? 1;
+    const rect = visibleRect(cssWidth, cssHeight, transform);
+    const visibleNodes = nodes.filter((n) => nodeInView(n, rect));
+    const visibleEdges = edges.filter((e) => edgeInView(e, rect));
+    const isDark = theme.isDark;
+    const edgeAlphaDefault = isDark ? EDGE_ALPHA_DEFAULT_DARK : EDGE_ALPHA_DEFAULT_LIGHT;
+    const showGlow = isDark && !isGesturing && visibleNodes.length < GLOW_NODE_THRESHOLD;
+    const minRadius = MIN_SCREEN_RADIUS / transform.k;
+    ctx.save();
+    ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+    ctx.clearRect(0, 0, cssWidth, cssHeight);
+    if (theme.colors.background !== "transparent") {
+      ctx.fillStyle = theme.colors.background;
+      ctx.fillRect(0, 0, cssWidth, cssHeight);
+    }
+    ctx.translate(transform.x, transform.y);
+    ctx.scale(transform.k, transform.k);
+    if (state.exiting && state.exiting.alpha > 0) {
+      this.drawGhosts(ctx, state.exiting, rect, edgeAlphaDefault);
+    }
+    if (crossfade && visibleEdges.length <= CROSSFADE_MAX_EDGES) {
+      this.drawEdgesCrossfade(
+        ctx,
+        visibleEdges,
+        crossfade.prev,
+        crossfade.next,
+        crossfade.t,
+        dimOpacity,
+        edgeAlphaDefault,
+        isGesturing ? null : searchMatches,
+        hoveredEdgeId,
+        entrance,
+        enterAlphaFor
+      );
+    } else {
+      this.drawEdgesBatched(
+        ctx,
+        visibleEdges,
+        nextFocus,
+        dimOpacity,
+        edgeAlphaDefault,
+        isGesturing ? null : searchMatches,
+        hoveredEdgeId,
+        entrance,
+        enterAlphaFor
+      );
+    }
+    this.drawNodesBatched(
+      ctx,
+      visibleNodes,
+      hoveredNodeId,
+      selectedNodeIds,
+      isGesturing ? null : searchMatches,
+      showGlow,
+      theme,
+      minRadius,
+      nextFocus,
+      dimOpacity,
+      state.exemptIds,
+      crossfade,
+      state.hoverRadiusScale,
+      entrance,
+      enterAlphaFor
+    );
+    if (!isGesturing) {
+      this.drawLabels(
+        ctx,
+        visibleNodes,
+        hoveredNodeId,
+        selectedNodeIds,
+        searchMatches,
+        transform.k,
+        theme,
+        entrance,
+        enterAlphaFor
+      );
+    }
+    ctx.restore();
+    if (state.watermark) {
+      this.drawBrand(ctx, cssWidth, cssHeight, theme);
+    }
+  }
+  // -------------------------------------------------------------------------
+  // Brand rendering
+  // -------------------------------------------------------------------------
+  drawBrand(ctx, w, h, theme) {
+    if (w < BRAND_MIN_WIDTH) return;
+    const { dpr } = this;
+    ctx.save();
+    ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+    const padding = theme.spacing.padding;
+    const x = w - padding;
+    const y = h - padding;
+    ctx.font = `600 ${BRAND_FONT_SIZE}px ${theme.fonts.family}`;
+    ctx.fillStyle = theme.colors.axis;
+    ctx.globalAlpha = 0.55;
+    ctx.textAlign = "right";
+    ctx.textBaseline = "alphabetic";
+    ctx.fillText("OpenData", x, y);
+    ctx.restore();
+  }
+  // -------------------------------------------------------------------------
+  // Batched edge drawing
+  // -------------------------------------------------------------------------
+  drawEdgesBatched(ctx, edges, focus, dimOpacity, edgeAlphaDefault, searchMatches, hoveredEdgeId, entrance, enterAlphaFor) {
+    const buckets = {
+      dimmed: [],
+      default: [],
+      connected: []
+    };
+    let hoveredEdge = null;
+    for (const edge of edges) {
+      const edgeId = `${edge.source}->${edge.target}`;
+      if (edgeId === hoveredEdgeId) {
+        hoveredEdge = edge;
+        continue;
+      }
+      buckets[edgeTier(edge, focus)].push(edge);
+    }
+    const ea = entrance ? entrance.edgeAlpha : 1;
+    this.drawEdgeGroupBatched(
+      ctx,
+      buckets.dimmed,
+      edgeTierAlpha("dimmed", dimOpacity, edgeAlphaDefault) * ea,
+      searchMatches,
+      enterAlphaFor
+    );
+    this.drawEdgeGroupBatched(
+      ctx,
+      buckets.default,
+      edgeAlphaDefault * ea,
+      searchMatches,
+      enterAlphaFor
+    );
+    this.drawEdgeGroupBatched(
+      ctx,
+      buckets.connected,
+      EDGE_ALPHA_CONNECTED * ea,
+      searchMatches,
+      enterAlphaFor
+    );
+    this.drawHoveredEdge(ctx, hoveredEdge);
+  }
+  /**
+   * Crossfade edges between a prev and next focus state. Each edge is classified
+   * under BOTH snapshots → at most 9 (prevTier × nextTier) buckets, each drawn
+   * batched at `lerp(edgeTierAlpha[prev], edgeTierAlpha[next], t)`. Preserves the
+   * per-group style batching within each bucket.
+   */
+  drawEdgesCrossfade(ctx, edges, prev, next, t, dimOpacity, edgeAlphaDefault, searchMatches, hoveredEdgeId, entrance, enterAlphaFor) {
+    const ea = entrance ? entrance.edgeAlpha : 1;
+    const buckets = /* @__PURE__ */ new Map();
+    let hoveredEdge = null;
+    for (const edge of edges) {
+      const edgeId = `${edge.source}->${edge.target}`;
+      if (edgeId === hoveredEdgeId) {
+        hoveredEdge = edge;
+        continue;
+      }
+      const key = `${edgeTier(edge, prev)}|${edgeTier(edge, next)}`;
+      let bucket = buckets.get(key);
+      if (!bucket) {
+        bucket = [];
+        buckets.set(key, bucket);
+      }
+      bucket.push(edge);
+    }
+    const ordered = [...buckets.entries()].map(([key, bucket]) => {
+      const [prevTier, nextTier] = key.split("|");
+      const alpha = lerp(
+        edgeTierAlpha(prevTier, dimOpacity, edgeAlphaDefault),
+        edgeTierAlpha(nextTier, dimOpacity, edgeAlphaDefault),
+        t
+      ) * ea;
+      return { alpha, bucket };
+    }).sort((a, b) => a.alpha - b.alpha);
+    for (const { alpha, bucket } of ordered) {
+      this.drawEdgeGroupBatched(ctx, bucket, alpha, searchMatches, enterAlphaFor);
+    }
+    this.drawHoveredEdge(ctx, hoveredEdge);
+  }
+  /** Draw the hovered edge on top with a thickened highlight stroke. */
+  drawHoveredEdge(ctx, hoveredEdge) {
+    if (!hoveredEdge) return;
+    const dash = DASH_PATTERNS[hoveredEdge.style] ?? DASH_PATTERNS.solid;
+    ctx.setLineDash(dash);
+    ctx.strokeStyle = hoveredEdge.stroke;
+    ctx.lineWidth = hoveredEdge.strokeWidth * 2;
+    ctx.globalAlpha = EDGE_ALPHA_CONNECTED;
+    ctx.beginPath();
+    ctx.moveTo(hoveredEdge.sourceX, hoveredEdge.sourceY);
+    ctx.lineTo(hoveredEdge.targetX, hoveredEdge.targetY);
+    ctx.stroke();
+    ctx.setLineDash([]);
+    ctx.globalAlpha = 1;
+  }
+  /**
+   * Draw a group of edges at a given alpha, batched by (stroke, strokeWidth, style).
+   * When search is inactive, all edges of the same style are drawn in a single path.
+   * When search is active, edges split by search-match status for alpha dimming.
+   */
+  drawEdgeGroupBatched(ctx, edges, alpha, searchMatches, enterAlphaFor) {
+    if (edges.length === 0) return;
+    const groups = /* @__PURE__ */ new Map();
+    for (const edge of edges) {
+      const rawEnter = Math.min(enterAlphaFor(edge.source), enterAlphaFor(edge.target));
+      const enter = Math.round(rawEnter * 8) / 8;
+      const key = `${edge.stroke}|${edge.strokeWidth}|${edge.style}|${enter}`;
+      let group = groups.get(key);
+      if (!group) {
+        group = { edges: [], enter };
+        groups.set(key, group);
+      }
+      group.edges.push(edge);
+    }
+    for (const [, { edges: group, enter }] of groups) {
+      const sample = group[0];
+      const dash = DASH_PATTERNS[sample.style] ?? DASH_PATTERNS.solid;
+      ctx.setLineDash(dash);
+      ctx.strokeStyle = sample.stroke;
+      ctx.lineWidth = sample.strokeWidth;
+      const groupAlpha = alpha * enter;
+      if (!searchMatches) {
+        ctx.globalAlpha = groupAlpha;
+        ctx.beginPath();
+        for (const edge of group) {
+          ctx.moveTo(edge.sourceX, edge.sourceY);
+          ctx.lineTo(edge.targetX, edge.targetY);
+        }
+        ctx.stroke();
+      } else {
+        ctx.globalAlpha = groupAlpha;
+        ctx.beginPath();
+        let hasMatched = false;
+        const nonMatchPath = [];
+        for (const edge of group) {
+          const srcMatch = searchMatches.has(edge.source);
+          const tgtMatch = searchMatches.has(edge.target);
+          if (srcMatch || tgtMatch) {
+            ctx.moveTo(edge.sourceX, edge.sourceY);
+            ctx.lineTo(edge.targetX, edge.targetY);
+            hasMatched = true;
+          } else {
+            nonMatchPath.push(edge);
+          }
+        }
+        if (hasMatched) ctx.stroke();
+        if (nonMatchPath.length > 0) {
+          ctx.globalAlpha = SEARCH_NON_MATCH_ALPHA * groupAlpha;
+          ctx.beginPath();
+          for (const edge of nonMatchPath) {
+            ctx.moveTo(edge.sourceX, edge.sourceY);
+            ctx.lineTo(edge.targetX, edge.targetY);
+          }
+          ctx.stroke();
+        }
+      }
+    }
+    ctx.setLineDash([]);
+    ctx.globalAlpha = 1;
+  }
+  // -------------------------------------------------------------------------
+  // Batched node drawing
+  // -------------------------------------------------------------------------
+  drawNodesBatched(ctx, nodes, hoveredNodeId, selectedNodeIds, searchMatches, showGlow, theme, minRadius, nextFocus, dimOpacity, exemptIds, crossfade, hoverRadiusScale, entrance, enterAlphaFor) {
+    const focusAlpha = (node) => {
+      if (crossfade) {
+        return lerp(
+          nodeTierAlpha(nodeTier(node, crossfade.prev, exemptIds), dimOpacity),
+          nodeTierAlpha(nodeTier(node, crossfade.next, exemptIds), dimOpacity),
+          crossfade.t
+        );
+      }
+      return nodeTierAlpha(nodeTier(node, nextFocus, exemptIds), dimOpacity);
+    };
+    const searchAlpha = (node) => searchMatches !== null && !searchMatches.has(node.id) ? SEARCH_NON_MATCH_ALPHA : 1;
+    const entranceAlpha = (node) => entrance ? entrance.nodeAlpha(node) : 1;
+    const entranceScale = (node) => entrance ? entrance.nodeScale(node) : 1;
+    const entranceShift = (node) => entrance ? entrance.shift(node.id) : ZERO_SHIFT;
+    const effectiveAlpha = (node) => focusAlpha(node) * searchAlpha(node) * entranceAlpha(node) * enterAlphaFor(node.id);
+    const bulkNodes = [];
+    const specialNodes = [];
+    for (const node of nodes) {
+      if (node.id === hoveredNodeId || selectedNodeIds.has(node.id) || (hoverRadiusScale?.has(node.id) ?? false)) {
+        specialNodes.push(node);
+      } else {
+        bulkNodes.push(node);
+      }
+    }
+    const r = (node) => Math.max(node.radius, minRadius) * entranceScale(node);
+    if (showGlow && !entrance) {
+      this.drawGlowBatched(ctx, bulkNodes, searchMatches, minRadius);
+    }
+    const fillGroups = /* @__PURE__ */ new Map();
+    for (const node of bulkNodes) {
+      const alpha = effectiveAlpha(node);
+      const key = `${node.fill}|${alpha.toFixed(3)}`;
+      let group = fillGroups.get(key);
+      if (!group) {
+        group = { fill: node.fill, alpha, nodes: [] };
+        fillGroups.set(key, group);
+      }
+      group.nodes.push(node);
+    }
+    for (const { fill, alpha, nodes: group } of fillGroups.values()) {
+      ctx.fillStyle = fill;
+      ctx.globalAlpha = alpha;
+      ctx.beginPath();
+      for (const node of group) {
+        const nr = r(node);
+        if (nr <= 0) continue;
+        const s = entranceShift(node);
+        ctx.moveTo(node.x + s.x + nr, node.y + s.y);
+        ctx.arc(node.x + s.x, node.y + s.y, nr, 0, TWO_PI);
+      }
+      ctx.fill();
+    }
+    const strokeGroups = /* @__PURE__ */ new Map();
+    for (const node of bulkNodes) {
+      const alpha = effectiveAlpha(node);
+      const key = `${node.stroke}|${node.strokeWidth}|${alpha.toFixed(3)}`;
+      let group = strokeGroups.get(key);
+      if (!group) {
+        group = { stroke: node.stroke, width: node.strokeWidth, alpha, nodes: [] };
+        strokeGroups.set(key, group);
+      }
+      group.nodes.push(node);
+    }
+    for (const { stroke, width, alpha, nodes: group } of strokeGroups.values()) {
+      ctx.strokeStyle = stroke;
+      ctx.lineWidth = width;
+      ctx.globalAlpha = alpha;
+      ctx.beginPath();
+      for (const node of group) {
+        const nr = r(node);
+        if (nr <= 0) continue;
+        const s = entranceShift(node);
+        ctx.moveTo(node.x + s.x + nr, node.y + s.y);
+        ctx.arc(node.x + s.x, node.y + s.y, nr, 0, TWO_PI);
+      }
+      ctx.stroke();
+    }
+    for (const node of specialNodes) {
+      const isHovered = node.id === hoveredNodeId;
+      const isSelected = selectedNodeIds.has(node.id);
+      const dimmed = searchMatches !== null && !searchMatches.has(node.id);
+      const baseRadius = Math.max(node.radius, minRadius);
+      const hoverScale = hoverRadiusScale?.get(node.id) ?? (isHovered ? 1.15 : 1);
+      const radius = baseRadius * hoverScale;
+      const brightened = isHovered && hoverScale >= 1.075;
+      const s = entranceShift(node);
+      const nx = node.x + s.x;
+      const ny = node.y + s.y;
+      ctx.globalAlpha = dimmed ? SEARCH_NON_MATCH_ALPHA : 1;
+      if (showGlow && !dimmed) {
+        ctx.beginPath();
+        ctx.arc(nx, ny, radius * GLOW_RADIUS_MULTIPLIER, 0, TWO_PI);
+        ctx.fillStyle = node.fill;
+        ctx.globalAlpha = GLOW_ALPHA;
+        ctx.fill();
+        ctx.globalAlpha = dimmed ? SEARCH_NON_MATCH_ALPHA : 1;
+      }
+      ctx.beginPath();
+      ctx.arc(nx, ny, radius, 0, TWO_PI);
+      ctx.fillStyle = brightened ? brighten(node.fill) : node.fill;
+      ctx.fill();
+      ctx.strokeStyle = node.stroke;
+      ctx.lineWidth = node.strokeWidth;
+      ctx.stroke();
+      if (isSelected) {
+        ctx.beginPath();
+        ctx.arc(nx, ny, radius + 3, 0, TWO_PI);
+        ctx.strokeStyle = theme.colors.categorical[0] ?? "#3b82f6";
+        ctx.lineWidth = 2;
+        ctx.stroke();
+      }
+    }
+    ctx.globalAlpha = 1;
+  }
+  /** Batch glow circles by fill color. */
+  drawGlowBatched(ctx, nodes, searchMatches, minRadius) {
+    const glowGroups = /* @__PURE__ */ new Map();
+    for (const node of nodes) {
+      if (searchMatches && !searchMatches.has(node.id)) continue;
+      let group = glowGroups.get(node.fill);
+      if (!group) {
+        group = [];
+        glowGroups.set(node.fill, group);
+      }
+      group.push(node);
+    }
+    ctx.globalAlpha = GLOW_ALPHA;
+    for (const [fill, group] of glowGroups) {
+      ctx.fillStyle = fill;
+      ctx.beginPath();
+      for (const node of group) {
+        const gr = Math.max(node.radius, minRadius) * GLOW_RADIUS_MULTIPLIER;
+        ctx.moveTo(node.x + gr, node.y);
+        ctx.arc(node.x, node.y, gr, 0, TWO_PI);
+      }
+      ctx.fill();
+    }
+    ctx.globalAlpha = 1;
+  }
+  // -------------------------------------------------------------------------
+  // Labels (drawn individually, skipped during gestures)
+  // -------------------------------------------------------------------------
+  drawLabels(ctx, nodes, hoveredNodeId, selectedNodeIds, searchMatches, zoom, theme, entrance, enterAlphaFor) {
+    const la = entrance ? entrance.labelAlpha : 1;
+    const rawSize = 10 / zoom;
+    const fontSize = Math.max(LABEL_FONT_MIN, Math.min(LABEL_FONT_MAX, rawSize));
+    ctx.font = `${fontSize}px ${theme.fonts.family}`;
+    ctx.textAlign = "center";
+    ctx.textBaseline = "top";
+    const haloColor = theme.colors.background !== "transparent" ? theme.colors.background : theme.isDark ? "rgba(0, 0, 0, 0.7)" : "rgba(255, 255, 255, 0.85)";
+    const forced = [];
+    const rest = [];
+    for (const node of nodes) {
+      if (!node.label) continue;
+      const isForced = node.id === hoveredNodeId || selectedNodeIds.has(node.id) || node.labelPriority === Infinity || (searchMatches?.has(node.id) ?? false);
+      if (isForced) forced.push(node);
+      else rest.push(node);
+    }
+    rest.sort((a, b) => b.labelPriority - a.labelPriority);
+    const budget = labelBudget(zoom);
+    const candidates = rest.slice(0, budget * 4);
+    const placed = [];
+    const pad = fontSize * 0.15;
+    const lineHeight = fontSize * 1.2;
+    const textWidth = (text) => ctx.measureText?.(text)?.width ?? text.length * fontSize * 0.55;
+    const boxFor = (node) => {
+      const w = textWidth(node.label);
+      const y0 = node.y + node.radius + 3;
+      return {
+        x0: node.x - w / 2 - pad,
+        x1: node.x + w / 2 + pad,
+        y0: y0 - pad,
+        y1: y0 + lineHeight + pad
+      };
+    };
+    const drawOne = (node, isForced) => {
+      const dimmed = searchMatches !== null && !searchMatches.has(node.id);
+      ctx.globalAlpha = (dimmed ? SEARCH_NON_MATCH_ALPHA : 1) * la * enterAlphaFor(node.id);
+      const labelY = node.y + node.radius + 3;
+      if (isForced) {
+        ctx.strokeStyle = haloColor;
+        ctx.lineWidth = 3;
+        ctx.lineJoin = "round";
+        ctx.miterLimit = 2;
+        ctx.strokeText(node.label, node.x, labelY);
+      }
+      ctx.fillStyle = isForced ? theme.colors.text : theme.colors.axis;
+      ctx.fillText(node.label, node.x, labelY);
+    };
+    for (const node of forced) placed.push(boxFor(node));
+    let drawn = 0;
+    for (const node of candidates) {
+      if (drawn >= budget) break;
+      const box = boxFor(node);
+      let collides = false;
+      for (const other of placed) {
+        if (boxesOverlap(box, other)) {
+          collides = true;
+          break;
+        }
+      }
+      if (collides) continue;
+      placed.push(box);
+      drawOne(node, false);
+      drawn++;
+    }
+    for (const node of forced) drawOne(node, true);
+    ctx.globalAlpha = 1;
+  }
+  // -------------------------------------------------------------------------
+  // Exit ghosts (Phase 7)
+  // -------------------------------------------------------------------------
+  /**
+   * Draw exit ghosts (removed nodes/edges) UNDER the live marks at a global fade
+   * alpha. Neutral rendering: no focus dim, no search dim, no selection ring —
+   * they're on their way out. Batched by (stroke/style) for edges and (fill) for
+   * nodes, culled to the visible rect.
+   */
+  drawGhosts(ctx, exiting, rect, edgeAlphaDefault) {
+    const alpha = exiting.alpha;
+    const edgeGroups = /* @__PURE__ */ new Map();
+    for (const edge of exiting.edges) {
+      if (!edgeInView(edge, rect)) continue;
+      const key = `${edge.stroke}|${edge.strokeWidth}|${edge.style}`;
+      const group = edgeGroups.get(key);
+      if (group) group.push(edge);
+      else edgeGroups.set(key, [edge]);
+    }
+    for (const [, group] of edgeGroups) {
+      const sample = group[0];
+      const dash = DASH_PATTERNS[sample.style] ?? DASH_PATTERNS.solid;
+      ctx.setLineDash(dash);
+      ctx.strokeStyle = sample.stroke;
+      ctx.lineWidth = sample.strokeWidth;
+      ctx.globalAlpha = edgeAlphaDefault * alpha;
+      ctx.beginPath();
+      for (const edge of group) {
+        ctx.moveTo(edge.sourceX, edge.sourceY);
+        ctx.lineTo(edge.targetX, edge.targetY);
+      }
+      ctx.stroke();
+    }
+    ctx.setLineDash([]);
+    const nodeGroups = /* @__PURE__ */ new Map();
+    for (const node of exiting.nodes) {
+      if (!nodeInView(node, rect)) continue;
+      const group = nodeGroups.get(node.fill);
+      if (group) group.push(node);
+      else nodeGroups.set(node.fill, [node]);
+    }
+    for (const [fill, group] of nodeGroups) {
+      ctx.fillStyle = fill;
+      ctx.globalAlpha = alpha;
+      ctx.beginPath();
+      for (const node of group) {
+        ctx.moveTo(node.x + node.radius, node.y);
+        ctx.arc(node.x, node.y, node.radius, 0, TWO_PI);
+      }
+      ctx.fill();
+    }
+    ctx.globalAlpha = 1;
+  }
+};
+function brighten(color) {
+  const rgbMatch = color.match(/^rgb\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*\)$/);
+  if (rgbMatch) {
+    const r = Math.min(255, parseInt(rgbMatch[1], 10) + 40);
+    const g = Math.min(255, parseInt(rgbMatch[2], 10) + 40);
+    const b = Math.min(255, parseInt(rgbMatch[3], 10) + 40);
+    return `rgb(${r},${g},${b})`;
+  }
+  const hex = color.replace("#", "");
+  const full = hex.length === 3 ? hex.split("").map((c) => c + c).join("") : hex;
+  if (full.length === 6) {
+    const r = Math.min(255, parseInt(full.slice(0, 2), 16) + 40);
+    const g = Math.min(255, parseInt(full.slice(2, 4), 16) + 40);
+    const b = Math.min(255, parseInt(full.slice(4, 6), 16) + 40);
+    return `rgb(${r},${g},${b})`;
+  }
+  return color;
+}
+
+// src/graph/focus-transition.ts
+function focusSnapshotsEqual(a, b) {
+  return a.hasActive === b.hasActive && setsEqual(a.connected, b.connected) && nullableSetsEqual(a.searchMatches, b.searchMatches) && setsEqual(a.selected, b.selected);
+}
+function setsEqual(a, b) {
+  if (a.size !== b.size) return false;
+  for (const v of a) if (!b.has(v)) return false;
+  return true;
+}
+function nullableSetsEqual(a, b) {
+  if (a === null || b === null) return a === b;
+  return setsEqual(a, b);
+}
+var FocusTransition = class {
+  prev;
+  next;
+  startTime;
+  duration;
+  ease;
+  constructor(initial, duration, ease, now) {
+    this.prev = initial;
+    this.next = initial;
+    this.startTime = now;
+    this.duration = Math.max(0, duration);
+    this.ease = ease;
+  }
+  /**
+   * Point a fresh transition at `target`, capturing the endpoint closest to the
+   * current display as the new `prev` (the `p < 0.5` rule). A no-op when
+   * `target` already equals `next`.
+   */
+  retarget(target, now) {
+    if (focusSnapshotsEqual(target, this.next)) return;
+    const p = this.rawProgress(now);
+    this.prev = p < 0.5 ? this.prev : this.next;
+    this.next = target;
+    this.startTime = now;
+  }
+  /** Raw (un-eased) 0..1 progress. */
+  rawProgress(now) {
+    if (this.duration <= 0) return 1;
+    return Math.min(1, Math.max(0, (now - this.startTime) / this.duration));
+  }
+  /** Eased 0..1 progress toward `next`. */
+  progress(now) {
+    return this.ease(this.rawProgress(now));
+  }
+  /** True once the transition has fully settled onto `next`. */
+  isSettled(now) {
+    return this.rawProgress(now) >= 1;
+  }
+};
+function composeStandingFocus(highlight, searchMatches, selected, adjacency) {
+  const hasHighlight = highlight !== null && highlight.size > 0;
+  const hasSearch = searchMatches !== null && searchMatches.size > 0;
+  let core = null;
+  if (highlight !== null && hasHighlight && searchMatches !== null && hasSearch) {
+    const inter = intersect(highlight, searchMatches);
+    core = inter.size > 0 ? inter : searchMatches;
+  } else if (hasHighlight) {
+    core = highlight;
+  } else if (hasSearch) {
+    core = null;
+  }
+  const connected = /* @__PURE__ */ new Set();
+  if (core) {
+    for (const id of core) {
+      connected.add(id);
+      const neighbors = adjacency.get(id);
+      if (neighbors) for (const nid of neighbors) connected.add(nid);
+    }
+  }
+  const hasActive = core !== null && core.size > 0 || hasSearch || selected.size > 0;
+  return {
+    hasActive,
+    connected,
+    searchMatches: hasSearch ? searchMatches : null,
+    selected
+  };
+}
+function layerHoverFocus(standing, hoveredId, hoverConnected) {
+  if (hoveredId === null || hoverConnected === null) return standing;
+  return {
+    hasActive: true,
+    connected: hoverConnected,
+    searchMatches: standing.searchMatches,
+    selected: standing.selected
+  };
+}
+function intersect(a, b) {
+  const [small, large] = a.size <= b.size ? [a, b] : [b, a];
+  const out = /* @__PURE__ */ new Set();
+  for (const v of small) if (large.has(v)) out.add(v);
+  return out;
+}
+
+// src/graph/highlight.ts
+function resolveHighlightTarget(target, nodes, adjacency) {
+  if ("nodeIds" in target) return new Set(target.nodeIds);
+  if ("neighborsOf" in target) {
+    const set2 = /* @__PURE__ */ new Set();
+    if (target.includeSelf !== false) set2.add(target.neighborsOf);
+    const neighbors = adjacency.get(target.neighborsOf);
+    if (neighbors) for (const nid of neighbors) set2.add(nid);
+    return set2;
+  }
+  const values = new Set(
+    Array.isArray(target.category.value) ? target.category.value : [target.category.value]
+  );
+  const field = target.category.field;
+  const set = /* @__PURE__ */ new Set();
+  for (const n of nodes) {
+    const v = n.data?.[field];
+    if (v != null && values.has(String(v))) set.add(n.id);
+  }
+  return set;
+}
+function categoryHighlightSet(activeCategories, nodeCategory) {
+  if (activeCategories.size === 0) return null;
+  const set = /* @__PURE__ */ new Set();
+  for (const [id, cat] of nodeCategory) if (activeCategories.has(cat)) set.add(id);
+  return set;
+}
+
+// src/graph/interaction.ts
+var ZOOM_MIN = 0.05;
+var ZOOM_MAX = 15;
+var ZOOM_STEP = -1e-3;
+var HIT_DISTANCE = 5;
+var GraphInteractionManager = class {
+  canvas;
+  spatialIndex;
+  callbacks;
+  transform = ZoomTransform.identity();
+  dragState = null;
+  panState = null;
+  mousedownNodeId = null;
+  selectedIds = /* @__PURE__ */ new Set();
+  // Touch state
+  lastTouchDist = null;
+  lastTouchCenter = null;
+  // Bound handlers for cleanup
+  boundWheel;
+  boundMouseDown;
+  boundMouseMove;
+  boundMouseUp;
+  boundDblClick;
+  boundTouchStart;
+  boundTouchMove;
+  boundTouchEnd;
+  boundMouseLeave;
+  constructor(canvas, spatialIndex, callbacks) {
+    this.canvas = canvas;
+    this.spatialIndex = spatialIndex;
+    this.callbacks = callbacks;
+    this.boundWheel = this.onWheel.bind(this);
+    this.boundMouseDown = this.onMouseDown.bind(this);
+    this.boundMouseMove = this.onMouseMove.bind(this);
+    this.boundMouseUp = this.onMouseUp.bind(this);
+    this.boundMouseLeave = this.onMouseLeave.bind(this);
+    this.boundDblClick = this.onDblClick.bind(this);
+    this.boundTouchStart = this.onTouchStart.bind(this);
+    this.boundTouchMove = this.onTouchMove.bind(this);
+    this.boundTouchEnd = this.onTouchEnd.bind(this);
+    canvas.addEventListener("wheel", this.boundWheel, { passive: false });
+    canvas.addEventListener("mousedown", this.boundMouseDown);
+    canvas.addEventListener("mousemove", this.boundMouseMove);
+    canvas.addEventListener("mouseup", this.boundMouseUp);
+    canvas.addEventListener("mouseleave", this.boundMouseLeave);
+    canvas.addEventListener("dblclick", this.boundDblClick);
+    canvas.addEventListener("touchstart", this.boundTouchStart, {
+      passive: false
+    });
+    canvas.addEventListener("touchmove", this.boundTouchMove, {
+      passive: false
+    });
+    canvas.addEventListener("touchend", this.boundTouchEnd);
+  }
+  setTransform(transform) {
+    this.transform = transform;
+  }
+  getTransform() {
+    return this.transform;
+  }
+  /**
+   * Replace the internal selection set. Used by the mount to prune deleted ids
+   * after a data update so a later shift-click can't resurrect them through
+   * `onSelectionChange`. Does NOT fire `onSelectionChange` — the caller owns any
+   * downstream sync (the mount already holds the pruned set).
+   */
+  setSelection(ids) {
+    this.selectedIds = new Set(ids);
+  }
+  destroy() {
+    this.canvas.removeEventListener("wheel", this.boundWheel);
+    this.canvas.removeEventListener("mousedown", this.boundMouseDown);
+    this.canvas.removeEventListener("mousemove", this.boundMouseMove);
+    this.canvas.removeEventListener("mouseup", this.boundMouseUp);
+    this.canvas.removeEventListener("mouseleave", this.boundMouseLeave);
+    this.canvas.removeEventListener("dblclick", this.boundDblClick);
+    this.canvas.removeEventListener("touchstart", this.boundTouchStart);
+    this.canvas.removeEventListener("touchmove", this.boundTouchMove);
+    this.canvas.removeEventListener("touchend", this.boundTouchEnd);
+  }
+  // -------------------------------------------------------------------------
+  // Mouse handlers
+  // -------------------------------------------------------------------------
+  canvasXY(e) {
+    const rect = this.canvas.getBoundingClientRect();
+    return { x: e.clientX - rect.left, y: e.clientY - rect.top };
+  }
+  hitTest(screenX, screenY) {
+    const graph = this.transform.screenToGraph(screenX, screenY);
+    const node = this.spatialIndex.findNearest(graph.x, graph.y, HIT_DISTANCE / this.transform.k);
+    return node?.id ?? null;
+  }
+  onWheel(e) {
+    e.preventDefault();
+    const { x, y } = this.canvasXY(e);
+    const factor = e.deltaY * ZOOM_STEP;
+    const newK = Math.max(ZOOM_MIN, Math.min(ZOOM_MAX, this.transform.k * (1 + factor)));
+    this.transform = this.transform.zoomAt(newK, x, y);
+    this.callbacks.onTransformChange(this.transform);
+  }
+  onMouseDown(e) {
+    const { x, y } = this.canvasXY(e);
+    const hitId = this.hitTest(x, y);
+    if (hitId) {
+      this.dragState = { nodeId: hitId, started: false };
+      this.mousedownNodeId = hitId;
+    } else {
+      this.panState = { startX: x, startY: y };
+      this.mousedownNodeId = null;
+    }
+  }
+  onMouseMove(e) {
+    const { x, y } = this.canvasXY(e);
+    if (this.callbacks.onPointerMove) {
+      const gp = this.transform.screenToGraph(x, y);
+      this.callbacks.onPointerMove(gp.x, gp.y);
+    }
+    if (this.dragState) {
+      const graph = this.transform.screenToGraph(x, y);
+      if (!this.dragState.started) {
+        this.dragState.started = true;
+        this.callbacks.onNodeDragStart(this.dragState.nodeId);
+      }
+      this.callbacks.onNodeDrag(this.dragState.nodeId, graph.x, graph.y);
+      return;
+    }
+    if (this.panState) {
+      const dx = x - this.panState.startX;
+      const dy = y - this.panState.startY;
+      this.transform = this.transform.pan(dx, dy);
+      this.panState = { startX: x, startY: y };
+      this.callbacks.onTransformChange(this.transform);
+      return;
+    }
+    const hitId = this.hitTest(x, y);
+    this.callbacks.onHoverChange(hitId);
+    if (!hitId) {
+      const graph = this.transform.screenToGraph(x, y);
+      this.callbacks.onBackgroundHover?.(graph.x, graph.y, x, y);
+    }
+    this.canvas.style.cursor = hitId ? "pointer" : "default";
+  }
+  onMouseUp(e) {
+    const { x, y } = this.canvasXY(e);
+    if (this.dragState) {
+      if (this.dragState.started) {
+        this.callbacks.onNodeDragEnd(this.dragState.nodeId);
+      } else {
+        this.handleNodeClick(this.dragState.nodeId, e.shiftKey);
+      }
+      this.dragState = null;
+      return;
+    }
+    if (this.panState) {
+      this.panState = null;
+      if (!this.mousedownNodeId) {
+        const hitId = this.hitTest(x, y);
+        if (!hitId) {
+          this.selectedIds.clear();
+          this.callbacks.onSelectionChange([]);
+        }
+      }
+      return;
+    }
+  }
+  onDblClick(e) {
+    const { x, y } = this.canvasXY(e);
+    const hitId = this.hitTest(x, y);
+    if (hitId) {
+      this.callbacks.onDoubleClick(hitId);
+    }
+  }
+  onMouseLeave(_e) {
+    this.callbacks.onHoverChange(null);
+    this.canvas.style.cursor = "default";
+    this.callbacks.onPointerLeave?.();
+    if (this.panState) {
+      this.panState = null;
+    }
+  }
+  handleNodeClick(nodeId, shiftKey) {
+    if (shiftKey) {
+      if (this.selectedIds.has(nodeId)) {
+        this.selectedIds.delete(nodeId);
+      } else {
+        this.selectedIds.add(nodeId);
+      }
+    } else {
+      this.selectedIds.clear();
+      this.selectedIds.add(nodeId);
+    }
+    this.callbacks.onSelectionChange([...this.selectedIds]);
+  }
+  // -------------------------------------------------------------------------
+  // Touch handlers
+  // -------------------------------------------------------------------------
+  onTouchStart(e) {
+    e.preventDefault();
+    if (e.touches.length === 2) {
+      const [t0, t1] = [e.touches[0], e.touches[1]];
+      this.lastTouchDist = Math.hypot(t1.clientX - t0.clientX, t1.clientY - t0.clientY);
+      this.lastTouchCenter = {
+        x: (t0.clientX + t1.clientX) / 2,
+        y: (t0.clientY + t1.clientY) / 2
+      };
+    } else if (e.touches.length === 1) {
+      const touch = e.touches[0];
+      const rect = this.canvas.getBoundingClientRect();
+      const x = touch.clientX - rect.left;
+      const y = touch.clientY - rect.top;
+      const hitId = this.hitTest(x, y);
+      if (hitId) {
+        this.mousedownNodeId = hitId;
+      } else {
+        this.panState = { startX: x, startY: y };
+        this.mousedownNodeId = null;
+      }
+    }
+  }
+  onTouchMove(e) {
+    e.preventDefault();
+    if (e.touches.length === 2 && this.lastTouchDist !== null) {
+      const [t0, t1] = [e.touches[0], e.touches[1]];
+      const newDist = Math.hypot(t1.clientX - t0.clientX, t1.clientY - t0.clientY);
+      const rect = this.canvas.getBoundingClientRect();
+      const centerX = (t0.clientX + t1.clientX) / 2 - rect.left;
+      const centerY = (t0.clientY + t1.clientY) / 2 - rect.top;
+      const scale = newDist / this.lastTouchDist;
+      const newK = Math.max(ZOOM_MIN, Math.min(ZOOM_MAX, this.transform.k * scale));
+      this.transform = this.transform.zoomAt(newK, centerX, centerY);
+      if (this.lastTouchCenter) {
+        const dx = centerX - (this.lastTouchCenter.x - rect.left);
+        const dy = centerY - (this.lastTouchCenter.y - rect.top);
+        this.transform = this.transform.pan(dx, dy);
+      }
+      this.lastTouchDist = newDist;
+      this.lastTouchCenter = {
+        x: (t0.clientX + t1.clientX) / 2,
+        y: (t0.clientY + t1.clientY) / 2
+      };
+      this.callbacks.onTransformChange(this.transform);
+    } else if (e.touches.length === 1 && this.panState) {
+      const touch = e.touches[0];
+      const rect = this.canvas.getBoundingClientRect();
+      const x = touch.clientX - rect.left;
+      const y = touch.clientY - rect.top;
+      const dx = x - this.panState.startX;
+      const dy = y - this.panState.startY;
+      this.transform = this.transform.pan(dx, dy);
+      this.panState = { startX: x, startY: y };
+      this.callbacks.onTransformChange(this.transform);
+    }
+  }
+  onTouchEnd(e) {
+    if (e.touches.length === 0) {
+      if (this.mousedownNodeId && !this.panState) {
+        this.handleNodeClick(this.mousedownNodeId, false);
+      } else if (!this.mousedownNodeId && this.panState) {
+        this.selectedIds.clear();
+        this.callbacks.onSelectionChange([]);
+      }
+      this.panState = null;
+      this.mousedownNodeId = null;
+      this.lastTouchDist = null;
+      this.lastTouchCenter = null;
+    }
+  }
+};
+
+// src/graph/keyboard.ts
+function attachGraphKeyboardNav(options) {
+  const {
+    canvas,
+    getNodes,
+    getSelectedIds,
+    getAdjacency,
+    onSelect,
+    onDeselect,
+    onZoom,
+    onFitAll,
+    onFocusSearch
+  } = options;
+  let focusedNodeId = null;
+  if (!canvas.hasAttribute("tabindex")) {
+    canvas.setAttribute("tabindex", "0");
+  }
+  function findNodeById(id) {
+    return getNodes().find((n) => n.id === id);
+  }
+  function pickDirectionalNeighbor(fromNode, neighborIds, direction) {
+    const nodes = getNodes();
+    const candidates = nodes.filter((n) => neighborIds.has(n.id));
+    if (candidates.length === 0) return null;
+    let best = null;
+    let bestScore = -Infinity;
+    for (const c of candidates) {
+      const dx = c.x - fromNode.x;
+      const dy = c.y - fromNode.y;
+      let score;
+      switch (direction) {
+        case "right":
+          score = dx - Math.abs(dy) * 0.5;
+          break;
+        case "left":
+          score = -dx - Math.abs(dy) * 0.5;
+          break;
+        case "down":
+          score = dy - Math.abs(dx) * 0.5;
+          break;
+        case "up":
+          score = -dy - Math.abs(dx) * 0.5;
+          break;
+      }
+      if (score > bestScore) {
+        bestScore = score;
+        best = c;
+      }
+    }
+    return best?.id ?? null;
+  }
+  function onKeyDown(e) {
+    switch (e.key) {
+      case "Tab": {
+        const selected = getSelectedIds();
+        const nodes = getNodes();
+        if (nodes.length === 0) return;
+        if (selected.length > 0) {
+          focusedNodeId = selected[0];
+        } else if (!focusedNodeId || !findNodeById(focusedNodeId)) {
+          focusedNodeId = nodes[0].id;
+        }
+        e.preventDefault();
+        break;
+      }
+      case "ArrowUp":
+      case "ArrowDown":
+      case "ArrowLeft":
+      case "ArrowRight": {
+        if (!focusedNodeId) return;
+        e.preventDefault();
+        const focusedNode = findNodeById(focusedNodeId);
+        if (!focusedNode) return;
+        const adjacency = getAdjacency();
+        const neighbors = adjacency.get(focusedNodeId);
+        if (!neighbors || neighbors.size === 0) return;
+        const dirMap = {
+          ArrowUp: "up",
+          ArrowDown: "down",
+          ArrowLeft: "left",
+          ArrowRight: "right"
+        };
+        const nextId = pickDirectionalNeighbor(focusedNode, neighbors, dirMap[e.key]);
+        if (nextId) {
+          focusedNodeId = nextId;
+          onSelect(nextId);
+        }
+        break;
+      }
+      case "Enter": {
+        if (focusedNodeId) {
+          e.preventDefault();
+          const selected = getSelectedIds();
+          if (selected.includes(focusedNodeId)) {
+            onDeselect();
+          } else {
+            onSelect(focusedNodeId);
+          }
+        }
+        break;
+      }
+      case "Escape": {
+        e.preventDefault();
+        focusedNodeId = null;
+        onDeselect();
+        break;
+      }
+      case "+":
+      case "=": {
+        e.preventDefault();
+        onZoom("in");
+        break;
+      }
+      case "-":
+      case "_": {
+        e.preventDefault();
+        onZoom("out");
+        break;
+      }
+      case "Home": {
+        e.preventDefault();
+        onFitAll();
+        break;
+      }
+      case "/": {
+        if (onFocusSearch) {
+          e.preventDefault();
+          onFocusSearch();
+        }
+        break;
+      }
+    }
+  }
+  canvas.addEventListener("keydown", onKeyDown);
+  return () => {
+    canvas.removeEventListener("keydown", onKeyDown);
+  };
+}
+
+// src/graph/legend.ts
+function escapeHtml(str) {
+  return str.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#x27;");
+}
+function createGraphLegend(host, data, callbacks) {
+  const listeners = [];
+  function render(view) {
+    teardownListeners();
+    host.replaceChildren();
+    if (view.nodes.length === 0 && view.edges.length === 0) {
+      host.style.display = "none";
+      return;
+    }
+    host.style.display = "";
+    for (const entry of view.nodes) {
+      host.appendChild(nodeRow(entry));
+    }
+    for (const entry of view.edges) {
+      host.appendChild(edgeRow(entry));
+    }
+  }
+  function nodeRow(entry) {
+    const interactive = callbacks.interactive;
+    const el = document.createElement(interactive ? "button" : "div");
+    el.className = "oc-graph-legend-item";
+    if (!entry.active) el.classList.add("oc-graph-legend-item--inactive");
+    if (interactive) {
+      const btn = el;
+      btn.type = "button";
+      btn.setAttribute("aria-pressed", String(entry.active));
+      const onClick = () => callbacks.onToggle(entry.label);
+      const onEnter = () => callbacks.onHover(entry.label);
+      const onLeave = () => callbacks.onHover(null);
+      btn.addEventListener("click", onClick);
+      btn.addEventListener("mouseenter", onEnter);
+      btn.addEventListener("mouseleave", onLeave);
+      listeners.push(() => {
+        btn.removeEventListener("click", onClick);
+        btn.removeEventListener("mouseenter", onEnter);
+        btn.removeEventListener("mouseleave", onLeave);
+      });
+    }
+    el.innerHTML = `<span class="oc-graph-legend-swatch" style="background:${escapeHtml(entry.color)}"></span><span class="oc-graph-legend-label">${escapeHtml(entry.label)}</span>` + (callbacks.counts && entry.count != null ? `<span class="oc-graph-legend-count">${entry.count.toLocaleString()}</span>` : "");
+    return el;
+  }
+  function edgeRow(entry) {
+    const el = document.createElement("div");
+    el.className = "oc-graph-legend-item oc-graph-legend-item--edge";
+    el.innerHTML = `<span class="oc-graph-legend-swatch oc-graph-legend-swatch--line" style="background:${escapeHtml(entry.color)}"></span><span class="oc-graph-legend-label">${escapeHtml(entry.label)}</span>` + (callbacks.counts && entry.count != null ? `<span class="oc-graph-legend-count">${entry.count.toLocaleString()}</span>` : "");
+    return el;
+  }
+  function teardownListeners() {
+    for (const off of listeners) off();
+    listeners.length = 0;
+  }
+  render(data);
+  return {
+    update: render,
+    destroy() {
+      teardownListeners();
+      host.replaceChildren();
+    }
+  };
+}
+
+// src/graph/search.ts
+var GraphSearchManager = class {
+  matchedIds = null;
+  /** The last active (non-empty) query, so a data update can re-run it. */
+  query = null;
+  /**
+   * Search for nodes matching the query string.
+   * Returns a Set of matching node ids, or an empty set if nothing matches.
+   */
+  search(query, nodes) {
+    const q = query.toLowerCase().trim();
+    if (q === "") {
+      this.matchedIds = null;
+      this.query = null;
+      return /* @__PURE__ */ new Set();
+    }
+    this.query = query;
+    const matches = /* @__PURE__ */ new Set();
+    for (const node of nodes) {
+      const label = (node.label ?? "").toLowerCase();
+      const id = node.id.toLowerCase();
+      if (label.includes(q) || id.includes(q)) {
+        matches.add(node.id);
+      }
+    }
+    this.matchedIds = matches;
+    return matches;
+  }
+  /**
+   * Clear the current search.
+   * Returns null to indicate no active search.
+   */
+  clearSearch() {
+    this.matchedIds = null;
+    this.query = null;
+    return null;
+  }
+  /** Get the current set of matched ids, or null if no search is active. */
+  getMatches() {
+    return this.matchedIds;
+  }
+  /** The last active query string, or null when no search is active. */
+  getQuery() {
+    return this.query;
+  }
+};
+
+// src/graph/seed.ts
+function hash32(str) {
+  let h = 2166136261;
+  for (let i = 0; i < str.length; i++) {
+    h ^= str.charCodeAt(i);
+    h = Math.imul(h, 16777619);
+  }
+  return h >>> 0;
+}
+function unit(h) {
+  return (h >>> 0) / 4294967296;
+}
+var R0 = 300;
+function seedNodePositions(nodes, seed) {
+  const n = nodes.length;
+  if (n === 0) return;
+  for (const node of nodes) {
+    const u1 = unit(hash32(`${node.id}|${seed}|r`));
+    const u2 = unit(hash32(`${node.id}|${seed}|t`));
+    const r = R0 * Math.sqrt(u1);
+    const theta = u2 * Math.PI * 2;
+    let cx = 0;
+    let cy = 0;
+    if (node.community) {
+      const ca = unit(hash32(`${node.community}|${seed}`)) * Math.PI * 2;
+      const bias = 0.6 * R0;
+      cx = Math.cos(ca) * bias;
+      cy = Math.sin(ca) * bias;
+    }
+    node.x = cx + r * Math.cos(theta);
+    node.y = cy + r * Math.sin(theta);
+  }
+}
+
+// src/graph/shell.ts
+var MIN_SURFACE_HEIGHT = 200;
+function getContainerDimensions(container) {
+  const rect = container.getBoundingClientRect();
+  return {
+    width: Math.max(rect.width || 600, 100),
+    height: Math.max(rect.height || 400, 100)
+  };
+}
+function createGraphShell(container, spec, compilation, options, warn) {
+  const isDark = resolveDarkMode(options?.darkMode);
+  const wrapper = document.createElement("div");
+  wrapper.className = isDark ? "oc-graph-wrapper oc-dark" : "oc-graph-wrapper";
+  if (isDark) {
+    container.classList.add("oc-dark");
+  } else {
+    container.classList.remove("oc-dark");
+  }
+  const resolvedTheme = compilation.theme;
+  if (resolvedTheme) {
+    const s = wrapper.style;
+    s.setProperty("--oc-bg", resolvedSurface(resolvedTheme));
+    s.setProperty("--oc-text", resolvedTheme.colors.text);
+    s.setProperty("--oc-text-secondary", resolvedTheme.colors.neutral.secondary);
+    s.setProperty("--oc-text-muted", resolvedTheme.colors.axis);
+    s.setProperty("--oc-border", resolvedTheme.colors.neutral.border);
+    s.setProperty("--oc-font-family", resolvedTheme.fonts.family);
+    s.fontFamily = resolvedTheme.fonts.family;
+  }
+  const chromeEl = document.createElement("div");
+  chromeEl.className = "oc-graph-chrome";
+  wrapper.appendChild(chromeEl);
+  const legendSetting = options?.legend ?? spec.legend;
+  let legendEl = null;
+  if (legendSetting !== false) {
+    legendEl = document.createElement("div");
+    legendEl.className = "oc-graph-legend";
+    wrapper.appendChild(legendEl);
+  }
+  container.appendChild(wrapper);
+  const tooltipManager = options?.tooltip !== false ? createTooltipManager(wrapper) : null;
+  const shell = {
+    container,
+    wrapper,
+    chromeEl,
+    legendEl,
+    tooltipManager,
+    isDark,
+    mountSurface(el) {
+      if (legendEl) wrapper.insertBefore(el, legendEl);
+      else wrapper.appendChild(el);
+    },
+    renderChrome(next) {
+      let html = "";
+      if (next.chrome.title) {
+        html += `<h2 class="oc-title">${escapeHtml2(next.chrome.title.text)}</h2>`;
+      }
+      if (next.chrome.subtitle) {
+        html += `<p class="oc-subtitle">${escapeHtml2(next.chrome.subtitle.text)}</p>`;
+      }
+      chromeEl.innerHTML = html;
+      chromeEl.style.display = html ? "" : "none";
+    },
+    /**
+     * Keep the chrome block out of the legend's column: the title/subtitle wrap
+     * before they reach the legend box instead of running underneath it. No-op
+     * when there's no legend (or it has no measurable width, e.g. in happy-dom).
+     */
+    syncChromeInset() {
+      const legendW = legendEl?.offsetWidth ?? 0;
+      chromeEl.style.right = legendW > 0 ? `${legendW + 24}px` : "";
+    },
+    getSize() {
+      const { width, height } = getContainerDimensions(container);
+      return { width, height: Math.max(height, MIN_SURFACE_HEIGHT) };
+    },
+    observeResize(callback) {
+      if (options?.responsive === false) return () => {
+      };
+      return observeResize(container, () => {
+        callback();
+      });
+    },
+    warn,
+    destroy() {
+      tooltipManager?.destroy();
+      if (wrapper.parentNode) wrapper.parentNode.removeChild(wrapper);
+      container.classList.remove("oc-dark");
+    }
+  };
+  return shell;
+}
+function escapeHtml2(str) {
+  return str.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
+}
+
+// src/graph/simulation.ts
+import {
+  forceCenter,
+  forceCollide,
+  forceLink,
+  forceManyBody,
+  forceSimulation,
+  forceX,
+  forceY
+} from "d3-force";
+var SYNC_TICKS_PER_BATCH = 15;
+var SYNC_MAX_TICKS_CEIL = 800;
+var DEFAULT_ALPHA_MIN = 1e-3;
+var DEFAULT_WARMUP_BUDGET_MS = 250;
+function ticksToAlphaMin(alphaDecay, alphaMin = DEFAULT_ALPHA_MIN) {
+  if (!(alphaDecay > 0) || alphaDecay >= 1) return SYNC_MAX_TICKS_CEIL;
+  const n = Math.ceil(Math.log(alphaMin) / Math.log(1 - alphaDecay));
+  return Math.min(SYNC_MAX_TICKS_CEIL, Math.max(1, n));
+}
+function forceCluster(nodes, strength) {
+  return (alpha) => {
+    const cx = /* @__PURE__ */ new Map();
+    const cy = /* @__PURE__ */ new Map();
+    const count = /* @__PURE__ */ new Map();
+    for (const node of nodes) {
+      if (!node.community) continue;
+      const c = node.community;
+      cx.set(c, (cx.get(c) ?? 0) + (node.x ?? 0));
+      cy.set(c, (cy.get(c) ?? 0) + (node.y ?? 0));
+      count.set(c, (count.get(c) ?? 0) + 1);
+    }
+    for (const [c, n] of count) {
+      cx.set(c, cx.get(c) / n);
+      cy.set(c, cy.get(c) / n);
+    }
+    const k = strength * alpha;
+    for (const node of nodes) {
+      if (!node.community) continue;
+      const targetX = cx.get(node.community);
+      const targetY = cy.get(node.community);
+      node.vx = (node.vx ?? 0) + (targetX - (node.x ?? 0)) * k;
+      node.vy = (node.vy ?? 0) + (targetY - (node.y ?? 0)) * k;
+    }
+  };
+}
+function forceCursor(nodes, pointer) {
+  return (alpha) => {
+    if (!pointer.active || pointer.radius <= 0) return;
+    const r2 = pointer.radius * pointer.radius;
+    const k = pointer.strength * alpha;
+    for (const node of nodes) {
+      const dx = (node.x ?? 0) - pointer.x;
+      const dy = (node.y ?? 0) - pointer.y;
+      const dist2 = dx * dx + dy * dy;
+      if (dist2 >= r2) continue;
+      const dist = Math.sqrt(dist2) || 1e-6;
+      const falloff = (pointer.radius - dist) / pointer.radius;
+      const push = k * falloff / dist;
+      node.vx = (node.vx ?? 0) + dx * push;
+      node.vy = (node.vy ?? 0) + dy * push;
+    }
+  };
+}
+var SimulationManager = class _SimulationManager {
+  worker = null;
+  syncSim = null;
+  syncNodes = [];
+  syncNodeMap = /* @__PURE__ */ new Map();
+  tickCb = null;
+  settledCb = null;
+  destroyed = false;
+  syncRafId = null;
+  /** Derived per-graph cap on sync ticks, from alphaDecay via ticksToAlphaMin. */
+  syncMaxTicks = SYNC_MAX_TICKS_CEIL;
+  /** True until the sync warmup loop has completed (nothing renders before then). */
+  syncWarmupPending = false;
+  /** Remaining warmup ticks and the ms budget, consumed by the pre-reveal loop. */
+  syncWarmupTicks = 0;
+  syncWarmupBudgetMs = DEFAULT_WARMUP_BUDGET_MS;
+  /** Injectable clock for the warmup ms budget (deterministic in tests). */
+  now = typeof performance !== "undefined" ? () => performance.now() : () => Date.now();
+  // Stored for worker->sync fallback
+  initNodes = [];
+  initEdges = [];
+  initConfig = null;
+  // Cursor-repulsion pointer state (sync path). radius=0 keeps the force inert.
+  pointer = { x: 0, y: 0, active: false, radius: 0, strength: 0 };
+  // Separately tracked alpha-target intents so drag and cursor don't stomp each
+  // other. The higher intent wins; releasing one falls back to the other.
+  dragAlphaTarget = 0;
+  cursorAlphaTarget = 0;
+  constructor() {
+  }
+  /**
+   * Create a SimulationManager. Uses Web Worker for large graphs,
+   * synchronous fallback for small graphs or when Worker unavailable.
+   *
+   * `opts.now` injects a clock for the warmup ms budget (tests pass a fake one).
+   */
+  static create(nodes, edges, config, opts) {
+    const mgr = new _SimulationManager();
+    if (opts?.now) mgr.now = opts.now;
+    const useWorker = typeof Worker !== "undefined";
+    if (useWorker) {
+      mgr.initWorker(nodes, edges, config);
+    } else {
+      mgr.initSync(nodes, edges, config);
+    }
+    return mgr;
+  }
+  /** Register a callback for position updates. */
+  onTick(cb) {
+    this.tickCb = cb;
+  }
+  /** Register a callback for when the simulation has settled. */
+  onSettled(cb) {
+    this.settledCb = cb;
+  }
+  /** Reheat the simulation. */
+  reheat(alpha) {
+    if (this.destroyed) return;
+    if (this.worker) {
+      this.worker.postMessage({ type: "reheat", alpha });
+    } else if (this.syncSim) {
+      this.syncSim.alpha(alpha ?? 0.3).restart();
+      this.runSyncTicks();
+    }
+  }
+  /**
+   * Pin a node to fixed x/y coordinates.
+   *
+   * When `alphaTarget` is provided (springy drag), the sim is held warm so the
+   * pinned node's neighbors follow springily. Omitting it posts a byte-identical
+   * legacy message and leaves alpha untouched.
+   */
+  pinNode(id, x, y, alphaTarget) {
+    if (this.destroyed) return;
+    if (this.worker) {
+      this.worker.postMessage(
+        alphaTarget != null ? { type: "pin", nodeId: id, x, y, alphaTarget } : { type: "pin", nodeId: id, x, y }
+      );
+    } else {
+      const node = this.syncNodeMap.get(id);
+      if (node) {
+        node.fx = x;
+        node.fy = y;
+      }
+      if (alphaTarget != null && this.syncSim) {
+        this.dragAlphaTarget = alphaTarget;
+        this.syncAlphaTarget();
+        this.syncSim.restart();
+        this.runSyncTicks();
+      }
+    }
+  }
+  /**
+   * Unpin a node and reheat so forces settle it into equilibrium.
+   *
+   * When `alphaTarget` is provided (springy release), the sim cools back toward
+   * that target instead of the legacy gentle reheat. Omitting it preserves the
+   * exact legacy reheat behavior (and posts a byte-identical message).
+   */
+  unpinNode(id, alphaTarget) {
+    if (this.destroyed) return;
+    if (this.worker) {
+      this.worker.postMessage(
+        alphaTarget != null ? { type: "unpin", nodeId: id, alphaTarget } : { type: "unpin", nodeId: id }
+      );
+    } else {
+      const node = this.syncNodeMap.get(id);
+      if (node) {
+        node.fx = null;
+        node.fy = null;
+      }
+      if (alphaTarget != null) {
+        this.dragAlphaTarget = alphaTarget;
+        this.syncAlphaTarget();
+        this.runSyncTicks();
+      } else if (this.syncSim && this.syncSim.alpha() < 0.1) {
+        this.syncSim.alpha(0.1).restart();
+        this.runSyncTicks();
+      }
+    }
+  }
+  /**
+   * Feed the cursor-repulsion force a pointer position. `active: false` clears
+   * the force. No-op when the graph has no cursor force configured (radius 0).
+   */
+  setPointer(x, y, active) {
+    if (this.destroyed) return;
+    if (this.worker) {
+      this.worker.postMessage({ type: "pointer", x, y, active });
+    } else {
+      if (this.pointer.radius <= 0) return;
+      this.pointer.x = x;
+      this.pointer.y = y;
+      this.pointer.active = active;
+      this.cursorAlphaTarget = active ? 0.03 : 0;
+      if (this.syncSim) {
+        this.syncAlphaTarget();
+        if (active) {
+          this.syncSim.restart();
+          this.runSyncTicks();
+        }
+      }
+    }
+  }
+  /** Apply the max of the tracked alpha-target intents to the sync sim. */
+  syncAlphaTarget() {
+    if (!this.syncSim) return;
+    this.syncSim.alphaTarget(Math.max(this.dragAlphaTarget, this.cursorAlphaTarget));
+  }
+  /** Drag a node (pins it and reheats slightly). */
+  dragNode(id, x, y) {
+    if (this.destroyed) return;
+    if (this.worker) {
+      this.worker.postMessage({ type: "drag", nodeId: id, x, y });
+    } else {
+      const node = this.syncNodeMap.get(id);
+      if (node) {
+        node.fx = x;
+        node.fy = y;
+      }
+      if (this.syncSim && this.syncSim.alpha() < 0.1) {
+        this.syncSim.alpha(0.1).restart();
+        this.runSyncTicks();
+      }
+    }
+  }
+  /** Tear down the simulation and release resources. */
+  destroy() {
+    this.destroyed = true;
+    if (this.syncRafId !== null) {
+      cancelAnimationFrame(this.syncRafId);
+      this.syncRafId = null;
+    }
+    if (this.worker) {
+      this.worker.postMessage({ type: "stop" });
+      this.worker.terminate();
+      this.worker = null;
+    }
+    if (this.syncSim) {
+      this.syncSim.stop();
+      this.syncSim = null;
+    }
+    this.tickCb = null;
+    this.settledCb = null;
+  }
+  // -------------------------------------------------------------------------
+  // Worker path
+  // -------------------------------------------------------------------------
+  initWorker(nodes, edges, config) {
+    this.initNodes = nodes;
+    this.initEdges = edges;
+    this.initConfig = config;
+    const initMsg = { type: "init", nodes, edges, config };
+    const wireWorker = (worker) => {
+      this.worker = worker;
+      worker.onmessage = (event) => {
+        if (this.destroyed) return;
+        const msg = event.data;
+        switch (msg.type) {
+          case "positions":
+            this.tickCb?.(msg.nodes, msg.alpha);
+            break;
+          case "settled":
+            this.settledCb?.();
+            break;
+          case "error":
+            console.error("[SimulationManager] Worker error:", msg.message);
+            break;
+        }
+      };
+      worker.postMessage(initMsg);
+    };
+    try {
+      const w = new Worker(new URL("./simulation-worker.js", import.meta.url), {
+        type: "module"
+      });
+      w.onerror = () => {
+        if (this.destroyed) return;
+        w.terminate();
+        this.worker = null;
+        try {
+          const tsUrl = new URL(import.meta.url.replace(/\/[^/]+$/, "/simulation-worker.ts"));
+          const w2 = new Worker(tsUrl, { type: "module" });
+          w2.onerror = () => {
+            if (this.destroyed) return;
+            console.warn("[SimulationManager] Worker failed to load, falling back to sync");
+            w2.terminate();
+            this.worker = null;
+            this.initSync(this.initNodes, this.initEdges, this.initConfig);
+          };
+          wireWorker(w2);
+        } catch {
+          console.warn("[SimulationManager] Worker creation failed, using sync fallback");
+          this.initSync(this.initNodes, this.initEdges, this.initConfig);
+        }
+      };
+      wireWorker(w);
+    } catch {
+      console.warn("[SimulationManager] Worker creation failed, using sync fallback");
+      this.initSync(nodes, edges, config);
+    }
+  }
+  // -------------------------------------------------------------------------
+  // Synchronous fallback
+  // -------------------------------------------------------------------------
+  initSync(nodes, edges, config) {
+    this.syncNodes = nodes.map((n) => ({
+      id: n.id,
+      x: n.x,
+      y: n.y,
+      radius: n.radius,
+      community: n.community
+    }));
+    this.syncNodeMap = new Map(this.syncNodes.map((n) => [n.id, n]));
+    const linkForce = forceLink(edges.map((e) => ({ ...e }))).id((d) => d.id).distance(config.linkDistance);
+    if (config.linkStrength != null) {
+      linkForce.strength(config.linkStrength);
+    }
+    const padding = config.collisionPadding ?? 2;
+    this.syncSim = forceSimulation(this.syncNodes).force("link", linkForce).force("charge", forceManyBody().strength(config.chargeStrength)).force(
+      "collide",
+      forceCollide().radius((d) => d.radius + padding)
+    ).force("gravityX", forceX(0).strength(0.05)).force("gravityY", forceY(0).strength(0.05)).alphaDecay(config.alphaDecay).velocityDecay(config.velocityDecay).stop();
+    if (config.centerForce !== false) {
+      this.syncSim.force("center", forceCenter(0, 0));
+    }
+    if (config.clustering) {
+      const clusterFn = forceCluster(this.syncNodes, config.clustering.strength);
+      this.syncSim.force("cluster", clusterFn);
+    }
+    this.pointer.active = false;
+    this.pointer.radius = config.cursorRepulsion?.radius ?? 0;
+    this.pointer.strength = config.cursorRepulsion?.strength ?? 0;
+    this.dragAlphaTarget = 0;
+    this.cursorAlphaTarget = 0;
+    const cursorFn = forceCursor(this.syncNodes, this.pointer);
+    this.syncSim.force("cursor", cursorFn);
+    if (config.initialAlpha != null) {
+      this.syncSim.alpha(config.initialAlpha);
+    }
+    this.syncMaxTicks = ticksToAlphaMin(config.alphaDecay);
+    this.syncWarmupTicks = config.warmupTicks ?? 0;
+    this.syncWarmupBudgetMs = config.warmupBudgetMs ?? DEFAULT_WARMUP_BUDGET_MS;
+    this.syncWarmupPending = this.syncWarmupTicks > 0;
+    this.runSyncTicks(true);
+  }
+  /**
+   * Run simulation ticks in batches, yielding to the main thread between
+   * batches via requestAnimationFrame. This prevents a multi-second freeze
+   * when the sync fallback handles large graphs (1k+ nodes).
+   *
+   * Each batch runs SYNC_TICKS_PER_BATCH ticks, emits positions for
+   * progressive rendering, then schedules the next batch.
+   *
+   * @param deferred - When true, start via microtask (initial run where
+   *   callbacks aren't wired yet). Otherwise start immediately.
+   */
+  runSyncTicks(deferred = false) {
+    if (!this.syncSim || this.destroyed) return;
+    if (this.syncRafId !== null) {
+      cancelAnimationFrame(this.syncRafId);
+      this.syncRafId = null;
+    }
+    const sim = this.syncSim;
+    const maxTicks = this.syncMaxTicks;
+    let tickCount = 0;
+    const runWarmup = () => {
+      if (this.destroyed || !this.syncSim) return;
+      this.syncRafId = null;
+      const start2 = this.now();
+      while (this.syncWarmupTicks > 0) {
+        for (let i = 0; i < SYNC_TICKS_PER_BATCH && this.syncWarmupTicks > 0; i++) {
+          sim.tick();
+          this.syncWarmupTicks--;
+          if (sim.alpha() < DEFAULT_ALPHA_MIN) {
+            this.syncWarmupTicks = 0;
+            break;
+          }
+        }
+        if (this.syncWarmupTicks > 0 && this.now() - start2 >= this.syncWarmupBudgetMs) {
+          this.syncWarmupTicks = 0;
+          break;
+        }
+      }
+      this.syncWarmupPending = false;
+      runBatch();
+    };
+    const runBatch = () => {
+      if (this.destroyed || !this.syncSim) return;
+      this.syncRafId = null;
+      for (let i = 0; i < SYNC_TICKS_PER_BATCH && tickCount < maxTicks; i++, tickCount++) {
+        sim.tick();
+        if (sim.alpha() < DEFAULT_ALPHA_MIN) {
+          tickCount = maxTicks;
+          break;
+        }
+      }
+      const positions = this.syncNodes.map((n) => ({
+        id: n.id,
+        x: n.x ?? 0,
+        y: n.y ?? 0
+      }));
+      const alpha = sim.alpha();
+      const settled = alpha < DEFAULT_ALPHA_MIN || tickCount >= maxTicks;
+      this.tickCb?.(positions, alpha);
+      if (settled) {
+        this.settledCb?.();
+      } else {
+        this.syncRafId = requestAnimationFrame(runBatch);
+      }
+    };
+    const start = this.syncWarmupPending ? runWarmup : runBatch;
+    if (deferred) {
+      queueMicrotask(start);
+    } else {
+      start();
+    }
+  }
+};
+
+// src/graph/spatial-index.ts
+var SpatialIndex2 = class extends SpatialIndex {
+};
+
+// src/graph/update-diff-config.ts
+function stableKey(c) {
+  return JSON.stringify([
+    c.chargeStrength,
+    c.linkDistance,
+    c.clustering ? [c.clustering.field, c.clustering.strength] : null,
+    c.alphaDecay,
+    c.velocityDecay,
+    c.collisionRadius,
+    c.collisionPadding ?? null,
+    c.linkStrength ?? null,
+    c.centerForce ?? null,
+    c.seed ?? null,
+    c.warmupTicks ?? null,
+    c.warmupBudgetMs ?? null
+  ]);
+}
+function simulationConfigEqual(a, b) {
+  return stableKey(a) === stableKey(b);
+}
+
+// src/graph/update-diff.ts
+var JITTER = 8;
+function jitter(id, seed) {
+  const jx = hash32(`${id}|${seed}|jx`) / 4294967296 * 2 - 1;
+  const jy = hash32(`${id}|${seed}|jy`) / 4294967296 * 2 - 1;
+  return { x: jx * JITTER, y: jy * JITTER };
+}
+var FALLBACK_R0 = 300;
+function seededDisc(id, seed) {
+  const u1 = hash32(`${id}|${seed}|r`) / 4294967296;
+  const u2 = hash32(`${id}|${seed}|t`) / 4294967296;
+  const r = FALLBACK_R0 * Math.sqrt(u1);
+  const theta = u2 * Math.PI * 2;
+  return { x: r * Math.cos(theta), y: r * Math.sin(theta) };
+}
+function diffGraphUpdate(prevNodes, prevEdges, next, prevConfig, seed) {
+  const prevIds = new Set(prevNodes.map((n) => n.id));
+  const nextIds = new Set(next.nodes.map((n) => n.id));
+  const survivingPositions = /* @__PURE__ */ new Map();
+  const enteringIds = [];
+  for (const n of prevNodes) {
+    if (nextIds.has(n.id)) survivingPositions.set(n.id, { x: n.x, y: n.y });
+  }
+  for (const n of next.nodes) {
+    if (!prevIds.has(n.id)) enteringIds.push(n.id);
+  }
+  const exitingNodes = prevNodes.filter((n) => !nextIds.has(n.id));
+  const nextEdgeKeys = new Set(next.edges.map((e) => `${e.source} ${e.target}`));
+  const exitingEdges = prevEdges.filter((e) => !nextEdgeKeys.has(`${e.source} ${e.target}`));
+  const prevEdgeCounts = /* @__PURE__ */ new Map();
+  for (const e of prevEdges) {
+    const k = `${e.source} ${e.target}`;
+    prevEdgeCounts.set(k, (prevEdgeCounts.get(k) ?? 0) + 1);
+  }
+  let enteringEdgeCount = 0;
+  const remainingPrev = new Map(prevEdgeCounts);
+  for (const e of next.edges) {
+    const k = `${e.source} ${e.target}`;
+    const c = remainingPrev.get(k);
+    if (c && c > 0) {
+      remainingPrev.set(k, c - 1);
+    } else {
+      enteringEdgeCount++;
+    }
+  }
+  const sameNodes = prevIds.size === nextIds.size && enteringIds.length === 0;
+  const sameEdges = edgeSetsEqual(prevEdges, next.edges);
+  const visualOnly = sameNodes && sameEdges && simulationConfigEqual(prevConfig, next.simulationConfig);
+  const spawnPositions = /* @__PURE__ */ new Map();
+  if (enteringIds.length > 0) {
+    const enteringSet = new Set(enteringIds);
+    const nextAdjacency = buildAdjacency(next.edges);
+    for (const id of enteringIds) {
+      const neighborPos = firstSurvivingNeighborPos(
+        id,
+        nextAdjacency,
+        survivingPositions,
+        enteringSet
+      );
+      const j = jitter(id, seed);
+      if (neighborPos) {
+        spawnPositions.set(id, { x: neighborPos.x + j.x, y: neighborPos.y + j.y });
+      } else {
+        const disc = seededDisc(id, seed);
+        spawnPositions.set(id, { x: disc.x + j.x, y: disc.y + j.y });
+      }
+    }
+  }
+  return {
+    visualOnly,
+    enteringIds,
+    survivingPositions,
+    spawnPositions,
+    exitingNodes,
+    exitingEdges,
+    enteringEdgeCount
+  };
+}
+function buildAdjacency(edges) {
+  const map = /* @__PURE__ */ new Map();
+  const push = (a, b) => {
+    const list = map.get(a);
+    if (list) list.push(b);
+    else map.set(a, [b]);
+  };
+  for (const e of edges) {
+    push(e.source, e.target);
+    push(e.target, e.source);
+  }
+  return map;
+}
+function firstSurvivingNeighborPos(id, adjacency, survivingPositions, enteringSet) {
+  const neighbors = adjacency.get(id);
+  if (!neighbors) return null;
+  for (const nid of neighbors) {
+    if (enteringSet.has(nid)) continue;
+    const pos = survivingPositions.get(nid);
+    if (pos) return pos;
+  }
+  return null;
+}
+function edgeSetsEqual(prev, next) {
+  if (prev.length !== next.length) return false;
+  const key = (e) => `${e.source}->${e.target}`;
+  const counts = /* @__PURE__ */ new Map();
+  for (const e of prev) {
+    const k = key(e);
+    counts.set(k, (counts.get(k) ?? 0) + 1);
+  }
+  for (const e of next) {
+    const k = key(e);
+    const c = counts.get(k);
+    if (!c) return false;
+    counts.set(k, c - 1);
+  }
+  return true;
+}
+
+// src/graph-mount.ts
+var SPRINGY_DRAG_MAX_NODES = 5e3;
+var CURSOR_FORCE_MAX_NODES = 2e3;
+var CURSOR_POINTER_THROTTLE_MS = 33;
+var FOLLOW_SETTLE_ALPHA = 0.05;
+function createGraph(container, spec, options) {
+  let currentSpec = spec;
+  let compilation;
+  let destroyed = false;
+  let shell = null;
+  let canvas = null;
+  let chromeEl = null;
+  let legendEl = null;
+  let legendController = null;
+  let renderer = null;
+  let simulation = null;
+  const spatialIndex = new SpatialIndex2();
+  let interactionManager = null;
+  const searchManager = new GraphSearchManager();
+  let tooltipManager = null;
+  let cleanupKeyboard = null;
+  let disconnectResize = null;
+  let positionedNodes = [];
+  let positionedEdges = [];
+  let adjacencyMap = /* @__PURE__ */ new Map();
+  let nodeDataMap = /* @__PURE__ */ new Map();
+  let edgeDataMap = /* @__PURE__ */ new Map();
+  let hoveredNodeId = null;
+  let hoveredEdgeId = null;
+  let selectedNodeIds = /* @__PURE__ */ new Set();
+  let animFrameId = null;
+  let needsRender = false;
+  let isGesturing = false;
+  const scheduler = new AnimationScheduler(() => scheduleRender());
+  let gestureTimeout = null;
+  let lastEdgeHitTime = 0;
+  let lastPointerFeedTime = 0;
+  let activeFlight = null;
+  let activeFollow = null;
+  let lastAlpha = 1;
+  let cameraChangePending = false;
+  let highlightSet = null;
+  let highlightDimOpacity = null;
+  let seedIds = /* @__PURE__ */ new Set();
+  let activeCategories = /* @__PURE__ */ new Set();
+  let transientHighlight = null;
+  let transientTarget = null;
+  const seenWarnings = /* @__PURE__ */ new Set();
+  let nodeCategory = /* @__PURE__ */ new Map();
+  let focusTransition = null;
+  let focusAnim = null;
+  let hoverRadiusTween = null;
+  let entranceProgress = 1;
+  let entranceActive = false;
+  let entranceStagger = false;
+  let entranceOrderMap = null;
+  let entranceOffsetMap = null;
+  let entranceFitInFlight = false;
+  let entranceReveal = null;
+  let suppressEntranceOnce = options?.suppressEntrance ?? false;
+  let enterAlphaMap = null;
+  let exitingGhosts = null;
+  function markGesture() {
+    isGesturing = true;
+    if (gestureTimeout !== null) clearTimeout(gestureTimeout);
+    gestureTimeout = setTimeout(() => {
+      isGesturing = false;
+      gestureTimeout = null;
+      needsRender = true;
+      scheduleRender();
+    }, 150);
+  }
+  function getContainerDimensions2() {
+    return getContainerDimensions(container);
+  }
+  function warnOnce(message) {
+    if (seenWarnings.has(message)) return;
+    seenWarnings.add(message);
+    if (options?.onWarn) options.onWarn(message);
+    else console.warn(message);
+  }
+  function compile(specToCompile = currentSpec) {
+    const { width, height } = getContainerDimensions2();
+    const darkMode = resolveDarkMode(options?.darkMode);
+    const compileOpts = {
+      width,
+      height,
+      theme: options?.theme,
+      darkMode,
+      watermark: options?.watermark,
+      onWarn: warnOnce
+    };
+    return compileGraph(specToCompile, compileOpts);
+  }
+  function buildDataMaps() {
+    nodeDataMap = new Map(compilation.nodes.map((n) => [n.id, n.data ?? {}]));
+    edgeDataMap = new Map(compilation.edges.map((e) => [`${e.source}->${e.target}`, e.data ?? {}]));
+    nodeCategory = /* @__PURE__ */ new Map();
+    const field = compilation.legendField;
+    if (field) {
+      for (const n of compilation.nodes) {
+        const v = n.data?.[field];
+        if (v != null) nodeCategory.set(n.id, String(v));
+      }
+    }
+  }
+  function buildAdjacencyMap(edges) {
+    const map = /* @__PURE__ */ new Map();
+    for (const edge of edges) {
+      if (!map.has(edge.source)) map.set(edge.source, /* @__PURE__ */ new Set());
+      if (!map.has(edge.target)) map.set(edge.target, /* @__PURE__ */ new Set());
+      map.get(edge.source).add(edge.target);
+      map.get(edge.target).add(edge.source);
+    }
+    return map;
+  }
+  function toSimNodes(nodes) {
+    return nodes.map((n) => ({
+      id: n.id,
+      radius: n.radius,
+      community: n.community
+    }));
+  }
+  function toSimEdges(edges) {
+    return edges.map((e) => ({
+      source: e.source,
+      target: e.target
+    }));
+  }
+  function nodeDataById(nodeId) {
+    return nodeDataMap.get(nodeId) ?? {};
+  }
+  function pointToSegmentDist(px, py, ax, ay, bx, by) {
+    const dx = bx - ax;
+    const dy = by - ay;
+    const lenSq = dx * dx + dy * dy;
+    if (lenSq === 0) return Math.hypot(px - ax, py - ay);
+    const t = Math.max(0, Math.min(1, ((px - ax) * dx + (py - ay) * dy) / lenSq));
+    return Math.hypot(px - (ax + t * dx), py - (ay + t * dy));
+  }
+  function hitTestEdge(graphX, graphY, threshold) {
+    let bestDist = threshold;
+    let bestEdgeId = null;
+    for (const edge of positionedEdges) {
+      const dist = pointToSegmentDist(
+        graphX,
+        graphY,
+        edge.sourceX,
+        edge.sourceY,
+        edge.targetX,
+        edge.targetY
+      );
+      if (dist < bestDist) {
+        bestDist = dist;
+        bestEdgeId = `${edge.source}->${edge.target}`;
+      }
+    }
+    return bestEdgeId;
+  }
+  function edgeDataById(edgeId) {
+    return edgeDataMap.get(edgeId) ?? null;
+  }
+  function createSurface() {
+    const activeShell = shell;
+    if (!activeShell) return;
+    canvas = document.createElement("canvas");
+    canvas.className = "oc-graph-canvas";
+    canvas.setAttribute("role", "img");
+    if (compilation.a11y?.altText) {
+      canvas.setAttribute("aria-label", compilation.a11y.altText);
+    }
+    activeShell.mountSurface(canvas);
+    renderLegend();
+    activeShell.syncChromeInset();
+    const { width, height } = activeShell.getSize();
+    renderer = new GraphCanvasRenderer(canvas);
+    renderer.resize(width, height);
+  }
+  function renderChrome() {
+    shell?.renderChrome(compilation);
+  }
+  function legendSetting() {
+    return options?.legend ?? currentSpec.legend;
+  }
+  function legendConfig() {
+    const l = legendSetting();
+    if (l && typeof l === "object") {
+      return { interactive: l.interactive ?? true, counts: l.counts ?? true };
+    }
+    return { interactive: true, counts: true };
+  }
+  function legendViewData() {
+    return { nodes: getLegend().nodes, edges: getLegend().edges };
+  }
+  function renderLegend() {
+    if (!legendEl) return;
+    const cfg = legendConfig();
+    if (!legendController) {
+      legendController = createGraphLegend(legendEl, legendViewData(), {
+        interactive: cfg.interactive,
+        counts: cfg.counts,
+        onToggle: (value) => toggleLegendCategory(value),
+        onHover: (value) => {
+          const field = compilation.legendField;
+          options?.onLegendHover?.(value !== null && field ? { field, value } : null);
+        }
+      });
+    } else {
+      legendController.update(legendViewData());
+    }
+  }
+  function syncLegendActiveState() {
+    if (legendController) legendController.update(legendViewData());
+    syncChromeInset();
+  }
+  function syncChromeInset() {
+    shell?.syncChromeInset();
+  }
+  function chromeInsetTop() {
+    if (!chromeEl || chromeEl.style.display === "none") return 0;
+    return chromeEl.offsetHeight;
+  }
+  function springyDragEnabled() {
+    return compilation.interaction.springyDrag && compilation.nodes.length <= SPRINGY_DRAG_MAX_NODES;
+  }
+  function cursorForceEnabled() {
+    return compilation.interaction.cursorRepulsion !== null && compilation.nodes.length <= CURSOR_FORCE_MAX_NODES && !prefersReducedMotion();
+  }
+  function initSimulation(opts) {
+    const simNodes = toSimNodes(compilation.nodes);
+    const simEdges = toSimEdges(compilation.edges);
+    const config = compilation.simulationConfig;
+    if (opts?.positions) {
+      seedNodePositions(simNodes, config.seed ?? 0);
+      for (const n of simNodes) {
+        const p = opts.positions.get(n.id);
+        if (p) {
+          n.x = p.x;
+          n.y = p.y;
+        }
+      }
+    } else {
+      seedNodePositions(simNodes, config.seed ?? 0);
+    }
+    simulation = SimulationManager.create(simNodes, simEdges, {
+      chargeStrength: config.chargeStrength,
+      linkDistance: config.linkDistance,
+      clustering: config.clustering,
+      alphaDecay: config.alphaDecay,
+      velocityDecay: config.velocityDecay,
+      collisionRadius: config.collisionRadius,
+      collisionPadding: config.collisionPadding,
+      linkStrength: config.linkStrength,
+      // Update sims suppress the (non-alpha-scaled) center force to avoid a
+      // global jump on tick 1; the alpha-scaled forceX/forceY gravity still
+      // holds the layout centered.
+      centerForce: opts?.suppressCenter ? false : config.centerForce,
+      warmupTicks: opts?.skipWarmup ? 0 : config.warmupTicks,
+      warmupBudgetMs: config.warmupBudgetMs,
+      initialAlpha: opts?.initialAlpha ?? config.initialAlpha,
+      // Cursor force radius/strength (null when disabled or gated off by node
+      // count). The mount only feeds pointer positions when the same gate holds.
+      cursorRepulsion: cursorForceEnabled() ? compilation.interaction.cursorRepulsion : null
+    });
+    lastAlpha = opts?.initialAlpha ?? 1;
+    let initialSettleDone = false;
+    let initialFitDone = opts?.skipEntrance ?? false;
+    simulation.onTick((positions, alpha) => {
+      if (destroyed) return;
+      lastAlpha = alpha;
+      const posMap = /* @__PURE__ */ new Map();
+      for (const p of positions) {
+        posMap.set(p.id, { x: p.x, y: p.y });
+      }
+      positionedNodes = compilation.nodes.map((node, index) => {
+        const pos = posMap.get(node.id) ?? { x: 0, y: 0 };
+        return { ...node, x: pos.x, y: pos.y, index };
+      });
+      positionedEdges = compilation.edges.map((edge) => {
+        const src = posMap.get(edge.source) ?? { x: 0, y: 0 };
+        const tgt = posMap.get(edge.target) ?? { x: 0, y: 0 };
+        return {
+          ...edge,
+          sourceX: src.x,
+          sourceY: src.y,
+          targetX: tgt.x,
+          targetY: tgt.y
+        };
+      });
+      spatialIndex.rebuild(positionedNodes);
+      if (!initialFitDone && positionedNodes.length > 0 && interactionManager && options?.fitOnLoad !== false) {
+        initialFitDone = true;
+        startEntrance();
+      } else if (!initialFitDone && options?.fitOnLoad === false) {
+        initialFitDone = true;
+      }
+      needsRender = true;
+      scheduleRender();
+    });
+    simulation.onSettled(() => {
+      if (initialSettleDone) return;
+      initialSettleDone = true;
+    });
+  }
+  function computeInitialFit() {
+    const { width: cw, height: ch } = getCanvasDimensions();
+    const warmed = (compilation.simulationConfig.warmupTicks ?? 0) > 0;
+    const { transform } = ZoomTransform.fitBounds(positionedNodes, cw, ch, void 0, {
+      spread: !warmed,
+      insetTop: chromeInsetTop()
+    });
+    return transform;
+  }
+  function startEntrance() {
+    if (!interactionManager) return;
+    const fit = computeInitialFit();
+    const enter = compilation.animation?.enter ?? null;
+    const suppressed = suppressEntranceOnce;
+    suppressEntranceOnce = false;
+    if (suppressed || !enter || prefersReducedMotion()) {
+      interactionManager.setTransform(fit);
+      cameraChangePending = true;
+      entranceActive = false;
+      entranceProgress = 1;
+      return;
+    }
+    const { width: cw, height: ch } = getCanvasDimensions();
+    const pulledBack = fit.zoomAt(fit.k * 0.7, cw / 2, ch / 2);
+    interactionManager.setTransform(pulledBack);
+    cameraChangePending = true;
+    entranceActive = true;
+    entranceProgress = 0;
+    entranceStagger = enter.stagger && positionedNodes.length <= ENTRANCE_STAGGER_MAX_NODES;
+    if (entranceStagger) {
+      entranceOrderMap = entranceOrder(positionedNodes);
+      entranceOffsetMap = entranceOffsets(positionedNodes);
+    } else {
+      entranceOrderMap = null;
+      entranceOffsetMap = null;
+    }
+    if (enter.cameraFit) {
+      entranceFitInFlight = true;
+      flyCamera(fit, { duration: enter.duration + 100 }, () => {
+        entranceFitInFlight = false;
+      });
+    }
+    const ease = resolveEase(enter.ease);
+    entranceReveal = createTween({
+      duration: enter.duration,
+      ease,
+      apply: (t) => {
+        entranceProgress = t;
+        needsRender = true;
+      },
+      onDone: () => {
+        entranceProgress = 1;
+        entranceActive = false;
+        entranceReveal = null;
+        needsRender = true;
+      }
+    });
+    scheduler.add(entranceReveal);
+  }
+  function getCanvasDimensions() {
+    if (!canvas) return { width: 600, height: 400 };
+    const rect = canvas.getBoundingClientRect();
+    return {
+      width: Math.max(rect.width || 600, 100),
+      height: Math.max(rect.height || 400, 100)
+    };
+  }
+  function scheduleRender() {
+    if (animFrameId !== null || destroyed) return;
+    animFrameId = requestAnimationFrame(renderFrame);
+  }
+  function hoverConnectedSet(nodeId) {
+    if (nodeId === null) return null;
+    if (compilation.interaction.hoverMode === "category") {
+      const cat = nodeCategory.get(nodeId);
+      const set2 = /* @__PURE__ */ new Set([nodeId]);
+      if (cat !== void 0) {
+        for (const [id, c] of nodeCategory) if (c === cat) set2.add(id);
+      }
+      return set2;
+    }
+    const set = /* @__PURE__ */ new Set([nodeId]);
+    const neighbors = adjacencyMap.get(nodeId);
+    if (neighbors) for (const nid of neighbors) set.add(nid);
+    return set;
+  }
+  function standingSnapshot() {
+    return composeStandingFocus(
+      highlightSet,
+      searchManager.getMatches(),
+      selectedNodeIds,
+      adjacencyMap
+    );
+  }
+  function targetSnapshot() {
+    return layerHoverFocus(standingSnapshot(), hoveredNodeId, hoverConnectedSet(hoveredNodeId));
+  }
+  function armFocus(now) {
+    const target = targetSnapshot();
+    const hoverCfg = compilation.animation?.hover ?? null;
+    const duration = hoverCfg && !prefersReducedMotion() ? hoverCfg.duration : 0;
+    const ease = resolveEase(hoverCfg?.ease ?? "smooth");
+    if (!focusTransition) {
+      focusTransition = new FocusTransition(target, duration, ease, now);
+      return;
+    }
+    focusTransition.retarget(target, now);
+    if (focusAnim) scheduler.remove(focusAnim);
+    focusAnim = {
+      tick: (t) => {
+        const running = focusTransition !== null && !focusTransition.isSettled(t);
+        if (!running) focusAnim = null;
+        return running;
+      },
+      finish: () => {
+        focusAnim = null;
+      },
+      cancel: () => {
+        focusAnim = null;
+      }
+    };
+    scheduler.add(focusAnim);
+  }
+  function refreshFocus() {
+    armFocus(performance.now());
+    needsRender = true;
+    scheduleRender();
+  }
+  function resolveHighlightTarget2(target) {
+    return resolveHighlightTarget(target, compilation.nodes, adjacencyMap);
+  }
+  function categoryHighlightSet2() {
+    return categoryHighlightSet(activeCategories, nodeCategory);
+  }
+  function recomputeHighlight() {
+    const filter = categoryHighlightSet2();
+    const transient = transientHighlight !== null && transientHighlight.size > 0 ? transientHighlight : null;
+    if (filter !== null && transient !== null) {
+      const inter = /* @__PURE__ */ new Set();
+      for (const id of transient) if (filter.has(id)) inter.add(id);
+      highlightSet = inter.size > 0 ? inter : transient;
+      return;
+    }
+    highlightSet = filter ?? transient;
+  }
+  function refreshTransientHighlight() {
+    if (transientTarget === null) {
+      transientHighlight = null;
+      return;
+    }
+    const nextIds = new Set(compilation.nodes.map((n) => n.id));
+    const resolved = new Set(
+      [...resolveHighlightTarget2(transientTarget)].filter((id) => nextIds.has(id))
+    );
+    transientHighlight = resolved.size > 0 ? resolved : null;
+  }
+  function effectiveDimOpacity() {
+    const custom = transientHighlight !== null ? highlightDimOpacity : null;
+    return custom ?? compilation.interaction.dimOpacity;
+  }
+  function emitHighlightChange() {
+    options?.onHighlightChange?.(highlightSet ? [...highlightSet] : null);
+  }
+  function applyInitialHighlight() {
+    const init = compilation.initialHighlight;
+    if (!init) return;
+    activeCategories = new Set(init.values);
+    recomputeHighlight();
+  }
+  function startHoverRadiusTween(nodeId) {
+    const hoverCfg = compilation.animation?.hover ?? null;
+    if (nodeId === null || !hoverCfg || prefersReducedMotion()) {
+      hoverRadiusTween = nodeId ? { nodeId, scale: 1.15 } : null;
+      return;
+    }
+    hoverRadiusTween = { nodeId, scale: 1 };
+    const ease = resolveEase(hoverCfg.ease);
+    const tween = createTween({
+      duration: hoverCfg.duration,
+      ease,
+      apply: (t) => {
+        if (hoverRadiusTween?.nodeId === nodeId) hoverRadiusTween.scale = 1 + 0.15 * t;
+        needsRender = true;
+      },
+      onDone: () => {
+        if (hoverRadiusTween?.nodeId === nodeId) hoverRadiusTween.scale = 1.15;
+      }
+    });
+    scheduler.add(tween);
+  }
+  function showNodeTooltip(nodeId) {
+    if (!tooltipManager || !interactionManager) return;
+    const defaults = compilation.tooltipDescriptors.get(nodeId);
+    if (!defaults) return;
+    const node = positionedNodes.find((n) => n.id === nodeId);
+    if (!node) return;
+    const screen = interactionManager.getTransform().graphToScreen(node.x, node.y);
+    const formatter = tooltipFormatter();
+    if (!formatter) {
+      tooltipManager.show(defaults, screen.x, screen.y);
+      return;
+    }
+    const result = formatter({ kind: "node", data: nodeDataById(nodeId) }, defaults);
+    applyFormatterResult(result, screen.x, screen.y);
+  }
+  function showEdgeTooltip(edgeId, data, screenX, screenY) {
+    if (!tooltipManager) return;
+    const edge = compilation.edges.find((e) => `${e.source}->${e.target}` === edgeId);
+    const defaults = edge ? buildEdgeTooltip(edge) : { title: edgeId, fields: [] };
+    const formatter = tooltipFormatter();
+    if (!formatter) {
+      tooltipManager.show(defaults, screenX, screenY);
+      return;
+    }
+    const result = formatter({ kind: "edge", data }, defaults);
+    applyFormatterResult(result, screenX, screenY);
+  }
+  function tooltipFormatter() {
+    const t = options?.tooltip;
+    return t && typeof t === "object" ? t.formatter ?? null : null;
+  }
+  function applyFormatterResult(result, x, y) {
+    if (!tooltipManager) return;
+    if (result === null) {
+      tooltipManager.hide();
+    } else if (typeof result === "string") {
+      tooltipManager.show({ text: result }, x, y);
+    } else if (result instanceof HTMLElement) {
+      tooltipManager.show({ element: result }, x, y);
+    } else {
+      tooltipManager.show(result, x, y);
+    }
+  }
+  function buildRenderState(now) {
+    const transform = interactionManager.getTransform();
+    if (!focusTransition) armFocus(now);
+    const ft = focusTransition;
+    const t = ft.progress(now);
+    const focus = t < 1 ? { t, prev: ft.prev, next: ft.next } : void 0;
+    const settledNext = ft.next;
+    const hoverRadiusScale = hoverRadiusTween ? /* @__PURE__ */ new Map([[hoverRadiusTween.nodeId, hoverRadiusTween.scale]]) : void 0;
+    return {
+      nodes: positionedNodes,
+      edges: positionedEdges,
+      transform: { x: transform.x, y: transform.y, k: transform.k },
+      hoveredNodeId,
+      hoveredEdgeId,
+      selectedNodeIds,
+      adjacencyMap,
+      theme: compilation.theme,
+      searchMatches: searchManager.getMatches(),
+      exemptIds: seedIds,
+      isGesturing,
+      watermark: compilation.watermark,
+      focus: focus ?? { t: 1, prev: settledNext, next: settledNext },
+      hoverRadiusScale,
+      dimOpacity: effectiveDimOpacity(),
+      entrance: entranceActive && entranceProgress < 1 ? {
+        t: entranceProgress,
+        stagger: entranceStagger,
+        order: entranceOrderMap ?? void 0,
+        offsets: entranceOffsetMap ?? void 0
+      } : void 0,
+      enterAlpha: enterAlphaMap ?? void 0,
+      exiting: exitingGhosts ?? void 0
+    };
+  }
+  function renderFrame(now) {
+    animFrameId = null;
+    if (destroyed || !renderer || !interactionManager) return;
+    if (scheduler.tick(now)) needsRender = true;
+    if (needsRender) {
+      needsRender = false;
+      renderer.render(buildRenderState(now));
+    }
+    if (scheduler.active) scheduleRender();
+    if (cameraChangePending) {
+      cameraChangePending = false;
+      const t = interactionManager.getTransform();
+      options?.onCameraChange?.({ x: t.x, y: t.y, k: t.k });
+    }
+  }
+  function flyCamera(to, opts, onDone) {
+    if (destroyed || !interactionManager) return;
+    cancelFlight();
+    const cameraCfg = compilation.animation?.camera ?? null;
+    const resolveTarget = () => typeof to === "function" ? to() : to;
+    const snap = cameraCfg === null || prefersReducedMotion() || opts?.duration === 0;
+    if (snap) {
+      interactionManager.setTransform(resolveTarget());
+      cameraChangePending = true;
+      needsRender = true;
+      scheduleRender();
+      onDone?.();
+      return;
+    }
+    const { width, height } = getCanvasDimensions();
+    const duration = opts?.duration ?? cameraCfg?.duration ?? "auto";
+    const ease = opts?.ease ?? cameraCfg?.ease ?? "smooth";
+    const heavy = positionedNodes.length > 1e3;
+    const flight = createCameraFlight({
+      from: interactionManager.getTransform(),
+      to,
+      viewport: { width, height },
+      apply: (t) => {
+        interactionManager.setTransform(t);
+        isGesturing = heavy;
+        cameraChangePending = true;
+        needsRender = true;
+      },
+      onDone: () => {
+        activeFlight = null;
+        isGesturing = false;
+        needsRender = true;
+        if (typeof to === "function") startFollow(to);
+        scheduleRender();
+        onDone?.();
+      },
+      opts: { duration, ease }
+    });
+    activeFlight = flight;
+    scheduler.add(flight);
+  }
+  function startFollow(target) {
+    const follow = createCameraFollow({
+      target,
+      apply: (t) => {
+        interactionManager.setTransform(t);
+        cameraChangePending = true;
+        needsRender = true;
+      },
+      isActive: () => !destroyed && lastAlpha >= FOLLOW_SETTLE_ALPHA
+    });
+    activeFollow = follow;
+    scheduler.add(follow);
+  }
+  function cancelFlight() {
+    if (activeFlight) {
+      scheduler.remove(activeFlight);
+      activeFlight = null;
+      isGesturing = false;
+    }
+    if (activeFollow) {
+      scheduler.remove(activeFollow);
+      activeFollow = null;
+    }
+  }
+  function initInteraction() {
+    if (!canvas) return;
+    interactionManager = new GraphInteractionManager(canvas, spatialIndex, {
+      onTransformChange(_transform) {
+        cancelFlight();
+        markGesture();
+        cameraChangePending = true;
+        needsRender = true;
+        scheduleRender();
+      },
+      onHoverChange(nodeId) {
+        if (nodeId === hoveredNodeId) return;
+        hoveredNodeId = nodeId;
+        armFocus(performance.now());
+        startHoverRadiusTween(nodeId);
+        needsRender = true;
+        scheduleRender();
+        if (nodeId && hoveredEdgeId) {
+          hoveredEdgeId = null;
+          options?.onEdgeHover?.(null);
+          tooltipManager?.hide();
+        }
+        options?.onNodeHover?.(nodeId ? nodeDataById(nodeId) : null);
+        if (nodeId && tooltipManager) {
+          showNodeTooltip(nodeId);
+        } else if (!nodeId) {
+          tooltipManager?.hide();
+        }
+      },
+      onBackgroundHover(graphX, graphY, screenX, screenY) {
+        if (hoveredNodeId) return;
+        const now = performance.now();
+        if (now - lastEdgeHitTime < 32) {
+          if (hoveredEdgeId) {
+            hoveredEdgeId = null;
+            needsRender = true;
+            scheduleRender();
+            options?.onEdgeHover?.(null);
+            tooltipManager?.hide();
+          }
+          return;
+        }
+        lastEdgeHitTime = now;
+        const transform = interactionManager?.getTransform();
+        const threshold = 5 / (transform?.k ?? 1);
+        const edgeId = hitTestEdge(graphX, graphY, threshold);
+        if (edgeId !== hoveredEdgeId) {
+          hoveredEdgeId = edgeId;
+          needsRender = true;
+          scheduleRender();
+          if (edgeId) {
+            const data = edgeDataById(edgeId);
+            options?.onEdgeHover?.(data);
+            if (tooltipManager && data) showEdgeTooltip(edgeId, data, screenX, screenY);
+          } else {
+            options?.onEdgeHover?.(null);
+            tooltipManager?.hide();
+          }
+        }
+      },
+      onSelectionChange(nodeIds) {
+        selectedNodeIds = new Set(nodeIds);
+        armFocus(performance.now());
+        needsRender = true;
+        scheduleRender();
+        options?.onSelectionChange?.(nodeIds);
+        if (nodeIds.length > 0) {
+          const lastId = nodeIds[nodeIds.length - 1];
+          options?.onNodeClick?.(nodeDataById(lastId));
+        }
+      },
+      onNodeDragStart(nodeId) {
+        const node = positionedNodes.find((n) => n.id === nodeId);
+        const x = node?.x ?? 0;
+        const y = node?.y ?? 0;
+        simulation?.pinNode(nodeId, x, y, springyDragEnabled() ? 0.3 : void 0);
+        canvas?.classList.add("oc-graph-canvas--dragging");
+      },
+      onNodeDrag(nodeId, x, y) {
+        simulation?.dragNode(nodeId, x, y);
+      },
+      onNodeDragEnd(nodeId) {
+        simulation?.unpinNode(nodeId, springyDragEnabled() ? 0 : void 0);
+        canvas?.classList.remove("oc-graph-canvas--dragging");
+      },
+      onPointerMove(graphX, graphY) {
+        if (!cursorForceEnabled()) return;
+        const now = performance.now();
+        if (now - lastPointerFeedTime < CURSOR_POINTER_THROTTLE_MS) return;
+        lastPointerFeedTime = now;
+        simulation?.setPointer(graphX, graphY, true);
+      },
+      onPointerLeave() {
+        if (!cursorForceEnabled()) return;
+        simulation?.setPointer(0, 0, false);
+      },
+      onDoubleClick(nodeId) {
+        options?.onNodeDoubleClick?.(nodeDataById(nodeId));
+      }
+    });
+    cleanupKeyboard = attachGraphKeyboardNav({
+      canvas,
+      getNodes: () => positionedNodes,
+      getSelectedIds: () => [...selectedNodeIds],
+      getAdjacency: () => adjacencyMap,
+      onSelect(nodeId) {
+        selectedNodeIds = /* @__PURE__ */ new Set([nodeId]);
+        needsRender = true;
+        scheduleRender();
+        options?.onNodeClick?.(nodeDataById(nodeId));
+        options?.onSelectionChange?.([nodeId]);
+      },
+      onDeselect() {
+        selectedNodeIds.clear();
+        needsRender = true;
+        scheduleRender();
+        options?.onSelectionChange?.([]);
+      },
+      onZoom(direction) {
+        if (!interactionManager || !canvas) return;
+        const t = interactionManager.getTransform();
+        const { width: cw, height: ch } = getCanvasDimensions();
+        const factor = direction === "in" ? 1.2 : 0.8;
+        const newK = t.k * factor;
+        const newTransform = t.zoomAt(newK, cw / 2, ch / 2);
+        flyCamera(newTransform, { duration: 200 });
+      },
+      onFitAll() {
+        zoomToFit();
+      }
+    });
+  }
+  function search(query) {
+    if (destroyed) return;
+    searchManager.search(query, positionedNodes);
+    needsRender = true;
+    scheduleRender();
+  }
+  function clearSearch() {
+    if (destroyed) return;
+    searchManager.clearSearch();
+    needsRender = true;
+    scheduleRender();
+  }
+  function zoomToFit(opts) {
+    if (destroyed || !interactionManager || positionedNodes.length === 0) return;
+    const { width: cw, height: ch } = getCanvasDimensions();
+    const { transform: fitTransform } = ZoomTransform.fitBounds(
+      positionedNodes,
+      cw,
+      ch,
+      opts?.padding,
+      {
+        insetTop: chromeInsetTop()
+      }
+    );
+    flyCamera(fitTransform, opts);
+  }
+  function zoomToNode(nodeId, opts) {
+    if (destroyed || !interactionManager || !canvas) return;
+    const node = positionedNodes.find((n) => n.id === nodeId);
+    if (!node) return;
+    const { width: cw, height: ch } = getCanvasDimensions();
+    const k = clampK(opts?.scale ?? 2);
+    const provider = () => {
+      const live = positionedNodes.find((n) => n.id === nodeId) ?? node;
+      return new ZoomTransform(cw / 2 - live.x * k, ch / 2 - live.y * k, k);
+    };
+    flyCamera(provider, opts);
+  }
+  function flyTo(target, opts) {
+    if (destroyed || !interactionManager) return;
+    const { width: cw, height: ch } = getCanvasDimensions();
+    const k = clampK(target.k ?? interactionManager.getTransform().k);
+    flyCamera(new ZoomTransform(cw / 2 - target.x * k, ch / 2 - target.y * k, k), opts);
+  }
+  function centerAt(x, y, opts) {
+    flyTo({ x, y }, opts);
+  }
+  function getCamera() {
+    const t = interactionManager?.getTransform() ?? ZoomTransform.identity();
+    return { x: t.x, y: t.y, k: t.k };
+  }
+  function selectNode(nodeId, opts) {
+    if (destroyed) return;
+    selectedNodeIds = /* @__PURE__ */ new Set([nodeId]);
+    needsRender = true;
+    scheduleRender();
+    options?.onSelectionChange?.([nodeId]);
+    const shouldFly = opts?.fly ?? compilation.interaction.selectFlyTo;
+    if (shouldFly) zoomToNode(nodeId, opts);
+  }
+  function getSelectedNodes() {
+    return [...selectedNodeIds];
+  }
+  function getSearchMatches() {
+    return [...searchManager.getMatches() ?? []];
+  }
+  function highlight(target, opts) {
+    if (destroyed) return;
+    transientTarget = target;
+    refreshTransientHighlight();
+    highlightDimOpacity = opts?.dimOpacity ?? null;
+    recomputeHighlight();
+    refreshFocus();
+    emitHighlightChange();
+  }
+  function clearHighlight() {
+    if (destroyed) return;
+    transientTarget = null;
+    transientHighlight = null;
+    highlightDimOpacity = null;
+    recomputeHighlight();
+    refreshFocus();
+    emitHighlightChange();
+  }
+  function getHighlight() {
+    return highlightSet ? [...highlightSet] : null;
+  }
+  function getLegend() {
+    const nodeEntries = "entries" in compilation.legend ? compilation.legend.entries : [];
+    return {
+      field: compilation.legendField,
+      nodes: nodeEntries.filter((e) => !e.overflow).map((e) => ({
+        label: e.label,
+        color: e.color,
+        count: e.count,
+        active: activeCategories.size === 0 || activeCategories.has(e.label)
+      })),
+      edges: (compilation.edgeLegend ?? []).map((e) => ({
+        label: e.label,
+        color: e.color,
+        count: e.count
+      }))
+    };
+  }
+  function setActiveCategories(values) {
+    if (destroyed) return;
+    activeCategories = new Set(values);
+    recomputeHighlight();
+    syncLegendActiveState();
+    refreshFocus();
+    emitHighlightChange();
+  }
+  function getActiveCategories() {
+    return [...activeCategories];
+  }
+  function toggleLegendCategory(value) {
+    if (activeCategories.has(value)) activeCategories.delete(value);
+    else activeCategories.add(value);
+    recomputeHighlight();
+    syncLegendActiveState();
+    refreshFocus();
+    options?.onLegendToggle?.([...activeCategories]);
+    emitHighlightChange();
+  }
+  function doResize() {
+    if (destroyed || !canvas || !renderer || !shell) return;
+    const { width, height } = shell.getSize();
+    renderer.resize(width, height);
+    syncChromeInset();
+    if (entranceFitInFlight && interactionManager) {
+      cancelFlight();
+      entranceFitInFlight = false;
+      interactionManager.setTransform(computeInitialFit());
+      cameraChangePending = true;
+    }
+    needsRender = true;
+    scheduleRender();
+  }
+  function update(newSpec) {
+    if (destroyed) return;
+    const nextCompilation = compile(newSpec);
+    if (nextCompilation.numDimensions !== compilation.numDimensions) {
+      warnOnce("createGraph: update() cannot change dimensions; remount the graph");
+      return;
+    }
+    currentSpec = newSpec;
+    scheduler.finishAll();
+    entranceActive = false;
+    entranceProgress = 1;
+    entranceFitInFlight = false;
+    entranceReveal = null;
+    enterAlphaMap = null;
+    exitingGhosts = null;
+    const prevNodes = positionedNodes;
+    const prevEdges = positionedEdges;
+    const prevConfig = compilation.simulationConfig;
+    compilation = nextCompilation;
+    seedIds = new Set(compilation.seedNodeIds);
+    const diff = diffGraphUpdate(
+      prevNodes,
+      prevEdges,
+      compilation,
+      prevConfig,
+      prevConfig.seed ?? 0
+    );
+    if (diff.visualOnly) {
+      runVisualOnlyUpdate();
+      return;
+    }
+    runStructuralUpdate(diff);
+  }
+  function runVisualOnlyUpdate() {
+    adjacencyMap = buildAdjacencyMap(compilation.edges);
+    buildDataMaps();
+    const posMap = /* @__PURE__ */ new Map();
+    for (const node of positionedNodes) {
+      posMap.set(node.id, { x: node.x, y: node.y });
+    }
+    positionedNodes = compilation.nodes.map((node, index) => {
+      const pos = posMap.get(node.id) ?? { x: 0, y: 0 };
+      return { ...node, x: pos.x, y: pos.y, index };
+    });
+    positionedEdges = compilation.edges.map((edge) => {
+      const src = posMap.get(edge.source) ?? { x: 0, y: 0 };
+      const tgt = posMap.get(edge.target) ?? { x: 0, y: 0 };
+      return { ...edge, sourceX: src.x, sourceY: src.y, targetX: tgt.x, targetY: tgt.y };
+    });
+    spatialIndex.rebuild(positionedNodes);
+    refreshTransientHighlight();
+    recomputeHighlight();
+    reRunSearch();
+    renderChrome();
+    renderLegend();
+    syncLegendActiveState();
+    needsRender = true;
+    scheduleRender();
+  }
+  function runStructuralUpdate(diff) {
+    teardownSimOnly();
+    adjacencyMap = buildAdjacencyMap(compilation.edges);
+    buildDataMaps();
+    const positions = /* @__PURE__ */ new Map();
+    for (const [id, p] of diff.survivingPositions) positions.set(id, p);
+    for (const [id, p] of diff.spawnPositions) positions.set(id, p);
+    const prevNodeCount = diff.survivingPositions.size + diff.exitingNodes.length;
+    const nextNodeCount = diff.survivingPositions.size + diff.enteringIds.length;
+    const nodeRatio = ratio(
+      diff.enteringIds.length + diff.exitingNodes.length,
+      Math.max(prevNodeCount, nextNodeCount)
+    );
+    const prevEdgeCount = compilation.edges.length - diff.enteringEdgeCount + diff.exitingEdges.length;
+    const nextEdgeCount = compilation.edges.length;
+    const edgeRatio = ratio(
+      diff.enteringEdgeCount + diff.exitingEdges.length,
+      Math.max(prevEdgeCount, nextEdgeCount)
+    );
+    const changeRatio = Math.max(nodeRatio, edgeRatio);
+    const initialAlpha = Math.min(1, 0.3 + 0.7 * changeRatio);
+    positionedNodes = compilation.nodes.map((node, index) => {
+      const pos = positions.get(node.id) ?? { x: 0, y: 0 };
+      return { ...node, x: pos.x, y: pos.y, index };
+    });
+    positionedEdges = compilation.edges.map((edge) => {
+      const src = positions.get(edge.source) ?? { x: 0, y: 0 };
+      const tgt = positions.get(edge.target) ?? { x: 0, y: 0 };
+      return { ...edge, sourceX: src.x, sourceY: src.y, targetX: tgt.x, targetY: tgt.y };
+    });
+    spatialIndex.rebuild(positionedNodes);
+    initSimulation({
+      positions,
+      suppressCenter: true,
+      initialAlpha,
+      skipWarmup: true,
+      skipEntrance: true
+    });
+    renderChrome();
+    renderLegend();
+    reconcileStateAfterUpdate();
+    startUpdateTransitions(diff);
+    needsRender = true;
+    scheduleRender();
+  }
+  function ratio(numerator, denominator) {
+    return denominator > 0 ? numerator / denominator : 0;
+  }
+  function reconcileStateAfterUpdate() {
+    const nextIds = new Set(compilation.nodes.map((n) => n.id));
+    if (hoveredNodeId && !nextIds.has(hoveredNodeId)) hoveredNodeId = null;
+    if (hoveredEdgeId) {
+      const [src, tgt] = hoveredEdgeId.split("->");
+      if (!nextIds.has(src) || !nextIds.has(tgt)) {
+        hoveredEdgeId = null;
+        options?.onEdgeHover?.(null);
+      }
+    }
+    const survivingSelection = [...selectedNodeIds].filter((id) => nextIds.has(id));
+    selectedNodeIds = new Set(survivingSelection);
+    interactionManager?.setSelection(survivingSelection);
+    refreshTransientHighlight();
+    recomputeHighlight();
+    syncLegendActiveState();
+    reRunSearch();
+    focusTransition = null;
+    armFocus(performance.now());
+  }
+  function reRunSearch() {
+    const q = searchManager.getQuery();
+    if (q !== null) searchManager.search(q, positionedNodes);
+  }
+  function startUpdateTransitions(diff) {
+    const updateCfg = compilation.animation?.update ?? null;
+    const exitCfg = compilation.animation?.exit ?? null;
+    const reduced = prefersReducedMotion();
+    if (diff.enteringIds.length > 0 && updateCfg && !reduced) {
+      const entering = diff.enteringIds;
+      enterAlphaMap = new Map(entering.map((id) => [id, 0]));
+      const ease = resolveEase(updateCfg.ease);
+      const tween = createTween({
+        duration: updateCfg.duration,
+        ease,
+        apply: (t) => {
+          const q = Math.round(t * 8) / 8;
+          if (enterAlphaMap) for (const id of entering) enterAlphaMap.set(id, q);
+          needsRender = true;
+        },
+        onDone: () => {
+          enterAlphaMap = null;
+          needsRender = true;
+        }
+      });
+      scheduler.add(tween);
+    }
+    if ((diff.exitingNodes.length > 0 || diff.exitingEdges.length > 0) && exitCfg && !reduced) {
+      exitingGhosts = { nodes: diff.exitingNodes, edges: diff.exitingEdges, alpha: 1 };
+      const ease = resolveEase(exitCfg.ease);
+      const tween = createTween({
+        duration: exitCfg.duration,
+        ease,
+        apply: (t) => {
+          if (exitingGhosts) exitingGhosts.alpha = 1 - t;
+          needsRender = true;
+        },
+        onDone: () => {
+          exitingGhosts = null;
+          needsRender = true;
+        }
+      });
+      scheduler.add(tween);
+    }
+  }
+  function updateVisuals(newSpec) {
+    update(newSpec);
+  }
+  function teardownSimOnly() {
+    simulation?.destroy();
+    simulation = null;
+  }
+  function teardownSubsystems() {
+    scheduler.cancelAll();
+    activeFlight = null;
+    activeFollow = null;
+    entranceReveal = null;
+    entranceActive = false;
+    entranceProgress = 1;
+    entranceFitInFlight = false;
+    enterAlphaMap = null;
+    exitingGhosts = null;
+    if (animFrameId !== null) {
+      cancelAnimationFrame(animFrameId);
+      animFrameId = null;
+    }
+    if (cleanupKeyboard) {
+      cleanupKeyboard();
+      cleanupKeyboard = null;
+    }
+    interactionManager?.destroy();
+    interactionManager = null;
+    simulation?.destroy();
+    simulation = null;
+  }
+  function destroy() {
+    if (destroyed) return;
+    destroyed = true;
+    if (gestureTimeout !== null) {
+      clearTimeout(gestureTimeout);
+      gestureTimeout = null;
+    }
+    teardownSubsystems();
+    if (disconnectResize) {
+      disconnectResize();
+      disconnectResize = null;
+    }
+    legendController?.destroy();
+    legendController = null;
+    shell?.destroy();
+    shell = null;
+    tooltipManager = null;
+    canvas = null;
+    chromeEl = null;
+    legendEl = null;
+    renderer = null;
+  }
+  try {
+    compilation = compile();
+    shell = createGraphShell(container, currentSpec, compilation, options, warnOnce);
+    shell.renderChrome(compilation);
+  } catch (err) {
+    console.error("[viz] Graph mount failed:", err);
+    throw err;
+  }
+  if (compilation.numDimensions === 3) {
+    const factory = getGraphRenderer(3);
+    if (!factory) {
+      shell.destroy();
+      shell = null;
+      throw new Error(GRAPH_3D_NOT_REGISTERED_ERROR);
+    }
+    const ctx = {
+      shell,
+      spec: currentSpec,
+      compilation,
+      options,
+      compile: (next) => compile(next)
+    };
+    try {
+      return factory(ctx);
+    } catch (err) {
+      shell.destroy();
+      shell = null;
+      console.error("[viz] Graph mount failed:", err);
+      throw err;
+    }
+  }
+  chromeEl = shell.chromeEl;
+  legendEl = shell.legendEl;
+  tooltipManager = shell.tooltipManager;
+  try {
+    seedIds = new Set(compilation.seedNodeIds);
+    adjacencyMap = buildAdjacencyMap(compilation.edges);
+    buildDataMaps();
+    applyInitialHighlight();
+    createSurface();
+    initSimulation();
+    initInteraction();
+  } catch (err) {
+    console.error("[viz] Graph mount failed:", err);
+    throw err;
+  }
+  disconnectResize = shell.observeResize(() => {
+    doResize();
+  });
+  return {
+    update,
+    updateVisuals,
+    search,
+    clearSearch,
+    zoomToFit,
+    zoomToNode,
+    flyTo,
+    centerAt,
+    getCamera,
+    selectNode,
+    getSelectedNodes,
+    getSearchMatches,
+    highlight,
+    clearHighlight,
+    getHighlight,
+    getLegend,
+    setActiveCategories,
+    getActiveCategories,
+    resize: doResize,
+    destroy
+  };
+}
+
+export {
+  registerGraphRenderer,
+  GRAPH_3D_NOT_REGISTERED_ERROR,
+  ENTRANCE_STAGGER_MAX_NODES,
+  entranceOrder,
+  popScale,
+  popAlpha,
+  composeStandingFocus,
+  layerHoverFocus,
+  resolveHighlightTarget,
+  categoryHighlightSet,
+  createGraphLegend,
+  GraphSearchManager,
+  seedNodePositions,
+  diffGraphUpdate,
+  createGraph
+};
+//# sourceMappingURL=chunk-WOLX5EZT.js.map