@abraca/nuxt 0.1.1 → 0.3.0

package/dist/runtime/components/AEditor.vue

@@ -1,5 +1,8 @@
 <script setup>
 import { shallowRef, ref, watch, watchEffect, computed, nextTick } from "vue";
+import { Fragment } from "@tiptap/pm/model";
+import { resolveDocType, GEO_TYPE_META_SCHEMAS } from "../utils/docTypes";
+import { schemaFieldToAttrs, userFieldToAttrs } from "../extensions/meta-field";
 import { useEditor } from "../composables/useEditor";
 import { useEditorToolbar } from "../composables/useEditorToolbar";
 import { useEditorSuggestions } from "../composables/useEditorSuggestions";
@@ -13,7 +16,9 @@ const props = defineProps({
   showToolbar: { type: Boolean, required: false, default: true },
   showSuggestionMenu: { type: Boolean, required: false, default: true },
   showDragHandle: { type: Boolean, required: false, default: true },
-  docMeta: { type: Object, required: false }
+  docMeta: { type: Object, required: false },
+  parentType: { type: String, required: false },
+  metaSchema: { type: Array, required: false }
 });
 const emit = defineEmits(["ready", "update", "rename", "updateMeta"]);
 const model = defineModel({ type: null });
@@ -37,7 +42,35 @@ watch(ready, (val) => {
 });
 const editorRef = ref(null);
 const { items: toolbarItems } = useEditorToolbar({ docId: props.docId });
-const { items: suggestionItems } = useEditorSuggestions({ docId: props.docId });
+const resolvedMetaSchema = computed(() => {
+  if (props.metaSchema) return props.metaSchema;
+  const geoType = props.docMeta?.geoType;
+  if (geoType && geoType in GEO_TYPE_META_SCHEMAS)
+    return GEO_TYPE_META_SCHEMAS[geoType];
+  return resolveDocType(props.parentType, registry).metaSchema ?? [];
+});
+const { items: allSuggestionItems, propertiesOnlyItems } = useEditorSuggestions({ docId: props.docId });
+const isInDocumentMeta = ref(false);
+watchEffect((onCleanup) => {
+  const ed = editorRef.value?.editor;
+  if (!ed || !ready.value) return;
+  const check = () => {
+    const { $head } = ed.state.selection;
+    let inMeta = false;
+    for (let d = $head.depth; d >= 0; d--) {
+      if ($head.node(d).type.name === "documentMeta") {
+        inMeta = true;
+        break;
+      }
+    }
+    isInDocumentMeta.value = inMeta;
+  };
+  ed.on("selectionUpdate", check);
+  onCleanup(() => ed.off("selectionUpdate", check));
+});
+const suggestionItems = computed(
+  () => isInDocumentMeta.value ? propertiesOnlyItems.value : allSuggestionItems.value
+);
 const dragHandle = useEditorDragHandle();
 watchEffect(() => {
   const isReady = ready.value;
@@ -49,6 +82,57 @@ watchEffect(() => {
   storage.pageMeta = docMeta ?? null;
   storage.updateMeta = (patch) => emit("updateMeta", patch);
 });
+let metaInitDone = false;
+function handleMetaUpdate(patch) {
+  emit("updateMeta", patch);
+}
+function initDocumentMeta(ed) {
+  if (metaInitDone) return;
+  const doc2 = ed.state.doc;
+  let metaPos = -1;
+  let metaNode = null;
+  doc2.forEach((node, offset) => {
+    if (node.type.name === "documentMeta") {
+      metaPos = offset;
+      metaNode = node;
+    }
+  });
+  if (metaPos === -1 || !metaNode) return;
+  if (metaNode.childCount > 0) {
+    metaInitDone = true;
+    return;
+  }
+  const docMeta = props.docMeta;
+  if (!docMeta) return;
+  const schema = resolvedMetaSchema.value;
+  const userFields = docMeta._metaFields ?? [];
+  const wasAlreadyInitialized = !!docMeta._metaInitialized;
+  if (wasAlreadyInitialized && !schema.length) {
+    metaInitDone = true;
+    return;
+  }
+  if (!wasAlreadyInitialized) {
+    handleMetaUpdate({ _metaInitialized: true });
+  }
+  if (!schema.length && !userFields.length) {
+    metaInitDone = true;
+    return;
+  }
+  const metaFieldType = ed.schema.nodes.metaField;
+  if (!metaFieldType) return;
+  const nodesToInsert = wasAlreadyInitialized ? schema.map((f) => metaFieldType.create(schemaFieldToAttrs(f))) : [
+    ...schema.map((f) => metaFieldType.create(schemaFieldToAttrs(f))),
+    ...userFields.map((f) => metaFieldType.create(userFieldToAttrs(f)))
+  ];
+  const { tr } = ed.state;
+  const insertPos = metaPos + 1;
+  tr.insert(insertPos, Fragment.fromArray(nodesToInsert));
+  ed.view.dispatch(tr);
+  if (!wasAlreadyInitialized && userFields.length) {
+    handleMetaUpdate({ _metaFields: void 0 });
+  }
+  metaInitDone = true;
+}
 let syncingFromEditor = false;
 const _lastEmittedHeader = ref("");
 function getHeaderText(ed) {
@@ -106,8 +190,12 @@ watchEffect((onCleanup) => {
   }
   function onUpdate() {
     syncHeaderToTree(ed);
+    initDocumentMeta(ed);
   }
-  nextTick(() => doInitialSync());
+  nextTick(() => {
+    doInitialSync();
+    initDocumentMeta(ed);
+  });
   ed.on("update", onUpdate);
   onCleanup(() => ed.off("update", onUpdate));
 });
@@ -141,7 +229,10 @@ function onPlusClick(e, onClick) {
 <template>
   <ClientOnly>
     <!-- Loading skeleton while extensions and child provider are loading -->
-    <div v-if="!extensions.length" class="p-6 space-y-3">
+    <div
+      v-if="!extensions.length"
+      class="p-6 space-y-3"
+    >
       <div class="h-8 w-64 animate-pulse rounded bg-elevated" />
       <div class="h-4 w-full animate-pulse rounded bg-elevated" />
       <div class="h-4 w-3/4 animate-pulse rounded bg-elevated" />
@@ -151,6 +242,7 @@ function onPlusClick(e, onClick) {
     <UEditor
       v-else
       ref="editorRef"
+      v-slot="{ editor }"
       v-model="model"
       :content-type="contentType"
       :editable="editable"
@@ -158,11 +250,14 @@ function onPlusClick(e, onClick) {
       :starter-kit="{ undoRedo: false, codeBlock: false, document: false }"
       :handlers="editorHandlers"
       :placeholder="placeholder"
-      v-slot="{ editor }"
       @update:model-value="emit('update', $event)"
     >
       <!-- Default slot: app can override entire editor content -->
-      <slot :editor="editor" :connected-users="connectedUsers" :ready="ready">
+      <slot
+        :editor="editor"
+        :connected-users="connectedUsers"
+        :ready="ready"
+      >
         <!-- ── Bubble toolbar (appears when text is selected) ─────────────── -->
         <UEditorToolbar
           v-if="showToolbar"
@@ -182,8 +277,8 @@ function onPlusClick(e, onClick) {
         <!-- ── Drag handle — plus button + grip dropdown ───────────────────── -->
         <UEditorDragHandle
           v-if="showDragHandle"
-          :editor="editor"
           v-slot="{ ui, onClick }"
+          :editor="editor"
           @node-change="dragHandle.onNodeChange"
         >
           <!-- Plus: insert block via slash menu -->

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

@@ -1,4 +1,5 @@
 import type { DocPageMeta } from '../types.js';
+import type { MetaField } from '../utils/docTypes.js';
 type __VLS_Props = {
     /** Y.Doc ID to load as a child document */
     docId: string;
@@ -18,6 +19,10 @@ type __VLS_Props = {
     showDragHandle?: boolean;
     /** Current document metadata from the doc-tree — written into MetaField storage */
     docMeta?: DocPageMeta;
+    /** Parent document's type key — used to resolve metaSchema for auto-inserting chips */
+    parentType?: string;
+    /** Override metaSchema directly instead of resolving from parentType */
+    metaSchema?: MetaField[];
 };
 type __VLS_ModelProps = {
     modelValue?: any;
@@ -39,15 +44,15 @@ type __VLS_Slots = {} & {
 declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:modelValue": (value: any) => any;
     rename: (label: string) => any;
-    ready: () => any;
-    update: (content: any) => any;
     updateMeta: (patch: Partial<DocPageMeta>) => any;
+    update: (content: any) => any;
+    ready: () => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
     "onUpdate:modelValue"?: ((value: any) => any) | undefined;
     onRename?: ((label: string) => any) | undefined;
-    onReady?: (() => any) | undefined;
-    onUpdate?: ((content: any) => any) | undefined;
     onUpdateMeta?: ((patch: Partial<DocPageMeta>) => any) | undefined;
+    onUpdate?: ((content: any) => any) | undefined;
+    onReady?: (() => any) | undefined;
 }>, {
     contentType: "json" | "html" | "markdown";
     editable: boolean;

package/dist/runtime/components/AFloatingWindow.vue

@@ -19,7 +19,7 @@ const {
   moveWindow,
   resizeWindow
 } = useWindowManager();
-const win = computed(() => windows.value.get(props.windowId));
+const win = computed(() => windows.get(props.windowId));
 const isAnimatingOut = ref(false);
 const animStyle = ref({});
 watch(() => win.value?.minimized, (minimized, wasMinimized) => {

package/dist/runtime/components/AIconPicker.vue

@@ -207,7 +207,10 @@ function onOpen(v) {
 </script>
 
 <template>
-  <UPopover v-model:open="open" @update:open="onOpen">
+  <UPopover
+    v-model:open="open"
+    @update:open="onOpen"
+  >
     <button
       type="button"
       class="flex items-center gap-2 h-8 px-2 rounded-md border border-default hover:bg-elevated/60 transition-colors"
@@ -241,7 +244,10 @@ function onOpen(v) {
             :title="name"
             @click="select(name)"
           >
-            <UIcon :name="`i-lucide-${name}`" class="size-4" />
+            <UIcon
+              :name="`i-lucide-${name}`"
+              class="size-4"
+            />
           </button>
         </div>
         <button

package/dist/runtime/components/ANodePanel.vue

@@ -23,17 +23,16 @@ const tree = computed(() => {
   if (!props.nodeId) return null;
   return useChildTree(rootDoc, props.nodeId);
 });
+const treeMap = useSyncedMap(rootDoc, "doc-tree");
 const entry = computed(() => {
   if (!props.nodeId) return null;
-  const treeMap = rootDoc.value?.getMap("doc-tree");
-  return treeMap?.get(props.nodeId) ?? null;
+  return treeMap.data[props.nodeId] ?? null;
 });
 const meta = computed(() => entry.value?.meta ?? {});
 const currentType = computed(() => entry.value?.type ?? "doc");
 function patchMeta(patch) {
-  if (!props.nodeId || !rootDoc.value) return;
-  const treeMap = rootDoc.value.getMap("doc-tree");
-  const e = treeMap.get(props.nodeId);
+  if (!props.nodeId) return;
+  const e = treeMap.data[props.nodeId];
   if (e) {
     treeMap.set(props.nodeId, {
       ...e,
@@ -43,32 +42,11 @@ function patchMeta(patch) {
   }
 }
 function patchType(type) {
-  if (!props.nodeId || !rootDoc.value) return;
-  const treeMap = rootDoc.value.getMap("doc-tree");
-  const e = treeMap.get(props.nodeId);
+  if (!props.nodeId) return;
+  const e = treeMap.data[props.nodeId];
   if (e) treeMap.set(props.nodeId, { ...e, type, updatedAt: Date.now() });
 }
 const activeTab = ref("editor");
-const tabs = computed(() => {
-  const base = [
-    { key: "editor", label: locale.value.editorTab, icon: "i-lucide-file-text" },
-    { key: "properties", label: locale.value.propertiesTab, icon: "i-lucide-sliders-horizontal" }
-  ];
-  const pluginSlots2 = registry.getAllNodePanelSlots().filter((slot) => {
-    if (!props.nodeId || !tree.value) return false;
-    const e = tree.value.entries.value.find((en) => en.id === props.nodeId);
-    if (!e) return false;
-    return slot.when({
-      childId: props.nodeId,
-      childDoc: props.childProvider?.document ?? null,
-      parentDocId: props.nodeId,
-      parentType: props.docType,
-      meta: meta.value,
-      tree: tree.value
-    });
-  });
-  return [...base, ...pluginSlots2.map((s) => ({ key: s.id, label: s.label, icon: s.icon }))];
-});
 const pluginSlots = computed(() => {
   return registry.getAllNodePanelSlots().filter((slot) => {
     if (!props.nodeId || !tree.value) return false;
@@ -129,19 +107,19 @@ function setCustomFieldValue(field, value) {
   patchMeta({ [field.key]: value });
 }
 const statusOptions = [
-  { label: "None", value: "" },
+  { label: "None", value: "none" },
   { label: "Todo", value: "todo" },
   { label: "In progress", value: "in-progress" },
   { label: "Done", value: "done" },
   { label: "Archived", value: "archived" }
 ];
 const priorityOptions = [
-  { label: "None", value: 0 },
-  { label: "1 \u2014 Low", value: 1 },
-  { label: "2", value: 2 },
-  { label: "3 \u2014 Medium", value: 3 },
-  { label: "4", value: 4 },
-  { label: "5 \u2014 High", value: 5 }
+  { label: "None", value: "none" },
+  { label: "1 \u2014 Low", value: "1" },
+  { label: "2", value: "2" },
+  { label: "3 \u2014 Medium", value: "3" },
+  { label: "4", value: "4" },
+  { label: "5 \u2014 High", value: "5" }
 ];
 const addFieldMenuItems = computed(
   () => META_FIELD_DEFINITIONS.map((def) => ({
@@ -157,43 +135,85 @@ const addFieldMenuItems = computed(
     v-model:open="open"
     side="right"
     :title="nodeLabel || 'Document'"
-    :ui="{ width: 'max-w-xl' }"
+    :ui="{ width: 'sm:max-w-2xl' }"
     @update:open="(v) => !v && emit('close')"
   >
     <template #header>
-      <div class="flex items-center gap-2 min-w-0">
+      <div class="flex items-center gap-2 min-w-0 flex-1">
         <UIcon
           :name="meta.icon ?? 'i-lucide-file-text'"
           class="size-4 shrink-0"
           :style="meta.color ? `color: ${meta.color}` : ''"
           :class="meta.color ? '' : 'text-muted'"
         />
-        <span class="font-medium truncate">{{ nodeLabel || "Document" }}</span>
+        <span class="font-medium truncate flex-1">{{ nodeLabel || "Document" }}</span>
+        <UTooltip
+          text="Open as full page"
+          :content="{ side: 'bottom' }"
+        >
+          <UButton
+            icon="i-lucide-expand"
+            size="xs"
+            variant="ghost"
+            color="neutral"
+            @click="navigateTo(`/app/${nodeId}`)"
+          />
+        </UTooltip>
       </div>
     </template>
 
     <template #body>
-      <!-- Tabs -->
-      <UTabs
-        v-model="activeTab"
-        :items="tabs"
-        variant="link"
-        class="mb-4"
-      />
+      <!-- Tab bar -->
+      <div class="flex items-center gap-1 border-b border-(--ui-border) mb-4 -mt-2">
+        <UButton
+          icon="i-lucide-file-text"
+          :label="locale.editorTab"
+          size="sm"
+          :color="activeTab === 'editor' ? 'primary' : 'neutral'"
+          :variant="activeTab === 'editor' ? 'soft' : 'ghost'"
+          @click="activeTab = 'editor'"
+        />
+        <UButton
+          icon="i-lucide-sliders-horizontal"
+          :label="locale.propertiesTab"
+          size="sm"
+          :color="activeTab === 'properties' ? 'primary' : 'neutral'"
+          :variant="activeTab === 'properties' ? 'soft' : 'ghost'"
+          @click="activeTab = 'properties'"
+        />
+        <UButton
+          v-for="slot in pluginSlots"
+          :key="slot.id"
+          :icon="slot.icon"
+          :label="slot.label"
+          size="sm"
+          :color="activeTab === slot.id ? 'primary' : 'neutral'"
+          :variant="activeTab === slot.id ? 'soft' : 'ghost'"
+          @click="activeTab = slot.id"
+        />
+      </div>
 
       <!-- Editor tab -->
-      <div v-show="activeTab === 'editor'" class="h-[60vh]">
+      <div
+        v-show="activeTab === 'editor'"
+        class="min-h-[60vh]"
+      >
         <AEditor
           v-if="nodeId"
           :doc-id="nodeId"
           :child-provider="childProvider"
+          :parent-type="docType"
+          :doc-meta="meta"
           class="h-full overflow-auto"
+          @update-meta="patchMeta"
         />
       </div>
 
       <!-- Properties tab -->
-      <div v-show="activeTab === 'properties'" class="space-y-4">
-
+      <div
+        v-show="activeTab === 'properties'"
+        class="space-y-4"
+      >
         <!-- Document type -->
         <div class="space-y-1">
           <label class="text-xs font-medium text-muted">{{ locale.docType }}</label>
@@ -225,23 +245,24 @@ const addFieldMenuItems = computed(
         <div class="grid grid-cols-2 gap-3">
           <div class="space-y-1">
             <label class="text-xs font-medium text-muted">{{ locale.status }}</label>
-            <USelectMenu
-              :model-value="meta.status ?? ''"
+            <USelect
+              :model-value="meta.status || 'none'"
               :items="statusOptions"
               value-key="value"
-              placeholder="None"
+              label-key="label"
               size="sm"
-              @update:model-value="patchMeta({ status: $event || void 0 })"
+              @update:model-value="patchMeta({ status: $event === 'none' ? void 0 : $event })"
             />
           </div>
           <div class="space-y-1">
             <label class="text-xs font-medium text-muted">{{ locale.priority }}</label>
-            <USelectMenu
-              :model-value="meta.priority ?? 0"
+            <USelect
+              :model-value="meta.priority ? String(meta.priority) : 'none'"
               :items="priorityOptions"
               value-key="value"
+              label-key="label"
               size="sm"
-              @update:model-value="patchMeta({ priority: $event || void 0 })"
+              @update:model-value="patchMeta({ priority: $event === 'none' ? void 0 : Number($event) })"
             />
           </div>
         </div>
@@ -269,7 +290,10 @@ const addFieldMenuItems = computed(
               class="ml-1 text-xs text-muted hover:text-default"
               @click="patchMeta({ rating: void 0 })"
             >
-              <UIcon name="i-lucide-x" class="size-3" />
+              <UIcon
+                name="i-lucide-x"
+                class="size-3"
+              />
             </button>
           </div>
         </div>
@@ -317,7 +341,10 @@ const addFieldMenuItems = computed(
               @click="removeTag(tag)"
             >
               {{ tag }}
-              <UIcon name="i-lucide-x" class="size-3 ml-1" />
+              <UIcon
+                name="i-lucide-x"
+                class="size-3 ml-1"
+              />
             </UBadge>
           </div>
           <UInput
@@ -330,10 +357,16 @@ const addFieldMenuItems = computed(
         </div>
 
         <!-- Cover image -->
-        <div v-if="meta.coverUploadId || meta.coverDocId" class="space-y-1">
+        <div
+          v-if="meta.coverUploadId || meta.coverDocId"
+          class="space-y-1"
+        >
           <label class="text-xs font-medium text-muted">{{ locale.cover }}</label>
           <div class="flex items-center gap-2 text-xs text-muted">
-            <UIcon name="i-lucide-image" class="size-4 shrink-0" />
+            <UIcon
+              name="i-lucide-image"
+              class="size-4 shrink-0"
+            />
             <span class="truncate">{{ meta.coverUploadId ?? meta.coverDocId }}</span>
             <UButton
               icon="i-lucide-x"
@@ -488,7 +521,10 @@ const addFieldMenuItems = computed(
                   class="cursor-pointer"
                   @click="setCustomFieldValue(field, getCustomFieldValue(field).filter((x) => x !== t))"
                 >
-                  {{ t }}<UIcon name="i-lucide-x" class="size-3 ml-1" />
+                  {{ t }}<UIcon
+                    name="i-lucide-x"
+                    class="size-3 ml-1"
+                  />
                 </UBadge>
               </div>
             </template>
@@ -522,7 +558,10 @@ const addFieldMenuItems = computed(
       </div>
 
       <!-- Plugin slots -->
-      <template v-for="slot in pluginSlots" :key="slot.id">
+      <template
+        v-for="slot in pluginSlots"
+        :key="slot.id"
+      >
         <div v-show="activeTab === slot.id">
           <component
             :is="slot.component"

package/dist/runtime/components/ANotifications.vue

@@ -25,12 +25,24 @@ function openAndMarkFetched() {
         :aria-label="`Notifications${unreadCount > 0 ? ` (${unreadCount} unread)` : ''}`"
         @click="openAndMarkFetched"
       >
-        <template v-if="unreadCount > 0" #trailing>
-          <UChip :text="unreadCount > 9 ? '9+' : String(unreadCount)" color="error" size="xs" />
+        <template
+          v-if="unreadCount > 0"
+          #trailing
+        >
+          <UChip
+            :text="unreadCount > 9 ? '9+' : String(unreadCount)"
+            color="error"
+            size="xs"
+          />
         </template>
       </UButton>
 
-      <USlideover v-model:open="isOpen" :title="locale.title" side="right" :ui="{ width: 'max-w-sm' }">
+      <USlideover
+        v-model:open="isOpen"
+        :title="locale.title"
+        side="right"
+        :ui="{ width: 'max-w-sm' }"
+      >
         <template #header>
           <div class="flex items-center justify-between w-full">
             <span class="font-semibold">{{ locale.title }}</span>
@@ -56,15 +68,30 @@ function openAndMarkFetched() {
 ]"
               @click="markRead(n.id)"
             >
-              <UIcon :name="n.icon ?? 'i-lucide-bell'" class="size-4 shrink-0 mt-0.5 text-muted" />
+              <UIcon
+                :name="n.icon ?? 'i-lucide-bell'"
+                class="size-4 shrink-0 mt-0.5 text-muted"
+              />
               <div class="flex-1 min-w-0">
-                <div class="text-sm font-medium truncate">{{ n.title }}</div>
-                <div class="text-xs text-muted line-clamp-2">{{ n.body }}</div>
+                <div class="text-sm font-medium truncate">
+                  {{ n.title }}
+                </div>
+                <div class="text-xs text-muted line-clamp-2">
+                  {{ n.body }}
+                </div>
               </div>
-              <UChip v-if="!n.read" color="primary" size="xs" class="shrink-0 mt-1" />
+              <UChip
+                v-if="!n.read"
+                color="primary"
+                size="xs"
+                class="shrink-0 mt-1"
+              />
             </div>
 
-            <div v-if="!notifications.length" class="text-center py-12 text-muted text-sm">
+            <div
+              v-if="!notifications.length"
+              class="text-center py-12 text-muted text-sm"
+            >
               {{ locale.empty }}
             </div>
           </div>

package/dist/runtime/components/APermissionGuard.vue

@@ -17,6 +17,8 @@ const allowed = computed(() => meetsRole(props.requires));
     v-else
     name="fallback"
   >
-    <p class="text-sm text-muted">{{ locale.noPermission }}</p>
+    <p class="text-sm text-muted">
+      {{ locale.noPermission }}
+    </p>
   </slot>
 </template>

package/dist/runtime/components/APresence.vue

@@ -27,10 +27,21 @@ function userAvatarStyle(user) {
 </script>
 
 <template>
-  <slot :users="users" :overflow="overflow" :current-user="currentUser" :avatar-style="userAvatarStyle">
+  <slot
+    :users="users"
+    :overflow="overflow"
+    :current-user="currentUser"
+    :avatar-style="userAvatarStyle"
+  >
     <!-- Default: render nothing, slot is the API -->
-    <template v-for="user in users" :key="user.clientId">
-      <slot name="user" :user="user" />
+    <template
+      v-for="user in users"
+      :key="user.clientId"
+    >
+      <slot
+        name="user"
+        :user="user"
+      />
     </template>
   </slot>
 </template>

package/dist/runtime/components/AProvider.vue

@@ -37,6 +37,12 @@ provide(ABRA_DOC_KEY, {
 
 <template>
   <component :is="tag">
-    <slot :provider="childProvider" :doc="childDoc" :synced="synced" :doc-id="docId" :error="error" />
+    <slot
+      :provider="childProvider"
+      :doc="childDoc"
+      :synced="synced"
+      :doc-id="docId"
+      :error="error"
+    />
   </component>
 </template>