@abraca/nuxt 0.3.0 → 1.6.0

package/dist/runtime/composables/useNodePanelFollow.js

@@ -0,0 +1,37 @@
+import { watch, nextTick, onBeforeUnmount } from "vue";
+export function useNodePanelFollow(openNodeId, openNodeLabel, openNode, closePanel, followingUser, states, setLocalState) {
+  let syncingFromFollow = false;
+  let lastAppliedT = 0;
+  watch(openNodeId, (nodeId) => {
+    if (syncingFromFollow || followingUser()) return;
+    setLocalState({
+      nodePanel: {
+        nodeId: nodeId ?? null,
+        label: nodeId ? openNodeLabel.value : null,
+        t: Date.now()
+      }
+    });
+  });
+  watch([followingUser, states], () => {
+    const key = followingUser();
+    if (!key) return;
+    const state = states.value.find((s) => s.user?.publicKey === key);
+    const panel = state?.nodePanel;
+    if (!panel || panel.t <= lastAppliedT) return;
+    lastAppliedT = panel.t;
+    syncingFromFollow = true;
+    if (panel.nodeId) {
+      openNode(panel.nodeId, panel.label ?? "");
+    } else {
+      closePanel();
+    }
+    nextTick(() => {
+      syncingFromFollow = false;
+    });
+  });
+  onBeforeUnmount(() => {
+    if (!syncingFromFollow) {
+      setLocalState({ nodePanel: { nodeId: null, label: null, t: Date.now() } });
+    }
+  });
+}

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

@@ -74,6 +74,7 @@ export declare function useNotifications(): {
         read: boolean;
         createdAt: number;
     }[]>;
+    lastError: import("vue").Ref<string | null, string | null>;
     fetchNotifications: typeof fetchNotifications;
     markRead: typeof markRead;
     markAllRead: typeof markAllRead;

package/dist/runtime/composables/useNotifications.js

@@ -1,5 +1,7 @@
 import { ref, computed } from "vue";
+import { useAbracadabra } from "./useAbracadabra.js";
 const notifications = ref([]);
+const lastError = ref(null);
 let _publicKeyB64 = ref("");
 let pendingToasts = [];
 let toastFlushTimer = null;
@@ -40,6 +42,7 @@ export function _handleStatelessNotification(payload) {
   try {
     const data = JSON.parse(payload);
     if (!data.type?.startsWith("notify:")) return;
+    lastError.value = null;
     switch (data.type) {
       case "notify:history": {
         const incoming = (data.notifications || []).map(parseNotification);
@@ -72,7 +75,8 @@ export function _handleStatelessNotification(payload) {
       }
     }
   } catch (e) {
-    if (import.meta.dev) console.warn("[abracadabra] notifications: failed to handle stateless message:", e);
+    lastError.value = e instanceof Error ? e.message : String(e);
+    console.error("[abracadabra] notifications: failed to handle stateless message:", e);
   }
 }
 function _scheduleToast(notif) {
@@ -119,7 +123,7 @@ function _flushToasts() {
       });
     }
   }).catch((e) => {
-    if (import.meta.dev) console.debug("[abracadabra] notifications: toast display failed:", e);
+    console.error("[abracadabra] notifications: toast display failed:", e);
   });
 }
 function fetchNotifications(opts) {
@@ -165,6 +169,7 @@ export function useNotifications() {
     notifications,
     unreadCount,
     unreadNotifications,
+    lastError,
     fetchNotifications,
     markRead,
     markAllRead,

package/dist/runtime/composables/usePluginRegistry.js

@@ -1,3 +1,4 @@
+import { useNuxtApp } from "#imports";
 export function usePluginRegistry() {
   return useNuxtApp().$abracadabra.registry;
 }

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

@@ -21,7 +21,7 @@ export interface RendererBaseProps {
 export declare function useRendererBase(props: RendererBaseProps): {
     childProviderRef: ShallowRef<any, any>;
     childDoc: ShallowRef<Y.Doc | null, Y.Doc | null>;
-    rootDoc: any;
+    rootDoc: ShallowRef<Y.Doc>;
     cursors: import("vue").Ref<{
         clientId: number;
         x: number;
@@ -183,4 +183,19 @@ export declare function useRendererBase(props: RendererBaseProps): {
         avatar: string | undefined;
         publicKey: any;
     }[]>;
+    containerRef: import("vue").Ref<HTMLElement | null, HTMLElement | null>;
+    isDropTarget: import("vue").ComputedRef<boolean>;
+    dropIndicator: import("vue").Ref<{
+        parentDocId: string;
+        targetItemId?: string | null | undefined;
+        position?: "before" | "inside" | "after" | undefined;
+        order: number;
+        dropMeta?: Record<string, unknown> | undefined;
+    } | null, import("./useDocDropZone.js").DropZone | {
+        parentDocId: string;
+        targetItemId?: string | null | undefined;
+        position?: "before" | "inside" | "after" | undefined;
+        order: number;
+        dropMeta?: Record<string, unknown> | undefined;
+    } | null>;
 };

package/dist/runtime/composables/useRendererBase.js

@@ -1,6 +1,8 @@
 import { shallowRef, computed, watch, watchEffect } from "vue";
 import { useSmoothedCursors } from "./useYDoc.js";
 import { useChildTree } from "./useChildTree.js";
+import { useDocDropZone } from "./useDocDropZone.js";
+import { useAbracadabra } from "./useAbracadabra.js";
 export function useRendererBase(props) {
   const { doc: rootDoc, userName, userColor, publicKeyB64 } = useAbracadabra();
   const childProviderRef = shallowRef(null);
@@ -24,6 +26,10 @@ export function useRendererBase(props) {
     }
   });
   const tree = useChildTree(rootDoc, props.docId);
+  const { containerRef, isDropTarget, dropIndicator } = useDocDropZone({
+    parentDocId: props.docId,
+    tree
+  });
   const connectedUsers = computed(
     () => states.value.map((s) => ({
       clientId: s.clientId,
@@ -41,6 +47,9 @@ export function useRendererBase(props) {
     states,
     setLocalState,
     tree,
-    connectedUsers
+    connectedUsers,
+    containerRef,
+    isDropTarget,
+    dropIndicator
   };
 }

package/dist/runtime/composables/useSearchIndex.js

@@ -1,5 +1,7 @@
 import { ref, computed, watch } from "vue";
 import * as Y from "yjs";
+import { useAbracadabra } from "./useAbracadabra.js";
+import { useBackgroundSync } from "./useBackgroundSync.js";
 let _searchIndex = null;
 const _indexedVersions = /* @__PURE__ */ new Map();
 const _isReady = ref(false);

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

@@ -0,0 +1,18 @@
+/**
+ * useSettingsModal
+ *
+ * Global state for the settings modal — controls which tab is active
+ * and whether the modal is open. Used by the ASettingsModal component
+ * and any code that needs to open settings programmatically (sidebar,
+ * command palette, keyboard shortcuts, etc.).
+ *
+ * Usage:
+ *   const { isOpen, activeTab, openSettings, closeSettings } = useSettingsModal()
+ */
+export type SettingsTab = 'profile' | 'connection' | 'spaces' | 'security' | 'invites' | 'members' | 'trash' | 'offline' | 'plugins' | 'admin';
+export declare function useSettingsModal(): {
+    isOpen: import("vue").WritableComputedRef<boolean, boolean>;
+    activeTab: import("vue").WritableComputedRef<SettingsTab, SettingsTab>;
+    openSettings: (tab?: SettingsTab) => void;
+    closeSettings: () => void;
+};

package/dist/runtime/composables/useSettingsModal.js

@@ -0,0 +1,30 @@
+import { ref, computed } from "vue";
+const _isOpen = ref(false);
+const _activeTab = ref("profile");
+export function useSettingsModal() {
+  const isOpen = computed({
+    get: () => _isOpen.value,
+    set: (v) => {
+      _isOpen.value = v;
+    }
+  });
+  const activeTab = computed({
+    get: () => _activeTab.value,
+    set: (v) => {
+      _activeTab.value = v;
+    }
+  });
+  function openSettings(tab) {
+    if (tab) _activeTab.value = tab;
+    _isOpen.value = true;
+  }
+  function closeSettings() {
+    _isOpen.value = false;
+  }
+  return {
+    isOpen,
+    activeTab,
+    openSettings,
+    closeSettings
+  };
+}

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

@@ -0,0 +1,39 @@
+/**
+ * Slideover registry + swipe-to-close composable.
+ *
+ * `useSlideoverRegistry()` is a shared singleton that tracks all open
+ * slideovers. `useSlideoverSwipe()` auto-registers a slideover component
+ * with the registry when it opens, and unregisters when it closes.
+ *
+ * Ported from cou-sh/app/composables/useSlideoverSwipe.ts.
+ */
+import { type Ref } from 'vue';
+interface SlideoverEntry {
+    id: string;
+    side: 'left' | 'right';
+    close: () => void;
+    priority: number;
+}
+export declare const useSlideoverRegistry: () => {
+    stack: Ref<{
+        id: string;
+        side: "left" | "right";
+        close: () => void;
+        priority: number;
+    }[], SlideoverEntry[] | {
+        id: string;
+        side: "left" | "right";
+        close: () => void;
+        priority: number;
+    }[]>;
+    register: (entry: SlideoverEntry) => void;
+    unregister: (id: string) => void;
+    closeTop: (side?: "left" | "right") => boolean;
+    hasOpen: (side?: "left" | "right") => boolean;
+};
+/**
+ * Auto-register a slideover with the swipe registry.
+ * Call this inside any component that uses USlideover.
+ */
+export declare function useSlideoverSwipe(id: string | (() => string), open: Ref<boolean>, side?: 'left' | 'right'): void;
+export {};

package/dist/runtime/composables/useSlideoverSwipe.js

@@ -0,0 +1,48 @@
+import { ref, watch, onBeforeUnmount } from "vue";
+import { createSharedComposable } from "@vueuse/core";
+const _useSlideoverRegistry = () => {
+  const stack = ref([]);
+  function register(entry) {
+    const idx = stack.value.findIndex((e) => e.id === entry.id);
+    if (idx >= 0) stack.value.splice(idx, 1);
+    stack.value.push(entry);
+  }
+  function unregister(id) {
+    const idx = stack.value.findIndex((e) => e.id === id);
+    if (idx >= 0) stack.value.splice(idx, 1);
+  }
+  function closeTop(side) {
+    const filtered = side ? stack.value.filter((e) => e.side === side) : stack.value;
+    if (filtered.length === 0) return false;
+    const top = filtered.reduce((a, b) => a.priority > b.priority ? a : b);
+    top.close();
+    unregister(top.id);
+    return true;
+  }
+  function hasOpen(side) {
+    if (!side) return stack.value.length > 0;
+    return stack.value.some((e) => e.side === side);
+  }
+  return { stack, register, unregister, closeTop, hasOpen };
+};
+export const useSlideoverRegistry = createSharedComposable(_useSlideoverRegistry);
+export function useSlideoverSwipe(id, open, side = "right") {
+  if (typeof window === "undefined") return;
+  const registry = useSlideoverRegistry();
+  const resolveId = typeof id === "function" ? id : () => id;
+  watch(open, (isOpen) => {
+    if (isOpen) {
+      registry.register({
+        id: resolveId(),
+        side,
+        close: () => {
+          open.value = false;
+        },
+        priority: Date.now()
+      });
+    } else {
+      registry.unregister(resolveId());
+    }
+  }, { immediate: true });
+  onBeforeUnmount(() => registry.unregister(resolveId()));
+}

package/dist/runtime/composables/useSlugRoute.js

@@ -1,5 +1,7 @@
 import { computed } from "vue";
 import { isUUID } from "../utils/slugify.js";
+import { useRoute } from "#imports";
+import { useDocSlugs } from "./useDocSlugs.js";
 export function useSlugRoute() {
   const route = useRoute();
   const { getDocId, slugMap } = useDocSlugs();

package/dist/runtime/composables/useSpaces.js

@@ -1,4 +1,6 @@
 import { ref, computed } from "vue";
+import { useRoute } from "#imports";
+import { useAbracadabra } from "./useAbracadabra.js";
 const loading = ref(false);
 const error = ref(null);
 export function useSpaces() {

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

@@ -0,0 +1,16 @@
+export declare function useSpatialCamera(setLocalState: (state: Record<string, unknown>) => void, isFollowing?: () => boolean): {
+    cameraRef: import("vue").Ref<any, any>;
+    cameraPosition: import("vue").ComputedRef<[number, number, number]>;
+    cameraTarget: import("vue").ComputedRef<[number, number, number]>;
+    controlMode: import("vue").Ref<"orbit" | "fly", "orbit" | "fly">;
+    azimuth: import("vue").Ref<number, number>;
+    elevation: import("vue").Ref<number, number>;
+    distance: import("vue").Ref<number, number>;
+    focusOn: (worldPos: [number, number, number]) => void;
+    broadcastCamera: () => void;
+    applyCameraState: (position: [number, number, number], target: [number, number, number]) => void;
+    onCanvasPointerDown: (ev: PointerEvent) => void;
+    onCanvasPointerMove: (ev: PointerEvent) => void;
+    onCanvasPointerUp: () => void;
+    onCanvasWheel: (ev: WheelEvent) => void;
+};

package/dist/runtime/composables/useSpatialCamera.js

@@ -0,0 +1,175 @@
+import { ref, computed, onMounted, onBeforeUnmount } from "vue";
+export function useSpatialCamera(setLocalState, isFollowing = () => false) {
+  const azimuth = ref(Math.PI / 4);
+  const elevation = ref(Math.PI / 6);
+  const distance = ref(12);
+  const targetX = ref(0);
+  const targetY = ref(0);
+  const targetZ = ref(0);
+  const controlMode = ref("orbit");
+  const isDragging = ref(false);
+  const dragButton = ref(0);
+  let lastPX = 0;
+  let lastPY = 0;
+  let focusAnim = null;
+  const keysDown = /* @__PURE__ */ new Set();
+  const cameraPosition = computed(() => {
+    const el = Math.max(0.05, Math.min(Math.PI / 2 - 0.05, elevation.value));
+    const x = targetX.value + distance.value * Math.cos(el) * Math.sin(azimuth.value);
+    const y = targetY.value + distance.value * Math.sin(el);
+    const z = targetZ.value + distance.value * Math.cos(el) * Math.cos(azimuth.value);
+    return [x, y, z];
+  });
+  const cameraTarget = computed(() => [
+    targetX.value,
+    targetY.value,
+    targetZ.value
+  ]);
+  const cameraRef = ref(null);
+  function onCanvasPointerDown(ev) {
+    isDragging.value = true;
+    dragButton.value = ev.button;
+    lastPX = ev.clientX;
+    lastPY = ev.clientY;
+  }
+  function onCanvasPointerMove(ev) {
+    if (!isDragging.value) return;
+    const dx = ev.clientX - lastPX;
+    const dy = ev.clientY - lastPY;
+    lastPX = ev.clientX;
+    lastPY = ev.clientY;
+    if (dragButton.value === 0 && !ev.shiftKey) {
+      azimuth.value -= dx * 5e-3;
+      elevation.value += dy * 5e-3;
+      elevation.value = Math.max(0.05, Math.min(Math.PI / 2 - 0.05, elevation.value));
+    } else {
+      const panSpeed = 5e-3 * distance.value;
+      const sinA = Math.sin(azimuth.value);
+      const cosA = Math.cos(azimuth.value);
+      targetX.value += -cosA * dx * panSpeed;
+      targetZ.value += sinA * dx * panSpeed;
+      targetY.value += dy * panSpeed;
+    }
+    broadcastCamera();
+  }
+  function onCanvasPointerUp() {
+    isDragging.value = false;
+    broadcastCamera();
+  }
+  function onCanvasWheel(ev) {
+    ev.preventDefault();
+    distance.value *= 1 + ev.deltaY * 1e-3;
+    distance.value = Math.max(1, Math.min(200, distance.value));
+    broadcastCamera();
+  }
+  function focusOn(worldPos) {
+    focusAnim = {
+      start: performance.now(),
+      fromX: targetX.value,
+      fromY: targetY.value,
+      fromZ: targetZ.value,
+      toX: worldPos[0],
+      toY: worldPos[1],
+      toZ: worldPos[2]
+    };
+  }
+  function onKeyDown(ev) {
+    if (controlMode.value !== "fly") return;
+    keysDown.add(ev.key.toLowerCase());
+  }
+  function onKeyUp(ev) {
+    keysDown.delete(ev.key.toLowerCase());
+  }
+  let rafId = 0;
+  function tick() {
+    rafId = requestAnimationFrame(tick);
+    if (focusAnim) {
+      const t = Math.min(1, (performance.now() - focusAnim.start) / 500);
+      const ease = t * (2 - t);
+      targetX.value = focusAnim.fromX + (focusAnim.toX - focusAnim.fromX) * ease;
+      targetY.value = focusAnim.fromY + (focusAnim.toY - focusAnim.fromY) * ease;
+      targetZ.value = focusAnim.fromZ + (focusAnim.toZ - focusAnim.fromZ) * ease;
+      if (t >= 1) focusAnim = null;
+      broadcastCamera();
+    }
+    if (controlMode.value === "fly") {
+      const speed = 0.15;
+      const sinA = Math.sin(azimuth.value);
+      const cosA = Math.cos(azimuth.value);
+      if (keysDown.has("w")) {
+        targetX.value -= sinA * speed;
+        targetZ.value -= cosA * speed;
+      }
+      if (keysDown.has("s")) {
+        targetX.value += sinA * speed;
+        targetZ.value += cosA * speed;
+      }
+      if (keysDown.has("a")) {
+        targetX.value -= cosA * speed;
+        targetZ.value += sinA * speed;
+      }
+      if (keysDown.has("d")) {
+        targetX.value += cosA * speed;
+        targetZ.value -= sinA * speed;
+      }
+      if (keysDown.has(" ")) targetY.value += speed;
+      if (keysDown.has("shift")) targetY.value -= speed;
+      if (keysDown.size > 0) broadcastCamera();
+    }
+  }
+  let lastBroadcast = 0;
+  function broadcastCamera() {
+    if (isFollowing()) return;
+    const now = Date.now();
+    if (now - lastBroadcast < 80) return;
+    lastBroadcast = now;
+    setLocalState({
+      spatial: {
+        camera: {
+          position: cameraPosition.value,
+          target: cameraTarget.value,
+          timestamp: now
+        }
+      }
+    });
+  }
+  function applyCameraState(position, target) {
+    targetX.value = target[0];
+    targetY.value = target[1];
+    targetZ.value = target[2];
+    const dx = position[0] - target[0];
+    const dy = position[1] - target[1];
+    const dz = position[2] - target[2];
+    distance.value = Math.sqrt(dx * dx + dy * dy + dz * dz);
+    if (distance.value > 1e-3) {
+      elevation.value = Math.asin(dy / distance.value);
+      azimuth.value = Math.atan2(dx, dz);
+    }
+  }
+  onMounted(() => {
+    rafId = requestAnimationFrame(tick);
+    window.addEventListener("keydown", onKeyDown);
+    window.addEventListener("keyup", onKeyUp);
+  });
+  onBeforeUnmount(() => {
+    cancelAnimationFrame(rafId);
+    window.removeEventListener("keydown", onKeyDown);
+    window.removeEventListener("keyup", onKeyUp);
+  });
+  return {
+    cameraRef,
+    cameraPosition,
+    cameraTarget,
+    controlMode,
+    azimuth,
+    elevation,
+    distance,
+    focusOn,
+    broadcastCamera,
+    applyCameraState,
+    onCanvasPointerDown,
+    onCanvasPointerMove,
+    onCanvasPointerUp,
+    onCanvasWheel
+  };
+}

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

@@ -0,0 +1,14 @@
+import type { Ref } from 'vue';
+import type { TreeEntry } from '../types.js';
+export declare function useSpatialDrag(tree: {
+    entries: Ref<TreeEntry[]>;
+    updateMeta: (id: string, meta: Record<string, unknown>) => void;
+}, selectedIds: Ref<Set<string>>, _cameraRef: Ref<any>, setLocalState: (state: Record<string, unknown>) => void, sceneSettings: {
+    data: Record<string, unknown>;
+}): {
+    draggingId: Ref<string | null, string | null>;
+    bindScene: (canvas: HTMLCanvasElement, sceneObj: any, cameraObj: any) => void;
+    onPointerDown: (ev: PointerEvent) => string | null;
+    onPointerMove: (ev: PointerEvent) => void;
+    onPointerUp: (_ev: PointerEvent) => void;
+};

package/dist/runtime/composables/useSpatialDrag.js

@@ -0,0 +1,137 @@
+import { ref, onMounted, onBeforeUnmount } from "vue";
+export function useSpatialDrag(tree, selectedIds, _cameraRef, setLocalState, sceneSettings) {
+  const draggingId = ref(null);
+  let canvasEl = null;
+  let scene = null;
+  let camera = null;
+  let isDragging = false;
+  let dragStartWorldX = 0;
+  let dragStartWorldZ = 0;
+  const dragEntryStartPositions = /* @__PURE__ */ new Map();
+  const keysDown = /* @__PURE__ */ new Set();
+  function onKeyDown(ev) {
+    keysDown.add(ev.key.toLowerCase());
+  }
+  function onKeyUp(ev) {
+    keysDown.delete(ev.key.toLowerCase());
+  }
+  onMounted(() => {
+    window.addEventListener("keydown", onKeyDown);
+    window.addEventListener("keyup", onKeyUp);
+  });
+  onBeforeUnmount(() => {
+    window.removeEventListener("keydown", onKeyDown);
+    window.removeEventListener("keyup", onKeyUp);
+  });
+  function bindScene(canvas, sceneObj, cameraObj) {
+    canvasEl = canvas;
+    scene = sceneObj;
+    camera = cameraObj;
+  }
+  function raycastEntryId(ev) {
+    if (!canvasEl || !scene || !camera) return null;
+    try {
+      const THREE = globalThis.__ABRACA_SHARED__?.three;
+      if (!THREE) return null;
+      const rect = canvasEl.getBoundingClientRect();
+      const pointer = new THREE.Vector2(
+        (ev.clientX - rect.left) / rect.width * 2 - 1,
+        -((ev.clientY - rect.top) / rect.height) * 2 + 1
+      );
+      const raycaster = new THREE.Raycaster();
+      raycaster.setFromCamera(pointer, camera);
+      const intersects = raycaster.intersectObjects(scene.children, true);
+      for (const hit of intersects) {
+        let obj = hit.object;
+        while (obj) {
+          if (obj.userData?.entryId) return obj.userData.entryId;
+          obj = obj.parent;
+        }
+      }
+    } catch {
+    }
+    return null;
+  }
+  function getGroundIntersection(ev) {
+    if (!canvasEl || !camera) return null;
+    try {
+      const THREE = globalThis.__ABRACA_SHARED__?.three;
+      if (!THREE) return null;
+      const rect = canvasEl.getBoundingClientRect();
+      const pointer = new THREE.Vector2(
+        (ev.clientX - rect.left) / rect.width * 2 - 1,
+        -((ev.clientY - rect.top) / rect.height) * 2 + 1
+      );
+      const raycaster = new THREE.Raycaster();
+      raycaster.setFromCamera(pointer, camera);
+      const plane = new THREE.Plane(new THREE.Vector3(0, 1, 0), 0);
+      const target = new THREE.Vector3();
+      const hit = raycaster.ray.intersectPlane(plane, target);
+      return hit ? { x: target.x, z: target.z } : null;
+    } catch {
+      return null;
+    }
+  }
+  function onPointerDown(ev) {
+    if (ev.button !== 0) return null;
+    const hitId = raycastEntryId(ev);
+    if (!hitId) return null;
+    isDragging = true;
+    draggingId.value = hitId;
+    dragEntryStartPositions.clear();
+    const worldPos = getGroundIntersection(ev);
+    if (worldPos) {
+      dragStartWorldX = worldPos.x;
+      dragStartWorldZ = worldPos.z;
+    }
+    setLocalState({ spatial: { dragging: hitId } });
+    return hitId;
+  }
+  function onPointerMove(ev) {
+    if (!isDragging || !draggingId.value) return;
+    if (dragEntryStartPositions.size === 0) {
+      for (const id of selectedIds.value) {
+        const entry = tree.entries.value.find((e) => e.id === id);
+        if (entry) {
+          dragEntryStartPositions.set(id, {
+            x: entry.meta?.spX ?? 0,
+            y: entry.meta?.spY ?? 0,
+            z: entry.meta?.spZ ?? 0
+          });
+        }
+      }
+    }
+    const worldPos = getGroundIntersection(ev);
+    if (!worldPos) return;
+    let dx = worldPos.x - dragStartWorldX;
+    const dy = 0;
+    let dz = worldPos.z - dragStartWorldZ;
+    if (keysDown.has("x")) {
+      dz = 0;
+    }
+    if (keysDown.has("z")) {
+      dx = 0;
+    }
+    const snapSize = sceneSettings.data.snapSize || 0;
+    const snap = (v) => snapSize > 0 ? Math.round(v / snapSize) * snapSize : v;
+    for (const [id, start] of dragEntryStartPositions) {
+      const newX = snap(start.x + dx);
+      const newY = snap(start.y + dy);
+      const newZ = snap(start.z + dz);
+      tree.updateMeta(id, { spX: newX, spY: newY, spZ: newZ });
+    }
+  }
+  function onPointerUp(_ev) {
+    isDragging = false;
+    draggingId.value = null;
+    dragEntryStartPositions.clear();
+    setLocalState({ spatial: { dragging: null } });
+  }
+  return {
+    draggingId,
+    bindScene,
+    onPointerDown,
+    onPointerMove,
+    onPointerUp
+  };
+}