@abraca/nuxt 2.10.0 → 2.11.0

package/dist/runtime/composables/useEditor.js

@@ -1,4 +1,5 @@
 import { ref, shallowRef, watch, onUnmounted } from "vue";
+import { Extension } from "@tiptap/core";
 import { XmlElement } from "yjs";
 import { useNuxtApp } from "#imports";
 export function useEditor(options) {
@@ -7,10 +8,21 @@ export function useEditor(options) {
   const connectedUsers = ref([]);
   const extensions = shallowRef([]);
   const ready = ref(false);
+  const activeColors = ref(/* @__PURE__ */ new Set());
+  const colorTimeouts = /* @__PURE__ */ new Map();
+  const CARET_ACTIVITY_TIMEOUT = 3e3;
   let cleanup = null;
+  let cursorBroadcastTimer = null;
   watch(childProvider, async (prov) => {
     cleanup?.();
     cleanup = null;
+    if (cursorBroadcastTimer) {
+      clearTimeout(cursorBroadcastTimer);
+      cursorBroadcastTimer = null;
+    }
+    colorTimeouts.forEach((t) => clearTimeout(t));
+    colorTimeouts.clear();
+    activeColors.value = /* @__PURE__ */ new Set();
     if (!prov) {
       ready.value = false;
       extensions.value = [];
@@ -34,6 +46,23 @@ export function useEditor(options) {
       CollaborationCaret.configure({
         provider: prov,
         user,
+        // Custom caret element: a thin coloured bar with a floating name label.
+        // Visibility is activity-gated — the `.is-active` class (added here when
+        // the author is in activeColors, and toggled live by the watcher below)
+        // is what makes the caret visible (editor.css defaults it to opacity:0).
+        render: (u) => {
+          const cursor = document.createElement("span");
+          cursor.classList.add("collaboration-carets__caret");
+          cursor.setAttribute("style", `border-color: ${u.color}`);
+          cursor.dataset.userColor = u.color;
+          const label = document.createElement("div");
+          label.classList.add("collaboration-carets__label");
+          label.setAttribute("style", `background-color: ${u.color}`);
+          label.insertBefore(document.createTextNode(u.name), null);
+          cursor.insertBefore(label, null);
+          if (activeColors.value.has(u.color)) cursor.classList.add("is-active");
+          return cursor;
+        },
         selectionRender: (u) => {
           const color = u.color || "#999";
           const selectionColor = color.startsWith("hsl") ? color.replace("hsl", "hsla").replace(")", ", 0.4)") : `${color}66`;
@@ -43,6 +72,20 @@ export function useEditor(options) {
           };
         }
       }),
+      // Broadcast the local cursor position to child awareness (throttled,
+      // 150ms trailing) so presence/follow consumers can track the caret
+      // without coupling to the CollaborationCaret extension internals.
+      Extension.create({
+        name: "cursor-position-broadcast",
+        onSelectionUpdate() {
+          const { from, to } = this.editor.state.selection;
+          if (cursorBroadcastTimer) clearTimeout(cursorBroadcastTimer);
+          cursorBroadcastTimer = setTimeout(() => {
+            cursorBroadcastTimer = null;
+            prov.awareness?.setLocalStateField("cursorPos", { from, to });
+          }, 150);
+        }
+      }),
       ...extraExtensions
     ];
     const ydoc = prov.document;
@@ -92,6 +135,13 @@ export function useEditor(options) {
       dedupeDocumentMeta();
       ensureDocumentMeta();
     }
+    const onProviderSynced = () => {
+      dedupeHeaders();
+      dedupeDocumentMeta();
+      ensureDocumentMeta();
+    };
+    prov.on?.("synced", onProviderSynced);
+    if (prov.isSynced) Promise.resolve().then(onProviderSynced);
     ready.value = true;
     const updateUsers = () => {
       const states = prov.awareness?.getStates() ?? /* @__PURE__ */ new Map();
@@ -104,14 +154,84 @@ export function useEditor(options) {
       });
       connectedUsers.value = users;
     };
+    const markActive = (color) => {
+      activeColors.value.add(color);
+      activeColors.value = new Set(activeColors.value);
+      if (colorTimeouts.has(color)) clearTimeout(colorTimeouts.get(color));
+      colorTimeouts.set(color, setTimeout(() => {
+        activeColors.value.delete(color);
+        activeColors.value = new Set(activeColors.value);
+        colorTimeouts.delete(color);
+      }, CARET_ACTIVITY_TIMEOUT));
+    };
+    const onDocUpdate = (_update, _origin, _doc, transaction) => {
+      const beforeState = transaction.beforeState;
+      const afterState = transaction.afterState;
+      if (!beforeState || !afterState) return;
+      const localClientId = ydoc.clientID;
+      const states = prov.awareness?.getStates() ?? /* @__PURE__ */ new Map();
+      for (const [clientId, clock] of afterState) {
+        if (clientId === localClientId) continue;
+        const beforeClock = beforeState.get(clientId) ?? 0;
+        if (clock > beforeClock) {
+          const state = states.get(clientId);
+          const color = state?.user?.color;
+          if (color) markActive(color);
+        }
+      }
+    };
+    ydoc?.on?.("update", onDocUpdate);
     prov.awareness?.on("change", updateUsers);
     updateUsers();
+    const fadeOutTimeouts = /* @__PURE__ */ new Map();
+    let caretSyncTimer = null;
+    const stopActiveWatch = watch(activeColors, (colors) => {
+      if (caretSyncTimer) clearTimeout(caretSyncTimer);
+      caretSyncTimer = setTimeout(() => {
+        caretSyncTimer = null;
+        const carets = document.querySelectorAll(".collaboration-carets__caret[data-user-color]");
+        carets.forEach((el) => {
+          const color = el.dataset.userColor;
+          if (!color) return;
+          if (colors.has(color)) {
+            if (fadeOutTimeouts.has(color)) {
+              clearTimeout(fadeOutTimeouts.get(color));
+              fadeOutTimeouts.delete(color);
+            }
+            el.classList.remove("is-hidden");
+            requestAnimationFrame(() => el.classList.add("is-active"));
+          } else {
+            el.classList.remove("is-active");
+            if (!fadeOutTimeouts.has(color)) {
+              fadeOutTimeouts.set(color, setTimeout(() => {
+                el.classList.add("is-hidden");
+                fadeOutTimeouts.delete(color);
+              }, 300));
+            }
+          }
+        });
+      }, 100);
+    });
     cleanup = () => {
+      ydoc?.off?.("update", onDocUpdate);
+      prov.off?.("synced", onProviderSynced);
       prov.awareness?.off("change", updateUsers);
+      stopActiveWatch();
+      if (caretSyncTimer) {
+        clearTimeout(caretSyncTimer);
+        caretSyncTimer = null;
+      }
+      fadeOutTimeouts.forEach((t) => clearTimeout(t));
+      fadeOutTimeouts.clear();
       if (fragment) {
         fragment.unobserve(dedupeHeaders);
         fragment.unobserve(dedupeDocumentMeta);
       }
+      if (cursorBroadcastTimer) {
+        clearTimeout(cursorBroadcastTimer);
+        cursorBroadcastTimer = null;
+      }
+      prov.awareness?.setLocalStateField("cursorPos", null);
     };
   }, { immediate: true });
   onUnmounted(() => cleanup?.());

package/dist/runtime/composables/useEditorToolbar.d.ts

@@ -1,12 +1,18 @@
 /**
  * useEditorToolbar
  *
- * Returns pre-built toolbar item groups for UEditorToolbar,
- * merging the plugin registry's contributions with standard formatting items.
+ * Returns pre-built toolbar item groups for UEditorToolbar, merging the plugin
+ * registry's contributions with standard formatting items.
+ *
+ * Three building blocks, all individually usable:
+ *   - `items`        full toolbar incl. undo/redo — for a docked/main toolbar.
+ *   - `bubbleItems`  selection bubble — same formatting groups WITHOUT undo/redo
+ *                    (undo/redo belongs in the panel header, not a text bubble).
+ *   - `getTableToolbarItems(editor)` table-context actions (row/column/table ops).
  *
  * Usage:
- *   const { items } = useEditorToolbar()
- *   <UEditorToolbar :editor="editor" :items="items" />
+ *   const { bubbleItems } = useEditorToolbar({ editor, docId })
+ *   <UEditorToolbar :editor="editor" :items="bubbleItems" layout="bubble" />
  */
 import type { Editor } from '@tiptap/vue-3';
 export interface UseEditorToolbarOptions {
@@ -19,4 +25,6 @@ export interface UseEditorToolbarOptions {
 }
 export declare function useEditorToolbar(options?: UseEditorToolbarOptions): {
     items: import("vue").ComputedRef<any[][]>;
+    bubbleItems: import("vue").ComputedRef<any[][]>;
+    getTableToolbarItems: (editor: Editor) => any[][];
 };

package/dist/runtime/composables/useEditorToolbar.js

@@ -1,72 +1,94 @@
 import { computed } from "vue";
 import { useAbracadabra } from "./useAbracadabra.js";
 import { usePluginRegistry } from "./usePluginRegistry.js";
+const UNDO_REDO_GROUP = [
+  { kind: "undo", icon: "i-lucide-undo", tooltip: { text: "Undo" } },
+  { kind: "redo", icon: "i-lucide-redo", tooltip: { text: "Redo" } }
+];
+const TURN_INTO_GROUP = [
+  {
+    label: "Turn into",
+    trailingIcon: "i-lucide-chevron-down",
+    activeColor: "neutral",
+    activeVariant: "ghost",
+    tooltip: { text: "Turn into" },
+    content: { align: "start" },
+    ui: { label: "text-xs" },
+    items: [
+      { type: "label", label: "Turn into" },
+      { kind: "paragraph", label: "Paragraph", icon: "i-lucide-type" },
+      { kind: "heading", level: 1, label: "Heading 1", icon: "i-lucide-heading-1" },
+      { kind: "heading", level: 2, label: "Heading 2", icon: "i-lucide-heading-2" },
+      { kind: "heading", level: 3, label: "Heading 3", icon: "i-lucide-heading-3" },
+      { kind: "bulletList", label: "Bullet List", icon: "i-lucide-list" },
+      { kind: "orderedList", label: "Ordered List", icon: "i-lucide-list-ordered" },
+      { kind: "taskList", label: "Task List", icon: "i-lucide-list-check" },
+      { kind: "blockquote", label: "Blockquote", icon: "i-lucide-text-quote" },
+      { kind: "codeBlock", label: "Code Block", icon: "i-lucide-square-code" }
+    ]
+  }
+];
+const MARKS_GROUP = [
+  { kind: "mark", mark: "bold", icon: "i-lucide-bold", tooltip: { text: "Bold" } },
+  { kind: "mark", mark: "italic", icon: "i-lucide-italic", tooltip: { text: "Italic" } },
+  { kind: "mark", mark: "underline", icon: "i-lucide-underline", tooltip: { text: "Underline" } },
+  { kind: "mark", mark: "strike", icon: "i-lucide-strikethrough", tooltip: { text: "Strikethrough" } },
+  { kind: "mark", mark: "code", icon: "i-lucide-code", tooltip: { text: "Inline code" } }
+];
+const SLOTS_GROUP = [
+  { slot: "link" },
+  { slot: "doc-link" },
+  { slot: "create-child-doc" },
+  { slot: "send-to-chat" }
+];
 export function useEditorToolbar(options = {}) {
   const registry = usePluginRegistry();
   const abra = useAbracadabra();
-  const items = computed(() => {
-    const editor = options.editor ?? null;
+  function pluginGroups() {
     const ctx = {
-      editor,
+      editor: options.editor ?? null,
       docId: options.docId,
       abracadabra: abra
     };
-    const base = [[
-      { kind: "undo", icon: "i-lucide-undo", tooltip: { text: "Undo" } },
-      { kind: "redo", icon: "i-lucide-redo", tooltip: { text: "Redo" } }
-    ], [
-      {
-        label: "Turn into",
-        trailingIcon: "i-lucide-chevron-down",
-        activeColor: "neutral",
-        activeVariant: "ghost",
-        tooltip: { text: "Turn into" },
-        content: { align: "start" },
-        ui: { label: "text-xs" },
-        items: [
-          { type: "label", label: "Turn into" },
-          { kind: "paragraph", label: "Paragraph", icon: "i-lucide-type" },
-          { kind: "heading", level: 1, label: "Heading 1", icon: "i-lucide-heading-1" },
-          { kind: "heading", level: 2, label: "Heading 2", icon: "i-lucide-heading-2" },
-          { kind: "heading", level: 3, label: "Heading 3", icon: "i-lucide-heading-3" },
-          { kind: "bulletList", label: "Bullet List", icon: "i-lucide-list" },
-          { kind: "orderedList", label: "Ordered List", icon: "i-lucide-list-ordered" },
-          { kind: "taskList", label: "Task List", icon: "i-lucide-list-check" },
-          { kind: "blockquote", label: "Blockquote", icon: "i-lucide-text-quote" },
-          { kind: "codeBlock", label: "Code Block", icon: "i-lucide-square-code" }
-        ]
-      }
-    ], [
-      { kind: "mark", mark: "bold", icon: "i-lucide-bold", tooltip: { text: "Bold" } },
-      { kind: "mark", mark: "italic", icon: "i-lucide-italic", tooltip: { text: "Italic" } },
-      { kind: "mark", mark: "underline", icon: "i-lucide-underline", tooltip: { text: "Underline" } },
-      { kind: "mark", mark: "strike", icon: "i-lucide-strikethrough", tooltip: { text: "Strikethrough" } },
-      { kind: "mark", mark: "code", icon: "i-lucide-code", tooltip: { text: "Inline code" } }
-    ], [
-      // Slot-based items — UEditorToolbar renders whatever the consumer
-      // supplies via <template #link>, <template #doc-link>, etc. AEditor
-      // provides defaults for `link` and `doc-link` (the popover primitives);
-      // `create-child-doc` and `send-to-chat` render nothing unless the
-      // consuming app fills the slot.
-      { slot: "link" },
-      { slot: "doc-link" },
-      { slot: "create-child-doc" },
-      { slot: "send-to-chat" }
-    ]];
+    const out = [];
     try {
-      const pluginGroups = registry.getAllToolbarItems(ctx);
-      for (const group of pluginGroups) {
-        if (group.items?.length) {
-          base.push(group.items);
-        }
+      const groups = registry.getAllToolbarItems(ctx);
+      for (const group of groups) {
+        if (group.items?.length) out.push(group.items);
       }
     } catch (e) {
       if (import.meta.dev) console.warn("[abracadabra] toolbar: failed to load plugin toolbar items:", e);
     }
-    if (options.extraItems?.length) {
-      base.push(...options.extraItems);
-    }
-    return base;
-  });
-  return { items };
+    return out;
+  }
+  const items = computed(() => [
+    UNDO_REDO_GROUP,
+    TURN_INTO_GROUP,
+    MARKS_GROUP,
+    SLOTS_GROUP,
+    ...pluginGroups(),
+    ...options.extraItems ?? []
+  ]);
+  const bubbleItems = computed(() => [
+    TURN_INTO_GROUP,
+    MARKS_GROUP,
+    SLOTS_GROUP,
+    ...pluginGroups(),
+    ...options.extraItems ?? []
+  ]);
+  function getTableToolbarItems(editor) {
+    const chain = () => editor.chain().focus();
+    return [[
+      { icon: "i-lucide-between-vertical-start", tooltip: { text: "Add row above" }, onClick: () => chain().addRowBefore().run() },
+      { icon: "i-lucide-between-vertical-end", tooltip: { text: "Add row below" }, onClick: () => chain().addRowAfter().run() },
+      { icon: "i-lucide-between-horizontal-start", tooltip: { text: "Add column before" }, onClick: () => chain().addColumnBefore().run() },
+      { icon: "i-lucide-between-horizontal-end", tooltip: { text: "Add column after" }, onClick: () => chain().addColumnAfter().run() }
+    ], [
+      { icon: "i-lucide-rows-3", tooltip: { text: "Delete row" }, onClick: () => chain().deleteRow().run() },
+      { icon: "i-lucide-columns-3", tooltip: { text: "Delete column" }, onClick: () => chain().deleteColumn().run() }
+    ], [
+      { icon: "i-lucide-trash", tooltip: { text: "Delete table" }, onClick: () => chain().deleteTable().run() }
+    ]];
+  }
+  return { items, bubbleItems, getTableToolbarItems };
 }

package/dist/runtime/composables/useNodeContextMenu.d.ts

@@ -14,6 +14,16 @@ interface NodeContextMenuOptions {
     onNavigate?: (id: string) => void;
     onCopyLink?: (id: string) => void;
     onChangeType?: (id: string, newType: string) => void;
+    /** Open the doc — renders an "Open" item (e.g. navigate to the full page). */
+    onOpen?: (id: string) => void;
+    /** Open the doc in a floating window — renders "Open as window". */
+    onOpenInWindow?: (id: string) => void;
+    /** Create a child page under this node — renders "Add child page". */
+    onAddChild?: (parentId: string) => void;
+    /** Export the doc — renders an "Export" submenu (Markdown / HTML). Wire to
+     *  `useDocExport().exportDoc` (kept out of this composable so it stays
+     *  decoupled from the export pipeline + its lazy jszip import). */
+    onExport?: (id: string, format: 'markdown' | 'html') => void;
     favorites?: {
         isFavorite: (id: string) => boolean;
         toggleFavorite: (id: string) => void;

package/dist/runtime/composables/useNodeContextMenu.js

@@ -3,6 +3,25 @@ import { UI_COLORS } from "../types.js";
 export function useNodeContextMenu(opts) {
   const { nodeId, label: _label, type, tree, registry } = opts;
   const docTypes = getAvailableDocTypes(registry);
+  const openGroup = [];
+  if (opts.onOpen) {
+    openGroup.push({
+      label: "Open",
+      icon: "i-lucide-square-arrow-out-up-right",
+      onSelect() {
+        opts.onOpen(nodeId);
+      }
+    });
+  }
+  if (opts.onOpenInWindow) {
+    openGroup.push({
+      label: "Open as window",
+      icon: "i-lucide-app-window",
+      onSelect() {
+        opts.onOpenInWindow(nodeId);
+      }
+    });
+  }
   const editGroup = [
     {
       label: "Rename",
@@ -39,6 +58,15 @@ export function useNodeContextMenu(opts) {
       }))
     }
   ];
+  if (opts.onAddChild) {
+    editGroup.push({
+      label: "Add child page",
+      icon: "i-lucide-file-plus",
+      onSelect() {
+        opts.onAddChild(nodeId);
+      }
+    });
+  }
   const colorItems = UI_COLORS.slice(0, 12).map((colorName) => ({
     label: colorName.charAt(0).toUpperCase() + colorName.slice(1),
     icon: "i-lucide-circle",
@@ -82,6 +110,16 @@ export function useNodeContextMenu(opts) {
       }
     });
   }
+  if (opts.onExport) {
+    actionsGroup.push({
+      label: "Export",
+      icon: "i-lucide-download",
+      children: [
+        { label: "Markdown", icon: "i-lucide-file-text", onSelect: () => opts.onExport(nodeId, "markdown") },
+        { label: "HTML", icon: "i-lucide-file-code", onSelect: () => opts.onExport(nodeId, "html") }
+      ]
+    });
+  }
   const dangerGroup = [
     {
       label: "Move to trash",
@@ -92,7 +130,9 @@ export function useNodeContextMenu(opts) {
       }
     }
   ];
-  const items = [editGroup, appearanceGroup];
+  const items = [];
+  if (openGroup.length > 0) items.push(openGroup);
+  items.push(editGroup, appearanceGroup);
   if (actionsGroup.length > 0) items.push(actionsGroup);
   items.push(dangerGroup);
   return { items };

package/dist/runtime/composables/useSwipeGesture.d.ts

@@ -0,0 +1,48 @@
+import { type MaybeRefOrGetter, type Ref } from 'vue';
+export interface SwipeGestureOptions {
+    /** Element to attach listeners to */
+    el: Ref<HTMLElement | null>;
+    /** Callback when user swipes left (navigate forward) */
+    onSwipeLeft?: () => void;
+    /** Callback when user swipes right (navigate back) */
+    onSwipeRight?: () => void;
+    /** Callback when user swipes up */
+    onSwipeUp?: () => void;
+    /** Callback when user swipes down */
+    onSwipeDown?: () => void;
+    /** Whether swiping left is currently valid (affects damping) */
+    canSwipeLeft?: MaybeRefOrGetter<boolean>;
+    /** Whether swiping right is currently valid (affects damping) */
+    canSwipeRight?: MaybeRefOrGetter<boolean>;
+    /** Whether swiping up is currently valid */
+    canSwipeUp?: MaybeRefOrGetter<boolean>;
+    /** Whether swiping down is currently valid */
+    canSwipeDown?: MaybeRefOrGetter<boolean>;
+    /** Disable swipe detection entirely */
+    disabled?: MaybeRefOrGetter<boolean>;
+    /** Restrict to a single axis. Gestures on the other axis pass through. */
+    axis?: 'x' | 'y';
+}
+/**
+ * Swipe gesture detection for both touch (mobile) and trackpad/wheel (desktop).
+ *
+ * Touch: locks axis after 10px, applies damped offset, fires on touchend.
+ * Wheel: accumulates deltaX/deltaY, fires after threshold, debounce resets.
+ *
+ * A child with `data-swipe-ignore` lets its own touch-scroll pass through.
+ *
+ * Ported 1:1 from cou-sh/app/composables/useSwipeGesture.ts.
+ */
+export declare function useSwipeGesture(options: SwipeGestureOptions): {
+    swipeOffset: Ref<{
+        x: number;
+        y: number;
+    }, {
+        x: number;
+        y: number;
+    } | {
+        x: number;
+        y: number;
+    }>;
+    isSwiping: Ref<boolean, boolean>;
+};

package/dist/runtime/composables/useSwipeGesture.js

@@ -0,0 +1,140 @@
+import { ref, toValue, watchEffect } from "vue";
+export function useSwipeGesture(options) {
+  const swipeOffset = ref({ x: 0, y: 0 });
+  const isSwiping = ref(false);
+  let touchStartX = 0;
+  let touchStartY = 0;
+  let touchLockedAxis = null;
+  let touchIgnored = false;
+  const LOCK_THRESHOLD = 10;
+  const SWIPE_TRIGGER = 24;
+  const DAMP_VALID = 0.4;
+  const DAMP_INVALID = 0.1;
+  function isInsideSwipeIgnore(target, boundary) {
+    let el = target;
+    while (el && el !== boundary) {
+      if (el instanceof HTMLElement && el.hasAttribute("data-swipe-ignore")) return true;
+      el = el.parentElement;
+    }
+    return false;
+  }
+  function onTouchStart(e) {
+    if (toValue(options.disabled)) {
+      touchIgnored = true;
+      return;
+    }
+    if (options.el.value && isInsideSwipeIgnore(e.target, options.el.value)) {
+      touchIgnored = true;
+      return;
+    }
+    touchIgnored = false;
+    const touch = e.touches[0];
+    touchStartX = touch.clientX;
+    touchStartY = touch.clientY;
+    touchLockedAxis = null;
+    isSwiping.value = false;
+    swipeOffset.value = { x: 0, y: 0 };
+  }
+  function onTouchMove(e) {
+    if (touchIgnored) return;
+    const touch = e.touches[0];
+    const dx = touch.clientX - touchStartX;
+    const dy = touch.clientY - touchStartY;
+    if (!touchLockedAxis) {
+      if (Math.abs(dx) < LOCK_THRESHOLD && Math.abs(dy) < LOCK_THRESHOLD) return;
+      const detected = Math.abs(dx) >= Math.abs(dy) ? "x" : "y";
+      if (options.axis && detected !== options.axis) return;
+      touchLockedAxis = detected;
+    }
+    isSwiping.value = true;
+    if (touchLockedAxis === "x") {
+      const canL = toValue(options.canSwipeLeft) ?? !!options.onSwipeLeft;
+      const canR = toValue(options.canSwipeRight) ?? !!options.onSwipeRight;
+      const valid = dx < 0 && canL || dx > 0 && canR;
+      swipeOffset.value = { x: dx * (valid ? DAMP_VALID : DAMP_INVALID), y: 0 };
+    } else {
+      const canU = toValue(options.canSwipeUp) ?? !!options.onSwipeUp;
+      const canD = toValue(options.canSwipeDown) ?? !!options.onSwipeDown;
+      const valid = dy < 0 && canU || dy > 0 && canD;
+      swipeOffset.value = { x: 0, y: dy * (valid ? DAMP_VALID : DAMP_INVALID) };
+    }
+    e.preventDefault();
+  }
+  function onTouchEnd() {
+    if (touchIgnored) return;
+    if (touchLockedAxis === "x" && Math.abs(swipeOffset.value.x) > SWIPE_TRIGGER) {
+      if (swipeOffset.value.x < 0) options.onSwipeLeft?.();
+      else options.onSwipeRight?.();
+    } else if (touchLockedAxis === "y" && Math.abs(swipeOffset.value.y) > SWIPE_TRIGGER) {
+      if (swipeOffset.value.y < 0) options.onSwipeUp?.();
+      else options.onSwipeDown?.();
+    }
+    swipeOffset.value = { x: 0, y: 0 };
+    isSwiping.value = false;
+    touchLockedAxis = null;
+  }
+  let wheelAccumX = 0;
+  let wheelAccumY = 0;
+  let wheelTimer = null;
+  let wheelCooldown = false;
+  const WHEEL_THRESHOLD = 60;
+  function resetWheel() {
+    wheelAccumX = 0;
+    wheelAccumY = 0;
+    wheelCooldown = false;
+    wheelTimer = null;
+  }
+  function onWheel(e) {
+    if (toValue(options.disabled)) return;
+    if (e.ctrlKey) return;
+    wheelAccumX += e.deltaX;
+    wheelAccumY += e.deltaY;
+    if (wheelTimer) clearTimeout(wheelTimer);
+    wheelTimer = setTimeout(resetWheel, 300);
+    if (wheelCooldown) return;
+    if (Math.abs(wheelAccumX) > WHEEL_THRESHOLD && options.axis !== "y" && Math.abs(wheelAccumX) >= Math.abs(wheelAccumY)) {
+      if (wheelAccumX > 0) {
+        const canL = toValue(options.canSwipeLeft) ?? !!options.onSwipeLeft;
+        if (canL) options.onSwipeLeft?.();
+      } else {
+        const canR = toValue(options.canSwipeRight) ?? !!options.onSwipeRight;
+        if (canR) options.onSwipeRight?.();
+      }
+      wheelCooldown = true;
+      wheelAccumX = 0;
+      wheelAccumY = 0;
+      return;
+    }
+    if (Math.abs(wheelAccumY) > WHEEL_THRESHOLD && options.axis !== "x" && Math.abs(wheelAccumY) >= Math.abs(wheelAccumX)) {
+      if (wheelAccumY > 0) {
+        const canU = toValue(options.canSwipeUp) ?? !!options.onSwipeUp;
+        if (canU) options.onSwipeUp?.();
+      } else {
+        const canD = toValue(options.canSwipeDown) ?? !!options.onSwipeDown;
+        if (canD) options.onSwipeDown?.();
+      }
+      wheelCooldown = true;
+      wheelAccumX = 0;
+      wheelAccumY = 0;
+    }
+  }
+  watchEffect((onCleanup) => {
+    const el = options.el.value;
+    if (!el) return;
+    el.addEventListener("touchstart", onTouchStart, { passive: true });
+    el.addEventListener("touchmove", onTouchMove, { passive: false });
+    el.addEventListener("touchend", onTouchEnd, { passive: true });
+    el.addEventListener("touchcancel", onTouchEnd, { passive: true });
+    el.addEventListener("wheel", onWheel, { passive: true });
+    onCleanup(() => {
+      el.removeEventListener("touchstart", onTouchStart);
+      el.removeEventListener("touchmove", onTouchMove);
+      el.removeEventListener("touchend", onTouchEnd);
+      el.removeEventListener("touchcancel", onTouchEnd);
+      el.removeEventListener("wheel", onWheel);
+      if (wheelTimer) clearTimeout(wheelTimer);
+      resetWheel();
+    });
+  }, { flush: "post" });
+  return { swipeOffset, isSwiping };
+}

package/dist/runtime/extensions/document-header.js

@@ -18,14 +18,18 @@ export const DocumentHeader = Node.create({
   },
   addKeyboardShortcuts() {
     return {
-      // Enter inside the header → move cursor to the first body block below
+      // Enter inside the header → skip past documentMeta to the first body block
       Enter: ({ editor }) => {
         const $head = editor.state.selection.$head;
         if ($head.parent.type.name !== "documentHeader") return false;
-        const headerNode = editor.state.doc.firstChild;
-        if (!headerNode) return false;
-        const insideNextBlock = headerNode.nodeSize + 1;
-        return editor.commands.setTextSelection(insideNextBlock);
+        let firstBodyPos = -1;
+        editor.state.doc.forEach((node, offset) => {
+          if (firstBodyPos === -1 && node.type.name !== "documentHeader" && node.type.name !== "documentMeta") {
+            firstBodyPos = offset + 1;
+          }
+        });
+        if (firstBodyPos > 0) return editor.commands.setTextSelection(firstBodyPos);
+        return false;
       },
       // Backspace at the very start of the header → swallow (don't delete the node)
       Backspace: ({ editor }) => {
@@ -47,10 +51,16 @@ export const DocumentHeader = Node.create({
             if (!(view.state.selection instanceof AllSelection)) return false;
             const { tr, schema } = view.state;
             const headerType = schema.nodes.documentHeader;
+            const metaType = schema.nodes.documentMeta;
             const paragraphType = schema.nodes.paragraph;
-            if (!headerType || !paragraphType) return false;
+            if (!headerType || !metaType || !paragraphType) return false;
+            let existingMeta = null;
+            tr.doc.forEach((node) => {
+              if (node.type.name === "documentMeta") existingMeta = node;
+            });
             const newContent = Fragment.from([
               headerType.create(null, text ? [schema.text(text)] : []),
+              existingMeta ?? metaType.create(),
               paragraphType.create()
             ]);
             tr.replaceWith(0, tr.doc.content.size, newContent);