@abraca/nuxt 0.2.0 → 1.5.0

package/dist/runtime/composables/useChildTree.js

@@ -1,20 +1,28 @@
 import { computed } from "vue";
 import { useSyncedMap } from "./useYDoc.js";
-export function useChildTree(rootDoc, parentDocId) {
+import { isDescendantInMap } from "../utils/docDragDrop.js";
+export function useChildTree(rootDoc, parentDocId, options) {
   const treeMap = useSyncedMap(rootDoc, "doc-tree");
   const trashMap = useSyncedMap(rootDoc, "doc-trash");
-  const entries = computed(
-    () => Object.entries(treeMap.data).map(([id, v]) => ({
-      id,
-      label: v.label || "Untitled",
-      parentId: v.parentId ?? null,
-      order: v.order ?? 0,
-      type: v.type,
-      meta: v.meta,
-      createdAt: v.createdAt,
-      updatedAt: v.updatedAt
-    }))
-  );
+  const entries = computed(() => {
+    const result = [];
+    for (const [id, v] of Object.entries(treeMap.data)) {
+      if (id === parentDocId && options?.isSpaceRoot) continue;
+      let pid = v.parentId ?? null;
+      if (options?.isSpaceRoot && pid === null) pid = parentDocId;
+      result.push({
+        id,
+        label: v.label || "Untitled",
+        parentId: pid,
+        order: v.order ?? 0,
+        type: v.type,
+        meta: v.meta,
+        createdAt: v.createdAt,
+        updatedAt: v.updatedAt
+      });
+    }
+    return result;
+  });
   function childrenOf(parentId) {
     const target = parentId === null ? parentDocId : parentId;
     return entries.value.filter((e) => e.parentId === target).sort((a, b) => (a.order ?? 0) - (b.order ?? 0));
@@ -45,14 +53,16 @@ export function useChildTree(rootDoc, parentDocId) {
   }
   function moveEntry(id, newParentId, newOrder) {
     const entry = treeMap.get(id);
-    if (entry) {
-      treeMap.set(id, {
-        ...entry,
-        parentId: newParentId === null ? parentDocId : newParentId,
-        order: newOrder,
-        updatedAt: Date.now()
-      });
-    }
+    if (!entry) return;
+    const resolvedParent = newParentId === null ? parentDocId : newParentId;
+    if (resolvedParent === id) return;
+    if (isDescendantInMap(treeMap.data, id, resolvedParent)) return;
+    treeMap.set(id, {
+      ...entry,
+      parentId: resolvedParent,
+      order: newOrder,
+      updatedAt: Date.now()
+    });
   }
   function deleteEntry(id) {
     const doc = rootDoc.value;

package/dist/runtime/composables/useCommandPalette.js

@@ -1,10 +1,12 @@
 import { ref, watch } from "vue";
 import { useLocalStorage } from "@vueuse/core";
+import { useAbracadabra, usePluginRegistry, useDocSlugs, navigateTo } from "#imports";
 const isOpen = ref(false);
 const searchTerm = ref("");
 export function useCommandPalette() {
   const { doc, isReady, provider } = useAbracadabra();
   const registry = usePluginRegistry();
+  const { getDocUrl } = useDocSlugs();
   const recentDocIds = useLocalStorage("abra_recent_docs", []);
   function open(term = "") {
     searchTerm.value = term;
@@ -43,7 +45,7 @@ export function useCommandPalette() {
             suffix: entry.type,
             onClick: () => {
               trackRecentDoc(id);
-              navigateTo(`${useRuntimeConfig().public.abracadabra?.docBasePath ?? "/doc"}/${id}`);
+              navigateTo(getDocUrl(id));
               close();
             }
           });
@@ -52,30 +54,86 @@ export function useCommandPalette() {
         if (sorted.length > 0) {
           result.push({ id: "docs", label: q ? "Documents" : "Recent", items: sorted });
         }
-      } catch {
+      } catch (e) {
+        if (import.meta.dev) console.warn("[abracadabra] command palette: failed to scan document tree:", e);
       }
     }
-    try {
-      const ctx = { doc, provider, abracadabra: useAbracadabra(), searchTerm: searchTerm.value };
-      const pluginGroups = await registry.getAllCommandPaletteItems(ctx);
-      for (const group of pluginGroups) {
-        const filtered = (group.items ?? []).filter((item) => !q || item.label?.toLowerCase().includes(q)).map((item) => ({
-          id: item.id ?? `${group.id ?? "plugin"}:${item.label}`,
-          label: item.label,
-          icon: item.icon,
-          suffix: item.suffix,
-          shortcut: item.shortcut,
+    {
+      const actionItems = [
+        {
+          id: "action:new-doc",
+          label: "New Document",
+          icon: "i-lucide-file-plus",
+          shortcut: ["meta", "N"],
+          onClick: () => {
+            if (!doc.value || !isReady.value) return;
+            const id = crypto.randomUUID();
+            doc.value.getMap("doc-tree").set(id, { label: "Untitled", parentId: null, order: Date.now(), type: "doc" });
+            navigateTo(getDocUrl(id));
+            close();
+          }
+        },
+        {
+          id: "action:home",
+          label: "Go to Home",
+          icon: "i-lucide-home",
+          onClick: () => {
+            navigateTo("/app");
+            close();
+          }
+        },
+        {
+          id: "action:chat",
+          label: "Go to Chat",
+          icon: "i-lucide-message-circle",
+          onClick: () => {
+            navigateTo("/chat");
+            close();
+          }
+        },
+        {
+          id: "action:inbox",
+          label: "Go to Inbox",
+          icon: "i-lucide-inbox",
+          onClick: () => {
+            navigateTo("/inbox");
+            close();
+          }
+        },
+        {
+          id: "action:settings",
+          label: "Go to Settings",
+          icon: "i-lucide-settings",
           onClick: () => {
-            item.action?.();
+            navigateTo("/settings");
             close();
-          },
-          disabled: item.disabled
-        }));
-        if (filtered.length > 0) {
-          result.push({ id: group.id ?? "plugin", label: group.label, items: filtered });
+          }
         }
+      ].filter((item) => !q || item.label.toLowerCase().includes(q));
+      if (actionItems.length > 0) {
+        result.push({ id: "actions", label: "Actions", items: actionItems });
+      }
+    }
+    try {
+      const ctx = { doc, provider, abracadabra: useAbracadabra(), searchTerm: searchTerm.value };
+      const pluginItems = await registry.getAllCommandPaletteItems(ctx);
+      const filtered = pluginItems.filter((item) => !q || item.label?.toLowerCase().includes(q)).map((item) => ({
+        id: item.id ?? `plugin:${item.label}`,
+        label: item.label,
+        icon: item.icon,
+        suffix: item.suffix,
+        shortcut: item.shortcut,
+        onClick: () => {
+          item.handler?.(ctx);
+          close();
+        },
+        disabled: item.disabled
+      }));
+      if (filtered.length > 0) {
+        result.push({ id: "plugin", label: "Plugins", items: filtered });
       }
-    } catch {
+    } catch (e) {
+      if (import.meta.dev) console.warn("[abracadabra] command palette: failed to load plugin commands:", e);
     }
     groups.value = result;
   }

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

@@ -15,7 +15,7 @@ type ConnectionStatusValue = 'disconnected' | 'connecting' | 'connected' | 'offl
  */
 export declare function useConnectionStatus(status?: MaybeRef<ConnectionStatusValue | string | undefined>, synced?: MaybeRef<boolean | undefined>): {
     label: import("vue").ComputedRef<string>;
-    color: import("vue").ComputedRef<"success" | "warning" | "error">;
+    color: import("vue").ComputedRef<"error" | "success" | "warning">;
     icon: import("vue").ComputedRef<"i-lucide-cloud-check" | "i-lucide-cloud" | "i-lucide-cloud-off">;
 };
 export {};

package/dist/runtime/composables/useConnectionStatus.js

@@ -1,4 +1,5 @@
 import { computed, ref, toValue, watch } from "vue";
+import { tryOnScopeDispose } from "@vueuse/core";
 import { useAbraLocale } from "./useAbraLocale.js";
 import { useAbracadabra } from "./useAbracadabra.js";
 export function useConnectionStatus(status, synced) {
@@ -8,7 +9,7 @@ export function useConnectionStatus(status, synced) {
     if (status !== void 0) return toValue(status) ?? "disconnected";
     return abra.status?.value ?? "disconnected";
   });
-  const resolvedSynced = computed(() => {
+  const _resolvedSynced = computed(() => {
     if (synced !== void 0) return toValue(synced) ?? false;
     const isSynced = abra.synced?.value ?? false;
     if (isSynced) return true;
@@ -40,6 +41,12 @@ export function useConnectionStatus(status, synced) {
       stableStatus.value = next;
     }
   }, { immediate: true });
+  tryOnScopeDispose(() => {
+    if (offlineTimer) {
+      clearTimeout(offlineTimer);
+      offlineTimer = null;
+    }
+  });
   const label = computed(() => {
     const s = stableStatus.value;
     if (s === "connected") return locale.connected;

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

@@ -0,0 +1,11 @@
+/**
+ * Syncs a Y.Doc across multiple browser tabs that have the same
+ * document open. Uses BroadcastChannel so that document updates
+ * propagate instantly between same-origin windows without waiting
+ * for the server round-trip.
+ *
+ * Ported from cou-sh/app/composables/useCrossWindowSync.ts.
+ */
+import { type Ref } from 'vue';
+import * as Y from 'yjs';
+export declare function useCrossWindowSync(doc: Ref<Y.Doc | null>, docId: Ref<string>): void;

package/dist/runtime/composables/useCrossWindowSync.js

@@ -0,0 +1,38 @@
+import { watch, onUnmounted } from "vue";
+import * as Y from "yjs";
+const CHANNEL_PREFIX = "abra:doc-sync:";
+export function useCrossWindowSync(doc, docId) {
+  if (typeof window === "undefined") return;
+  let cleanup = null;
+  watch([doc, docId], ([currentDoc, currentDocId]) => {
+    cleanup?.();
+    cleanup = null;
+    if (!currentDoc || !currentDocId) return;
+    cleanup = setupBroadcastSync(currentDoc, currentDocId);
+  }, { immediate: true });
+  onUnmounted(() => {
+    cleanup?.();
+    cleanup = null;
+  });
+}
+function setupBroadcastSync(doc, docId) {
+  const channel = new BroadcastChannel(`${CHANNEL_PREFIX}${docId}`);
+  let applying = false;
+  const onUpdate = (update, origin) => {
+    if (origin === "cross-window" || applying) return;
+    channel.postMessage(update);
+  };
+  channel.onmessage = (event) => {
+    applying = true;
+    try {
+      Y.applyUpdate(doc, new Uint8Array(event.data), "cross-window");
+    } finally {
+      applying = false;
+    }
+  };
+  doc.on("update", onUpdate);
+  return () => {
+    doc.off("update", onUpdate);
+    channel.close();
+  };
+}

package/dist/runtime/composables/useDashboard.js

@@ -1,19 +1,27 @@
 import { ref, watch } from "vue";
 import { createSharedComposable } from "@vueuse/core";
+import { useRoute } from "#imports";
+import { useCommandPalette } from "./useCommandPalette.js";
 const _useDashboard = () => {
   const route = useRoute();
   const { toggle } = useCommandPalette();
   const isNotificationsOpen = ref(false);
-  defineShortcuts({
-    meta_f: () => {
-      toggle();
-    },
-    meta_n: () => {
-      toggle();
-    },
-    n: () => {
-      isNotificationsOpen.value = !isNotificationsOpen.value;
+  import("#imports").then((mod) => {
+    const ds = mod.defineShortcuts;
+    if (ds) {
+      ds({
+        meta_f: () => {
+          toggle();
+        },
+        meta_n: () => {
+          toggle();
+        },
+        n: () => {
+          isNotificationsOpen.value = !isNotificationsOpen.value;
+        }
+      });
     }
+  }).catch(() => {
   });
   watch(() => route.fullPath, () => {
     isNotificationsOpen.value = false;

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

@@ -0,0 +1,58 @@
+/**
+ * useDevicePairing
+ *
+ * Wraps ManualSignaling from @abraca/dabra for serverless device-to-device
+ * WebRTC pairing via blob exchange (QR code, copy-paste, NFC, etc.).
+ *
+ * Standalone composable — not auto-managed by the plugin. Users create and
+ * cancel pairings explicitly.
+ *
+ * Usage:
+ *   const { createOffer, acceptOffer, acceptAnswer, cancelPairing, offerBlob, pairingStatus } = useDevicePairing()
+ *
+ *   // Initiator flow:
+ *   const blob = await createOffer()   // show QR / copy
+ *   await acceptAnswer(answerBlob)      // complete connection
+ *
+ *   // Responder flow:
+ *   const answer = await acceptOffer(offerBlob)  // show QR / copy
+ */
+/**
+ * Initiator: create an offer blob to share with the other device.
+ * Returns the offer blob (also available as offerBlob ref).
+ */
+declare function createOffer(): Promise<any>;
+/**
+ * Responder: accept an offer blob from the initiator.
+ * Returns the answer blob to share back with the initiator.
+ */
+declare function acceptOffer(blob: any): Promise<any>;
+/**
+ * Initiator: accept the answer blob from the responder to complete the connection.
+ */
+declare function acceptAnswer(blob: any): Promise<void>;
+/**
+ * Cancel the current pairing attempt and clean up resources.
+ */
+declare function cancelPairing(): void;
+export declare function useDevicePairing(): {
+    /** Current role in the pairing flow. */
+    pairingRole: import("vue").Ref<"idle" | "initiator" | "responder", "idle" | "initiator" | "responder">;
+    /** Current status of the pairing attempt. */
+    pairingStatus: import("vue").Ref<"idle" | "connected" | "error" | "waiting-for-answer" | "waiting-for-offer", "idle" | "connected" | "error" | "waiting-for-answer" | "waiting-for-offer">;
+    /** The offer blob to display/share (initiator side). */
+    offerBlob: import("vue").ShallowRef<any, any>;
+    /** The answer blob to display/share (responder side). */
+    answerBlob: import("vue").ShallowRef<any, any>;
+    /** Error message if pairing failed. */
+    pairingError: import("vue").Ref<string | null, string | null>;
+    /** Initiator: create an offer blob. */
+    createOffer: typeof createOffer;
+    /** Responder: accept an offer blob and return the answer blob. */
+    acceptOffer: typeof acceptOffer;
+    /** Initiator: accept the answer blob to complete the connection. */
+    acceptAnswer: typeof acceptAnswer;
+    /** Cancel the current pairing attempt. */
+    cancelPairing: typeof cancelPairing;
+};
+export {};

package/dist/runtime/composables/useDevicePairing.js

@@ -0,0 +1,110 @@
+import { ref, shallowRef } from "vue";
+import { getSdkModule } from "../utils/sdkRef.js";
+import { useRuntimeConfig } from "#imports";
+import { useAbracadabra } from "./useAbracadabra.js";
+const pairingRole = ref("idle");
+const pairingStatus = ref("idle");
+const offerBlob = shallowRef(null);
+const answerBlob = shallowRef(null);
+const pairingError = ref(null);
+let _manualSignaling = null;
+async function _resolveIceServers() {
+  const config = useRuntimeConfig();
+  const webrtcConfig = config.public.abracadabra?.webrtc ?? {};
+  if (webrtcConfig.iceServers) return webrtcConfig.iceServers;
+  try {
+    const { client } = useAbracadabra();
+    if (client.value?.getIceServers) {
+      return await client.value.getIceServers();
+    }
+  } catch (e) {
+    if (import.meta.dev) console.debug("[abracadabra] pairing: failed to fetch ICE servers from server:", e);
+  }
+  return [{ urls: "stun:stun.l.google.com:19302" }];
+}
+async function createOffer() {
+  cancelPairing();
+  const sdk = getSdkModule();
+  if (!sdk?.ManualSignaling) throw new Error("SDK not loaded \u2014 cannot create pairing");
+  const { ManualSignaling } = sdk;
+  const iceServers = await _resolveIceServers();
+  _manualSignaling = new ManualSignaling(iceServers);
+  pairingRole.value = "initiator";
+  pairingStatus.value = "waiting-for-answer";
+  pairingError.value = null;
+  try {
+    const blob = await _manualSignaling.createOfferBlob();
+    offerBlob.value = blob;
+    return blob;
+  } catch (e) {
+    pairingError.value = e.message;
+    pairingStatus.value = "error";
+    throw e;
+  }
+}
+async function acceptOffer(blob) {
+  cancelPairing();
+  const sdk = getSdkModule();
+  if (!sdk?.ManualSignaling) throw new Error("SDK not loaded \u2014 cannot create pairing");
+  const { ManualSignaling } = sdk;
+  const iceServers = await _resolveIceServers();
+  _manualSignaling = new ManualSignaling(iceServers);
+  pairingRole.value = "responder";
+  pairingError.value = null;
+  try {
+    const answer = await _manualSignaling.acceptOffer(blob);
+    answerBlob.value = answer;
+    pairingStatus.value = "connected";
+    return answer;
+  } catch (e) {
+    pairingError.value = e.message;
+    pairingStatus.value = "error";
+    throw e;
+  }
+}
+async function acceptAnswer(blob) {
+  if (!_manualSignaling) {
+    throw new Error("No active pairing \u2014 call createOffer() first");
+  }
+  try {
+    await _manualSignaling.acceptAnswer(blob);
+    pairingStatus.value = "connected";
+  } catch (e) {
+    pairingError.value = e.message;
+    pairingStatus.value = "error";
+    throw e;
+  }
+}
+function cancelPairing() {
+  if (_manualSignaling) {
+    _manualSignaling.destroy?.();
+    _manualSignaling = null;
+  }
+  pairingRole.value = "idle";
+  pairingStatus.value = "idle";
+  offerBlob.value = null;
+  answerBlob.value = null;
+  pairingError.value = null;
+}
+export function useDevicePairing() {
+  return {
+    /** Current role in the pairing flow. */
+    pairingRole,
+    /** Current status of the pairing attempt. */
+    pairingStatus,
+    /** The offer blob to display/share (initiator side). */
+    offerBlob,
+    /** The answer blob to display/share (responder side). */
+    answerBlob,
+    /** Error message if pairing failed. */
+    pairingError,
+    /** Initiator: create an offer blob. */
+    createOffer,
+    /** Responder: accept an offer blob and return the answer blob. */
+    acceptOffer,
+    /** Initiator: accept the answer blob to complete the connection. */
+    acceptAnswer,
+    /** Cancel the current pairing attempt. */
+    cancelPairing
+  };
+}

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

@@ -0,0 +1,28 @@
+export interface DocDragState {
+    /** The doc IDs being dragged (supports multi-select) */
+    docIds: string[];
+    /** Labels for ghost rendering */
+    labels: string[];
+    /** Lucide icon class names for ghost rendering (parallel to labels) */
+    icons?: string[];
+    /** Which system originated this drag */
+    source: 'tree' | 'subpagelist' | 'renderer';
+    /** The docId of the renderer/parent that started the drag */
+    sourceDocId?: string;
+    /** Current pointer position for ghost rendering and hit-testing */
+    pointer: {
+        x: number;
+        y: number;
+    };
+}
+declare function startDrag(state: DocDragState): void;
+declare function updatePointer(x: number, y: number): void;
+declare function endDrag(): void;
+export declare function useDocDragBus(): {
+    dragState: import("vue").ShallowRef<DocDragState | null, DocDragState | null>;
+    isDragging: import("vue").ComputedRef<boolean>;
+    startDrag: typeof startDrag;
+    updatePointer: typeof updatePointer;
+    endDrag: typeof endDrag;
+};
+export {};

package/dist/runtime/composables/useDocDragBus.js

@@ -0,0 +1,22 @@
+import { shallowRef, computed } from "vue";
+const dragState = shallowRef(null);
+const isDragging = computed(() => dragState.value !== null);
+function startDrag(state) {
+  dragState.value = state;
+}
+function updatePointer(x, y) {
+  if (!dragState.value) return;
+  dragState.value = { ...dragState.value, pointer: { x, y } };
+}
+function endDrag() {
+  dragState.value = null;
+}
+export function useDocDragBus() {
+  return {
+    dragState,
+    isDragging,
+    startDrag,
+    updatePointer,
+    endDrag
+  };
+}

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

@@ -0,0 +1,51 @@
+import type { Ref } from 'vue';
+import type { TreeEntry } from './useChildTree.js';
+export interface DropZone {
+    /** The doc ID that will become the new parent */
+    parentDocId: string;
+    /** Target item ID for ordering relative to (null = append) */
+    targetItemId?: string | null;
+    /** Position relative to target */
+    position?: 'before' | 'inside' | 'after';
+    /** Computed fractional order for the drop */
+    order: number;
+    /** Renderer-specific metadata to apply after reparenting */
+    dropMeta?: Record<string, unknown>;
+}
+export declare function useDocDropZone(opts: {
+    parentDocId: string | Ref<string>;
+    tree: {
+        moveEntry: (id: string, newParentId: string | null, newOrder: number) => void;
+        updateMeta: (id: string, patch: Record<string, unknown>) => void;
+        childrenOf: (parentId: string | null) => TreeEntry[];
+    };
+    resolveDropPosition?: (pointer: {
+        x: number;
+        y: number;
+    }, el: HTMLElement) => DropZone | null;
+    onDocDropped?: (docIds: string[], zone: DropZone) => void;
+}): {
+    containerRef: Ref<HTMLElement | null, HTMLElement | null>;
+    isDropTarget: import("vue").ComputedRef<boolean>;
+    dropIndicator: Ref<{
+        parentDocId: string;
+        targetItemId?: string | null
+        /** Position relative to target */
+         | undefined;
+        position?: "before" | "inside" | "after"
+        /** Computed fractional order for the drop */
+         | undefined;
+        order: number;
+        dropMeta?: Record<string, unknown> | undefined;
+    } | null, DropZone | {
+        parentDocId: string;
+        targetItemId?: string | null
+        /** Position relative to target */
+         | undefined;
+        position?: "before" | "inside" | "after"
+        /** Computed fractional order for the drop */
+         | undefined;
+        order: number;
+        dropMeta?: Record<string, unknown> | undefined;
+    } | null>;
+};

package/dist/runtime/composables/useDocDropZone.js

@@ -0,0 +1,84 @@
+import { ref, computed, watch, onUnmounted } from "vue";
+import { useDocDragBus } from "./useDocDragBus.js";
+export function useDocDropZone(opts) {
+  const containerRef = ref(null);
+  const bus = useDocDragBus();
+  const dropIndicator = ref(null);
+  const isDropTarget = computed(() => bus.isDragging.value);
+  const parentDocId = computed(
+    () => typeof opts.parentDocId === "string" ? opts.parentDocId : opts.parentDocId.value
+  );
+  let rafId = null;
+  function onPointerMoveOverZone() {
+    if (!bus.dragState.value || !containerRef.value) {
+      dropIndicator.value = null;
+      return;
+    }
+    const { pointer } = bus.dragState.value;
+    const rect = containerRef.value.getBoundingClientRect();
+    if (pointer.x < rect.left || pointer.x > rect.right || pointer.y < rect.top || pointer.y > rect.bottom) {
+      dropIndicator.value = null;
+      return;
+    }
+    if (opts.resolveDropPosition) {
+      dropIndicator.value = opts.resolveDropPosition(pointer, containerRef.value);
+    } else {
+      dropIndicator.value = {
+        parentDocId: parentDocId.value,
+        order: Date.now()
+      };
+    }
+  }
+  const stopWatch = watch(
+    () => bus.dragState.value?.pointer,
+    () => {
+      if (rafId !== null) cancelAnimationFrame(rafId);
+      rafId = requestAnimationFrame(onPointerMoveOverZone);
+    },
+    { flush: "sync" }
+  );
+  function onPointerUp() {
+    if (!bus.dragState.value || !dropIndicator.value) return;
+    const { docIds } = bus.dragState.value;
+    const zone = dropIndicator.value;
+    for (let i = 0; i < docIds.length; i++) {
+      const docId = docIds[i];
+      opts.tree.moveEntry(docId, zone.parentDocId, zone.order + i);
+      if (zone.dropMeta) {
+        opts.tree.updateMeta(docId, zone.dropMeta);
+      }
+    }
+    opts.onDocDropped?.(docIds, zone);
+    dropIndicator.value = null;
+    bus.endDrag();
+  }
+  function onDocumentPointerUp(e) {
+    if (!bus.isDragging.value || !containerRef.value) return;
+    const rect = containerRef.value.getBoundingClientRect();
+    if (e.clientX >= rect.left && e.clientX <= rect.right && e.clientY >= rect.top && e.clientY <= rect.bottom) {
+      onPointerUp();
+    }
+  }
+  const stopDragWatch = watch(
+    () => bus.isDragging.value,
+    (dragging) => {
+      if (dragging) {
+        document.addEventListener("pointerup", onDocumentPointerUp);
+      } else {
+        document.removeEventListener("pointerup", onDocumentPointerUp);
+        dropIndicator.value = null;
+      }
+    }
+  );
+  onUnmounted(() => {
+    stopWatch();
+    stopDragWatch();
+    if (rafId !== null) cancelAnimationFrame(rafId);
+    document.removeEventListener("pointerup", onDocumentPointerUp);
+  });
+  return {
+    containerRef,
+    isDropTarget,
+    dropIndicator
+  };
+}