@opendata-ai/openchart-vanilla 8.0.0-rc.2 → 8.0.0-rc.21

package/dist/index.js

@@ -1,31 +1,58 @@
+import {
+  isModuleNotFound,
+  paletteFromCanvas,
+  readCanvasSRGB,
+  resolveRepeat
+} from "./chunk-DCODCLWI.js";
 import {
   renderTileMapSVG
-} from "./chunk-W34KN7FD.js";
+} from "./chunk-2NAQRP66.js";
 import {
+  AnimationScheduler,
+  CANVAS_DEFAULT_UPDATE_MAX_MARKS,
+  DEFAULT_UPDATE_MAX_MARKS,
+  SpatialIndex,
+  VECTOR_EXPORT_MAX_POINTS,
   cancelAnimations,
   createChart,
   createMap,
   createMeasureText,
   createTextEditOverlay,
   createTooltipManager,
+  createTween,
   createYouDrawIt,
+  materializeCanvasModeSVG,
+  observeResize,
+  prefersReducedMotion,
+  quadtree,
+  resolveEase,
+  resolveFontFamily,
+  scheduleFontReload,
+  setupAnimationCleanup,
+  setupTableAnimationCleanup,
+  zoom_default
+} from "./chunk-KNT5AZ2O.js";
+import {
+  embedFonts,
+  ensureSVGDimensions,
   exportCSV,
   exportJPG,
   exportPNG,
   exportSVG,
   exportSVGWithFonts,
-  observeResize,
-  resolveFontFamily,
-  scheduleFontReload,
-  setupAnimationCleanup,
-  setupTableAnimationCleanup
-} from "./chunk-ENXSUXC5.js";
+  getSVGBackgroundColor,
+  getSVGDimensions,
+  rasterizeSVGToCanvas
+} from "./chunk-T32UHMZA.js";
 import {
   rectPathWithCorners,
   registerMarkRenderer,
   renderChartSVG,
   stampAnimationVars
-} from "./chunk-5EOV5JQZ.js";
+} from "./chunk-EKAUQAAX.js";
+import {
+  injectThemeStyleBlock
+} from "./chunk-RM5XS6NR.js";
 
 // src/barlist-mount.ts
 import { compileBarList } from "@opendata-ai/openchart-engine";
@@ -462,22 +489,480 @@ function createBarList(container, spec, options) {
   };
 }
 
+// src/export-sequence.ts
+function settleAnimation(spec) {
+  const authored = spec.animation;
+  const update = typeof authored === "object" && typeof authored.update === "object" ? { ...authored.update } : true;
+  return {
+    ...spec,
+    animation: { enter: false, update }
+  };
+}
+function mountOffscreen(spec, width, height, darkMode, themeConfig) {
+  const container = document.createElement("div");
+  container.style.cssText = `position:absolute;left:-99999px;top:0;width:${width}px;height:${height}px;visibility:hidden;`;
+  document.body.appendChild(container);
+  const settledSpec = settleAnimation(spec);
+  const instance = createChart(container, settledSpec, {
+    darkMode,
+    theme: themeConfig,
+    responsive: false
+  });
+  const svg = container.querySelector("svg");
+  if (!svg) {
+    instance.destroy();
+    container.remove();
+    throw new Error("exportSpecSequence: chart produced no SVG");
+  }
+  return { instance, svg, container };
+}
+async function exportSpecSequence(specs, options) {
+  if (specs.length === 0) {
+    throw new Error("exportSpecSequence requires at least one spec");
+  }
+  let gifenc;
+  try {
+    gifenc = await import("gifenc");
+  } catch (err) {
+    if (isModuleNotFound(err)) {
+      throw new Error(
+        "GIF export requires the optional 'gifenc' peer dependency. Install it: npm install gifenc"
+      );
+    }
+    throw new Error("GIF export failed to load the gifenc encoder", {
+      cause: err
+    });
+  }
+  const { GIFEncoder, quantize, applyPalette } = gifenc;
+  const dpi = options.dpi ?? 2;
+  const fps = options.fps ?? 25;
+  const dwellMs = options.dwellMs ?? 1200;
+  const frameDelay = Math.round(1e3 / fps);
+  const { width, height } = options;
+  const darkMode = options.darkMode ?? "off";
+  const themeConfig = options.theme;
+  const shouldEmbed = options.embedFonts ?? true;
+  const repeat = resolveRepeat(options.loop);
+  const { instance, svg, container } = mountOffscreen(
+    specs[0],
+    width,
+    height,
+    darkMode,
+    themeConfig
+  );
+  try {
+    const w = getSVGDimensions(svg).width || width;
+    const h = getSVGDimensions(svg).height || height;
+    const theme = () => {
+      const layout = instance.layout;
+      return layout && "theme" in layout ? layout.theme : void 0;
+    };
+    const bgColor = options.backgroundColor ?? getSVGBackgroundColor(svg, theme()?.colors.background);
+    const fillBackground = (ctx, cv) => {
+      ctx.fillStyle = bgColor;
+      ctx.fillRect(0, 0, cv.width, cv.height);
+    };
+    const prepareLiveSvg = async () => {
+      const live2 = container.querySelector("svg");
+      if (!live2) throw new Error("exportSpecSequence: live SVG vanished mid-sequence");
+      injectThemeStyleBlock(live2, theme());
+      if (shouldEmbed) await embedFonts(live2);
+      return live2;
+    };
+    const grab = async (live2) => {
+      const svgString = ensureSVGDimensions(exportSVG(live2), w, h);
+      return rasterizeSVGToCanvas(svgString, w, h, dpi, fillBackground);
+    };
+    const frames = [];
+    let live = await prepareLiveSvg();
+    frames.push({ canvas: await grab(live), delayMs: dwellMs });
+    for (let i = 1; i < specs.length; i++) {
+      const nextSpec = settleAnimation(specs[i]);
+      const handle = instance.beginManualUpdate(nextSpec);
+      live = await prepareLiveSvg();
+      if (handle) {
+        const totalMs = handle.totalMs;
+        for (let t = frameDelay; t < totalMs; t += frameDelay) {
+          handle.step(t);
+          frames.push({ canvas: await grab(live), delayMs: frameDelay });
+        }
+        handle.step(totalMs);
+        handle.cancel();
+      }
+      frames.push({ canvas: await grab(live), delayMs: dwellMs });
+    }
+    const globalPalette = paletteFromCanvas(frames[frames.length - 1].canvas, quantize);
+    const gif = GIFEncoder();
+    frames.forEach(({ canvas, delayMs }, i) => {
+      const index2 = applyPalette(readCanvasSRGB(canvas), globalPalette);
+      gif.writeFrame(index2, canvas.width, canvas.height, {
+        palette: globalPalette,
+        delay: delayMs,
+        // `repeat` writes the loop extension; only meaningful on the first frame.
+        ...i === 0 ? { repeat } : {}
+      });
+    });
+    gif.finish();
+    return new Blob([gif.bytes()], { type: "image/gif" });
+  } finally {
+    instance.destroy();
+    container.remove();
+  }
+}
+
 // src/graph/simulation-worker-url.ts
 function createSimulationWorker() {
   return new Worker(new URL("./simulation-worker.js", import.meta.url), { type: "module" });
 }
 
 // src/graph-mount.ts
-import { compileGraph } from "@opendata-ai/openchart-engine";
+import { buildEdgeTooltip, compileGraph } from "@opendata-ai/openchart-engine";
+
+// src/graph/zoom.ts
+var ZoomTransform = class _ZoomTransform {
+  constructor(x3, y3, k) {
+    this.x = x3;
+    this.y = y3;
+    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 = 300;
+var AUTO_MAX_MS = 1200;
+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 x3 = viewport.width / 2 - cx * k;
+  const y3 = viewport.height / 2 - cy * k;
+  return new ZoomTransform(x3, y3, 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 = zoom_default(fromView, targetView());
+  const resolvedDuration = resolveDuration(opts?.duration, interp.duration);
+  let startTime = null;
+  let finished = false;
+  function applyAt(t) {
+    if (isProvider) interp = zoom_default(fromView, targetView());
+    const view = interp(t);
+    if (view.some((v) => !Number.isFinite(v))) {
+      apply(viewToTransform(targetView(), viewport));
+      return;
+    }
+    apply(viewToTransform(view, viewport));
+  }
+  return {
+    tick(now2) {
+      if (finished) return false;
+      if (startTime === null) startTime = now2;
+      const raw = resolvedDuration <= 0 ? 1 : Math.min(1, (now2 - 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, index2, total, buckets = 8) {
+  const g = globalT <= 0 ? 0 : globalT >= 1 ? 1 : globalT;
+  const start = total > 0 ? index2 / 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((a2, b) => {
+    const ha = hashId(a2.id);
+    const hb = hashId(b.id);
+    return ha - hb || (a2.id < b.id ? -1 : a2.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 a2 = t / 0.6;
+  return a2 >= 1 ? 1 : a2 <= 0 ? 0 : a2;
+}
+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 = 8;
 var LABEL_FONT_MAX = 12;
 var EDGE_ALPHA_DEFAULT = 0.35;
 var EDGE_ALPHA_CONNECTED = 1;
-var EDGE_ALPHA_DIMMED = 0.05;
 var SEARCH_NON_MATCH_ALPHA = 0.15;
+var DEFAULT_DIM_OPACITY = 0.15;
+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) {
+  if (!focus.hasActive) return "default";
+  return focus.connected.has(node.id) ? "connected" : "dimmed";
+}
+function edgeTierAlpha(tier, dimOpacity) {
+  switch (tier) {
+    case "connected":
+      return EDGE_ALPHA_CONNECTED;
+    case "dimmed":
+      return dimOpacity / 3;
+    default:
+      return EDGE_ALPHA_DEFAULT;
+  }
+}
+function nodeTierAlpha(tier, dimOpacity) {
+  switch (tier) {
+    case "dimmed":
+      return dimOpacity;
+    default:
+      return 1;
+  }
+}
+function lerp(a2, b, t) {
+  return a2 + (b - a2) * 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.15;
@@ -544,18 +1029,12 @@ var GraphCanvasRenderer = class {
       searchMatches,
       isGesturing
     } = state;
-    const hasActiveNode = hoveredNodeId !== null || selectedNodeIds.size > 0;
-    const activeNodeIds = /* @__PURE__ */ new Set();
-    if (hoveredNodeId) activeNodeIds.add(hoveredNodeId);
-    for (const id of selectedNodeIds) activeNodeIds.add(id);
-    const connectedNodeIds = /* @__PURE__ */ new Set();
-    for (const id of activeNodeIds) {
-      connectedNodeIds.add(id);
-      const neighbors = adjacencyMap.get(id);
-      if (neighbors) {
-        for (const nid of neighbors) connectedNodeIds.add(nid);
-      }
-    }
+    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));
@@ -572,14 +1051,34 @@ var GraphCanvasRenderer = class {
     }
     ctx.translate(transform.x, transform.y);
     ctx.scale(transform.k, transform.k);
-    this.drawEdgesBatched(
-      ctx,
-      visibleEdges,
-      hasActiveNode,
-      connectedNodeIds,
-      isGesturing ? null : searchMatches,
-      hoveredEdgeId
-    );
+    if (state.exiting && state.exiting.alpha > 0) {
+      this.drawGhosts(ctx, state.exiting, rect);
+    }
+    if (crossfade && visibleEdges.length <= CROSSFADE_MAX_EDGES) {
+      this.drawEdgesCrossfade(
+        ctx,
+        visibleEdges,
+        crossfade.prev,
+        crossfade.next,
+        crossfade.t,
+        dimOpacity,
+        isGesturing ? null : searchMatches,
+        hoveredEdgeId,
+        entrance,
+        enterAlphaFor
+      );
+    } else {
+      this.drawEdgesBatched(
+        ctx,
+        visibleEdges,
+        nextFocus,
+        dimOpacity,
+        isGesturing ? null : searchMatches,
+        hoveredEdgeId,
+        entrance,
+        enterAlphaFor
+      );
+    }
     this.drawNodesBatched(
       ctx,
       visibleNodes,
@@ -588,7 +1087,13 @@ var GraphCanvasRenderer = class {
       isGesturing ? null : searchMatches,
       showGlow,
       theme,
-      minRadius
+      minRadius,
+      nextFocus,
+      dimOpacity,
+      crossfade,
+      state.hoverRadiusScale,
+      entrance,
+      enterAlphaFor
     );
     if (!isGesturing) {
       this.drawLabels(
@@ -599,7 +1104,9 @@ var GraphCanvasRenderer = class {
         selectedNodeIds,
         searchMatches,
         transform.k,
-        theme
+        theme,
+        entrance,
+        enterAlphaFor
       );
     }
     ctx.restore();
@@ -629,10 +1136,12 @@ var GraphCanvasRenderer = class {
   // -------------------------------------------------------------------------
   // Batched edge drawing
   // -------------------------------------------------------------------------
-  drawEdgesBatched(ctx, edges, hasActiveNode, connectedNodeIds, searchMatches, hoveredEdgeId) {
-    const dimmedEdges = [];
-    const defaultEdges = [];
-    const connectedEdges = [];
+  drawEdgesBatched(ctx, edges, focus, dimOpacity, searchMatches, hoveredEdgeId, entrance, enterAlphaFor) {
+    const buckets = {
+      dimmed: [],
+      default: [],
+      connected: []
+    };
     let hoveredEdge = null;
     for (const edge of edges) {
       const edgeId = `${edge.source}->${edge.target}`;
@@ -640,58 +1149,109 @@ var GraphCanvasRenderer = class {
         hoveredEdge = edge;
         continue;
       }
-      const isConnected = hasActiveNode && connectedNodeIds.has(edge.source) && connectedNodeIds.has(edge.target);
-      const isDimmed = hasActiveNode && !isConnected;
-      if (isConnected) {
-        connectedEdges.push(edge);
-      } else if (isDimmed) {
-        dimmedEdges.push(edge);
-      } else {
-        defaultEdges.push(edge);
-      }
-    }
-    this.drawEdgeGroupBatched(ctx, dimmedEdges, EDGE_ALPHA_DIMMED, searchMatches);
-    this.drawEdgeGroupBatched(ctx, defaultEdges, EDGE_ALPHA_DEFAULT, searchMatches);
-    this.drawEdgeGroupBatched(ctx, connectedEdges, EDGE_ALPHA_CONNECTED, searchMatches);
-    if (hoveredEdge) {
-      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;
+      buckets[edgeTier(edge, focus)].push(edge);
     }
+    const ea = entrance ? entrance.edgeAlpha : 1;
+    this.drawEdgeGroupBatched(
+      ctx,
+      buckets.dimmed,
+      edgeTierAlpha("dimmed", dimOpacity) * ea,
+      searchMatches,
+      enterAlphaFor
+    );
+    this.drawEdgeGroupBatched(
+      ctx,
+      buckets.default,
+      EDGE_ALPHA_DEFAULT * 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, 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), edgeTierAlpha(nextTier, dimOpacity), t) * ea;
+      return { alpha, bucket };
+    }).sort((a2, b) => a2.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) {
+  drawEdgeGroupBatched(ctx, edges, alpha, searchMatches, enterAlphaFor) {
     if (edges.length === 0) return;
     const groups = /* @__PURE__ */ new Map();
     for (const edge of edges) {
-      const key = `${edge.stroke}|${edge.strokeWidth}|${edge.style}`;
+      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 = [];
+        group = { edges: [], enter };
         groups.set(key, group);
       }
-      group.push(edge);
+      group.edges.push(edge);
     }
-    for (const [, group] of groups) {
+    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 = alpha;
+        ctx.globalAlpha = groupAlpha;
         ctx.beginPath();
         for (const edge of group) {
           ctx.moveTo(edge.sourceX, edge.sourceY);
@@ -699,7 +1259,7 @@ var GraphCanvasRenderer = class {
         }
         ctx.stroke();
       } else {
-        ctx.globalAlpha = alpha;
+        ctx.globalAlpha = groupAlpha;
         ctx.beginPath();
         let hasMatched = false;
         const nonMatchPath = [];
@@ -716,7 +1276,7 @@ var GraphCanvasRenderer = class {
         }
         if (hasMatched) ctx.stroke();
         if (nonMatchPath.length > 0) {
-          ctx.globalAlpha = SEARCH_NON_MATCH_ALPHA * alpha;
+          ctx.globalAlpha = SEARCH_NON_MATCH_ALPHA * groupAlpha;
           ctx.beginPath();
           for (const edge of nonMatchPath) {
             ctx.moveTo(edge.sourceX, edge.sourceY);
@@ -732,147 +1292,114 @@ var GraphCanvasRenderer = class {
   // -------------------------------------------------------------------------
   // Batched node drawing
   // -------------------------------------------------------------------------
-  drawNodesBatched(ctx, nodes, hoveredNodeId, selectedNodeIds, searchMatches, showGlow, theme, minRadius) {
+  drawNodesBatched(ctx, nodes, hoveredNodeId, selectedNodeIds, searchMatches, showGlow, theme, minRadius, nextFocus, dimOpacity, crossfade, hoverRadiusScale, entrance, enterAlphaFor) {
+    const focusAlpha = (node) => {
+      if (crossfade) {
+        return lerp(
+          nodeTierAlpha(nodeTier(node, crossfade.prev), dimOpacity),
+          nodeTierAlpha(nodeTier(node, crossfade.next), dimOpacity),
+          crossfade.t
+        );
+      }
+      return nodeTierAlpha(nodeTier(node, nextFocus), 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)) {
+      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);
-    if (showGlow) {
+    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) {
-      let group = fillGroups.get(node.fill);
+      const alpha = effectiveAlpha(node);
+      const key = `${node.fill}|${alpha.toFixed(3)}`;
+      let group = fillGroups.get(key);
       if (!group) {
-        group = [];
-        fillGroups.set(node.fill, group);
+        group = { fill: node.fill, alpha, nodes: [] };
+        fillGroups.set(key, group);
       }
-      group.push(node);
+      group.nodes.push(node);
     }
-    if (!searchMatches) {
-      ctx.globalAlpha = 1;
-      for (const [fill, group] of fillGroups) {
-        ctx.fillStyle = fill;
-        ctx.beginPath();
-        for (const node of group) {
-          const nr = r(node);
-          ctx.moveTo(node.x + nr, node.y);
-          ctx.arc(node.x, node.y, nr, 0, TWO_PI);
-        }
-        ctx.fill();
-      }
-    } else {
-      for (const [fill, group] of fillGroups) {
-        ctx.fillStyle = fill;
-        ctx.globalAlpha = 1;
-        ctx.beginPath();
-        let hasMatched = false;
-        const dimmedNodes = [];
-        for (const node of group) {
-          if (searchMatches.has(node.id)) {
-            const nr = r(node);
-            ctx.moveTo(node.x + nr, node.y);
-            ctx.arc(node.x, node.y, nr, 0, TWO_PI);
-            hasMatched = true;
-          } else {
-            dimmedNodes.push(node);
-          }
-        }
-        if (hasMatched) ctx.fill();
-        if (dimmedNodes.length > 0) {
-          ctx.globalAlpha = SEARCH_NON_MATCH_ALPHA;
-          ctx.beginPath();
-          for (const node of dimmedNodes) {
-            const nr = r(node);
-            ctx.moveTo(node.x + nr, node.y);
-            ctx.arc(node.x, node.y, nr, 0, TWO_PI);
-          }
-          ctx.fill();
-        }
+    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 key = `${node.stroke}|${node.strokeWidth}`;
+      const alpha = effectiveAlpha(node);
+      const key = `${node.stroke}|${node.strokeWidth}|${alpha.toFixed(3)}`;
       let group = strokeGroups.get(key);
       if (!group) {
-        group = [];
+        group = { stroke: node.stroke, width: node.strokeWidth, alpha, nodes: [] };
         strokeGroups.set(key, group);
       }
-      group.push(node);
+      group.nodes.push(node);
     }
-    for (const [key, group] of strokeGroups) {
-      const [stroke, widthStr] = key.split("|");
+    for (const { stroke, width, alpha, nodes: group } of strokeGroups.values()) {
       ctx.strokeStyle = stroke;
-      ctx.lineWidth = parseFloat(widthStr);
-      if (!searchMatches) {
-        ctx.globalAlpha = 1;
-        ctx.beginPath();
-        for (const node of group) {
-          const nr = r(node);
-          ctx.moveTo(node.x + nr, node.y);
-          ctx.arc(node.x, node.y, nr, 0, TWO_PI);
-        }
-        ctx.stroke();
-      } else {
-        ctx.globalAlpha = 1;
-        ctx.beginPath();
-        let hasMatched = false;
-        const dimmedNodes = [];
-        for (const node of group) {
-          if (searchMatches.has(node.id)) {
-            const nr = r(node);
-            ctx.moveTo(node.x + nr, node.y);
-            ctx.arc(node.x, node.y, nr, 0, TWO_PI);
-            hasMatched = true;
-          } else {
-            dimmedNodes.push(node);
-          }
-        }
-        if (hasMatched) ctx.stroke();
-        if (dimmedNodes.length > 0) {
-          ctx.globalAlpha = SEARCH_NON_MATCH_ALPHA;
-          ctx.beginPath();
-          for (const node of dimmedNodes) {
-            const nr = r(node);
-            ctx.moveTo(node.x + nr, node.y);
-            ctx.arc(node.x, node.y, nr, 0, TWO_PI);
-          }
-          ctx.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 radius = isHovered ? baseRadius * 1.15 : baseRadius;
+      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(node.x, node.y, radius * GLOW_RADIUS_MULTIPLIER, 0, TWO_PI);
+        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(node.x, node.y, radius, 0, TWO_PI);
-      ctx.fillStyle = isHovered ? brighten(node.fill) : node.fill;
+      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(node.x, node.y, radius + 3, 0, TWO_PI);
+        ctx.arc(nx, ny, radius + 3, 0, TWO_PI);
         ctx.strokeStyle = theme.colors.categorical[0] ?? "#3b82f6";
         ctx.lineWidth = 2;
         ctx.stroke();
@@ -908,7 +1435,8 @@ var GraphCanvasRenderer = class {
   // -------------------------------------------------------------------------
   // Labels (drawn individually, skipped during gestures)
   // -------------------------------------------------------------------------
-  drawLabels(ctx, nodes, threshold, hoveredNodeId, selectedNodeIds, searchMatches, zoom, theme) {
+  drawLabels(ctx, nodes, threshold, 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}`;
@@ -921,12 +1449,12 @@ var GraphCanvasRenderer = class {
       const forced = isHovered || isSelected;
       const dimmed = searchMatches !== null && !searchMatches.has(node.id);
       if (!forced && node.labelPriority < threshold) continue;
-      ctx.globalAlpha = dimmed ? SEARCH_NON_MATCH_ALPHA : 1;
+      ctx.globalAlpha = (dimmed ? SEARCH_NON_MATCH_ALPHA : 1) * la * enterAlphaFor(node.id);
       const labelY = node.y + node.radius + 3;
       if (theme.colors.background !== "transparent") {
         ctx.strokeStyle = theme.colors.background;
       } else {
-        ctx.strokeStyle = isLightColor(theme.colors.text) ? "rgba(0, 0, 0, 0.7)" : "rgba(255, 255, 255, 0.85)";
+        ctx.strokeStyle = theme.isDark ? "rgba(0, 0, 0, 0.7)" : "rgba(255, 255, 255, 0.85)";
       }
       ctx.lineWidth = 3;
       ctx.lineJoin = "round";
@@ -937,6 +1465,59 @@ var GraphCanvasRenderer = class {
     }
     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) {
+    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 = EDGE_ALPHA_DEFAULT * 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*\)$/);
@@ -956,110 +1537,102 @@ function brighten(color) {
   }
   return color;
 }
-function isLightColor(color) {
-  const hex = color.replace("#", "");
-  const full = hex.length === 3 ? hex.split("").map((c2) => c2 + c2).join("") : hex;
-  if (full.length !== 6) return false;
-  const r = parseInt(full.slice(0, 2), 16) / 255;
-  const g = parseInt(full.slice(2, 4), 16) / 255;
-  const b = parseInt(full.slice(4, 6), 16) / 255;
-  const toLinear = (c2) => c2 <= 0.03928 ? c2 / 12.92 : ((c2 + 0.055) / 1.055) ** 2.4;
-  return 0.2126 * toLinear(r) + 0.7152 * toLinear(g) + 0.0722 * toLinear(b) > 0.5;
-}
 
-// src/graph/zoom.ts
-var ZoomTransform = class _ZoomTransform {
-  constructor(x3, y3, k) {
-    this.x = x3;
-    this.y = y3;
-    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);
+// src/graph/focus-transition.ts
+function focusSnapshotsEqual(a2, b) {
+  return a2.hasActive === b.hasActive && setsEqual(a2.connected, b.connected) && nullableSetsEqual(a2.searchMatches, b.searchMatches) && setsEqual(a2.selected, b.selected);
+}
+function setsEqual(a2, b) {
+  if (a2.size !== b.size) return false;
+  for (const v of a2) if (!b.has(v)) return false;
+  return true;
+}
+function nullableSetsEqual(a2, b) {
+  if (a2 === null || b === null) return a2 === b;
+  return setsEqual(a2, b);
+}
+var FocusTransition = class {
+  prev;
+  next;
+  startTime;
+  duration;
+  ease;
+  constructor(initial, duration, ease, now2) {
+    this.prev = initial;
+    this.next = initial;
+    this.startTime = now2;
+    this.duration = Math.max(0, duration);
+    this.ease = ease;
   }
   /**
-   * 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.
+   * 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`.
    */
-  static fitBounds(nodes, canvasW, canvasH, padding = 40) {
-    if (nodes.length === 0) {
-      return { transform: _ZoomTransform.identity(), contentHeight: canvasH };
-    }
-    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, canvasH / 2 - minY, 1),
-        contentHeight: padding * 2
-      };
-    }
-    if (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 - 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 = canvasH / 2 - cy * k;
-    const contentHeight = graphH * k + padding * 2;
-    return {
-      transform: new _ZoomTransform(tx, ty, k),
-      contentHeight
-    };
-  }
-  /** Identity transform (no pan, no zoom). */
-  static identity() {
-    return new _ZoomTransform(0, 0, 1);
+  retarget(target, now2) {
+    if (focusSnapshotsEqual(target, this.next)) return;
+    const p = this.rawProgress(now2);
+    this.prev = p < 0.5 ? this.prev : this.next;
+    this.next = target;
+    this.startTime = now2;
+  }
+  /** Raw (un-eased) 0..1 progress. */
+  rawProgress(now2) {
+    if (this.duration <= 0) return 1;
+    return Math.min(1, Math.max(0, (now2 - this.startTime) / this.duration));
+  }
+  /** Eased 0..1 progress toward `next`. */
+  progress(now2) {
+    return this.ease(this.rawProgress(now2));
+  }
+  /** True once the transition has fully settled onto `next`. */
+  isSettled(now2) {
+    return this.rawProgress(now2) >= 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(a2, b) {
+  const [small, large] = a2.size <= b.size ? [a2, b] : [b, a2];
+  const out = /* @__PURE__ */ new Set();
+  for (const v of small) if (large.has(v)) out.add(v);
+  return out;
+}
 
 // src/graph/interaction.ts
 var ZOOM_MIN = 0.05;
@@ -1121,6 +1694,15 @@ var GraphInteractionManager = class {
   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);
@@ -1165,6 +1747,10 @@ var GraphInteractionManager = class {
   }
   onMouseMove(e) {
     const { x: x3, y: y3 } = this.canvasXY(e);
+    if (this.callbacks.onPointerMove) {
+      const gp = this.transform.screenToGraph(x3, y3);
+      this.callbacks.onPointerMove(gp.x, gp.y);
+    }
     if (this.dragState) {
       const graph = this.transform.screenToGraph(x3, y3);
       if (!this.dragState.started) {
@@ -1223,6 +1809,7 @@ var GraphInteractionManager = class {
   onMouseLeave(_e) {
     this.callbacks.onHoverChange(null);
     this.canvas.style.cursor = "default";
+    this.callbacks.onPointerLeave?.();
     if (this.panState) {
       this.panState = null;
     }
@@ -1455,9 +2042,76 @@ function attachGraphKeyboardNav(options) {
   };
 }
 
+// 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.
@@ -1466,8 +2120,10 @@ var GraphSearchManager = class {
     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();
@@ -1485,14 +2141,53 @@ var GraphSearchManager = class {
    */
   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);
+  }
+}
+
 // ../../node_modules/.bun/d3-force@3.0.0/node_modules/d3-force/src/center.js
 function center_default(x3, y3) {
   var nodes, strength = 1;
@@ -1522,301 +2217,6 @@ function center_default(x3, y3) {
   return force;
 }
 
-// ../../node_modules/.bun/d3-quadtree@3.0.1/node_modules/d3-quadtree/src/add.js
-function add_default(d) {
-  const x3 = +this._x.call(null, d), y3 = +this._y.call(null, d);
-  return add(this.cover(x3, y3), x3, y3, d);
-}
-function add(tree, x3, y3, d) {
-  if (isNaN(x3) || isNaN(y3)) return tree;
-  var parent, node = tree._root, leaf = { data: d }, x0 = tree._x0, y0 = tree._y0, x1 = tree._x1, y1 = tree._y1, xm, ym, xp, yp, right, bottom, i, j;
-  if (!node) return tree._root = leaf, tree;
-  while (node.length) {
-    if (right = x3 >= (xm = (x0 + x1) / 2)) x0 = xm;
-    else x1 = xm;
-    if (bottom = y3 >= (ym = (y0 + y1) / 2)) y0 = ym;
-    else y1 = ym;
-    if (parent = node, !(node = node[i = bottom << 1 | right])) return parent[i] = leaf, tree;
-  }
-  xp = +tree._x.call(null, node.data);
-  yp = +tree._y.call(null, node.data);
-  if (x3 === xp && y3 === yp) return leaf.next = node, parent ? parent[i] = leaf : tree._root = leaf, tree;
-  do {
-    parent = parent ? parent[i] = new Array(4) : tree._root = new Array(4);
-    if (right = x3 >= (xm = (x0 + x1) / 2)) x0 = xm;
-    else x1 = xm;
-    if (bottom = y3 >= (ym = (y0 + y1) / 2)) y0 = ym;
-    else y1 = ym;
-  } while ((i = bottom << 1 | right) === (j = (yp >= ym) << 1 | xp >= xm));
-  return parent[j] = node, parent[i] = leaf, tree;
-}
-function addAll(data) {
-  var d, i, n = data.length, x3, y3, xz = new Array(n), yz = new Array(n), x0 = Infinity, y0 = Infinity, x1 = -Infinity, y1 = -Infinity;
-  for (i = 0; i < n; ++i) {
-    if (isNaN(x3 = +this._x.call(null, d = data[i])) || isNaN(y3 = +this._y.call(null, d))) continue;
-    xz[i] = x3;
-    yz[i] = y3;
-    if (x3 < x0) x0 = x3;
-    if (x3 > x1) x1 = x3;
-    if (y3 < y0) y0 = y3;
-    if (y3 > y1) y1 = y3;
-  }
-  if (x0 > x1 || y0 > y1) return this;
-  this.cover(x0, y0).cover(x1, y1);
-  for (i = 0; i < n; ++i) {
-    add(this, xz[i], yz[i], data[i]);
-  }
-  return this;
-}
-
-// ../../node_modules/.bun/d3-quadtree@3.0.1/node_modules/d3-quadtree/src/cover.js
-function cover_default(x3, y3) {
-  if (isNaN(x3 = +x3) || isNaN(y3 = +y3)) return this;
-  var x0 = this._x0, y0 = this._y0, x1 = this._x1, y1 = this._y1;
-  if (isNaN(x0)) {
-    x1 = (x0 = Math.floor(x3)) + 1;
-    y1 = (y0 = Math.floor(y3)) + 1;
-  } else {
-    var z = x1 - x0 || 1, node = this._root, parent, i;
-    while (x0 > x3 || x3 >= x1 || y0 > y3 || y3 >= y1) {
-      i = (y3 < y0) << 1 | x3 < x0;
-      parent = new Array(4), parent[i] = node, node = parent, z *= 2;
-      switch (i) {
-        case 0:
-          x1 = x0 + z, y1 = y0 + z;
-          break;
-        case 1:
-          x0 = x1 - z, y1 = y0 + z;
-          break;
-        case 2:
-          x1 = x0 + z, y0 = y1 - z;
-          break;
-        case 3:
-          x0 = x1 - z, y0 = y1 - z;
-          break;
-      }
-    }
-    if (this._root && this._root.length) this._root = node;
-  }
-  this._x0 = x0;
-  this._y0 = y0;
-  this._x1 = x1;
-  this._y1 = y1;
-  return this;
-}
-
-// ../../node_modules/.bun/d3-quadtree@3.0.1/node_modules/d3-quadtree/src/data.js
-function data_default() {
-  var data = [];
-  this.visit(function(node) {
-    if (!node.length) do
-      data.push(node.data);
-    while (node = node.next);
-  });
-  return data;
-}
-
-// ../../node_modules/.bun/d3-quadtree@3.0.1/node_modules/d3-quadtree/src/extent.js
-function extent_default(_) {
-  return arguments.length ? this.cover(+_[0][0], +_[0][1]).cover(+_[1][0], +_[1][1]) : isNaN(this._x0) ? void 0 : [[this._x0, this._y0], [this._x1, this._y1]];
-}
-
-// ../../node_modules/.bun/d3-quadtree@3.0.1/node_modules/d3-quadtree/src/quad.js
-function quad_default(node, x0, y0, x1, y1) {
-  this.node = node;
-  this.x0 = x0;
-  this.y0 = y0;
-  this.x1 = x1;
-  this.y1 = y1;
-}
-
-// ../../node_modules/.bun/d3-quadtree@3.0.1/node_modules/d3-quadtree/src/find.js
-function find_default(x3, y3, radius) {
-  var data, x0 = this._x0, y0 = this._y0, x1, y1, x22, y22, x32 = this._x1, y32 = this._y1, quads = [], node = this._root, q, i;
-  if (node) quads.push(new quad_default(node, x0, y0, x32, y32));
-  if (radius == null) radius = Infinity;
-  else {
-    x0 = x3 - radius, y0 = y3 - radius;
-    x32 = x3 + radius, y32 = y3 + radius;
-    radius *= radius;
-  }
-  while (q = quads.pop()) {
-    if (!(node = q.node) || (x1 = q.x0) > x32 || (y1 = q.y0) > y32 || (x22 = q.x1) < x0 || (y22 = q.y1) < y0) continue;
-    if (node.length) {
-      var xm = (x1 + x22) / 2, ym = (y1 + y22) / 2;
-      quads.push(
-        new quad_default(node[3], xm, ym, x22, y22),
-        new quad_default(node[2], x1, ym, xm, y22),
-        new quad_default(node[1], xm, y1, x22, ym),
-        new quad_default(node[0], x1, y1, xm, ym)
-      );
-      if (i = (y3 >= ym) << 1 | x3 >= xm) {
-        q = quads[quads.length - 1];
-        quads[quads.length - 1] = quads[quads.length - 1 - i];
-        quads[quads.length - 1 - i] = q;
-      }
-    } else {
-      var dx = x3 - +this._x.call(null, node.data), dy = y3 - +this._y.call(null, node.data), d2 = dx * dx + dy * dy;
-      if (d2 < radius) {
-        var d = Math.sqrt(radius = d2);
-        x0 = x3 - d, y0 = y3 - d;
-        x32 = x3 + d, y32 = y3 + d;
-        data = node.data;
-      }
-    }
-  }
-  return data;
-}
-
-// ../../node_modules/.bun/d3-quadtree@3.0.1/node_modules/d3-quadtree/src/remove.js
-function remove_default(d) {
-  if (isNaN(x3 = +this._x.call(null, d)) || isNaN(y3 = +this._y.call(null, d))) return this;
-  var parent, node = this._root, retainer, previous, next, x0 = this._x0, y0 = this._y0, x1 = this._x1, y1 = this._y1, x3, y3, xm, ym, right, bottom, i, j;
-  if (!node) return this;
-  if (node.length) while (true) {
-    if (right = x3 >= (xm = (x0 + x1) / 2)) x0 = xm;
-    else x1 = xm;
-    if (bottom = y3 >= (ym = (y0 + y1) / 2)) y0 = ym;
-    else y1 = ym;
-    if (!(parent = node, node = node[i = bottom << 1 | right])) return this;
-    if (!node.length) break;
-    if (parent[i + 1 & 3] || parent[i + 2 & 3] || parent[i + 3 & 3]) retainer = parent, j = i;
-  }
-  while (node.data !== d) if (!(previous = node, node = node.next)) return this;
-  if (next = node.next) delete node.next;
-  if (previous) return next ? previous.next = next : delete previous.next, this;
-  if (!parent) return this._root = next, this;
-  next ? parent[i] = next : delete parent[i];
-  if ((node = parent[0] || parent[1] || parent[2] || parent[3]) && node === (parent[3] || parent[2] || parent[1] || parent[0]) && !node.length) {
-    if (retainer) retainer[j] = node;
-    else this._root = node;
-  }
-  return this;
-}
-function removeAll(data) {
-  for (var i = 0, n = data.length; i < n; ++i) this.remove(data[i]);
-  return this;
-}
-
-// ../../node_modules/.bun/d3-quadtree@3.0.1/node_modules/d3-quadtree/src/root.js
-function root_default() {
-  return this._root;
-}
-
-// ../../node_modules/.bun/d3-quadtree@3.0.1/node_modules/d3-quadtree/src/size.js
-function size_default() {
-  var size = 0;
-  this.visit(function(node) {
-    if (!node.length) do
-      ++size;
-    while (node = node.next);
-  });
-  return size;
-}
-
-// ../../node_modules/.bun/d3-quadtree@3.0.1/node_modules/d3-quadtree/src/visit.js
-function visit_default(callback) {
-  var quads = [], q, node = this._root, child, x0, y0, x1, y1;
-  if (node) quads.push(new quad_default(node, this._x0, this._y0, this._x1, this._y1));
-  while (q = quads.pop()) {
-    if (!callback(node = q.node, x0 = q.x0, y0 = q.y0, x1 = q.x1, y1 = q.y1) && node.length) {
-      var xm = (x0 + x1) / 2, ym = (y0 + y1) / 2;
-      if (child = node[3]) quads.push(new quad_default(child, xm, ym, x1, y1));
-      if (child = node[2]) quads.push(new quad_default(child, x0, ym, xm, y1));
-      if (child = node[1]) quads.push(new quad_default(child, xm, y0, x1, ym));
-      if (child = node[0]) quads.push(new quad_default(child, x0, y0, xm, ym));
-    }
-  }
-  return this;
-}
-
-// ../../node_modules/.bun/d3-quadtree@3.0.1/node_modules/d3-quadtree/src/visitAfter.js
-function visitAfter_default(callback) {
-  var quads = [], next = [], q;
-  if (this._root) quads.push(new quad_default(this._root, this._x0, this._y0, this._x1, this._y1));
-  while (q = quads.pop()) {
-    var node = q.node;
-    if (node.length) {
-      var child, x0 = q.x0, y0 = q.y0, x1 = q.x1, y1 = q.y1, xm = (x0 + x1) / 2, ym = (y0 + y1) / 2;
-      if (child = node[0]) quads.push(new quad_default(child, x0, y0, xm, ym));
-      if (child = node[1]) quads.push(new quad_default(child, xm, y0, x1, ym));
-      if (child = node[2]) quads.push(new quad_default(child, x0, ym, xm, y1));
-      if (child = node[3]) quads.push(new quad_default(child, xm, ym, x1, y1));
-    }
-    next.push(q);
-  }
-  while (q = next.pop()) {
-    callback(q.node, q.x0, q.y0, q.x1, q.y1);
-  }
-  return this;
-}
-
-// ../../node_modules/.bun/d3-quadtree@3.0.1/node_modules/d3-quadtree/src/x.js
-function defaultX(d) {
-  return d[0];
-}
-function x_default(_) {
-  return arguments.length ? (this._x = _, this) : this._x;
-}
-
-// ../../node_modules/.bun/d3-quadtree@3.0.1/node_modules/d3-quadtree/src/y.js
-function defaultY(d) {
-  return d[1];
-}
-function y_default(_) {
-  return arguments.length ? (this._y = _, this) : this._y;
-}
-
-// ../../node_modules/.bun/d3-quadtree@3.0.1/node_modules/d3-quadtree/src/quadtree.js
-function quadtree(nodes, x3, y3) {
-  var tree = new Quadtree(x3 == null ? defaultX : x3, y3 == null ? defaultY : y3, NaN, NaN, NaN, NaN);
-  return nodes == null ? tree : tree.addAll(nodes);
-}
-function Quadtree(x3, y3, x0, y0, x1, y1) {
-  this._x = x3;
-  this._y = y3;
-  this._x0 = x0;
-  this._y0 = y0;
-  this._x1 = x1;
-  this._y1 = y1;
-  this._root = void 0;
-}
-function leaf_copy(leaf) {
-  var copy = { data: leaf.data }, next = copy;
-  while (leaf = leaf.next) next = next.next = { data: leaf.data };
-  return copy;
-}
-var treeProto = quadtree.prototype = Quadtree.prototype;
-treeProto.copy = function() {
-  var copy = new Quadtree(this._x, this._y, this._x0, this._y0, this._x1, this._y1), node = this._root, nodes, child;
-  if (!node) return copy;
-  if (!node.length) return copy._root = leaf_copy(node), copy;
-  nodes = [{ source: node, target: copy._root = new Array(4) }];
-  while (node = nodes.pop()) {
-    for (var i = 0; i < 4; ++i) {
-      if (child = node.source[i]) {
-        if (child.length) nodes.push({ source: child, target: node.target[i] = new Array(4) });
-        else node.target[i] = leaf_copy(child);
-      }
-    }
-  }
-  return copy;
-};
-treeProto.add = add_default;
-treeProto.addAll = addAll;
-treeProto.cover = cover_default;
-treeProto.data = data_default;
-treeProto.extent = extent_default;
-treeProto.find = find_default;
-treeProto.remove = remove_default;
-treeProto.removeAll = removeAll;
-treeProto.root = root_default;
-treeProto.size = size_default;
-treeProto.visit = visit_default;
-treeProto.visitAfter = visitAfter_default;
-treeProto.x = x_default;
-treeProto.y = y_default;
-
 // ../../node_modules/.bun/d3-force@3.0.0/node_modules/d3-force/src/constant.js
 function constant_default(x3) {
   return function() {
@@ -2354,7 +2754,7 @@ function manyBody_default() {
 }
 
 // ../../node_modules/.bun/d3-force@3.0.0/node_modules/d3-force/src/x.js
-function x_default2(x3) {
+function x_default(x3) {
   var strength = constant_default(0.1), nodes, strengths, xz;
   if (typeof x3 !== "function") x3 = constant_default(x3 == null ? 0 : +x3);
   function force(alpha) {
@@ -2385,7 +2785,7 @@ function x_default2(x3) {
 }
 
 // ../../node_modules/.bun/d3-force@3.0.0/node_modules/d3-force/src/y.js
-function y_default2(y3) {
+function y_default(y3) {
   var strength = constant_default(0.1), nodes, strengths, yz;
   if (typeof y3 !== "function") y3 = constant_default(y3 == null ? 0 : +y3);
   function force(alpha) {
@@ -2416,8 +2816,15 @@ function y_default2(y3) {
 }
 
 // src/graph/simulation.ts
-var SYNC_MAX_TICKS = 300;
 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();
@@ -2444,6 +2851,24 @@ function forceCluster(nodes, strength) {
     }
   };
 }
+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;
@@ -2453,18 +2878,36 @@ var SimulationManager = class _SimulationManager {
   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) {
+  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);
@@ -2491,36 +2934,90 @@ var SimulationManager = class _SimulationManager {
       this.runSyncTicks();
     }
   }
-  /** Pin a node to fixed x/y coordinates. */
-  pinNode(id, x3, y3) {
+  /**
+   * 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, x3, y3, alphaTarget) {
     if (this.destroyed) return;
     if (this.worker) {
-      this.worker.postMessage({ type: "pin", nodeId: id, x: x3, y: y3 });
+      this.worker.postMessage(
+        alphaTarget != null ? { type: "pin", nodeId: id, x: x3, y: y3, alphaTarget } : { type: "pin", nodeId: id, x: x3, y: y3 }
+      );
     } else {
       const node = this.syncNodeMap.get(id);
       if (node) {
         node.fx = x3;
         node.fy = y3;
       }
+      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. */
-  unpinNode(id) {
+  /**
+   * 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({ type: "unpin", nodeId: id });
+      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 (this.syncSim && this.syncSim.alpha() < 0.1) {
+      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(x3, y3, active) {
+    if (this.destroyed) return;
+    if (this.worker) {
+      this.worker.postMessage({ type: "pointer", x: x3, y: y3, active });
+    } else {
+      if (this.pointer.radius <= 0) return;
+      this.pointer.x = x3;
+      this.pointer.y = y3;
+      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, x3, y3) {
     if (this.destroyed) return;
@@ -2634,7 +3131,7 @@ var SimulationManager = class _SimulationManager {
     this.syncSim = simulation_default(this.syncNodes).force("link", linkForce).force("charge", manyBody_default().strength(config.chargeStrength)).force(
       "collide",
       collide_default().radius((d) => d.radius + padding)
-    ).force("gravityX", x_default2(0).strength(0.05)).force("gravityY", y_default2(0).strength(0.05)).alphaDecay(config.alphaDecay).velocityDecay(config.velocityDecay).stop();
+    ).force("gravityX", x_default(0).strength(0.05)).force("gravityY", y_default(0).strength(0.05)).alphaDecay(config.alphaDecay).velocityDecay(config.velocityDecay).stop();
     if (config.centerForce !== false) {
       this.syncSim.force("center", center_default(0, 0));
     }
@@ -2642,6 +3139,20 @@ var SimulationManager = class _SimulationManager {
       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);
   }
   /**
@@ -2662,14 +3173,36 @@ var SimulationManager = class _SimulationManager {
       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 < SYNC_MAX_TICKS; i++, tickCount++) {
+      for (let i = 0; i < SYNC_TICKS_PER_BATCH && tickCount < maxTicks; i++, tickCount++) {
         sim.tick();
-        if (sim.alpha() < 1e-3) {
-          tickCount = SYNC_MAX_TICKS;
+        if (sim.alpha() < DEFAULT_ALPHA_MIN) {
+          tickCount = maxTicks;
           break;
         }
       }
@@ -2679,7 +3212,7 @@ var SimulationManager = class _SimulationManager {
         y: n.y ?? 0
       }));
       const alpha = sim.alpha();
-      const settled = alpha < 1e-3 || tickCount >= SYNC_MAX_TICKS;
+      const settled = alpha < DEFAULT_ALPHA_MIN || tickCount >= maxTicks;
       this.tickCb?.(positions, alpha);
       if (settled) {
         this.settledCb?.();
@@ -2687,94 +3220,157 @@ var SimulationManager = class _SimulationManager {
         this.syncRafId = requestAnimationFrame(runBatch);
       }
     };
+    const start = this.syncWarmupPending ? runWarmup : runBatch;
     if (deferred) {
-      queueMicrotask(runBatch);
+      queueMicrotask(start);
     } else {
-      runBatch();
+      start();
     }
   }
 };
 
 // src/graph/spatial-index.ts
-var SpatialIndex = class {
-  tree = null;
-  nodes = [];
-  maxRadius = 0;
-  generation = 0;
-  /** Rebuild the quadtree from the current set of positioned nodes. */
-  rebuild(nodes) {
-    this.nodes = nodes;
-    this.maxRadius = 0;
-    for (const n of nodes) {
-      if (n.radius > this.maxRadius) this.maxRadius = n.radius;
+var SpatialIndex2 = class extends SpatialIndex {
+};
+
+// src/graph/update-diff-config.ts
+function stableKey(c2) {
+  return JSON.stringify([
+    c2.chargeStrength,
+    c2.linkDistance,
+    c2.clustering ? [c2.clustering.field, c2.clustering.strength] : null,
+    c2.alphaDecay,
+    c2.velocityDecay,
+    c2.collisionRadius,
+    c2.collisionPadding ?? null,
+    c2.linkStrength ?? null,
+    c2.centerForce ?? null,
+    c2.seed ?? null,
+    c2.warmupTicks ?? null,
+    c2.warmupBudgetMs ?? null
+  ]);
+}
+function simulationConfigEqual(a2, b) {
+  return stableKey(a2) === 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 c2 = remainingPrev.get(k);
+    if (c2 && c2 > 0) {
+      remainingPrev.set(k, c2 - 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 });
+      }
     }
-    this.tree = quadtree().x((d) => d.x).y((d) => d.y).addAll(nodes);
-    this.generation++;
   }
-  /** Current generation counter. Increments on each rebuild. */
-  getGeneration() {
-    return this.generation;
+  return {
+    visualOnly,
+    enteringIds,
+    survivingPositions,
+    spawnPositions,
+    exitingNodes,
+    exitingEdges,
+    enteringEdgeCount
+  };
+}
+function buildAdjacency(edges) {
+  const map = /* @__PURE__ */ new Map();
+  const push = (a2, b) => {
+    const list = map.get(a2);
+    if (list) list.push(b);
+    else map.set(a2, [b]);
+  };
+  for (const e of edges) {
+    push(e.source, e.target);
+    push(e.target, e.source);
   }
-  /**
-   * Find the nearest node to (x, y) within maxDistance.
-   * Accounts for node radius: a hit occurs if the point is inside
-   * the node circle (distance to center < node.radius), or if the
-   * edge-to-edge distance is within maxDistance.
-   */
-  findNearest(x3, y3, maxDistance = Infinity) {
-    if (!this.tree || this.nodes.length === 0) return null;
-    const searchRadius = maxDistance + this.maxRadius;
-    let best = null;
-    let bestEffectiveDist = maxDistance + this.maxRadius + 1;
-    this.tree.visit((node, x0, y0, x1, y1) => {
-      const closestX = Math.max(x0, Math.min(x3, x1));
-      const closestY = Math.max(y0, Math.min(y3, y1));
-      const quadDist = Math.hypot(closestX - x3, closestY - y3);
-      if (quadDist > searchRadius) return true;
-      if (!node.length) {
-        let current = node;
-        do {
-          const d = current.data;
-          if (d) {
-            const dist = Math.hypot(d.x - x3, d.y - y3);
-            const effectiveDist = Math.max(0, dist - d.radius);
-            if (effectiveDist <= maxDistance && effectiveDist < bestEffectiveDist) {
-              bestEffectiveDist = effectiveDist;
-              best = d;
-            }
-          }
-        } while (current = current.next);
-      }
-      return false;
-    });
-    return best;
-  }
-  /** Find all nodes whose centers fall within the given rectangle. */
-  findInRect(x1, y1, x22, y22) {
-    if (!this.tree) return [];
-    const minX = Math.min(x1, x22);
-    const minY = Math.min(y1, y22);
-    const maxX = Math.max(x1, x22);
-    const maxY = Math.max(y1, y22);
-    const results = [];
-    this.tree.visit((node, qx0, qy0, qx1, qy1) => {
-      if (qx0 > maxX || qx1 < minX || qy0 > maxY || qy1 < minY) {
-        return true;
-      }
-      if (!node.length) {
-        let current = node;
-        do {
-          const d = current.data;
-          if (d && d.x >= minX && d.x <= maxX && d.y >= minY && d.y <= maxY) {
-            results.push(d);
-          }
-        } while (current = current.next);
-      }
-      return false;
-    });
-    return results;
+  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 c2 = counts.get(k);
+    if (!c2) return false;
+    counts.set(k, c2 - 1);
+  }
+  return true;
+}
 
 // src/graph-mount.ts
 function resolveDarkMode2(mode) {
@@ -2785,6 +3381,10 @@ function resolveDarkMode2(mode) {
   }
   return false;
 }
+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;
@@ -2793,9 +3393,10 @@ function createGraph(container, spec, options) {
   let canvas = null;
   let chromeEl = null;
   let legendEl = null;
+  let legendController = null;
   let renderer = null;
   let simulation = null;
-  const spatialIndex = new SpatialIndex();
+  const spatialIndex = new SpatialIndex2();
   let interactionManager = null;
   const searchManager = new GraphSearchManager();
   let tooltipManager = null;
@@ -2812,8 +3413,31 @@ function createGraph(container, spec, options) {
   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 activeCategories = /* @__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);
@@ -2846,6 +3470,14 @@ function createGraph(container, spec, options) {
   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();
@@ -2940,6 +3572,7 @@ function createGraph(container, spec, options) {
       wrapper.appendChild(legendEl);
     }
     container.appendChild(wrapper);
+    syncChromeInset();
     const canvasHeight = Math.max(height, 200);
     renderer = new GraphCanvasRenderer(canvas);
     renderer.resize(width, canvasHeight);
@@ -2948,10 +3581,10 @@ function createGraph(container, spec, options) {
     if (!chromeEl) return;
     let html = "";
     if (compilation.chrome.title) {
-      html += `<h2 class="oc-title">${escapeHtml(compilation.chrome.title.text)}</h2>`;
+      html += `<h2 class="oc-title">${escapeHtml2(compilation.chrome.title.text)}</h2>`;
     }
     if (compilation.chrome.subtitle) {
-      html += `<p class="oc-subtitle">${escapeHtml(compilation.chrome.subtitle.text)}</p>`;
+      html += `<p class="oc-subtitle">${escapeHtml2(compilation.chrome.subtitle.text)}</p>`;
     }
     chromeEl.innerHTML = html;
     if (!html) {
@@ -2960,27 +3593,68 @@ function createGraph(container, spec, options) {
       chromeEl.style.display = "";
     }
   }
+  function legendConfig() {
+    const l = options?.legend;
+    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 renderLegend2() {
     if (!legendEl) return;
-    const entries = "entries" in compilation.legend ? compilation.legend.entries : [];
-    if (entries.length === 0) {
-      legendEl.style.display = "none";
-      return;
-    }
-    legendEl.style.display = "";
-    let html = "";
-    for (const entry of entries) {
-      html += '<div class="oc-graph-legend-item">';
-      html += `<span class="oc-graph-legend-swatch" style="background:${escapeHtml(entry.color)}"></span>`;
-      html += `<span>${escapeHtml(entry.label)}</span>`;
-      html += "</div>";
+    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());
     }
-    legendEl.innerHTML = html;
   }
-  function initSimulation() {
+  function syncLegendActiveState() {
+    if (legendController) legendController.update(legendViewData());
+    syncChromeInset();
+  }
+  function syncChromeInset() {
+    if (!chromeEl) return;
+    const legendW = legendEl?.offsetWidth ?? 0;
+    chromeEl.style.right = legendW > 0 ? `${legendW + 24}px` : "";
+  }
+  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,
@@ -2990,19 +3664,30 @@ function createGraph(container, spec, options) {
       collisionRadius: config.collisionRadius,
       collisionPadding: config.collisionPadding,
       linkStrength: config.linkStrength,
-      centerForce: config.centerForce
+      // 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 = false;
-    simulation.onTick((positions, _alpha) => {
+    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) => {
+      positionedNodes = compilation.nodes.map((node, index2) => {
         const pos = posMap.get(node.id) ?? { x: 0, y: 0 };
-        return { ...node, x: pos.x, y: pos.y };
+        return { ...node, x: pos.x, y: pos.y, index: index2 };
       });
       positionedEdges = compilation.edges.map((edge) => {
         const src = posMap.get(edge.source) ?? { x: 0, y: 0 };
@@ -3016,11 +3701,11 @@ function createGraph(container, spec, options) {
         };
       });
       spatialIndex.rebuild(positionedNodes);
-      if (!initialFitDone && positionedNodes.length > 0 && interactionManager) {
+      if (!initialFitDone && positionedNodes.length > 0 && interactionManager && options?.fitOnLoad !== false) {
+        initialFitDone = true;
+        startEntrance();
+      } else if (!initialFitDone && options?.fitOnLoad === false) {
         initialFitDone = true;
-        const { width: cw, height: ch } = getCanvasDimensions();
-        const { transform: fitTransform } = ZoomTransform.fitBounds(positionedNodes, cw, ch);
-        interactionManager.setTransform(fitTransform);
       }
       needsRender = true;
       scheduleRender();
@@ -3030,6 +3715,65 @@ function createGraph(container, spec, options) {
       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();
@@ -3042,26 +3786,274 @@ function createGraph(container, spec, options) {
     if (animFrameId !== null || destroyed) return;
     animFrameId = requestAnimationFrame(renderFrame);
   }
-  function renderFrame() {
+  function hoverConnectedSet(nodeId) {
+    if (nodeId === null) return null;
+    if (compilation.interaction.hoverMode === "category") {
+      const cat = nodeCategory.get(nodeId);
+      const set3 = /* @__PURE__ */ new Set([nodeId]);
+      if (cat !== void 0) {
+        for (const [id, c2] of nodeCategory) if (c2 === cat) set3.add(id);
+      }
+      return set3;
+    }
+    const set2 = /* @__PURE__ */ new Set([nodeId]);
+    const neighbors = adjacencyMap.get(nodeId);
+    if (neighbors) for (const nid of neighbors) set2.add(nid);
+    return set2;
+  }
+  function standingSnapshot() {
+    return composeStandingFocus(
+      highlightSet,
+      searchManager.getMatches(),
+      selectedNodeIds,
+      adjacencyMap
+    );
+  }
+  function targetSnapshot() {
+    return layerHoverFocus(standingSnapshot(), hoveredNodeId, hoverConnectedSet(hoveredNodeId));
+  }
+  function armFocus(now2) {
+    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, now2);
+      return;
+    }
+    focusTransition.retarget(target, now2);
+    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 resolveHighlightTarget(target) {
+    if ("nodeIds" in target) return new Set(target.nodeIds);
+    if ("neighborsOf" in target) {
+      const set3 = /* @__PURE__ */ new Set();
+      if (target.includeSelf !== false) set3.add(target.neighborsOf);
+      const neighbors = adjacencyMap.get(target.neighborsOf);
+      if (neighbors) for (const nid of neighbors) set3.add(nid);
+      return set3;
+    }
+    const values = new Set(
+      Array.isArray(target.category.value) ? target.category.value : [target.category.value]
+    );
+    const field = target.category.field;
+    const set2 = /* @__PURE__ */ new Set();
+    for (const n of compilation.nodes) {
+      const v = n.data?.[field];
+      if (v != null && values.has(String(v))) set2.add(n.id);
+    }
+    return set2;
+  }
+  function categoryHighlightSet() {
+    if (activeCategories.size === 0) return null;
+    const set2 = /* @__PURE__ */ new Set();
+    for (const [id, cat] of nodeCategory) if (activeCategories.has(cat)) set2.add(id);
+    return set2;
+  }
+  function emitHighlightChange() {
+    options?.onHighlightChange?.(highlightSet ? [...highlightSet] : null);
+  }
+  function applyInitialHighlight() {
+    const init = compilation.initialHighlight;
+    if (!init) return;
+    activeCategories = new Set(init.values);
+    highlightSet = categoryHighlightSet();
+    highlightDimOpacity = null;
+  }
+  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, x3, y3) {
+    if (!tooltipManager) return;
+    if (result === null) {
+      tooltipManager.hide();
+    } else if (typeof result === "string") {
+      tooltipManager.show({ text: result }, x3, y3);
+    } else if (result instanceof HTMLElement) {
+      tooltipManager.show({ element: result }, x3, y3);
+    } else {
+      tooltipManager.show(result, x3, y3);
+    }
+  }
+  function buildRenderState(now2) {
+    const transform = interactionManager.getTransform();
+    if (!focusTransition) armFocus(now2);
+    const ft = focusTransition;
+    const t = ft.progress(now2);
+    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(),
+      isGesturing,
+      watermark: compilation.watermark,
+      focus: focus ?? { t: 1, prev: settledNext, next: settledNext },
+      hoverRadiusScale,
+      dimOpacity: highlightDimOpacity ?? compilation.interaction.dimOpacity,
+      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(now2) {
     animFrameId = null;
     if (destroyed || !renderer || !interactionManager) return;
+    if (scheduler.tick(now2)) needsRender = true;
     if (needsRender) {
       needsRender = false;
-      const transform = interactionManager.getTransform();
-      const state = {
-        nodes: positionedNodes,
-        edges: positionedEdges,
-        transform: { x: transform.x, y: transform.y, k: transform.k },
-        hoveredNodeId,
-        hoveredEdgeId,
-        selectedNodeIds,
-        adjacencyMap,
-        theme: compilation.theme,
-        searchMatches: searchManager.getMatches(),
-        isGesturing,
-        watermark: compilation.watermark
-      };
-      renderer.render(state);
+      renderer.render(buildRenderState(now2));
+    }
+    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() {
@@ -3071,37 +4063,33 @@ function createGraph(container, spec, options) {
     }
     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) {
-          options?.onNodeHover?.(nodeDataById(nodeId));
-        } else {
-          options?.onNodeHover?.(null);
+        if (nodeId && hoveredEdgeId) {
+          hoveredEdgeId = null;
+          options?.onEdgeHover?.(null);
+          tooltipManager?.hide();
         }
+        options?.onNodeHover?.(nodeId ? nodeDataById(nodeId) : null);
         if (nodeId && tooltipManager) {
-          if (hoveredEdgeId) {
-            hoveredEdgeId = null;
-            options?.onEdgeHover?.(null);
-          }
-          const content = compilation.tooltipDescriptors.get(nodeId);
-          if (content) {
-            const node = positionedNodes.find((n) => n.id === nodeId);
-            if (node && interactionManager) {
-              const screen = interactionManager.getTransform().graphToScreen(node.x, node.y);
-              tooltipManager.show(content, screen.x, screen.y);
-            }
-          }
+          showNodeTooltip(nodeId);
         } else if (!nodeId) {
           tooltipManager?.hide();
         }
       },
       onBackgroundHover(graphX, graphY, screenX, screenY) {
+        if (hoveredNodeId) return;
         const now2 = performance.now();
         if (now2 - lastEdgeHitTime < 32) {
           if (hoveredEdgeId) {
@@ -3124,14 +4112,7 @@ function createGraph(container, spec, options) {
           if (edgeId) {
             const data = edgeDataById(edgeId);
             options?.onEdgeHover?.(data);
-            if (tooltipManager && data) {
-              const fields = Object.entries(data).filter(([key]) => key !== "source" && key !== "target").filter(([, value]) => value != null).map(([key, value]) => ({
-                label: key,
-                value: typeof value === "number" ? value.toLocaleString() : String(value)
-              }));
-              const [source, target] = edgeId.split("->");
-              tooltipManager.show({ title: `${source} \u2192 ${target}`, fields }, screenX, screenY);
-            }
+            if (tooltipManager && data) showEdgeTooltip(edgeId, data, screenX, screenY);
           } else {
             options?.onEdgeHover?.(null);
             tooltipManager?.hide();
@@ -3140,6 +4121,7 @@ function createGraph(container, spec, options) {
       },
       onSelectionChange(nodeIds) {
         selectedNodeIds = new Set(nodeIds);
+        armFocus(performance.now());
         needsRender = true;
         scheduleRender();
         options?.onSelectionChange?.(nodeIds);
@@ -3152,16 +4134,27 @@ function createGraph(container, spec, options) {
         const node = positionedNodes.find((n) => n.id === nodeId);
         const x3 = node?.x ?? 0;
         const y3 = node?.y ?? 0;
-        simulation?.pinNode(nodeId, x3, y3);
+        simulation?.pinNode(nodeId, x3, y3, springyDragEnabled() ? 0.3 : void 0);
         canvas?.classList.add("oc-graph-canvas--dragging");
       },
       onNodeDrag(nodeId, x3, y3) {
         simulation?.dragNode(nodeId, x3, y3);
       },
       onNodeDragEnd(nodeId) {
-        simulation?.unpinNode(nodeId);
+        simulation?.unpinNode(nodeId, springyDragEnabled() ? 0 : void 0);
         canvas?.classList.remove("oc-graph-canvas--dragging");
       },
+      onPointerMove(graphX, graphY) {
+        if (!cursorForceEnabled()) return;
+        const now2 = performance.now();
+        if (now2 - lastPointerFeedTime < CURSOR_POINTER_THROTTLE_MS) return;
+        lastPointerFeedTime = now2;
+        simulation?.setPointer(graphX, graphY, true);
+      },
+      onPointerLeave() {
+        if (!cursorForceEnabled()) return;
+        simulation?.setPointer(0, 0, false);
+      },
       onDoubleClick(nodeId) {
         options?.onNodeDoubleClick?.(nodeDataById(nodeId));
       }
@@ -3191,9 +4184,7 @@ function createGraph(container, spec, options) {
         const factor = direction === "in" ? 1.2 : 0.8;
         const newK = t.k * factor;
         const newTransform = t.zoomAt(newK, cw / 2, ch / 2);
-        interactionManager.setTransform(newTransform);
-        needsRender = true;
-        scheduleRender();
+        flyCamera(newTransform, { duration: 200 });
       },
       onFitAll() {
         zoomToFit();
@@ -3212,93 +4203,318 @@ function createGraph(container, spec, options) {
     needsRender = true;
     scheduleRender();
   }
-  function zoomToFit() {
+  function zoomToFit(opts) {
     if (destroyed || !interactionManager || positionedNodes.length === 0) return;
     const { width: cw, height: ch } = getCanvasDimensions();
-    const { transform: fitTransform } = ZoomTransform.fitBounds(positionedNodes, cw, ch);
-    interactionManager.setTransform(fitTransform);
-    needsRender = true;
-    scheduleRender();
+    const { transform: fitTransform } = ZoomTransform.fitBounds(
+      positionedNodes,
+      cw,
+      ch,
+      opts?.padding,
+      {
+        insetTop: chromeInsetTop()
+      }
+    );
+    flyCamera(fitTransform, opts);
   }
-  function zoomToNode(nodeId) {
+  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 = 2;
-    const tx = cw / 2 - node.x * k;
-    const ty = ch / 2 - node.y * k;
-    const newTransform = new ZoomTransform(tx, ty, k);
-    interactionManager.setTransform(newTransform);
-    needsRender = true;
-    scheduleRender();
+    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(x3, y3, opts) {
+    flyTo({ x: x3, y: y3 }, opts);
   }
-  function selectNode(nodeId) {
+  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) {
+    activeCategories = /* @__PURE__ */ new Set();
+    highlightSet = resolveHighlightTarget(target);
+    highlightDimOpacity = opts?.dimOpacity ?? null;
+    syncLegendActiveState();
+    refreshFocus();
+    emitHighlightChange();
+  }
+  function clearHighlight() {
+    activeCategories = /* @__PURE__ */ new Set();
+    highlightSet = null;
+    highlightDimOpacity = null;
+    syncLegendActiveState();
+    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);
+    highlightSet = categoryHighlightSet();
+    highlightDimOpacity = null;
+    syncLegendActiveState();
+    refreshFocus();
+    emitHighlightChange();
+  }
+  function getActiveCategories() {
+    return [...activeCategories];
+  }
+  function toggleLegendCategory(value) {
+    if (activeCategories.has(value)) activeCategories.delete(value);
+    else activeCategories.add(value);
+    highlightSet = categoryHighlightSet();
+    highlightDimOpacity = null;
+    syncLegendActiveState();
+    refreshFocus();
+    options?.onLegendToggle?.([...activeCategories]);
+    emitHighlightChange();
+  }
   function doResize() {
     if (destroyed || !canvas || !renderer || !wrapper) return;
     const { width, height } = getContainerDimensions();
     const canvasHeight = Math.max(height, 200);
     renderer.resize(width, canvasHeight);
+    syncChromeInset();
+    if (entranceFitInFlight && interactionManager) {
+      cancelFlight();
+      entranceFitInFlight = false;
+      interactionManager.setTransform(computeInitialFit());
+      cameraChangePending = true;
+    }
     needsRender = true;
     scheduleRender();
   }
   function update(newSpec) {
     if (destroyed) return;
     currentSpec = newSpec;
-    teardownSubsystems();
+    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 = compile();
+    const diff = diffGraphUpdate(
+      prevNodes,
+      prevEdges,
+      compilation,
+      prevConfig,
+      prevConfig.seed ?? 0
+    );
+    if (diff.visualOnly) {
+      runVisualOnlyUpdate();
+      return;
+    }
+    runStructuralUpdate(diff);
+  }
+  function runVisualOnlyUpdate() {
     adjacencyMap = buildAdjacencyMap(compilation.edges);
     buildDataMaps();
-    renderChrome3();
-    renderLegend2();
-    initSimulation();
-    initInteraction();
-    hoveredNodeId = null;
-    hoveredEdgeId = null;
-    selectedNodeIds = /* @__PURE__ */ new Set();
-    searchManager.clearSearch();
-  }
-  function updateVisuals(newSpec) {
-    if (destroyed) return;
-    currentSpec = newSpec;
     const posMap = /* @__PURE__ */ new Map();
     for (const node of positionedNodes) {
       posMap.set(node.id, { x: node.x, y: node.y });
     }
-    compilation = compile();
-    adjacencyMap = buildAdjacencyMap(compilation.edges);
-    buildDataMaps();
-    positionedNodes = compilation.nodes.map((node) => {
+    positionedNodes = compilation.nodes.map((node, index2) => {
       const pos = posMap.get(node.id) ?? { x: 0, y: 0 };
-      return { ...node, x: pos.x, y: pos.y };
+      return { ...node, x: pos.x, y: pos.y, index: index2 };
     });
     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
-      };
+      return { ...edge, sourceX: src.x, sourceY: src.y, targetX: tgt.x, targetY: tgt.y };
+    });
+    spatialIndex.rebuild(positionedNodes);
+    if (activeCategories.size > 0) {
+      highlightSet = categoryHighlightSet();
+    }
+    reRunSearch();
+    renderChrome3();
+    renderLegend2();
+    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, index2) => {
+      const pos = positions.get(node.id) ?? { x: 0, y: 0 };
+      return { ...node, x: pos.x, y: pos.y, index: index2 };
+    });
+    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
+    });
     renderChrome3();
     renderLegend2();
+    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;
+    }
+    const survivingSelection = [...selectedNodeIds].filter((id) => nextIds.has(id));
+    selectedNodeIds = new Set(survivingSelection);
+    interactionManager?.setSelection(survivingSelection);
+    if (activeCategories.size > 0) {
+      highlightSet = categoryHighlightSet();
+    } else if (highlightSet) {
+      highlightSet = new Set([...highlightSet].filter((id) => nextIds.has(id)));
+      if (highlightSet.size === 0) highlightSet = null;
+    }
+    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;
@@ -3326,6 +4542,8 @@ function createGraph(container, spec, options) {
       disconnectResize();
       disconnectResize = null;
     }
+    legendController?.destroy();
+    legendController = null;
     if (wrapper?.parentNode) {
       wrapper.parentNode.removeChild(wrapper);
     }
@@ -3340,6 +4558,7 @@ function createGraph(container, spec, options) {
     compilation = compile();
     adjacencyMap = buildAdjacencyMap(compilation.edges);
     buildDataMaps();
+    applyInitialHighlight();
     createDOM();
     initSimulation();
     initInteraction();
@@ -3358,9 +4577,24 @@ function createGraph(container, spec, options) {
       },
       zoomToNode() {
       },
+      flyTo() {
+      },
+      centerAt() {
+      },
+      getCamera: () => ({ x: 0, y: 0, k: 1 }),
       selectNode() {
       },
       getSelectedNodes: () => [],
+      getSearchMatches: () => [],
+      highlight() {
+      },
+      clearHighlight() {
+      },
+      getHighlight: () => null,
+      getLegend: () => ({ field: null, nodes: [], edges: [] }),
+      setActiveCategories() {
+      },
+      getActiveCategories: () => [],
       resize() {
       },
       destroy() {
@@ -3379,13 +4613,23 @@ function createGraph(container, spec, options) {
     clearSearch,
     zoomToFit,
     zoomToNode,
+    flyTo,
+    centerAt,
+    getCamera,
     selectNode,
     getSelectedNodes,
+    getSearchMatches,
+    highlight,
+    clearHighlight,
+    getHighlight,
+    getLegend,
+    setActiveCategories,
+    getActiveCategories,
     resize: doResize,
     destroy
   };
 }
-function escapeHtml(str) {
+function escapeHtml2(str) {
   return str.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
 }
 
@@ -5580,6 +6824,9 @@ function createTileMap(container, spec, options) {
   };
 }
 export {
+  CANVAS_DEFAULT_UPDATE_MAX_MARKS,
+  DEFAULT_UPDATE_MAX_MARKS,
+  VECTOR_EXPORT_MAX_POINTS,
   attachKeyboardNav,
   createBarList,
   createChart,
@@ -5597,6 +6844,8 @@ export {
   exportPNG,
   exportSVG,
   exportSVGWithFonts,
+  exportSpecSequence,
+  materializeCanvasModeSVG,
   observeResize,
   rectPathWithCorners,
   registerMarkRenderer,