fix(graph): review fixes for entrance shift, zoom inset, and edge diff

- Apply entranceShift to special (hovered/selected) nodes so they don't
  snap to final position during entrance animation
- Account for insetTop in zoom degenerate case (single-point graph with
  chrome would center behind the title)
- Extract shared centroid helper in entrance.ts to avoid duplicate O(n)
  passes
- Use multiset counting for enteringEdgeCount, consistent with the
  edgeSetsEqual fix for duplicate edges

Claude-Session: https://claude.ai/code/session_016rS7hi2g4bSzRBfnD1p2ji

Author: rileyhilliard

packages/vanilla/src/graph/canvas-renderer.ts

@@ -796,13 +796,16 @@ export class GraphCanvasRenderer {
       const radius = baseRadius * hoverScale;
       // brighten() switches at the scale midpoint (>1.075 of the 1→1.15 range).
       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;
 
       // Glow for special nodes
       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();
@@ -811,7 +814,7 @@ export class GraphCanvasRenderer {
 
       // Fill
       ctx.beginPath();
-      ctx.arc(node.x, node.y, radius, 0, TWO_PI);
+      ctx.arc(nx, ny, radius, 0, TWO_PI);
       ctx.fillStyle = brightened ? brighten(node.fill) : node.fill;
       ctx.fill();
 
@@ -823,7 +826,7 @@ export class GraphCanvasRenderer {
       // Selection ring
       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();

packages/vanilla/src/graph/entrance.ts

@@ -46,17 +46,9 @@ export const ENTRANCE_STAGGER_MAX_NODES = 3000;
 /** How far (px, graph space) a node starts from its final spot during the pop. */
 export const ENTRANCE_DRIFT_PX = 16;
 
-/**
- * Stagger rank for each node: distance from the layout centroid, ascending, so
- * the reveal ripples outward from the center of the graph. Index-order stagger
- * reads as arbitrary shimmer; centroid-radial order reads as structure. Warmup
- * means positions are near-final when this runs, so the ranking is stable.
- */
-export function entranceOrder(
-  nodes: Array<{ id: string; x: number; y: number }>,
-): Map<string, number> {
-  const rank = new Map<string, number>();
-  if (nodes.length === 0) return rank;
+type XYNode = { id: string; x: number; y: number };
+
+function centroid(nodes: XYNode[]): { cx: number; cy: number } {
   let cx = 0;
   let cy = 0;
   for (const n of nodes) {
@@ -65,6 +57,19 @@ export function entranceOrder(
   }
   cx /= nodes.length;
   cy /= nodes.length;
+  return { cx, cy };
+}
+
+/**
+ * Stagger rank for each node: distance from the layout centroid, ascending, so
+ * the reveal ripples outward from the center of the graph. Index-order stagger
+ * reads as arbitrary shimmer; centroid-radial order reads as structure. Warmup
+ * means positions are near-final when this runs, so the ranking is stable.
+ */
+export function entranceOrder(nodes: XYNode[]): Map<string, number> {
+  const rank = new Map<string, number>();
+  if (nodes.length === 0) return rank;
+  const { cx, cy } = centroid(nodes);
   const sorted = [...nodes].sort((a, b) => {
     const da = (a.x - cx) * (a.x - cx) + (a.y - cy) * (a.y - cy);
     const db = (b.x - cx) * (b.x - cx) + (b.y - cy) * (b.y - cy);
@@ -77,23 +82,16 @@ export function entranceOrder(
 /**
  * Per-node drift offset: a unit vector pointing away from the layout centroid,
  * scaled to ENTRANCE_DRIFT_PX. Nodes pop in slightly outside their final spot
- * and converge inward — the whole graph reads as breathing in. Deterministic
- * (pure function of positions), zero-safe at the centroid.
+ * and converge inward. Deterministic (pure function of positions), zero-safe
+ * at the centroid.
  */
 export function entranceOffsets(
-  nodes: Array<{ id: string; x: number; y: number }>,
+  nodes: XYNode[],
   dist: number = ENTRANCE_DRIFT_PX,
 ): Map<string, { x: number; y: number }> {
   const offsets = new Map<string, { x: number; y: number }>();
   if (nodes.length === 0) return offsets;
-  let cx = 0;
-  let cy = 0;
-  for (const n of nodes) {
-    cx += n.x;
-    cy += n.y;
-  }
-  cx /= nodes.length;
-  cy /= nodes.length;
+  const { cx, cy } = centroid(nodes);
   for (const n of nodes) {
     const dx = n.x - cx;
     const dy = n.y - cy;

packages/vanilla/src/graph/update-diff.ts

@@ -116,10 +116,21 @@ export function diffGraphUpdate(
   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 prevEdgeKeys = new Set(prevEdges.map((e) => `${e.source} ${e.target}`));
+  const prevEdgeCounts = new Map<string, number>();
+  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) {
-    if (!prevEdgeKeys.has(`${e.source} ${e.target}`)) enteringEdgeCount++;
+    const k = `${e.source} ${e.target}`;
+    const c = remainingPrev.get(k);
+    if (c && c > 0) {
+      remainingPrev.set(k, c - 1);
+    } else {
+      enteringEdgeCount++;
+    }
   }
 
   // Visual-only: identical node AND edge id sets AND equal simulationConfig.

packages/vanilla/src/graph/zoom.ts

@@ -89,10 +89,14 @@ export class ZoomTransform {
     let graphH = maxY - minY;
 
     if (graphW === 0 && graphH === 0) {
-      // All nodes at the same point; just center
+      // All nodes at the same point; center within the area below the inset
       return {
-        transform: new ZoomTransform(canvasW / 2 - minX, canvasH / 2 - minY, 1),
-        contentHeight: padding * 2,
+        transform: new ZoomTransform(
+          canvasW / 2 - minX,
+          insetTop + (canvasH - insetTop) / 2 - minY,
+          1,
+        ),
+        contentHeight: padding * 2 + insetTop,
       };
     }