@abraca/nuxt 0.1.0 → 0.2.0

package/dist/runtime/components/ADocumentTree.vue

@@ -1,350 +1,1315 @@
 <script setup>
-import { ref, computed, shallowRef } from "vue";
-import { useSyncedMap } from "../composables/useYDoc";
-import { useDocImport } from "../composables/useDocImport";
-import { useTrash } from "../composables/useTrash";
-import { resolveDocType } from "../utils/docTypes";
-import { useAbraLocale } from "../composables/useAbraLocale";
+import { ref, computed, nextTick, shallowRef, watch } from "vue";
+import { resolveDocType, getAvailableDocTypes } from "../utils/docTypes";
+import { avatarBorderStyle } from "../utils/avatarStyle";
+import { DOC_DRAG_MIME, isDocDrag, parseDocDragPayload, isDescendantInMap } from "../utils/docDragDrop";
 const props = defineProps({
-  showTrash: { type: Boolean, required: false, default: true },
-  allowFileDrop: { type: Boolean, required: false, default: true },
-  draggable: { type: Boolean, required: false, default: true },
-  selectedId: { type: [String, null], required: false, default: null },
-  labels: { type: Object, required: false }
+  collapsed: { type: Boolean, required: false },
+  editable: { type: Boolean, required: false, default: true },
+  selectedId: { type: [String, null], required: false }
 });
-const emit = defineEmits(["select", "create"]);
-const locale = computed(() => useAbraLocale("documentTree", props.labels));
-const { doc, registry } = useAbracadabra();
-const rootDoc = doc;
-const treeMap = useSyncedMap(rootDoc, "doc-tree");
-const { trashedItems, restoreFromTrash, permanentlyDelete, emptyTrash } = useTrash();
-const {
-  externalDragActive,
-  onDragEnter,
-  onDragLeave,
-  onDragOver,
-  onFileDrop
-} = useDocImport();
-const expandedIds = ref(/* @__PURE__ */ new Set());
-const renamingId = ref(null);
-const renameValue = ref("");
-const allEntries = computed(
-  () => Object.entries(treeMap.data).map(([id, v]) => ({
+const emit = defineEmits(["navigate", "create"]);
+const { doc, isReady, provider, client, userName } = useAbracadabra();
+const { trashMap, trashedCount, moveToTrash, restoreFromTrash, permanentlyDelete, emptyTrash } = useTrash();
+const _chat = import.meta.client ? useChat() : null;
+const chatChannels = computed(() => _chat?.channels.value ?? {});
+const _voice = import.meta.client ? useVoice() : null;
+const voiceStatus = computed(() => _voice?.voiceStatus.value ?? "idle");
+const voiceRoomId = computed(() => _voice?.voiceRoomId.value ?? null);
+function joinRoom(docId) {
+  _voice?.joinRoom(docId);
+}
+function leaveRoom() {
+  _voice?.leaveRoom();
+}
+const toast = useToast();
+const appConfig = useAppConfig();
+const presenceNeutral = computed(() => appConfig.ui?.colors?.neutral ?? "zinc");
+const treeMap = useSyncedMap(doc, "doc-tree");
+function buildTree(parentId = null, depth = 0) {
+  return Object.entries(treeMap.data).filter(([, v]) => (v.parentId ?? null) === parentId).sort(([, a], [, b]) => (a.order ?? 0) - (b.order ?? 0)).map(([id, v]) => ({
     id,
-    label: v.label || locale.value.untitled,
+    label: v.label || "Untitled",
     parentId: v.parentId,
     order: v.order ?? 0,
     type: v.type,
-    meta: v.meta
-  }))
-);
-function childrenOf(parentId) {
-  return allEntries.value.filter((e) => e.parentId === parentId).sort((a, b) => (a.order ?? 0) - (b.order ?? 0));
+    meta: v.meta,
+    children: buildTree(id, depth + 1),
+    depth
+  }));
 }
-function hasChildren(id) {
-  return allEntries.value.some((e) => e.parentId === id);
+const treeItems = computed(() => buildTree(null));
+const nodeMap = computed(() => {
+  const map = /* @__PURE__ */ new Map();
+  function walk(nodes) {
+    for (const node of nodes) {
+      map.set(node.id, node);
+      walk(node.children);
+    }
+  }
+  walk(treeItems.value);
+  return map;
+});
+const expandedIds = ref(/* @__PURE__ */ new Set());
+const {
+  externalDragActive,
+  onDragEnter: onImportDragEnter,
+  onDragLeave: onImportDragLeave,
+  onDragOver: onImportDragOver,
+  onFileDrop: onExternalFileDrop,
+  importFiles,
+  importFolder
+} = useDocImport();
+const { exportDoc: exportSingleDoc, exportDocs, exportAll } = useDocExport();
+function isExternalFileDrag(e) {
+  return !!e.dataTransfer?.types.includes("Files");
 }
-function buildFlat(parentId, depth) {
+function toggleExpand(id) {
+  if (expandedIds.value.has(id)) expandedIds.value.delete(id);
+  else expandedIds.value.add(id);
+  expandedIds.value = new Set(expandedIds.value);
+}
+function expandAncestors(id) {
+  if (!id) return;
+  let node = nodeMap.value.get(id);
+  let changed = false;
+  while (node?.parentId) {
+    expandedIds.value.add(node.parentId);
+    changed = true;
+    node = nodeMap.value.get(node.parentId);
+  }
+  if (changed) expandedIds.value = new Set(expandedIds.value);
+}
+const allExpanded = computed(() => {
+  const folders = [...nodeMap.value.values()].filter((n) => n.children.length > 0);
+  return folders.length > 0 && folders.every((n) => expandedIds.value.has(n.id));
+});
+function toggleExpandAll() {
+  if (allExpanded.value) {
+    expandedIds.value = /* @__PURE__ */ new Set();
+  } else {
+    const ids = /* @__PURE__ */ new Set();
+    for (const [, node] of nodeMap.value) {
+      if (node.children.length > 0) ids.add(node.id);
+    }
+    expandedIds.value = ids;
+  }
+}
+function sortAlphabetically() {
+  const entries = treeMap.data;
+  const groups = /* @__PURE__ */ new Map();
+  for (const [id, entry] of Object.entries(entries)) {
+    const parentId = entry.parentId ?? null;
+    if (!groups.has(parentId)) groups.set(parentId, []);
+    groups.get(parentId).push({ id, label: entry.label });
+  }
+  for (const siblings of groups.values()) {
+    siblings.sort((a, b) => a.label.localeCompare(b.label));
+    siblings.forEach((s, i) => {
+      treeMap.set(s.id, { ...entries[s.id], order: i });
+    });
+  }
+}
+const trashExpanded = ref(false);
+const flatItems = computed(() => {
   const result = [];
-  for (const entry of childrenOf(parentId)) {
-    const expanded = expandedIds.value.has(entry.id);
+  function walk(nodes) {
+    for (const node of nodes) {
+      const hasChildren = node.children.length > 0;
+      const expanded = expandedIds.value.has(node.id);
+      result.push({
+        id: node.id,
+        name: node.label,
+        depth: node.depth,
+        hasChildren,
+        expanded,
+        type: node.type,
+        meta: node.meta
+      });
+      if (hasChildren && expanded) walk(node.children);
+    }
+  }
+  walk(treeItems.value);
+  const trashEntries = Object.entries(trashMap.data);
+  if (trashEntries.length > 0) {
+    let buildTrashChildren = function(parentId, depth) {
+      return trashEntries.filter(([, e]) => e.parentId === parentId && trashIds.has(parentId)).sort(([, a], [, b]) => (a.order ?? 0) - (b.order ?? 0)).map(([id, e]) => ({
+        id,
+        label: e.label || "Untitled",
+        type: e.type,
+        meta: e.meta,
+        children: buildTrashChildren(id, depth + 1),
+        depth
+      }));
+    };
+    const trashIds = new Set(trashEntries.map(([id]) => id));
+    const topTrash = trashEntries.filter(([, e]) => !e.parentId || !trashIds.has(e.parentId)).sort(([, a], [, b]) => b.deletedAt - a.deletedAt).map(([id, e]) => ({
+      id,
+      label: e.label || "Untitled",
+      type: e.type,
+      meta: e.meta,
+      children: buildTrashChildren(id, 2),
+      depth: 1
+    }));
     result.push({
-      id: entry.id,
-      label: entry.label,
-      type: entry.type,
-      meta: entry.meta,
-      depth,
-      parentId: entry.parentId,
-      order: entry.order,
-      isExpanded: expanded,
-      hasChildren: hasChildren(entry.id)
+      id: "__trash__",
+      name: "Trash",
+      depth: 0,
+      hasChildren: topTrash.length > 0,
+      expanded: trashExpanded.value,
+      isTrashRoot: true
     });
-    if (expanded) {
-      result.push(...buildFlat(entry.id, depth + 1));
+    if (trashExpanded.value) {
+      let walkTrash = function(nodes) {
+        for (const node of nodes) {
+          const hasChildren = node.children.length > 0;
+          const expanded = expandedIds.value.has(node.id);
+          result.push({
+            id: node.id,
+            name: node.label,
+            depth: node.depth,
+            hasChildren,
+            expanded,
+            type: node.type,
+            meta: node.meta,
+            isTrash: true
+          });
+          if (hasChildren && expanded) walkTrash(node.children);
+        }
+      };
+      walkTrash(topTrash);
     }
   }
   return result;
+});
+function getItemIcon(item) {
+  const meta = item.meta;
+  if (meta?.icon && typeof meta.icon === "string") return `i-lucide-${meta.icon}`;
+  const userIconField = meta?._metaFields?.find((f) => f.type === "icon" && f.key);
+  if (userIconField?.key) {
+    const val = meta?.[userIconField.key];
+    if (val && typeof val === "string") return `i-lucide-${val}`;
+  }
+  const ownSchema = resolveDocType(item.type).metaSchema;
+  const ownIconField = ownSchema?.find((f) => f.type === "icon");
+  if (ownIconField && "key" in ownIconField) {
+    const val = meta?.[ownIconField.key];
+    if (val && typeof val === "string") return `i-lucide-${val}`;
+  }
+  const parentId = nodeMap.value.get(item.id)?.parentId;
+  if (parentId) {
+    const parentNode = nodeMap.value.get(parentId);
+    const parentSchema = resolveDocType(parentNode?.type).metaSchema;
+    const schemaIconField = parentSchema?.find((f) => f.type === "icon");
+    if (schemaIconField && "key" in schemaIconField) {
+      const val = meta?.[schemaIconField.key];
+      if (val && typeof val === "string") return `i-lucide-${val}`;
+    }
+  }
+  return resolveDocType(item.type).icon;
 }
-const flatItems = computed(() => buildFlat(null, 0));
-function toggleExpand(id) {
-  const next = new Set(expandedIds.value);
-  if (next.has(id)) next.delete(id);
-  else next.add(id);
-  expandedIds.value = next;
-}
-function startRename(id, label) {
-  renamingId.value = id;
-  renameValue.value = label;
+function getItemIconColor(item) {
+  const meta = item.meta;
+  if (!meta) return void 0;
+  if (typeof meta.color === "string" && meta.color) return meta.color;
+  const userColorField = meta._metaFields?.find(
+    (f) => (f.type === "colorPreset" || f.type === "colorPicker") && f.key
+  );
+  if (userColorField?.key) {
+    const val = meta[userColorField.key];
+    if (typeof val === "string" && val) return val;
+  }
+  const ownSchema = resolveDocType(item.type).metaSchema;
+  const ownColorField = ownSchema?.find((f) => f.type === "colorPreset" || f.type === "colorPicker");
+  if (ownColorField && "key" in ownColorField) {
+    const val = meta[ownColorField.key];
+    if (typeof val === "string" && val) return val;
+  }
+  const parentId = nodeMap.value.get(item.id)?.parentId;
+  if (parentId) {
+    const parentNode = nodeMap.value.get(parentId);
+    const parentSchema = resolveDocType(parentNode?.type).metaSchema;
+    const schemaColorField = parentSchema?.find(
+      (f) => f.type === "colorPreset" || f.type === "colorPicker"
+    );
+    if (schemaColorField && "key" in schemaColorField) {
+      const val = meta[schemaColorField.key];
+      if (typeof val === "string" && val) return val;
+    }
+  }
+  return void 0;
+}
+function createDirectly(parentId) {
+  if (!isReady.value) return;
+  const id = crypto.randomUUID();
+  treeMap.set(id, { label: "Untitled", parentId, order: Date.now(), type: "doc" });
+  if (parentId) {
+    expandedIds.value.add(parentId);
+    expandedIds.value = new Set(expandedIds.value);
+    client.value?.createChild(parentId, { child_id: id }).catch(() => {
+    });
+  }
+  emit("navigate", id);
+}
+function deleteDoc(docId) {
+  if (!docId || !isReady.value) return;
+  moveToTrash(docId, userName.value);
+}
+const renameId = ref(null);
+const renameValue = ref("");
+const renameInputRef = ref(null);
+let _renameJustOpened = false;
+function startRename(docId) {
+  if (!docId) return;
+  const node = nodeMap.value.get(docId);
+  if (!node) return;
+  renameId.value = docId;
+  renameValue.value = node.label;
+  _renameJustOpened = true;
   nextTick(() => {
-    const input = document.getElementById(`rename-${id}`);
-    input?.select();
+    const input = renameInputRef.value?.input ?? renameInputRef.value?.$el?.querySelector("input") ?? renameInputRef.value;
+    if (input?.focus) {
+      input.focus();
+      input.select?.();
+    }
+    setTimeout(() => {
+      _renameJustOpened = false;
+    }, 150);
   });
 }
-function commitRename(id) {
-  const trimmed = renameValue.value.trim();
-  if (trimmed && trimmed !== treeMap.get(id)?.label) {
-    const entry = treeMap.get(id);
-    if (entry) treeMap.set(id, { ...entry, label: trimmed, updatedAt: Date.now() });
+function commitRename() {
+  if (_renameJustOpened) return;
+  if (!renameId.value || !renameValue.value.trim()) {
+    renameId.value = null;
+    return;
+  }
+  const entry = treeMap.get(renameId.value);
+  if (entry)
+    treeMap.set(renameId.value, { ...entry, label: renameValue.value.trim() });
+  renameId.value = null;
+}
+const dragId = ref(null);
+const dropIndicator = ref(null);
+let expandTimeout = null;
+const multiSelected = ref(/* @__PURE__ */ new Set());
+const lastClickedId = ref(null);
+function onItemClick(e, item) {
+  if (e.shiftKey && lastClickedId.value) {
+    const idxA = flatItems.value.findIndex((i) => i.id === lastClickedId.value);
+    const idxB = flatItems.value.findIndex((i) => i.id === item.id);
+    const [lo, hi] = [Math.min(idxA, idxB), Math.max(idxA, idxB)];
+    const next = new Set(multiSelected.value);
+    for (let i = lo; i <= hi; i++) next.add(flatItems.value[i].id);
+    multiSelected.value = next;
+  } else if (e.metaKey || e.ctrlKey) {
+    const next = new Set(multiSelected.value);
+    if (next.has(item.id)) next.delete(item.id);
+    else next.add(item.id);
+    multiSelected.value = next;
+    lastClickedId.value = item.id;
+  } else {
+    multiSelected.value = /* @__PURE__ */ new Set();
+    lastClickedId.value = item.id;
+    emit("navigate", item.id);
   }
-  renamingId.value = null;
 }
-const DOC_DRAG_MIME = "application/x-abracadabra-doc";
-const draggingId = ref(null);
-const dragOverId = ref(null);
-function onItemDragStart(e, id) {
-  if (!props.draggable) return;
-  draggingId.value = id;
-  e.dataTransfer?.setData(DOC_DRAG_MIME, id);
+function deleteSelected() {
+  for (const id of multiSelected.value) deleteDoc(id);
+  multiSelected.value = /* @__PURE__ */ new Set();
 }
-function onItemDragOver(e, id) {
-  if (!props.draggable || !draggingId.value) return;
+function isDescendantOf(ancestorId, nodeId) {
+  let current = nodeMap.value.get(nodeId);
+  while (current) {
+    if (current.id === ancestorId) return true;
+    if (!current.parentId) break;
+    current = nodeMap.value.get(current.parentId);
+  }
+  return false;
+}
+function computeOrder(target, position, excludeId) {
+  const exclude = excludeId ?? dragId.value;
+  const siblings = Object.entries(treeMap.data).filter(([id, v]) => (v.parentId ?? null) === target.parentId && id !== exclude).sort(([, a], [, b]) => (a.order ?? 0) - (b.order ?? 0));
+  const idx = siblings.findIndex(([id]) => id === target.id);
+  if (position === "before") {
+    const prev = siblings[idx - 1];
+    return prev ? (prev[1].order + target.order) / 2 : target.order - 1e3;
+  } else {
+    const next = siblings[idx + 1];
+    return next ? (target.order + next[1].order) / 2 : target.order + 1e3;
+  }
+}
+function onDragStart(e, item) {
+  if (!multiSelected.value.has(item.id)) multiSelected.value = /* @__PURE__ */ new Set();
+  dragId.value = item.id;
+  if (e.dataTransfer) {
+    e.dataTransfer.effectAllowed = "move";
+    e.dataTransfer.setData("text/plain", item.id);
+    e.dataTransfer.setData(DOC_DRAG_MIME, JSON.stringify({ id: item.id, label: item.name }));
+  }
+}
+function onDragOver(e, item) {
+  if (dragId.value === null && isExternalFileDrag(e)) {
+    if (item.isTrash || item.isTrashRoot) {
+      if (dropIndicator.value !== null) dropIndicator.value = null;
+      return;
+    }
+    e.preventDefault();
+    if (e.dataTransfer) e.dataTransfer.dropEffect = "copy";
+    if (dropIndicator.value?.targetId !== item.id || dropIndicator.value?.position !== "inside") {
+      dropIndicator.value = { targetId: item.id, position: "inside" };
+    }
+    return;
+  }
+  if (!dragId.value && isDocDrag(e)) {
+    if (item.isTrash || item.isTrashRoot) {
+      if (item.isTrashRoot) {
+        e.preventDefault();
+        if (e.dataTransfer) e.dataTransfer.dropEffect = "move";
+        if (dropIndicator.value?.targetId !== "__trash__" || dropIndicator.value?.position !== "inside") {
+          dropIndicator.value = { targetId: "__trash__", position: "inside" };
+        }
+        return;
+      }
+      if (dropIndicator.value !== null) dropIndicator.value = null;
+      return;
+    }
+    e.preventDefault();
+    if (e.dataTransfer) e.dataTransfer.dropEffect = "move";
+    const rect2 = e.currentTarget.getBoundingClientRect();
+    const y2 = e.clientY - rect2.top;
+    const h2 = rect2.height;
+    let position2;
+    if (y2 < h2 * 0.25) position2 = "before";
+    else if (y2 > h2 * 0.75)
+      position2 = item.expanded && item.hasChildren ? "inside" : "after";
+    else position2 = "inside";
+    if (dropIndicator.value?.targetId !== item.id || dropIndicator.value?.position !== position2) {
+      dropIndicator.value = { targetId: item.id, position: position2 };
+    }
+    if (position2 === "inside" && item.hasChildren && !item.expanded) {
+      if (expandTimeout) clearTimeout(expandTimeout);
+      expandTimeout = setTimeout(() => {
+        if (dropIndicator.value?.targetId === item.id) {
+          expandedIds.value.add(item.id);
+          expandedIds.value = new Set(expandedIds.value);
+        }
+      }, 600);
+    } else if (expandTimeout) {
+      clearTimeout(expandTimeout);
+      expandTimeout = null;
+    }
+    return;
+  }
+  const dragIsTrash = dragId.value && trashMap.data[dragId.value];
+  if (item.isTrash && dragIsTrash) {
+    if (dropIndicator.value !== null) dropIndicator.value = null;
+    return;
+  }
+  if (item.isTrashRoot) {
+    if (!dragId.value || dragIsTrash) {
+      if (dropIndicator.value !== null) dropIndicator.value = null;
+      return;
+    }
+    e.preventDefault();
+    if (e.dataTransfer) e.dataTransfer.dropEffect = "move";
+    if (dropIndicator.value?.targetId !== "__trash__" || dropIndicator.value?.position !== "inside") {
+      dropIndicator.value = { targetId: "__trash__", position: "inside" };
+    }
+    return;
+  }
+  if (!dragId.value || dragId.value === item.id || !dragIsTrash && isDescendantOf(dragId.value, item.id)) {
+    if (dropIndicator.value !== null) dropIndicator.value = null;
+    return;
+  }
   e.preventDefault();
-  dragOverId.value = id;
+  if (e.dataTransfer) e.dataTransfer.dropEffect = "move";
+  const rect = e.currentTarget.getBoundingClientRect();
+  const y = e.clientY - rect.top;
+  const h = rect.height;
+  let position;
+  if (y < h * 0.25) position = "before";
+  else if (y > h * 0.75)
+    position = item.expanded && item.hasChildren ? "inside" : "after";
+  else position = "inside";
+  if (dropIndicator.value?.targetId !== item.id || dropIndicator.value?.position !== position) {
+    dropIndicator.value = { targetId: item.id, position };
+  }
+  if (position === "inside" && item.hasChildren && !item.expanded) {
+    if (expandTimeout) clearTimeout(expandTimeout);
+    expandTimeout = setTimeout(() => {
+      if (dropIndicator.value?.targetId === item.id) {
+        expandedIds.value.add(item.id);
+        expandedIds.value = new Set(expandedIds.value);
+      }
+    }, 600);
+  } else {
+    if (expandTimeout) {
+      clearTimeout(expandTimeout);
+      expandTimeout = null;
+    }
+  }
 }
-function onItemDrop(e, targetId) {
+function onListDragLeave(e) {
+  const related = e.relatedTarget;
+  if (related && e.currentTarget.contains(related)) return;
+  dropIndicator.value = null;
+}
+function onDrop(e) {
   e.preventDefault();
-  dragOverId.value = null;
-  const srcId = e.dataTransfer?.getData(DOC_DRAG_MIME) || draggingId.value;
-  draggingId.value = null;
-  if (!srcId || srcId === targetId) return;
-  const targetEntry = treeMap.get(targetId);
-  if (!targetEntry) return;
-  const srcEntry = treeMap.get(srcId);
-  if (!srcEntry) return;
-  treeMap.set(srcId, {
-    ...srcEntry,
-    parentId: targetEntry.parentId,
-    order: (targetEntry.order ?? 0) - 0.5,
-    updatedAt: Date.now()
+  if (!dragId.value) {
+    const crossPayload = parseDocDragPayload(e);
+    if (crossPayload) {
+      const { targetId: targetId3, position: position2 } = dropIndicator.value ?? { targetId: null, position: null };
+      dropIndicator.value = null;
+      if (targetId3 === "__trash__") {
+        moveToTrash(crossPayload.id, userName.value);
+        return;
+      }
+      if (!targetId3 || !position2) return;
+      const targetNode2 = nodeMap.value.get(targetId3);
+      const entry2 = treeMap.get(crossPayload.id);
+      if (!targetNode2 || !entry2) return;
+      if (crossPayload.id === targetId3) return;
+      if (isDescendantInMap(treeMap.data, crossPayload.id, targetId3)) return;
+      let newParentId2;
+      let newOrder2;
+      if (position2 === "before") {
+        newParentId2 = targetNode2.parentId;
+        newOrder2 = computeOrder(targetNode2, "before", crossPayload.id);
+      } else if (position2 === "after") {
+        newParentId2 = targetNode2.parentId;
+        newOrder2 = computeOrder(targetNode2, "after", crossPayload.id);
+      } else {
+        newParentId2 = targetId3;
+        newOrder2 = Date.now();
+        expandedIds.value.add(targetId3);
+        expandedIds.value = new Set(expandedIds.value);
+      }
+      treeMap.set(crossPayload.id, { ...entry2, parentId: newParentId2, order: newOrder2 });
+      return;
+    }
+    const targetId2 = dropIndicator.value?.targetId ?? null;
+    dropIndicator.value = null;
+    onExternalFileDrop(e, targetId2 !== "__trash__" ? targetId2 : null);
+    return;
+  }
+  if (!dropIndicator.value) {
+    cleanupDrag();
+    return;
+  }
+  const docId = dragId.value;
+  const { targetId, position } = dropIndicator.value;
+  const dragIsTrash = !!trashMap.data[docId];
+  if (targetId === "__trash__" && !dragIsTrash) {
+    const idsToMove2 = multiSelected.value.size > 0 ? [...multiSelected.value] : [docId];
+    for (const id of idsToMove2) moveToTrash(id, userName.value);
+    multiSelected.value = /* @__PURE__ */ new Set();
+    cleanupDrag();
+    return;
+  }
+  if (dragIsTrash && !flatItems.value.find((i) => i.id === targetId)?.isTrash && targetId !== "__trash__") {
+    restoreFromTrash(docId);
+    nextTick(() => {
+      const targetNode2 = nodeMap.value.get(targetId);
+      const entry2 = treeMap.get(docId);
+      if (!targetNode2 || !entry2) {
+        cleanupDrag();
+        return;
+      }
+      let newParentId2;
+      let newOrder2;
+      if (position === "before") {
+        newParentId2 = targetNode2.parentId;
+        newOrder2 = computeOrder(targetNode2, "before");
+      } else if (position === "after") {
+        newParentId2 = targetNode2.parentId;
+        newOrder2 = computeOrder(targetNode2, "after");
+      } else {
+        newParentId2 = targetId;
+        newOrder2 = Date.now();
+        expandedIds.value.add(targetId);
+        expandedIds.value = new Set(expandedIds.value);
+      }
+      treeMap.set(docId, { ...entry2, parentId: newParentId2, order: newOrder2 });
+    });
+    toast.add({ title: "Restored from trash", icon: "i-lucide-undo-2" });
+    cleanupDrag();
+    return;
+  }
+  const targetNode = nodeMap.value.get(targetId);
+  const entry = treeMap.get(docId);
+  if (!targetNode || !entry) {
+    cleanupDrag();
+    return;
+  }
+  let newParentId;
+  let newOrder;
+  if (position === "before") {
+    newParentId = targetNode.parentId;
+    newOrder = computeOrder(targetNode, "before");
+  } else if (position === "after") {
+    newParentId = targetNode.parentId;
+    newOrder = computeOrder(targetNode, "after");
+  } else {
+    newParentId = targetId;
+    newOrder = Date.now();
+    expandedIds.value.add(targetId);
+    expandedIds.value = new Set(expandedIds.value);
+  }
+  const idsToMove = multiSelected.value.size > 0 ? [...multiSelected.value] : [docId];
+  idsToMove.forEach((id, idx) => {
+    const e2 = treeMap.get(id);
+    if (e2) treeMap.set(id, { ...e2, parentId: newParentId, order: newOrder + idx });
   });
-  expandedIds.value = new Set(expandedIds.value);
+  cleanupDrag();
+}
+function onDragEnd() {
+  cleanupDrag();
+}
+function cleanupDrag() {
+  dragId.value = null;
+  dropIndicator.value = null;
+  if (expandTimeout) {
+    clearTimeout(expandTimeout);
+    expandTimeout = null;
+  }
+}
+async function duplicateDoc(id) {
+  const idsMap = /* @__PURE__ */ new Map();
+  function collectSubtree(nodeId) {
+    idsMap.set(nodeId, crypto.randomUUID());
+    for (const [cid, v] of Object.entries(treeMap.data))
+      if (v.parentId === nodeId) collectSubtree(cid);
+  }
+  collectSubtree(id);
+  for (const [oldId, newId] of idsMap) {
+    const entry = treeMap.get(oldId);
+    if (!entry) continue;
+    const newParentId = entry.parentId && idsMap.has(entry.parentId) ? idsMap.get(entry.parentId) : entry.parentId;
+    treeMap.set(newId, { ...entry, parentId: newParentId, order: entry.order + 1 });
+  }
+  const newRootId = idsMap.get(id);
+  if (newRootId) emit("navigate", newRootId);
+}
+function changeDocType(id, type) {
+  const entry = treeMap.get(id);
+  if (entry) treeMap.set(id, { ...entry, type });
+}
+const overlayNodeId = ref(null);
+const overlayProvider = shallowRef(null);
+const overlayLabel = ref("");
+const overlayLoading = ref(false);
+async function openAsOverlay(id) {
+  if (!provider.value) return;
+  const entry = treeMap.get(id);
+  overlayLabel.value = entry?.label || "Untitled";
+  overlayNodeId.value = id;
+  overlayLoading.value = true;
+  try {
+    const childProv = await provider.value.loadChild(id);
+    if (!childProv.isSynced) {
+      await new Promise((resolve) => {
+        const done = () => {
+          childProv.off("synced", done);
+          resolve();
+        };
+        childProv.on("synced", done);
+        setTimeout(resolve, 6e3);
+      });
+    }
+    overlayProvider.value = childProv;
+  } finally {
+    overlayLoading.value = false;
+  }
 }
-function onItemDragEnd() {
-  draggingId.value = null;
-  dragOverId.value = null;
+function closeOverlay() {
+  overlayNodeId.value = null;
+  overlayProvider.value = null;
 }
-function getContextItems(item) {
+async function openAsFloatingWindow(id) {
+  if (!provider.value) return;
+  const entry = treeMap.get(id);
+  const wm = useWindowManager();
+  if (wm.windows.has(id)) {
+    wm.focusWindow(id);
+    return;
+  }
+  const childProv = await provider.value.loadChild(id);
+  if (!childProv.isSynced) {
+    await new Promise((resolve) => {
+      const done = () => {
+        childProv.off("synced", done);
+        resolve();
+      };
+      childProv.on("synced", done);
+      setTimeout(resolve, 6e3);
+    });
+  }
+  wm.openWindow({
+    id,
+    title: entry?.label || "Untitled",
+    docId: id,
+    docType: entry?.type,
+    provider: childProv
+  });
+}
+const isVoiceConnected = computed(
+  () => voiceStatus.value === "connected" || voiceStatus.value === "connecting"
+);
+function isCallDoc(item) {
+  return item.type === "call";
+}
+function isInThisCall(item) {
+  return isCallDoc(item) && isVoiceConnected.value && voiceRoomId.value === item.id;
+}
+function treeNodeMenuItems(item) {
+  const multiDeleteSection = multiSelected.value.size > 1 && multiSelected.value.has(item.id) ? [[{
+    label: `Move ${multiSelected.value.size} items to Trash`,
+    icon: "i-lucide-trash-2",
+    color: "error",
+    onSelect: deleteSelected
+  }]] : [];
+  const multiExportSection = multiSelected.value.size > 1 && multiSelected.value.has(item.id) ? [[{
+    label: `Export ${multiSelected.value.size} items`,
+    icon: "i-lucide-download",
+    children: [
+      { label: "Markdown", icon: "i-lucide-file-text", onSelect: () => exportDocs([...multiSelected.value], "md") },
+      { label: "HTML", icon: "i-lucide-file-code", onSelect: () => exportDocs([...multiSelected.value], "html") }
+    ]
+  }]] : [];
   return [
     [
       {
-        label: locale.value.rename,
+        label: "Open",
+        icon: "i-lucide-external-link",
+        onSelect: () => emit("navigate", item.id)
+      },
+      {
+        label: "Open as overlay",
+        icon: "i-lucide-panel-right",
+        onSelect: () => openAsOverlay(item.id)
+      },
+      {
+        label: "Open as window",
+        icon: "i-lucide-picture-in-picture-2",
+        onSelect: () => openAsFloatingWindow(item.id)
+      },
+      {
+        label: "Rename",
         icon: "i-lucide-pencil",
-        onSelect: () => startRename(item.id, item.label)
+        onSelect: () => startRename(item.id)
+      },
+      {
+        label: "Duplicate",
+        icon: "i-lucide-copy",
+        onSelect: () => duplicateDoc(item.id)
+      },
+      {
+        label: "Add child page",
+        icon: "i-lucide-file-plus",
+        onSelect: () => createDirectly(item.id)
       }
     ],
     [
       {
-        label: locale.value.newChild,
-        icon: "i-lucide-file-plus",
-        onSelect: () => emit("create", item.id)
+        label: "Change type",
+        icon: "i-lucide-layers",
+        children: getAvailableDocTypes().map((typeDef) => ({
+          label: typeDef.label,
+          icon: typeDef.icon,
+          type: "checkbox",
+          checked: item.type === typeDef.key,
+          onSelect: (e) => {
+            e.preventDefault();
+            changeDocType(item.id, typeDef.key);
+          }
+        }))
+      }
+    ],
+    [
+      {
+        label: "Export",
+        icon: "i-lucide-download",
+        children: [
+          { label: "Markdown", icon: "i-lucide-file-text", onSelect: () => exportSingleDoc(item.id, "md") },
+          { label: "HTML", icon: "i-lucide-file-code", onSelect: () => exportSingleDoc(item.id, "html") }
+        ]
+      },
+      {
+        label: "Import into...",
+        icon: "i-lucide-file-up",
+        onSelect: () => importFiles(item.id)
       }
     ],
     [
       {
-        label: locale.value.moveToTrash,
-        icon: "i-lucide-trash",
+        label: "Move to Trash",
+        icon: "i-lucide-trash-2",
         color: "error",
-        onSelect: () => {
-          const entry = treeMap.get(item.id);
-          if (!entry) return;
-          const { moveToTrash } = useTrash();
-          moveToTrash(item.id);
-        }
+        onSelect: () => deleteDoc(item.id)
+      }
+    ],
+    ...multiExportSection,
+    ...multiDeleteSection
+  ];
+}
+function onRestoreItem(item) {
+  restoreFromTrash(item.id);
+  toast.add({ title: `Restored "${item.name}"`, icon: "i-lucide-undo-2" });
+}
+function trashNodeMenuItems(item) {
+  return [
+    [{
+      label: "Restore",
+      icon: "i-lucide-undo-2",
+      onSelect: () => onRestoreItem(item)
+    }],
+    [{
+      label: "Delete permanently",
+      icon: "i-lucide-trash-2",
+      color: "error",
+      onSelect: () => {
+        permanentlyDelete(item.id);
+        toast.add({ title: `Permanently deleted "${item.name}"`, color: "error" });
       }
+    }]
+  ];
+}
+function trashRootMenuItems() {
+  return [
+    [{
+      label: "Empty trash",
+      icon: "i-lucide-trash-2",
+      color: "error",
+      onSelect: () => {
+        emptyTrash();
+        toast.add({ title: "Trash emptied", color: "error" });
+      }
+    }]
+  ];
+}
+function treeAreaMenuItems() {
+  return [
+    [{ label: "New page", icon: "i-lucide-file-plus", onSelect: () => createDirectly(null) }],
+    [
+      { label: "Import files...", icon: "i-lucide-file-up", onSelect: () => importFiles(null) },
+      { label: "Import folder...", icon: "i-lucide-folder-up", onSelect: () => importFolder(null) }
+    ],
+    [
+      { label: "Export all as Markdown", icon: "i-lucide-download", onSelect: () => exportAll("md") },
+      { label: "Export all as HTML", icon: "i-lucide-file-code", onSelect: () => exportAll("html") }
     ]
   ];
 }
-const showTrashExpanded = ref(false);
+function nodeToFlatItem(node) {
+  return {
+    id: node.id,
+    name: node.label,
+    depth: node.depth,
+    hasChildren: node.children.length > 0,
+    expanded: expandedIds.value.has(node.id),
+    type: node.type,
+    meta: node.meta
+  };
+}
+const ancestorChain = computed(() => {
+  if (!props.selectedId) return [];
+  const chain = [];
+  let node = nodeMap.value.get(props.selectedId);
+  while (node) {
+    chain.unshift(node);
+    node = node.parentId ? nodeMap.value.get(node.parentId) : void 0;
+  }
+  return chain;
+});
+const { states: awarenessStates } = useAwareness();
+const selfClientId = computed(() => provider.value?.awareness?.clientID);
+const MAX_PRESENCE = 3;
+const docPresence = computed(() => {
+  const map = /* @__PURE__ */ new Map();
+  for (const [clientId, s] of awarenessStates.value) {
+    if (clientId === selfClientId.value) continue;
+    const docId = s.docId;
+    if (!docId) continue;
+    const users = map.get(docId) ?? [];
+    users.push({
+      name: s.user?.name || "?",
+      color: s.user?.color || "#888",
+      clientId
+    });
+    map.set(docId, users);
+  }
+  return map;
+});
+watch(
+  [() => props.selectedId, nodeMap],
+  ([id]) => expandAncestors(id),
+  { immediate: true }
+);
+function onOuterDrop(e) {
+  const crossPayload = parseDocDragPayload(e);
+  if (crossPayload) {
+    const entry = treeMap.get(crossPayload.id);
+    if (entry) {
+      treeMap.set(crossPayload.id, { ...entry, parentId: null, order: Date.now() });
+    }
+    return;
+  }
+  onExternalFileDrop(e, null);
+}
+function onTreeDragEnter(e) {
+  onImportDragEnter(e);
+}
+function onTreeDragLeave(e) {
+  onImportDragLeave(e);
+}
+function onTreeDragOver(e) {
+  if (dragId.value === null && isDocDrag(e)) {
+    e.preventDefault();
+    if (e.dataTransfer) e.dataTransfer.dropEffect = "move";
+    return;
+  }
+  onImportDragOver(e);
+}
+defineExpose({
+  handleExternalDrop: (e, parentId = null) => onExternalFileDrop(e, parentId)
+});
 </script>
 
 <template>
   <div
-    class="flex flex-col h-full overflow-hidden"
-    :class="externalDragActive ? 'ring-2 ring-primary ring-inset' : ''"
-    @dragenter="allowFileDrop ? onDragEnter($event) : void 0"
-    @dragleave="allowFileDrop ? onDragLeave($event) : void 0"
-    @dragover="allowFileDrop ? onDragOver($event) : void 0"
-    @drop="allowFileDrop ? onFileDrop($event) : void 0"
+    v-if="collapsed && ancestorChain.length"
+    class="flex flex-col items-center gap-0.5 py-1.5"
   >
-    <!-- Header slot -->
-    <slot name="header" />
+    <template v-for="(node, i) in ancestorChain" :key="node.id">
+      <div v-if="i > 0" class="h-2 w-px bg-(--ui-border)" />
+      <UTooltip :text="node.label" :content="{ side: 'right' }">
+        <UButton
+          :icon="getItemIcon(nodeToFlatItem(node))"
+          size="xs"
+          square
+          variant="ghost"
+          :color="selectedId === node.id ? 'primary' : 'neutral'"
+          @click="emit('navigate', node.id)"
+        />
+      </UTooltip>
+    </template>
 
-    <!-- File drop overlay -->
-    <div
-      v-if="externalDragActive"
-      class="absolute inset-0 z-10 bg-primary/10 flex items-center justify-center pointer-events-none rounded-lg"
-    >
-      <div class="text-center">
-        <UIcon name="i-lucide-upload" class="size-8 text-primary mb-2" />
-        <p class="text-sm text-primary font-medium">{{ locale.dropFilesHere }}</p>
-      </div>
+    <!-- Collapsed trash icon -->
+    <div v-if="trashedCount > 0" class="mt-auto pt-2">
+      <UChip :text="trashedCount" color="neutral" size="sm" inset>
+        <UTooltip text="Trash" :content="{ side: 'right' }">
+          <UButton
+            icon="i-lucide-trash-2"
+            size="xs"
+            square
+            variant="ghost"
+            color="neutral"
+            @click="trashExpanded = !trashExpanded"
+          />
+        </UTooltip>
+      </UChip>
     </div>
+  </div>
 
-    <!-- Tree items -->
-    <div class="flex-1 overflow-y-auto py-1">
-      <template v-if="flatItems.length">
-        <div
-          v-for="item in flatItems"
-          :key="item.id"
-          :style="{ paddingLeft: `${item.depth * 16 + 8}px` }"
-          :draggable="draggable"
-          :class="[
-  'group flex items-center gap-1.5 pr-2 py-0.5 rounded-md cursor-pointer text-sm select-none',
-  selectedId === item.id ? 'bg-primary/10 text-primary' : 'hover:bg-muted text-default',
-  dragOverId === item.id ? 'bg-primary/20' : ''
-]"
-          @click="emit('select', item.id)"
-          @dblclick="startRename(item.id, item.label)"
-          @dragstart="onItemDragStart($event, item.id)"
-          @dragover="onItemDragOver($event, item.id)"
-          @drop="onItemDrop($event, item.id)"
-          @dragend="onItemDragEnd"
-        >
-          <!-- Expand toggle -->
+  <UContextMenu
+    v-else-if="!collapsed"
+    :items="treeAreaMenuItems()"
+    class="relative transition-colors duration-150"
+    :class="externalDragActive ? 'ring-2 ring-inset ring-(--ui-primary)/30 rounded-(--ui-radius) bg-(--ui-primary)/3' : ''"
+    @keydown.escape.window="multiSelected = /* @__PURE__ */ new Set()"
+    @dragenter="onTreeDragEnter"
+    @dragleave="onTreeDragLeave"
+    @dragover="onTreeDragOver"
+    @drop.prevent="onOuterDrop"
+  >
+    <!-- Header -->
+    <div class="flex items-center justify-between px-2 py-1.5">
+      <span class="text-xs font-medium text-(--ui-text-muted) uppercase tracking-wide">Pages</span>
+      <div class="flex items-center gap-0.5">
+        <UTooltip :text="allExpanded ? 'Collapse all' : 'Expand all'">
           <UButton
-            :icon="item.isExpanded ? 'i-lucide-chevron-down' : 'i-lucide-chevron-right'"
+            :icon="allExpanded ? 'i-lucide-chevrons-down-up' : 'i-lucide-chevrons-up-down'"
             variant="ghost"
             color="neutral"
             size="xs"
-            :class="item.hasChildren ? 'opacity-100' : 'opacity-0 pointer-events-none'"
-            @click.stop="toggleExpand(item.id)"
+            @click="toggleExpandAll"
           />
-
-          <!-- Doc icon: custom meta.icon > doc type default -->
-          <UIcon
-            :name="item.meta?.icon ?? resolveDocType(item.type, registry).icon"
-            class="size-3.5 flex-shrink-0"
-            :style="item.meta?.color ? `color: ${item.meta.color}` : ''"
-            :class="item.meta?.color ? '' : 'text-muted'"
+        </UTooltip>
+        <UTooltip text="Sort alphabetically">
+          <UButton
+            icon="i-lucide-arrow-down-a-z"
+            variant="ghost"
+            color="neutral"
+            size="xs"
+            :disabled="!isReady"
+            @click="sortAlphabetically"
           />
-          <!-- Color dot (shown only if color set but no custom icon) -->
-          <span
-            v-if="item.meta?.color && !item.meta?.icon"
-            class="size-1.5 rounded-full shrink-0 -ml-1"
-            :style="`background: ${item.meta.color}`"
+        </UTooltip>
+        <UTooltip text="New page">
+          <UButton
+            icon="i-lucide-plus"
+            variant="ghost"
+            color="neutral"
+            size="xs"
+            :disabled="!isReady"
+            @click="createDirectly(null)"
           />
+        </UTooltip>
+      </div>
+    </div>
+
+    <ClientOnly>
+      <template v-if="isReady">
+        <UEmpty
+          v-if="flatItems.length === 0"
+          icon="i-lucide-file-text"
+          title="No pages"
+          description="Create your first page."
+          size="sm"
+        />
 
-          <!-- Slot override or default label -->
-          <slot
-            name="item"
-            :entry="item"
-            :depth="item.depth"
-            :is-expanded="item.isExpanded"
+        <TransitionGroup
+          v-else
+          name="tree-item"
+          tag="div"
+          :class="['px-1', { 'is-dragging': dragId }]"
+          @dragover.prevent
+          @dragleave="onListDragLeave"
+        >
+          <div
+            v-for="item in flatItems"
+            :key="item.id"
+            class="tree-item relative"
+            :class="{ 'opacity-30': dragId === item.id && !item.isTrashRoot }"
+            @dragover="onDragOver($event, item)"
+            @drop.stop="onDrop"
           >
-            <template v-if="renamingId === item.id">
-              <input
-                :id="`rename-${item.id}`"
-                v-model="renameValue"
-                class="flex-1 min-w-0 bg-transparent border-none outline-none text-sm"
-                @blur="commitRename(item.id)"
-                @keydown.enter.stop="commitRename(item.id)"
-                @keydown.escape.stop="renamingId = null"
-                @click.stop
+            <!-- Drop indicator: line BEFORE -->
+            <div
+              v-if="dropIndicator?.targetId === item.id && dropIndicator.position === 'before' && !item.isTrashRoot"
+              class="drop-line drop-line-before"
+              :style="{ left: `${item.depth * 16 + 8}px` }"
+            >
+              <div class="drop-line-dot" />
+            </div>
+
+            <!-- Drop indicator: highlight INSIDE -->
+            <div
+              v-if="dropIndicator?.targetId === item.id && dropIndicator.position === 'inside'"
+              class="drop-inside"
+            />
+
+            <!-- Drop indicator: line AFTER -->
+            <div
+              v-if="dropIndicator?.targetId === item.id && dropIndicator.position === 'after' && !item.isTrashRoot"
+              class="drop-line drop-line-after"
+              :style="{ left: `${item.depth * 16 + 8}px` }"
+            >
+              <div class="drop-line-dot" />
+            </div>
+
+            <!-- ── Trash root row ── -->
+            <UContextMenu
+              v-if="item.isTrashRoot"
+              :items="trashRootMenuItems()"
+            >
+              <button
+                type="button"
+                class="flex items-center gap-1.5 w-full px-2 py-1.5 rounded-(--ui-radius) text-sm cursor-pointer select-none text-(--ui-text-muted) hover:bg-(--ui-bg-elevated)"
+                @click="trashExpanded = !trashExpanded"
               >
-            </template>
-            <span
+                <span class="flex items-center justify-center size-5 shrink-0">
+                  <UIcon
+                    :name="trashExpanded ? 'i-lucide-chevron-down' : 'i-lucide-chevron-right'"
+                    class="size-3.5"
+                  />
+                </span>
+                <UIcon name="i-lucide-trash-2" class="size-4 shrink-0" />
+                <span class="truncate flex-1 min-w-0 text-left">Trash</span>
+                <UBadge
+                  v-if="trashedCount > 0"
+                  :label="String(trashedCount)"
+                  color="neutral"
+                  variant="subtle"
+                  size="xs"
+                />
+              </button>
+            </UContextMenu>
+
+            <!-- ── Trash item row ── -->
+            <UContextMenu
+              v-else-if="item.isTrash"
+              :items="trashNodeMenuItems(item)"
+            >
+              <button
+                type="button"
+                class="flex items-center gap-1.5 w-full py-1.5 pr-2 rounded-(--ui-radius) text-sm cursor-pointer select-none relative opacity-60 hover:bg-(--ui-bg-elevated) text-(--ui-text-dimmed)"
+                :style="{ paddingLeft: `${item.depth * 16 + 8}px` }"
+                draggable="true"
+                @dragstart="onDragStart($event, item)"
+                @dragend="onDragEnd"
+              >
+                <span
+                  v-if="item.hasChildren"
+                  class="flex items-center justify-center size-5 shrink-0"
+                  @click.stop="toggleExpand(item.id)"
+                >
+                  <UIcon
+                    :name="item.expanded ? 'i-lucide-chevron-down' : 'i-lucide-chevron-right'"
+                    class="size-3.5"
+                  />
+                </span>
+                <span v-else class="size-5 shrink-0" />
+
+                <UIcon :name="getItemIcon(item)" class="size-4 shrink-0 text-(--ui-text-muted)" />
+                <span class="truncate flex-1 min-w-0 text-left">{{ item.name }}</span>
+              </button>
+            </UContextMenu>
+
+            <!-- ── Editable row ── -->
+            <UContextMenu
+              v-else-if="editable"
+              :items="treeNodeMenuItems(item)"
+            >
+              <button
+                type="button"
+                class="flex items-center gap-1.5 w-full py-1.5 pr-2 rounded-(--ui-radius) text-sm cursor-pointer select-none relative"
+                :class="[
+  selectedId === item.id ? 'bg-(--ui-primary)/10 text-(--ui-text-highlighted) font-medium ring-1 ring-inset ring-(--ui-primary)/20' : 'hover:bg-(--ui-bg-elevated) text-(--ui-text-dimmed)',
+  multiSelected.has(item.id) && selectedId !== item.id ? 'bg-(--ui-primary)/8 ring-1 ring-inset ring-(--ui-primary)/25' : ''
+]"
+                :style="{ paddingLeft: `${item.depth * 16 + 8}px` }"
+                :draggable="editable"
+                @dragstart="onDragStart($event, item)"
+                @dragend="onDragEnd"
+                @click="onItemClick($event, item)"
+              >
+                <span
+                  v-if="item.hasChildren"
+                  class="flex items-center justify-center size-5 shrink-0"
+                  @click.stop="toggleExpand(item.id)"
+                >
+                  <UIcon
+                    :name="item.expanded ? 'i-lucide-chevron-down' : 'i-lucide-chevron-right'"
+                    class="size-3.5"
+                  />
+                </span>
+                <span v-else class="size-5 shrink-0" />
+
+                <UIcon
+                  :name="getItemIcon(item)"
+                  class="size-4 shrink-0"
+                  :class="getItemIconColor(item) ? '' : 'text-(--ui-text-muted)'"
+                  :style="getItemIconColor(item) ? { color: getItemIconColor(item) } : void 0"
+                />
+
+                <UInput
+                  v-if="renameId === item.id"
+                  ref="renameInputRef"
+                  v-model="renameValue"
+                  size="xs"
+                  variant="none"
+                  class="flex-1 -my-1"
+                  @keydown.enter="commitRename"
+                  @keydown.escape="renameId = null"
+                  @blur="commitRename"
+                  @click.stop
+                />
+                <span v-else class="truncate flex-1 min-w-0 text-left">{{ item.name }}</span>
+
+                <!-- Unread chat badge -->
+                <UBadge
+                  v-if="(chatChannels[`group:${item.id}`]?.unreadCount ?? 0) > 0"
+                  class="tree-unread shrink-0"
+                  :label="chatChannels[`group:${item.id}`].unreadCount"
+                  color="error"
+                  variant="solid"
+                  size="xs"
+                />
+
+                <!-- Presence avatars -->
+                <div
+                  v-if="docPresence.get(item.id)?.length"
+                  class="tree-presence flex items-center gap-px shrink-0 mr-2"
+                >
+                  <div
+                    v-for="u in docPresence.get(item.id).slice(0, MAX_PRESENCE)"
+                    :key="u.clientId"
+                    class="size-4 rounded-full flex items-center justify-center text-[8px] font-bold leading-none select-none"
+                    :style="avatarBorderStyle(u.color, presenceNeutral)"
+                    :title="u.name"
+                  >
+                    {{ u.name[0]?.toUpperCase() }}
+                  </div>
+                  <div
+                    v-if="docPresence.get(item.id).length > MAX_PRESENCE"
+                    class="size-4 rounded-full flex items-center justify-center text-[8px] font-medium leading-none ring-1 ring-(--ui-bg) bg-(--ui-bg-elevated) text-(--ui-text-muted)"
+                  >
+                    +{{ docPresence.get(item.id).length - MAX_PRESENCE }}
+                  </div>
+                </div>
+
+              </button>
+            </UContextMenu>
+
+            <!-- ── Read-only row ── -->
+            <UContextMenu
               v-else
-              class="flex-1 min-w-0 truncate"
-            >{{ item.label }}</span>
-          </slot>
+              :items="treeNodeMenuItems(item)"
+            >
+              <button
+                type="button"
+                class="flex items-center gap-1.5 w-full py-1.5 pr-2 rounded-(--ui-radius) text-sm cursor-pointer select-none"
+                :class="[
+  selectedId === item.id ? 'bg-(--ui-primary)/10 text-(--ui-text-highlighted) font-medium ring-1 ring-inset ring-(--ui-primary)/20' : 'hover:bg-(--ui-bg-elevated) text-(--ui-text-dimmed)',
+  multiSelected.has(item.id) && selectedId !== item.id ? 'bg-(--ui-primary)/8 ring-1 ring-inset ring-(--ui-primary)/25' : ''
+]"
+                :style="{ paddingLeft: `${item.depth * 16 + 8}px` }"
+                @click="onItemClick($event, item)"
+              >
+                <span
+                  v-if="item.hasChildren"
+                  class="flex items-center justify-center size-5 shrink-0"
+                  @click.stop="toggleExpand(item.id)"
+                >
+                  <UIcon
+                    :name="item.expanded ? 'i-lucide-chevron-down' : 'i-lucide-chevron-right'"
+                    class="size-3.5"
+                  />
+                </span>
+                <span v-else class="size-5 shrink-0" />
 
-          <!-- Context menu -->
-          <UDropdownMenu
-            :items="getContextItems(item)"
-            :content="{ align: 'end' }"
-          >
-            <UButton
-              icon="i-lucide-ellipsis"
-              variant="ghost"
-              color="neutral"
-              size="xs"
-              class="opacity-0 group-hover:opacity-100 flex-shrink-0"
-              @click.stop
-            />
-          </UDropdownMenu>
-        </div>
-      </template>
+                <UIcon
+                  :name="getItemIcon(item)"
+                  class="size-4 shrink-0"
+                  :class="getItemIconColor(item) ? '' : 'text-(--ui-text-muted)'"
+                  :style="getItemIconColor(item) ? { color: getItemIconColor(item) } : void 0"
+                />
+                <span class="truncate flex-1 text-left">{{ item.name }}</span>
 
-      <!-- New doc button -->
-      <div class="px-2 py-1">
-        <UButton
-          icon="i-lucide-plus"
-          variant="ghost"
-          color="neutral"
-          size="xs"
-          :label="locale.newDocument"
-          class="w-full justify-start text-muted"
-          @click="emit('create', null)"
-        />
-      </div>
+                <!-- Call join/leave button -->
+                <UButton
+                  v-if="isCallDoc(item)"
+                  :icon="isInThisCall(item) ? 'i-lucide-phone-off' : 'i-lucide-phone'"
+                  size="xs"
+                  :color="isInThisCall(item) ? 'error' : 'success'"
+                  variant="ghost"
+                  class="shrink-0"
+                  @click.prevent.stop="isInThisCall(item) ? leaveRoom() : joinRoom(item.id)"
+                />
 
-      <!-- Empty state -->
-      <div
-        v-if="!flatItems.length"
-        class="px-4 py-8 text-center"
-      >
-        <slot name="empty">
-          <p class="text-sm text-muted">{{ locale.noDocuments }}</p>
-        </slot>
-      </div>
+                <!-- Presence avatars -->
+                <div
+                  v-if="docPresence.get(item.id)?.length"
+                  class="flex items-center gap-px shrink-0"
+                >
+                  <div
+                    v-for="u in docPresence.get(item.id).slice(0, MAX_PRESENCE)"
+                    :key="u.clientId"
+                    class="size-4 rounded-full flex items-center justify-center text-[8px] font-bold leading-none select-none"
+                    :style="avatarBorderStyle(u.color, presenceNeutral)"
+                    :title="u.name"
+                  >
+                    {{ u.name[0]?.toUpperCase() }}
+                  </div>
+                  <div
+                    v-if="docPresence.get(item.id).length > MAX_PRESENCE"
+                    class="size-4 rounded-full flex items-center justify-center text-[8px] font-medium leading-none ring-1 ring-(--ui-bg) bg-(--ui-bg-elevated) text-(--ui-text-muted)"
+                  >
+                    +{{ docPresence.get(item.id).length - MAX_PRESENCE }}
+                  </div>
+                </div>
+              </button>
+            </UContextMenu>
 
-      <!-- Trash section -->
-      <template v-if="showTrash && trashedItems.length">
-        <USeparator class="my-2" />
-        <div
-          class="flex items-center gap-1 px-2 py-1 cursor-pointer text-muted hover:text-default"
-          @click="showTrashExpanded = !showTrashExpanded"
-        >
-          <UIcon name="i-lucide-trash" class="size-4" />
-          <span class="text-xs font-medium flex-1">{{ locale.trash }} ({{ trashedItems.length }})</span>
-          <UIcon
-            :name="showTrashExpanded ? 'i-lucide-chevron-down' : 'i-lucide-chevron-right'"
-            class="size-3"
-          />
-        </div>
+            <!-- ── Hover actions (positioned relative to .tree-item, outside UContextMenu) ── -->
+            <!-- Trash item actions -->
+            <div
+              v-if="item.isTrash"
+              class="tree-row-actions absolute right-1 top-1/2 -translate-y-1/2 flex items-center bg-(--ui-bg-elevated)"
+              @click.stop
+            >
+              <UTooltip text="Restore">
+                <UButton
+                  icon="i-lucide-undo-2"
+                  size="xs"
+                  variant="ghost"
+                  color="neutral"
+                  @click="onRestoreItem(item)"
+                />
+              </UTooltip>
+              <UDropdownMenu :items="trashNodeMenuItems(item)" :content="{ align: 'start' }">
+                <UButton icon="i-lucide-ellipsis" size="xs" variant="ghost" color="neutral" />
+              </UDropdownMenu>
+            </div>
+            <!-- Editable item actions -->
+            <div
+              v-if="editable && !item.isTrash && !item.isTrashRoot && renameId !== item.id"
+              class="tree-row-actions absolute right-1 top-1/2 -translate-y-1/2 flex items-center bg-(--ui-bg-elevated)"
+              :class="{ 'tree-row-actions--call': isCallDoc(item) }"
+              @click.stop
+            >
+              <UButton
+                v-if="isCallDoc(item)"
+                :icon="isInThisCall(item) ? 'i-lucide-phone-off' : 'i-lucide-phone'"
+                size="xs"
+                :color="isInThisCall(item) ? 'error' : 'success'"
+                variant="ghost"
+                @click="isInThisCall(item) ? leaveRoom() : joinRoom(item.id)"
+              />
+              <UTooltip v-if="!isCallDoc(item)" text="Add child page">
+                <UButton
+                  icon="i-lucide-plus"
+                  size="xs"
+                  variant="ghost"
+                  color="neutral"
+                  @click="createDirectly(item.id)"
+                />
+              </UTooltip>
+              <UDropdownMenu :items="treeNodeMenuItems(item)" :content="{ align: 'start' }">
+                <UButton icon="i-lucide-ellipsis" size="xs" variant="ghost" color="neutral" />
+              </UDropdownMenu>
+            </div>
+          </div>
+        </TransitionGroup>
 
-        <template v-if="showTrashExpanded">
+        <!-- External drag hint bar -->
+        <Transition name="drop-hint">
           <div
-            v-for="item in trashedItems"
-            :key="item.id"
-            class="group flex items-center gap-1.5 pl-4 pr-2 py-0.5 text-sm text-muted"
+            v-if="externalDragActive"
+            class="mx-2 my-1.5 px-3 py-2 rounded-(--ui-radius) bg-(--ui-bg-elevated) ring-1 ring-(--ui-border) shadow-sm flex items-center gap-2 pointer-events-none"
           >
-            <UIcon name="i-lucide-file-text" class="size-4 flex-shrink-0" />
-            <span class="flex-1 min-w-0 truncate">{{ item.label }}</span>
-            <UButton
-              icon="i-lucide-rotate-ccw"
-              variant="ghost"
-              color="neutral"
-              size="xs"
-              class="opacity-0 group-hover:opacity-100"
-              @click="restoreFromTrash(item.id)"
-            />
-            <UButton
-              icon="i-lucide-trash-2"
-              variant="ghost"
-              color="error"
-              size="xs"
-              class="opacity-0 group-hover:opacity-100"
-              @click="permanentlyDelete(item.id)"
-            />
-          </div>
-
-          <div class="px-2 py-1">
-            <UButton
-              icon="i-lucide-trash-2"
-              variant="ghost"
-              color="error"
-              size="xs"
-              :label="locale.emptyTrash"
-              class="w-full justify-start"
-              @click="emptyTrash()"
+            <UIcon
+              :name="dropIndicator && nodeMap.get(dropIndicator.targetId) ? 'i-lucide-folder-input' : 'i-lucide-upload'"
+              class="size-3.5 text-(--ui-primary) shrink-0"
             />
+            <span
+              v-if="dropIndicator && nodeMap.get(dropIndicator.targetId)"
+              class="text-xs text-(--ui-text-muted) truncate"
+            >
+              Drop into
+              <span class="font-medium text-(--ui-text-highlighted)">{{ nodeMap.get(dropIndicator.targetId)?.label }}</span>
+            </span>
+            <span v-else class="text-xs text-(--ui-text-muted)">
+              Drop to import — docs, images, or any file
+            </span>
           </div>
-        </template>
+        </Transition>
       </template>
-    </div>
+    </ClientOnly>
 
-    <!-- Footer slot -->
-    <slot name="footer" />
-  </div>
+    <!-- Overlay slideover -->
+    <ANodePanel
+      :node-id="overlayNodeId"
+      :node-label="overlayLabel"
+      :child-provider="overlayProvider"
+      :doc-type="treeMap.get(overlayNodeId ?? '')?.type"
+      @close="closeOverlay"
+    />
+  </UContextMenu>
 </template>
+
+<style scoped>
+.tree-item-move{transition:transform .15s ease-out}.is-dragging .tree-item-move{transition:none}.tree-item-enter-active{transition:all .15s ease-out}.tree-item-leave-active{position:absolute;transition:all .1s ease-in;width:calc(100% - 8px)}.tree-item-enter-from,.tree-item-leave-to{opacity:0;transform:translateY(-4px)}.tree-row-actions{opacity:0;pointer-events:none;transition:opacity .1s ease}.tree-row-actions--call{opacity:1;pointer-events:auto}@media (hover:hover) and (pointer:fine){.tree-item:hover .tree-row-actions,.tree-row-actions:has([data-state=open]){opacity:1;pointer-events:auto}.tree-item:hover .tree-presence,.tree-item:hover .tree-unread{visibility:hidden}}.tree-row-actions:has([data-state=open]){opacity:1;pointer-events:auto}.drop-line{background:var(--ui-primary);border-radius:1px;height:2px;pointer-events:none;position:absolute;right:4px;z-index:20}.drop-line-before{top:0}.drop-line-after{bottom:0}.drop-line-dot{background:var(--ui-bg);border:2px solid var(--ui-primary);border-radius:50%;height:8px;left:-3px;position:absolute;top:-3px;width:8px}.drop-inside{background:color-mix(in srgb,var(--ui-primary) 8%,transparent);border:2px solid color-mix(in srgb,var(--ui-primary) 50%,transparent);border-radius:var(--ui-radius);inset:1px 4px;pointer-events:none;position:absolute;z-index:10}.drop-hint-enter-active,.drop-hint-leave-active{transition:all .15s ease}.drop-hint-enter-from,.drop-hint-leave-to{opacity:0;transform:translateY(4px)}
+</style>