@abraca/nuxt 2.0.10 → 2.3.0

package/dist/runtime/components/renderers/AGraphRenderer.vue

@@ -2,6 +2,7 @@
 import { ref, computed, watch, nextTick, onMounted, onBeforeUnmount } from "vue";
 import { useRuntimeConfig } from "#imports";
 import { useRafFn, useEventListener } from "@vueuse/core";
+import { getIcon, loadIcon } from "@iconify/vue";
 import { useRendererBase } from "../../composables/useRendererBase";
 import { useNodePanel } from "../../composables/useNodePanel";
 import { DEFAULT_LOCALE } from "../../locale";
@@ -36,6 +37,67 @@ onMounted(async () => {
     d3Error.value = true;
   }
 });
+const providerSynced = ref(false);
+let detachSynced = null;
+let syncTimer = null;
+watch(childProviderRef, (p) => {
+  detachSynced?.();
+  detachSynced = null;
+  if (syncTimer) {
+    clearTimeout(syncTimer);
+    syncTimer = null;
+  }
+  if (!p) {
+    providerSynced.value = false;
+    return;
+  }
+  if (p.isSynced) {
+    providerSynced.value = true;
+    return;
+  }
+  providerSynced.value = false;
+  const onSync = () => {
+    providerSynced.value = true;
+  };
+  p.on?.("synced", onSync);
+  detachSynced = () => p.off?.("synced", onSync);
+  syncTimer = setTimeout(() => {
+    providerSynced.value = true;
+  }, 3e3);
+}, { immediate: true });
+const iconSVGCache = /* @__PURE__ */ new Map();
+const iconMissing = /* @__PURE__ */ new Set();
+const iconInFlight = /* @__PURE__ */ new Set();
+const iconLoadTick = ref(0);
+function getIconSVG(name) {
+  if (iconSVGCache.has(name)) return iconSVGCache.get(name);
+  if (iconMissing.has(name)) return null;
+  const data = getIcon(`lucide:${name}`);
+  if (data) {
+    const body = data.body.replace(/stroke="currentColor"/g, 'stroke="var(--ui-bg)"');
+    iconSVGCache.set(name, body);
+    return body;
+  }
+  if (iconInFlight.has(name)) return null;
+  iconInFlight.add(name);
+  loadIcon(`lucide:${name}`).then(
+    () => {
+      iconInFlight.delete(name);
+      const d = getIcon(`lucide:${name}`);
+      if (d) {
+        iconSVGCache.set(name, d.body.replace(/stroke="currentColor"/g, 'stroke="var(--ui-bg)"'));
+        iconLoadTick.value++;
+      } else {
+        iconMissing.add(name);
+      }
+    },
+    () => {
+      iconInFlight.delete(name);
+      iconMissing.add(name);
+    }
+  );
+  return null;
+}
 watch(childDoc, (doc) => {
   if (!doc) return;
   const legacyMap = doc.getMap("graph-positions");
@@ -50,16 +112,26 @@ watch(childDoc, (doc) => {
     }
   });
 }, { immediate: true });
-function getGraphPos(id) {
-  const entry = tree.entries.value.find((e) => e.id === id);
-  if (entry?.meta?.graphX !== void 0 && entry?.meta?.graphY !== void 0) {
-    return {
-      x: entry.meta.graphX,
-      y: entry.meta.graphY,
-      pinned: entry.meta.graphPinned ?? false
-    };
+const entryById = computed(() => {
+  const m = /* @__PURE__ */ new Map();
+  for (const e of tree.entries.value) m.set(e.id, e);
+  return m;
+});
+const posByEntry = computed(() => {
+  const m = /* @__PURE__ */ new Map();
+  for (const e of tree.entries.value) {
+    if (e.meta?.graphX !== void 0 && e.meta?.graphY !== void 0) {
+      m.set(e.id, {
+        x: e.meta.graphX,
+        y: e.meta.graphY,
+        pinned: e.meta.graphPinned ?? false
+      });
+    }
   }
-  return void 0;
+  return m;
+});
+function getGraphPos(id) {
+  return posByEntry.value.get(id);
 }
 const svgRef = ref(null);
 const vb = ref({ x: -500, y: -350, w: 1e3, h: 700 });
@@ -109,6 +181,37 @@ let isPinching = false;
 let pinchStart = null;
 const isPanning = ref(false);
 const panStart = ref({ ex: 0, ey: 0, vx: 0, vy: 0 });
+let pendingSvgMove = null;
+let pendingNodeMove = null;
+let pointerRafId = null;
+function schedulePointerFlush() {
+  if (pointerRafId !== null) return;
+  pointerRafId = requestAnimationFrame(() => {
+    pointerRafId = null;
+    if (pendingSvgMove) {
+      const m = pendingSvgMove;
+      pendingSvgMove = null;
+      flushSvgPointerMove(m);
+    }
+    if (pendingNodeMove) {
+      const m = pendingNodeMove;
+      pendingNodeMove = null;
+      flushNodePointerMove(m);
+    }
+  });
+}
+let pendingLocalState = null;
+let awarenessRafId = null;
+function queueLocalState(patch) {
+  pendingLocalState = pendingLocalState ? { ...pendingLocalState, ...patch } : { ...patch };
+  if (awarenessRafId !== null) return;
+  awarenessRafId = requestAnimationFrame(() => {
+    awarenessRafId = null;
+    const patchOut = pendingLocalState;
+    pendingLocalState = null;
+    if (patchOut) setLocalState(patchOut);
+  });
+}
 function onSvgPointerDown(e) {
   if (e.pointerType === "mouse" && e.button !== 0) return;
   activePointers.set(e.pointerId, { x: e.clientX, y: e.clientY });
@@ -116,6 +219,11 @@ function onSvgPointerDown(e) {
   if (activePointers.size === 1) {
     isPanning.value = true;
     isPinching = false;
+    if (zoomRafId) {
+      cancelAnimationFrame(zoomRafId);
+      zoomRafId = null;
+    }
+    vb.value = { ...targetVb.value };
     panStart.value = { ex: e.clientX, ey: e.clientY, vx: targetVb.value.x, vy: targetVb.value.y };
   } else if (activePointers.size === 2) {
     isPanning.value = false;
@@ -132,8 +240,12 @@ function onSvgPointerDown(e) {
 function onSvgPointerMove(e) {
   if (!activePointers.has(e.pointerId)) return;
   activePointers.set(e.pointerId, { x: e.clientX, y: e.clientY });
-  if (!draggingId.value && activePointers.size === 1) {
-    setLocalState({ pos: svgCoord(e.clientX, e.clientY) });
+  pendingSvgMove = { clientX: e.clientX, clientY: e.clientY, pointerId: e.pointerId };
+  schedulePointerFlush();
+}
+function flushSvgPointerMove(m) {
+  if (!draggingId.value && !isPanning.value && activePointers.size === 1) {
+    queueLocalState({ pos: svgCoord(m.clientX, m.clientY) });
   }
   if (isPinching && activePointers.size >= 2 && pinchStart) {
     const pts = [...activePointers.values()];
@@ -154,11 +266,11 @@ function onSvgPointerMove(e) {
   }
   if (!isPanning.value || activePointers.size !== 1) return;
   const rect = svgRef.value.getBoundingClientRect();
-  const sx = vb.value.w / rect.width;
-  const sy = vb.value.h / rect.height;
-  const nx = panStart.value.vx - (e.clientX - panStart.value.ex) * sx;
-  const ny = panStart.value.vy - (e.clientY - panStart.value.ey) * sy;
-  vb.value = { ...vb.value, x: nx, y: ny };
+  const sx = targetVb.value.w / rect.width;
+  const sy = targetVb.value.h / rect.height;
+  const nx = panStart.value.vx - (m.clientX - panStart.value.ex) * sx;
+  const ny = panStart.value.vy - (m.clientY - panStart.value.ey) * sy;
+  vb.value = { ...targetVb.value, x: nx, y: ny };
   targetVb.value = { ...targetVb.value, x: nx, y: ny };
 }
 function onSvgPointerUp(e) {
@@ -183,7 +295,7 @@ function onSvgPointerLeave(e) {
     isPanning.value = false;
     isPinching = false;
     pinchStart = null;
-    setLocalState({ pos: null });
+    queueLocalState({ pos: null });
   }
 }
 function fitView() {
@@ -232,7 +344,7 @@ const labelOpacity = computed(() => {
   if (!showLabels.value) return 0;
   const pxPerUnit = (svgRef.value?.clientWidth ?? 1e3) / vb.value.w;
   const apparentR = 16 * pxPerUnit;
-  return Math.max(0, Math.min(1, (apparentR - 8) / 8));
+  return Math.max(0, Math.min(1, (apparentR - 3) / 5));
 });
 const SPACING_PRESETS = {
   compact: { charge: -70, linkDist: 50, centerStrength: 0.1, collideExtra: 2 },
@@ -310,52 +422,106 @@ const viewSettingsActive = computed(
   () => !showLabels.value || !showRefEdges.value || edgeThickness.value !== "normal"
 );
 const simNodes = ref([]);
+const nodeById = /* @__PURE__ */ new Map();
 const renderTick = ref(0);
 let sim = null;
 const renderedNodes = computed(() => {
   void renderTick.value;
-  return simNodes.value.map((n) => ({ ...n }));
+  void iconLoadTick.value;
+  return simNodes.value;
 });
-const renderedLinks = computed(() => {
+const visibleNodes = computed(() => {
+  void renderTick.value;
+  void iconLoadTick.value;
+  const v = vb.value;
+  const mx = v.w * 0.3;
+  const my = v.h * 0.3;
+  const x0 = v.x - mx;
+  const x1 = v.x + v.w + mx;
+  const y0 = v.y - my;
+  const y1 = v.y + v.h + my;
+  const ls = labelScale.value;
+  return simNodes.value.filter((n) => {
+    const r = nodeRadius(n) + ls * 60;
+    return n.x + r > x0 && n.x - r < x1 && n.y + r > y0 && n.y - r < y1;
+  });
+});
+const allSimLinks = computed(() => {
   void renderTick.value;
   if (!sim || !d3.value) return [];
   const linkForce = sim.force("link");
   if (!linkForce) return [];
   return linkForce.links().filter((l) => l.source?.x !== void 0 && l.target?.x !== void 0);
 });
+const visibleLinks = computed(() => {
+  const v = vb.value;
+  const mx = v.w * 0.3;
+  const my = v.h * 0.3;
+  const x0 = v.x - mx;
+  const x1 = v.x + v.w + mx;
+  const y0 = v.y - my;
+  const y1 = v.y + v.h + my;
+  return allSimLinks.value.filter((l) => {
+    const s = l.source, t = l.target;
+    return s.x > x0 && s.x < x1 && s.y > y0 && s.y < y1 || t.x > x0 && t.x < x1 && t.y > y0 && t.y < y1;
+  });
+});
+const batchedEdgePathD = computed(() => {
+  let d = "";
+  for (const link of visibleLinks.value) {
+    d += `M${link.source.x},${link.source.y}L${link.target.x},${link.target.y}`;
+  }
+  return d;
+});
 let savePosTimer = null;
 function savePositionsDebounced() {
   if (savePosTimer) clearTimeout(savePosTimer);
   savePosTimer = setTimeout(() => {
     savePosTimer = null;
-    for (const node of simNodes.value) {
-      if (remoteDragByNode.value.has(node.id)) continue;
-      if (draggingId.value === node.id) continue;
-      const existing = getGraphPos(node.id);
-      const pinned = existing?.pinned ?? false;
-      if (existing && Math.abs(existing.x - node.x) < 1 && Math.abs(existing.y - node.y) < 1 && existing.pinned === pinned) continue;
-      tree.updateMeta(node.id, { graphX: node.x, graphY: node.y, graphPinned: pinned });
-    }
+    const doc = childDoc.value;
+    const work = () => {
+      for (const node of simNodes.value) {
+        if (remoteDragByNode.value.has(node.id)) continue;
+        if (draggingId.value === node.id) continue;
+        const existing = posByEntry.value.get(node.id);
+        const pinned = existing?.pinned ?? false;
+        if (existing && Math.abs(existing.x - node.x) < 1 && Math.abs(existing.y - node.y) < 1 && existing.pinned === pinned) continue;
+        tree.updateMeta(node.id, { graphX: node.x, graphY: node.y, graphPinned: pinned });
+      }
+    };
+    if (doc && typeof doc.transact === "function") doc.transact(work);
+    else work();
   }, 500);
 }
+let lastRenderTime = 0;
+const RENDER_INTERVAL = 16;
 const { pause: pauseSim, resume: resumeSim } = useRafFn(() => {
   if (!sim || sim.alpha() < sim.alphaMin()) {
     pauseSim();
     if (simNodes.value.length > 0) savePositionsDebounced();
+    renderTick.value++;
     return;
   }
   sim.tick();
   for (const [nodeId, drag] of remoteDragByNode.value) {
-    const n = simNodes.value.find((nd) => nd.id === nodeId);
+    const n = nodeById.get(nodeId);
     if (n) {
       n.fx = drag.x;
       n.fy = drag.y;
     }
   }
-  renderTick.value++;
+  const now = performance.now();
+  if (now - lastRenderTime >= RENDER_INTERVAL) {
+    lastRenderTime = now;
+    renderTick.value++;
+  }
 }, { immediate: false });
-function restartSim(alpha = 0.12) {
+function restartSim(alpha = 0.05) {
   if (!sim) return;
+  for (const n of simNodes.value) {
+    n.vx = 0;
+    n.vy = 0;
+  }
   sim.alpha(Math.max(sim.alpha(), alpha));
   resumeSim();
 }
@@ -366,9 +532,23 @@ function seedPos(id) {
   let h = 0;
   for (const c of id) h = Math.imul(31, h) + c.charCodeAt(0) | 0;
   const angle = (h >>> 0) / 4294967295 * 2 * Math.PI;
-  const r = 40 + (Math.imul(h, 1664525) >>> 0) / 4294967295 * 100;
+  const count = allEntries.value.length;
+  const sp = SPACING_PRESETS[spacingLevel.value];
+  const baseR = Math.max(sp.linkDist, count * sp.linkDist * 0.3);
+  const r = baseR + (Math.imul(h, 1664525) >>> 0) / 4294967295 * baseR * 0.5;
   return { x: Math.cos(angle) * r, y: Math.sin(angle) * r };
 }
+function spawnPosNearParent(entry) {
+  const saved = posByEntry.value.get(entry.id);
+  if (saved) return { x: saved.x, y: saved.y };
+  const parent = entry.parentId ? nodeById.get(entry.parentId) : null;
+  if (parent) {
+    const angle = Math.random() * 2 * Math.PI;
+    const dist = SPACING_PRESETS[spacingLevel.value].linkDist * 0.5;
+    return { x: parent.x + Math.cos(angle) * dist, y: parent.y + Math.sin(angle) * dist };
+  }
+  return seedPos(entry.id);
+}
 const allEntries = computed(() => {
   const result = [];
   function collect(parentId) {
@@ -382,31 +562,54 @@ const allEntries = computed(() => {
 });
 const allEdges = computed(() => {
   const nodeIds = new Set(allEntries.value.map((e) => e.id));
-  return allEntries.value.filter((e) => e.parentId !== null && nodeIds.has(e.parentId)).map((e) => ({ source: e.parentId, target: e.id }));
+  const out = [];
+  for (const e of allEntries.value) {
+    if (e.parentId !== null && nodeIds.has(e.parentId)) {
+      out.push({ source: e.parentId, target: e.id });
+    }
+  }
+  return out;
+});
+const degreeById = computed(() => {
+  const m = /* @__PURE__ */ new Map();
+  for (const e of allEdges.value) {
+    m.set(e.source, (m.get(e.source) ?? 0) + 1);
+    m.set(e.target, (m.get(e.target) ?? 0) + 1);
+  }
+  return m;
 });
 const graphKey = computed(() => {
-  const ids = [...allEntries.value].map((e) => e.id).sort().join(",");
-  const edges = [...allEdges.value].map((e) => `${e.source}>${e.target}`).sort().join(",");
-  return ids + "|" + edges;
+  let h = 0;
+  const djb2 = (s) => {
+    for (let i = 0; i < s.length; i++) h = (h << 5) + h + s.charCodeAt(i) | 0;
+  };
+  for (const e of allEntries.value) djb2(e.id);
+  h = h * 33 + allEntries.value.length | 0;
+  for (const e of allEdges.value) {
+    djb2(e.source);
+    djb2(e.target);
+  }
+  h = h * 33 + allEdges.value.length | 0;
+  return h;
 });
 function buildSimulation(oldPos = /* @__PURE__ */ new Map()) {
   if (!d3.value) return;
   const { forceSimulation, forceManyBody, forceCollide, forceLink, forceX, forceY } = d3.value;
   const entries = allEntries.value;
+  const degree = degreeById.value;
   const nodes = entries.map((entry) => {
-    const saved = getGraphPos(entry.id);
+    const saved = posByEntry.value.get(entry.id);
     const old = oldPos.get(entry.id);
     const seed = seedPos(entry.id);
-    const incoming = allEdges.value.filter((e) => e.target === entry.id).length;
-    const outgoing = allEdges.value.filter((e) => e.source === entry.id).length;
+    const neighborCount = degree.get(entry.id) ?? 0;
     return {
       id: entry.id,
       label: entry.label,
       type: entry.type,
       color: entry.meta?.color,
       icon: entry.meta?.icon,
-      childCount: tree.childrenOf(entry.id).length,
-      neighborCount: incoming + outgoing,
+      childCount: 0,
+      neighborCount,
       x: saved?.x ?? old?.x ?? seed.x,
       y: saved?.y ?? old?.y ?? seed.y,
       vx: 0,
@@ -420,28 +623,102 @@ function buildSimulation(oldPos = /* @__PURE__ */ new Map()) {
   pauseSim();
   sim?.stop();
   const p = SPACING_PRESETS[spacingLevel.value];
-  sim = forceSimulation(nodes).force("charge", forceManyBody().strength(p.charge)).force("x", forceX(0).strength(p.centerStrength)).force("y", forceY(0).strength(p.centerStrength)).force("link", forceLink(edges).id((dd) => dd.id).distance(p.linkDist).strength(0.5)).force("collide", forceCollide().radius((n) => nodeRadius(n) + p.collideExtra).strength(0.85)).alphaDecay(0.025).velocityDecay(0.55).stop();
+  sim = forceSimulation(nodes).force("charge", forceManyBody().strength(p.charge)).force("x", forceX(0).strength(p.centerStrength)).force("y", forceY(0).strength(p.centerStrength)).force("link", forceLink(edges).id((dd) => dd.id).distance(p.linkDist).strength(0.5)).force("collide", forceCollide().radius((n) => nodeRadius(n) + p.collideExtra).strength(0.85)).alphaDecay(0.04).velocityDecay(0.4).stop();
   simNodes.value = nodes;
-  const hasUnpositioned = nodes.some((n) => !getGraphPos(n.id) && !oldPos.has(n.id));
+  nodeById.clear();
+  for (const n of nodes) nodeById.set(n.id, n);
+  const hasUnpositioned = nodes.some((n) => !posByEntry.value.has(n.id) && !oldPos.has(n.id));
   if (hasUnpositioned) {
-    resumeSim();
+    for (const n of nodes) {
+      if (posByEntry.value.has(n.id) || oldPos.has(n.id)) {
+        n.fx = n.x;
+        n.fy = n.y;
+      }
+    }
+    sim.alpha(1);
+    const ticks = Math.ceil(Math.log(sim.alphaMin()) / Math.log(1 - sim.alphaDecay()));
+    for (let i = 0; i < ticks; i++) sim.tick();
+    for (const n of nodes) {
+      if (!posByEntry.value.get(n.id)?.pinned) {
+        n.fx = null;
+        n.fy = null;
+      }
+    }
+    renderTick.value++;
   } else {
     renderTick.value++;
   }
 }
 let hasFitOnce = false;
 watch(graphKey, () => {
-  const oldPos = new Map(simNodes.value.map((n) => [n.id, { x: n.x, y: n.y }]));
-  buildSimulation(oldPos);
+  if (!d3.value) return;
+  if (!sim) {
+    buildSimulation();
+    if (!hasFitOnce && simNodes.value.length > 0) {
+      hasFitOnce = true;
+      nextTick(fitView);
+    }
+    return;
+  }
+  const entries = allEntries.value;
+  const currentIds = new Set(simNodes.value.map((n) => n.id));
+  const newIds = new Set(entries.map((e) => e.id));
+  const entryMap = new Map(entries.map((e) => [e.id, e]));
+  const degree = degreeById.value;
+  const kept = simNodes.value.filter((n) => newIds.has(n.id));
+  for (const n of simNodes.value) {
+    if (!newIds.has(n.id)) nodeById.delete(n.id);
+  }
+  const added = [];
+  for (const entry of entries) {
+    if (!currentIds.has(entry.id)) {
+      const pos = spawnPosNearParent(entry);
+      const saved = posByEntry.value.get(entry.id);
+      const node = {
+        id: entry.id,
+        label: entry.label,
+        type: entry.type,
+        color: entry.meta?.color,
+        icon: entry.meta?.icon,
+        childCount: 0,
+        neighborCount: degree.get(entry.id) ?? 0,
+        x: pos.x,
+        y: pos.y,
+        vx: 0,
+        vy: 0,
+        fx: saved?.pinned ? saved.x : null,
+        fy: saved?.pinned ? saved.y : null
+      };
+      added.push(node);
+      nodeById.set(node.id, node);
+    }
+  }
+  for (const node of kept) {
+    const entry = entryMap.get(node.id);
+    if (entry) {
+      node.label = entry.label;
+      node.type = entry.type;
+      node.color = entry.meta?.color;
+      node.icon = entry.meta?.icon;
+      node.neighborCount = degree.get(entry.id) ?? 0;
+    }
+  }
+  const allNodes = [...kept, ...added];
+  simNodes.value = allNodes;
+  sim.nodes(allNodes);
+  const nodeIdSet = new Set(allNodes.map((n) => n.id));
+  const edges = allEdges.value.filter((e) => nodeIdSet.has(e.source) && nodeIdSet.has(e.target)).map((e) => ({ source: e.source, target: e.target }));
+  sim.force("link").links(edges);
+  restartSim(added.length > 0 ? 0.3 : 0.1);
   if (!hasFitOnce && simNodes.value.length > 0) {
     hasFitOnce = true;
     nextTick(fitView);
   }
 });
-watch(allEntries, () => {
+watch(() => tree.entries.value, () => {
   let changed = false;
   for (const node of simNodes.value) {
-    const entry = allEntries.value.find((e) => e.id === node.id);
+    const entry = entryById.value.get(node.id);
     if (entry && (entry.label !== node.label || entry.type !== node.type || entry.meta?.color !== node.color || entry.meta?.icon !== node.icon)) {
       node.label = entry.label;
       node.type = entry.type;
@@ -451,6 +728,16 @@ watch(allEntries, () => {
     }
   }
   if (changed) renderTick.value++;
+  for (const node of simNodes.value) {
+    const s = posByEntry.value.get(node.id);
+    if (s?.pinned && draggingId.value !== node.id) {
+      node.fx = s.x;
+      node.fy = s.y;
+    } else if (!s?.pinned && draggingId.value !== node.id && !remoteDragByNode.value.has(node.id)) {
+      node.fx = null;
+      node.fy = null;
+    }
+  }
 });
 watch(childDoc, (doc) => {
   if (doc && d3.value) {
@@ -472,76 +759,79 @@ watch(d3, (val) => {
     }
   }
 });
-watch(tree.entries, () => {
-  for (const node of simNodes.value) {
-    const s = getGraphPos(node.id);
-    if (s?.pinned && draggingId.value !== node.id) {
-      node.fx = s.x;
-      node.fy = s.y;
-    } else if (!s?.pinned && draggingId.value !== node.id && !remoteDragByNode.value.has(node.id)) {
-      node.fx = null;
-      node.fy = null;
-    }
-  }
-});
 onBeforeUnmount(() => {
   pauseSim();
   sim?.stop();
   if (savePosTimer) clearTimeout(savePosTimer);
   if (zoomRafId) cancelAnimationFrame(zoomRafId);
+  if (pointerRafId !== null) cancelAnimationFrame(pointerRafId);
+  if (awarenessRafId !== null) cancelAnimationFrame(awarenessRafId);
+  if (syncTimer) clearTimeout(syncTimer);
+  detachSynced?.();
   setLocalState({ "pos": null, "graph:dragging": null, "graph:selection": [] });
 });
 const draggingId = ref(null);
 const dragStart = ref({ ex: 0, ey: 0 });
+const dragOffset = ref({ dx: 0, dy: 0 });
 const wasDragged = ref(false);
 function onNodePointerDown(e, id) {
   if (!props.editable) return;
   e.stopPropagation();
-  const node = simNodes.value.find((n) => n.id === id);
+  const node = nodeById.get(id);
   if (!node) return;
   e.currentTarget.setPointerCapture(e.pointerId);
   draggingId.value = id;
   wasDragged.value = false;
   dragStart.value = { ex: e.clientX, ey: e.clientY };
+  const p = svgCoord(e.clientX, e.clientY);
+  dragOffset.value = { dx: node.x - p.x, dy: node.y - p.y };
   node.fx = node.x;
   node.fy = node.y;
-  restartSim();
-  setLocalState({ "graph:dragging": { nodeId: id, x: node.x, y: node.y } });
+  queueLocalState({ "graph:dragging": { nodeId: id, x: node.x, y: node.y } });
 }
 function onNodePointerMove(e, id) {
+  if (!props.editable) return;
   if (draggingId.value !== id) return;
-  const dist = Math.hypot(e.clientX - dragStart.value.ex, e.clientY - dragStart.value.ey);
-  if (dist > 4) wasDragged.value = true;
-  const p = svgCoord(e.clientX, e.clientY);
-  const node = simNodes.value.find((n) => n.id === id);
-  if (node) {
-    node.fx = p.x;
-    node.fy = p.y;
-    renderTick.value++;
-    setLocalState({ "graph:dragging": { nodeId: id, x: p.x, y: p.y } });
+  pendingNodeMove = { clientX: e.clientX, clientY: e.clientY, pointerId: e.pointerId };
+  schedulePointerFlush();
+}
+function flushNodePointerMove(m) {
+  const id = draggingId.value;
+  if (!id) return;
+  const dist = Math.hypot(m.clientX - dragStart.value.ex, m.clientY - dragStart.value.ey);
+  if (dist > 4 && !wasDragged.value) {
+    wasDragged.value = true;
+    restartSim(0.03);
   }
+  const p = svgCoord(m.clientX, m.clientY);
+  const node = nodeById.get(id);
+  if (!node) return;
+  node.fx = p.x + dragOffset.value.dx;
+  node.fy = p.y + dragOffset.value.dy;
+  renderTick.value++;
+  queueLocalState({ "graph:dragging": { nodeId: id, x: node.fx, y: node.fy } });
 }
 function onNodePointerUp(_e, id) {
   onDragEnd(id);
 }
 function onDragEnd(id) {
-  const node = simNodes.value.find((n) => n.id === id);
+  const node = nodeById.get(id);
   if (node) {
-    const isPinned = getGraphPos(id)?.pinned ?? false;
+    const isPinned = posByEntry.value.get(id)?.pinned ?? false;
     tree.updateMeta(id, { graphX: node.x, graphY: node.y, graphPinned: isPinned });
     if (!isPinned) {
       node.fx = null;
       node.fy = null;
     }
   }
-  setLocalState({ "graph:dragging": null });
+  queueLocalState({ "graph:dragging": null });
   draggingId.value = null;
-  restartSim();
+  if (wasDragged.value) restartSim(0.03);
 }
 const selectedNodeId = ref(null);
 function selectNode(id) {
   selectedNodeId.value = id;
-  setLocalState({ "graph:selection": id ? [id] : [] });
+  queueLocalState({ "graph:selection": id ? [id] : [] });
 }
 function onSvgClick() {
   selectNode(null);
@@ -605,7 +895,7 @@ useEventListener(window, "pointerdown", () => {
 });
 const ctxItems = computed(() => {
   if (ctxNode.value) {
-    const isPinned = getGraphPos(ctxNode.value.id)?.pinned;
+    const isPinned = posByEntry.value.get(ctxNode.value.id)?.pinned;
     return [
       [
         {
@@ -653,9 +943,9 @@ const ctxItems = computed(() => {
 });
 function togglePin(id) {
   if (!props.editable) return;
-  const node = simNodes.value.find((n) => n.id === id);
+  const node = nodeById.get(id);
   if (!node) return;
-  const isPinned = getGraphPos(id)?.pinned;
+  const isPinned = posByEntry.value.get(id)?.pinned;
   tree.updateMeta(id, { graphX: node.x, graphY: node.y, graphPinned: !isPinned });
   node.fx = isPinned ? null : node.x;
   node.fy = isPinned ? null : node.y;
@@ -723,6 +1013,13 @@ const DOC_TYPE_INITIALS = {
 function docTypeInitial(type) {
   return DOC_TYPE_INITIALS[type ?? "doc"] ?? "?";
 }
+const isLoading = computed(() => {
+  if (d3Error.value) return false;
+  if (!d3.value) return true;
+  if (!childDoc.value) return true;
+  if (!providerSynced.value && simNodes.value.length === 0) return true;
+  return false;
+});
 defineExpose({ connectedUsers });
 </script>
 
@@ -745,7 +1042,21 @@ defineExpose({ connectedUsers });
       </p>
     </div>
 
-    <template v-else-if="d3">
+    <!-- Loading skeleton — shown while d3/provider/initial sync are pending -->
+    <div
+      v-else-if="isLoading"
+      class="flex flex-col items-center justify-center h-full gap-3 text-center"
+    >
+      <UIcon
+        name="i-lucide-loader-circle"
+        class="size-8 text-(--ui-text-dimmed) animate-spin"
+      />
+      <p class="text-xs text-(--ui-text-dimmed)">
+        {{ locale.loading ?? "Loading graph\u2026" }}
+      </p>
+    </div>
+
+    <template v-else>
       <!-- Floating toolbar (bottom-center) -->
       <div class="graph-toolbar-bar">
         <!-- Create -->
@@ -873,7 +1184,7 @@ defineExpose({ connectedUsers });
         </UPopover>
       </div>
 
-      <!-- Empty state -->
+      <!-- Empty state — only reached once d3+provider+initial sync are all settled -->
       <div
         v-if="renderedNodes.length === 0"
         class="flex flex-col items-center justify-center h-full gap-3 text-center"
@@ -899,7 +1210,8 @@ defineExpose({ connectedUsers });
         ref="svgRef"
         class="w-full h-full select-none"
         :class="isPanning ? 'cursor-grabbing' : 'cursor-default'"
-        style="touch-action: none"
+        style="touch-action: none; contain: layout style paint"
+        overflow="visible"
         :viewBox="viewBoxStr"
         @wheel.prevent="onWheel"
         @pointerdown="onSvgPointerDown"
@@ -952,24 +1264,19 @@ defineExpose({ connectedUsers });
           fill="url(#gdots)"
         />
 
-        <!-- Edges layer -->
-        <g>
-          <line
-            v-for="(link, i) in renderedLinks"
-            :key="i"
-            :x1="link.source.x"
-            :y1="link.source.y"
-            :x2="link.target.x"
-            :y2="link.target.y"
-            stroke="var(--ui-border)"
-            :stroke-width="1.2 * edgeScale"
-            opacity="0.6"
-          />
-        </g>
+        <!-- Edges layer — one batched <path> for all visible structural edges -->
+        <path
+          v-if="batchedEdgePathD"
+          :d="batchedEdgePathD"
+          fill="none"
+          stroke="var(--ui-text-muted)"
+          :stroke-width="1.8 * edgeScale"
+          opacity="0.9"
+        />
 
-        <!-- Nodes layer -->
+        <!-- Nodes layer (viewport-culled) -->
         <g
-          v-for="node in renderedNodes"
+          v-for="node in visibleNodes"
           :key="node.id"
           data-node
           :transform="`translate(${node.x}, ${node.y})`"
@@ -1024,7 +1331,7 @@ defineExpose({ connectedUsers });
 
           <!-- Pinned indicator -->
           <circle
-            v-if="getGraphPos(node.id)?.pinned"
+            v-if="posByEntry.get(node.id)?.pinned"
             :cx="nodeRadius(node) - 5"
             :cy="-(nodeRadius(node) - 5)"
             r="4"
@@ -1033,29 +1340,18 @@ defineExpose({ connectedUsers });
             stroke-width="1"
           />
 
-          <!-- Custom icon -->
-          <foreignObject
-            v-if="node.icon"
-            :x="-nodeRadius(node) * 0.45"
-            :y="-nodeRadius(node) * 0.45"
-            :width="nodeRadius(node) * 0.9"
-            :height="nodeRadius(node) * 0.9"
-            style="pointer-events: none; overflow: visible"
-          >
-            <div
-              xmlns="http://www.w3.org/1999/xhtml"
-              style="width: 100%; height: 100%; display: flex; align-items: center; justify-content: center"
-            >
-              <UIcon
-                :name="`i-lucide-${node.icon}`"
-                style="color: white; opacity: 0.9; width: 100%; height: 100%"
-              />
-            </div>
-          </foreignObject>
+          <!-- Custom icon — native SVG (no foreignObject) -->
+          <g
+            v-if="node.icon && getIconSVG(node.icon)"
+            :transform="`translate(${-nodeRadius(node) * 0.45}, ${-nodeRadius(node) * 0.45}) scale(${nodeRadius(node) * 0.9 / 24})`"
+            opacity="0.9"
+            style="pointer-events: none"
+            v-html="getIconSVG(node.icon)"
+          />
 
           <!-- Fallback: doc-type initial -->
           <text
-            v-else
+            v-else-if="!node.icon"
             text-anchor="middle"
             dominant-baseline="central"
             :font-size="nodeRadius(node) * 0.5"