@cou.sh/nuxt 1.0.1

package/dist/runtime/components/Editor.vue

@@ -0,0 +1,328 @@
+<script setup>
+import { Emoji } from "@tiptap/extension-emoji";
+import { TaskList, TaskItem } from "@tiptap/extension-list";
+import { TableKit } from "@tiptap/extension-table";
+import { CellSelection } from "@tiptap/pm/tables";
+import { CodeBlockShiki } from "tiptap-extension-code-block-shiki";
+import { ImageUpload } from "./editor/ImageUploadExtension";
+import { AllWidgets } from "./widgets";
+const props = defineProps({
+  spaceId: { type: String, required: true },
+  documentId: { type: String, required: true }
+});
+const emit = defineEmits(["ready"]);
+const client = useCollabClient();
+const { user: authUser } = useAuth(client);
+const user = computed(() => {
+  if (!authUser.value) {
+    return {
+      name: "Anonymous",
+      color: getRandomColor(),
+      avatar: void 0
+    };
+  }
+  const seed = authUser.value.id || authUser.value.name || "anonymous";
+  const colorKeys = Object.keys(COLORS);
+  const hash = seed.split("").reduce((acc, char) => acc + char.charCodeAt(0), 0);
+  const color = COLORS[colorKeys[hash % colorKeys.length]];
+  return {
+    name: authUser.value.name || authUser.value.email || "Unknown",
+    color,
+    avatar: authUser.value.image
+  };
+});
+const editorRef = useTemplateRef("editorRef");
+const { extension: Completion, handlers: aiHandlers, isLoading: aiLoading } = useEditorCompletion(editorRef);
+const {
+  enabled: collaborationEnabled,
+  ready: collaborationReady,
+  extensions: collaborationExtensions,
+  connectedUsers,
+  status: connectionStatus,
+  doc,
+  provider,
+  synced,
+  updateUser
+} = useEditorCollaboration({
+  spaceId: props.spaceId,
+  documentId: props.documentId,
+  user: {
+    name: user.value.name,
+    color: user.value.color
+  }
+});
+watch([collaborationReady, provider], ([ready, prov]) => {
+  if (ready && prov) {
+    emit("ready", prov);
+  }
+}, { immediate: true });
+watch(user, (newUser) => {
+  updateUser({
+    name: newUser.name,
+    color: newUser.color,
+    avatar: newUser.avatar
+    // Pass avatar if supported by CollaborationUser
+  });
+}, { deep: true });
+const customHandlers = {
+  imageUpload: {
+    canExecute: (editor) => editor.can().insertContent({ type: "imageUpload" }),
+    execute: (editor) => editor.chain().focus().insertContent({ type: "imageUpload" }),
+    isActive: (editor) => editor.isActive("imageUpload"),
+    isDisabled: void 0
+  },
+  table: {
+    canExecute: (editor) => editor.can().insertTable({ rows: 3, cols: 3, withHeaderRow: true }),
+    execute: (editor) => editor.chain().focus().insertTable({ rows: 3, cols: 3, withHeaderRow: true }),
+    isActive: (editor) => editor.isActive("table"),
+    isDisabled: void 0
+  },
+  switchWidget: {
+    canExecute: (editor) => editor.can().insertContent({ type: "switchWidget" }),
+    execute: (editor) => editor.chain().focus().insertContent({ type: "switchWidget" }),
+    isActive: (editor) => editor.isActive("switchWidget"),
+    isDisabled: void 0
+  },
+  checkboxWidget: {
+    canExecute: (editor) => editor.can().insertContent({ type: "checkboxWidget" }),
+    execute: (editor) => editor.chain().focus().insertContent({ type: "checkboxWidget" }),
+    isActive: (editor) => editor.isActive("checkboxWidget"),
+    isDisabled: void 0
+  },
+  buttonWidget: {
+    canExecute: (editor) => editor.can().insertContent({ type: "buttonWidget" }),
+    execute: (editor) => editor.chain().focus().insertContent({ type: "buttonWidget" }),
+    isActive: (editor) => editor.isActive("buttonWidget"),
+    isDisabled: void 0
+  },
+  sliderWidget: {
+    canExecute: (editor) => editor.can().insertContent({ type: "sliderWidget" }),
+    execute: (editor) => editor.chain().focus().insertContent({ type: "sliderWidget" }),
+    isActive: (editor) => editor.isActive("sliderWidget"),
+    isDisabled: void 0
+  },
+  colorPickerWidget: {
+    canExecute: (editor) => editor.can().insertContent({ type: "colorPickerWidget" }),
+    execute: (editor) => editor.chain().focus().insertContent({ type: "colorPickerWidget" }),
+    isActive: (editor) => editor.isActive("colorPickerWidget"),
+    isDisabled: void 0
+  },
+  calendarWidget: {
+    canExecute: (editor) => editor.can().insertContent({ type: "calendarWidget" }),
+    execute: (editor) => editor.chain().focus().insertContent({ type: "calendarWidget" }),
+    isActive: (editor) => editor.isActive("calendarWidget"),
+    isDisabled: void 0
+  },
+  inputDateWidget: {
+    canExecute: (editor) => editor.can().insertContent({ type: "inputDateWidget" }),
+    execute: (editor) => editor.chain().focus().insertContent({ type: "inputDateWidget" }),
+    isActive: (editor) => editor.isActive("inputDateWidget"),
+    isDisabled: void 0
+  },
+  scrollAreaWidget: {
+    canExecute: (editor) => editor.can().insertContent({ type: "scrollAreaWidget", content: [{ type: "paragraph" }] }),
+    execute: (editor) => editor.chain().focus().insertContent({ type: "scrollAreaWidget", content: [{ type: "paragraph" }] }),
+    isActive: (editor) => editor.isActive("scrollAreaWidget"),
+    isDisabled: void 0
+  },
+  iconWidget: {
+    canExecute: (editor) => editor.can().insertContent({ type: "iconWidget" }),
+    execute: (editor) => editor.chain().focus().insertContent({ type: "iconWidget" }),
+    isActive: (editor) => editor.isActive("iconWidget"),
+    isDisabled: void 0
+  },
+  tabsWidget: {
+    canExecute: (editor) => editor.can().insertContent({ type: "tabsWidget" }),
+    execute: (editor) => editor.chain().focus().insertContent({
+      type: "tabsWidget",
+      content: [
+        { type: "tabPanel", attrs: { label: "Tab 1" }, content: [{ type: "paragraph" }] },
+        { type: "tabPanel", attrs: { label: "Tab 2" }, content: [{ type: "paragraph" }] }
+      ]
+    }),
+    isActive: (editor) => editor.isActive("tabsWidget"),
+    isDisabled: void 0
+  },
+  ...aiHandlers
+};
+const { items: emojiItems } = useEditorEmojis();
+const { items: mentionItems } = useEditorMentions(connectedUsers);
+const { items: suggestionItems } = useEditorSuggestions(customHandlers);
+const { getItems: getDragHandleItems, onNodeChange } = useEditorDragHandle(customHandlers);
+const { toolbarItems, bubbleToolbarItems, getImageToolbarItems, getTableToolbarItems } = useEditorToolbar(customHandlers, { aiLoading });
+const metadata = useSyncedMap(doc, "metadata");
+const {
+  label: statusLabel,
+  color: statusColor,
+  icon: statusIcon
+} = useCollabStatus(connectionStatus, synced);
+function onCreate({ editor }) {
+  if (!collaborationEnabled) return;
+  const storageKey = `editor-initialized-${props.spaceId}-${props.documentId}`;
+  if (sessionStorage.getItem(storageKey)) return;
+  sessionStorage.setItem(storageKey, "true");
+}
+const extensions = computed(() => [
+  CodeBlockShiki.configure({
+    defaultTheme: "material-theme",
+    themes: {
+      light: "material-theme-lighter",
+      dark: "material-theme-palenight"
+    }
+  }),
+  Completion,
+  Emoji,
+  ImageUpload,
+  TableKit,
+  TaskList,
+  TaskItem,
+  ...AllWidgets,
+  ...collaborationExtensions.value
+]);
+</script>
+
+<template>
+  <UDashboardPanel>
+    <template #header>
+      <UDashboardNavbar>
+        <template #leading>
+          <UDashboardSidebarCollapse />
+        </template>
+
+        <template #left>
+          <UButton
+            icon="i-lucide-arrow-left"
+            variant="ghost"
+            color="neutral"
+            to="/"
+          />
+          <UInput
+            v-if="metadata"
+            :model-value="metadata.data.title || props.documentId"
+            placeholder="Untitled"
+            variant="none"
+            class="font-semibold text-lg"
+            @update:model-value="metadata.set('title', String($event))"
+          />
+        </template>
+
+        <template #right>
+          <CollabUserPresence :provider="provider" />
+
+          <UBadge :color="statusColor" variant="subtle" size="sm">
+            <UIcon :name="statusIcon" class="size-3.5" />
+            {{ statusLabel }}
+          </UBadge>
+        </template>
+      </UDashboardNavbar>
+    </template>
+
+    <template #body>
+        <UEditorToolbar
+          v-if="editorRef?.editor"
+          :editor="editorRef.editor"
+          :items="toolbarItems"
+        />
+
+        <UEditor
+          v-if="collaborationReady"
+          ref="editorRef"
+          v-slot="{ editor, handlers }"
+          content-type="markdown"
+          :extensions="extensions"
+          :starter-kit="{ history: false, undoRedo: false, codeBlock: false }"
+          :handlers="customHandlers"
+          autofocus
+          placeholder="Write, type '/' for commands..."
+          class="min-h-screen"
+          @create="onCreate"
+        >
+            <UEditorToolbar
+              :editor="editor"
+              :items="bubbleToolbarItems"
+              layout="bubble"
+              :should-show="({ editor: editor2, view, state }) => {
+  if (editor2.isActive('imageUpload') || editor2.isActive('image') || state.selection instanceof CellSelection) {
+    return false;
+  }
+  const { selection } = state;
+  return view.hasFocus() && !selection.empty;
+}"
+            >
+              <template #link>
+                <CollabEditorLinkPopover :editor="editor" />
+              </template>
+            </UEditorToolbar>
+
+            <UEditorToolbar
+                :editor="editor"
+                :items="getImageToolbarItems(editor)"
+                layout="bubble"
+                :should-show="({ editor: editor2, view }) => {
+  return editor2.isActive('image') && view.hasFocus();
+}"
+            />
+
+            <UEditorToolbar
+                :editor="editor"
+                :items="getTableToolbarItems(editor)"
+                layout="bubble"
+                :should-show="({ editor: editor2, view }) => {
+  return editor2.state.selection instanceof CellSelection && view.hasFocus();
+}"
+            />
+
+            <UEditorDragHandle
+                v-slot="{ ui, onClick }"
+                :editor="editor"
+                @node-change="onNodeChange"
+            >
+                <UButton
+                    icon="i-lucide-plus"
+                    color="neutral"
+                    variant="ghost"
+                    size="sm"
+                    :class="ui.handle()"
+                    @click="(e) => {
+  e.stopPropagation();
+  const node = onClick();
+  handlers.suggestion?.execute(editor, { pos: node?.pos }).run();
+}"
+                />
+
+                <UDropdownMenu
+                    v-slot="{ open }"
+                    :modal="false"
+                    :items="getDragHandleItems(editor)"
+                    :content="{ side: 'left' }"
+                    :ui="{ content: 'w-48', label: 'text-xs' }"
+                    @update:open="editor.chain().setMeta('lockDragHandle', $event).run()"
+                >
+                    <UButton
+                        color="neutral"
+                        variant="ghost"
+                        active-variant="soft"
+                        size="sm"
+                        icon="i-lucide-grip-vertical"
+                        :active="open"
+                        :class="ui.handle()"
+                    />
+                </UDropdownMenu>
+            </UEditorDragHandle>
+
+            <UEditorEmojiMenu
+                :editor="editor"
+                :items="emojiItems"
+            />
+            <UEditorMentionMenu
+                :editor="editor"
+                :items="mentionItems"
+            />
+            <UEditorSuggestionMenu
+                :editor="editor"
+                :items="suggestionItems"
+            />
+        </UEditor>
+    </template>
+  </UDashboardPanel>
+</template>

package/dist/runtime/components/Editor.vue.d.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;

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

@@ -0,0 +1,9 @@
+type __VLS_Props = {
+    /** Space ID */
+    spaceId: string;
+    /** Document ID */
+    documentId: string;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/ExportMenu.vue

@@ -0,0 +1,55 @@
+<script setup>
+const props = defineProps({
+  spaceId: { type: String, required: true },
+  documentId: { type: String, required: true }
+});
+const client = useCollabClient();
+const toast = useToast();
+const exporting = ref(null);
+const formats = [
+  { label: "HTML", value: "html", icon: "i-lucide-code" },
+  { label: "JSON", value: "json", icon: "i-lucide-braces" }
+];
+const menuItems = computed(() => [
+  formats.map((fmt) => ({
+    label: fmt.label,
+    icon: fmt.icon,
+    disabled: exporting.value === fmt.value,
+    onSelect: () => exportDoc(fmt.value)
+  }))
+]);
+async function exportDoc(format) {
+  exporting.value = format;
+  try {
+    const content = await client.documents.export(props.spaceId, props.documentId, format);
+    const text = typeof content === "string" ? content : JSON.stringify(content, null, 2);
+    const mimeType = format === "html" ? "text/html" : "application/json";
+    const ext = format === "html" ? "html" : "json";
+    const blob = new Blob([text], { type: mimeType });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement("a");
+    a.href = url;
+    a.download = `document.${ext}`;
+    a.click();
+    URL.revokeObjectURL(url);
+    toast.add({ title: `Exported as ${format.toUpperCase()}`, color: "success", icon: "i-lucide-download" });
+  } catch {
+    toast.add({ title: "Export failed", color: "error" });
+  } finally {
+    exporting.value = null;
+  }
+}
+</script>
+
+<template>
+  <UDropdownMenu :items="menuItems">
+    <UButton
+      icon="i-lucide-download"
+      label="Export"
+      variant="ghost"
+      color="neutral"
+      size="sm"
+      :loading="!!exporting"
+    />
+  </UDropdownMenu>
+</template>

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

@@ -0,0 +1,9 @@
+type __VLS_Props = {
+    /** Space ID */
+    spaceId: string;
+    /** Document ID */
+    documentId: string;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,22 @@
+import type { FileUpload as CollabFile } from "@rgby/collab-core";
+type __VLS_Props = {
+    spaceId: string;
+    documentId?: string;
+    accept?: string;
+    multiple?: boolean;
+};
+declare function loadFiles(): Promise<void>;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {
+    refresh: typeof loadFiles;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    delete: (fileId: string) => any;
+    upload: (file: CollabFile) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onDelete?: ((fileId: string) => any) | undefined;
+    onUpload?: ((file: CollabFile) => any) | undefined;
+}>, {
+    multiple: boolean;
+    accept: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/FileUploader.vue

@@ -0,0 +1,148 @@
+<script setup>
+const props = defineProps({
+  spaceId: { type: String, required: true },
+  documentId: { type: String, required: false },
+  accept: { type: String, required: false, default: "*" },
+  multiple: { type: Boolean, required: false, default: true }
+});
+const emit = defineEmits(["upload", "delete"]);
+const client = useCollabClient();
+const toast = useToast();
+const runtimeConfig = useRuntimeConfig();
+const baseUrl = runtimeConfig.public.collab?.baseUrl || "";
+const uploadedFiles = ref([]);
+const loading = ref(true);
+const pendingCount = ref(0);
+const localFiles = ref([]);
+async function loadFiles() {
+  loading.value = true;
+  try {
+    const result = await client.uploads.list(props.spaceId, props.documentId);
+    uploadedFiles.value = result.items;
+  } finally {
+    loading.value = false;
+  }
+}
+watch(localFiles, async (files) => {
+  if (!files || files.length === 0) return;
+  for (const file of files) {
+    try {
+      const uploaded = await client.uploads.upload(props.spaceId, file, props.documentId);
+      uploadedFiles.value.unshift(uploaded);
+      emit("upload", uploaded);
+    } catch {
+      toast.add({ title: `Failed to upload ${file.name}`, color: "error" });
+    }
+  }
+  localFiles.value = [];
+});
+async function deleteFile(fileId) {
+  try {
+    await client.uploads.delete(props.spaceId, fileId);
+    uploadedFiles.value = uploadedFiles.value.filter((f) => f.id !== fileId);
+    emit("delete", fileId);
+  } catch {
+    toast.add({ title: "Failed to delete file", color: "error" });
+  }
+}
+async function checkPending() {
+  try {
+    pendingCount.value = await client.getPendingUploadsCount();
+  } catch {
+  }
+}
+function formatSize(bytes) {
+  if (bytes < 1024) return `${bytes} B`;
+  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
+  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+}
+function isImage(mimeType) {
+  return mimeType.startsWith("image/");
+}
+function resolveUrl(url) {
+  if (!url) return "";
+  if (url.startsWith("http://") || url.startsWith("https://") || url.startsWith("blob:")) return url;
+  return `${baseUrl}${url.startsWith("/") ? "" : "/"}${url}`;
+}
+onMounted(() => {
+  loadFiles();
+  checkPending();
+});
+defineExpose({ refresh: loadFiles });
+</script>
+
+<template>
+  <div class="space-y-4">
+    <div class="flex items-center justify-between">
+      <h3 class="text-sm font-medium">Files</h3>
+      <UBadge
+        v-if="pendingCount > 0"
+        :label="`${pendingCount} pending`"
+        color="warning"
+        variant="subtle"
+        size="xs"
+        icon="i-lucide-cloud-off"
+      />
+    </div>
+
+    <UFileUpload
+      v-model="localFiles"
+      :accept="accept"
+      :multiple="multiple"
+    >
+      <template #actions="{ open }">
+        <UButton
+          label="Upload files"
+          icon="i-lucide-upload"
+          color="neutral"
+          variant="outline"
+          @click="open()"
+        />
+      </template>
+    </UFileUpload>
+
+    <USkeleton v-if="loading" class="h-24" />
+
+    <UEmpty
+      v-else-if="uploadedFiles.length === 0"
+      icon="i-lucide-file"
+      title="No files uploaded"
+      size="sm"
+    />
+
+    <div v-else class="grid grid-cols-2 sm:grid-cols-3 gap-2">
+      <div
+        v-for="file in uploadedFiles"
+        :key="file.id"
+        class="group relative rounded-(--ui-radius) border border-(--ui-border) overflow-hidden"
+      >
+        <img
+          v-if="isImage(file.mimeType)"
+          :src="resolveUrl(file.url)"
+          :alt="file.filename"
+          class="w-full h-24 object-cover"
+        />
+        <div
+          v-else
+          class="w-full h-24 flex items-center justify-center bg-(--ui-bg-elevated)"
+        >
+          <UIcon name="i-lucide-file" class="size-8 text-(--ui-text-muted)" />
+        </div>
+
+        <div class="p-1.5">
+          <div class="text-xs truncate">{{ file.filename }}</div>
+          <div class="text-xs text-(--ui-text-muted)">{{ formatSize(file.size) }}</div>
+        </div>
+
+        <UButton
+          icon="i-lucide-x"
+          variant="soft"
+          color="error"
+          size="2xs"
+          class="absolute top-1 right-1 opacity-0 group-hover:opacity-100"
+          @click="deleteFile(file.id)"
+        />
+      </div>
+    </div>
+  </div>
+</template>

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

@@ -0,0 +1,22 @@
+import type { FileUpload as CollabFile } from "@rgby/collab-core";
+type __VLS_Props = {
+    spaceId: string;
+    documentId?: string;
+    accept?: string;
+    multiple?: boolean;
+};
+declare function loadFiles(): Promise<void>;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {
+    refresh: typeof loadFiles;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    delete: (fileId: string) => any;
+    upload: (file: CollabFile) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onDelete?: ((fileId: string) => any) | undefined;
+    onUpload?: ((file: CollabFile) => any) | undefined;
+}>, {
+    multiple: boolean;
+    accept: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

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