@abraca/nuxt 0.1.1 → 0.3.0

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

@@ -0,0 +1,1372 @@
+<script setup>
+import { ref, reactive, computed, watch, nextTick, onMounted, onBeforeUnmount, markRaw } from "vue";
+import { useRendererBase } from "../../composables/useRendererBase";
+import { useNodePanel } from "../../composables/useNodePanel";
+import { resolveDocType } from "../../utils/docTypes";
+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.dashboard,
+  ...config.public?.abracadabra?.locale?.renderers?.dashboard ?? {},
+  ...props.labels ?? {}
+}));
+const { tree, childDoc, childProviderRef, cursors, states, setLocalState, connectedUsers } = useRendererBase(props);
+const {
+  openNodeId,
+  openNodeLabel,
+  openNodeProvider,
+  openNode,
+  closePanel
+} = useNodePanel(childProviderRef);
+const GRID_SIZE = 80;
+const ICON_MARGIN = 16;
+const WIDGET_SM = { w: 240, h: 180 };
+const WIDGET_LG = { w: 400, h: 320 };
+const MIN_WIDGET_W = 160;
+const MIN_WIDGET_H = 120;
+const resizeDirs = ["n", "s", "e", "w", "ne", "nw", "se", "sw"];
+const selectedIds = ref(/* @__PURE__ */ new Set());
+const gridRef = ref(null);
+const scrollContainerRef = ref(null);
+const temporaryPositions = reactive({});
+const temporarySizes = reactive({});
+const children = computed(() => tree.childrenOf(null));
+const CANVAS_PADDING = 200;
+const canvasSize = computed(() => {
+  let maxX = 0;
+  let maxY = 0;
+  children.value.forEach((item) => {
+    const pos = getIconPosition(item.id);
+    const size = getItemSize(item.id);
+    maxX = Math.max(maxX, pos.x + size.w);
+    maxY = Math.max(maxY, pos.y + size.h);
+  });
+  const el = scrollContainerRef.value;
+  const minW = el?.clientWidth ?? window.innerWidth;
+  const minH = el?.clientHeight ?? window.innerHeight;
+  return {
+    w: Math.max(minW, maxX + CANVAS_PADDING),
+    h: Math.max(minH, maxY + CANVAS_PADDING)
+  };
+});
+const zCounter = ref(1);
+watch(children, (items) => {
+  const maxZ = items.reduce((max, item) => Math.max(max, item.meta?.deskZ ?? 0), 0);
+  if (maxZ >= zCounter.value) zCounter.value = maxZ + 1;
+}, { immediate: true });
+function nextZIndex() {
+  return zCounter.value++;
+}
+const contextMenuPosition = ref(null);
+const contextMenuOpen = ref(false);
+const rightClickedItem = ref(null);
+const isSelecting = ref(false);
+const selectionRect = ref(null);
+const pointerDragActive = ref(false);
+const pointerDragAnchorId = ref(null);
+const pointerDragStart = ref(null);
+const pointerDragOrigPositions = ref({});
+const touchStartTime = ref(0);
+const touchStartPos = ref(null);
+const isTouchDragging = ref(false);
+const showLongPressIndicator = ref(false);
+const longPressPosition = ref(null);
+const DOUBLE_TAP_DELAY = 300;
+const lastTapTime = ref(0);
+const lastTapItemId = ref(null);
+const widgetProviders = reactive({});
+const widgetLoadingIds = ref(/* @__PURE__ */ new Set());
+const widgetErrors = reactive({});
+async function loadWidgetProvider(childId) {
+  if (widgetProviders[childId] || widgetLoadingIds.value.has(childId)) return;
+  widgetLoadingIds.value.add(childId);
+  delete widgetErrors[childId];
+  try {
+    const prov = await childProviderRef.value.loadChild(childId);
+    if (!prov.isSynced) {
+      await new Promise((resolve) => {
+        const done = () => {
+          prov.off("synced", done);
+          resolve();
+        };
+        prov.on("synced", done);
+        setTimeout(resolve, 6e3);
+      });
+    }
+    await nextTick();
+    widgetProviders[childId] = markRaw(prov);
+  } catch (e) {
+    console.error("Failed to load widget provider:", e);
+    widgetErrors[childId] = e instanceof Error ? e.message : "Failed to load";
+  } finally {
+    widgetLoadingIds.value.delete(childId);
+  }
+}
+onErrorCaptured((err) => {
+  if (err?.message?.includes("Unexpected case") || err?.message?.includes("findRootTypeKey")) {
+    console.warn("Widget Yjs sync error (non-fatal):", err);
+    return false;
+  }
+});
+watch(
+  children,
+  (items) => {
+    items.forEach((item) => {
+      const mode = item.meta?.deskMode;
+      if ((mode === "widget-sm" || mode === "widget-lg") && !widgetProviders[item.id]) {
+        loadWidgetProvider(item.id);
+      }
+    });
+  },
+  { immediate: true }
+);
+let activeResizeId = null;
+let resizeDir = "";
+let resizeStartX = 0;
+let resizeStartY = 0;
+let resizeStartW = 0;
+let resizeStartH = 0;
+let resizeStartPosX = 0;
+let resizeStartPosY = 0;
+const isRenameModalOpen = ref(false);
+const renameNewName = ref("");
+const itemToRename = ref(null);
+const isConfirmModalOpen = ref(false);
+const confirmModalTitle = ref("");
+const confirmModalMessage = ref("");
+const confirmAction = ref(() => {
+});
+const widgetScrollEls = /* @__PURE__ */ new Map();
+const widgetBodyCleanup = /* @__PURE__ */ new Map();
+const suppressScrollEcho = /* @__PURE__ */ new Set();
+const scrollTrailingTimers = /* @__PURE__ */ new Map();
+function registerWidgetBody(el, id) {
+  widgetBodyCleanup.get(id)?.();
+  widgetBodyCleanup.delete(id);
+  widgetScrollEls.delete(id);
+  if (el instanceof HTMLElement) {
+    const handler = (event) => {
+      const scrollEl = event.target;
+      widgetScrollEls.set(id, scrollEl);
+      if (suppressScrollEcho.has(id)) return;
+      const existing = scrollTrailingTimers.get(id);
+      if (existing) clearTimeout(existing);
+      scrollTrailingTimers.set(id, setTimeout(() => {
+        scrollTrailingTimers.delete(id);
+        tree.updateMeta(id, { deskScrollY: Math.round(scrollEl.scrollTop) });
+      }, 80));
+    };
+    el.addEventListener("scroll", handler, true);
+    widgetBodyCleanup.set(id, () => {
+      el.removeEventListener("scroll", handler, true);
+      const t = scrollTrailingTimers.get(id);
+      if (t) clearTimeout(t);
+      scrollTrailingTimers.delete(id);
+    });
+    const entry = children.value.find((c) => c.id === id);
+    const scrollY2 = entry?.meta?.deskScrollY;
+    if (scrollY2 != null && scrollY2 > 0) {
+      nextTick(() => {
+        suppressScrollEcho.add(id);
+        el.scrollTop = scrollY2;
+        const inner = el.querySelector('[class*="overflow"]');
+        if (inner) {
+          inner.scrollTop = scrollY2;
+          widgetScrollEls.set(id, inner);
+        }
+        requestAnimationFrame(() => suppressScrollEcho.delete(id));
+      });
+    }
+  }
+}
+watch(children, (items) => {
+  for (const item of items) {
+    const scrollY2 = item.meta?.deskScrollY;
+    if (scrollY2 == null) continue;
+    if (scrollTrailingTimers.has(item.id)) continue;
+    const el = widgetScrollEls.get(item.id);
+    if (el && Math.abs(el.scrollTop - scrollY2) > 2) {
+      suppressScrollEcho.add(item.id);
+      el.scrollTop = scrollY2;
+      requestAnimationFrame(() => suppressScrollEcho.delete(item.id));
+    }
+  }
+}, { deep: true });
+function getWidgetMode(id) {
+  const entry = children.value.find((c) => c.id === id);
+  return entry?.meta?.deskMode || "icon";
+}
+function getItemSize(id) {
+  if (temporarySizes[id]) return temporarySizes[id];
+  const entry = children.value.find((c) => c.id === id);
+  const mode = getWidgetMode(id);
+  if (mode === "widget-sm" || mode === "widget-lg") {
+    if (entry?.meta?.deskW && entry?.meta?.deskH) {
+      return { w: entry.meta.deskW, h: entry.meta.deskH };
+    }
+    return mode === "widget-sm" ? { ...WIDGET_SM } : { ...WIDGET_LG };
+  }
+  return { w: GRID_SIZE, h: GRID_SIZE + 24 };
+}
+function getIconPosition(id) {
+  if (temporaryPositions[id]) return temporaryPositions[id];
+  const entry = children.value.find((c) => c.id === id);
+  if (entry?.meta?.deskX !== void 0 && entry?.meta?.deskY !== void 0) {
+    return { x: entry.meta.deskX, y: entry.meta.deskY };
+  }
+  const pos = getDefaultPosition(id);
+  tree.updateMeta(id, { deskX: pos.x, deskY: pos.y });
+  return pos;
+}
+function getIconStyle(id) {
+  const pos = getIconPosition(id);
+  const entry = children.value.find((c) => c.id === id);
+  const z = entry?.meta?.deskZ ?? 0;
+  const dragging = pointerDragActive.value && (selectedIds.value.has(id) || pointerDragAnchorId.value === id);
+  return {
+    transform: `translate(${pos.x}px, ${pos.y}px)`,
+    zIndex: String(dragging ? 999999 : z),
+    willChange: dragging ? "transform" : "auto",
+    transition: dragging ? "none" : "transform 0.12s cubic-bezier(0.4, 0, 0.2, 1)"
+  };
+}
+const selectionRectStyle = computed(() => {
+  if (!selectionRect.value || !gridRef.value) return {};
+  const { startX, startY, endX, endY } = selectionRect.value;
+  const rect = gridRef.value.getBoundingClientRect();
+  return {
+    left: `${Math.min(startX, endX) - rect.left}px`,
+    top: `${Math.min(startY, endY) - rect.top}px`,
+    width: `${Math.abs(endX - startX)}px`,
+    height: `${Math.abs(endY - startY)}px`
+  };
+});
+function getDefaultPosition(excludeId) {
+  const columns = 10;
+  for (let row = 0; row < 100; row++) {
+    for (let col = 0; col < columns; col++) {
+      const pos = {
+        x: col * (GRID_SIZE + ICON_MARGIN) + ICON_MARGIN,
+        y: row * (GRID_SIZE + ICON_MARGIN) + ICON_MARGIN
+      };
+      if (!isPositionOccupied(pos, excludeId)) return pos;
+    }
+  }
+  return { x: ICON_MARGIN, y: ICON_MARGIN };
+}
+function isPositionOccupied(position, excludeId) {
+  const threshold = 40;
+  const checkTemp = Object.entries(temporaryPositions).some(([id, pos]) => {
+    if (id === excludeId) return false;
+    return Math.abs(pos.x - position.x) < threshold && Math.abs(pos.y - position.y) < threshold;
+  });
+  if (checkTemp) return true;
+  return children.value.some((item) => {
+    if (item.id === excludeId) return false;
+    const x = item.meta?.deskX;
+    const y = item.meta?.deskY;
+    if (x === void 0 || y === void 0) return false;
+    return Math.abs(x - position.x) < threshold && Math.abs(y - position.y) < threshold;
+  });
+}
+watch(
+  children,
+  (items, oldItems) => {
+    const oldIds = new Set(oldItems?.map((i) => i.id) ?? []);
+    items.forEach((item) => {
+      if (item.meta?.deskX === void 0) {
+        const pos = !oldIds.has(item.id) && contextMenuPosition.value ? { ...contextMenuPosition.value } : getDefaultPosition(item.id);
+        contextMenuPosition.value = null;
+        const z = nextZIndex();
+        tree.updateMeta(item.id, { deskX: pos.x, deskY: pos.y, deskZ: z });
+      }
+    });
+  },
+  { immediate: true }
+);
+function cleanUp() {
+  if (!props.editable) return;
+  const el = scrollContainerRef.value;
+  if (!el) return;
+  const containerW = el.clientWidth - ICON_MARGIN * 2;
+  const gap = ICON_MARGIN;
+  const sorted = [...children.value].sort((a, b) => {
+    const sa = getItemSize(a.id);
+    const sb = getItemSize(b.id);
+    const areaA = sa.w * sa.h;
+    const areaB = sb.w * sb.h;
+    if (areaA !== areaB) return areaB - areaA;
+    const pa = { x: a.meta?.deskX ?? 0, y: a.meta?.deskY ?? 0 };
+    const pb = { x: b.meta?.deskX ?? 0, y: b.meta?.deskY ?? 0 };
+    if (Math.abs(pa.y - pb.y) < GRID_SIZE / 2) return pa.x - pb.x;
+    return pa.y - pb.y;
+  });
+  const skyline = [{ x: 0, y: 0, w: containerW }];
+  function findPlacement(itemW, itemH) {
+    let bestY = Infinity;
+    let bestX = 0;
+    for (let i = 0; i < skyline.length; i++) {
+      let maxY = 0;
+      let spanW = 0;
+      let fits = true;
+      for (let j = i; j < skyline.length && spanW < itemW; j++) {
+        maxY = Math.max(maxY, skyline[j].y);
+        spanW += skyline[j].w;
+        if (skyline[j].x + skyline[j].w > containerW) {
+          fits = false;
+          break;
+        }
+      }
+      if (!fits || spanW < itemW) continue;
+      if (maxY < bestY) {
+        bestY = maxY;
+        bestX = skyline[i].x;
+      }
+    }
+    if (bestY === Infinity) {
+      bestY = Math.max(...skyline.map((s) => s.y));
+      bestX = 0;
+    }
+    const newBottom = bestY + itemH + gap;
+    const leftEdge = bestX;
+    const rightEdge = bestX + itemW;
+    const updated = [];
+    for (const seg of skyline) {
+      const segRight = seg.x + seg.w;
+      if (segRight <= leftEdge || seg.x >= rightEdge) {
+        updated.push(seg);
+      } else {
+        if (seg.x < leftEdge) updated.push({ x: seg.x, y: seg.y, w: leftEdge - seg.x });
+        if (segRight > rightEdge) updated.push({ x: rightEdge, y: seg.y, w: segRight - rightEdge });
+      }
+    }
+    updated.push({ x: leftEdge, y: newBottom, w: itemW });
+    updated.sort((a, b) => a.x - b.x);
+    skyline.length = 0;
+    skyline.push(...updated);
+    return { x: leftEdge, y: bestY };
+  }
+  Object.keys(temporaryPositions).forEach((id) => delete temporaryPositions[id]);
+  for (const item of sorted) {
+    const size = getItemSize(item.id);
+    const w = Math.min(size.w, containerW);
+    const pos = findPlacement(w, size.h);
+    tree.updateMeta(item.id, {
+      deskX: pos.x + ICON_MARGIN,
+      deskY: pos.y + ICON_MARGIN
+    });
+  }
+}
+function handleDesktopMouseDown(event) {
+  if (!props.editable) return;
+  if (event.button !== 0) return;
+  const target = event.target;
+  if (target !== gridRef.value) return;
+  isSelecting.value = true;
+  selectionRect.value = {
+    startX: event.clientX,
+    startY: event.clientY,
+    endX: event.clientX,
+    endY: event.clientY
+  };
+  if (!event.ctrlKey && !event.metaKey) selectedIds.value.clear();
+  document.body.classList.add("nointeract");
+  document.addEventListener("mousemove", handleSelectionMouseMove);
+  document.addEventListener("mouseup", handleSelectionMouseUp);
+}
+function handleSelectionMouseMove(event) {
+  if (!isSelecting.value || !selectionRect.value) return;
+  selectionRect.value.endX = event.clientX;
+  selectionRect.value.endY = event.clientY;
+  children.value.forEach((item) => {
+    if (isItemInSelection(item.id)) selectedIds.value.add(item.id);
+    else if (!event.ctrlKey && !event.metaKey) selectedIds.value.delete(item.id);
+  });
+}
+function handleSelectionMouseUp() {
+  isSelecting.value = false;
+  selectionRect.value = null;
+  document.body.classList.remove("nointeract");
+  document.removeEventListener("mousemove", handleSelectionMouseMove);
+  document.removeEventListener("mouseup", handleSelectionMouseUp);
+}
+function handleDesktopTouchStart(event) {
+  if (!props.editable) return;
+  if (event.touches.length !== 1 || event.target !== gridRef.value) return;
+  const touch = event.touches[0];
+  touchStartPos.value = { x: touch.clientX, y: touch.clientY };
+  touchStartTime.value = Date.now();
+  isTouchDragging.value = false;
+  isSelecting.value = true;
+  selectionRect.value = {
+    startX: touch.clientX,
+    startY: touch.clientY,
+    endX: touch.clientX,
+    endY: touch.clientY
+  };
+  selectedIds.value.clear();
+  setTimeout(() => {
+    if (touchStartPos.value && !isTouchDragging.value && Date.now() - touchStartTime.value >= 200) {
+      showLongPressIndicator.value = true;
+      longPressPosition.value = { ...touchStartPos.value };
+    }
+  }, 200);
+}
+function handleTouchMove(event) {
+  if (event.touches.length !== 1 || !isSelecting.value || !selectionRect.value || !touchStartPos.value) return;
+  const touch = event.touches[0];
+  if (Math.abs(touch.clientX - touchStartPos.value.x) > 10 || Math.abs(touch.clientY - touchStartPos.value.y) > 10) {
+    isTouchDragging.value = true;
+    showLongPressIndicator.value = false;
+    selectionRect.value.endX = touch.clientX;
+    selectionRect.value.endY = touch.clientY;
+    children.value.forEach((item) => {
+      if (isItemInSelection(item.id)) selectedIds.value.add(item.id);
+      else selectedIds.value.delete(item.id);
+    });
+  }
+}
+function handleTouchEnd() {
+  isSelecting.value = false;
+  selectionRect.value = null;
+  showLongPressIndicator.value = false;
+  longPressPosition.value = null;
+  touchStartPos.value = null;
+  touchStartTime.value = 0;
+  isTouchDragging.value = false;
+}
+function handleIconTouchStart(event, item) {
+  if (!props.editable) return;
+  if (event.touches.length !== 1) return;
+  const touch = event.touches[0];
+  touchStartPos.value = { x: touch.clientX, y: touch.clientY };
+  touchStartTime.value = Date.now();
+  isTouchDragging.value = false;
+  if (!selectedIds.value.has(item.id)) {
+    selectedIds.value.clear();
+    selectedIds.value.add(item.id);
+  }
+  setTimeout(() => {
+    if (touchStartPos.value && !isTouchDragging.value && Date.now() - touchStartTime.value >= 500) {
+      showLongPressIndicator.value = false;
+      rightClickedItem.value = item;
+    }
+  }, 500);
+}
+function handleIconTouchEnd(event, item) {
+  if (!isTouchDragging.value && touchStartTime.value) {
+    const duration = Date.now() - touchStartTime.value;
+    if (duration < 500 && touchStartPos.value) {
+      const touch = event.changedTouches[0];
+      if (Math.abs(touch.clientX - touchStartPos.value.x) < 10 && Math.abs(touch.clientY - touchStartPos.value.y) < 10) {
+        const now = Date.now();
+        if (now - lastTapTime.value < DOUBLE_TAP_DELAY && lastTapItemId.value === item.id) {
+          openNode(item.id, item.label);
+          lastTapTime.value = 0;
+          lastTapItemId.value = null;
+        } else {
+          lastTapTime.value = now;
+          lastTapItemId.value = item.id;
+        }
+      }
+    }
+  }
+  touchStartPos.value = null;
+  touchStartTime.value = 0;
+  isTouchDragging.value = false;
+  showLongPressIndicator.value = false;
+}
+function isItemInSelection(id) {
+  if (!selectionRect.value || !gridRef.value) return false;
+  const { startX, startY, endX, endY } = selectionRect.value;
+  const gridRect = gridRef.value.getBoundingClientRect();
+  const selLeft = Math.min(startX, endX);
+  const selRight = Math.max(startX, endX);
+  const selTop = Math.min(startY, endY);
+  const selBottom = Math.max(startY, endY);
+  const pos = getIconPosition(id);
+  const size = getItemSize(id);
+  const itemLeft = pos.x + gridRect.left;
+  const itemTop = pos.y + gridRect.top;
+  const itemRight = itemLeft + size.w;
+  const itemBottom = itemTop + size.h;
+  return itemRight >= selLeft && itemLeft <= selRight && itemBottom >= selTop && itemTop <= selBottom;
+}
+function handleWidgetHeaderPointerDown(event, id) {
+  if (event.target.closest('button, a, input, select, [role="button"]')) return;
+  handleIconPointerDown(event, id);
+}
+function handleIconPointerDown(event, id) {
+  if (!props.editable) return;
+  if (event.button !== 0) return;
+  tree.updateMeta(id, { deskZ: nextZIndex() });
+  if (!event.ctrlKey && !event.metaKey && !selectedIds.value.has(id)) selectedIds.value.clear();
+  selectedIds.value.add(id);
+  const el = event.currentTarget;
+  el.setPointerCapture(event.pointerId);
+  pointerDragAnchorId.value = id;
+  pointerDragStart.value = { ex: event.clientX, ey: event.clientY };
+  const origPositions = {};
+  selectedIds.value.forEach((sid) => {
+    origPositions[sid] = { ...getIconPosition(sid) };
+  });
+  pointerDragOrigPositions.value = origPositions;
+}
+function handleIconPointerMove(event, id) {
+  if (pointerDragAnchorId.value !== id || !pointerDragStart.value) return;
+  const dx = event.clientX - pointerDragStart.value.ex;
+  const dy = event.clientY - pointerDragStart.value.ey;
+  if (!pointerDragActive.value && (Math.abs(dx) > 3 || Math.abs(dy) > 3)) {
+    pointerDragActive.value = true;
+    document.body.classList.add("nointeract");
+  }
+  if (!pointerDragActive.value) return;
+  Object.entries(pointerDragOrigPositions.value).forEach(([sid, orig]) => {
+    const newX = Math.max(0, orig.x + dx);
+    const newY = Math.max(0, orig.y + dy);
+    temporaryPositions[sid] = { x: newX, y: newY };
+  });
+  if (scrollContainerRef.value) {
+    const sr = scrollContainerRef.value.getBoundingClientRect();
+    const edge = 50;
+    const speed = 12;
+    if (event.clientX > sr.right - edge) scrollContainerRef.value.scrollBy(speed, 0);
+    else if (event.clientX < sr.left + edge) scrollContainerRef.value.scrollBy(-speed, 0);
+    if (event.clientY > sr.bottom - edge) scrollContainerRef.value.scrollBy(0, speed);
+    else if (event.clientY < sr.top + edge) scrollContainerRef.value.scrollBy(0, -speed);
+  }
+}
+function handleIconPointerUp(event, id) {
+  if (pointerDragAnchorId.value !== id) return;
+  event.currentTarget.releasePointerCapture(event.pointerId);
+  if (pointerDragActive.value) {
+    Object.keys(pointerDragOrigPositions.value).forEach((sid) => {
+      const pos = temporaryPositions[sid];
+      if (pos) {
+        tree.updateMeta(sid, { deskX: pos.x, deskY: pos.y });
+        delete temporaryPositions[sid];
+      }
+    });
+    document.body.classList.remove("nointeract");
+  }
+  pointerDragActive.value = false;
+  pointerDragAnchorId.value = null;
+  pointerDragStart.value = null;
+  pointerDragOrigPositions.value = {};
+}
+function handleIconDblClick(item) {
+  openNode(item.id, item.label);
+}
+function onWidgetResizeStart(event, id, dir) {
+  if (!props.editable) return;
+  event.preventDefault();
+  event.stopPropagation();
+  event.currentTarget.setPointerCapture(event.pointerId);
+  const size = getItemSize(id);
+  const pos = getIconPosition(id);
+  activeResizeId = id;
+  resizeDir = dir;
+  resizeStartX = event.clientX;
+  resizeStartY = event.clientY;
+  resizeStartW = size.w;
+  resizeStartH = size.h;
+  resizeStartPosX = pos.x;
+  resizeStartPosY = pos.y;
+  temporarySizes[id] = { ...size };
+  temporaryPositions[id] = { ...pos };
+  document.body.classList.add("nointeract");
+}
+function onWidgetResizeMove(event, id) {
+  if (activeResizeId !== id) return;
+  const dx = event.clientX - resizeStartX;
+  const dy = event.clientY - resizeStartY;
+  let newW = resizeStartW;
+  let newH = resizeStartH;
+  let newX = resizeStartPosX;
+  let newY = resizeStartPosY;
+  if (resizeDir.includes("e")) newW = Math.max(MIN_WIDGET_W, resizeStartW + dx);
+  if (resizeDir.includes("w")) {
+    newW = Math.max(MIN_WIDGET_W, resizeStartW - dx);
+    newX = resizeStartPosX + (resizeStartW - newW);
+  }
+  if (resizeDir.includes("s")) newH = Math.max(MIN_WIDGET_H, resizeStartH + dy);
+  if (resizeDir.includes("n")) {
+    newH = Math.max(MIN_WIDGET_H, resizeStartH - dy);
+    newY = resizeStartPosY + (resizeStartH - newH);
+  }
+  temporarySizes[id] = { w: newW, h: newH };
+  temporaryPositions[id] = { x: newX, y: newY };
+}
+function onWidgetResizeEnd(event, id) {
+  if (activeResizeId !== id) return;
+  event.currentTarget.releasePointerCapture(event.pointerId);
+  const size = temporarySizes[id];
+  const pos = temporaryPositions[id];
+  if (size) {
+    tree.updateMeta(id, { deskW: size.w, deskH: size.h });
+    delete temporarySizes[id];
+  }
+  if (pos) {
+    tree.updateMeta(id, { deskX: pos.x, deskY: pos.y });
+    delete temporaryPositions[id];
+  }
+  activeResizeId = null;
+  document.body.classList.remove("nointeract");
+}
+function onIconResizeStart(event, id, dir) {
+  if (!props.editable) return;
+  event.preventDefault();
+  event.stopPropagation();
+  const currentSize = { w: GRID_SIZE, h: GRID_SIZE + 24 };
+  const pos = getIconPosition(id);
+  activeResizeId = id;
+  resizeDir = dir;
+  resizeStartX = event.clientX;
+  resizeStartY = event.clientY;
+  resizeStartW = currentSize.w;
+  resizeStartH = currentSize.h;
+  resizeStartPosX = pos.x;
+  resizeStartPosY = pos.y;
+  temporarySizes[id] = { ...currentSize };
+  temporaryPositions[id] = { ...pos };
+  document.body.classList.add("nointeract");
+  tree.updateMeta(id, { deskMode: "widget-sm", deskW: currentSize.w, deskH: currentSize.h });
+  loadWidgetProvider(id);
+  document.addEventListener("pointermove", onIconResizeDocMove);
+  document.addEventListener("pointerup", onIconResizeDocUp);
+}
+function onIconResizeDocMove(event) {
+  if (!activeResizeId) return;
+  const id = activeResizeId;
+  const dx = event.clientX - resizeStartX;
+  const dy = event.clientY - resizeStartY;
+  let newW = resizeStartW;
+  let newH = resizeStartH;
+  let newX = resizeStartPosX;
+  let newY = resizeStartPosY;
+  if (resizeDir.includes("e")) newW = Math.max(MIN_WIDGET_W, resizeStartW + dx);
+  if (resizeDir.includes("w")) {
+    newW = Math.max(MIN_WIDGET_W, resizeStartW - dx);
+    newX = resizeStartPosX + (resizeStartW - newW);
+  }
+  if (resizeDir.includes("s")) newH = Math.max(MIN_WIDGET_H, resizeStartH + dy);
+  if (resizeDir.includes("n")) {
+    newH = Math.max(MIN_WIDGET_H, resizeStartH - dy);
+    newY = resizeStartPosY + (resizeStartH - newH);
+  }
+  temporarySizes[id] = { w: newW, h: newH };
+  temporaryPositions[id] = { x: newX, y: newY };
+}
+function onIconResizeDocUp() {
+  document.removeEventListener("pointermove", onIconResizeDocMove);
+  document.removeEventListener("pointerup", onIconResizeDocUp);
+  if (!activeResizeId) return;
+  const id = activeResizeId;
+  const size = temporarySizes[id];
+  const pos = temporaryPositions[id];
+  if (size) {
+    if (size.w <= GRID_SIZE + 20 && size.h <= GRID_SIZE + 30) {
+      tree.updateMeta(id, { deskMode: "icon" });
+    } else {
+      tree.updateMeta(id, { deskW: size.w, deskH: size.h });
+    }
+    delete temporarySizes[id];
+  }
+  if (pos) {
+    tree.updateMeta(id, { deskX: pos.x, deskY: pos.y });
+    delete temporaryPositions[id];
+  }
+  activeResizeId = null;
+  document.body.classList.remove("nointeract");
+}
+function handleContextMenuCapture(event) {
+  if (!props.editable) return;
+  if (gridRef.value) {
+    const rect = gridRef.value.getBoundingClientRect();
+    contextMenuPosition.value = {
+      x: event.clientX - rect.left,
+      y: event.clientY - rect.top
+    };
+  }
+  const target = event.target;
+  const iconEl = target.closest("[data-icon-id]");
+  if (iconEl) {
+    const id = iconEl.getAttribute("data-icon-id");
+    const item = children.value.find((c) => c.id === id);
+    if (item) {
+      if (!selectedIds.value.has(item.id)) {
+        selectedIds.value.clear();
+        selectedIds.value.add(item.id);
+      }
+      rightClickedItem.value = item;
+    }
+  } else {
+    rightClickedItem.value = null;
+  }
+}
+function createNewItem() {
+  if (!props.editable) return;
+  tree.createChild(null, locale.value.untitled);
+}
+function startRename(item) {
+  if (!props.editable) return;
+  itemToRename.value = item;
+  renameNewName.value = item.label;
+  isRenameModalOpen.value = true;
+}
+function confirmRename() {
+  if (!itemToRename.value || !renameNewName.value.trim() || renameNewName.value === itemToRename.value.label) {
+    isRenameModalOpen.value = false;
+    return;
+  }
+  tree.renameEntry(itemToRename.value.id, renameNewName.value);
+  isRenameModalOpen.value = false;
+  itemToRename.value = null;
+}
+function deleteItem(item) {
+  confirmModalTitle.value = "Confirm Delete";
+  confirmModalMessage.value = `Are you sure you want to delete "${item.label}"?`;
+  confirmAction.value = () => {
+    tree.deleteEntry(item.id);
+    selectedIds.value.delete(item.id);
+    delete temporaryPositions[item.id];
+    delete widgetProviders[item.id];
+  };
+  isConfirmModalOpen.value = true;
+}
+function deleteSelected() {
+  const count = selectedIds.value.size;
+  confirmModalTitle.value = "Confirm Delete";
+  confirmModalMessage.value = `Are you sure you want to delete ${count} item${count > 1 ? "s" : ""}?`;
+  confirmAction.value = () => {
+    selectedIds.value.forEach((id) => {
+      tree.deleteEntry(id);
+      delete temporaryPositions[id];
+      delete widgetProviders[id];
+    });
+    selectedIds.value.clear();
+  };
+  isConfirmModalOpen.value = true;
+}
+function handleConfirmAction() {
+  confirmAction.value();
+  isConfirmModalOpen.value = false;
+}
+function setWidgetMode(id, mode) {
+  if (!props.editable) return;
+  tree.updateMeta(id, { deskMode: mode });
+  if (mode !== "icon" && !widgetProviders[id]) {
+    loadWidgetProvider(id);
+  }
+}
+const contextMenuItems = computed(() => {
+  if (rightClickedItem.value) {
+    const item = rightClickedItem.value;
+    const currentMode = getWidgetMode(item.id);
+    return [
+      [
+        { label: "Open", icon: "i-lucide-external-link", onSelect: () => openNode(item.id, item.label) }
+      ],
+      [
+        { label: "Rename", icon: "i-lucide-pencil", onSelect: () => startRename(item) },
+        {
+          label: "Duplicate",
+          icon: "i-lucide-copy",
+          onSelect: () => {
+            const newId = tree.duplicateEntry(item.id);
+            const pos = getIconPosition(item.id);
+            tree.updateMeta(newId, { deskX: pos.x + 20, deskY: pos.y + 20 });
+          }
+        }
+      ],
+      [
+        { label: locale.value.modeIcon, icon: "i-lucide-square", disabled: currentMode === "icon", onSelect: () => setWidgetMode(item.id, "icon") },
+        { label: locale.value.modeWidgetSm, icon: "i-lucide-rectangle-horizontal", disabled: currentMode === "widget-sm", onSelect: () => setWidgetMode(item.id, "widget-sm") },
+        { label: locale.value.modeWidgetLg, icon: "i-lucide-maximize-2", disabled: currentMode === "widget-lg", onSelect: () => setWidgetMode(item.id, "widget-lg") }
+      ],
+      [
+        ...selectedIds.value.size > 1 ? [{ label: `Delete Selected (${selectedIds.value.size})`, icon: "i-lucide-trash-2", color: "error", onSelect: deleteSelected }] : [{ label: "Delete", icon: "i-lucide-trash-2", color: "error", onSelect: () => deleteItem(item) }]
+      ]
+    ];
+  }
+  const groups = [
+    [{ label: locale.value.addItem, icon: "i-lucide-file-plus", onSelect: createNewItem }],
+    [{ label: locale.value.cleanUp, icon: "i-lucide-layout-grid", onSelect: cleanUp }]
+  ];
+  if (selectedIds.value.size > 0) {
+    groups.push([{
+      label: `Delete Selected (${selectedIds.value.size})`,
+      icon: "i-lucide-trash-2",
+      color: "error",
+      onSelect: deleteSelected
+    }]);
+  }
+  return groups;
+});
+watch(childDoc, (doc) => {
+  if (!doc) return;
+  const legacyPos = doc.getMap("desktop-icon-positions");
+  legacyPos.forEach((val, id) => {
+    const entry = tree.treeMap.get(id);
+    if (entry && entry.meta?.deskX === void 0) {
+      tree.updateMeta(id, { deskX: val.x ?? 0, deskY: val.y ?? 0 });
+    }
+  });
+  const legacyModes = doc.getMap("dashboard-widget-modes");
+  legacyModes.forEach((val, id) => {
+    const entry = tree.treeMap.get(id);
+    if (entry && entry.meta?.deskMode === void 0) {
+      tree.updateMeta(id, { deskMode: val });
+    }
+  });
+}, { immediate: true });
+let cursorBroadcastFrame = 0;
+function onGridPointerMove(e) {
+  if (!gridRef.value) return;
+  cursorBroadcastFrame++;
+  if (cursorBroadcastFrame % 2 !== 0) return;
+  const rect = gridRef.value.getBoundingClientRect();
+  const x = e.clientX - rect.left;
+  const y = e.clientY - rect.top;
+  setLocalState({ pos: { x, y } });
+}
+function onGridPointerLeave() {
+  setLocalState({ pos: null });
+}
+const localHoveredItemId = ref(null);
+function broadcastItemState() {
+  const ids = [...selectedIds.value];
+  setLocalState({
+    itemSelection: ids.length ? ids : null,
+    itemDragging: pointerDragActive.value,
+    itemHover: localHoveredItemId.value
+  });
+}
+function onItemPointerEnter(id) {
+  localHoveredItemId.value = id;
+  broadcastItemState();
+}
+function onItemPointerLeave() {
+  localHoveredItemId.value = null;
+  broadcastItemState();
+}
+watch(selectedIds, broadcastItemState, { deep: true });
+watch(pointerDragActive, broadcastItemState);
+const remoteItemPresence = computed(() => {
+  const map = /* @__PURE__ */ new Map();
+  const localId = childProviderRef.value?.awareness?.clientID ?? 0;
+  for (const s of states.value) {
+    if (s.clientId === localId) continue;
+    const selection = s.itemSelection;
+    const dragging = !!s.itemDragging;
+    const hoverId = s.itemHover;
+    const name = s.user?.name ?? "";
+    const color = s.user?.color || "#6b7280";
+    const itemIds = /* @__PURE__ */ new Set();
+    if (selection) selection.forEach((id) => itemIds.add(id));
+    if (hoverId) itemIds.add(hoverId);
+    for (const id of itemIds) {
+      if (!map.has(id)) map.set(id, []);
+      const isSelected = selection?.includes(id) ?? false;
+      map.get(id).push({ clientId: s.clientId, name, color, dragging: dragging && isSelected });
+    }
+  }
+  return map;
+});
+function getItemPresenceStyle(id) {
+  const users = remoteItemPresence.value.get(id);
+  if (!users?.length) return null;
+  const primary = users[0];
+  const isSelected = states.value.some((s) => {
+    if (s.clientId === (childProviderRef.value?.awareness?.clientID ?? 0)) return false;
+    return s.itemSelection?.includes(id);
+  });
+  const style = isSelected || primary.dragging ? "solid" : "dashed";
+  return {
+    outline: `2px ${style} ${primary.color}`,
+    outlineOffset: "2px",
+    borderRadius: "10px"
+  };
+}
+const scrollX = ref(0);
+const scrollY = ref(0);
+const viewportW = ref(0);
+const viewportH = ref(0);
+function onScrollContainerScroll() {
+  const el = scrollContainerRef.value;
+  if (!el) return;
+  scrollX.value = el.scrollLeft;
+  scrollY.value = el.scrollTop;
+  viewportW.value = el.clientWidth;
+  viewportH.value = el.clientHeight;
+}
+onMounted(() => {
+  const el = scrollContainerRef.value;
+  if (el) {
+    el.addEventListener("scroll", onScrollContainerScroll, { passive: true });
+    onScrollContainerScroll();
+    const ro = new ResizeObserver(onScrollContainerScroll);
+    ro.observe(el);
+    onBeforeUnmount(() => {
+      el.removeEventListener("scroll", onScrollContainerScroll);
+      ro.disconnect();
+    });
+  }
+});
+const EDGE_INSET = 12;
+const edgeCursors = computed(() => {
+  const vx = scrollX.value;
+  const vy = scrollY.value;
+  const vw = viewportW.value;
+  const vh = viewportH.value;
+  if (!vw || !vh) return [];
+  const result = [];
+  for (const c of cursors.value) {
+    const cx = c.x;
+    const cy = c.y;
+    if (cx >= vx && cx <= vx + vw && cy >= vy && cy <= vy + vh) continue;
+    const localX = cx - vx;
+    const localY = cy - vy;
+    const clampedX = Math.max(EDGE_INSET, Math.min(vw - EDGE_INSET, localX));
+    const clampedY = Math.max(EDGE_INSET, Math.min(vh - EDGE_INSET, localY));
+    const angle = Math.atan2(localY - vh / 2, localX - vw / 2) * (180 / Math.PI);
+    result.push({
+      clientId: c.clientId,
+      x: clampedX,
+      y: clampedY,
+      angle,
+      color: c.state?.user?.color || "#6b7280",
+      name: c.state?.user?.name || ""
+    });
+  }
+  return result;
+});
+onBeforeUnmount(() => {
+  setLocalState({ pos: null, itemSelection: null, itemDragging: false, itemHover: null });
+  for (const cleanup of widgetBodyCleanup.values()) cleanup();
+  widgetBodyCleanup.clear();
+});
+defineExpose({ connectedUsers });
+</script>
+
+<template>
+  <div
+    class="dashboard-renderer relative w-full flex-1 min-h-0 select-none"
+    @contextmenu.capture="handleContextMenuCapture"
+  >
+    <!-- Empty state -->
+    <div
+      v-if="children.length === 0"
+      class="flex flex-col items-center justify-center h-full gap-3 text-center"
+    >
+      <UIcon
+        name="i-lucide-layout-dashboard"
+        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.addItem"
+        size="sm"
+        @click="createNewItem"
+      />
+    </div>
+
+    <UContextMenu
+      v-else
+      v-model:open="contextMenuOpen"
+      :items="editable ? contextMenuItems : []"
+      class="absolute inset-0"
+    >
+      <div
+        ref="scrollContainerRef"
+        class="absolute inset-0 overflow-auto"
+      >
+        <div
+          ref="gridRef"
+          class="relative"
+          :style="{ width: canvasSize.w + 'px', height: canvasSize.h + 'px', minWidth: '100%', minHeight: '100%' }"
+          @mousedown="handleDesktopMouseDown"
+          @touchstart="handleDesktopTouchStart"
+          @touchmove="handleTouchMove"
+          @touchend="handleTouchEnd"
+          @pointermove="onGridPointerMove"
+          @pointerleave="onGridPointerLeave"
+        >
+          <!-- Collaborative Cursors -->
+          <TransitionGroup name="cursor">
+            <div
+              v-for="c in cursors"
+              :key="c.clientId"
+              class="dashboard-cursor"
+              :style="{ transform: `translate(${c.x}px, ${c.y}px)` }"
+            >
+              <svg
+                width="16"
+                height="16"
+                viewBox="0 0 16 16"
+                fill="none"
+              >
+                <path
+                  d="M2 2L7 14L9 9L14 7L2 2Z"
+                  :fill="c.state?.user?.color || '#6b7280'"
+                  stroke="rgba(0,0,0,.25)"
+                  stroke-width="1"
+                  stroke-linejoin="round"
+                />
+              </svg>
+              <span
+                class="dashboard-cursor-name"
+                :style="{ background: c.state?.user?.color || '#6b7280' }"
+              >{{ c.state?.user?.name || "" }}</span>
+            </div>
+          </TransitionGroup>
+
+          <!-- Selection Rectangle -->
+          <div
+            v-if="selectionRect"
+            class="dashboard-selection-rect absolute pointer-events-none"
+            :style="selectionRectStyle"
+          />
+
+          <!-- Long-press indicator -->
+          <div
+            v-if="showLongPressIndicator && longPressPosition && gridRef"
+            class="absolute pointer-events-none"
+            :style="{ left: longPressPosition.x - 20 - gridRef.getBoundingClientRect().left + 'px', top: longPressPosition.y - 20 - gridRef.getBoundingClientRect().top + 'px' }"
+          >
+            <div class="w-10 h-10 rounded-full bg-white/20 backdrop-blur-sm border border-white/30 flex items-center justify-center">
+              <div class="w-6 h-6 rounded-full border-2 border-white/60 border-t-white animate-spin" />
+            </div>
+          </div>
+
+          <!-- Icons & Widgets -->
+          <div
+            v-for="item in children"
+            :key="item.id"
+            :data-icon-id="item.id"
+            class="absolute select-none"
+            :style="getIconStyle(item.id)"
+          >
+            <!-- Icon Mode -->
+            <template v-if="getWidgetMode(item.id) === 'icon'">
+              <div
+                class="group relative flex flex-col items-center cursor-pointer touch-none"
+                @pointerdown.stop="handleIconPointerDown($event, item.id)"
+                @pointermove="handleIconPointerMove($event, item.id)"
+                @pointerup="handleIconPointerUp($event, item.id)"
+                @pointerenter="onItemPointerEnter(item.id)"
+                @pointerleave="onItemPointerLeave()"
+                @dblclick="handleIconDblClick(item)"
+                @touchstart.stop="handleIconTouchStart($event, item)"
+                @touchend="handleIconTouchEnd($event, item)"
+              >
+                <div
+                  :class="[
+  'w-16 h-16 flex items-center justify-center rounded-lg transition-colors duration-150',
+  selectedIds.has(item.id) ? 'dashboard-icon-selected' : 'hover:bg-(--ui-bg-elevated)/50'
+]"
+                  :style="getItemPresenceStyle(item.id) || {}"
+                >
+                  <UIcon
+                    :name="resolveDocType(item.type).icon"
+                    class="w-12 h-12 text-(--ui-text)"
+                  />
+                </div>
+                <div
+                  :class="[
+  'mt-1 px-2 py-0.5 rounded text-xs text-center max-w-24 line-clamp-2 break-words',
+  selectedIds.has(item.id) ? 'dashboard-label-selected text-white' : 'text-(--ui-text) drop-shadow-[0_1px_1px_rgba(0,0,0,0.3)]'
+]"
+                >
+                  {{ item.label }}
+                </div>
+                <!-- Remote user presence badges -->
+                <div
+                  v-if="remoteItemPresence.has(item.id)"
+                  class="flex gap-0.5 mt-0.5"
+                >
+                  <span
+                    v-for="u in remoteItemPresence.get(item.id)"
+                    :key="u.clientId"
+                    class="dashboard-presence-badge"
+                    :style="{ background: u.color }"
+                  >{{ u.name }}</span>
+                </div>
+                <!-- Resize handles (corners, visible on hover) -->
+                <div
+                  v-for="dir in ['se', 'sw', 'ne', 'nw']"
+                  v-if="editable"
+                  :key="dir"
+                  class="dw-resize dw-icon-resize opacity-0 group-hover:opacity-100 transition-opacity"
+                  :class="'dw-' + dir"
+                  @pointerdown.stop="onIconResizeStart($event, item.id, dir)"
+                  @pointermove="onWidgetResizeMove($event, item.id)"
+                  @pointerup="onWidgetResizeEnd($event, item.id)"
+                />
+              </div>
+            </template>
+
+            <!-- Widget Mode -->
+            <template v-else>
+              <div
+                class="dashboard-widget"
+                :class="{ 'dashboard-widget-selected': selectedIds.has(item.id) }"
+                :style="{ width: getItemSize(item.id).w + 'px', height: getItemSize(item.id).h + 'px', ...getItemPresenceStyle(item.id) || {} }"
+                @pointerenter="onItemPointerEnter(item.id)"
+                @pointerleave="onItemPointerLeave()"
+              >
+                <!-- Header -->
+                <div
+                  class="dashboard-widget-header touch-none"
+                  @pointerdown.stop="handleWidgetHeaderPointerDown($event, item.id)"
+                  @pointermove="handleIconPointerMove($event, item.id)"
+                  @pointerup="handleIconPointerUp($event, item.id)"
+                  @touchstart.stop="handleIconTouchStart($event, item)"
+                  @touchend="handleIconTouchEnd($event, item)"
+                >
+                  <UIcon
+                    :name="resolveDocType(item.type).icon"
+                    class="size-3.5 text-(--ui-text-muted) shrink-0"
+                  />
+                  <span
+                    class="text-xs font-medium text-(--ui-text) truncate"
+                    style="max-width: 80px"
+                  >{{ item.label }}</span>
+                  <div class="flex-1" />
+                  <div class="flex items-center gap-0.5 shrink-0">
+                    <UTooltip
+                      text="Open"
+                      :content="{ side: 'bottom' }"
+                    >
+                      <button
+                        class="dashboard-widget-btn"
+                        @click.stop="openNode(item.id, item.label)"
+                      >
+                        <UIcon
+                          name="i-lucide-expand"
+                          class="size-3"
+                        />
+                      </button>
+                    </UTooltip>
+                  </div>
+                </div>
+
+                <!-- Body -->
+                <div
+                  :ref="(el) => registerWidgetBody(el, item.id)"
+                  class="dashboard-widget-body"
+                >
+                  <template v-if="widgetProviders[item.id]">
+                    <component
+                      :is="resolveDocType(item.type).component"
+                      :doc-id="item.id"
+                      :child-provider="widgetProviders[item.id]"
+                      :doc-label="item.label"
+                      class="w-full h-full"
+                    />
+                  </template>
+                  <div
+                    v-else-if="widgetLoadingIds.has(item.id)"
+                    class="flex items-center justify-center h-full"
+                  >
+                    <UIcon
+                      name="i-lucide-loader-circle"
+                      class="size-5 animate-spin text-(--ui-text-muted)"
+                    />
+                  </div>
+                  <div
+                    v-else-if="widgetErrors[item.id]"
+                    class="flex flex-col items-center justify-center gap-2 h-full text-xs text-(--ui-text-dimmed)"
+                  >
+                    <UIcon
+                      name="i-lucide-alert-triangle"
+                      class="size-5 text-(--ui-text-muted)"
+                    />
+                    <span>{{ widgetErrors[item.id] }}</span>
+                    <UButton
+                      size="2xs"
+                      variant="soft"
+                      @click.stop="() => {
+  delete widgetProviders[item.id];
+  loadWidgetProvider(item.id);
+}"
+                    >
+                      Retry
+                    </UButton>
+                  </div>
+                  <div
+                    v-else
+                    class="flex items-center justify-center h-full text-xs text-(--ui-text-dimmed)"
+                  >
+                    Unable to load
+                  </div>
+                </div>
+
+                <!-- Resize handles -->
+                <template v-if="editable">
+                  <div
+                    v-for="dir in resizeDirs"
+                    :key="dir"
+                    class="dw-resize"
+                    :class="'dw-' + dir"
+                    @pointerdown.stop="onWidgetResizeStart($event, item.id, dir)"
+                    @pointermove="onWidgetResizeMove($event, item.id)"
+                    @pointerup="onWidgetResizeEnd($event, item.id)"
+                  />
+                </template>
+              </div>
+            </template>
+          </div>
+        </div>
+      </div>
+    </UContextMenu>
+
+    <!-- Off-screen cursor edge indicators -->
+    <TransitionGroup
+      name="cursor"
+      tag="div"
+      class="absolute inset-0 pointer-events-none"
+      style="z-index: 2147483647; overflow: hidden"
+    >
+      <div
+        v-for="ec in edgeCursors"
+        :key="'edge-' + ec.clientId"
+        class="dashboard-edge-cursor"
+        :style="{ transform: `translate(${ec.x}px, ${ec.y}px)` }"
+      >
+        <svg
+          width="14"
+          height="14"
+          viewBox="0 0 16 16"
+          fill="none"
+          :style="{ transform: `rotate(${ec.angle + 90}deg)` }"
+        >
+          <path
+            d="M8 2L14 14H2L8 2Z"
+            :fill="ec.color"
+            stroke="rgba(0,0,0,.25)"
+            stroke-width="1"
+            stroke-linejoin="round"
+          />
+        </svg>
+        <span
+          class="dashboard-edge-name"
+          :style="{ background: ec.color }"
+        >{{ ec.name }}</span>
+      </div>
+    </TransitionGroup>
+
+    <!-- Rename Modal -->
+    <UModal v-model:open="isRenameModalOpen">
+      <template #content>
+        <UCard>
+          <template #header>
+            <div class="flex items-center justify-between">
+              <h3 class="text-lg font-semibold">
+                Rename
+              </h3>
+              <UButton
+                color="neutral"
+                variant="ghost"
+                icon="i-lucide-x"
+                @click="isRenameModalOpen = false"
+              />
+            </div>
+          </template>
+          <div class="space-y-4">
+            <UInput
+              v-model="renameNewName"
+              placeholder="Enter new name"
+              autofocus
+              @keyup.enter="confirmRename"
+            />
+          </div>
+          <template #footer>
+            <div class="flex justify-end gap-2">
+              <UButton
+                color="neutral"
+                variant="outline"
+                @click="isRenameModalOpen = false"
+              >
+                Cancel
+              </UButton>
+              <UButton
+                :disabled="!renameNewName.trim()"
+                @click="confirmRename"
+              >
+                Rename
+              </UButton>
+            </div>
+          </template>
+        </UCard>
+      </template>
+    </UModal>
+
+    <!-- Confirm Delete Modal -->
+    <UModal v-model:open="isConfirmModalOpen">
+      <template #content>
+        <UCard>
+          <template #header>
+            <div class="flex items-center justify-between">
+              <h3 class="text-lg font-semibold">
+                {{ confirmModalTitle }}
+              </h3>
+              <UButton
+                color="neutral"
+                variant="ghost"
+                icon="i-lucide-x"
+                @click="isConfirmModalOpen = false"
+              />
+            </div>
+          </template>
+          <p>{{ confirmModalMessage }}</p>
+          <template #footer>
+            <div class="flex justify-end gap-2">
+              <UButton
+                color="neutral"
+                variant="outline"
+                @click="isConfirmModalOpen = false"
+              >
+                Cancel
+              </UButton>
+              <UButton
+                color="error"
+                @click="handleConfirmAction"
+              >
+                Delete
+              </UButton>
+            </div>
+          </template>
+        </UCard>
+      </template>
+    </UModal>
+
+    <!-- Node panel -->
+    <ANodePanel
+      :node-id="openNodeId"
+      :node-label="openNodeLabel"
+      :child-provider="openNodeProvider"
+      @close="closePanel"
+    />
+  </div>
+</template>
+
+<style scoped>
+.dashboard-selection-rect{background:color-mix(in srgb,var(--ui-primary) 10%,transparent);border:1px solid color-mix(in srgb,var(--ui-primary) 50%,transparent)}.dashboard-icon-selected{background:color-mix(in srgb,var(--ui-primary) 20%,transparent)}.dashboard-label-selected{background:var(--ui-primary)}.line-clamp-2{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.dashboard-widget{backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);background:var(--ui-bg);border:1px solid var(--ui-border);border-radius:10px;box-shadow:0 8px 32px rgba(0,0,0,.1),0 2px 8px rgba(0,0,0,.06);display:flex;flex-direction:column;opacity:.88;overflow:hidden;position:relative}.dashboard-widget-selected{border-color:var(--ui-primary);box-shadow:0 12px 48px rgba(0,0,0,.18),0 4px 12px rgba(0,0,0,.12);opacity:1;outline:2px solid var(--ui-primary);outline-offset:-1px}.dashboard-widget-header{align-items:center;background:var(--ui-bg-elevated);border-bottom:1px solid var(--ui-border);cursor:grab;display:flex;flex-shrink:0;gap:6px;height:34px;padding:0 4px 0 10px;-webkit-user-select:none;-moz-user-select:none;user-select:none}.dashboard-widget-header:active{cursor:grabbing}.dashboard-widget-btn{align-items:center;border-radius:var(--ui-radius);color:var(--ui-text-dimmed);cursor:pointer;display:flex;flex-shrink:0;height:22px;justify-content:center;transition:background .1s,color .1s;width:22px}.dashboard-widget-btn:hover{background:var(--ui-bg-accented);color:var(--ui-text)}.dashboard-widget-body{display:flex;flex:1;flex-direction:column;min-height:0;overflow:auto;-webkit-user-select:text;-moz-user-select:text;user-select:text}.dw-resize{position:absolute;z-index:10}.dw-n{cursor:n-resize;top:-3px}.dw-n,.dw-s{height:6px;left:10px;right:10px}.dw-s{bottom:-3px;cursor:s-resize}.dw-e{cursor:e-resize;right:-3px}.dw-e,.dw-w{bottom:10px;top:10px;width:6px}.dw-w{cursor:w-resize;left:-3px}.dw-ne{cursor:ne-resize;right:-3px}.dw-ne,.dw-nw{height:14px;top:-3px;width:14px}.dw-nw{cursor:nw-resize;left:-3px}.dw-se{cursor:se-resize;right:-3px}.dw-se,.dw-sw{bottom:-3px;height:14px;width:14px}.dw-sw{cursor:sw-resize;left:-3px}.dw-icon-resize{z-index:20}.dashboard-presence-badge{border-radius:3px;color:#000;font-size:.55rem;font-weight:600;line-height:1.4;padding:0 4px;white-space:nowrap}.dashboard-cursor{left:0;pointer-events:none;position:absolute;top:0;will-change:transform;z-index:2147483647}.dashboard-cursor-name{border-radius:3px;color:#000;font-size:.6rem;font-weight:600;left:14px;padding:1px 5px;position:absolute;top:8px;white-space:nowrap}.dashboard-edge-cursor{align-items:center;display:flex;gap:4px;left:0;pointer-events:none;position:absolute;top:0;will-change:transform;z-index:2147483647}.dashboard-edge-name{border-radius:3px;color:#000;font-size:.6rem;font-weight:600;padding:1px 5px;white-space:nowrap}.cursor-enter-active{transition:opacity .2s ease}.cursor-leave-active{transition:opacity .3s ease}.cursor-enter-from,.cursor-leave-to{opacity:0}
+</style>
+
+<style>
+body.nointeract .dashboard-widget-body *,body.nointeract .wb-body *,body.nointeract embed,body.nointeract iframe,body.nointeract object{pointer-events:none!important}
+</style>