@abraca/nuxt 2.13.0 → 2.14.0

package/dist/runtime/components/AEditor.vue

@@ -1,6 +1,6 @@
 <script setup>
 import { shallowRef, ref, watch, watchEffect, computed, nextTick, onBeforeUnmount } from "vue";
-import { useNuxtApp } from "#imports";
+import { useNuxtApp, navigateTo, useRuntimeConfig } from "#imports";
 import { Fragment } from "@tiptap/pm/model";
 import { useSyncedMap } from "../composables/useYDoc";
 import { resolveDocType, GEO_TYPE_META_SCHEMAS } from "../utils/docTypes";
@@ -10,6 +10,15 @@ import { useEditor } from "../composables/useEditor";
 import { useDocTree } from "../composables/useDocTree";
 import { useDocBreadcrumb } from "../composables/useDocBreadcrumb";
 import { useDocSlugs } from "../composables/useDocSlugs";
+import { useChildTree } from "../composables/useChildTree";
+import { useFavorites } from "../composables/useFavorites";
+import { useWindowManager } from "../composables/useWindowManager";
+import { useDocDragBus } from "../composables/useDocDragBus";
+import { useDocLinkPick } from "../composables/useDocLinkPick";
+import { makeDocSearch } from "../composables/useDocSuggest";
+import { DocSuggest } from "../extensions/doc-suggest";
+import { useNodeContextMenu } from "../composables/useNodeContextMenu";
+import { DOC_DRAG_MIME, isDocDrag, parseDocDragPayload, isDescendantInMap } from "../utils/docDragDrop";
 import { useEditorToolbar } from "../composables/useEditorToolbar";
 import { useEditorSuggestions } from "../composables/useEditorSuggestions";
 import { useEditorDragHandle } from "../composables/useEditorDragHandle";
@@ -17,6 +26,8 @@ import { useEditorEmojis } from "../composables/useEditorEmojis";
 import { useEditorMentions } from "../composables/useEditorMentions";
 import ALinkPopover from "./editor/ALinkPopover.vue";
 import ADocLinkPopover from "./editor/ADocLinkPopover.vue";
+import ANodeContextMenu from "./shell/ANodeContextMenu.vue";
+import ADocSuggestMenu from "./editor/ADocSuggestMenu.vue";
 import ACodeEditor from "./ACodeEditor.vue";
 const props = defineProps({
   docId: { type: String, required: true },
@@ -52,9 +63,26 @@ watch(provider, async (prov) => {
 onBeforeUnmount(() => {
   provider.value?.unpinChild?.(props.docId);
 });
+const docSuggestEnabled = (useRuntimeConfig().public?.abracadabra?.docPicker ?? "inline") === "inline";
+const _suggestTree = useChildTree(doc, props.docId);
+const docSuggestExt = DocSuggest.configure({
+  search: makeDocSearch(_suggestTree, props.docId),
+  onCommit: (item, mode, range, query) => {
+    const ed = editorRef.value?.editor;
+    if (!ed || !props.editable) return;
+    let docId = item.id;
+    if (item.isCreate) docId = _suggestTree.createChild(props.docId, query.trim() || "Untitled", "doc");
+    if (!docId) return;
+    const chain = ed.chain().focus().deleteRange(range);
+    if (mode === "embed") chain.insertDocEmbed({ docId });
+    else chain.insertDocLink({ docId });
+    chain.run();
+  }
+});
 const { extensions, connectedUsers, ready } = useEditor({
   childProvider,
-  docId: props.docId
+  docId: props.docId,
+  extraExtensions: docSuggestEnabled ? [docSuggestExt] : []
 });
 watch(ready, (val) => {
   if (val) emit("ready");
@@ -81,7 +109,7 @@ const resolvedMetaSchema = computed(() => {
 });
 const { items: allSuggestionItems, propertiesOnlyItems } = useEditorSuggestions({ docId: props.docId });
 const { items: emojiItems } = useEditorEmojis();
-const { items: mentionItems } = useEditorMentions({ docId: props.docId });
+const { items: mentionItems } = useEditorMentions({ docId: props.docId, includeDocuments: false });
 const isInDocumentMeta = ref(false);
 watchEffect((onCleanup) => {
   const ed = editorRef.value?.editor;
@@ -263,7 +291,34 @@ function insertNode(editor, type, attrs, content) {
   if (content) node.content = content;
   return editor.chain().focus().insertContent(node);
 }
+const { pickDoc } = useDocLinkPick();
 const editorHandlers = {
+  // Slash → pick a document → embed it as a block. `execute` returns a chain
+  // synchronously (the dispatcher .run()s it); the actual insert happens async
+  // once the picker resolves.
+  docEmbed: {
+    canExecute: () => true,
+    execute: (editor) => {
+      pickDoc().then((result) => {
+        if (!result) return;
+        editor.chain().focus().insertDocEmbed({ docId: result.id }).run();
+      });
+      return editor.chain().focus();
+    },
+    isActive: (editor) => editor.isActive("docEmbed")
+  },
+  // Slash/drag-handle → pick a document → insert an inline link to it.
+  docLink: {
+    canExecute: () => true,
+    execute: (editor) => {
+      pickDoc().then((result) => {
+        if (!result) return;
+        editor.chain().focus().insertDocLink({ docId: result.id }).run();
+      });
+      return editor.chain().focus();
+    },
+    isActive: (editor) => editor.isActive("docLink")
+  },
   insertMetaField: {
     canExecute: () => true,
     execute: (editor, item) => editor.chain().focus().insertMetaField(item.attrs),
@@ -378,8 +433,101 @@ const _mentionItems = computed(
 const { items: _breadcrumbItems } = useDocBreadcrumb(() => props.docId);
 const { getDocUrl } = useDocSlugs();
 const ancestorChain = computed(
-  () => _breadcrumbItems.value.slice(0, -1).map((a) => ({ ...a, to: getDocUrl(a.id) }))
+  () => _breadcrumbItems.value.slice(0, -1).map((a) => {
+    const entry = docTree.getEntry(a.id);
+    return { ...a, type: entry?.type, to: getDocUrl(a.id) };
+  })
 );
+const bcTree = useChildTree(doc, props.docId);
+const { isFavorite, toggleFavorite } = useFavorites(doc);
+const docDragBus = useDocDragBus();
+const breadcrumbDragId = ref(null);
+const breadcrumbDropTargetId = ref(null);
+function onBcDragStart(e, a) {
+  if (!props.editable) return;
+  breadcrumbDragId.value = a.id;
+  if (e.dataTransfer) {
+    e.dataTransfer.effectAllowed = "move";
+    e.dataTransfer.setData("text/plain", a.id);
+    e.dataTransfer.setData(DOC_DRAG_MIME, JSON.stringify({ id: a.id, label: a.label }));
+  }
+  docDragBus.startDrag({
+    docIds: [a.id],
+    labels: [a.label],
+    icons: a.icon ? [a.icon] : void 0,
+    source: "renderer",
+    sourceDocId: props.docId,
+    pointer: { x: e.clientX, y: e.clientY }
+  });
+}
+function onBcDragEnd() {
+  breadcrumbDragId.value = null;
+  breadcrumbDropTargetId.value = null;
+  docDragBus.endDrag();
+}
+function onBcDragOver(e, ancestorId) {
+  if (!isDocDrag(e)) return;
+  if (breadcrumbDragId.value === ancestorId) return;
+  e.preventDefault();
+  if (e.dataTransfer) e.dataTransfer.dropEffect = "move";
+  breadcrumbDropTargetId.value = ancestorId;
+}
+function onBcDragLeave(e) {
+  const related = e.relatedTarget;
+  if (related && e.currentTarget.contains(related)) return;
+  breadcrumbDropTargetId.value = null;
+}
+function onBcDrop(e, ancestorId) {
+  e.preventDefault();
+  e.stopPropagation();
+  breadcrumbDropTargetId.value = null;
+  if (!props.editable) return;
+  const payload = parseDocDragPayload(e);
+  if (!payload) return;
+  if (payload.id === ancestorId) return;
+  if (isDescendantInMap(bcTree.treeMap.data, payload.id, ancestorId)) return;
+  bcTree.moveEntry(payload.id, ancestorId, Date.now());
+  breadcrumbDragId.value = null;
+  docDragBus.endDrag();
+}
+async function bcOpenAsWindow(id, label) {
+  const wm = useWindowManager();
+  if (wm.windows.has(id)) {
+    wm.focusWindow(id);
+    return;
+  }
+  const childProv = await provider.value?.loadChild(id);
+  if (!childProv) return;
+  if (!childProv.isSynced) {
+    await new Promise((resolve) => {
+      const done = () => {
+        childProv.off("synced", done);
+        resolve();
+      };
+      childProv.on("synced", done);
+      setTimeout(resolve, 6e3);
+    });
+  }
+  const entry = bcTree.treeMap.get(id);
+  wm.openWindow({ id, title: label, docId: id, docType: entry?.type, provider: childProv, initialTab: "editor" });
+}
+function bcMenuItems(a) {
+  return useNodeContextMenu({
+    nodeId: a.id,
+    label: a.label,
+    type: a.type,
+    tree: bcTree,
+    registry,
+    favorites: { isFavorite, toggleFavorite },
+    onOpen: (id) => navigateTo(getDocUrl(id)),
+    onOpenInWindow: () => bcOpenAsWindow(a.id, a.label),
+    onCopyLink: (id) => {
+      if (!import.meta.client || !navigator?.clipboard) return;
+      navigator.clipboard.writeText(new URL(getDocUrl(id), location.origin).href).catch(() => {
+      });
+    }
+  }).items;
+}
 function onPlusClick(e, onClick) {
   e.stopPropagation();
   onClick();
@@ -461,16 +609,29 @@ function onPlusClick(e, onClick) {
               />
             </li>
             <li class="flex min-w-0">
-              <ULink
-                :to="ancestor.to"
-                class="flex items-center gap-1.5 px-1.5 py-0.5 rounded-md text-sm text-(--ui-text-muted) font-medium hover:bg-(--ui-bg-elevated)/60 hover:text-(--ui-text) transition-colors min-w-0 select-none"
-              >
-                <UIcon
-                  :name="ancestor.icon"
-                  class="size-4 shrink-0"
-                />
-                <span class="truncate">{{ ancestor.label }}</span>
-              </ULink>
+              <ANodeContextMenu :items="bcMenuItems(ancestor)">
+                <button
+                  type="button"
+                  draggable="true"
+                  class="flex items-center gap-1.5 px-1.5 py-0.5 rounded-md text-sm font-medium transition-colors min-w-0 select-none cursor-pointer"
+                  :class="[
+  breadcrumbDragId === ancestor.id ? 'opacity-30' : '',
+  breadcrumbDropTargetId === ancestor.id ? 'bg-(--ui-primary)/10 ring-2 ring-(--ui-primary)/50 text-(--ui-text)' : 'text-(--ui-text-muted) hover:bg-(--ui-bg-elevated)/60 hover:text-(--ui-text)'
+]"
+                  @click="navigateTo(ancestor.to)"
+                  @dragstart="onBcDragStart($event, ancestor)"
+                  @dragend="onBcDragEnd"
+                  @dragover="onBcDragOver($event, ancestor.id)"
+                  @dragleave="onBcDragLeave"
+                  @drop="onBcDrop($event, ancestor.id)"
+                >
+                  <UIcon
+                    :name="ancestor.icon"
+                    class="size-4 shrink-0"
+                  />
+                  <span class="truncate">{{ ancestor.label }}</span>
+                </button>
+              </ANodeContextMenu>
             </li>
           </template>
         </ol>
@@ -603,6 +764,13 @@ function onPlusClick(e, onClick) {
               />
             </UDropdownMenu>
           </UEditorDragHandle>
+
+          <!-- Inline `[[` doc-link / `![[` doc-embed mention-style popup
+               (only mounted when docPicker === 'inline'). -->
+          <ADocSuggestMenu
+            v-if="docSuggestEnabled && editor?.storage?.docSuggest"
+            :state="editor.storage.docSuggest.popup"
+          />
         </slot>
       </UEditor>
     </div>
@@ -621,5 +789,5 @@ function onPlusClick(e, onClick) {
 </template>
 
 <style scoped>
-.aeditor-canvas{display:flex;flex-direction:column;min-height:0}.aeditor-breadcrumb{flex-shrink:0;padding:.75rem 1rem 0}@media (min-width:640px){.aeditor-breadcrumb{padding-left:1.5rem;padding-right:1.5rem}}.prose-variant :deep(.tiptap){color:var(--ui-text);font-family:ui-serif,Georgia,Cambria,Times New Roman,Times,serif;font-size:1.0625rem;line-height:1.75}.prose-variant :deep(.tiptap p){margin-bottom:1em;margin-top:0}.prose-variant :deep(.tiptap h1),.prose-variant :deep(.tiptap h2),.prose-variant :deep(.tiptap h3),.prose-variant :deep(.tiptap h4){font-family:ui-serif,Georgia,Cambria,Times New Roman,Times,serif;letter-spacing:-.01em;line-height:1.25;margin-bottom:.5em;margin-top:1.75em}.prose-variant :deep(.tiptap h1){font-size:2rem;font-weight:700}.prose-variant :deep(.tiptap h2){font-size:1.5rem;font-weight:700}.prose-variant :deep(.tiptap h3){font-size:1.25rem;font-weight:600}.prose-variant :deep(.tiptap blockquote){border-left:3px solid var(--ui-border);color:var(--ui-text-muted);font-style:italic;margin-left:0;padding-left:1em}.prose-variant :deep(.tiptap ol),.prose-variant :deep(.tiptap ul){margin-bottom:1em;padding-left:1.5em}.prose-variant :deep(.tiptap .document-header){font-family:ui-serif,Georgia,Cambria,Times New Roman,Times,serif;font-size:2.75rem;font-weight:700;letter-spacing:-.02em;line-height:1.15;margin-bottom:1.5rem}.aeditor-source-wrap{display:flex;flex:1 1 0;flex-direction:column;min-height:0}.aeditor-source-toolbar{align-items:center;background:var(--ui-bg);border-bottom:1px solid var(--ui-border);display:flex;flex-shrink:0;justify-content:space-between;padding:.375rem .75rem}.aeditor-source-toolbar__label{align-items:center;color:var(--ui-text-muted);display:inline-flex;font-size:.75rem;gap:.375rem}.aeditor-source-toolbar__label code{background:var(--ui-bg-elevated);border:1px solid var(--ui-border);border-radius:var(--ui-radius);font-family:ui-monospace,SF Mono,Menlo,Monaco,Consolas,monospace;font-size:.7rem;padding:.05rem .3rem}.aeditor-source-toggle{opacity:.6;position:absolute;right:.375rem;top:.375rem;transition:opacity .12s ease;z-index:5}.aeditor-source-toggle:hover{opacity:1}
+.aeditor-canvas{display:flex;flex-direction:column;min-height:0}.aeditor-breadcrumb{flex-shrink:0;padding:1rem 0 0}@media (min-width:640px){.aeditor-breadcrumb{padding-left:2rem;padding-right:2rem}}.prose-variant :deep(.tiptap){color:var(--ui-text);font-family:ui-serif,Georgia,Cambria,Times New Roman,Times,serif;font-size:1.0625rem;line-height:1.75}.prose-variant :deep(.tiptap p){margin-bottom:1em;margin-top:0}.prose-variant :deep(.tiptap h1),.prose-variant :deep(.tiptap h2),.prose-variant :deep(.tiptap h3),.prose-variant :deep(.tiptap h4){font-family:ui-serif,Georgia,Cambria,Times New Roman,Times,serif;letter-spacing:-.01em;line-height:1.25;margin-bottom:.5em;margin-top:1.75em}.prose-variant :deep(.tiptap h1){font-size:2rem;font-weight:700}.prose-variant :deep(.tiptap h2){font-size:1.5rem;font-weight:700}.prose-variant :deep(.tiptap h3){font-size:1.25rem;font-weight:600}.prose-variant :deep(.tiptap blockquote){border-left:3px solid var(--ui-border);color:var(--ui-text-muted);font-style:italic;margin-left:0;padding-left:1em}.prose-variant :deep(.tiptap ol),.prose-variant :deep(.tiptap ul){margin-bottom:1em;padding-left:1.5em}.prose-variant :deep(.tiptap .document-header){font-family:ui-serif,Georgia,Cambria,Times New Roman,Times,serif;font-size:2.75rem;font-weight:700;letter-spacing:-.02em;line-height:1.15;margin-bottom:1.5rem}.aeditor-source-wrap{display:flex;flex:1 1 0;flex-direction:column;min-height:0}.aeditor-source-toolbar{align-items:center;background:var(--ui-bg);border-bottom:1px solid var(--ui-border);display:flex;flex-shrink:0;justify-content:space-between;padding:.375rem .75rem}.aeditor-source-toolbar__label{align-items:center;color:var(--ui-text-muted);display:inline-flex;font-size:.75rem;gap:.375rem}.aeditor-source-toolbar__label code{background:var(--ui-bg-elevated);border:1px solid var(--ui-border);border-radius:var(--ui-radius);font-family:ui-monospace,SF Mono,Menlo,Monaco,Consolas,monospace;font-size:.7rem;padding:.05rem .3rem}.aeditor-source-toggle{opacity:.6;position:absolute;right:.375rem;top:.375rem;transition:opacity .12s ease;z-index:5}.aeditor-source-toggle:hover{opacity:1}
 </style>

package/dist/runtime/components/ANodePanel.vue

@@ -68,13 +68,29 @@ function patchType(type) {
   if (e) treeMap.set(props.nodeId, { ...e, type, updatedAt: Date.now() });
 }
 const activeTab = ref(props.initialTab);
+const userPickedTab = ref(false);
 watch(() => props.nodeId, (id) => {
-  if (id) activeTab.value = props.initialTab;
+  if (id) {
+    userPickedTab.value = false;
+    activeTab.value = props.initialTab;
+  }
 });
+function setTab(tab) {
+  userPickedTab.value = true;
+  activeTab.value = tab;
+}
 const docTypeDef = computed(() => resolveDocType(currentType.value, registry));
 const usesPageRenderer = computed(
   () => docTypeDef.value.key !== "doc" && !!docTypeDef.value.component
 );
+watch([usesPageRenderer, () => props.nodeId], () => {
+  if (userPickedTab.value || props.initialTab !== "editor") return;
+  activeTab.value = usesPageRenderer.value ? "pageType" : "editor";
+}, { immediate: true });
+const CANONICAL_TABS = ["pageType", "editor", "chat", "settings"];
+const toggleValue = computed(
+  () => CANONICAL_TABS.includes(activeTab.value) ? activeTab.value : null
+);
 const editorRef = ref(null);
 const tiptapEditor = computed(() => editorRef.value?.editor ?? null);
 const resize = useResizableWidth({
@@ -256,9 +272,9 @@ const addFieldMenuItems = computed(
               />
             </div>
 
-            <!-- Right: undo/redo (editor tab) · icon-only tab buttons -->
+            <!-- Right: undo/redo (editor tab) · unified view toggle · extras -->
             <div class="flex items-center gap-0.5">
-              <template v-if="activeTab === 'editor' && !usesPageRenderer && tiptapEditor">
+              <template v-if="activeTab === 'editor' && tiptapEditor">
                 <AEditorUndoButton :editor="tiptapEditor" />
                 <AEditorRedoButton :editor="tiptapEditor" />
                 <USeparator
@@ -267,103 +283,78 @@ const addFieldMenuItems = computed(
                 />
               </template>
 
-              <UTooltip
-                v-if="showEditorTab"
-                :text="locale.editorTab"
-                :content="{ side: 'bottom' }"
-              >
-                <UButton
-                  :icon="usesPageRenderer ? docTypeDef.icon : 'i-lucide-file-text'"
-                  size="xs"
-                  :color="activeTab === 'editor' ? 'primary' : 'neutral'"
-                  :variant="activeTab === 'editor' ? 'soft' : 'ghost'"
-                  @click="activeTab = 'editor'"
-                />
-              </UTooltip>
-              <UTooltip
-                v-if="showPropertiesTab"
-                :text="locale.propertiesTab"
-                :content="{ side: 'bottom' }"
-              >
-                <UButton
-                  icon="i-lucide-sliders-horizontal"
-                  size="xs"
-                  :color="activeTab === 'properties' ? 'primary' : 'neutral'"
-                  :variant="activeTab === 'properties' ? 'soft' : 'ghost'"
-                  @click="activeTab = 'properties'"
+              <!-- Canonical four-slot toggle: pageType · editor · chat · settings -->
+              <ADocViewToggle
+                :model-value="toggleValue"
+                :doc-id="nodeId || ''"
+                :doc-type="currentType"
+                :chat-unread="chatUnread"
+                :editor-disabled="!showEditorTab"
+                :page-type-disabled="!childProvider"
+                :show-chat="showChatTab"
+                :show-settings="showSettingsTab"
+                @update:model-value="setTab"
+              />
+
+              <!-- Module extras kept outside the toggle (cou-sh parity: extras
+                   sit beside the canonical four, never inside them). -->
+              <template v-if="showPropertiesTab || showServerSettingsTab || pluginSlots.length">
+                <USeparator
+                  orientation="vertical"
+                  class="h-4 mx-0.5"
                 />
-              </UTooltip>
-              <UChip
-                v-if="showChatTab"
-                :text="chatUnread > 0 && activeTab !== 'chat' ? String(chatUnread) : void 0"
-                color="error"
-                size="lg"
-                :show="chatUnread > 0 && activeTab !== 'chat'"
-                :inset="true"
-              >
                 <UTooltip
-                  :text="locale.chatTab"
+                  v-if="showPropertiesTab"
+                  :text="locale.propertiesTab"
                   :content="{ side: 'bottom' }"
                 >
                   <UButton
-                    icon="i-lucide-message-circle"
+                    icon="i-lucide-sliders-horizontal"
                     size="xs"
-                    :color="activeTab === 'chat' ? 'primary' : 'neutral'"
-                    :variant="activeTab === 'chat' ? 'soft' : 'ghost'"
-                    @click="activeTab = 'chat'"
+                    :color="activeTab === 'properties' ? 'primary' : 'neutral'"
+                    :variant="activeTab === 'properties' ? 'soft' : 'ghost'"
+                    @click="setTab('properties')"
                   />
                 </UTooltip>
-              </UChip>
-              <UTooltip
-                v-if="showSettingsTab"
-                :text="locale.settingsTab"
-                :content="{ side: 'bottom' }"
-              >
-                <UButton
-                  icon="i-lucide-settings-2"
-                  size="xs"
-                  :color="activeTab === 'settings' ? 'primary' : 'neutral'"
-                  :variant="activeTab === 'settings' ? 'soft' : 'ghost'"
-                  @click="activeTab = 'settings'"
-                />
-              </UTooltip>
-              <UTooltip
-                v-if="showServerSettingsTab"
-                :text="locale.serverTab"
-                :content="{ side: 'bottom' }"
-              >
-                <UButton
-                  icon="i-lucide-bolt"
-                  size="xs"
-                  :color="activeTab === 'serverSettings' ? 'primary' : 'neutral'"
-                  :variant="activeTab === 'serverSettings' ? 'soft' : 'ghost'"
-                  @click="activeTab = 'serverSettings'"
-                />
-              </UTooltip>
-              <UTooltip
-                v-for="slot in pluginSlots"
-                :key="slot.id"
-                :text="slot.label"
-                :content="{ side: 'bottom' }"
-              >
-                <UButton
-                  :icon="slot.icon"
-                  size="xs"
-                  :color="activeTab === slot.id ? 'primary' : 'neutral'"
-                  :variant="activeTab === slot.id ? 'soft' : 'ghost'"
-                  @click="activeTab = slot.id"
-                />
-              </UTooltip>
+                <UTooltip
+                  v-if="showServerSettingsTab"
+                  :text="locale.serverTab"
+                  :content="{ side: 'bottom' }"
+                >
+                  <UButton
+                    icon="i-lucide-bolt"
+                    size="xs"
+                    :color="activeTab === 'serverSettings' ? 'primary' : 'neutral'"
+                    :variant="activeTab === 'serverSettings' ? 'soft' : 'ghost'"
+                    @click="setTab('serverSettings')"
+                  />
+                </UTooltip>
+                <UTooltip
+                  v-for="slot in pluginSlots"
+                  :key="slot.id"
+                  :text="slot.label"
+                  :content="{ side: 'bottom' }"
+                >
+                  <UButton
+                    :icon="slot.icon"
+                    size="xs"
+                    :color="activeTab === slot.id ? 'primary' : 'neutral'"
+                    :variant="activeTab === slot.id ? 'soft' : 'ghost'"
+                    @click="setTab(slot.id)"
+                  />
+                </UTooltip>
+              </template>
             </div>
           </div>
         </slot>
 
         <!-- Content area -->
         <div class="flex flex-col flex-1 min-h-0 overflow-hidden">
-          <!-- Editor tab — swaps to the registered page-type renderer when the
-               doc has a non-'doc' type (kanban / table / calendar / etc.). -->
+          <!-- Page-type tab — the registered renderer for non-'doc' types
+               (kanban / table / calendar / …). Now its own slot, so the editor
+               tab below always exposes the underlying prose. -->
           <div
-            v-show="activeTab === 'editor'"
+            v-show="activeTab === 'pageType'"
             class="flex flex-col flex-1 min-h-0"
           >
             <component
@@ -375,8 +366,15 @@ const addFieldMenuItems = computed(
               :child-provider="childProvider"
               class="flex-1 overflow-hidden"
             />
+          </div>
+
+          <!-- Editor tab — always the TipTap prose editor for the doc body. -->
+          <div
+            v-show="activeTab === 'editor'"
+            class="flex flex-col flex-1 min-h-0"
+          >
             <AEditor
-              v-else-if="nodeId"
+              v-if="nodeId"
               ref="editorRef"
               :doc-id="nodeId"
               :doc-label="resolvedLabel"

package/dist/runtime/components/editor/ADocSuggestMenu.d.vue.ts

@@ -0,0 +1,7 @@
+import type { DocSuggestPopupState } from '../../composables/useDocSuggest.js';
+type __VLS_Props = {
+    state: DocSuggestPopupState;
+};
+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/editor/ADocSuggestMenu.vue

@@ -0,0 +1,68 @@
+<script setup>
+import { computed, ref, watch, nextTick } from "vue";
+const props = defineProps({
+  state: { type: Object, required: true }
+});
+const listRef = ref(null);
+const style = computed(() => {
+  const r = props.state.rect;
+  if (!r) return {};
+  return {
+    left: `${Math.round(r.left)}px`,
+    top: `${Math.round(r.bottom + 6)}px`
+  };
+});
+watch(() => props.state.index, async () => {
+  await nextTick();
+  listRef.value?.querySelector('[data-active="true"]')?.scrollIntoView({ block: "nearest" });
+});
+function pick(item) {
+  props.state.onSelect?.(item);
+}
+</script>
+
+<template>
+  <Teleport to="body">
+    <div
+      v-if="state.active && state.rect && state.items.length"
+      ref="listRef"
+      class="fixed z-[60] w-72 max-h-72 overflow-y-auto overflow-x-hidden rounded-(--ui-radius) border border-(--ui-border) bg-(--ui-bg) shadow-lg p-1"
+      :style="style"
+      @mousedown.prevent
+    >
+      <div class="flex items-center gap-1.5 px-2 py-1 text-[11px] font-medium text-(--ui-text-muted)">
+        <UIcon
+          :name="state.mode === 'embed' ? 'i-lucide-file-box' : 'i-lucide-file-symlink'"
+          class="size-3.5 shrink-0"
+        />
+        <span>{{ state.mode === "embed" ? "Embed document" : "Link document" }}</span>
+      </div>
+
+      <button
+        v-for="(item, i) in state.items"
+        :key="item.id + ':' + i"
+        type="button"
+        :data-active="i === state.index"
+        class="w-full min-w-0 flex items-center gap-2 px-2 py-1.5 rounded-(--ui-radius) text-sm text-left text-(--ui-text)"
+        :class="i === state.index ? 'bg-(--ui-bg-elevated)' : 'hover:bg-(--ui-bg-elevated)/60'"
+        @click="pick(item)"
+      >
+        <UIcon
+          :name="item.icon"
+          class="size-4 shrink-0"
+          :class="item.isCreate ? 'text-(--ui-primary)' : 'text-(--ui-text-dimmed)'"
+        />
+        <span class="flex-1 min-w-0 flex items-baseline gap-1.5 overflow-hidden">
+          <span
+            v-if="item.prefix"
+            class="text-xs text-(--ui-text-dimmed) truncate shrink-0 max-w-[45%]"
+          >{{ item.prefix }} /</span>
+          <span
+            class="truncate"
+            :class="item.isCreate ? 'text-(--ui-primary)' : ''"
+          >{{ item.label }}</span>
+        </span>
+      </button>
+    </div>
+  </Teleport>
+</template>

package/dist/runtime/components/editor/ADocSuggestMenu.vue.d.ts

@@ -0,0 +1,7 @@
+import type { DocSuggestPopupState } from '../../composables/useDocSuggest.js';
+type __VLS_Props = {
+    state: DocSuggestPopupState;
+};
+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/composables/useDocLinkPick.d.ts

@@ -3,16 +3,17 @@ export interface DocLinkPickResult {
     label: string;
 }
 /**
- * Manages the state for the document picker dialog.
- * Used by doc-embed extension and inline link insertion.
+ * Imperative command-palette document picker.
  *
- * The module does not ship a modal component — the consuming app provides
- * one and wires it up to the `pending` state. When the app calls `resolve()`
- * or `cancel()`, the promise returned by `pickDoc()` settles.
+ * Opens `<ADocPickModal>` (a `UCommandPalette` in a `UModal`) via Nuxt UI's
+ * overlay manager and resolves with the chosen doc, or `null` if dismissed.
+ * Self-contained — callers (the slash doc-embed/doc-link handlers, the
+ * `<ADocLinkPopover>` toolbar button, the drag handle) just `await pickDoc()`;
+ * no host wiring required. This is the picker used everywhere EXCEPT the inline
+ * `[[` / `![[` typing triggers (those commit directly via `<ADocSuggestMenu>`).
+ *
+ * Mirrors cou-sh/app/composables/useDocLinkPick.ts.
  */
 export declare function useDocLinkPick(): {
-    isOpen: import("vue").Ref<boolean, boolean>;
     pickDoc: () => Promise<DocLinkPickResult | null>;
-    resolve: (result: DocLinkPickResult) => void;
-    cancel: () => void;
 };

package/dist/runtime/composables/useDocLinkPick.js

@@ -1,22 +1,11 @@
-import { ref } from "vue";
+import { useOverlay } from "#imports";
+import ADocPickModal from "../components/ADocPickModal.vue";
 export function useDocLinkPick() {
-  const isOpen = ref(false);
-  let _resolve = null;
+  const overlay = useOverlay();
+  const modal = overlay.create(ADocPickModal);
   function pickDoc() {
-    return new Promise((resolve2) => {
-      _resolve = resolve2;
-      isOpen.value = true;
-    });
+    const { result } = modal.open();
+    return result;
   }
-  function resolve(result) {
-    isOpen.value = false;
-    _resolve?.(result);
-    _resolve = null;
-  }
-  function cancel() {
-    isOpen.value = false;
-    _resolve?.(null);
-    _resolve = null;
-  }
-  return { isOpen, pickDoc, resolve, cancel };
+  return { pickDoc };
 }