@abraca/nuxt 0.2.0 → 0.3.0

package/dist/runtime/composables/useSpaces.js

@@ -0,0 +1,83 @@
+import { ref, computed } from "vue";
+const loading = ref(false);
+const error = ref(null);
+export function useSpaces() {
+  const abra = useAbracadabra();
+  const spaces = computed(() => abra.currentServerSpaces.value ?? []);
+  const spacesEnabled = computed(() => abra.currentServerSpacesEnabled.value ?? false);
+  const currentSpace = computed(() => {
+    const route = useRoute();
+    const docId = route.params.docId;
+    if (!docId) return spaces.value[0] ?? null;
+    return spaces.value.find((s) => s.doc_id === docId) ?? null;
+  });
+  async function refresh() {
+    loading.value = true;
+    error.value = null;
+    try {
+      await abra.refreshSpaces();
+    } catch (e) {
+      error.value = e.message ?? "Failed to refresh spaces";
+    } finally {
+      loading.value = false;
+    }
+  }
+  async function create(opts) {
+    error.value = null;
+    try {
+      return await abra.createSpace(opts);
+    } catch (e) {
+      error.value = e.message ?? "Failed to create space";
+      throw e;
+    }
+  }
+  async function update(id, opts) {
+    error.value = null;
+    try {
+      return await abra.updateSpace(id, opts);
+    } catch (e) {
+      error.value = e.message ?? "Failed to update space";
+      throw e;
+    }
+  }
+  async function remove(id) {
+    error.value = null;
+    try {
+      await abra.deleteSpace(id);
+    } catch (e) {
+      error.value = e.message ?? "Failed to delete space";
+      throw e;
+    }
+  }
+  async function switchTo(spaceDocId) {
+    error.value = null;
+    try {
+      await abra.switchSpace(abra.currentServerUrl.value, spaceDocId);
+    } catch (e) {
+      error.value = e.message ?? "Failed to switch space";
+      throw e;
+    }
+  }
+  return {
+    /** All spaces on the current server. */
+    spaces,
+    /** Whether the current server supports spaces. */
+    spacesEnabled,
+    /** The currently active space. */
+    currentSpace,
+    /** Whether space operations are in progress. */
+    loading,
+    /** Last error message. */
+    error,
+    /** Refresh spaces list from server. */
+    refresh,
+    /** Create a new space. */
+    create,
+    /** Update an existing space. */
+    update,
+    /** Delete a space. */
+    remove,
+    /** Switch to a different space. */
+    switchTo
+  };
+}

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

@@ -0,0 +1,34 @@
+/**
+ * Mobile-compatible drag & drop using pointer events.
+ * Works on both touch and mouse devices, replacing HTML5 DragEvent handlers.
+ *
+ * Usage:
+ * 1. Add `data-drag-id="itemId"` to every draggable element
+ * 2. Optionally add `data-drop-container="containerId"` for cross-container moves
+ * 3. Call `handlePointerDown(e, id)` on `@pointerdown` of draggable items
+ * 4. Read `dragId` / `dragOverId` / `dragOverContainer` for styling
+ * 5. Provide `onDrop` / `onMoveToContainer` callbacks for the actual data mutations
+ */
+export declare function useTouchDrag(opts: {
+    /** Called when an item is dropped on another item (reorder) */
+    onDrop?: (dragId: string, targetId: string) => void;
+    /** Called when an item is dropped on a container (cross-container move) */
+    onMoveToContainer?: (dragId: string, containerId: string, targetId: string | null) => void;
+    /** Called when drag starts */
+    onDragStart?: (id: string) => void;
+    /** Called when drag ends (always, even if no drop) */
+    onDragEnd?: () => void;
+    /** Long-press delay in ms before touch drag activates (default: 200) */
+    longPressMs?: number;
+    /** Data attribute name for item IDs (default: 'data-drag-id') */
+    idAttr?: string;
+    /** Data attribute name for containers (default: 'data-drop-container') */
+    containerAttr?: string;
+}): {
+    dragId: import("vue").Ref<string | null, string | null>;
+    dragOverId: import("vue").Ref<string | null, string | null>;
+    dragOverContainer: import("vue").Ref<string | null, string | null>;
+    isDragging: import("vue").Ref<boolean, boolean>;
+    handlePointerDown: (e: PointerEvent, id: string) => void;
+    cancel: () => void;
+};

package/dist/runtime/composables/useTouchDrag.js

@@ -0,0 +1,191 @@
+import { ref, onUnmounted } from "vue";
+export function useTouchDrag(opts) {
+  const idAttr = opts.idAttr ?? "data-drag-id";
+  const containerAttr = opts.containerAttr ?? "data-drop-container";
+  const longPressMs = opts.longPressMs ?? 200;
+  const dragId = ref(null);
+  const dragOverId = ref(null);
+  const dragOverContainer = ref(null);
+  const isDragging = ref(false);
+  let startX = 0;
+  let startY = 0;
+  let delayTimer = null;
+  let ghostEl = null;
+  let sourceEl = null;
+  let pendingId = null;
+  let ghostOffsetX = 0;
+  let ghostOffsetY = 0;
+  let isTouch = false;
+  function createGhost(el, clientX, clientY) {
+    const rect = el.getBoundingClientRect();
+    ghostOffsetX = clientX - rect.left;
+    ghostOffsetY = clientY - rect.top;
+    const ghost = el.cloneNode(true);
+    ghost.style.cssText = `
+      position: fixed;
+      left: ${rect.left}px;
+      top: ${rect.top}px;
+      width: ${rect.width}px;
+      height: auto;
+      opacity: 0.85;
+      pointer-events: none;
+      z-index: 9999;
+      transition: none;
+      transform: scale(1.03);
+      box-shadow: 0 8px 24px rgba(0,0,0,0.18);
+      border-radius: 8px;
+      overflow: hidden;
+    `;
+    ghost.querySelectorAll("button, input, textarea, [data-state]").forEach((c) => c.remove());
+    document.body.appendChild(ghost);
+    return ghost;
+  }
+  function findTarget(x, y) {
+    if (ghostEl) ghostEl.style.display = "none";
+    const el = document.elementFromPoint(x, y);
+    if (ghostEl) ghostEl.style.display = "";
+    if (!el) return { id: null, container: null };
+    const dragTarget = el.closest?.(`[${idAttr}]`);
+    const containerTarget = el.closest?.(`[${containerAttr}]`);
+    return {
+      id: dragTarget?.getAttribute(idAttr) ?? null,
+      container: containerTarget?.getAttribute(containerAttr) ?? null
+    };
+  }
+  function activateDrag(id, el, clientX, clientY) {
+    dragId.value = id;
+    isDragging.value = true;
+    ghostEl = createGhost(el, clientX, clientY);
+    el.style.opacity = "0.3";
+    sourceEl = el;
+    opts.onDragStart?.(id);
+    document.addEventListener("pointermove", onDocPointerMove, { passive: false });
+    document.addEventListener("pointerup", onDocPointerUp);
+    document.addEventListener("pointercancel", onDocPointerUp);
+    document.body.style.userSelect = "none";
+    document.body.style.webkitUserSelect = "none";
+  }
+  function handlePointerDown(e, id) {
+    if (e.button !== 0) return;
+    const target = e.target;
+    const interactiveAncestor = target.closest('input, textarea, button, a, [contenteditable], [role="button"]');
+    if (interactiveAncestor && interactiveAncestor !== e.currentTarget) return;
+    isTouch = e.pointerType === "touch";
+    pendingId = id;
+    startX = e.clientX;
+    startY = e.clientY;
+    sourceEl = e.currentTarget;
+    if (isTouch) {
+      delayTimer = setTimeout(() => {
+        if (!pendingId || !sourceEl) return;
+        activateDrag(pendingId, sourceEl, startX, startY);
+        if (navigator.vibrate) navigator.vibrate(30);
+      }, longPressMs);
+      document.addEventListener("pointermove", onEarlyMove, { passive: true });
+      document.addEventListener("pointerup", onEarlyUp);
+    } else {
+      document.addEventListener("pointermove", onMouseEarlyMove, { passive: false });
+      document.addEventListener("pointerup", onEarlyUp);
+    }
+  }
+  function onEarlyMove(e) {
+    if (isDragging.value) return;
+    const dx = Math.abs(e.clientX - startX);
+    const dy = Math.abs(e.clientY - startY);
+    if (dx > 8 || dy > 8) cancelPending();
+  }
+  function onMouseEarlyMove(e) {
+    if (isDragging.value) return;
+    const dx = Math.abs(e.clientX - startX);
+    const dy = Math.abs(e.clientY - startY);
+    if (dx > 4 || dy > 4) {
+      document.removeEventListener("pointermove", onMouseEarlyMove);
+      document.removeEventListener("pointerup", onEarlyUp);
+      if (pendingId && sourceEl) {
+        activateDrag(pendingId, sourceEl, e.clientX, e.clientY);
+      }
+    }
+  }
+  function onEarlyUp() {
+    cancelPending();
+  }
+  function cancelPending() {
+    if (delayTimer) {
+      clearTimeout(delayTimer);
+      delayTimer = null;
+    }
+    pendingId = null;
+    document.removeEventListener("pointermove", onEarlyMove);
+    document.removeEventListener("pointermove", onMouseEarlyMove);
+    document.removeEventListener("pointerup", onEarlyUp);
+  }
+  function onDocPointerMove(e) {
+    if (!isDragging.value || !ghostEl) return;
+    e.preventDefault();
+    ghostEl.style.left = `${e.clientX - ghostOffsetX}px`;
+    ghostEl.style.top = `${e.clientY - ghostOffsetY}px`;
+    const { id, container } = findTarget(e.clientX, e.clientY);
+    dragOverId.value = id && id !== dragId.value ? id : null;
+    dragOverContainer.value = container;
+    autoScroll(e.clientY);
+  }
+  function autoScroll(clientY) {
+    const threshold = 60;
+    const speed = 12;
+    if (clientY < threshold) {
+      window.scrollBy(0, -speed);
+    } else if (clientY > window.innerHeight - threshold) {
+      window.scrollBy(0, speed);
+    }
+  }
+  function onDocPointerUp() {
+    cancelPending();
+    document.removeEventListener("pointermove", onDocPointerMove);
+    document.removeEventListener("pointerup", onDocPointerUp);
+    document.removeEventListener("pointercancel", onDocPointerUp);
+    if (isDragging.value && dragId.value) {
+      const dId = dragId.value;
+      const overId = dragOverId.value;
+      const overContainer = dragOverContainer.value;
+      if (overId && overContainer && opts.onMoveToContainer) {
+        opts.onMoveToContainer(dId, overContainer, overId);
+      } else if (overId && opts.onDrop) {
+        opts.onDrop(dId, overId);
+      } else if (!overId && overContainer && opts.onMoveToContainer) {
+        opts.onMoveToContainer(dId, overContainer, null);
+      }
+    }
+    cleanup();
+    opts.onDragEnd?.();
+  }
+  function cleanup() {
+    if (ghostEl) {
+      ghostEl.remove();
+      ghostEl = null;
+    }
+    if (sourceEl) {
+      sourceEl.style.opacity = "";
+      sourceEl = null;
+    }
+    dragId.value = null;
+    dragOverId.value = null;
+    dragOverContainer.value = null;
+    isDragging.value = false;
+    pendingId = null;
+    if (delayTimer) {
+      clearTimeout(delayTimer);
+      delayTimer = null;
+    }
+    document.body.style.userSelect = "";
+    document.body.style.webkitUserSelect = "";
+  }
+  onUnmounted(cleanup);
+  return {
+    dragId,
+    dragOverId,
+    dragOverContainer,
+    isDragging,
+    handlePointerDown,
+    cancel: cleanup
+  };
+}

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

@@ -9,7 +9,7 @@
  *   const { trashedItems, moveToTrash, restoreFromTrash, emptyTrash } = useTrash()
  */
 import type { ShallowRef } from 'vue';
-import * as Y from 'yjs';
+import type * as Y from 'yjs';
 export interface TrashEntry {
     label: string;
     parentId: string | null;

package/dist/runtime/composables/useTrash.js

@@ -5,14 +5,16 @@ function loadTrashSettings() {
   try {
     const raw = localStorage.getItem(TRASH_SETTINGS_KEY);
     if (raw) return JSON.parse(raw);
-  } catch {
+  } catch (e) {
+    if (import.meta.dev) console.debug("[abracadabra] trash: failed to load settings from localStorage:", e);
   }
   return { autoPurgeDays: 30 };
 }
 function saveTrashSettings(settings) {
   try {
     localStorage.setItem(TRASH_SETTINGS_KEY, JSON.stringify(settings));
-  } catch {
+  } catch (e) {
+    if (import.meta.dev) console.debug("[abracadabra] trash: failed to save settings to localStorage:", e);
   }
 }
 export function useTrash(rootDoc) {
@@ -109,7 +111,8 @@ export function useTrash(rootDoc) {
       for (const db of dbs) {
         if (db.name?.includes(docId)) indexedDB.deleteDatabase(db.name);
       }
-    } catch {
+    } catch (e) {
+      if (import.meta.dev) console.debug("[abracadabra] trash: failed to cleanup IDB for doc:", e);
     }
   }
   return {

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

@@ -0,0 +1,50 @@
+/**
+ * useWebRTC
+ *
+ * Wraps AbracadabraWebRTC from @abraca/dabra for P2P Y.js sync, awareness,
+ * and file transfer over WebRTC data channels.
+ *
+ * Follows the same singleton pattern as useVoice — module-level state,
+ * _wireEvents for event→ref mapping, and user-driven connect/disconnect.
+ *
+ * Usage:
+ *   const { isConnected, peers, peerCount, connect, disconnect } = useWebRTC()
+ */
+export declare function _initWebRTC(rtc: any): void;
+export declare function _destroyWebRTC(): void;
+/**
+ * Connect to WebRTC P2P mesh.
+ * Uses the current provider from useAbracadabra() to create an AbracadabraWebRTC instance.
+ * When E2EE is enabled and the user has a claimed passkey, triggers WebAuthn prompt
+ * to derive X25519 private key.
+ */
+declare function connect(options?: {
+    e2ee?: boolean;
+}): Promise<void>;
+declare function disconnect(): void;
+declare function sendFile(peerId: string, file: File | Blob, filename: string): Promise<any>;
+export declare function useWebRTC(): {
+    /** Current WebRTC connection status. */
+    webrtcStatus: import("vue").Ref<"idle" | "disconnected" | "connecting" | "connected", "idle" | "disconnected" | "connecting" | "connected">;
+    /** Whether the WebRTC signaling connection is active. */
+    isConnected: import("vue").Ref<boolean, boolean>;
+    /** Map of connected peers (peerId → PeerState). */
+    peers: import("vue").ShallowRef<Map<string, any>, Map<string, any>>;
+    /** Local peer ID assigned by the signaling server. */
+    localPeerId: import("vue").Ref<string | null, string | null>;
+    /** Whether E2EE is enabled for this connection. */
+    e2eeEnabled: import("vue").Ref<boolean, boolean>;
+    /** Set of peer IDs with established E2EE channels. */
+    e2eeEstablishedPeers: import("vue").ShallowRef<Set<string>, Set<string>>;
+    /** Array of connected peers (computed from peers map). */
+    peerList: import("vue").ComputedRef<any[]>;
+    /** Number of connected peers (computed). */
+    peerCount: import("vue").ComputedRef<number>;
+    /** Connect to WebRTC P2P mesh using the current provider. */
+    connect: typeof connect;
+    /** Disconnect and clean up WebRTC resources. */
+    disconnect: typeof disconnect;
+    /** Send a file to a specific peer. */
+    sendFile: typeof sendFile;
+};
+export {};

package/dist/runtime/composables/useWebRTC.js

@@ -0,0 +1,177 @@
+import { ref, shallowRef, computed } from "vue";
+import { getSdkModule } from "../utils/sdkRef.js";
+import { _wireFileTransferEvents, _destroyFileTransfer } from "./useFileTransfer.js";
+const webrtcStatus = ref("idle");
+const isConnected = ref(false);
+const peers = shallowRef(/* @__PURE__ */ new Map());
+const localPeerId = ref(null);
+const e2eeEnabled = ref(false);
+const e2eeEstablishedPeers = shallowRef(/* @__PURE__ */ new Set());
+let _rtc = null;
+const _unbinds = [];
+const peerList = computed(() => [...peers.value.values()]);
+const peerCount = computed(() => peers.value.size);
+function _wireEvents(rtc) {
+  const on = (event, handler) => {
+    rtc.on(event, handler);
+    _unbinds.push(() => rtc.off(event, handler));
+  };
+  on("connected", () => {
+    isConnected.value = true;
+    webrtcStatus.value = "connected";
+    localPeerId.value = rtc.localPeerId;
+  });
+  on("disconnected", () => {
+    isConnected.value = false;
+    webrtcStatus.value = "disconnected";
+  });
+  on("peerJoined", (peer) => {
+    const next = new Map(peers.value);
+    next.set(peer.peerId, peer);
+    peers.value = next;
+  });
+  on("peerLeft", ({ peerId }) => {
+    const next = new Map(peers.value);
+    next.delete(peerId);
+    peers.value = next;
+    const nextE2ee = new Set(e2eeEstablishedPeers.value);
+    nextE2ee.delete(peerId);
+    e2eeEstablishedPeers.value = nextE2ee;
+  });
+  on("peerConnectionState", ({ peerId, state }) => {
+    const existing = peers.value.get(peerId);
+    if (existing) {
+      const next = new Map(peers.value);
+      next.set(peerId, { ...existing, connectionState: state });
+      peers.value = next;
+    }
+  });
+  on("e2eeEstablished", ({ peerId }) => {
+    const next = new Set(e2eeEstablishedPeers.value);
+    next.add(peerId);
+    e2eeEstablishedPeers.value = next;
+  });
+  on("e2eeFailed", ({ peerId, error }) => {
+    console.warn(`[abracadabra] E2EE failed for peer ${peerId}:`, error);
+    try {
+      const toast = useToast();
+      toast.add({
+        title: "E2EE handshake failed",
+        description: `Could not establish encrypted channel with peer`,
+        color: "warning",
+        icon: "i-lucide-shield-alert"
+      });
+    } catch {
+    }
+  });
+}
+function _cleanup() {
+  for (const unsub of _unbinds) unsub();
+  _unbinds.length = 0;
+  _destroyFileTransfer();
+  if (_rtc) {
+    _rtc.destroy();
+    _rtc = null;
+  }
+  webrtcStatus.value = "idle";
+  isConnected.value = false;
+  peers.value = /* @__PURE__ */ new Map();
+  localPeerId.value = null;
+  e2eeEnabled.value = false;
+  e2eeEstablishedPeers.value = /* @__PURE__ */ new Set();
+}
+export function _initWebRTC(rtc) {
+  _cleanup();
+  _rtc = rtc;
+  _wireEvents(rtc);
+  _wireFileTransferEvents(rtc);
+  webrtcStatus.value = "connecting";
+}
+export function _destroyWebRTC() {
+  _cleanup();
+}
+function fromBase64Url(str) {
+  const b = atob(str.replace(/-/g, "+").replace(/_/g, "/"));
+  const a = new Uint8Array(b.length);
+  for (let i = 0; i < b.length; i++) a[i] = b.charCodeAt(i);
+  return a;
+}
+async function connect(options) {
+  if (_rtc && isConnected.value) return;
+  const { provider, keystore, isClaimed } = useAbracadabra();
+  if (!provider.value) return;
+  const config = useRuntimeConfig();
+  const webrtcConfig = config.public.abracadabra?.webrtc ?? {};
+  const sdk = getSdkModule();
+  if (!sdk?.AbracadabraWebRTC) {
+    console.error("[abracadabra] SDK not loaded \u2014 cannot connect WebRTC");
+    return;
+  }
+  const { AbracadabraWebRTC } = sdk;
+  let e2eeIdentity;
+  const wantE2ee = options?.e2ee ?? webrtcConfig.e2ee ?? false;
+  if (wantE2ee && isClaimed.value && keystore.value) {
+    try {
+      const pubKeyB64 = await keystore.value.getPublicKey();
+      if (pubKeyB64) {
+        const publicKey = fromBase64Url(pubKeyB64);
+        const x25519PrivateKey = await keystore.value.getX25519PrivateKey();
+        e2eeIdentity = { publicKey, x25519PrivateKey };
+        e2eeEnabled.value = true;
+      }
+    } catch (e) {
+      console.warn("[abracadabra] E2EE identity derivation failed:", e.message);
+    }
+  }
+  let resolvedIceServers = webrtcConfig.iceServers;
+  if (!resolvedIceServers) {
+    try {
+      const { client } = useAbracadabra();
+      if (client.value?.getIceServers) {
+        resolvedIceServers = await client.value.getIceServers();
+      }
+    } catch (e) {
+      if (import.meta.dev) console.debug("[abracadabra] webrtc: failed to fetch ICE servers from server:", e);
+    }
+  }
+  const rtc = AbracadabraWebRTC.fromProvider(provider.value, {
+    iceServers: resolvedIceServers,
+    enableFileTransfer: webrtcConfig.fileTransfer ?? false,
+    e2ee: e2eeIdentity
+  });
+  _initWebRTC(rtc);
+  await rtc.connect();
+}
+function disconnect() {
+  _cleanup();
+}
+async function sendFile(peerId, file, filename) {
+  if (!_rtc) return null;
+  return _rtc.sendFile(peerId, file, filename);
+}
+export function useWebRTC() {
+  return {
+    /** Current WebRTC connection status. */
+    webrtcStatus,
+    /** Whether the WebRTC signaling connection is active. */
+    isConnected,
+    /** Map of connected peers (peerId → PeerState). */
+    peers,
+    /** Local peer ID assigned by the signaling server. */
+    localPeerId,
+    /** Whether E2EE is enabled for this connection. */
+    e2eeEnabled,
+    /** Set of peer IDs with established E2EE channels. */
+    e2eeEstablishedPeers,
+    /** Array of connected peers (computed from peers map). */
+    peerList,
+    /** Number of connected peers (computed). */
+    peerCount,
+    /** Connect to WebRTC P2P mesh using the current provider. */
+    connect,
+    /** Disconnect and clean up WebRTC resources. */
+    disconnect,
+    /** Send a file to a specific peer. */
+    sendFile
+  };
+}

package/dist/runtime/extensions/meta-field.d.ts

@@ -11,6 +11,9 @@ import { Node } from '@tiptap/core';
  * Values live in tree meta (Y.Map). The storage.metaField reactive object is
  * the bridge: AEditor writes to it via watchEffect, MetaFieldView reads it.
  */
-export declare const MetaField: Node<any, any>;
+export declare const MetaField: Node<any, {
+    pageMeta: Record<string, unknown> | null;
+    updateMeta: ((patch: Record<string, unknown>) => void) | null;
+}>;
 export declare function schemaFieldToAttrs(field: any): Record<string, unknown>;
 export declare function userFieldToAttrs(f: any): Record<string, unknown>;

package/dist/runtime/extensions/steps.js

@@ -15,7 +15,7 @@ export const Steps = Node.create({
       {
         tag: "div[data-steps]",
         getAttrs: (el) => ({
-          level: parseInt(el.getAttribute("data-level") || "1", 10)
+          level: Number.parseInt(el.getAttribute("data-level") || "1", 10)
         })
       }
     ];

package/dist/runtime/extensions/views/AccordionItemView.vue

@@ -19,14 +19,21 @@ const icon = computed(() => props.node.attrs.icon || "");
 </script>
 
 <template>
-  <NodeViewWrapper as="div" class="border-b border-(--ui-border) last:border-b-0">
+  <NodeViewWrapper
+    as="div"
+    class="border-b border-(--ui-border) last:border-b-0"
+  >
     <button
       contenteditable="false"
       class="group w-full flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 px-4 text-left text-(--ui-text-highlighted) focus-visible:outline-(--ui-primary) focus:outline-none min-w-0"
       :data-state="open ? 'open' : 'closed'"
       @click="open = !open"
     >
-      <UIcon v-if="icon" :name="icon" class="shrink-0 size-5" />
+      <UIcon
+        v-if="icon"
+        :name="icon"
+        class="shrink-0 size-5"
+      />
       <span class="text-start break-words flex-1">{{ label }}</span>
       <UIcon
         name="i-lucide-chevron-down"
@@ -34,7 +41,10 @@ const icon = computed(() => props.node.attrs.icon || "");
         :class="{ 'rotate-180': open }"
       />
     </button>
-    <div v-show="open" class="text-sm pb-3.5 px-4">
+    <div
+      v-show="open"
+      class="text-sm pb-3.5 px-4"
+    >
       <NodeViewContent class="text-(--ui-text-muted) [&>*:first-child]:mt-0 [&>*:last-child]:mb-0 [&>*]:my-1.5" />
     </div>
   </NodeViewWrapper>

package/dist/runtime/extensions/views/AccordionView.vue

@@ -16,7 +16,10 @@ defineProps({
 </script>
 
 <template>
-  <NodeViewWrapper as="div" class="my-5 w-full">
+  <NodeViewWrapper
+    as="div"
+    class="my-5 w-full"
+  >
     <NodeViewContent />
   </NodeViewWrapper>
 </template>

package/dist/runtime/extensions/views/BadgeView.vue

@@ -17,7 +17,16 @@ const label = computed(() => props.node.attrs.label || "Badge");
 </script>
 
 <template>
-  <NodeViewWrapper as="span" class="inline">
-    <UBadge color="primary" variant="subtle" class="rounded-full">{{ label }}</UBadge>
+  <NodeViewWrapper
+    as="span"
+    class="inline"
+  >
+    <UBadge
+      color="primary"
+      variant="subtle"
+      class="rounded-full"
+    >
+      {{ label }}
+    </UBadge>
   </NodeViewWrapper>
 </template>

package/dist/runtime/extensions/views/CalloutView.vue

@@ -28,7 +28,10 @@ const cfg = computed(() => CONFIG[props.node.attrs.type] ?? CONFIG["note"]);
 </script>
 
 <template>
-  <NodeViewWrapper as="div" class="my-3">
+  <NodeViewWrapper
+    as="div"
+    class="my-3"
+  >
     <UAlert
       :color="cfg.color"
       :icon="cfg.icon"