@abraca/nuxt 0.2.0 → 0.3.0

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

@@ -0,0 +1,1027 @@
+<script setup>
+import { ref, computed, watch, nextTick, onBeforeUnmount } from "vue";
+import { useRafFn, useEventListener } from "@vueuse/core";
+import { useRendererBase } from "../../composables/useRendererBase";
+import { useNodePanel } from "../../composables/useNodePanel";
+import { DEFAULT_LOCALE } from "../../locale";
+const props = defineProps({
+  docId: { type: String, required: true },
+  childProvider: { type: null, required: true },
+  docLabel: { type: String, required: true },
+  pageTypes: { type: Array, required: false },
+  labels: { type: Object, required: false },
+  editable: { type: Boolean, required: false, default: true }
+});
+const config = useRuntimeConfig();
+const locale = computed(() => ({
+  ...DEFAULT_LOCALE.renderers.graph,
+  ...config.public?.abracadabra?.locale?.renderers?.graph ?? {},
+  ...props.labels ?? {}
+}));
+const { tree, childDoc, childProviderRef, cursors, states, setLocalState, connectedUsers } = useRendererBase(props);
+const {
+  openNodeId,
+  openNodeLabel,
+  openNodeProvider,
+  openNode,
+  closePanel
+} = useNodePanel(childProviderRef);
+const d3 = ref(null);
+const d3Error = ref(false);
+onMounted(async () => {
+  try {
+    d3.value = await import("d3-force");
+  } catch {
+    d3Error.value = true;
+  }
+});
+watch(childDoc, (doc) => {
+  if (!doc) return;
+  const legacyMap = doc.getMap("graph-positions");
+  legacyMap.forEach((val, id) => {
+    const entry = tree.treeMap.get(id);
+    if (entry && entry.meta?.graphX === void 0) {
+      tree.updateMeta(id, {
+        graphX: val.x ?? 0,
+        graphY: val.y ?? 0,
+        graphPinned: val.pinned ?? false
+      });
+    }
+  });
+}, { 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
+    };
+  }
+  return void 0;
+}
+const svgRef = ref(null);
+const vb = ref({ x: -500, y: -350, w: 1e3, h: 700 });
+const targetVb = ref({ x: -500, y: -350, w: 1e3, h: 700 });
+let zoomRafId = null;
+function animateZoom() {
+  const f = 0.15;
+  const nw = vb.value.w + (targetVb.value.w - vb.value.w) * f;
+  const nh = vb.value.h + (targetVb.value.h - vb.value.h) * f;
+  const nx = vb.value.x + (targetVb.value.x - vb.value.x) * f;
+  const ny = vb.value.y + (targetVb.value.y - vb.value.y) * f;
+  if (Math.abs(nw - targetVb.value.w) < 0.5) {
+    vb.value = { ...targetVb.value };
+    zoomRafId = null;
+    return;
+  }
+  vb.value = { x: nx, y: ny, w: nw, h: nh };
+  zoomRafId = requestAnimationFrame(animateZoom);
+}
+function svgCoord(clientX, clientY) {
+  if (!svgRef.value) return { x: 0, y: 0 };
+  const rect = svgRef.value.getBoundingClientRect();
+  return {
+    x: (clientX - rect.left) / rect.width * vb.value.w + vb.value.x,
+    y: (clientY - rect.top) / rect.height * vb.value.h + vb.value.y
+  };
+}
+function onWheel(e) {
+  e.preventDefault();
+  const sensitivity = e.ctrlKey ? 8e-3 : 25e-4;
+  const delta = Math.sign(e.deltaY) * Math.min(Math.abs(e.deltaY), 100);
+  const scale = 1 + delta * sensitivity;
+  const rect = svgRef.value.getBoundingClientRect();
+  const tv = targetVb.value;
+  const px = (e.clientX - rect.left) / rect.width * tv.w + tv.x;
+  const py = (e.clientY - rect.top) / rect.height * tv.h + tv.y;
+  targetVb.value = {
+    x: px - (px - tv.x) * scale,
+    y: py - (py - tv.y) * scale,
+    w: Math.max(100, Math.min(8e3, tv.w * scale)),
+    h: Math.max(100, Math.min(8e3, tv.h * scale))
+  };
+  if (!zoomRafId) zoomRafId = requestAnimationFrame(animateZoom);
+}
+const activePointers = /* @__PURE__ */ new Map();
+let isPinching = false;
+let pinchStart = null;
+const isPanning = ref(false);
+const panStart = ref({ ex: 0, ey: 0, vx: 0, vy: 0 });
+function onSvgPointerDown(e) {
+  if (e.pointerType === "mouse" && e.button !== 0) return;
+  activePointers.set(e.pointerId, { x: e.clientX, y: e.clientY });
+  e.currentTarget.setPointerCapture(e.pointerId);
+  if (activePointers.size === 1) {
+    isPanning.value = true;
+    isPinching = false;
+    panStart.value = { ex: e.clientX, ey: e.clientY, vx: targetVb.value.x, vy: targetVb.value.y };
+  } else if (activePointers.size === 2) {
+    isPanning.value = false;
+    isPinching = true;
+    const pts = [...activePointers.values()];
+    const dist = Math.hypot(pts[1].x - pts[0].x, pts[1].y - pts[0].y);
+    pinchStart = {
+      dist: Math.max(dist, 1),
+      vb: { ...vb.value },
+      mid: { x: (pts[0].x + pts[1].x) / 2, y: (pts[0].y + pts[1].y) / 2 }
+    };
+  }
+}
+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) });
+  }
+  if (isPinching && activePointers.size >= 2 && pinchStart) {
+    const pts = [...activePointers.values()];
+    const currentDist = Math.max(Math.hypot(pts[1].x - pts[0].x, pts[1].y - pts[0].y), 1);
+    const scale = currentDist / pinchStart.dist;
+    const newW = Math.max(100, Math.min(8e3, pinchStart.vb.w / scale));
+    const newH = Math.max(100, Math.min(8e3, pinchStart.vb.h / scale));
+    const rect2 = svgRef.value.getBoundingClientRect();
+    const startMidSvgX = (pinchStart.mid.x - rect2.left) / rect2.width * pinchStart.vb.w + pinchStart.vb.x;
+    const startMidSvgY = (pinchStart.mid.y - rect2.top) / rect2.height * pinchStart.vb.h + pinchStart.vb.y;
+    const curMidX = (pts[0].x + pts[1].x) / 2;
+    const curMidY = (pts[0].y + pts[1].y) / 2;
+    const newX = startMidSvgX - (curMidX - rect2.left) / rect2.width * newW;
+    const newY = startMidSvgY - (curMidY - rect2.top) / rect2.height * newH;
+    vb.value = { x: newX, y: newY, w: newW, h: newH };
+    targetVb.value = { ...vb.value };
+    return;
+  }
+  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 };
+  targetVb.value = { ...targetVb.value, x: nx, y: ny };
+}
+function onSvgPointerUp(e) {
+  activePointers.delete(e.pointerId);
+  if (activePointers.size === 0) {
+    isPanning.value = false;
+    isPinching = false;
+    pinchStart = null;
+  } else if (activePointers.size === 1 && isPinching) {
+    isPinching = false;
+    pinchStart = null;
+    const [[, pt]] = activePointers.entries();
+    isPanning.value = true;
+    panStart.value = { ex: pt.x, ey: pt.y, vx: vb.value.x, vy: vb.value.y };
+  }
+}
+function onSvgPointerLeave(e) {
+  activePointers.delete(e.pointerId);
+  if (activePointers.size === 0) {
+    isPanning.value = false;
+    isPinching = false;
+    pinchStart = null;
+    setLocalState({ pos: null });
+  }
+}
+function fitView() {
+  if (simNodes.value.length === 0) return;
+  const xs = simNodes.value.map((n) => n.x);
+  const ys = simNodes.value.map((n) => n.y);
+  const minX = Math.min(...xs);
+  const maxX = Math.max(...xs);
+  const minY = Math.min(...ys);
+  const maxY = Math.max(...ys);
+  const cx = (minX + maxX) / 2;
+  const cy = (minY + maxY) / 2;
+  const pad = 120;
+  let w = Math.max(300, maxX - minX + pad * 2);
+  let h = Math.max(300, maxY - minY + pad * 2);
+  const rect = svgRef.value?.getBoundingClientRect();
+  if (rect && rect.width > 0 && rect.height > 0) {
+    const aspect = rect.width / rect.height;
+    if (w / h < aspect) w = h * aspect;
+    else h = w / aspect;
+  }
+  vb.value = { x: cx - w / 2, y: cy - h / 2, w, h };
+  targetVb.value = { ...vb.value };
+}
+function resetView() {
+  fitView();
+}
+function zoomIn() {
+  targetVb.value.w = Math.max(100, targetVb.value.w * 0.77);
+  targetVb.value.h = Math.max(100, targetVb.value.h * 0.77);
+  if (!zoomRafId) zoomRafId = requestAnimationFrame(animateZoom);
+}
+function zoomOut() {
+  targetVb.value.w = Math.min(8e3, targetVb.value.w * 1.3);
+  targetVb.value.h = Math.min(8e3, targetVb.value.h * 1.3);
+  if (!zoomRafId) zoomRafId = requestAnimationFrame(animateZoom);
+}
+const viewBoxStr = computed(
+  () => `${vb.value.x} ${vb.value.y} ${vb.value.w} ${vb.value.h}`
+);
+const labelScale = computed(() => {
+  const w = svgRef.value?.clientWidth ?? 1e3;
+  return vb.value.w / w;
+});
+const labelOpacity = computed(() => {
+  const pxPerUnit = (svgRef.value?.clientWidth ?? 1e3) / vb.value.w;
+  const apparentR = 16 * pxPerUnit;
+  return Math.max(0, Math.min(1, (apparentR - 8) / 8));
+});
+const simNodes = ref([]);
+const renderTick = ref(0);
+let sim = null;
+const renderedNodes = computed(() => {
+  void renderTick.value;
+  return simNodes.value.map((n) => ({ ...n }));
+});
+const renderedLinks = 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);
+});
+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 });
+    }
+  }, 500);
+}
+const { pause: pauseSim, resume: resumeSim } = useRafFn(() => {
+  if (!sim || sim.alpha() < sim.alphaMin()) {
+    pauseSim();
+    if (simNodes.value.length > 0) savePositionsDebounced();
+    return;
+  }
+  sim.tick();
+  for (const [nodeId, drag] of remoteDragByNode.value) {
+    const n = simNodes.value.find((nd) => nd.id === nodeId);
+    if (n) {
+      n.fx = drag.x;
+      n.fy = drag.y;
+    }
+  }
+  renderTick.value++;
+}, { immediate: false });
+function restartSim() {
+  if (!sim) return;
+  sim.alpha(Math.max(sim.alpha(), 0.12));
+  resumeSim();
+}
+function nodeRadius(n) {
+  return Math.max(12, Math.min(36, 12 + n.neighborCount * 3.5));
+}
+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;
+  return { x: Math.cos(angle) * r, y: Math.sin(angle) * r };
+}
+const allEntries = computed(() => {
+  const result = [];
+  function collect(parentId) {
+    for (const e of tree.childrenOf(parentId)) {
+      result.push(e);
+      collect(e.id);
+    }
+  }
+  collect(null);
+  return result;
+});
+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 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;
+});
+function buildSimulation(oldPos = /* @__PURE__ */ new Map()) {
+  if (!d3.value) return;
+  const { forceSimulation, forceManyBody, forceCollide, forceLink, forceX, forceY } = d3.value;
+  const entries = allEntries.value;
+  const nodes = entries.map((entry) => {
+    const saved = getGraphPos(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;
+    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,
+      x: saved?.x ?? old?.x ?? seed.x,
+      y: saved?.y ?? old?.y ?? seed.y,
+      vx: 0,
+      vy: 0,
+      fx: saved?.pinned ? saved.x : null,
+      fy: saved?.pinned ? saved.y : null
+    };
+  });
+  const nodeIds = new Set(nodes.map((n) => n.id));
+  const edges = allEdges.value.filter((e) => nodeIds.has(e.source) && nodeIds.has(e.target)).map((e) => ({ source: e.source, target: e.target }));
+  pauseSim();
+  sim?.stop();
+  sim = forceSimulation(nodes).force("charge", forceManyBody().strength(-120)).force("x", forceX(0).strength(0.06)).force("y", forceY(0).strength(0.06)).force("link", forceLink(edges).id((dd) => dd.id).distance(80).strength(0.5)).force("collide", forceCollide().radius((n) => nodeRadius(n) + 6).strength(0.85)).alphaDecay(0.025).velocityDecay(0.55).stop();
+  simNodes.value = nodes;
+  const hasUnpositioned = nodes.some((n) => !getGraphPos(n.id) && !oldPos.has(n.id));
+  if (hasUnpositioned) {
+    resumeSim();
+  } 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 (!hasFitOnce && simNodes.value.length > 0) {
+    hasFitOnce = true;
+    nextTick(fitView);
+  }
+});
+watch(allEntries, () => {
+  let changed = false;
+  for (const node of simNodes.value) {
+    const entry = allEntries.value.find((e) => e.id === 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;
+      node.color = entry.meta?.color;
+      node.icon = entry.meta?.icon;
+      changed = true;
+    }
+  }
+  if (changed) renderTick.value++;
+});
+watch(childDoc, (doc) => {
+  if (doc && d3.value) {
+    hasFitOnce = false;
+    buildSimulation();
+    if (simNodes.value.length > 0) {
+      hasFitOnce = true;
+      nextTick(fitView);
+    }
+  }
+}, { immediate: true });
+watch(d3, (val) => {
+  if (val && childDoc.value) {
+    hasFitOnce = false;
+    buildSimulation();
+    if (simNodes.value.length > 0) {
+      hasFitOnce = true;
+      nextTick(fitView);
+    }
+  }
+});
+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);
+  setLocalState({ "pos": null, "graph:dragging": null, "graph:selection": [] });
+});
+const draggingId = ref(null);
+const dragStart = ref({ ex: 0, ey: 0 });
+const wasDragged = ref(false);
+function onNodePointerDown(e, id) {
+  if (!props.editable) return;
+  e.stopPropagation();
+  const node = simNodes.value.find((n) => n.id === id);
+  if (!node) return;
+  e.currentTarget.setPointerCapture(e.pointerId);
+  draggingId.value = id;
+  wasDragged.value = false;
+  dragStart.value = { ex: e.clientX, ey: e.clientY };
+  node.fx = node.x;
+  node.fy = node.y;
+  restartSim();
+  setLocalState({ "graph:dragging": { nodeId: id, x: node.x, y: node.y } });
+}
+function onNodePointerMove(e, id) {
+  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 } });
+  }
+}
+function onNodePointerUp(_e, id) {
+  onDragEnd(id);
+}
+function onDragEnd(id) {
+  const node = simNodes.value.find((n) => n.id === id);
+  if (node) {
+    const isPinned = getGraphPos(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 });
+  draggingId.value = null;
+  restartSim();
+}
+const selectedNodeId = ref(null);
+function selectNode(id) {
+  selectedNodeId.value = id;
+  setLocalState({ "graph:selection": id ? [id] : [] });
+}
+function onSvgClick() {
+  selectNode(null);
+}
+function onNodeClick(e, id, label) {
+  e.stopPropagation();
+  if (wasDragged.value) return;
+  selectNode(id);
+  openNode(id, label);
+}
+function onSvgDblClick(e) {
+  if (!props.editable) return;
+  if (e.target.closest("[data-node]")) return;
+  const p = svgCoord(e.clientX, e.clientY);
+  const id = tree.createChild(null, locale.value.untitled);
+  tree.updateMeta(id, { graphX: p.x, graphY: p.y, graphPinned: true });
+}
+function onNodeDblClick(e, id, label) {
+  if (!props.editable) return;
+  e.stopPropagation();
+  editId.value = id;
+  editValue.value = label;
+}
+const editId = ref(null);
+const editValue = ref("");
+function commitEdit() {
+  if (!props.editable) return;
+  if (editId.value && editValue.value.trim()) {
+    tree.renameEntry(editId.value, editValue.value.trim());
+  }
+  editId.value = null;
+}
+function addNodeAtCenter() {
+  if (!props.editable) return;
+  const id = tree.createChild(null, locale.value.untitled);
+  tree.updateMeta(id, { graphX: 0, graphY: 0, graphPinned: false });
+}
+const ctxNode = ref(null);
+const ctxCanvas = ref(null);
+const ctxPos = ref({ x: 0, y: 0 });
+const showCtx = ref(false);
+function onNodeContextMenu(e, id, label) {
+  if (!props.editable) return;
+  e.preventDefault();
+  e.stopPropagation();
+  ctxNode.value = { id, label };
+  ctxCanvas.value = null;
+  ctxPos.value = { x: e.clientX, y: e.clientY };
+  showCtx.value = true;
+}
+function onSvgContextMenu(e) {
+  if (!props.editable) return;
+  e.preventDefault();
+  ctxNode.value = null;
+  ctxCanvas.value = svgCoord(e.clientX, e.clientY);
+  ctxPos.value = { x: e.clientX, y: e.clientY };
+  showCtx.value = true;
+}
+useEventListener(window, "pointerdown", () => {
+  showCtx.value = false;
+});
+const ctxItems = computed(() => {
+  if (ctxNode.value) {
+    const isPinned = getGraphPos(ctxNode.value.id)?.pinned;
+    return [
+      [
+        {
+          label: "Open",
+          icon: "i-lucide-external-link",
+          onSelect: () => openNode(ctxNode.value.id, ctxNode.value.label)
+        },
+        {
+          label: "Rename",
+          icon: "i-lucide-pencil",
+          onSelect: () => {
+            editId.value = ctxNode.value.id;
+            editValue.value = ctxNode.value.label;
+          }
+        },
+        {
+          label: isPinned ? locale.value.unpin : locale.value.pin,
+          icon: isPinned ? "i-lucide-pin-off" : "i-lucide-pin",
+          onSelect: () => togglePin(ctxNode.value.id)
+        }
+      ],
+      [
+        {
+          label: "Delete",
+          icon: "i-lucide-trash-2",
+          color: "error",
+          onSelect: () => tree.deleteEntry(ctxNode.value.id)
+        }
+      ]
+    ];
+  }
+  if (ctxCanvas.value) {
+    return [[
+      {
+        label: locale.value.addNode,
+        icon: "i-lucide-plus-circle",
+        onSelect: () => {
+          const id = tree.createChild(null, locale.value.untitled);
+          tree.updateMeta(id, { graphX: ctxCanvas.value.x, graphY: ctxCanvas.value.y, graphPinned: true });
+        }
+      }
+    ]];
+  }
+  return [];
+});
+function togglePin(id) {
+  if (!props.editable) return;
+  const node = simNodes.value.find((n) => n.id === id);
+  if (!node) return;
+  const isPinned = getGraphPos(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;
+  if (isPinned) restartSim();
+}
+const remoteDragByNode = computed(() => {
+  const myId = childProviderRef.value?.awareness?.clientID;
+  const map = /* @__PURE__ */ new Map();
+  for (const s of states.value) {
+    if (s.clientId === myId || !s["graph:dragging"]) continue;
+    const nid = s["graph:dragging"].nodeId;
+    if (!map.has(nid)) {
+      map.set(nid, {
+        x: s["graph:dragging"].x,
+        y: s["graph:dragging"].y,
+        color: s.user?.color ?? "#888"
+      });
+    }
+  }
+  return map;
+});
+const remoteSelections = computed(() => {
+  const myId = childProviderRef.value?.awareness?.clientID;
+  const map = /* @__PURE__ */ new Map();
+  for (const s of states.value) {
+    if (s.clientId === myId) continue;
+    for (const nid of s["graph:selection"] ?? []) {
+      if (!map.has(nid)) map.set(nid, []);
+      map.get(nid).push({ color: s.user?.color ?? "#888", name: s.user?.name ?? "Anon" });
+    }
+  }
+  return map;
+});
+const TYPE_COLORS = {
+  doc: "var(--color-blue-500)",
+  kanban: "var(--color-violet-500)",
+  gallery: "var(--color-pink-500)",
+  table: "var(--color-teal-500)",
+  outline: "var(--color-slate-500)",
+  timeline: "var(--color-amber-500)",
+  calendar: "var(--color-red-500)",
+  map: "var(--color-emerald-500)",
+  graph: "var(--color-indigo-500)",
+  dashboard: "var(--color-orange-500)",
+  checklist: "var(--color-green-500)"
+};
+function nodeColor(n) {
+  if (n.color) return n.color;
+  return TYPE_COLORS[n.type ?? "doc"] ?? "var(--ui-color-neutral-500)";
+}
+const DOC_TYPE_INITIALS = {
+  doc: "D",
+  kanban: "K",
+  gallery: "G",
+  table: "T",
+  outline: "O",
+  timeline: "TL",
+  calendar: "C",
+  map: "MP",
+  graph: "GR",
+  dashboard: "DK",
+  call: "CA",
+  checklist: "CL"
+};
+function docTypeInitial(type) {
+  return DOC_TYPE_INITIALS[type ?? "doc"] ?? "?";
+}
+defineExpose({ connectedUsers });
+</script>
+
+<template>
+  <div class="flex-1 min-h-0 relative overflow-hidden bg-(--ui-bg-elevated)">
+    <!-- d3-force not installed fallback -->
+    <div
+      v-if="d3Error"
+      class="flex flex-col items-center justify-center h-full gap-3 text-center"
+    >
+      <UIcon
+        name="i-lucide-git-fork"
+        class="size-10 text-(--ui-text-dimmed)"
+      />
+      <p class="text-sm text-(--ui-text-muted)">
+        Graph renderer requires <code>d3-force</code>
+      </p>
+      <p class="text-xs text-(--ui-text-dimmed)">
+        Install it with: <code>pnpm add d3-force</code>
+      </p>
+    </div>
+
+    <template v-else-if="d3">
+      <!-- Toolbar -->
+      <div class="absolute top-3 left-3 z-10 flex gap-1">
+        <UButton
+          v-if="editable"
+          icon="i-lucide-plus"
+          size="xs"
+          variant="soft"
+          color="neutral"
+          :label="locale.addNode"
+          @click="addNodeAtCenter"
+        />
+        <UTooltip
+          text="Zoom out"
+          :content="{ side: 'bottom' }"
+        >
+          <UButton
+            icon="i-lucide-minus"
+            size="xs"
+            variant="soft"
+            color="neutral"
+            @click="zoomOut"
+          />
+        </UTooltip>
+        <UTooltip
+          text="Zoom in"
+          :content="{ side: 'bottom' }"
+        >
+          <UButton
+            icon="i-lucide-zoom-in"
+            size="xs"
+            variant="soft"
+            color="neutral"
+            @click="zoomIn"
+          />
+        </UTooltip>
+        <UTooltip
+          text="Fit view"
+          :content="{ side: 'bottom' }"
+        >
+          <UButton
+            icon="i-lucide-focus"
+            size="xs"
+            variant="soft"
+            color="neutral"
+            @click="resetView"
+          />
+        </UTooltip>
+        <UButton
+          icon="i-lucide-wind"
+          size="xs"
+          variant="soft"
+          color="neutral"
+          label="Shake"
+          @click="restartSim"
+        />
+      </div>
+
+      <!-- Empty state -->
+      <div
+        v-if="renderedNodes.length === 0"
+        class="flex flex-col items-center justify-center h-full gap-3 text-center"
+      >
+        <UIcon
+          name="i-lucide-git-fork"
+          class="size-10 text-(--ui-text-dimmed)"
+        />
+        <p class="text-sm text-(--ui-text-muted)">
+          {{ locale.empty }}
+        </p>
+        <UButton
+          v-if="editable"
+          icon="i-lucide-plus"
+          :label="locale.addNode"
+          size="sm"
+          @click="addNodeAtCenter"
+        />
+      </div>
+
+      <svg
+        v-else
+        ref="svgRef"
+        class="w-full h-full select-none"
+        :class="isPanning ? 'cursor-grabbing' : 'cursor-default'"
+        style="touch-action: none"
+        :viewBox="viewBoxStr"
+        @wheel.prevent="onWheel"
+        @pointerdown="onSvgPointerDown"
+        @pointermove="onSvgPointerMove"
+        @pointerup="onSvgPointerUp"
+        @pointerleave="onSvgPointerLeave"
+        @click="onSvgClick"
+        @dblclick="onSvgDblClick"
+        @contextmenu.prevent="onSvgContextMenu"
+      >
+        <defs>
+          <pattern
+            id="gdots"
+            width="30"
+            height="30"
+            patternUnits="userSpaceOnUse"
+          >
+            <circle
+              cx="15"
+              cy="15"
+              r="0.8"
+              fill="var(--ui-border)"
+              opacity="0.5"
+            />
+          </pattern>
+          <filter
+            id="glow"
+            x="-50%"
+            y="-50%"
+            width="200%"
+            height="200%"
+          >
+            <feGaussianBlur
+              stdDeviation="4"
+              result="blur"
+            />
+            <feMerge>
+              <feMergeNode in="blur" />
+              <feMergeNode in="SourceGraphic" />
+            </feMerge>
+          </filter>
+        </defs>
+
+        <!-- Background dots -->
+        <rect
+          x="-5000"
+          y="-5000"
+          width="10000"
+          height="10000"
+          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"
+            opacity="0.6"
+          />
+        </g>
+
+        <!-- Nodes layer -->
+        <g
+          v-for="node in renderedNodes"
+          :key="node.id"
+          data-node
+          :transform="`translate(${node.x}, ${node.y})`"
+          style="cursor: grab"
+          @pointerdown.stop="onNodePointerDown($event, node.id)"
+          @pointermove.stop="onNodePointerMove($event, node.id)"
+          @pointerup.stop="onNodePointerUp($event, node.id)"
+          @click.stop="onNodeClick($event, node.id, node.label)"
+          @dblclick.stop="onNodeDblClick($event, node.id, node.label)"
+          @contextmenu.stop.prevent="onNodeContextMenu($event, node.id, node.label)"
+        >
+          <!-- Remote selection halos -->
+          <circle
+            v-for="(sel, si) in remoteSelections.get(node.id) ?? []"
+            :key="sel.color + si"
+            :r="nodeRadius(node) + 9 + si * 5"
+            fill="none"
+            :stroke="sel.color"
+            stroke-width="1.5"
+            opacity="0.4"
+          />
+
+          <!-- Local selection glow -->
+          <circle
+            v-if="selectedNodeId === node.id"
+            :r="nodeRadius(node) + 7"
+            fill="none"
+            stroke="var(--ui-primary)"
+            stroke-width="2.5"
+            filter="url(#glow)"
+            opacity="0.9"
+          />
+
+          <!-- Remote drag ring -->
+          <circle
+            v-if="remoteDragByNode.get(node.id)"
+            :r="nodeRadius(node) + 3"
+            fill="none"
+            :stroke="remoteDragByNode.get(node.id).color"
+            stroke-width="2"
+            stroke-dasharray="5 3"
+            opacity="0.8"
+          />
+
+          <!-- Main circle -->
+          <circle
+            :r="nodeRadius(node)"
+            :fill="nodeColor(node)"
+            stroke="color-mix(in srgb, var(--ui-bg) 20%, var(--ui-border))"
+            stroke-width="1"
+          />
+
+          <!-- Pinned indicator -->
+          <circle
+            v-if="getGraphPos(node.id)?.pinned"
+            :cx="nodeRadius(node) - 5"
+            :cy="-(nodeRadius(node) - 5)"
+            r="4"
+            fill="var(--ui-bg-muted)"
+            stroke="var(--ui-text-muted)"
+            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>
+
+          <!-- Fallback: doc-type initial -->
+          <text
+            v-else
+            text-anchor="middle"
+            dominant-baseline="central"
+            :font-size="nodeRadius(node) * 0.5"
+            fill="white"
+            opacity="0.9"
+            style="pointer-events: none; user-select: none"
+          >
+            {{ docTypeInitial(node.type) }}
+          </text>
+
+          <!-- Node label -->
+          <text
+            v-if="editId !== node.id"
+            :y="nodeRadius(node) + 14 * labelScale"
+            text-anchor="middle"
+            :font-size="11 * labelScale"
+            :opacity="labelOpacity"
+            fill="var(--ui-text)"
+            style="pointer-events: none; user-select: none"
+          >
+            {{ node.label.length > 20 ? node.label.slice(0, 20) + "\u2026" : node.label }}
+          </text>
+
+          <!-- Inline rename input -->
+          <foreignObject
+            v-if="editId === node.id"
+            :x="-(nodeRadius(node) + 28)"
+            :y="nodeRadius(node) + 4"
+            :width="(nodeRadius(node) + 28) * 2"
+            height="20"
+          >
+            <input
+              class="w-full bg-transparent text-center text-xs outline-none"
+              style="color: var(--ui-text-highlighted)"
+              :value="editValue"
+              autofocus
+              @input="editValue = $event.target.value"
+              @blur="commitEdit"
+              @keydown.enter="commitEdit"
+              @keydown.escape="editId = null"
+              @pointerdown.stop
+            >
+          </foreignObject>
+        </g>
+
+        <!-- Cursors layer -->
+        <g style="pointer-events: none">
+          <g
+            v-for="c in cursors"
+            :key="c.clientId"
+            :transform="`translate(${c.x}, ${c.y})`"
+          >
+            <circle
+              r="5"
+              :fill="c.state?.user?.color || 'var(--ui-color-neutral-400)'"
+              opacity="0.85"
+            />
+            <text
+              x="8"
+              y="4"
+              :font-size="10 * labelScale"
+              :fill="c.state?.user?.color || 'var(--ui-color-neutral-400)'"
+              style="user-select: none"
+            >
+              {{ c.state?.user?.name || "Anon" }}
+            </text>
+          </g>
+        </g>
+      </svg>
+
+      <!-- Hint -->
+      <p class="absolute bottom-3 right-3 text-[10px] text-(--ui-text-muted) select-none pointer-events-none">
+        Drag to reposition · Right-click to pin/create · Scroll to zoom · Click to open · Dbl-click canvas to create
+      </p>
+
+      <!-- Context menu -->
+      <Teleport to="body">
+        <div
+          v-if="showCtx && ctxItems.length"
+          class="fixed z-50 min-w-40 bg-(--ui-bg) border border-(--ui-border) rounded-lg shadow-xl py-1 text-sm"
+          :style="{ left: ctxPos.x + 'px', top: ctxPos.y + 'px' }"
+        >
+          <template
+            v-for="(group, gi) in ctxItems"
+            :key="gi"
+          >
+            <div
+              v-if="gi > 0"
+              class="my-1 border-t border-(--ui-border)"
+            />
+            <button
+              v-for="item in group"
+              :key="item.label"
+              class="w-full flex items-center gap-2 px-3 py-1.5 hover:bg-(--ui-bg-elevated) text-left cursor-default"
+              :class="item.color === 'error' ? 'text-(--ui-color-error-500)' : 'text-(--ui-text)'"
+              @pointerdown.stop
+              @click="item.onSelect();
+  showCtx = false"
+            >
+              <UIcon
+                :name="item.icon"
+                class="size-3.5 shrink-0 opacity-70"
+              />
+              {{ item.label }}
+            </button>
+          </template>
+        </div>
+      </Teleport>
+    </template>
+
+    <!-- Node panel -->
+    <ANodePanel
+      :node-id="openNodeId"
+      :node-label="openNodeLabel"
+      :child-provider="openNodeProvider"
+      @close="closePanel"
+    />
+  </div>
+</template>