react-view-transition-swiper 0.2.0

package/dist/index.mjs

@@ -0,0 +1,971 @@
+import { forwardRef, useRef, useLayoutEffect, useState, useCallback, useEffect, useImperativeHandle } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+// src/index.tsx
+var logger = {
+  debug: (...args) => console.debug(...args),
+  warn: (...args) => console.warn(...args),
+  error: (...args) => console.error(...args)
+};
+var _instanceCounter = 0;
+var STATIC_STYLE_ID = "swipe-deck-v6";
+var STATIC_CSS = `
+/*
+  SwipeDeck v6.2 \u2014 static styles
+  Import this file once in your app:  import "swipe-deck/SwipeDeck.css"
+  All class names are prefixed with sd- to avoid collisions.
+*/
+
+.sd-root {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  touch-action: pan-y;
+  user-select: none;
+  -webkit-user-select: none;
+}
+
+/*
+  No overflow:hidden on .sd-stage \u2014 it clips the live card but NOT
+  ::view-transition-old which renders in a top-layer pseudo-element.
+  That mismatch makes VT snapshots look different from the live element.
+*/
+.sd-stage {
+  position: relative;
+  width: 100%;
+  flex: 1;
+  min-height: 0;
+  /* touch-action set via inline style \u2014 varies by navAxis */
+}
+
+.sd-sizer {
+  width: 100%;
+  visibility: hidden;
+  pointer-events: none;
+  box-sizing: border-box;
+}
+
+.sd-card {
+  position: absolute;
+  inset: 0;
+  box-sizing: border-box;
+  z-index: 0;
+  visibility: hidden;
+  pointer-events: none;
+  will-change: transform;
+  overflow-y: auto;
+  overflow-x: hidden;
+  /* touch-action set via inline style on SlideSlot \u2014 varies by navAxis */
+}
+
+.sd-card.sd-current {
+  z-index: 2;
+  visibility: visible;
+  pointer-events: auto;
+  cursor: grab;
+}
+.sd-card.sd-current.sd-no-drag      { cursor: default; }
+.sd-card.sd-current.sd-grabbing     { cursor: grabbing; }
+.sd-card.sd-current.sd-drag-pending { cursor: wait; }
+
+.sd-card.sd-peek {
+  z-index: 1;
+  visibility: visible;
+  pointer-events: none;
+}
+
+/* Consumer-hookable drag feedback classes \u2014 add your own styles */
+.sd-card.sd-current.sd-pull-fwd  {}
+.sd-card.sd-current.sd-pull-back {}
+
+/* \u2500\u2500 View transition exit keyframes \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+/* X-axis */
+@keyframes sd-out-left       { to { transform: translateX(-100%); } }
+@keyframes sd-out-right      { to { transform: translateX( 100%); } }
+@keyframes sd-out-left-fade  { to { transform: translateX(-80%); opacity: 0; } }
+@keyframes sd-out-right-fade { to { transform: translateX( 80%); opacity: 0; } }
+
+/* Y-axis */
+@keyframes sd-out-up         { to { transform: translateY(-100%); } }
+@keyframes sd-out-down       { to { transform: translateY( 100%); } }
+@keyframes sd-out-up-fade    { to { transform: translateY(-80%); opacity: 0; } }
+@keyframes sd-out-down-fade  { to { transform: translateY( 80%); opacity: 0; } }
+
+/* \u2500\u2500 Navigation dots \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+.sd-dots {
+  display: flex;
+  gap: 7px;
+  margin-top: 12px;
+}
+
+.sd-dot {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  cursor: pointer;
+  transition: opacity 0.25s, transform 0.25s;
+  opacity: 0.3;
+}
+
+.sd-dot.sd-dot-active {
+  opacity: 1;
+  transform: scale(1.4);
+}
+`;
+function injectStaticStyles() {
+  if (typeof document === "undefined") return;
+  if (document.getElementById(STATIC_STYLE_ID)) return;
+  const style = document.createElement("style");
+  style.id = STATIC_STYLE_ID;
+  style.textContent = STATIC_CSS;
+  document.head.appendChild(style);
+}
+function injectVTStyles(instanceId, vtName, ms, axis) {
+  if (typeof document === "undefined") return;
+  const styleId = `sd-vt-${instanceId}`;
+  document.getElementById(styleId)?.remove();
+  const dur = `${ms}ms`;
+  const dir = `data-sd-dir-${instanceId}`;
+  const fade = `data-sd-fade-${instanceId}`;
+  const fwdAnim = axis === "y" ? "sd-out-up" : "sd-out-left";
+  const backAnim = axis === "y" ? "sd-out-down" : "sd-out-right";
+  const fwdFade = axis === "y" ? "sd-out-up-fade" : "sd-out-left-fade";
+  const backFade = axis === "y" ? "sd-out-down-fade" : "sd-out-right-fade";
+  const style = document.createElement("style");
+  style.id = styleId;
+  style.textContent = `
+    ::view-transition-old(${vtName}),
+    ::view-transition-new(${vtName}) { animation: none; }
+    ::view-transition-new(${vtName}) { z-index: 0; }
+    ::view-transition-old(${vtName}) { z-index: 1; }
+    html[${dir}="forward"]::view-transition-old(${vtName}) {
+      animation: ${fwdAnim}  ${dur} cubic-bezier(0.4,0,0.2,1) forwards;
+    }
+    html[${dir}="back"]::view-transition-old(${vtName}) {
+      animation: ${backAnim} ${dur} cubic-bezier(0.4,0,0.2,1) forwards;
+    }
+    html[${dir}="forward"][${fade}]::view-transition-old(${vtName}) {
+      animation: ${fwdFade}  ${dur} cubic-bezier(0.4,0,0.2,1) forwards;
+    }
+    html[${dir}="back"][${fade}]::view-transition-old(${vtName}) {
+      animation: ${backFade} ${dur} cubic-bezier(0.4,0,0.2,1) forwards;
+    }
+  `;
+  document.head.appendChild(style);
+}
+function removeVTStyles(instanceId) {
+  document.getElementById(`sd-vt-${instanceId}`)?.remove();
+}
+var VELOCITY_COMMIT = 0.45;
+var clamp = (v, lo, hi) => Math.max(lo, Math.min(hi, v));
+function rubberBand(x, dim) {
+  const sign = x > 0 ? 1 : -1;
+  const abs = Math.abs(x);
+  return sign * (1 - 1 / (abs / dim * 0.55 + 1)) * dim;
+}
+function layerFor(i, cur, peek) {
+  if (i === cur) return "current";
+  if (peek !== null && i === peek) return "peek";
+  return "hidden";
+}
+function SlideSlot({ slide, layer, keepDom, dragDisabled, navAxis, children, refCallback }) {
+  const cls = [
+    "sd-card",
+    layer === "current" && "sd-current",
+    layer === "peek" && "sd-peek",
+    layer === "current" && dragDisabled && "sd-no-drag"
+  ].filter(Boolean).join(" ");
+  const cardTouchAction = navAxis === "y" ? "pan-x" : "pan-y";
+  return /* @__PURE__ */ jsx("div", { ref: refCallback, className: cls, "data-slide-id": slide.id, style: { touchAction: cardTouchAction }, children: keepDom || layer !== "hidden" ? children : null });
+}
+var SwipeDeck = forwardRef(
+  function SwipeDeck2({
+    width = 390,
+    showDots = true,
+    fade = false,
+    dimOnDrag = false,
+    maxDragRatio = 1,
+    dragDisabled = false,
+    keyboardDisabled = false,
+    dragDelayMs = 0,
+    transitionMs = 360,
+    navAxis = "x",
+    onSlideChange,
+    onError,
+    className = ""
+  }, externalRef) {
+    injectStaticStyles();
+    const instanceId = useRef(-1);
+    if (instanceId.current === -1) instanceId.current = ++_instanceCounter;
+    const vtName = `sd-card-${instanceId.current}`;
+    injectVTStyles(instanceId.current, vtName, transitionMs, navAxis);
+    useLayoutEffect(() => () => removeVTStyles(instanceId.current), []);
+    const [slides, setSlides] = useState([]);
+    const [current, setCurrent] = useState(0);
+    const [peekIndex, setPeekIndex] = useState(null);
+    const slidesRef = useRef([]);
+    const currentRef = useRef(0);
+    const peekRef = useRef(null);
+    const userPeekOverride = useRef(null);
+    const transitioningRef = useRef(false);
+    const lastShownAt = useRef([]);
+    const cardRefs = useRef(/* @__PURE__ */ new Map());
+    const keepDomIds = useRef(/* @__PURE__ */ new Set());
+    const dragPermissions = useRef(/* @__PURE__ */ new Map());
+    const stageRef = useRef(null);
+    const heightRef = useRef(0);
+    const dragRef = useRef(null);
+    const dragTimerRef = useRef(null);
+    const lastDragXRef = useRef(0);
+    const lastDragYRef = useRef(0);
+    const pendingRemoveNavTo = useRef(null);
+    const pendingRemoveIds = useRef(/* @__PURE__ */ new Set());
+    const pendingNavDelta = useRef(null);
+    const navWithVTRef = useRef(() => {
+    });
+    const navInstantRef = useRef(() => {
+    });
+    const onErrorRef = useRef(void 0);
+    onErrorRef.current = onError;
+    const reportError = (error) => {
+      logger.error(`[SD] ERROR ${error.code}: ${error.message}`, error.detail ?? "");
+      onErrorRef.current?.(error);
+    };
+    if (lastShownAt.current.length < slides.length) {
+      lastShownAt.current = [
+        ...lastShownAt.current,
+        ...Array(slides.length - lastShownAt.current.length).fill(0)
+      ];
+    }
+    const resolvePeek = useCallback((cur, hint) => {
+      const total = slidesRef.current.length;
+      if (total <= 1) return null;
+      const ov = userPeekOverride.current;
+      if (ov !== null && ov >= 0 && ov < total && ov !== cur) return ov;
+      if (hint >= 0 && hint < total && hint !== cur) return hint;
+      const prev = cur - 1;
+      const next = cur + 1;
+      if (prev < 0 && next >= total) return null;
+      if (prev < 0) return next;
+      if (next >= total) return prev;
+      return (lastShownAt.current[next] ?? 0) >= (lastShownAt.current[prev] ?? 0) ? next : prev;
+    }, []);
+    const syncLayers = useCallback(
+      (nextCur, nextPeek, flyingEl) => {
+        const pool = slidesRef.current;
+        for (let i = 0; i < pool.length; i++) {
+          const el = cardRefs.current.get(pool[i].id);
+          if (!el || el === flyingEl) continue;
+          el.classList.remove("sd-current", "sd-peek");
+          const layer = layerFor(i, nextCur, nextPeek);
+          if (layer !== "hidden") el.classList.add(`sd-${layer}`);
+        }
+      },
+      []
+    );
+    const doRemoveByIndices = useCallback((sortedDescIndices) => {
+      if (sortedDescIndices.length === 0) return;
+      const snapCur = currentRef.current;
+      const snapPeek = peekRef.current;
+      const snapOverride = userPeekOverride.current;
+      setSlides((prev) => {
+        const valid = sortedDescIndices.filter((i) => i >= 0 && i < prev.length);
+        if (valid.length === 0) return prev;
+        const removeSet = new Set(valid);
+        const next = prev.filter((_, i) => !removeSet.has(i));
+        slidesRef.current = next;
+        for (const idx of valid) {
+          const id = prev[idx].id;
+          const el = cardRefs.current.get(id);
+          if (el) {
+            el.classList.remove("sd-current", "sd-peek");
+            el.style.visibility = "hidden";
+            el.style.zIndex = "0";
+          }
+          cardRefs.current.delete(id);
+          lastShownAt.current.splice(idx, 1);
+        }
+        const shift = valid.filter((i) => i < snapCur).length;
+        const newCur = Math.min(Math.max(snapCur - shift, 0), next.length - 1);
+        const shiftIdx = (idx) => {
+          if (idx === null) return null;
+          if (removeSet.has(idx)) return null;
+          return idx - valid.filter((r) => r < idx).length;
+        };
+        const newPeek = shiftIdx(snapPeek);
+        const newOverride = shiftIdx(snapOverride);
+        userPeekOverride.current = newOverride;
+        const resolvedPeek = newPeek !== null ? newPeek : resolvePeek(newCur, -1);
+        currentRef.current = newCur;
+        peekRef.current = resolvedPeek;
+        syncLayers(newCur, resolvedPeek);
+        setCurrent(newCur);
+        setPeekIndex(resolvedPeek);
+        return next;
+      });
+    }, [resolvePeek, syncLayers]);
+    const flushAfterNav = useCallback(() => {
+      logger.debug(`[SD] flushAfterNav cur=${currentRef.current} pendingRemoveNavTo=${pendingRemoveNavTo.current} pendingRemoveIds.size=${pendingRemoveIds.current.size} pendingNavDelta=${pendingNavDelta.current}`);
+      if (pendingRemoveNavTo.current !== null) {
+        const target = pendingRemoveNavTo.current;
+        pendingRemoveNavTo.current = null;
+        pendingNavDelta.current = null;
+        const delta = target - currentRef.current;
+        logger.debug(`[SD] flushAfterNav \u2192 pendingRemoveNavTo target=${target} delta=${delta}`);
+        if (delta !== 0) {
+          navWithVTRef.current(delta);
+          return;
+        }
+        logger.debug("[SD] flushAfterNav already at removeNavTo target, falling through");
+      }
+      if (pendingRemoveIds.current.size > 0) {
+        const ids = Array.from(pendingRemoveIds.current);
+        pendingRemoveIds.current = /* @__PURE__ */ new Set();
+        const indices = ids.map((id) => slidesRef.current.findIndex((s) => s.id === id)).filter((i) => i !== -1 && i !== currentRef.current).sort((a, b) => b - a);
+        logger.debug(`[SD] flushAfterNav \u2192 pendingRemoveIds ids=[${ids}] indices=[${indices}]`);
+        if (indices.length > 0) doRemoveByIndices(indices);
+        pendingNavDelta.current = null;
+        return;
+      }
+      if (pendingNavDelta.current !== null) {
+        const delta = pendingNavDelta.current;
+        pendingNavDelta.current = null;
+        logger.debug(`[SD] flushAfterNav \u2192 pendingNavDelta delta=${delta}`);
+        navWithVTRef.current(delta);
+        return;
+      }
+      logger.debug("[SD] flushAfterNav \u2192 nothing pending, done");
+    }, [doRemoveByIndices]);
+    const navInstant = useCallback(
+      (delta) => {
+        const cur = currentRef.current;
+        const total = slidesRef.current.length;
+        const next = cur + delta;
+        logger.debug(`[SD] navInstant delta=${delta} cur=${cur} next=${next} total=${total} transitioning=${transitioningRef.current}`);
+        if (next < 0 || next >= total) {
+          logger.warn(`[SD] navInstant SKIPPED: out of range cur=${cur} delta=${delta} next=${next} total=${total}`);
+          return;
+        }
+        if (transitioningRef.current) {
+          pendingNavDelta.current = next - currentRef.current;
+          logger.debug("[SD] navInstant QUEUED pendingNavDelta=", pendingNavDelta.current);
+          return;
+        }
+        transitioningRef.current = true;
+        const afterPeek = resolvePeek(next, delta > 0 ? next + 1 : next - 1);
+        lastShownAt.current[cur] = performance.now() - 1;
+        lastShownAt.current[next] = performance.now();
+        currentRef.current = next;
+        peekRef.current = afterPeek;
+        setCurrent(next);
+        setPeekIndex(afterPeek);
+        syncLayers(next, afterPeek);
+        onSlideChange?.(next);
+        transitioningRef.current = false;
+        logger.debug(`[SD] navInstant settled cur=${currentRef.current}`);
+        flushAfterNav();
+      },
+      [resolvePeek, syncLayers, onSlideChange, flushAfterNav]
+    );
+    navInstantRef.current = navInstant;
+    const navWithVT = useCallback(
+      (delta) => {
+        const cur = currentRef.current;
+        const total = slidesRef.current.length;
+        const next = cur + delta;
+        logger.debug(`[SD] navWithVT delta=${delta} cur=${cur} next=${next} total=${total} transitioning=${transitioningRef.current}`);
+        if (next < 0 || next >= total) {
+          logger.warn(`[SD] navWithVT SKIPPED: out of range cur=${cur} delta=${delta} next=${next} total=${total}`);
+          return;
+        }
+        if (transitioningRef.current) {
+          pendingNavDelta.current = next - currentRef.current;
+          logger.debug("[SD] navWithVT QUEUED pendingNavDelta=", pendingNavDelta.current);
+          return;
+        }
+        transitioningRef.current = true;
+        const oldEl = cardRefs.current.get(slidesRef.current[cur].id);
+        let newEl = cardRefs.current.get(slidesRef.current[next].id);
+        logger.debug(`[SD] navWithVT elements: oldEl=${!!oldEl} newEl=${!!newEl} cardRefs.size=${cardRefs.current.size}`);
+        if (!oldEl || !newEl) {
+          if (!oldEl) {
+            transitioningRef.current = false;
+            logger.debug("[SD] navWithVT BLOCKED: oldEl missing");
+            reportError({ code: "NAV_MISSING_ELEMENT", message: "DOM node for current slide not found", detail: { cur, curId: slidesRef.current[cur]?.id, cardRefsSize: cardRefs.current.size } });
+            return;
+          }
+          let retries = 0;
+          const retry = () => {
+            newEl = cardRefs.current.get(slidesRef.current[next]?.id ?? "") ?? null;
+            logger.debug(`[SD] navWithVT retry ${retries + 1} newEl=${!!newEl}`);
+            if (newEl) {
+              runNav(oldEl, newEl);
+            } else if (++retries < 5) {
+              requestAnimationFrame(retry);
+            } else {
+              transitioningRef.current = false;
+              logger.debug("[SD] navWithVT BLOCKED: newEl missing after retries");
+              reportError({ code: "NAV_MISSING_ELEMENT", message: "DOM node for destination slide not found after retries", detail: { next, nextId: slidesRef.current[next]?.id, retries, cardRefsSize: cardRefs.current.size } });
+            }
+          };
+          requestAnimationFrame(retry);
+          return;
+        }
+        runNav(oldEl, newEl);
+        function runNav(oldEl2, newEl2) {
+          const afterPeek = resolvePeek(next, delta > 0 ? next + 1 : next - 1);
+          const html = document.documentElement;
+          const dirAttr = `data-sd-dir-${instanceId.current}`;
+          const fadeAttr = `data-sd-fade-${instanceId.current}`;
+          html.setAttribute(dirAttr, delta > 0 ? "forward" : "back");
+          if (fade) html.setAttribute(fadeAttr, "1");
+          newEl2.classList.remove("sd-current");
+          newEl2.classList.add("sd-peek");
+          const isVisible = () => newEl2.classList.contains("sd-current") || newEl2.classList.contains("sd-peek");
+          logger.debug(`[SD] runNav newEl.className="${newEl2.className}" isVisible=${isVisible()}`);
+          const startNav = () => {
+            oldEl2.style.viewTransitionName = vtName;
+            const commit = () => {
+              oldEl2.style.viewTransitionName = "";
+              newEl2.style.viewTransitionName = vtName;
+              lastShownAt.current[cur] = performance.now() - 1;
+              lastShownAt.current[next] = performance.now();
+              currentRef.current = next;
+              peekRef.current = afterPeek;
+              setCurrent(next);
+              setPeekIndex(afterPeek);
+              syncLayers(next, afterPeek);
+              onSlideChange?.(next);
+              newEl2.style.viewTransitionName = "";
+            };
+            let cleanupFired = false;
+            const cleanup = () => {
+              if (cleanupFired) return;
+              cleanupFired = true;
+              html.removeAttribute(dirAttr);
+              html.removeAttribute(fadeAttr);
+              transitioningRef.current = false;
+              logger.debug(`[SD] navWithVT cleanup cur=${currentRef.current} pendingRemoveNavTo=${pendingRemoveNavTo.current} pendingRemoveIds.size=${pendingRemoveIds.current.size} pendingNavDelta=${pendingNavDelta.current}`);
+              flushAfterNav();
+            };
+            const doc = document;
+            if (!doc.startViewTransition) {
+              commit();
+              cleanup();
+              return;
+            }
+            const vt = doc.startViewTransition(commit);
+            vt.finished.finally(cleanup);
+          };
+          let visRetries = 0;
+          const waitForVisible = () => {
+            if (isVisible()) {
+              logger.debug(`[SD] newEl visible after ${visRetries} retries`);
+              startNav();
+            } else if (visRetries++ < 3) {
+              logger.debug(`[SD] newEl not visible yet, retry ${visRetries}`);
+              requestAnimationFrame(waitForVisible);
+            } else {
+              logger.debug("[SD] newEl still not visible after retries, proceeding");
+              reportError({ code: "NAV_ELEMENT_NOT_VISIBLE", message: "Destination slide not visible after retries \u2014 animating anyway", detail: { next, newElClass: newEl2.className, retries: visRetries } });
+              startNav();
+            }
+          };
+          waitForVisible();
+        }
+      },
+      [fade, vtName, resolvePeek, syncLayers, onSlideChange, flushAfterNav]
+    );
+    navWithVTRef.current = navWithVT;
+    const navWithGesture = useCallback(
+      (delta, dragPos) => {
+        const cur = currentRef.current;
+        const total = slidesRef.current.length;
+        const next = cur + delta;
+        logger.debug(`[SD] navWithGesture delta=${delta} cur=${cur} next=${next} total=${total} transitioning=${transitioningRef.current}`);
+        if (next < 0 || next >= total) {
+          logger.warn(`[SD] navWithGesture SKIPPED: out of range cur=${cur} delta=${delta} next=${next} total=${total}`);
+          return;
+        }
+        if (transitioningRef.current) {
+          logger.debug("[SD] navWithGesture BLOCKED: transitioning");
+          return;
+        }
+        transitioningRef.current = true;
+        const flyingEl = cardRefs.current.get(slidesRef.current[cur].id);
+        if (!flyingEl) {
+          transitioningRef.current = false;
+          logger.debug("[SD] navWithGesture BLOCKED: flyingEl missing");
+          reportError({ code: "NAV_MISSING_ELEMENT", message: "DOM node for gesture fly-out not found", detail: { cur, curId: slidesRef.current[cur]?.id } });
+          return;
+        }
+        const dim = navAxis === "y" ? heightRef.current : width;
+        const exitPos = delta > 0 ? -dim * 1.05 : dim * 1.05;
+        const remaining = Math.abs(exitPos - dragPos);
+        const duration = Math.max(40, Math.min(transitionMs, remaining / dim * (transitionMs * 0.6)));
+        const translate = navAxis === "y" ? `translateY(${exitPos}px)` : `translateX(${exitPos}px)`;
+        flyingEl.style.transition = `transform ${duration}ms cubic-bezier(0.25,0,0.35,1)` + (dimOnDrag ? `, opacity ${duration * 0.7}ms ease` : "");
+        flyingEl.style.transform = translate;
+        if (dimOnDrag) flyingEl.style.opacity = "0";
+        const onDone = (e) => {
+          if (e.propertyName !== "transform") return;
+          flyingEl.removeEventListener("transitionend", onDone);
+          flyingEl.style.visibility = "hidden";
+          flyingEl.style.transition = "none";
+          flyingEl.style.transform = "translateX(0)";
+          flyingEl.style.opacity = "1";
+          flyingEl.classList.remove(
+            "sd-current",
+            "sd-pull-fwd",
+            "sd-pull-back",
+            "sd-grabbing",
+            "sd-drag-pending"
+          );
+          flyingEl.style.visibility = "";
+          const afterPeek = resolvePeek(next, delta > 0 ? next + 1 : next - 1);
+          lastShownAt.current[cur] = performance.now() - 1;
+          lastShownAt.current[next] = performance.now();
+          currentRef.current = next;
+          peekRef.current = afterPeek;
+          syncLayers(next, afterPeek, flyingEl);
+          setCurrent(next);
+          setPeekIndex(afterPeek);
+          onSlideChange?.(next);
+          transitioningRef.current = false;
+          logger.debug(`[SD] navWithGesture done cur=${currentRef.current}`);
+          flushAfterNav();
+        };
+        flyingEl.addEventListener("transitionend", onDone);
+      },
+      [width, dimOnDrag, transitionMs, navAxis, resolvePeek, syncLayers, onSlideChange, flushAfterNav]
+    );
+    const snapBack = useCallback(() => {
+      const el = cardRefs.current.get(slidesRef.current[currentRef.current]?.id ?? "");
+      if (!el) return;
+      el.style.transition = `transform ${transitionMs}ms cubic-bezier(0.34,1.56,0.64,1), opacity ${Math.round(transitionMs * 0.6)}ms ease`;
+      el.style.transform = navAxis === "y" ? "translateY(0)" : "translateX(0)";
+      el.style.opacity = "1";
+      el.classList.remove("sd-pull-fwd", "sd-pull-back", "sd-grabbing", "sd-drag-pending");
+    }, [transitionMs, navAxis]);
+    const cancelDragTimer = useCallback(() => {
+      if (dragTimerRef.current !== null) {
+        clearTimeout(dragTimerRef.current);
+        dragTimerRef.current = null;
+      }
+    }, []);
+    const maxTravel = useCallback(
+      () => width * maxDragRatio,
+      [width, maxDragRatio]
+    );
+    const onPointerDown = useCallback(
+      (e) => {
+        if (dragDisabled) return;
+        const cur = currentRef.current;
+        const el = cardRefs.current.get(slidesRef.current[cur]?.id ?? "");
+        if (!el) {
+          logger.debug("[SD] onPointerDown BLOCKED: no el for cur", cur);
+          return;
+        }
+        if (transitioningRef.current) {
+          logger.debug("[SD] onPointerDown BLOCKED: transitioning");
+          return;
+        }
+        if (e.target.closest("button, a, input, select, textarea")) {
+          logger.debug("[SD] onPointerDown BLOCKED: interactive target");
+          return;
+        }
+        if (!el.contains(e.target) && e.target !== el) {
+          logger.debug("[SD] onPointerDown BLOCKED: target outside card");
+          return;
+        }
+        const targetEl = e.target;
+        const nearestStage = targetEl.closest(".sd-stage");
+        if (nearestStage && nearestStage !== e.currentTarget) {
+          logger.debug("[SD] onPointerDown BLOCKED: target inside nested sd-stage");
+          return;
+        }
+        if (navAxis === "x") {
+          try {
+            e.currentTarget.setPointerCapture(e.pointerId);
+            logger.debug("[SD] onPointerDown captured pointerId", e.pointerId, "cur", cur);
+          } catch (err) {
+            logger.warn("[SD] setPointerCapture failed:", err);
+            reportError({ code: "POINTER_CAPTURE_FAILED", message: "setPointerCapture threw \u2014 drag may not work correctly", detail: { pointerId: e.pointerId, error: String(err) } });
+          }
+        } else {
+          logger.debug("[SD] onPointerDown Y-axis: deferring capture, watching scroll boundary");
+        }
+        const scrollEl = navAxis === "y" ? el.querySelector("[data-scrollable]") ?? el : null;
+        const state = {
+          startX: e.clientX,
+          startY: e.clientY,
+          lastX: e.clientX,
+          lastY: e.clientY,
+          lastTime: performance.now(),
+          velX: 0,
+          velY: 0,
+          axis: null,
+          active: dragDelayMs <= 0,
+          pointerId: e.pointerId,
+          boundaryClaimed: false,
+          scrollEl
+        };
+        if (dragDelayMs > 0) {
+          el.classList.add("sd-drag-pending");
+          dragRef.current = state;
+          dragTimerRef.current = setTimeout(() => {
+            dragTimerRef.current = null;
+            if (dragRef.current) {
+              dragRef.current.active = true;
+              el.classList.remove("sd-drag-pending");
+              el.classList.add("sd-grabbing");
+            }
+          }, dragDelayMs);
+        } else {
+          dragRef.current = state;
+          el.classList.add("sd-grabbing");
+          e.preventDefault();
+        }
+        lastDragXRef.current = 0;
+        lastDragYRef.current = 0;
+      },
+      [dragDisabled, dragDelayMs, navAxis]
+    );
+    const onPointerMove = useCallback(
+      (e) => {
+        if (!dragRef.current?.active) return;
+        const d = dragRef.current;
+        const dx = e.clientX - d.startX;
+        const dy = e.clientY - d.startY;
+        if (navAxis === "x") {
+          if (!d.axis) {
+            if (Math.hypot(dx, dy) < 6) return;
+            d.axis = Math.abs(dx) >= Math.abs(dy) ? "x" : "y";
+          }
+          if (d.axis !== "x") return;
+          e.preventDefault();
+          const now2 = performance.now();
+          const dt2 = Math.max(now2 - d.lastTime, 1);
+          d.velX = d.velX * 0.7 + (e.clientX - d.lastX) / dt2 * 0.3;
+          d.lastX = e.clientX;
+          d.lastTime = now2;
+          const cur2 = currentRef.current;
+          const total2 = slidesRef.current.length;
+          const id2 = slidesRef.current[cur2]?.id ?? "";
+          const el2 = cardRefs.current.get(id2);
+          if (!el2) return;
+          const perm2 = dragPermissions.current.get(id2) ?? "all";
+          if (perm2 === "left" && dx > 0) return;
+          if (perm2 === "right" && dx < 0) return;
+          let x = dx;
+          if (x > 0 && cur2 === 0 || x < 0 && cur2 === total2 - 1) {
+            x = rubberBand(x, width);
+          }
+          x = clamp(x, -maxTravel(), maxTravel());
+          lastDragXRef.current = x;
+          if (userPeekOverride.current === null) {
+            const wantedPeek = x < -8 ? cur2 + 1 < total2 ? cur2 + 1 : null : x > 8 ? cur2 - 1 >= 0 ? cur2 - 1 : null : peekRef.current;
+            if (wantedPeek !== peekRef.current) {
+              peekRef.current = wantedPeek;
+              setPeekIndex(wantedPeek);
+              syncLayers(cur2, wantedPeek, el2);
+            }
+          }
+          el2.style.transition = "none";
+          el2.style.transform = `translateX(${x}px)`;
+          el2.style.opacity = dimOnDrag ? String(1 - clamp(Math.abs(x) / width * 0.28, 0, 0.28)) : "1";
+          el2.classList.toggle("sd-pull-fwd", x < -8);
+          el2.classList.toggle("sd-pull-back", x > 8);
+          return;
+        }
+        if (!d.boundaryClaimed) {
+          const sEl = d.scrollEl;
+          const atTop = !sEl || sEl.scrollTop <= 0;
+          const atBottom = !sEl || sEl.scrollTop >= sEl.scrollHeight - sEl.clientHeight - 1;
+          const pullingDown = dy > 12;
+          const pullingUp = dy < -12;
+          const canClaim = pullingDown && atTop || pullingUp && atBottom;
+          if (!canClaim) return;
+          d.boundaryClaimed = true;
+          d.startY = e.clientY;
+          d.lastY = e.clientY;
+          try {
+            e.currentTarget.setPointerCapture(d.pointerId);
+            logger.debug("[SD] Y boundary claimed, capture taken dy=", dy);
+          } catch (err) {
+            logger.warn("[SD] Y setPointerCapture failed:", err);
+            reportError({ code: "POINTER_CAPTURE_FAILED", message: "Y-axis setPointerCapture failed", detail: { error: String(err) } });
+            d.boundaryClaimed = false;
+            return;
+          }
+        }
+        e.preventDefault();
+        const now = performance.now();
+        const dt = Math.max(now - d.lastTime, 1);
+        const rawDy = e.clientY - d.startY;
+        d.velY = d.velY * 0.7 + (e.clientY - d.lastY) / dt * 0.3;
+        d.lastY = e.clientY;
+        d.lastTime = now;
+        const cur = currentRef.current;
+        const total = slidesRef.current.length;
+        const id = slidesRef.current[cur]?.id ?? "";
+        const el = cardRefs.current.get(id);
+        if (!el) return;
+        const perm = dragPermissions.current.get(id) ?? "all";
+        if (perm === "up" && rawDy > 0) return;
+        if (perm === "down" && rawDy < 0) return;
+        const dim = heightRef.current || 600;
+        let y = rawDy;
+        if (y > 0 && cur === 0 || y < 0 && cur === total - 1) {
+          y = rubberBand(y, dim);
+        }
+        y = clamp(y, -dim * maxDragRatio, dim * maxDragRatio);
+        lastDragYRef.current = y;
+        if (userPeekOverride.current === null) {
+          const wantedPeek = y < -8 ? cur + 1 < total ? cur + 1 : null : y > 8 ? cur - 1 >= 0 ? cur - 1 : null : peekRef.current;
+          if (wantedPeek !== peekRef.current) {
+            peekRef.current = wantedPeek;
+            setPeekIndex(wantedPeek);
+            syncLayers(cur, wantedPeek, el);
+          }
+        }
+        el.style.transition = "none";
+        el.style.transform = `translateY(${y}px)`;
+        el.style.opacity = dimOnDrag ? String(1 - clamp(Math.abs(y) / dim * 0.28, 0, 0.28)) : "1";
+        el.classList.toggle("sd-pull-fwd", y < -8);
+        el.classList.toggle("sd-pull-back", y > 8);
+      },
+      [width, dimOnDrag, navAxis, syncLayers, maxTravel, maxDragRatio]
+    );
+    const onPointerUp = useCallback(
+      (e) => {
+        if (!dragRef.current) return;
+        const d = dragRef.current;
+        const dx = e.clientX - d.startX;
+        const vel = d.velX;
+        const wasActive = d.active;
+        dragRef.current = null;
+        cancelDragTimer();
+        try {
+          e.currentTarget.releasePointerCapture(d.pointerId);
+        } catch (err) {
+          logger.warn("[SD] releasePointerCapture failed:", err);
+          reportError({ code: "POINTER_RELEASE_FAILED", message: "releasePointerCapture threw \u2014 future pointer events may be blocked", detail: { pointerId: d.pointerId, error: String(err) } });
+        }
+        const el = cardRefs.current.get(slidesRef.current[currentRef.current]?.id ?? "");
+        el?.classList.remove("sd-drag-pending", "sd-grabbing");
+        if (!wasActive) {
+          logger.debug("[SD] onPointerUp: drag never activated, no-op");
+          return;
+        }
+        if (transitioningRef.current) {
+          logger.debug("[SD] onPointerUp: transitioning \u2014 snapBack");
+          snapBack();
+          return;
+        }
+        const moved = Math.abs(dx) > 8;
+        const commit = moved && (Math.abs(lastDragXRef.current) >= maxTravel() - 1 || Math.abs(vel) > VELOCITY_COMMIT);
+        logger.debug(`[SD] onPointerUp dx=${dx.toFixed(1)} lastDragX=${lastDragXRef.current.toFixed(1)} vel=${vel.toFixed(3)} moved=${moved} commit=${commit}`);
+        if (commit) {
+          const delta = dx < 0 ? 1 : -1;
+          const next = currentRef.current + delta;
+          logger.debug(`[SD] onPointerUp committing delta=${delta} next=${next} total=${slidesRef.current.length}`);
+          if (next >= 0 && next < slidesRef.current.length) {
+            const flyingEl = cardRefs.current.get(slidesRef.current[currentRef.current]?.id ?? "");
+            if (flyingEl) {
+              flyingEl.style.transition = "none";
+              flyingEl.style.transform = `translateX(${lastDragXRef.current}px)`;
+            }
+            navWithGesture(delta, lastDragXRef.current);
+            return;
+          }
+          logger.debug("[SD] onPointerUp commit BLOCKED: next out of range");
+        }
+        logger.debug("[SD] onPointerUp snapBack");
+        snapBack();
+      },
+      [snapBack, navWithGesture, cancelDragTimer, maxTravel, maxDragRatio, navAxis, width, reportError]
+    );
+    useEffect(() => {
+      if (keyboardDisabled) return;
+      const h = (e) => {
+        if (e.key === "ArrowRight" || e.key === "ArrowDown") navWithVT(1);
+        if (e.key === "ArrowLeft" || e.key === "ArrowUp") navWithVT(-1);
+      };
+      window.addEventListener("keydown", h);
+      return () => window.removeEventListener("keydown", h);
+    }, [navWithVT, keyboardDisabled]);
+    useEffect(() => () => {
+      cancelDragTimer();
+    }, [cancelDragTimer]);
+    useEffect(() => {
+      if (!stageRef.current) return;
+      heightRef.current = stageRef.current.getBoundingClientRect().height;
+      const ro = new ResizeObserver((entries) => {
+        heightRef.current = entries[0]?.contentRect.height ?? heightRef.current;
+      });
+      ro.observe(stageRef.current);
+      return () => ro.disconnect();
+    }, []);
+    const execRemoveSlides = useCallback(
+      (ids, options = {}) => {
+        const { animate = true } = options;
+        if (ids.length === 0) return;
+        const list = slidesRef.current;
+        if (list.length <= 1) return;
+        const idSet = new Set(ids);
+        const allIdxs = Array.from(idSet).map((id) => list.findIndex((s) => s.id === id)).filter((i) => i !== -1);
+        if (allIdxs.length === 0) return;
+        let safeIdxs = allIdxs;
+        if (allIdxs.length >= list.length) {
+          const keepIdx = allIdxs.includes(currentRef.current) ? allIdxs.find((i) => i !== currentRef.current) ?? 0 : currentRef.current;
+          safeIdxs = allIdxs.filter((i) => i !== keepIdx);
+          if (safeIdxs.length === 0) return;
+        }
+        const safeSet = new Set(safeIdxs);
+        const curIdx = currentRef.current;
+        const curIsGone = safeSet.has(curIdx);
+        for (const i of safeIdxs) {
+          keepDomIds.current.delete(list[i].id);
+          dragPermissions.current.delete(list[i].id);
+        }
+        const nonCurIdxs = safeIdxs.filter((i) => i !== curIdx).sort((a, b) => b - a);
+        if (!curIsGone) {
+          doRemoveByIndices(nonCurIdxs);
+          return;
+        }
+        pendingRemoveIds.current.add(list[curIdx].id);
+        for (const i of nonCurIdxs) pendingRemoveIds.current.add(list[i].id);
+        if (nonCurIdxs.length > 0) doRemoveByIndices(nonCurIdxs);
+        const total = slidesRef.current.length;
+        const removeDelta = curIdx + 1 < total ? 1 : -1;
+        const removeTarget = curIdx + removeDelta;
+        logger.debug(`[SD] removeSlides curIdx=${curIdx} removeTarget=${removeTarget} transitioning=${transitioningRef.current} pendingRemoveIds.size=${pendingRemoveIds.current.size}`);
+        if (!transitioningRef.current) {
+          const nav = animate ? navWithVT : navInstant;
+          nav(removeDelta);
+        } else {
+          pendingRemoveNavTo.current = removeTarget;
+          pendingNavDelta.current = null;
+          logger.debug(`[SD] removeSlides QUEUED pendingRemoveNavTo=${removeTarget}`);
+        }
+      },
+      [navWithVT, navInstant, doRemoveByIndices, flushAfterNav]
+    );
+    useImperativeHandle(
+      externalRef,
+      () => ({
+        get currentIndex() {
+          return currentRef.current;
+        },
+        get currentSlides() {
+          return slidesRef.current;
+        },
+        addSlide(slide, options = {}) {
+          const { keepDom = false, animate = true, drag = "all" } = options;
+          if (keepDom) keepDomIds.current.add(slide.id);
+          if (drag !== "all") dragPermissions.current.set(slide.id, drag);
+          const newIdx = slidesRef.current.length;
+          setSlides((prev) => {
+            const next = [...prev, slide];
+            slidesRef.current = next;
+            lastShownAt.current.push(0);
+            return next;
+          });
+          requestAnimationFrame(() => {
+            const delta = newIdx - currentRef.current;
+            logger.debug(`[SD] addSlide rAF newIdx=${newIdx} cur=${currentRef.current} delta=${delta} animate=${animate} transitioning=${transitioningRef.current}`);
+            const nav = animate ? navWithVTRef.current : navInstantRef.current;
+            nav(delta);
+          });
+        },
+        removeSlide(id, options = {}) {
+          execRemoveSlides([id], options);
+        },
+        removeSlides(ids, options = {}) {
+          execRemoveSlides(ids, options);
+        },
+        goTo(index, options = {}) {
+          const delta = index - currentRef.current;
+          if (delta === 0) return;
+          const nav = options.instant ? navInstant : navWithVT;
+          nav(delta);
+        },
+        next(options = {}) {
+          const nav = options.instant ? navInstant : navWithVT;
+          nav(1);
+        },
+        prev(options = {}) {
+          const nav = options.instant ? navInstant : navWithVT;
+          nav(-1);
+        },
+        setPeek(index) {
+          const total = slidesRef.current.length;
+          const valid = index !== null && index >= 0 && index < total && index !== currentRef.current ? index : null;
+          userPeekOverride.current = valid;
+          if (!transitioningRef.current) {
+            const resolved = valid !== null ? valid : resolvePeek(currentRef.current, -1);
+            peekRef.current = resolved;
+            setPeekIndex(resolved);
+            syncLayers(currentRef.current, resolved);
+          }
+        }
+      }),
+      [navWithVT, navInstant, resolvePeek, syncLayers, doRemoveByIndices]
+    );
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: `sd-root${className ? " " + className : ""}`,
+        style: { width },
+        children: [
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              ref: stageRef,
+              className: "sd-stage",
+              style: { touchAction: navAxis === "y" ? "pan-y" : "none" },
+              onPointerDown,
+              onPointerMove,
+              onPointerUp,
+              onPointerCancel: onPointerUp,
+              children: [
+                /* @__PURE__ */ jsx("div", { className: "sd-sizer", "aria-hidden": "true" }),
+                slides.map((slide, i) => /* @__PURE__ */ jsx(
+                  SlideSlot,
+                  {
+                    slide,
+                    layer: layerFor(i, current, peekIndex),
+                    keepDom: keepDomIds.current.has(slide.id),
+                    dragDisabled,
+                    navAxis,
+                    refCallback: (el) => {
+                      if (el) cardRefs.current.set(slide.id, el);
+                    },
+                    children: slide.content
+                  },
+                  slide.id
+                ))
+              ]
+            }
+          ),
+          showDots && slides.length > 0 && /* @__PURE__ */ jsx("div", { className: "sd-dots", role: "tablist", "aria-label": "Slides", children: slides.map((slide, i) => /* @__PURE__ */ jsx(
+            "div",
+            {
+              role: "tab",
+              "aria-selected": i === current,
+              className: `sd-dot${i === current ? " sd-dot-active" : ""}`,
+              onClick: () => navWithVT(i - current)
+            },
+            slide.id
+          )) })
+        ]
+      }
+    );
+  }
+);
+var index_default = SwipeDeck;
+
+export { index_default as default };
+//# sourceMappingURL=index.mjs.map
+//# sourceMappingURL=index.mjs.map