@cou.sh/nuxt 1.0.1

package/dist/runtime/components/DocumentTree.vue

@@ -0,0 +1,497 @@
+<script setup>
+const props = defineProps({
+  spaceId: { type: String, required: false },
+  selectedId: { type: String, required: false },
+  editable: { type: Boolean, required: false, default: true },
+  multiSpace: { type: Boolean, required: false, default: false }
+});
+const emit = defineEmits(["select", "selectSpace", "move", "create", "delete"]);
+const client = useCollabClient();
+const toast = useToast();
+const spaces = ref([]);
+const spacesLoading = ref(false);
+const rawTree = ref([]);
+const loading = ref(true);
+const nodeMap = /* @__PURE__ */ new Map();
+const docSpaceMap = /* @__PURE__ */ new Map();
+function buildNodeMap(nodes, spaceId) {
+  for (const node of nodes) {
+    nodeMap.set(node.id, node);
+    if (spaceId) docSpaceMap.set(node.id, spaceId);
+    if (node.children?.length) buildNodeMap(node.children, spaceId);
+  }
+}
+const expandedIds = ref(/* @__PURE__ */ new Set());
+function toggleExpand(id) {
+  if (expandedIds.value.has(id)) {
+    expandedIds.value.delete(id);
+  } else {
+    expandedIds.value.add(id);
+  }
+  expandedIds.value = new Set(expandedIds.value);
+}
+async function loadSpaces() {
+  spacesLoading.value = true;
+  try {
+    const result = await client.spaces.list();
+    const list = Array.isArray(result) ? result : result.data ?? [];
+    spaces.value = list.map((s) => ({
+      id: s.id,
+      name: s.name || s.slug || s.id,
+      tree: [],
+      loaded: false,
+      loading: false
+    }));
+    const first = spaces.value[0];
+    if (first) {
+      const firstId = `space:${first.id}`;
+      expandedIds.value.add(firstId);
+      expandedIds.value = new Set(expandedIds.value);
+      await loadSpaceTree(first);
+    }
+  } catch {
+    toast.add({ title: "Failed to load spaces", color: "error" });
+  } finally {
+    spacesLoading.value = false;
+  }
+}
+async function loadSpaceTree(space) {
+  if (space.loaded || space.loading) return;
+  space.loading = true;
+  try {
+    let autoExpand = function(nodes) {
+      for (const node of nodes) {
+        if (node.depth < 2 && node.children?.length) {
+          expandedIds.value.add(node.id);
+        }
+        if (node.children?.length) autoExpand(node.children);
+      }
+    };
+    const tree = await client.documents.tree(space.id);
+    space.tree = tree;
+    space.loaded = true;
+    buildNodeMap(tree, space.id);
+    autoExpand(tree);
+    expandedIds.value = new Set(expandedIds.value);
+  } catch {
+    toast.add({ title: `Failed to load documents for ${space.name}`, color: "error" });
+  } finally {
+    space.loading = false;
+  }
+}
+async function toggleSpace(space) {
+  const key = `space:${space.id}`;
+  toggleExpand(key);
+  if (expandedIds.value.has(key) && !space.loaded) {
+    await loadSpaceTree(space);
+  }
+  emit("selectSpace", space.id);
+}
+async function loadTree() {
+  if (!props.spaceId) return;
+  loading.value = true;
+  try {
+    rawTree.value = await client.documents.tree(props.spaceId);
+    nodeMap.clear();
+    buildNodeMap(rawTree.value);
+  } finally {
+    loading.value = false;
+  }
+}
+function flattenNodes(nodes, spaceId, depthOffset) {
+  const result = [];
+  function walk(nodes2) {
+    for (const node of nodes2) {
+      const hasChildren = !!node.children?.length;
+      const expanded = expandedIds.value.has(node.id);
+      result.push({
+        id: node.id,
+        name: node.name || "Untitled",
+        depth: node.depth + depthOffset,
+        hasChildren,
+        expanded,
+        type: "document",
+        spaceId
+      });
+      if (hasChildren && expanded) {
+        walk(node.children);
+      }
+    }
+  }
+  walk(nodes);
+  return result;
+}
+const multiSpaceFlatItems = computed(() => {
+  const result = [];
+  for (const space of spaces.value) {
+    const spaceKey = `space:${space.id}`;
+    const expanded = expandedIds.value.has(spaceKey);
+    const hasChildren = space.tree.length > 0 || !space.loaded;
+    result.push({
+      id: spaceKey,
+      name: space.name,
+      depth: 0,
+      hasChildren,
+      expanded,
+      type: "space",
+      spaceId: space.id
+    });
+    if (expanded && space.loaded) {
+      result.push(...flattenNodes(space.tree, space.id, 1));
+    }
+  }
+  return result;
+});
+const singleSpaceFlatItems = computed(() => {
+  if (!props.spaceId) return [];
+  return flattenNodes(rawTree.value, props.spaceId, 0);
+});
+const flatItems = computed(
+  () => props.multiSpace ? multiSpaceFlatItems.value : singleSpaceFlatItems.value
+);
+watch(rawTree, () => {
+  function autoExpand(nodes) {
+    for (const node of nodes) {
+      if (node.depth < 2 && node.children?.length) {
+        expandedIds.value.add(node.id);
+      }
+      if (node.children?.length) autoExpand(node.children);
+    }
+  }
+  autoExpand(rawTree.value);
+  expandedIds.value = new Set(expandedIds.value);
+}, { immediate: true });
+const contextDocId = ref(null);
+const contextSpaceId = ref(null);
+const contextMenuItems = computed(() => {
+  if (!props.editable) return [];
+  return [
+    [
+      {
+        label: "New child document",
+        icon: "i-lucide-file-plus",
+        onSelect: () => createChild(contextDocId.value)
+      },
+      {
+        label: "Rename",
+        icon: "i-lucide-pencil",
+        onSelect: () => startRename(contextDocId.value)
+      }
+    ],
+    [
+      {
+        label: "Delete",
+        icon: "i-lucide-trash-2",
+        color: "error",
+        onSelect: () => deleteDoc(contextDocId.value)
+      }
+    ]
+  ];
+});
+function resolveSpaceId(docId) {
+  if (props.multiSpace) {
+    if (docId) return docSpaceMap.get(docId);
+    return contextSpaceId.value ?? void 0;
+  }
+  return props.spaceId;
+}
+async function createChild(parentId) {
+  const sid = resolveSpaceId(parentId);
+  if (!sid) return;
+  try {
+    const doc = await client.documents.create(sid, {
+      name: "Untitled",
+      parentId: parentId ?? void 0
+    });
+    emit("create", doc);
+    if (props.multiSpace) {
+      const space = spaces.value.find((s) => s.id === sid);
+      if (space) {
+        space.loaded = false;
+        await loadSpaceTree(space);
+      }
+    } else {
+      await loadTree();
+    }
+  } catch {
+    toast.add({ title: "Failed to create document", color: "error" });
+  }
+}
+const renameId = ref(null);
+const renameValue = ref("");
+function startRename(docId) {
+  if (!docId) return;
+  const node = nodeMap.get(docId);
+  if (!node) return;
+  renameId.value = docId;
+  renameValue.value = node.name || "Untitled";
+}
+async function commitRename() {
+  if (!renameId.value || !renameValue.value.trim()) {
+    renameId.value = null;
+    return;
+  }
+  const sid = resolveSpaceId(renameId.value);
+  if (!sid) return;
+  try {
+    await client.documents.update(sid, renameId.value, {
+      name: renameValue.value.trim()
+    });
+    if (props.multiSpace) {
+      const space = spaces.value.find((s) => s.id === sid);
+      if (space) {
+        space.loaded = false;
+        await loadSpaceTree(space);
+      }
+    } else {
+      await loadTree();
+    }
+  } catch {
+    toast.add({ title: "Failed to rename", color: "error" });
+  } finally {
+    renameId.value = null;
+  }
+}
+async function deleteDoc(docId) {
+  if (!docId) return;
+  const sid = resolveSpaceId(docId);
+  if (!sid) return;
+  try {
+    await client.documents.delete(sid, docId);
+    emit("delete", docId);
+    if (props.multiSpace) {
+      const space = spaces.value.find((s) => s.id === sid);
+      if (space) {
+        space.loaded = false;
+        await loadSpaceTree(space);
+      }
+    } else {
+      await loadTree();
+    }
+  } catch {
+    toast.add({ title: "Failed to delete document", color: "error" });
+  }
+}
+const dragDocId = ref(null);
+function onDragStart(e, docId) {
+  if (!props.editable) return;
+  dragDocId.value = docId;
+  if (e.dataTransfer) {
+    e.dataTransfer.effectAllowed = "move";
+    e.dataTransfer.setData("text/plain", docId);
+  }
+}
+function onDragOver(e) {
+  e.preventDefault();
+  if (e.dataTransfer) e.dataTransfer.dropEffect = "move";
+}
+async function onDrop(e, targetDocId) {
+  e.preventDefault();
+  if (!dragDocId.value || dragDocId.value === targetDocId) return;
+  const sid = resolveSpaceId(dragDocId.value);
+  if (!sid) return;
+  try {
+    await client.documents.move(sid, dragDocId.value, targetDocId, 0);
+    emit("move", dragDocId.value, targetDocId, 0);
+    if (props.multiSpace) {
+      const space = spaces.value.find((s) => s.id === sid);
+      if (space) {
+        space.loaded = false;
+        await loadSpaceTree(space);
+      }
+    } else {
+      await loadTree();
+    }
+  } catch {
+    toast.add({ title: "Failed to move document", color: "error" });
+  } finally {
+    dragDocId.value = null;
+  }
+}
+async function createRootDocument(spaceId) {
+  const sid = spaceId || props.spaceId;
+  if (!sid) return;
+  try {
+    const doc = await client.documents.create(sid, { name: "Untitled" });
+    emit("create", doc);
+    if (props.multiSpace) {
+      const space = spaces.value.find((s) => s.id === sid);
+      if (space) {
+        space.loaded = false;
+        await loadSpaceTree(space);
+      }
+    } else {
+      await loadTree();
+    }
+  } catch {
+    toast.add({ title: "Failed to create document", color: "error" });
+  }
+}
+function onDocumentClick(item) {
+  if (props.multiSpace) {
+    emit("selectSpace", item.spaceId);
+  }
+  const node = nodeMap.get(item.id);
+  if (node) emit("select", node);
+}
+if (!props.multiSpace) {
+  watch(() => props.spaceId, loadTree);
+  onMounted(loadTree);
+} else {
+  onMounted(loadSpaces);
+}
+async function refresh() {
+  if (props.multiSpace) {
+    for (const space of spaces.value) {
+      space.loaded = false;
+    }
+    await loadSpaces();
+  } else {
+    await loadTree();
+  }
+}
+defineExpose({ refresh });
+</script>
+
+<template>
+  <div>
+    <!-- Single-space header -->
+    <div v-if="editable && !multiSpace" class="flex items-center justify-between px-2 py-1.5">
+      <span class="text-xs font-medium text-(--ui-text-muted) uppercase tracking-wide">Documents</span>
+      <UButton
+        icon="i-lucide-plus"
+        variant="ghost"
+        color="neutral"
+        size="xs"
+        @click="createRootDocument()"
+      />
+    </div>
+
+    <USkeleton v-if="multiSpace ? spacesLoading : loading" class="h-32 mx-2" />
+
+    <UEmpty
+      v-else-if="flatItems.length === 0"
+      icon="i-lucide-file-text"
+      :title="multiSpace ? 'No spaces' : 'No documents'"
+      :description="multiSpace ? 'No spaces available.' : 'Create your first document.'"
+      size="sm"
+    />
+
+    <div v-else class="space-y-px px-1">
+      <template v-for="item in flatItems" :key="item.id">
+        <!-- Space header row (multi-space mode) -->
+        <button
+          v-if="item.type === 'space'"
+          class="flex items-center gap-1.5 w-full px-2 py-1.5 rounded-(--ui-radius) text-xs cursor-pointer select-none hover:bg-(--ui-bg-elevated) group"
+          @click="toggleSpace(spaces.find((s) => s.id === item.spaceId))"
+        >
+          <UIcon
+            :name="item.expanded ? 'i-lucide-chevron-down' : 'i-lucide-chevron-right'"
+            class="size-3.5 shrink-0"
+          />
+          <UIcon name="i-lucide-layout-grid" class="size-3.5 shrink-0 text-(--ui-text-muted)" />
+          <span class="font-semibold uppercase tracking-wide text-(--ui-text-muted) flex-1 truncate text-left">{{ item.name }}</span>
+          <UIcon
+            v-if="spaces.find((s) => s.id === item.spaceId)?.loading"
+            name="i-lucide-loader"
+            class="size-3.5 animate-spin text-(--ui-text-muted)"
+          />
+          <UButton
+            v-if="editable"
+            icon="i-lucide-plus"
+            variant="ghost"
+            color="neutral"
+            size="xs"
+            class="opacity-0 group-hover:opacity-100"
+            @click.stop="createRootDocument(item.spaceId)"
+          />
+        </button>
+
+        <!-- Document row (editable with context menu) -->
+        <UContextMenu
+          v-else-if="item.type === 'document' && editable"
+          :items="contextMenuItems"
+          @update:open="(open) => {
+  if (open) {
+    contextDocId = item.id;
+    contextSpaceId = item.spaceId;
+  }
+}"
+        >
+          <button
+            class="flex items-center gap-1.5 w-full px-2 py-1.5 rounded-(--ui-radius) text-sm cursor-pointer select-none"
+            :class="[
+  selectedId === item.id ? 'bg-(--ui-bg-elevated) text-(--ui-text-highlighted) font-medium' : 'hover:bg-(--ui-bg-elevated) text-(--ui-text-dimmed)'
+]"
+            :style="{ paddingLeft: `${item.depth * 16 + 8}px` }"
+            :draggable="editable"
+            @click="onDocumentClick(item)"
+            @dragstart="onDragStart($event, item.id)"
+            @dragover="onDragOver"
+            @drop="onDrop($event, item.id)"
+          >
+            <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="item.hasChildren ? item.expanded ? 'i-lucide-folder-open' : 'i-lucide-folder' : 'i-lucide-file-text'"
+              class="size-4 shrink-0 text-(--ui-text-muted)"
+            />
+
+            <UInput
+              v-if="renameId === item.id"
+              v-model="renameValue"
+              size="xs"
+              variant="none"
+              class="flex-1 -my-1"
+              autofocus
+              @keydown.enter="commitRename"
+              @keydown.escape="renameId = null"
+              @blur="commitRename"
+              @click.stop
+            />
+            <span v-else class="truncate flex-1 text-left">{{ item.name }}</span>
+          </button>
+        </UContextMenu>
+
+        <!-- Document row (non-editable) -->
+        <button
+          v-else-if="item.type === 'document' && !editable"
+          class="flex items-center gap-1.5 w-full px-2 py-1.5 rounded-(--ui-radius) text-sm cursor-pointer select-none"
+          :class="[
+  selectedId === item.id ? 'bg-(--ui-bg-elevated) text-(--ui-text-highlighted) font-medium' : 'hover:bg-(--ui-bg-elevated) text-(--ui-text-dimmed)'
+]"
+          :style="{ paddingLeft: `${item.depth * 16 + 8}px` }"
+          @click="onDocumentClick(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="item.hasChildren ? item.expanded ? 'i-lucide-folder-open' : 'i-lucide-folder' : 'i-lucide-file-text'"
+            class="size-4 shrink-0 text-(--ui-text-muted)"
+          />
+          <span class="truncate flex-1 text-left">{{ item.name }}</span>
+        </button>
+      </template>
+    </div>
+  </div>
+</template>

package/dist/runtime/components/DocumentTree.vue.d.ts

@@ -0,0 +1,32 @@
+import type { Document, DocumentTreeNode } from "@rgby/collab-core";
+type __VLS_Props = {
+    /** Space ID to load document tree for (required in single-space mode) */
+    spaceId?: string;
+    /** Currently selected document ID */
+    selectedId?: string;
+    /** Allow editing (rename, delete, move) */
+    editable?: boolean;
+    /** Multi-space mode: loads all spaces as collapsible groups */
+    multiSpace?: boolean;
+};
+declare function refresh(): Promise<void>;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {
+    refresh: typeof refresh;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    select: (doc: DocumentTreeNode) => any;
+    delete: (docId: string) => any;
+    selectSpace: (spaceId: string) => any;
+    move: (docId: string, parentId: string | null, position: number) => any;
+    create: (doc: Document) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onSelect?: ((doc: DocumentTreeNode) => any) | undefined;
+    onDelete?: ((docId: string) => any) | undefined;
+    onSelectSpace?: ((spaceId: string) => any) | undefined;
+    onMove?: ((docId: string, parentId: string | null, position: number) => any) | undefined;
+    onCreate?: ((doc: Document) => any) | undefined;
+}>, {
+    editable: boolean;
+    multiSpace: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/Editor.d.vue.ts

@@ -0,0 +1,11 @@
+type __VLS_Props = {
+    spaceId: string;
+    documentId: string;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    ready: (provider: any) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onReady?: ((provider: any) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;