@abraca/nuxt 0.2.0 → 1.5.0

package/dist/runtime/composables/useTimelineView.js

@@ -0,0 +1,434 @@
+import { ref, computed, onMounted, onBeforeUnmount } from "vue";
+const TIER_MILLENNIA = 5e-3;
+const TIER_CENTURIES = 0.05;
+const TIER_DECADES = 0.5;
+const TIER_YEARS = 2;
+const TIER_MONTHS = 10;
+const TIER_WEEKS = 30;
+const ZOOM_MIN = 5e-4;
+const ZOOM_MAX = 120;
+const ZOOM_WHEEL_FACTOR = 1.08;
+const PAN_KEYBOARD_PX = 100;
+const MS_PER_DAY = 24 * 60 * 60 * 1e3;
+function toDateStr(d) {
+  const y = d.getFullYear();
+  const m = String(d.getMonth() + 1).padStart(2, "0");
+  const day = String(d.getDate()).padStart(2, "0");
+  if (y < 0) return `-${String(-y).padStart(6, "0")}-${m}-${day}`;
+  if (y > 9999) return `+${String(y).padStart(6, "0")}-${m}-${day}`;
+  return `${String(y).padStart(4, "0")}-${m}-${day}`;
+}
+function clamp(v, min, max) {
+  return Math.max(min, Math.min(max, v));
+}
+export function useTimelineView(options) {
+  const { containerRef, scrollContainerRef, storedPixelsPerDay, storedZoomLevel, storedCenterDate, entries: entriesRef, onViewChange } = options;
+  const pixelsPerDay = ref(14);
+  const centerMs = ref(Date.now());
+  const centerDate = computed(() => new Date(centerMs.value));
+  const containerWidth = ref(800);
+  const isMobile = ref(false);
+  function migrateZoom() {
+    if (storedPixelsPerDay?.value && storedPixelsPerDay.value > 0) {
+      pixelsPerDay.value = storedPixelsPerDay.value;
+    } else if (storedZoomLevel?.value) {
+      const map = { week: 40, month: 14, quarter: 4 };
+      pixelsPerDay.value = map[storedZoomLevel.value] ?? 14;
+    }
+    if (storedCenterDate?.value) {
+      const d = new Date(storedCenterDate.value);
+      if (!Number.isNaN(d.getTime())) centerMs.value = d.getTime();
+    }
+  }
+  function fitToContent() {
+    const items = entriesRef?.value;
+    if (!items || items.length === 0) return false;
+    let minDate = Infinity;
+    let maxDate = -Infinity;
+    let hasAnyDate = false;
+    for (const item of items) {
+      const start = item.meta?.dateStart;
+      const end = item.meta?.dateEnd;
+      if (start) {
+        const t = new Date(start).getTime();
+        if (!Number.isNaN(t)) {
+          minDate = Math.min(minDate, t);
+          maxDate = Math.max(maxDate, t);
+          hasAnyDate = true;
+        }
+      }
+      if (end) {
+        const t = new Date(end).getTime();
+        if (!Number.isNaN(t)) {
+          minDate = Math.min(minDate, t);
+          maxDate = Math.max(maxDate, t);
+          hasAnyDate = true;
+        }
+      }
+    }
+    if (!hasAnyDate) return false;
+    const rangeDays = Math.max(7, (maxDate - minDate) / MS_PER_DAY);
+    const paddingDays = rangeDays * 0.1;
+    const totalDays = rangeDays + paddingDays * 2;
+    const width = containerWidth.value || 800;
+    const ppd = clamp(width / totalDays, ZOOM_MIN, ZOOM_MAX);
+    pixelsPerDay.value = ppd;
+    centerMs.value = (minDate + maxDate) / 2;
+    persistView();
+    return true;
+  }
+  let resizeObserver = null;
+  function measureContainer() {
+    const el = containerRef.value;
+    if (!el) return;
+    containerWidth.value = el.clientWidth;
+    isMobile.value = window.innerWidth < 640;
+  }
+  onMounted(() => {
+    migrateZoom();
+    measureContainer();
+    if (containerRef.value) {
+      resizeObserver = new ResizeObserver(measureContainer);
+      resizeObserver.observe(containerRef.value);
+    }
+    if (!storedCenterDate?.value && !storedPixelsPerDay?.value) {
+      if (!fitToContent()) {
+        centerMs.value = Date.now();
+      }
+    }
+  });
+  onBeforeUnmount(() => {
+    if (persistTimer) clearTimeout(persistTimer);
+    if (followFrameId !== null) cancelAnimationFrame(followFrameId);
+    resizeObserver?.disconnect();
+  });
+  const visibleDays = computed(() => containerWidth.value / pixelsPerDay.value);
+  const visibleStartDate = computed(
+    () => new Date(centerMs.value - containerWidth.value / pixelsPerDay.value / 2 * MS_PER_DAY)
+  );
+  const visibleEndDate = computed(
+    () => new Date(centerMs.value + containerWidth.value / pixelsPerDay.value / 2 * MS_PER_DAY)
+  );
+  function dateToX(dateStr) {
+    const d = new Date(dateStr);
+    const diffDays = (d.getTime() - visibleStartDate.value.getTime()) / MS_PER_DAY;
+    return diffDays * pixelsPerDay.value;
+  }
+  function xToDate(px) {
+    const ms = visibleStartDate.value.getTime() + px / pixelsPerDay.value * MS_PER_DAY;
+    return new Date(ms);
+  }
+  function spanWidth(startStr, endStr) {
+    const s = new Date(startStr);
+    const e = new Date(endStr);
+    const days = Math.max(1, Math.ceil((e.getTime() - s.getTime()) / MS_PER_DAY));
+    return days * pixelsPerDay.value;
+  }
+  const todayOffset = computed(() => dateToX(toDateStr(/* @__PURE__ */ new Date())));
+  function panByPixels(dx) {
+    centerMs.value -= dx / pixelsPerDay.value * MS_PER_DAY;
+    persistView();
+  }
+  function navigateTo(date) {
+    centerMs.value = date.getTime();
+    persistView();
+  }
+  function goToday() {
+    centerMs.value = Date.now();
+    persistView();
+  }
+  function zoomAt(factor, anchorX) {
+    const oldPpd = pixelsPerDay.value;
+    const newPpd = clamp(oldPpd * factor, ZOOM_MIN, ZOOM_MAX);
+    if (anchorX !== void 0) {
+      const halfW = containerWidth.value / 2;
+      const anchorMs = centerMs.value + (anchorX - halfW) / oldPpd * MS_PER_DAY;
+      pixelsPerDay.value = newPpd;
+      centerMs.value = anchorMs - (anchorX - halfW) / newPpd * MS_PER_DAY;
+    } else {
+      pixelsPerDay.value = newPpd;
+    }
+    persistView();
+  }
+  function zoomIn(anchorX) {
+    zoomAt(ZOOM_WHEEL_FACTOR, anchorX);
+  }
+  function zoomOut(anchorX) {
+    zoomAt(1 / ZOOM_WHEEL_FACTOR, anchorX);
+  }
+  let persistTimer = null;
+  function persistView() {
+    if (persistTimer) clearTimeout(persistTimer);
+    persistTimer = setTimeout(() => {
+      onViewChange?.(pixelsPerDay.value, toDateStr(centerDate.value));
+    }, 400);
+  }
+  function setViewport(ppd, center) {
+    pixelsPerDay.value = clamp(ppd, ZOOM_MIN, ZOOM_MAX);
+    centerMs.value = center;
+  }
+  const FOLLOW_TAU = 120;
+  let followFrameId = null;
+  let followTargetPpd = null;
+  let followTargetCenter = null;
+  let followLastTime = null;
+  function runFollowLoop(now) {
+    if (followTargetPpd === null || followTargetCenter === null) {
+      followFrameId = null;
+      return;
+    }
+    const dt = followLastTime !== null ? Math.min(now - followLastTime, 64) : 16;
+    followLastTime = now;
+    const factor = 1 - Math.exp(-dt / FOLLOW_TAU);
+    const logCur = Math.log(pixelsPerDay.value);
+    const logTarget = Math.log(followTargetPpd);
+    pixelsPerDay.value = Math.exp(logCur + (logTarget - logCur) * factor);
+    centerMs.value = centerMs.value + (followTargetCenter - centerMs.value) * factor;
+    const pxDiff = Math.abs(followTargetCenter - centerMs.value) / MS_PER_DAY * pixelsPerDay.value;
+    const zoomDone = Math.abs(logTarget - Math.log(pixelsPerDay.value)) < 5e-4;
+    const panDone = pxDiff < 0.5;
+    if (zoomDone && panDone) {
+      pixelsPerDay.value = followTargetPpd;
+      centerMs.value = followTargetCenter;
+      followTargetPpd = null;
+      followTargetCenter = null;
+      followFrameId = null;
+    } else {
+      followFrameId = requestAnimationFrame(runFollowLoop);
+    }
+  }
+  function animateViewport(targetPpd, targetCenter) {
+    followTargetPpd = clamp(targetPpd, ZOOM_MIN, ZOOM_MAX);
+    followTargetCenter = targetCenter;
+    if (followFrameId === null) {
+      followLastTime = null;
+      followFrameId = requestAnimationFrame(runFollowLoop);
+    }
+  }
+  function onWheel(e) {
+    const rect = containerRef.value?.getBoundingClientRect();
+    const anchorX = rect ? e.clientX - rect.left : void 0;
+    if (e.deltaY > 0) zoomOut(anchorX);
+    else zoomIn(anchorX);
+  }
+  let pinchStartDist = 0;
+  let pinchStartPpd = 0;
+  let pinchStartCenterMs = 0;
+  function onTouchStart(e) {
+    if (e.touches.length === 2) {
+      const dx = e.touches[1].clientX - e.touches[0].clientX;
+      const dy = e.touches[1].clientY - e.touches[0].clientY;
+      pinchStartDist = Math.hypot(dx, dy);
+      pinchStartPpd = pixelsPerDay.value;
+      pinchStartCenterMs = centerMs.value;
+    }
+  }
+  function onTouchMove(e) {
+    if (e.touches.length === 2 && pinchStartDist > 0) {
+      e.preventDefault();
+      const dx = e.touches[1].clientX - e.touches[0].clientX;
+      const dy = e.touches[1].clientY - e.touches[0].clientY;
+      const dist = Math.hypot(dx, dy);
+      const newPpd = clamp(pinchStartPpd * (dist / pinchStartDist), ZOOM_MIN, ZOOM_MAX);
+      const rect = containerRef.value?.getBoundingClientRect();
+      if (rect) {
+        const midX = (e.touches[0].clientX + e.touches[1].clientX) / 2 - rect.left;
+        const halfW = containerWidth.value / 2;
+        const anchorMsVal = pinchStartCenterMs + (midX - halfW) / pinchStartPpd * MS_PER_DAY;
+        pixelsPerDay.value = newPpd;
+        centerMs.value = anchorMsVal - (midX - halfW) / newPpd * MS_PER_DAY;
+      } else {
+        pixelsPerDay.value = newPpd;
+      }
+      persistView();
+    }
+  }
+  function onTouchEnd() {
+    pinchStartDist = 0;
+  }
+  let panStartX = 0;
+  let panStartY = 0;
+  let isPanning = false;
+  function onPanPointerDown(e) {
+    if (e.button !== 0) return;
+    const target = e.target;
+    if (target.closest("[data-bar-id], [data-milestone-id], [data-drag-id]")) return;
+    panStartX = e.clientX;
+    panStartY = e.clientY;
+    isPanning = true;
+    e.currentTarget?.setPointerCapture(e.pointerId);
+  }
+  function onPanPointerMove(e) {
+    if (!isPanning) return;
+    const dx = e.clientX - panStartX;
+    const dy = e.clientY - panStartY;
+    if (Math.abs(dx) > 2 || Math.abs(dy) > 2) {
+      if (Math.abs(dx) > 2) {
+        panByPixels(dx);
+        panStartX = e.clientX;
+      }
+      if (Math.abs(dy) > 2 && scrollContainerRef?.value) {
+        scrollContainerRef.value.scrollTop -= dy;
+        panStartY = e.clientY;
+      }
+    }
+  }
+  function onPanPointerUp(e) {
+    isPanning = false;
+    e.currentTarget?.releasePointerCapture(e.pointerId);
+  }
+  const axisLabels = computed(() => {
+    const ppd = pixelsPerDay.value;
+    const labels = [];
+    const start = visibleStartDate.value;
+    const end = visibleEndDate.value;
+    if (ppd < TIER_MILLENNIA) {
+      addYearTierLabels(labels, start, end, 1e3, "fine");
+    } else if (ppd < TIER_CENTURIES) {
+      addYearTierLabels(labels, start, end, 100, "fine");
+      addYearTierLabels(labels, start, end, 1e3, "coarse");
+    } else if (ppd < TIER_DECADES) {
+      addYearTierLabels(labels, start, end, 10, "fine");
+      addYearTierLabels(labels, start, end, 100, "coarse");
+    } else if (ppd < TIER_YEARS) {
+      addYearTierLabels(labels, start, end, 1, "fine");
+      addYearTierLabels(labels, start, end, 10, "coarse");
+    } else if (ppd < TIER_MONTHS) {
+      addMonthLabels(labels, start, end, "fine");
+      addYearTierLabels(labels, start, end, 1, "coarse");
+    } else if (ppd < TIER_WEEKS) {
+      addWeekLabels(labels, start, end, "fine");
+      addMonthLabels(labels, start, end, "coarse");
+    } else {
+      addDayLabels(labels, start, end, "fine");
+      addMonthLabels(labels, start, end, "coarse");
+    }
+    return labels;
+  });
+  function addYearTierLabels(labels, start, end, step, tier) {
+    const startYear = Math.floor(start.getFullYear() / step) * step;
+    const endYear = end.getFullYear();
+    for (let y = startYear; y <= endYear + step; y += step) {
+      const d = new Date(0, 0, 1);
+      d.setFullYear(y, 0, 1);
+      const offset = dateToX(toDateStr(d));
+      if (offset >= -200 && offset <= containerWidth.value + 200) {
+        labels.push({ label: String(y), offset, tier });
+      }
+    }
+  }
+  function addMonthLabels(labels, start, end, tier) {
+    const loc = typeof navigator !== "undefined" ? navigator.language : "en-US";
+    const d = new Date(start.getFullYear(), start.getMonth(), 1);
+    while (d <= end) {
+      const offset = dateToX(toDateStr(d));
+      if (offset >= -200 && offset <= containerWidth.value + 200) {
+        const fmt = tier === "coarse" ? { month: "long", year: "numeric" } : { month: "short" };
+        labels.push({ label: d.toLocaleDateString(loc, fmt), offset, tier });
+      }
+      d.setMonth(d.getMonth() + 1);
+    }
+  }
+  function addWeekLabels(labels, start, end, tier) {
+    const d = new Date(start);
+    d.setDate(d.getDate() - (d.getDay() + 6) % 7);
+    while (d <= end) {
+      const offset = dateToX(toDateStr(d));
+      if (offset >= -200 && offset <= containerWidth.value + 200) {
+        labels.push({ label: `W${isoWeekNumber(d)}`, offset, tier });
+      }
+      d.setDate(d.getDate() + 7);
+    }
+  }
+  function addDayLabels(labels, start, end, tier) {
+    const loc = typeof navigator !== "undefined" ? navigator.language : "en-US";
+    const d = new Date(start);
+    while (d <= end) {
+      const offset = dateToX(toDateStr(d));
+      if (offset >= -200 && offset <= containerWidth.value + 200) {
+        labels.push({
+          label: d.toLocaleDateString(loc, { weekday: "short", day: "numeric" }),
+          offset,
+          tier
+        });
+      }
+      d.setDate(d.getDate() + 1);
+    }
+  }
+  function isoWeekNumber(d) {
+    const date = new Date(d.getTime());
+    date.setHours(0, 0, 0, 0);
+    date.setDate(date.getDate() + 3 - (date.getDay() + 6) % 7);
+    const week1 = new Date(date.getFullYear(), 0, 4);
+    return 1 + Math.round(((date.getTime() - week1.getTime()) / 864e5 - 3 + (week1.getDay() + 6) % 7) / 7);
+  }
+  function isBarVisible(startStr, endStr) {
+    if (!startStr) return false;
+    const start = new Date(startStr);
+    const end = endStr ? new Date(endStr) : start;
+    return end >= visibleStartDate.value && start <= visibleEndDate.value;
+  }
+  function isMilestone(entry) {
+    return !entry.meta?.dateEnd || entry.meta.dateEnd === entry.meta.dateStart;
+  }
+  function onKeydown(e) {
+    if (e.target?.tagName === "INPUT" || e.target?.tagName === "TEXTAREA") return;
+    switch (e.key) {
+      case "ArrowLeft":
+        e.preventDefault();
+        panByPixels(PAN_KEYBOARD_PX);
+        break;
+      case "ArrowRight":
+        e.preventDefault();
+        panByPixels(-PAN_KEYBOARD_PX);
+        break;
+      case "+":
+      case "=":
+        e.preventDefault();
+        zoomIn();
+        break;
+      case "-":
+        e.preventDefault();
+        zoomOut();
+        break;
+      case "t":
+        e.preventDefault();
+        goToday();
+        break;
+    }
+  }
+  return {
+    pixelsPerDay,
+    centerDate,
+    containerWidth,
+    isMobile,
+    visibleDays,
+    visibleStartDate,
+    visibleEndDate,
+    todayOffset,
+    axisLabels,
+    dateToX,
+    xToDate,
+    spanWidth,
+    toDateStr,
+    panByPixels,
+    navigateTo,
+    goToday,
+    fitToContent,
+    zoomIn,
+    zoomOut,
+    zoomAt,
+    setViewport,
+    animateViewport,
+    onWheel,
+    onTouchStart,
+    onTouchMove,
+    onTouchEnd,
+    onPanPointerDown,
+    onPanPointerMove,
+    onPanPointerUp,
+    onKeydown,
+    isBarVisible,
+    isMilestone
+  };
+}

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

@@ -0,0 +1,8 @@
+export interface TiptapDragState {
+    html: string;
+    nodeType: string;
+    sourceDocId: string;
+    sourceDocLabel: string;
+    deleteFromSource: () => void;
+}
+export declare function useTiptapDragState(): import("vue").ShallowRef<TiptapDragState | null, TiptapDragState | null>;

package/dist/runtime/composables/useTiptapDragState.js

@@ -0,0 +1,5 @@
+import { shallowRef } from "vue";
+const tiptapDragState = shallowRef(null);
+export function useTiptapDragState() {
+  return tiptapDragState;
+}

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

@@ -0,0 +1,36 @@
+/**
+ * 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 on every pointermove while over a container (for live previews) */
+    onMoveOverContainer?: (dragId: string, containerId: string, event: PointerEvent) => 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,194 @@
+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;
+    if (container && dragId.value && opts.onMoveOverContainer) {
+      opts.onMoveOverContainer(dragId.value, container, e);
+    }
+    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
+  };
+}