@abraca/nuxt 2.13.0 → 2.15.0

package/dist/module.d.mts

@@ -59,6 +59,7 @@ declare module '@nuxt/schema' {
             };
             debug: boolean;
             docBasePath: string;
+            docPicker: 'inline' | 'command-palette';
             guestName: {
                 adjectives: string[];
                 nouns: string[];
@@ -258,6 +259,20 @@ interface ModuleOptions {
      *   docBasePath: ''            →  /{docId}
      */
     docBasePath?: string;
+    /**
+     * How documents are picked for cross-document references (doc links/embeds).
+     *
+     * - `'inline'` (default) — typing `[[` opens an inline mention-style doc-link
+     *   popup, and `![[` an inline doc-embed popup (flat search + ancestor-path
+     *   prefix). The slash commands + doc-link toolbar button still open the
+     *   command palette.
+     * - `'command-palette'` — disables the inline `[[` / `![[` triggers; the only
+     *   doc-reference entry points are the slash commands + toolbar button, which
+     *   open a `UCommandPalette` modal.
+     *
+     * Default: 'inline'.
+     */
+    docPicker?: 'inline' | 'command-palette';
     /**
      * Mapbox GL access token for the Map renderer.
      * Can be overridden at runtime via NUXT_PUBLIC_ABRACADABRA_MAPBOX_TOKEN.

package/dist/module.json

@@ -4,7 +4,7 @@
   "compatibility": {
     "nuxt": ">=4.0.0"
   },
-  "version": "2.13.0",
+  "version": "2.15.0",
   "builder": {
     "@nuxt/module-builder": "1.0.2",
     "unbuild": "3.6.1"

package/dist/module.mjs

@@ -50,6 +50,7 @@ const module$1 = defineNuxtModule({
     },
     debug: false,
     docBasePath: "/doc",
+    docPicker: "inline",
     guestName: {},
     webrtc: {
       iceServers: [{ urls: "stun:stun.l.google.com:19302" }],
@@ -96,6 +97,7 @@ const module$1 = defineNuxtModule({
           server: options.server ?? {},
           debug: options.debug ?? false,
           docBasePath: options.docBasePath ?? "/doc",
+          docPicker: options.docPicker ?? "inline",
           mapboxToken: options.mapboxToken ?? "",
           guestName: {
             adjectives: options.guestName?.adjectives ?? [],

package/dist/runtime/assets/editor.css

@@ -1 +1,3 @@
-html.dark .tiptap .shiki,html.dark .tiptap .shiki span{background-color:var(--ui-bg-muted)!important;color:var(--shiki-dark)!important}.collaboration-carets__caret{border-left:1px solid #0d0d0d;border-right:1px solid #0d0d0d;margin-left:-1px;margin-right:-1px;opacity:0;pointer-events:none;position:relative;transition:opacity .3s ease;word-break:normal}.collaboration-carets__caret.is-hidden{display:none}.collaboration-carets__caret.is-active{opacity:1}.collaboration-carets__label{border-radius:3px 3px 3px 0;color:#0d0d0d;font-size:12px;font-style:normal;font-weight:600;left:-1px;line-height:normal;padding:.1rem .3rem;position:absolute;top:-1.4em;-webkit-user-select:none;-moz-user-select:none;user-select:none;white-space:nowrap}.ProseMirror-yjs-selection,.collaboration-carets__selection{background-color:var(--collaboration-selection-color)!important;pointer-events:none}.search-highlight{background-color:color-mix(in srgb,var(--color-primary-400) 35%,transparent);border-radius:2px;padding:0 1px}.doc-passage-highlight{background-color:color-mix(in srgb,var(--color-success-400) 35%,transparent);border-radius:2px;padding:0 1px}.tiptap{min-height:100%;padding-bottom:8rem}.tiptap.file-drop-active{border-radius:4px;outline:2px dashed var(--ui-primary);outline-offset:4px}.tiptap .document-header{font-size:2.5rem;font-weight:800;letter-spacing:-.025em;line-height:1.2;margin-bottom:1rem}.tiptap [data-type=document-meta]{align-items:center;display:flex;flex-wrap:wrap;font-size:.875rem;gap:.375rem;line-height:1.75rem;margin-bottom:1.5rem;min-height:1.75rem}.tiptap [data-type=document-meta][data-cursor-in-meta=true][data-empty=true]:after{color:var(--ui-text-dimmed);content:"Type '/' to add a property…";pointer-events:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}.prose-variant .tiptap [data-type=document-meta]{display:none}
+html .cm-editor,html .cm-editor .cm-content,html .cm-editor .cm-gutters,html .cm-editor .cm-scroller,html .cm-editor .cm-tooltip{font-family:var(
+    --font-code,ui-monospace,"SF Mono",Menlo,Monaco,Consolas,monospace
+  )!important}html.dark .tiptap .shiki,html.dark .tiptap .shiki span{background-color:var(--ui-bg-muted)!important;color:var(--shiki-dark)!important}.collaboration-carets__caret{border-left:1px solid #0d0d0d;border-right:1px solid #0d0d0d;margin-left:-1px;margin-right:-1px;opacity:0;pointer-events:none;position:relative;transition:opacity .3s ease;word-break:normal}.collaboration-carets__caret.is-hidden{display:none}.collaboration-carets__caret.is-active{opacity:1}.collaboration-carets__label{border-radius:3px 3px 3px 0;color:#0d0d0d;font-size:12px;font-style:normal;font-weight:600;left:-1px;line-height:normal;padding:.1rem .3rem;position:absolute;top:-1.4em;-webkit-user-select:none;-moz-user-select:none;user-select:none;white-space:nowrap}.ProseMirror-yjs-selection,.collaboration-carets__selection{background-color:var(--collaboration-selection-color)!important;pointer-events:none}.search-highlight{background-color:color-mix(in srgb,var(--color-primary-400) 35%,transparent);border-radius:2px;padding:0 1px}.doc-passage-highlight{background-color:color-mix(in srgb,var(--color-success-400) 35%,transparent);border-radius:2px;padding:0 1px}.tiptap{min-height:100%;padding-bottom:8rem}.tiptap.file-drop-active{border-radius:4px;outline:2px dashed var(--ui-primary);outline-offset:4px}.tiptap .document-header{font-size:2.5rem;font-weight:800;letter-spacing:-.025em;line-height:1.2;margin-bottom:1rem}.tiptap [data-type=document-meta]{align-items:center;display:flex;flex-wrap:wrap;font-size:.875rem;gap:.375rem;line-height:1.75rem;margin-bottom:1.5rem;min-height:1.75rem}.tiptap [data-type=document-meta][data-cursor-in-meta=true][data-empty=true]:after{color:var(--ui-text-dimmed);content:"Type '/' to add a property…";pointer-events:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}.prose-variant .tiptap [data-type=document-meta]{display:none}

package/dist/runtime/components/ACodeEditor.vue

@@ -1,6 +1,7 @@
 <script setup>
 import { ref, shallowRef, watch, computed, onMounted, onBeforeUnmount } from "vue";
 import { loadCodeMirror } from "../utils/loadCodeMirror";
+import { buildAtomOneNuxtHighlight } from "../utils/codeHighlightStyle";
 import { useNuxtApp } from "#imports";
 const props = defineProps({
   provider: { type: null, required: true },
@@ -47,60 +48,148 @@ function buildTheme(bundle) {
       backgroundColor: "var(--ui-bg)",
       color: "var(--ui-text-highlighted)",
       height: "100%",
-      fontSize: "13px",
-      fontFamily: 'ui-monospace, "SF Mono", "Fira Code", "Fira Mono", "Roboto Mono", Menlo, Monaco, Consolas, monospace'
+      fontSize: "13px"
     },
+    // Honour a host-defined code font (`--font-code`) when present; falls back
+    // to the system monospace stack. `!important` + the `.cm-content`/
+    // `.cm-gutters` specificity guards against an aggressive host body-font
+    // rule (e.g. `html[data-font] *`) leaking the UI sans-serif into the editor.
     ".cm-content": {
-      fontFamily: "inherit",
+      fontFamily: 'var(--font-code, ui-monospace, "SF Mono", Menlo, Monaco, Consolas, monospace) !important',
       caretColor: "var(--ui-text-highlighted)",
-      padding: "8px 0"
+      // Top padding leaves room for a remote caret's name badge on the FIRST
+      // line — y-codemirror positions it at `top: -1.4em`, so without headroom
+      // it renders above the content box and is clipped by the toolbar above.
+      padding: "1.6em 0 8px"
     },
-    ".cm-cursor": {
-      borderLeftColor: "var(--ui-text-highlighted)"
+    // Local caret — `drawSelection()` hides the native caret and draws this
+    // bar, so style it to read like the native caret used elsewhere in the
+    // app: a crisp 2px stroke in the body text colour.
+    ".cm-cursor, .cm-dropCursor": {
+      borderLeftColor: "var(--ui-text-highlighted)",
+      borderLeftWidth: "2px"
     },
     ".cm-activeLine": {
       backgroundColor: "color-mix(in srgb, var(--ui-bg-elevated) 50%, transparent)"
     },
     ".cm-activeLineGutter": {
-      backgroundColor: "color-mix(in srgb, var(--ui-bg-elevated) 50%, transparent)"
+      backgroundColor: "color-mix(in srgb, var(--ui-bg-elevated) 50%, transparent)",
+      color: "var(--ui-text)"
     },
     ".cm-gutters": {
-      fontFamily: "inherit",
+      fontFamily: 'var(--font-code, ui-monospace, "SF Mono", Menlo, Monaco, Consolas, monospace) !important',
       backgroundColor: "var(--ui-bg)",
       color: "var(--ui-text-dimmed)",
       border: "none",
       borderRight: "1px solid var(--ui-border)"
     },
+    ".cm-foldPlaceholder": {
+      backgroundColor: "var(--ui-bg-elevated)",
+      color: "var(--ui-text-muted)",
+      border: "1px solid var(--ui-border)"
+    },
+    // Local selection — translucent primary tint, brighter while focused.
     ".cm-selectionBackground": {
       backgroundColor: "color-mix(in srgb, var(--ui-primary) 25%, transparent) !important"
     },
     "&.cm-focused .cm-selectionBackground": {
-      backgroundColor: "color-mix(in srgb, var(--ui-primary) 30%, transparent) !important"
+      backgroundColor: "color-mix(in srgb, var(--ui-primary) 40%, transparent) !important"
     },
     ".cm-matchingBracket": {
       backgroundColor: "color-mix(in srgb, var(--ui-primary) 20%, transparent)",
       outline: "1px solid color-mix(in srgb, var(--ui-primary) 40%, transparent)"
     },
+    // Occurrences of the current selection (highlightSelectionMatches).
+    ".cm-selectionMatch": {
+      backgroundColor: "color-mix(in srgb, var(--ui-primary) 15%, transparent)"
+    },
+    // Find/replace panel + search hits — themed to the UI tokens.
+    ".cm-panels": {
+      backgroundColor: "var(--ui-bg-elevated)",
+      color: "var(--ui-text)"
+    },
+    ".cm-panels.cm-panels-top": { borderBottom: "1px solid var(--ui-border)" },
+    ".cm-panels.cm-panels-bottom": { borderTop: "1px solid var(--ui-border)" },
+    ".cm-searchMatch": {
+      backgroundColor: "color-mix(in srgb, var(--ui-primary) 25%, transparent)",
+      outline: "1px solid color-mix(in srgb, var(--ui-primary) 45%, transparent)",
+      borderRadius: "2px"
+    },
+    ".cm-searchMatch-selected": {
+      backgroundColor: "color-mix(in srgb, var(--ui-primary) 45%, transparent) !important"
+    },
+    ".cm-textfield": {
+      backgroundColor: "var(--ui-bg)",
+      color: "var(--ui-text)",
+      border: "1px solid var(--ui-border)",
+      borderRadius: "4px"
+    },
+    ".cm-button": {
+      backgroundColor: "var(--ui-bg)",
+      backgroundImage: "none",
+      color: "var(--ui-text)",
+      border: "1px solid var(--ui-border)",
+      borderRadius: "4px"
+    },
+    // Autocomplete tooltip.
+    ".cm-tooltip": {
+      backgroundColor: "var(--ui-bg-elevated)",
+      color: "var(--ui-text)",
+      border: "1px solid var(--ui-border)",
+      borderRadius: "6px"
+    },
+    ".cm-tooltip-autocomplete > ul > li[aria-selected]": {
+      backgroundColor: "var(--ui-primary)",
+      color: "var(--ui-bg)"
+    },
+    // ── Remote presence (y-codemirror.next) — matches the TipTap editor's
+    // `.collaboration-carets__*` look so multiplayer feels identical across
+    // both editors. Per-user colour stays inline (set from awareness
+    // `user.color`); we restyle shape only. The caret already matches TipTap
+    // (1px border bars, -1px margins); we only fix the label badge + hide the
+    // caret dot.
+    ".cm-ySelection": {
+      borderRadius: "1px",
+      // Fallback selection fill. y-codemirror paints the band via an inline
+      // `background-color: <user.colorLight>`; a valid inline value wins by
+      // specificity and keeps the per-user colour. But peers that broadcast
+      // only `user.color` (older builds, native gpui/apertura/aperio clients)
+      // leave colorLight as y-codemirror's invalid `color + '33'` default,
+      // which the browser drops — making the band invisible while the caret
+      // (which uses `color` directly) still shows. This neutral tint then
+      // applies, so a remote selection is always visible.
+      backgroundColor: "color-mix(in srgb, var(--ui-primary) 30%, transparent)"
+    },
+    ".cm-ySelectionCaretDot": { display: "none" },
     ".cm-ySelectionInfo": {
-      fontSize: "10px",
-      fontFamily: "system-ui, sans-serif",
-      padding: "1px 4px",
-      borderRadius: "3px",
-      opacity: "0.9",
-      position: "absolute",
-      top: "-1.3em",
+      opacity: "1",
+      top: "-1.4em",
       left: "-1px",
+      padding: "0.1rem 0.3rem",
+      borderRadius: "3px 3px 3px 0",
+      fontFamily: "system-ui, sans-serif",
+      fontSize: "12px",
+      fontStyle: "normal",
+      fontWeight: "600",
+      lineHeight: "normal",
+      color: "#0d0d0d",
       whiteSpace: "nowrap",
-      color: "#fff"
-    }
+      transitionDelay: "0s"
+    },
+    ".cm-ySelectionCaret:hover > .cm-ySelectionInfo": { opacity: "1" }
   }, { dark: true });
 }
 let xmlObserverCleanup = null;
+let syncedOff = null;
 function destroyEditor() {
   if (xmlObserverCleanup) {
     xmlObserverCleanup();
     xmlObserverCleanup = null;
   }
+  if (syncedOff) {
+    syncedOff();
+    syncedOff = null;
+  }
   if (editorView.value) {
     editorView.value.destroy();
     editorView.value = null;
@@ -110,7 +199,7 @@ function createEditor(bundle, container) {
   const { EditorView, lineNumbers, highlightActiveLine, highlightActiveLineGutter, drawSelection, rectangularSelection, crosshairCursor, highlightSpecialChars, dropCursor, keymap } = bundle.view;
   const { EditorState } = bundle.state;
   const { defaultKeymap, history, historyKeymap, indentWithTab } = bundle.commands;
-  const { syntaxHighlighting, defaultHighlightStyle, indentOnInput, bracketMatching, foldGutter, foldKeymap } = bundle.language;
+  const { syntaxHighlighting, HighlightStyle, indentOnInput, bracketMatching, foldGutter, foldKeymap } = bundle.language;
   const { closeBrackets, closeBracketsKeymap, autocompletion, completionKeymap } = bundle.autocomplete;
   const { searchKeymap, highlightSelectionMatches } = bundle.search;
   const baseExtensions = [
@@ -122,7 +211,7 @@ function createEditor(bundle, container) {
     dropCursor(),
     EditorState.allowMultipleSelections.of(true),
     indentOnInput(),
-    syntaxHighlighting(defaultHighlightStyle, { fallback: true }),
+    syntaxHighlighting(buildAtomOneNuxtHighlight(HighlightStyle, bundle.lezerHighlight.tags), { fallback: true }),
     bracketMatching(),
     closeBrackets(),
     autocompletion(),
@@ -168,9 +257,14 @@ function createEditor(bundle, container) {
     const ytext = ydoc.getText(props.fieldName);
     const awareness = prov.awareness;
     if (awareness && userName?.value && publicKeyB64?.value) {
+      const color = userColor?.value ?? "#888";
       awareness.setLocalStateField("user", {
         name: userName.value,
-        color: userColor?.value ?? "#888",
+        color,
+        // Translucent fill for remote selection blocks (y-codemirror.next).
+        // Its default `color + '33'` is invalid for hsl()/named/var() colours,
+        // leaving the selection invisible — supply a format-agnostic value.
+        colorLight: `color-mix(in srgb, ${color} 30%, transparent)`,
         publicKey: publicKeyB64.value
       });
     }
@@ -180,10 +274,25 @@ function createEditor(bundle, container) {
     } else {
       extensions.push(history());
     }
-    return new EditorView({
+    const view = new EditorView({
       state: EditorState.create({ doc: ytext.toString(), extensions }),
       parent: container
     });
+    let rebuiltOnSync = false;
+    const onSynced = () => {
+      if (rebuiltOnSync) return;
+      const v = editorView.value;
+      const liveYtext = prov.document?.getText?.(props.fieldName);
+      if (!v || !liveYtext) return;
+      if (liveYtext.toString() !== v.state.doc.toString()) {
+        rebuiltOnSync = true;
+        void mount();
+      }
+    };
+    prov.on?.("synced", onSynced);
+    syncedOff = () => prov.off?.("synced", onSynced);
+    if (prov.isSynced) Promise.resolve().then(onSynced);
+    return view;
   }
   return new EditorView({
     state: EditorState.create({ doc: "", extensions: [...baseExtensions, history()] }),
@@ -224,7 +333,13 @@ watch(
   ([n, c, k]) => {
     const awareness = props.provider?.awareness;
     if (!awareness || !n || !k) return;
-    awareness.setLocalStateField("user", { name: n, color: c ?? "#888", publicKey: k });
+    const color = c ?? "#888";
+    awareness.setLocalStateField("user", {
+      name: n,
+      color,
+      colorLight: `color-mix(in srgb, ${color} 30%, transparent)`,
+      publicKey: k
+    });
   }
 );
 onBeforeUnmount(destroyEditor);

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

@@ -0,0 +1,40 @@
+export type DocViewTab = 'pageType' | 'editor' | 'chat' | 'settings';
+type __VLS_Props = {
+    /** Active tab. `null` (or absent) = nothing highlighted (e.g. another tab is active). */
+    modelValue?: DocViewTab | null;
+    docId: string;
+    docType?: string;
+    chatUnread?: number;
+    /** Disable the editor segment (e.g. main view is already the editor). */
+    editorDisabled?: boolean;
+    /** Disable the page-type segment (e.g. provider not ready). */
+    pageTypeDisabled?: boolean;
+    /** Whether the user may assign/change the page type (gates the + dropdown). */
+    canChangeType?: boolean;
+    /** Render the chat slot. Off → omitted (e.g. features.chat disabled). */
+    showChat?: boolean;
+    /** Render the settings slot. Off → omitted. */
+    showSettings?: boolean;
+    /** Suppress tooltips (touch devices / during open animations). */
+    disableTooltips?: boolean;
+    size?: 'sm' | 'md';
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    select: (tab: DocViewTab) => any;
+    "update:modelValue": (tab: DocViewTab) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onSelect?: ((tab: DocViewTab) => any) | undefined;
+    "onUpdate:modelValue"?: ((tab: DocViewTab) => any) | undefined;
+}>, {
+    size: "sm" | "md";
+    modelValue: DocViewTab | null;
+    chatUnread: number;
+    editorDisabled: boolean;
+    pageTypeDisabled: boolean;
+    canChangeType: boolean;
+    showChat: boolean;
+    showSettings: boolean;
+    disableTooltips: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/ADocViewToggle.vue

@@ -0,0 +1,234 @@
+<script setup>
+import { ref, computed, onBeforeUnmount } from "vue";
+import { useAbracadabra } from "../composables/useAbracadabra";
+import { useSyncedMap } from "../composables/useYDoc";
+import { useAbraLocale } from "../composables/useAbraLocale";
+import { resolveDocType, getAvailableDocTypes } from "../utils/docTypes";
+const props = defineProps({
+  modelValue: { type: [String, null], required: false, default: null },
+  docId: { type: String, required: true },
+  docType: { type: String, required: false },
+  chatUnread: { type: Number, required: false, default: 0 },
+  editorDisabled: { type: Boolean, required: false, default: false },
+  pageTypeDisabled: { type: Boolean, required: false, default: false },
+  canChangeType: { type: Boolean, required: false, default: true },
+  showChat: { type: Boolean, required: false, default: true },
+  showSettings: { type: Boolean, required: false, default: true },
+  disableTooltips: { type: Boolean, required: false, default: false },
+  size: { type: String, required: false, default: "md" }
+});
+const emit = defineEmits(["update:modelValue", "select"]);
+const locale = computed(() => useAbraLocale("nodePanel"));
+const { doc, registry } = useAbracadabra();
+const treeMap = useSyncedMap(doc, "doc-tree");
+const docTypeDef = computed(() => resolveDocType(props.docType, registry));
+const hasPageType = computed(() => !!(props.docType && props.docType !== "doc"));
+const docTypeItems = computed(
+  () => getAvailableDocTypes(registry).filter((dt) => dt.key !== props.docType).map((dt) => ({
+    label: dt.label,
+    icon: dt.icon,
+    onSelect() {
+      const entry = treeMap.get(props.docId);
+      if (!entry) return;
+      if (entry.type === dt.key) return;
+      treeMap.set(props.docId, { ...entry, type: dt.key, updatedAt: Date.now() });
+    }
+  }))
+);
+const visibleTabs = computed(() => {
+  const t = ["pageType", "editor"];
+  if (props.showChat) t.push("chat");
+  if (props.showSettings) t.push("settings");
+  return t;
+});
+function select(tab) {
+  emit("update:modelValue", tab);
+  emit("select", tab);
+}
+const typeMenuOpen = ref(false);
+let pressTimer = null;
+let longFired = false;
+function onTypePointerDown() {
+  longFired = false;
+  cancelTypePress();
+  pressTimer = setTimeout(() => {
+    longFired = true;
+    typeMenuOpen.value = true;
+  }, 400);
+}
+function cancelTypePress() {
+  if (pressTimer) {
+    clearTimeout(pressTimer);
+    pressTimer = null;
+  }
+}
+function onTypeClick() {
+  cancelTypePress();
+  if (longFired) {
+    longFired = false;
+    return;
+  }
+  select("pageType");
+}
+onBeforeUnmount(cancelTypePress);
+const activeIndex = computed(() => {
+  const v = props.modelValue;
+  if (!v) return -1;
+  if (v === "pageType" && !hasPageType.value) return -1;
+  return visibleTabs.value.indexOf(v);
+});
+const indicatorVisible = computed(() => activeIndex.value >= 0);
+const segPx = computed(() => props.size === "sm" ? 24 : 28);
+const iconClass = computed(() => props.size === "sm" ? "size-3" : "size-3.5");
+</script>
+
+<template>
+  <div
+    class="dvt"
+    :class="`dvt-${size}`"
+    :style="{ '--dvt-seg': segPx + 'px' }"
+  >
+    <!-- Sliding active pill — like Nuxt UI tabs. Equal-width segments make the
+         offset a simple multiple of the segment size, no DOM measuring. -->
+    <span
+      class="dvt-indicator"
+      :class="{ 'dvt-indicator-hidden': !indicatorVisible }"
+      :style="{ transform: `translateX(${Math.max(activeIndex, 0) * 100}%)` }"
+      aria-hidden="true"
+    />
+
+    <!-- Slot 1: page type (selectable tab) or + (assign-type dropdown) -->
+    <UDropdownMenu
+      v-if="!hasPageType"
+      :items="[docTypeItems]"
+      :disabled="!canChangeType"
+    >
+      <UTooltip
+        :text="locale.docType"
+        :content="{ side: 'bottom' }"
+        :disabled="disableTooltips"
+      >
+        <button
+          type="button"
+          class="dvt-seg"
+          :disabled="!canChangeType"
+        >
+          <UIcon
+            name="i-lucide-plus"
+            :class="iconClass"
+          />
+        </button>
+      </UTooltip>
+    </UDropdownMenu>
+    <div
+      v-else
+      class="dvt-seg-host"
+    >
+      <UTooltip
+        :text="docTypeDef.label"
+        :content="{ side: 'bottom' }"
+        :disabled="disableTooltips || typeMenuOpen"
+      >
+        <button
+          type="button"
+          class="dvt-seg"
+          :class="{ active: modelValue === 'pageType' }"
+          :disabled="pageTypeDisabled"
+          @pointerdown="onTypePointerDown"
+          @pointerup="onTypeClick"
+          @pointerleave="cancelTypePress"
+          @pointercancel="cancelTypePress"
+          @contextmenu.prevent="canChangeType && (typeMenuOpen = true)"
+        >
+          <UIcon
+            :name="docTypeDef.icon"
+            :class="iconClass"
+          />
+        </button>
+      </UTooltip>
+      <!-- Hidden anchor: the menu is opened programmatically by long-press so
+           the trigger never steals the click. -->
+      <UDropdownMenu
+        v-if="canChangeType"
+        v-model:open="typeMenuOpen"
+        :items="[docTypeItems]"
+        :content="{ side: 'bottom', align: 'center' }"
+      >
+        <span
+          class="dvt-anchor"
+          aria-hidden="true"
+        />
+      </UDropdownMenu>
+    </div>
+
+    <!-- Slot 2: editor -->
+    <UTooltip
+      :text="locale.editorTab"
+      :content="{ side: 'bottom' }"
+      :disabled="disableTooltips"
+    >
+      <button
+        type="button"
+        class="dvt-seg"
+        :class="{ active: modelValue === 'editor' }"
+        :disabled="editorDisabled"
+        @click="select('editor')"
+      >
+        <UIcon
+          name="i-lucide-text-cursor"
+          :class="iconClass"
+        />
+      </button>
+    </UTooltip>
+
+    <!-- Slot 3: chat (with unread badge) -->
+    <UTooltip
+      v-if="showChat"
+      :text="locale.chatTab"
+      :content="{ side: 'bottom' }"
+      :disabled="disableTooltips"
+    >
+      <button
+        type="button"
+        class="dvt-seg"
+        :class="{ active: modelValue === 'chat' }"
+        @click="select('chat')"
+      >
+        <span class="relative inline-flex">
+          <UIcon
+            name="i-lucide-message-circle"
+            :class="iconClass"
+          />
+          <span
+            v-if="chatUnread > 0 && modelValue !== 'chat'"
+            class="dvt-badge"
+          >{{ chatUnread > 99 ? "99+" : chatUnread }}</span>
+        </span>
+      </button>
+    </UTooltip>
+
+    <!-- Slot 4: settings -->
+    <UTooltip
+      v-if="showSettings"
+      :text="locale.settingsTab"
+      :content="{ side: 'bottom' }"
+      :disabled="disableTooltips"
+    >
+      <button
+        type="button"
+        class="dvt-seg"
+        :class="{ active: modelValue === 'settings' }"
+        @click="select('settings')"
+      >
+        <UIcon
+          name="i-lucide-settings-2"
+          :class="iconClass"
+        />
+      </button>
+    </UTooltip>
+  </div>
+</template>
+
+<style scoped>
+.dvt{align-items:center;background:var(--ui-bg-elevated);border-radius:calc(var(--ui-radius)*1.5);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ui-border-accented),#fff 25%);display:inline-flex;flex-shrink:0;padding:2px;position:relative}.dvt-indicator{background:var(--ui-bg);border-radius:var(--ui-radius);box-shadow:0 1px 2px rgba(0,0,0,.08),inset 0 0 0 1px var(--ui-border-accented);height:calc(100% - 4px);left:2px;pointer-events:none;position:absolute;top:2px;transition:transform .25s cubic-bezier(.4,0,.2,1),opacity .15s ease;width:var(--dvt-seg)}.dvt-indicator-hidden{opacity:0}.dvt-seg-host{display:flex;position:relative}.dvt-anchor{bottom:0;height:0;left:50%;position:absolute;width:0}.dvt-seg{align-items:center;border-radius:var(--ui-radius);color:var(--ui-text-muted);cursor:pointer;display:flex;height:var(--dvt-seg);justify-content:center;position:relative;transition:color .15s ease;width:var(--dvt-seg);z-index:1}.dvt-seg:hover:not(:disabled){color:var(--ui-text)}.dvt-seg.active{color:var(--ui-text-highlighted)}.dvt-seg:disabled{cursor:default;opacity:.4}.dvt-badge{background:var(--ui-color-error-500);border-radius:999px;color:#fff;font-size:9px;font-weight:700;height:15px;line-height:15px;min-width:15px;padding:0 3px;pointer-events:none;position:absolute;right:-7px;text-align:center;top:-6px}
+</style>

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

@@ -0,0 +1,40 @@
+export type DocViewTab = 'pageType' | 'editor' | 'chat' | 'settings';
+type __VLS_Props = {
+    /** Active tab. `null` (or absent) = nothing highlighted (e.g. another tab is active). */
+    modelValue?: DocViewTab | null;
+    docId: string;
+    docType?: string;
+    chatUnread?: number;
+    /** Disable the editor segment (e.g. main view is already the editor). */
+    editorDisabled?: boolean;
+    /** Disable the page-type segment (e.g. provider not ready). */
+    pageTypeDisabled?: boolean;
+    /** Whether the user may assign/change the page type (gates the + dropdown). */
+    canChangeType?: boolean;
+    /** Render the chat slot. Off → omitted (e.g. features.chat disabled). */
+    showChat?: boolean;
+    /** Render the settings slot. Off → omitted. */
+    showSettings?: boolean;
+    /** Suppress tooltips (touch devices / during open animations). */
+    disableTooltips?: boolean;
+    size?: 'sm' | 'md';
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    select: (tab: DocViewTab) => any;
+    "update:modelValue": (tab: DocViewTab) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onSelect?: ((tab: DocViewTab) => any) | undefined;
+    "onUpdate:modelValue"?: ((tab: DocViewTab) => any) | undefined;
+}>, {
+    size: "sm" | "md";
+    modelValue: DocViewTab | null;
+    chatUnread: number;
+    editorDisabled: boolean;
+    pageTypeDisabled: boolean;
+    canChangeType: boolean;
+    showChat: boolean;
+    showSettings: boolean;
+    disableTooltips: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/ADocumentTree.vue

@@ -424,7 +424,7 @@ function onDragStart(e, item) {
   if (!multiSelected.value.has(item.id)) multiSelected.value = /* @__PURE__ */ new Set();
   dragId.value = item.id;
   if (e.dataTransfer) {
-    e.dataTransfer.effectAllowed = "move";
+    e.dataTransfer.effectAllowed = "all";
     e.dataTransfer.setData("text/plain", item.id);
     e.dataTransfer.setData(DOC_DRAG_MIME, JSON.stringify({ id: item.id, label: item.name }));
   }