@surdeddd/bottom-sheet 0.12.0 → 0.14.0

package/dist/solid.source.jsx

@@ -9,7 +9,7 @@ import {
   Show
 } from "solid-js";
 
-// src/core/lifecycle/sheetStack.ts
+// src/core/lifecycle/sheet-stack.ts
 var BASE_Z = 100;
 var STEP = 10;
 var SheetStack = class {
@@ -132,7 +132,7 @@ function createEventBus() {
   };
 }
 
-// src/core/primitives/cssLength.ts
+// src/core/primitives/css-length.ts
 var probe = null;
 var PROBE_ATTR = "data-bs-probe";
 var ensureProbe = (axis) => {
@@ -186,7 +186,7 @@ var resolveSnap = (point, mode, measureFit) => {
   return Math.max(0, el.getBoundingClientRect().width);
 };
 
-// src/core/primitives/devWarn.ts
+// src/core/primitives/dev-warn.ts
 function devWarn(...args) {
   if (typeof process !== "undefined" && process.env && process.env.NODE_ENV !== "production" && typeof console !== "undefined") {
     console.warn(...args);
@@ -354,74 +354,6 @@ var SnapResolver = class {
   }
 };
 
-// src/core/features/persist.ts
-function readPersistedId(key) {
-  if (!key) return null;
-  if (typeof window === "undefined") return null;
-  if (typeof localStorage === "undefined") return null;
-  try {
-    return localStorage.getItem(key);
-  } catch {
-    return null;
-  }
-}
-function installPersist(engine, key) {
-  const unsubscribe = engine.on("snap", ({ id }) => {
-    if (typeof window === "undefined") return;
-    if (typeof localStorage === "undefined") return;
-    try {
-      localStorage.setItem(key, id);
-    } catch {
-    }
-  });
-  return unsubscribe;
-}
-
-// src/core/features/auto-collapse.ts
-function installAutoCollapse(deps) {
-  const { ms } = deps;
-  if (ms === void 0 || ms <= 0) {
-    return () => {
-    };
-  }
-  let timer = null;
-  const clearTimer = () => {
-    if (timer !== null) {
-      clearTimeout(timer);
-      timer = null;
-    }
-  };
-  const fire = () => {
-    if (deps.isDestroyed()) return;
-    if (deps.isDragging()) return;
-    const active = deps.resolveSnap(deps.getActiveId());
-    if (!active || active.size === 0) return;
-    let target = null;
-    for (const id of deps.getAllowedIds()) {
-      const snap = deps.resolveSnap(id);
-      if (!snap || snap.size <= 0) continue;
-      if (!target || snap.size < target.size) target = snap;
-    }
-    if (!target) return;
-    if (target.id === active.id || target.size >= active.size) return;
-    deps.snapTo(target.id);
-  };
-  const reset = () => {
-    clearTimer();
-    if (deps.isDestroyed()) return;
-    timer = setTimeout(() => {
-      timer = null;
-      fire();
-    }, ms);
-  };
-  const unsubscribe = deps.on("snap", () => reset());
-  if ((deps.resolveSnap(deps.getActiveId())?.size ?? 0) > 0) reset();
-  return () => {
-    clearTimer();
-    unsubscribe();
-  };
-}
-
 // src/core/features/linked-sheets.ts
 function notifyLinkedSheets(sheets, self) {
   if (sheets.length === 0) return;
@@ -444,394 +376,65 @@ function notifyLinkedSheets(sheets, self) {
   }
 }
 
-// src/core/features/history-coordinator.ts
-var entries = [];
-var subscribers = /* @__PURE__ */ new Set();
-var suppress = 0;
-var internalDepth = 0;
-var pendingRebrand = null;
-var listenerInstalled = false;
-var patchInstalled = false;
-var origPushState = null;
-var origReplaceState = null;
-var patchedPushState = null;
-var patchedReplaceState = null;
-var hasWindow = () => typeof window !== "undefined";
-var hasHistory = () => typeof history !== "undefined";
-var brandMarker = (surface) => ({
-  ...surface.markerState(),
-  __bs: true
-});
-var runInternal = (fn) => {
-  internalDepth += 1;
-  try {
-    fn();
-  } finally {
-    internalDepth -= 1;
-  }
-};
-var notifyRouteChange = () => {
-  const snapshot = Array.from(subscribers);
-  for (const fn of snapshot) fn();
-};
-var ensureListener = () => {
-  if (listenerInstalled || !hasWindow()) return;
-  window.addEventListener("popstate", onPopState);
-  listenerInstalled = true;
-};
-var maybeTeardownListener = () => {
-  if (!listenerInstalled) return;
-  if (entries.length > 0 || subscribers.size > 0 || suppress > 0) return;
-  if (hasWindow()) window.removeEventListener("popstate", onPopState);
-  listenerInstalled = false;
-};
-var installPatch = () => {
-  if (patchInstalled || !hasHistory()) return;
-  origPushState = history.pushState;
-  origReplaceState = history.replaceState;
-  patchedPushState = function(...args) {
-    origPushState.apply(this, args);
-    if (internalDepth === 0) notifyRouteChange();
-  };
-  patchedReplaceState = function(...args) {
-    origReplaceState.apply(this, args);
-    if (internalDepth === 0) notifyRouteChange();
-  };
-  history.pushState = patchedPushState;
-  history.replaceState = patchedReplaceState;
-  patchInstalled = true;
-};
-var removePatch = () => {
-  if (!patchInstalled) return;
-  if (history.pushState === patchedPushState && origPushState) {
-    history.pushState = origPushState;
-  }
-  if (history.replaceState === patchedReplaceState && origReplaceState) {
-    history.replaceState = origReplaceState;
-  }
-  origPushState = null;
-  origReplaceState = null;
-  patchedPushState = null;
-  patchedReplaceState = null;
-  patchInstalled = false;
-};
-function onPopState() {
-  if (suppress > 0) {
-    suppress -= 1;
-    const rebrand = pendingRebrand;
-    pendingRebrand = null;
-    if (rebrand) rebrand();
-    maybeTeardownListener();
-    return;
-  }
-  if (entries.length === 0) {
-    notifyRouteChange();
-    maybeTeardownListener();
-    return;
+// src/core/features/resize-observer.ts
+function installResizeObserver(deps) {
+  if (typeof window === "undefined") {
+    return () => {
+    };
   }
-  let target = null;
-  let targetIdx = -1;
-  for (let i = entries.length - 1; i >= 0; i -= 1) {
-    const entry = entries[i];
-    if (!entry.surface.isOpen()) continue;
-    if (!target) {
-      target = entry;
-      targetIdx = i;
+  const onResize = () => {
+    if (deps.isDestroyed()) return;
+    deps.recomputeSnaps();
+    const mode = deps.getMode();
+    const isVerticalAxis = mode === "bottom" || mode === "top";
+    const viewportSize2 = isVerticalAxis ? window.innerHeight : window.innerWidth;
+    const max = deps.getMaxAxisSize();
+    if (viewportSize2 > 0 && viewportSize2 < max) {
+      deps.setMaxAxisSize(viewportSize2);
     }
-    if (entry.surface.isTop()) {
-      target = entry;
-      targetIdx = i;
-      break;
+    const wasAnimating = deps.isAnimating?.() ?? false;
+    deps.cancelInFlight();
+    deps.newCycle();
+    const current = deps.resolveActiveSnap();
+    const newMax = deps.getMaxAxisSize();
+    const targetSize = current ? Math.min(current.size, newMax) : Math.min(deps.getSize(), newMax);
+    deps.setSize(targetSize);
+    if (current && !deps.isDragging()) {
+      deps.applySize(targetSize);
+      if (wasAnimating) deps.resyncAfterCancel?.();
     }
+  };
+  let resizeObserver = null;
+  if (typeof ResizeObserver !== "undefined") {
+    resizeObserver = new ResizeObserver(onResize);
+    resizeObserver.observe(document.documentElement);
+  } else {
+    window.addEventListener("resize", onResize);
   }
-  if (!target) {
-    const removed = entries.pop();
-    if (removed) removed.live = false;
-    maybeTeardownListener();
-    return;
-  }
-  target.live = false;
-  entries.splice(targetIdx, 1);
-  const settled = target;
-  void Promise.resolve(settled.surface.close()).then(() => {
-    if (settled.surface.isOpen()) restore(settled);
-  });
-  maybeTeardownListener();
+  window.addEventListener("orientationchange", onResize);
+  const onVisibility = () => {
+    if (deps.isDestroyed()) return;
+    if (document.hidden) deps.cancelInFlight();
+  };
+  document.addEventListener("visibilitychange", onVisibility);
+  return () => {
+    resizeObserver?.disconnect();
+    window.removeEventListener("resize", onResize);
+    window.removeEventListener("orientationchange", onResize);
+    document.removeEventListener("visibilitychange", onVisibility);
+  };
 }
-function restore(entry) {
-  if (!hasWindow() || !hasHistory()) return;
-  entry.live = true;
-  runInternal(() => {
-    try {
-      history.pushState(brandMarker(entry.surface), "", entry.surface.url);
-    } catch {
-      entry.live = false;
-    }
-  });
-  if (entry.live) {
-    entries.push(entry);
-    ensureListener();
-  }
-}
-function pushBackMarker(surface) {
-  const entry = { surface, priorUrl: void 0, live: false };
-  if (!hasWindow() || !hasHistory()) {
-    return entry;
-  }
-  entry.priorUrl = surface.url !== void 0 ? location.href : void 0;
-  runInternal(() => {
-    try {
-      history.pushState(brandMarker(surface), "", surface.url);
-      entry.live = true;
-    } catch {
-      entry.live = false;
-    }
-  });
-  if (entry.live) {
-    entries.push(entry);
-    ensureListener();
-  }
-  return entry;
-}
-function popBackMarker(handle) {
-  if (!hasWindow() || !hasHistory()) return;
-  const entry = handle;
-  const idx = entries.indexOf(entry);
-  if (idx === -1 || !entry.live) return;
-  const last = entries.length - 1;
-  entry.live = false;
-  entries.splice(idx, 1);
-  if (idx !== last) {
-    const rebrandSurface = entries[entries.length - 1].surface;
-    const rebrandUrl = entry.priorUrl;
-    pendingRebrand = () => {
-      runInternal(() => {
-        history.replaceState(
-          brandMarker(rebrandSurface),
-          "",
-          rebrandUrl !== void 0 ? rebrandUrl : location.href
-        );
-      });
-    };
-  }
-  suppress += 1;
-  runInternal(() => {
-    try {
-      history.back();
-    } catch {
-      suppress = Math.max(0, suppress - 1);
-      pendingRebrand = null;
-    }
-  });
-  maybeTeardownListener();
-}
-function subscribeRouteChange(fn) {
-  if (!hasWindow() || !hasHistory()) return () => {
-  };
-  subscribers.add(fn);
-  if (subscribers.size === 1) installPatch();
-  ensureListener();
-  return () => {
-    if (!subscribers.has(fn)) return;
-    subscribers.delete(fn);
-    if (subscribers.size === 0) removePatch();
-    maybeTeardownListener();
-  };
-}
-
-// src/core/features/route.ts
-function installRoute(deps) {
-  if (typeof window === "undefined") {
-    return () => {
-    };
-  }
-  if (!deps.routedTo && !deps.closeOnBack) {
-    return () => {
-    };
-  }
-  let handle = null;
-  const onOpen = () => {
-    if (handle) return;
-    handle = pushBackMarker({
-      isOpen: () => !deps.isDestroyed() && deps.getSize() > 0,
-      isTop: deps.isTopSheet,
-      close: deps.close,
-      markerState: () => deps.routedTo !== void 0 ? { __bsRouted: deps.sheetId } : { __bsSheet: deps.sheetId },
-      url: deps.routedTo
-    });
-  };
-  const onClose = () => {
-    if (!handle) return;
-    popBackMarker(handle);
-    handle = null;
-  };
-  const unsubscribeOpen = deps.on("open", onOpen);
-  const unsubscribeClose = deps.on("close", onClose);
-  if (deps.getSize() > 0) onOpen();
-  return () => {
-    unsubscribeOpen();
-    unsubscribeClose();
-    if (handle) {
-      popBackMarker(handle);
-      handle = null;
-    }
-  };
-}
-function installRouteChange(deps) {
-  return subscribeRouteChange(() => {
-    if (deps.isDestroyed() || deps.getSize() <= 0) return;
-    void deps.close();
-  });
-}
-
-// src/core/features/content-swipe.ts
-var CONTENT_PULL_THRESHOLD = 60;
-function installContentSwipe(deps) {
-  const { container } = deps;
-  let startY = 0;
-  let startScrollTop = 0;
-  let moved = false;
-  const onTouchStart = (e) => {
-    const t = e.touches[0];
-    if (!t) return;
-    startY = t.clientY;
-    startScrollTop = container.scrollTop;
-    moved = false;
-  };
-  const onTouchMove = (e) => {
-    const t = e.touches[0];
-    if (!t) return;
-    if (Math.abs(t.clientY - startY) > CONTENT_PULL_THRESHOLD) moved = true;
-  };
-  const onTouchEnd = (e) => {
-    if (!moved) return;
-    if (deps.isDragging() || deps.isAnimating()) return;
-    if (container.scrollTop !== startScrollTop) return;
-    const t = e.changedTouches[0];
-    if (!t) return;
-    const deltaY = t.clientY - startY;
-    const atTop = container.scrollTop <= 0;
-    const allowed = deps.getAllowedIds();
-    const idx = allowed.indexOf(deps.getActiveId());
-    if (idx === -1) return;
-    if (atTop && deltaY > CONTENT_PULL_THRESHOLD && idx > 0) {
-      deps.snapTo(allowed[idx - 1]);
-    } else if (deltaY < -CONTENT_PULL_THRESHOLD && idx < allowed.length - 1) {
-      deps.snapTo(allowed[idx + 1]);
-    }
-  };
-  container.addEventListener("touchstart", onTouchStart, { passive: true });
-  container.addEventListener("touchmove", onTouchMove, { passive: true });
-  container.addEventListener("touchend", onTouchEnd, { passive: true });
-  return () => {
-    container.removeEventListener("touchstart", onTouchStart);
-    container.removeEventListener("touchmove", onTouchMove);
-    container.removeEventListener("touchend", onTouchEnd);
-  };
-}
-
-// src/core/features/visual-viewport.ts
-var SAFETY_PAD = 8;
-function installVisualViewport(deps) {
-  if (typeof window === "undefined" || !window.visualViewport) {
-    return () => {
-    };
-  }
-  const vv = window.visualViewport;
-  let rafId = null;
-  const onResize = () => {
-    if (rafId !== null) return;
-    rafId = requestAnimationFrame(() => {
-      rafId = null;
-      if (deps.isDestroyed()) return;
-      deps.recomputeSnaps();
-      const isVertical = deps.isVerticalAxis();
-      const visible = isVertical ? vv.height : vv.width;
-      const windowSize = isVertical ? window.innerHeight : window.innerWidth;
-      const clamp = Math.max(0, Math.min(windowSize, visible) - SAFETY_PAD);
-      if (clamp < deps.getMaxAxisSize()) {
-        deps.setMaxAxisSize(clamp);
-      }
-      const wasAnimating = deps.isAnimating?.() ?? false;
-      deps.cancelInFlight();
-      deps.newCycle();
-      const max = deps.getMaxAxisSize();
-      deps.setSize(Math.min(deps.getSize(), max));
-      const current = deps.resolveActiveSnap();
-      if (current && !deps.isDragging()) {
-        deps.applySize(Math.min(current.size, max));
-        if (wasAnimating) deps.resyncAfterCancel?.();
-      } else {
-        deps.applySize(deps.getSize());
-      }
-    });
-  };
-  vv.addEventListener("resize", onResize);
-  return () => {
-    vv.removeEventListener("resize", onResize);
-    if (rafId !== null) cancelAnimationFrame(rafId);
-  };
-}
-
-// src/core/features/resize-observer.ts
-function installResizeObserver(deps) {
-  if (typeof window === "undefined") {
-    return () => {
-    };
-  }
-  const onResize = () => {
-    if (deps.isDestroyed()) return;
-    deps.recomputeSnaps();
-    const mode = deps.getMode();
-    const isVerticalAxis = mode === "bottom" || mode === "top";
-    const viewportSize2 = isVerticalAxis ? window.innerHeight : window.innerWidth;
-    const max = deps.getMaxAxisSize();
-    if (viewportSize2 > 0 && viewportSize2 < max) {
-      deps.setMaxAxisSize(viewportSize2);
-    }
-    const wasAnimating = deps.isAnimating?.() ?? false;
-    deps.cancelInFlight();
-    deps.newCycle();
-    const current = deps.resolveActiveSnap();
-    const newMax = deps.getMaxAxisSize();
-    const targetSize = current ? Math.min(current.size, newMax) : Math.min(deps.getSize(), newMax);
-    deps.setSize(targetSize);
-    if (current && !deps.isDragging()) {
-      deps.applySize(targetSize);
-      if (wasAnimating) deps.resyncAfterCancel?.();
-    }
-  };
-  let resizeObserver = null;
-  if (typeof ResizeObserver !== "undefined") {
-    resizeObserver = new ResizeObserver(onResize);
-    resizeObserver.observe(document.documentElement);
-  } else {
-    window.addEventListener("resize", onResize);
-  }
-  window.addEventListener("orientationchange", onResize);
-  const onVisibility = () => {
-    if (deps.isDestroyed()) return;
-    if (document.hidden) deps.cancelInFlight();
-  };
-  document.addEventListener("visibilitychange", onVisibility);
-  return () => {
-    resizeObserver?.disconnect();
-    window.removeEventListener("resize", onResize);
-    window.removeEventListener("orientationchange", onResize);
-    document.removeEventListener("visibilitychange", onVisibility);
-  };
-}
-
-// src/core/features/fit-observer.ts
-var contentTargets = (scroller) => {
-  if (!scroller) return [];
-  const hasSlot = typeof HTMLSlotElement !== "undefined";
-  const out = [];
-  for (const child of Array.from(scroller.children)) {
-    if (hasSlot && child instanceof HTMLSlotElement) {
-      for (const el of child.assignedElements()) out.push(el);
-    } else {
-      out.push(child);
+
+// src/core/features/fit-observer.ts
+var contentTargets = (scroller) => {
+  if (!scroller) return [];
+  const hasSlot = typeof HTMLSlotElement !== "undefined";
+  const out = [];
+  for (const child of Array.from(scroller.children)) {
+    if (hasSlot && child instanceof HTMLSlotElement) {
+      for (const el of child.assignedElements()) out.push(el);
+    } else {
+      out.push(child);
     }
   }
   return out;
@@ -1671,6 +1274,52 @@ function resolveAnimationPreset(animation) {
   }
 }
 
+// src/core/animation/waapi-settle.ts
+var SIM_HZ = 240;
+var SAMPLE_STRIDE = 4;
+var MAX_SIM_MS = 3e3;
+function sampleSpringSettle(from, to, velocityPxPerS, config) {
+  const cfg = { ...DEFAULT_SPRING, ...config };
+  const subDt = 1 / SIM_HZ;
+  const stepMs = SAMPLE_STRIDE / SIM_HZ * 1e3;
+  const maxSteps = Math.ceil(MAX_SIM_MS / 1e3 * SIM_HZ);
+  const values = [from];
+  let x = from;
+  let v = velocityPxPerS;
+  for (let i = 1; i <= maxSteps; i += 1) {
+    const force = -cfg.stiffness * (x - to) - cfg.damping * v;
+    v += force / cfg.mass * subDt;
+    x += v * subDt;
+    if (!Number.isFinite(x) || !Number.isFinite(v)) {
+      values.push(to);
+      break;
+    }
+    if (i % SAMPLE_STRIDE === 0) values.push(x);
+    const atRest = Math.abs(to - x) < (cfg.restDelta ?? 0.5) && Math.abs(v) < (cfg.restSpeed ?? 0.5);
+    if (atRest) break;
+  }
+  if (values[values.length - 1] !== to) values.push(to);
+  return {
+    values,
+    stepMs,
+    durationMs: (values.length - 1) * stepMs
+  };
+}
+function sampleTweenSettle(from, to, durationMs, easing) {
+  const count = Math.max(2, Math.min(60, Math.round(durationMs / 16)));
+  const values = [];
+  for (let i = 0; i <= count; i += 1) {
+    const t = i / count;
+    values.push(from + (to - from) * easing(t));
+  }
+  values[values.length - 1] = to;
+  return {
+    values,
+    stepMs: durationMs / count,
+    durationMs
+  };
+}
+
 // src/core/controllers/animation-runner.ts
 var DEFAULT_DURATION2 = 220;
 var VELOCITY_PX_PER_S = 1e3;
@@ -1680,6 +1329,10 @@ var AnimationRunner = class {
   applySizeFn;
   getSize;
   isDragging;
+  applyAux;
+  getTransformFor;
+  settleWaapi;
+  currentWaapi = null;
   animationKind;
   springConfig;
   duration;
@@ -1696,6 +1349,9 @@ var AnimationRunner = class {
     this.applySizeFn = deps.applySize;
     this.getSize = deps.getSize;
     this.isDragging = deps.isDragging;
+    this.applyAux = deps.applyAux;
+    this.getTransformFor = deps.getTransformFor;
+    this.settleWaapi = opts.settleAnimation === "waapi";
     const preset = resolveAnimationPreset(opts.animation);
     this.animationKind = preset.kind;
     this.duration = opts.duration ?? preset.duration ?? DEFAULT_DURATION2;
@@ -1720,11 +1376,20 @@ var AnimationRunner = class {
     }
   }
   get isAnimating() {
-    return this.currentTween !== null || this.currentSpring !== null;
+    return this.currentTween !== null || this.currentSpring !== null || this.currentWaapi !== null;
   }
   cancel() {
     this.currentTween?.cancel();
     this.currentSpring?.cancel();
+    if (this.currentWaapi) {
+      const entry = this.currentWaapi;
+      this.currentWaapi = null;
+      entry.stop();
+      try {
+        entry.anim.cancel();
+      } catch {
+      }
+    }
   }
   async animateTo(target, velocityPxPerMs) {
     if (target === this.getSize()) {
@@ -1743,6 +1408,27 @@ var AnimationRunner = class {
       if (!this.isDragging()) this.element.style.willChange = "";
       return;
     }
+    if (this.settleWaapi && this.applyAux && this.getTransformFor && typeof this.element.animate === "function") {
+      const samples = this.animationKind === "spring" ? sampleSpringSettle(
+        this.getSize(),
+        target,
+        velocityPxPerMs * VELOCITY_PX_PER_S,
+        this.springConfig
+      ) : sampleTweenSettle(
+        this.getSize(),
+        target,
+        this.duration,
+        this.easing
+      );
+      if (samples.values.length >= 2 && samples.durationMs > 0) {
+        await this.runWaapiSettle(samples, target);
+        if (!this.isAnimating) {
+          this.getRootEl()?.removeAttribute("data-animating");
+          if (!this.isDragging()) this.element.style.willChange = "";
+        }
+        return;
+      }
+    }
     if (this.animationKind === "spring") {
       const spring = runSpring({
         from: this.getSize(),
@@ -1771,15 +1457,70 @@ var AnimationRunner = class {
       if (!this.isDragging()) this.element.style.willChange = "";
     }
   }
+  async runWaapiSettle(samples, target) {
+    const applyAux = this.applyAux;
+    const getTransformFor = this.getTransformFor;
+    const frames = samples.values.map((v) => ({
+      transform: getTransformFor(v)
+    }));
+    const anim = this.element.animate(frames, {
+      duration: samples.durationMs,
+      easing: "linear",
+      fill: "forwards"
+    });
+    let stopped = false;
+    let auxRaf = 0;
+    const start = performance.now();
+    const lastIdx = samples.values.length - 1;
+    const auxTick = () => {
+      if (stopped) return;
+      const elapsed = performance.now() - start;
+      const idx = Math.min(Math.floor(elapsed / samples.stepMs), lastIdx);
+      applyAux(samples.values[idx]);
+      auxRaf = requestAnimationFrame(auxTick);
+    };
+    auxRaf = requestAnimationFrame(auxTick);
+    const entry = {
+      anim,
+      stop: () => {
+        stopped = true;
+        cancelAnimationFrame(auxRaf);
+      }
+    };
+    this.currentWaapi = entry;
+    try {
+      await anim.finished;
+    } catch {
+    }
+    entry.stop();
+    const wasCurrent = this.currentWaapi === entry;
+    if (wasCurrent) this.currentWaapi = null;
+    if (wasCurrent && anim.playState === "finished") {
+      this.applySizeFn(target);
+      try {
+        anim.cancel();
+      } catch {
+      }
+    }
+  }
   destroy() {
     this.detachReducedMotion?.();
     this.detachReducedMotion = null;
     this.currentTween = null;
     this.currentSpring = null;
+    if (this.currentWaapi) {
+      const entry = this.currentWaapi;
+      this.currentWaapi = null;
+      entry.stop();
+      try {
+        entry.anim.cancel();
+      } catch {
+      }
+    }
   }
 };
 
-// src/core/lifecycle/focusTrap.ts
+// src/core/lifecycle/focus-trap.ts
 var FOCUSABLE = [
   "a[href]",
   "area[href]",
@@ -1897,7 +1638,7 @@ var installFocusTrap = (container, options = {}) => {
   };
 };
 
-// src/core/lifecycle/scrollLock.ts
+// src/core/lifecycle/scroll-lock.ts
 var lockCount = 0;
 var savedStyles = null;
 var lockBodyScroll = () => {
@@ -2079,30 +1820,44 @@ var SampleRing = class {
     this.size = 0;
   }
 };
-var installGestures = (handle, mode, callbacks) => {
+var installGestures = (handle, mode, callbacks, options = {}) => {
   let activePointerId = null;
   let activePointerType = "touch";
   let startCoord = 0;
   let lastCoord = 0;
+  let pendingStart = false;
   const VELOCITY_WINDOW_MS = (kind) => kind === "mouse" ? 160 : 120;
   const MAX_SAMPLES = 32;
   const samples = new SampleRing(MAX_SAMPLES);
   const axis = isAxisVertical(mode) ? "Y" : "X";
   const sign = mode === "bottom" || mode === "right" ? -1 : 1;
   const coordOf = (e) => axis === "Y" ? e.clientY : e.clientX;
+  const capture = (pointerId) => {
+    try {
+      handle.setPointerCapture(pointerId);
+    } catch {
+    }
+  };
+  const releaseTracking = () => {
+    activePointerId = null;
+    pendingStart = false;
+    samples.reset();
+  };
   const onPointerDown = (e) => {
     if (activePointerId !== null) return;
     if (e.button !== void 0 && e.button !== 0) return;
+    if (options.shouldStart && !options.shouldStart(e)) return;
     activePointerId = e.pointerId;
     activePointerType = e.pointerType || "touch";
     startCoord = coordOf(e);
     lastCoord = startCoord;
     samples.reset();
     samples.push(e.timeStamp, startCoord);
-    try {
-      handle.setPointerCapture(e.pointerId);
-    } catch {
+    if (options.deferStart) {
+      pendingStart = true;
+      return;
     }
+    capture(e.pointerId);
     callbacks.onStart(startCoord, activePointerType);
   };
   const onPointerMove = (e) => {
@@ -2110,6 +1865,22 @@ var installGestures = (handle, mode, callbacks) => {
     const coord = coordOf(e);
     const rawDelta = coord - startCoord;
     const delta = rawDelta * sign;
+    if (pendingStart) {
+      const verdict = options.deferStart(e, delta);
+      if (verdict === false) {
+        releaseTracking();
+        return;
+      }
+      if (verdict !== true) return;
+      pendingStart = false;
+      startCoord = coord;
+      lastCoord = coord;
+      samples.reset();
+      samples.push(e.timeStamp, coord);
+      capture(e.pointerId);
+      callbacks.onStart(startCoord, activePointerType);
+      return;
+    }
     lastCoord = coord;
     samples.push(e.timeStamp, coord);
     const cutoff = e.timeStamp - VELOCITY_WINDOW_MS(activePointerType);
@@ -2118,6 +1889,10 @@ var installGestures = (handle, mode, callbacks) => {
   };
   const finishGesture = (e) => {
     if (e.pointerId !== activePointerId) return;
+    if (pendingStart) {
+      releaseTracking();
+      return;
+    }
     const rawDelta = lastCoord - startCoord;
     const delta = rawDelta * sign;
     let velocity = 0;
@@ -2140,22 +1915,26 @@ var installGestures = (handle, mode, callbacks) => {
   };
   const onPointerCancel = (e) => {
     if (e.pointerId !== activePointerId) return;
-    activePointerId = null;
-    samples.reset();
+    const wasPending = pendingStart;
+    releaseTracking();
+    if (wasPending) return;
     callbacks.onCancel?.();
   };
   handle.addEventListener("pointerdown", onPointerDown);
   handle.addEventListener("pointermove", onPointerMove);
   handle.addEventListener("pointerup", finishGesture);
   handle.addEventListener("pointercancel", onPointerCancel);
+  const managesTouchAction = options.manageTouchAction !== false;
   const prevTouchAction = handle.style.touchAction;
-  handle.style.touchAction = isAxisVertical(mode) ? "pan-x" : "pan-y";
+  if (managesTouchAction) {
+    handle.style.touchAction = isAxisVertical(mode) ? "pan-x" : "pan-y";
+  }
   return () => {
     handle.removeEventListener("pointerdown", onPointerDown);
     handle.removeEventListener("pointermove", onPointerMove);
     handle.removeEventListener("pointerup", finishGesture);
     handle.removeEventListener("pointercancel", onPointerCancel);
-    handle.style.touchAction = prevTouchAction;
+    if (managesTouchAction) handle.style.touchAction = prevTouchAction;
     if (activePointerId !== null && handle.hasPointerCapture(activePointerId)) {
       handle.releasePointerCapture(activePointerId);
     }
@@ -2274,7 +2053,7 @@ var GestureController = class {
         const restoreTo = this.dragStartSize;
         void this.deps.animateTo(restoreTo, 0);
       }
-    });
+    }, this.deps.gestureOptions);
     return this.detach;
   }
   forceClearDragState() {
@@ -2286,6 +2065,41 @@ var GestureController = class {
   }
 };
 
+// src/core/primitives/drag-zones.ts
+var DRAG_ZONE_SELECTOR = "[data-bs-drag]";
+var NO_DRAG_SELECTOR = "[data-bs-no-drag]";
+var asElement = (target) => {
+  const candidate = target;
+  return candidate && typeof candidate.closest === "function" ? candidate : null;
+};
+function isDragAllowedFrom(target, mode) {
+  const el = asElement(target);
+  if (!el) return mode !== "zones";
+  if (el.closest(NO_DRAG_SELECTOR)) return false;
+  if (mode === "zones") return el.closest(DRAG_ZONE_SELECTOR) !== null;
+  return true;
+}
+
+// src/core/primitives/content-gesture.ts
+var CONTENT_DRAG_SLOP = 6;
+function decideContentGesture(input) {
+  const slop = input.slop ?? CONTENT_DRAG_SLOP;
+  if (Math.abs(input.delta) < slop) return "pending";
+  if (input.scrollTop > 0) return "scroll";
+  if (input.delta > 0 && input.atMaxSnap) return "scroll";
+  return "drag";
+}
+
+// src/core/primitives/touch-scroll-guard.ts
+function installTouchScrollGuard(surface, isDragging) {
+  const onTouchMove = (e) => {
+    if (!isDragging()) return;
+    if (e.cancelable) e.preventDefault();
+  };
+  surface.addEventListener("touchmove", onTouchMove, { passive: false });
+  return () => surface.removeEventListener("touchmove", onTouchMove);
+}
+
 // src/core/primitives/aria-slider-writer.ts
 var AriaSliderWriter = class {
   constructor(handle, mode) {
@@ -2633,7 +2447,7 @@ function resolveEngineOptions(opts, extras) {
   const initialAllowed = opts.allowed ?? opts.snapPoints.map((p) => p.id);
   let initialId = opts.initial ?? initialAllowed[0] ?? opts.snapPoints[0]?.id ?? "default";
   if (opts.persistKey) {
-    const restored = readPersistedId(opts.persistKey);
+    const restored = readPersistedIdSafe(opts.persistKey);
     if (restored && initialAllowed.includes(restored)) {
       initialId = restored;
     }
@@ -2642,6 +2456,8 @@ function resolveEngineOptions(opts, extras) {
     mode: opts.mode ?? "bottom",
     flickVelocity: opts.flickVelocity ?? DEFAULT_FLICK_VELOCITY,
     dragThreshold: opts.dragThreshold ?? DEFAULT_DRAG_THRESHOLD,
+    dragFrom: opts.dragFrom ?? (opts.handle ? "handle" : "sheet"),
+    dragFromContent: opts.dragFromContent ?? true,
     rubberBandEnabled: opts.rubberBand ?? true,
     closeOnBack: opts.closeOnBack ?? false,
     persistent: opts.persistent ?? false,
@@ -2664,6 +2480,7 @@ function resolveEngineOptions(opts, extras) {
     },
     animation: {
       animation: opts.animation,
+      settleAnimation: opts.settleAnimation,
       duration: opts.duration,
       easing: opts.easing,
       spring: opts.spring,
@@ -2681,6 +2498,15 @@ function resolveEngineOptions(opts, extras) {
     }
   };
 }
+var readPersistedIdSafe = (key) => {
+  if (typeof window === "undefined") return null;
+  if (typeof localStorage === "undefined") return null;
+  try {
+    return localStorage.getItem(key);
+  } catch {
+    return null;
+  }
+};
 
 // src/core/primitives/teardown-stack.ts
 var TeardownStack = class {
@@ -2701,9 +2527,9 @@ var TeardownStack = class {
   }
 };
 
-// src/core/BottomSheetEngine.ts
+// src/core/BottomSheetCore.ts
 var HAPTIC_DURATION_MS = 8;
-var BottomSheetEngine = class {
+var BottomSheetCore = class {
   id = nextInstanceId("bs");
   element;
   handle;
@@ -2714,6 +2540,8 @@ var BottomSheetEngine = class {
   mode;
   flickVelocity;
   dragThreshold;
+  dragFromMode;
+  dragFromContentDefault;
   rubberBandEnabled;
   scrim;
   aria;
@@ -2731,8 +2559,11 @@ var BottomSheetEngine = class {
   activeId;
   size = 0;
   gesture;
+  contentGesture;
+  detachSheetGesture = null;
   rootEl = null;
   destroyed = false;
+  restClosed = false;
   currentViewTransition = null;
   currentAbort = new AbortController();
   sizeWriteSentinel = new WriteSentinel();
@@ -2763,6 +2594,8 @@ var BottomSheetEngine = class {
   stackEffectPrimed = false;
   fitDeps;
   transformTemplate;
+  featureList = [];
+  featureCtx;
   constructor(opts) {
     const resolved = resolveEngineOptions(opts, {
       shouldApplyInertSiblings: () => {
@@ -2784,6 +2617,8 @@ var BottomSheetEngine = class {
     this.aria = new AriaSliderWriter(this.handle, this.mode);
     this.flickVelocity = resolved.flickVelocity;
     this.dragThreshold = resolved.dragThreshold;
+    this.dragFromMode = resolved.dragFrom;
+    this.dragFromContentDefault = resolved.dragFromContent;
     this.rubberBandEnabled = resolved.rubberBandEnabled;
     this.scrim = new ScrimController(
       {
@@ -2810,7 +2645,9 @@ var BottomSheetEngine = class {
         getRootEl: () => this.rootEl,
         applySize: (size) => this.applySize(size),
         getSize: () => this.size,
-        isDragging: () => this.gesture?.isDragging ?? false
+        isDragging: () => this.isDraggingAny(),
+        applyAux: (size) => this.applySize(size, true),
+        getTransformFor: (size) => this.transformTemplate(this.snaps.getMaxAxisSize() - size)
       },
       resolved.animation
     );
@@ -2833,6 +2670,11 @@ var BottomSheetEngine = class {
     if (opts.linkedSheets) {
       this.linkedSheets = opts.linkedSheets;
     }
+    const byName = /* @__PURE__ */ new Map();
+    for (const feature of opts.features ?? []) {
+      byName.set(feature.name, feature);
+    }
+    this.featureList = Array.from(byName.values());
     this.activeId = resolved.initialId;
     auditVhUsage(this.snapPointsRaw);
     this.auditDuplicateSnapIds(this.snapPointsRaw);
@@ -2864,11 +2706,13 @@ var BottomSheetEngine = class {
     const initial = this.snaps.findById(this.activeId);
     if (initial) this.size = initial.size;
     this.applySize(this.size);
+    this.setRestClosed(this.size === 0);
     this.updateAriaSlider();
     this.scrollCache = createScrollCache({
       scrollContainer: this.scrollContainer,
       getMaxAxisSize: () => this.snaps.getMaxAxisSize()
     });
+    this.featureCtx = this.buildFeatureContext(opts.autoCollapseAfter);
     this.attach();
     this.registerInStack();
     if (this.snaps.getMaxAxisSize() === 0 && typeof IntersectionObserver !== "undefined" && typeof document !== "undefined") {
@@ -2893,60 +2737,92 @@ var BottomSheetEngine = class {
           (p) => p.size === "fit" || p.size === "content"
         ),
         isDestroyed: () => this.destroyed,
-        isDragging: () => this.gesture?.isDragging ?? false,
+        isDragging: () => this.isDraggingAny(),
         recompute: () => this.recompute()
       })
     );
     if (resolved.radius !== void 0) this.setRadius(resolved.radius);
     if (resolved.maxHeight !== void 0) this.setMaxHeight(resolved.maxHeight);
     this.applyAutoAriaLabelledBy();
-    if (this.closeOnRouteChange) {
-      this.teardowns.add(
-        installRouteChange({
-          isDestroyed: () => this.destroyed,
-          getSize: () => this.size,
-          close: () => this.close()
-        })
-      );
-    }
-    if (this.persistKey) {
-      this.teardowns.add(installPersist(this, this.persistKey));
+    this.runFeatureStage("post");
+    this.warnOrphanFeatureOptions();
+    if (this.size > 0) {
+      this.handleOpen();
     }
-    this.teardowns.add(
-      installAutoCollapse({
-        ms: opts.autoCollapseAfter,
-        isDestroyed: () => this.destroyed,
-        isDragging: () => this.gesture?.isDragging ?? false,
-        getAllowedIds: () => this.snaps.getAllowedIds().slice(),
-        getActiveId: () => this.activeId,
-        resolveSnap: (id) => this.snaps.findById(id),
-        snapTo: (id) => {
-          void this.snapTo(id);
-        },
-        on: (event, fn) => this.on(event, fn)
-      })
-    );
-    this.teardowns.add(
-      installRoute({
+  }
+  buildFeatureContext(autoCollapseAfter) {
+    return {
+      element: this.element,
+      scrollContainer: this.scrollContainer,
+      sheetId: this.id,
+      options: {
         routedTo: this.routedTo,
         closeOnBack: this.closeOnBack,
-        isTopSheet: () => this.isTopSheet,
-        getSize: () => this.size,
-        isDestroyed: () => this.destroyed,
-        close: () => this.close("back"),
-        on: (event, fn) => this.on(event, fn),
-        sheetId: this.id
-      })
-    );
-    if (this.size > 0) {
-      this.handleOpen();
+        closeOnRouteChange: this.closeOnRouteChange,
+        persistKey: this.persistKey,
+        autoCollapseAfter
+      },
+      isDestroyed: () => this.destroyed,
+      isDragging: () => this.isDraggingAny(),
+      isAnimating: () => this.animation.isAnimating,
+      isTopSheet: () => this.isTopSheet,
+      isVerticalAxis: () => this.mode === "bottom" || this.mode === "top",
+      getSize: () => this.size,
+      getActiveId: () => this.activeId,
+      getAllowedIds: () => this.snaps.getAllowedIds().slice(),
+      allowedIdsBySize: () => this.allowedIdsBySize(),
+      getMaxAxisSize: () => this.snaps.getMaxAxisSize(),
+      resolveSnap: (id) => this.snaps.findById(id),
+      resolveActiveSnap: () => this.snaps.findById(this.activeId),
+      setSize: (size) => {
+        this.size = size;
+      },
+      setMaxAxisSize: (size) => {
+        this.snaps.setMaxAxisSize(size);
+      },
+      applySize: (size) => this.applySize(size),
+      recomputeSnaps: () => this.recomputeSnaps(),
+      newCycle: () => {
+        this.newCycle();
+      },
+      cancelInFlight: () => {
+        this.animation.cancel();
+      },
+      resyncAfterResize: () => this.resyncAfterResize(),
+      snapTo: (id) => {
+        void this.snapTo(id);
+      },
+      close: (reason) => this.close(reason),
+      attachDragSurface: (surface, kind) => this.attachDragSurface(surface, kind),
+      on: (event, fn) => this.on(event, fn),
+      addTeardown: (fn) => this.teardowns.add(fn)
+    };
+  }
+  runFeatureStage(stage) {
+    for (const feature of this.featureList) {
+      if ((feature.stage ?? "post") !== stage) continue;
+      const teardown = feature.install(this.featureCtx);
+      if (teardown) this.teardowns.add(teardown);
+    }
+  }
+  warnOrphanFeatureOptions() {
+    const names = new Set(this.featureList.map((f) => f.name));
+    if ((this.closeOnBack || this.routedTo !== void 0 || this.closeOnRouteChange) && !names.has("route")) {
+      devWarn(
+        "[BottomSheet] closeOnBack/routedTo/closeOnRouteChange need routeFeature() \u2014 option ignored"
+      );
+    }
+    if (this.persistKey && !names.has("persist")) {
+      devWarn(
+        "[BottomSheet] persistKey needs persistFeature() \u2014 snaps will not be saved"
+      );
     }
   }
   get state() {
     return {
       size: this.size,
       activeId: this.activeId,
-      isDragging: this.gesture?.isDragging ?? false,
+      isDragging: this.isDraggingAny(),
       isAnimating: this.animation.isAnimating,
       progress: this.computeProgress(this.size)
     };
@@ -3066,9 +2942,16 @@ var BottomSheetEngine = class {
       progress: this.computeProgress(this.size)
     });
     if (withHaptic) this.haptic();
+    this.setRestClosed(targetSize === 0);
     if (wasClosed && targetSize > 0) this.emitOpenSequence(id);
     if (targetSize === 0) this.emitCloseSequence();
   }
+  setRestClosed(closed) {
+    if (closed === this.restClosed) return;
+    this.restClosed = closed;
+    if (closed) this.element.setAttribute("data-bs-rest", "closed");
+    else this.element.removeAttribute("data-bs-rest");
+  }
   emitOpenSequence(id) {
     this.emit("open", { id });
     this.handleOpen();
@@ -3124,6 +3007,20 @@ var BottomSheetEngine = class {
     if (this.destroyed) return;
     this.disableDragFlag = value;
   }
+  setDragFromContent(value) {
+    if (this.destroyed) return;
+    this.dragFromContentDefault = value;
+  }
+  setDragFrom(mode) {
+    if (this.destroyed || mode === this.dragFromMode) return;
+    this.gesture?.forceClearDragState();
+    this.detachSheetGesture?.();
+    this.dragFromMode = mode;
+    this.mountSheetGesture();
+  }
+  getDragFrom() {
+    return this.dragFromMode;
+  }
   isTop() {
     return this.isTopSheet;
   }
@@ -3278,12 +3175,24 @@ var BottomSheetEngine = class {
     auditVhUsage(points);
     this.auditDuplicateSnapIds(points);
     this.snaps.setRaw(points);
-    if (allowed) this.snaps.setAllowedIds(allowed);
+    if (allowed) {
+      this.snaps.setAllowedIds(allowed);
+    } else {
+      const present = this.snaps.getResolvedSnaps().map((s) => s.id);
+      const kept = this.snaps.getAllowedIds().filter((id) => present.includes(id));
+      this.snaps.setAllowedIds(kept.length ? kept : present);
+    }
     this.scrollCache.clear();
     this.scrim.invalidateOpacityCache();
     const current = this.snaps.findById(this.activeId);
     if (current) {
       this.applySize(current.size);
+    } else {
+      const fallback = this.snaps.getResolvedSnaps().find((s) => this.snaps.getAllowedIds().includes(s.id)) ?? this.snaps.getResolvedSnaps()[0];
+      if (fallback) {
+        this.activeId = fallback.id;
+        this.applySize(fallback.size);
+      }
     }
     this.updateAriaSlider();
   }
@@ -3293,7 +3202,7 @@ var BottomSheetEngine = class {
     this.snaps.recompute();
     this.maxHeight.clampTo();
     this.scrim.invalidateOpacityCache();
-    if (this.gesture?.isDragging) return;
+    if (this.isDraggingAny()) return;
     this.healActiveSnap();
   }
   healActiveSnap() {
@@ -3315,6 +3224,8 @@ var BottomSheetEngine = class {
     this.bus.clear();
     this.animation.cancel();
     this.gesture?.forceClearDragState();
+    this.contentGesture?.forceClearDragState();
+    this.setRestClosed(false);
     this.teardowns.drain();
     this.scrim.destroy();
     this.animation.destroy();
@@ -3427,11 +3338,12 @@ var BottomSheetEngine = class {
     const scale = Math.max(1 - depth * 0.04, 0.86);
     this.element.style.scale = scale === 1 ? "" : String(scale);
   }
-  attach() {
-    this.gesture = new GestureController({
-      handle: this.handle,
+  buildGestureDeps(surface, gestureOptions) {
+    return {
+      handle: surface,
       element: this.element,
       mode: this.mode,
+      gestureOptions,
       getRoot: () => this.rootEl,
       getDragContext: () => {
         const buf = this.dragContextBuf;
@@ -3450,8 +3362,88 @@ var BottomSheetEngine = class {
       settleAfterDrag: (delta, velocity, kind) => this.settleAfterDrag(delta, velocity, kind),
       emit: (event, payload) => this.emit(event, payload),
       listenerCount: (event) => this.bus.listenerCount(event)
+    };
+  }
+  isContentDragAllowed() {
+    if (this.disableDragFlag) return false;
+    const point = this.snapPointsRaw.find((p) => p.id === this.activeId);
+    return point?.dragFromContent ?? this.dragFromContentDefault;
+  }
+  decideContentDrag(surface, e, delta) {
+    if (this.destroyed) return false;
+    if (e.pointerType === "mouse") return false;
+    if (this.gesture?.isDragging) return false;
+    if (!this.isContentDragAllowed()) return false;
+    if (!isDragAllowedFrom(e.target, "sheet")) return false;
+    const decision = decideContentGesture({
+      delta,
+      scrollTop: surface.scrollTop,
+      atMaxSnap: this.size >= this.getAllowedRange().max - 0.5
+    });
+    if (decision === "pending") return null;
+    return decision === "drag";
+  }
+  attachDragSurface(surface, kind) {
+    if (this.destroyed || kind !== "content") return;
+    if (this.contentGesture) return;
+    const controller = new GestureController(
+      this.buildGestureDeps(surface, {
+        manageTouchAction: false,
+        deferStart: (e, delta) => this.decideContentDrag(surface, e, delta)
+      })
+    );
+    this.contentGesture = controller;
+    const detachGestures = controller.install();
+    const detachGuard = installTouchScrollGuard(
+      surface,
+      () => controller.isDragging
+    );
+    return () => {
+      detachGuard();
+      detachGestures();
+      if (this.contentGesture === controller) this.contentGesture = void 0;
+    };
+  }
+  sheetDragSurface() {
+    return this.dragFromMode === "handle" ? this.handle : this.element;
+  }
+  canStartSheetDrag(e) {
+    if (this.contentGesture?.isDragging) return false;
+    const target = e.target;
+    const scoped = typeof target?.closest === "function";
+    if (scoped && target.closest(NO_DRAG_SELECTOR)) return false;
+    if (this.handle !== this.element && scoped && this.handle.contains(target)) {
+      return true;
+    }
+    if (!isDragAllowedFrom(e.target, this.dragFromMode)) return false;
+    if (this.dragFromMode === "handle") return true;
+    if (this.scrollContainer && scoped && this.scrollContainer.contains(target) && !target.closest(DRAG_ZONE_SELECTOR)) {
+      return false;
+    }
+    return true;
+  }
+  mountSheetGesture() {
+    const surface = this.sheetDragSurface();
+    const controller = new GestureController(
+      this.buildGestureDeps(surface, {
+        shouldStart: (e) => this.canStartSheetDrag(e),
+        manageTouchAction: this.dragFromMode === "handle"
+      })
+    );
+    this.gesture = controller;
+    const detachGestures = controller.install();
+    const detachGuard = this.dragFromMode === "handle" ? null : installTouchScrollGuard(surface, () => controller.isDragging);
+    this.detachSheetGesture = () => {
+      detachGuard?.();
+      detachGestures();
+    };
+  }
+  attach() {
+    this.mountSheetGesture();
+    this.teardowns.add(() => {
+      this.detachSheetGesture?.();
+      this.detachSheetGesture = null;
     });
-    this.teardowns.add(this.gesture.install());
     try {
       this.attachFeatures();
     } catch (err) {
@@ -3482,24 +3474,13 @@ var BottomSheetEngine = class {
     }
   }
   attachFeatures() {
-    if (this.scrollContainer) {
-      this.teardowns.add(installContentSwipe({
-        container: this.scrollContainer,
-        isDragging: () => this.gesture?.isDragging ?? false,
-        isAnimating: () => this.animation.isAnimating,
-        getAllowedIds: () => this.allowedIdsBySize(),
-        getActiveId: () => this.activeId,
-        snapTo: (id) => {
-          void this.snapTo(id);
-        }
-      }));
-    }
+    this.runFeatureStage("attach");
     if (typeof window !== "undefined") {
       this.teardowns.add(installResizeObserver({
         element: this.element,
         getMode: () => this.mode,
         isDestroyed: () => this.destroyed,
-        isDragging: () => this.gesture?.isDragging ?? false,
+        isDragging: () => this.isDraggingAny(),
         resolveActiveSnap: () => this.snaps.findById(this.activeId),
         getMaxAxisSize: () => this.snaps.getMaxAxisSize(),
         getSize: () => this.size,
@@ -3533,31 +3514,6 @@ var BottomSheetEngine = class {
           () => document.removeEventListener("keydown", onKey)
         );
       }
-      this.teardowns.add(installVisualViewport({
-        element: this.element,
-        isVerticalAxis: () => this.mode === "bottom" || this.mode === "top",
-        isDestroyed: () => this.destroyed,
-        isDragging: () => this.gesture?.isDragging ?? false,
-        recomputeSnaps: () => this.recomputeSnaps(),
-        resolveActiveSnap: () => this.snaps.findById(this.activeId),
-        getMaxAxisSize: () => this.snaps.getMaxAxisSize(),
-        getSize: () => this.size,
-        setMaxAxisSize: (size) => {
-          this.snaps.setMaxAxisSize(size);
-        },
-        setSize: (size) => {
-          this.size = size;
-        },
-        applySize: (size) => this.applySize(size),
-        cancelInFlight: () => {
-          this.animation.cancel();
-        },
-        newCycle: () => {
-          this.newCycle();
-        },
-        isAnimating: () => this.animation.isAnimating,
-        resyncAfterCancel: () => this.resyncAfterResize()
-      }));
     }
     this.teardowns.add(installSliderKeyboard({
       handle: this.handle,
@@ -3598,123 +3554,591 @@ var BottomSheetEngine = class {
       }
       return;
     }
-    const previousSize = this.size;
-    const previousSnapSize = this.snaps.findById(previousId)?.size;
-    this.scrollCache.cache(previousId, previousSize, target.size);
-    this.activeId = target.id;
-    if (previousSnapSize === 0 && target.size > 0) {
-      this.opening = true;
-      sheetStack.promote(this.id);
+    const previousSize = this.size;
+    const previousSnapSize = this.snaps.findById(previousId)?.size;
+    this.scrollCache.cache(previousId, previousSize, target.size);
+    this.activeId = target.id;
+    if (previousSnapSize === 0 && target.size > 0) {
+      this.opening = true;
+      sheetStack.promote(this.id);
+    }
+    const settleCap = this.snaps.getMaxAxisSize();
+    const settleSize = settleCap > 0 ? Math.min(target.size, settleCap) : target.size;
+    this.allowOvershoot = true;
+    void this.animation.animateTo(settleSize, velocity).then(() => {
+      if (signal.aborted) return;
+      this.allowOvershoot = false;
+      this.opening = false;
+      this.completeSnap(
+        target.id,
+        target.size,
+        previousSize,
+        previousSnapSize === 0,
+        true
+      );
+    });
+  }
+  isDraggingAny() {
+    return (this.gesture?.isDragging ?? false) || (this.contentGesture?.isDragging ?? false);
+  }
+  clearWillChangeIfIdle() {
+    if (this.animation.isAnimating || this.isDraggingAny()) return;
+    this.element.style.willChange = "";
+  }
+  haptic() {
+    if (typeof navigator !== "undefined" && "vibrate" in navigator) {
+      try {
+        navigator.vibrate(HAPTIC_DURATION_MS);
+      } catch {
+      }
+    }
+  }
+  applySize(size, skipTransform = false) {
+    const cap = this.snaps.getMaxAxisSize();
+    const clamped = cap > 0 && size > cap && !this.isDraggingAny() && !this.allowOvershoot ? cap : size;
+    this.size = clamped;
+    if (clamped > 0) this.setRestClosed(false);
+    const offset = cap - clamped;
+    const style = this.element.style;
+    if (!skipTransform) style.transform = this.transformTemplate(offset);
+    if (this.sizeWriteSentinel.shouldWrite(clamped, SIZE_WRITE_EPSILON)) {
+      style.setProperty("--bs-size", `${clamped}px`);
+      if (this.scrimParent) {
+        this.scrimParent.style.setProperty("--bs-size", `${clamped}px`);
+      }
+      if (this.anchorHost && this.anchorHost !== this.scrimParent) {
+        this.anchorHost.style.setProperty("--bs-size", `${clamped}px`);
+      }
+      if (this.rootEl && this.rootEl !== this.scrimParent && this.rootEl !== this.anchorHost) {
+        this.rootEl.style.setProperty("--bs-size", `${clamped}px`);
+      }
+    }
+    const progress = this.computeProgress(clamped);
+    const progressChanged = this.progressWriteSentinel.shouldWrite(
+      progress,
+      OPACITY_WRITE_EPSILON
+    );
+    if (progressChanged) {
+      style.setProperty("--bs-progress", String(progress));
+      if (this.anchorHost) {
+        this.anchorHost.style.setProperty("--bs-progress", String(progress));
+      }
+      if (this.rootEl && this.rootEl !== this.anchorHost) {
+        this.rootEl.style.setProperty("--bs-progress", String(progress));
+      }
+    }
+    this.scrim.applyOpacity(progress, progressChanged);
+    if (progressChanged && this.bus.listenerCount("progress") > 0) {
+      this.progressPayload.value = progress;
+      this.progressPayload.size = clamped;
+      this.emit("progress", this.progressPayload);
+    }
+  }
+  computeProgress(size) {
+    const { min, max } = this.getAllowedRange();
+    const reachableMax = Math.min(max, this.snaps.getMaxAxisSize());
+    if (reachableMax <= min) return 0;
+    return Math.min(Math.max((size - min) / (reachableMax - min), 0), 1);
+  }
+  handleOpen() {
+    sheetStack.promote(this.id);
+    try {
+      this.lifecycle.install();
+    } catch (err) {
+      if (!this.destroyed) this.newCycle();
+      this.handleClose();
+      this.applySize(0);
+      this.activeId = this.snapPointsRaw.find((p) => p.id === "closed")?.id ?? this.activeId;
+      this.size = 0;
+      queueMicrotask(() => {
+        throw err;
+      });
+    }
+  }
+  resyncAfterResize() {
+    if (this.destroyed) return;
+    const target = this.snaps.findById(this.activeId);
+    if (!target) return;
+    this.updateAriaSlider();
+    this.emit("snap", {
+      id: target.id,
+      size: this.size,
+      progress: this.computeProgress(this.size)
+    });
+    if (target.size > 0 && !this.lifecycle.isInstalled) {
+      this.emitOpenSequence(target.id);
+    } else if (target.size === 0 && this.lifecycle.isInstalled) {
+      this.emitCloseSequence();
+    }
+  }
+  handleClose() {
+    this.opening = false;
+    this.lifecycle.release();
+    sheetStack.update();
+  }
+};
+
+// src/core/features/history-coordinator.ts
+var entries = [];
+var subscribers = /* @__PURE__ */ new Set();
+var suppress = 0;
+var internalDepth = 0;
+var pendingRebrands = [];
+var listenerInstalled = false;
+var patchInstalled = false;
+var origPushState = null;
+var origReplaceState = null;
+var patchedPushState = null;
+var patchedReplaceState = null;
+var hasWindow = () => typeof window !== "undefined";
+var hasHistory = () => typeof history !== "undefined";
+var brandMarker = (surface) => ({
+  ...surface.markerState(),
+  __bs: true
+});
+var runInternal = (fn) => {
+  internalDepth += 1;
+  try {
+    fn();
+  } finally {
+    internalDepth -= 1;
+  }
+};
+var notifyRouteChange = () => {
+  const snapshot = Array.from(subscribers);
+  for (const fn of snapshot) fn();
+};
+var ensureListener = () => {
+  if (listenerInstalled || !hasWindow()) return;
+  window.addEventListener("popstate", onPopState);
+  listenerInstalled = true;
+};
+var maybeTeardownListener = () => {
+  if (!listenerInstalled) return;
+  if (entries.length > 0 || subscribers.size > 0 || suppress > 0) return;
+  if (hasWindow()) window.removeEventListener("popstate", onPopState);
+  listenerInstalled = false;
+};
+var installPatch = () => {
+  if (patchInstalled || !hasHistory()) return;
+  origPushState = history.pushState;
+  origReplaceState = history.replaceState;
+  patchedPushState = function(...args) {
+    origPushState.apply(this, args);
+    if (internalDepth === 0) notifyRouteChange();
+  };
+  patchedReplaceState = function(...args) {
+    origReplaceState.apply(this, args);
+    if (internalDepth === 0) notifyRouteChange();
+  };
+  history.pushState = patchedPushState;
+  history.replaceState = patchedReplaceState;
+  patchInstalled = true;
+};
+var removePatch = () => {
+  if (!patchInstalled) return;
+  if (history.pushState === patchedPushState && origPushState) {
+    history.pushState = origPushState;
+  }
+  if (history.replaceState === patchedReplaceState && origReplaceState) {
+    history.replaceState = origReplaceState;
+  }
+  origPushState = null;
+  origReplaceState = null;
+  patchedPushState = null;
+  patchedReplaceState = null;
+  patchInstalled = false;
+};
+function onPopState() {
+  if (suppress > 0) {
+    suppress -= 1;
+    const rebrand = pendingRebrands.shift();
+    if (rebrand) rebrand();
+    maybeTeardownListener();
+    return;
+  }
+  if (entries.length === 0) {
+    notifyRouteChange();
+    maybeTeardownListener();
+    return;
+  }
+  let target = null;
+  let targetIdx = -1;
+  for (let i = entries.length - 1; i >= 0; i -= 1) {
+    const entry = entries[i];
+    if (!entry.surface.isOpen()) continue;
+    if (!target) {
+      target = entry;
+      targetIdx = i;
+    }
+    if (entry.surface.isTop()) {
+      target = entry;
+      targetIdx = i;
+      break;
+    }
+  }
+  if (!target) {
+    const removed = entries.pop();
+    if (removed) removed.live = false;
+    maybeTeardownListener();
+    return;
+  }
+  target.live = false;
+  entries.splice(targetIdx, 1);
+  const settled = target;
+  void Promise.resolve(settled.surface.close()).then(() => {
+    if (settled.surface.isOpen()) restore(settled);
+  });
+  maybeTeardownListener();
+}
+function restore(entry) {
+  if (!hasWindow() || !hasHistory()) return;
+  entry.live = true;
+  runInternal(() => {
+    try {
+      history.pushState(brandMarker(entry.surface), "", entry.surface.url);
+    } catch {
+      entry.live = false;
+    }
+  });
+  if (entry.live) {
+    entries.push(entry);
+    ensureListener();
+  }
+}
+function pushBackMarker(surface) {
+  const entry = { surface, priorUrl: void 0, live: false };
+  if (!hasWindow() || !hasHistory()) {
+    return entry;
+  }
+  entry.priorUrl = surface.url !== void 0 ? location.href : void 0;
+  runInternal(() => {
+    try {
+      history.pushState(brandMarker(surface), "", surface.url);
+      entry.live = true;
+    } catch {
+      entry.live = false;
+    }
+  });
+  if (entry.live) {
+    entries.push(entry);
+    ensureListener();
+  }
+  return entry;
+}
+function popBackMarker(handle) {
+  if (!hasWindow() || !hasHistory()) return;
+  const entry = handle;
+  const idx = entries.indexOf(entry);
+  if (idx === -1 || !entry.live) return;
+  const last = entries.length - 1;
+  entry.live = false;
+  entries.splice(idx, 1);
+  let rebrand = null;
+  if (idx !== last) {
+    const rebrandSurface = entries[entries.length - 1].surface;
+    const rebrandUrl = entry.priorUrl;
+    rebrand = () => {
+      runInternal(() => {
+        history.replaceState(
+          brandMarker(rebrandSurface),
+          "",
+          rebrandUrl !== void 0 ? rebrandUrl : location.href
+        );
+      });
+    };
+  }
+  pendingRebrands.push(rebrand);
+  suppress += 1;
+  runInternal(() => {
+    try {
+      history.back();
+    } catch {
+      suppress = Math.max(0, suppress - 1);
+      pendingRebrands.pop();
+    }
+  });
+  maybeTeardownListener();
+}
+function subscribeRouteChange(fn) {
+  if (!hasWindow() || !hasHistory()) return () => {
+  };
+  subscribers.add(fn);
+  if (subscribers.size === 1) installPatch();
+  ensureListener();
+  return () => {
+    if (!subscribers.has(fn)) return;
+    subscribers.delete(fn);
+    if (subscribers.size === 0) removePatch();
+    maybeTeardownListener();
+  };
+}
+
+// src/core/features/route.ts
+function installRoute(deps) {
+  if (typeof window === "undefined") {
+    return () => {
+    };
+  }
+  if (!deps.routedTo && !deps.closeOnBack) {
+    return () => {
+    };
+  }
+  let handle = null;
+  const onOpen = () => {
+    if (handle) return;
+    handle = pushBackMarker({
+      isOpen: () => !deps.isDestroyed() && deps.getSize() > 0,
+      isTop: deps.isTopSheet,
+      close: deps.close,
+      markerState: () => deps.routedTo !== void 0 ? { __bsRouted: deps.sheetId } : { __bsSheet: deps.sheetId },
+      url: deps.routedTo
+    });
+  };
+  const onClose = () => {
+    if (!handle) return;
+    popBackMarker(handle);
+    handle = null;
+  };
+  const unsubscribeOpen = deps.on("open", onOpen);
+  const unsubscribeClose = deps.on("close", onClose);
+  if (deps.getSize() > 0) onOpen();
+  return () => {
+    unsubscribeOpen();
+    unsubscribeClose();
+    if (handle) {
+      popBackMarker(handle);
+      handle = null;
+    }
+  };
+}
+function installRouteChange(deps) {
+  return subscribeRouteChange(() => {
+    if (deps.isDestroyed() || deps.getSize() <= 0) return;
+    void deps.close();
+  });
+}
+
+// src/core/features/persist.ts
+function installPersist(engine, key) {
+  const unsubscribe = engine.on("snap", ({ id }) => {
+    if (typeof window === "undefined") return;
+    if (typeof localStorage === "undefined") return;
+    try {
+      localStorage.setItem(key, id);
+    } catch {
     }
-    const settleCap = this.snaps.getMaxAxisSize();
-    const settleSize = settleCap > 0 ? Math.min(target.size, settleCap) : target.size;
-    this.allowOvershoot = true;
-    void this.animation.animateTo(settleSize, velocity).then(() => {
-      if (signal.aborted) return;
-      this.allowOvershoot = false;
-      this.opening = false;
-      this.completeSnap(
-        target.id,
-        target.size,
-        previousSize,
-        previousSnapSize === 0,
-        true
-      );
-    });
-  }
-  clearWillChangeIfIdle() {
-    if (this.animation.isAnimating || this.gesture?.isDragging) return;
-    this.element.style.willChange = "";
+  });
+  return unsubscribe;
+}
+
+// src/core/features/auto-collapse.ts
+function installAutoCollapse(deps) {
+  const { ms } = deps;
+  if (ms === void 0 || ms <= 0) {
+    return () => {
+    };
   }
-  haptic() {
-    if (typeof navigator !== "undefined" && "vibrate" in navigator) {
-      try {
-        navigator.vibrate(HAPTIC_DURATION_MS);
-      } catch {
-      }
+  let timer = null;
+  const clearTimer = () => {
+    if (timer !== null) {
+      clearTimeout(timer);
+      timer = null;
+    }
+  };
+  const fire = () => {
+    if (deps.isDestroyed()) return;
+    if (deps.isDragging()) return;
+    const active = deps.resolveSnap(deps.getActiveId());
+    if (!active || active.size === 0) return;
+    let target = null;
+    for (const id of deps.getAllowedIds()) {
+      const snap = deps.resolveSnap(id);
+      if (!snap || snap.size <= 0) continue;
+      if (!target || snap.size < target.size) target = snap;
     }
+    if (!target) return;
+    if (target.id === active.id || target.size >= active.size) return;
+    deps.snapTo(target.id);
+  };
+  const reset = () => {
+    clearTimer();
+    if (deps.isDestroyed()) return;
+    timer = setTimeout(() => {
+      timer = null;
+      fire();
+    }, ms);
+  };
+  const unsubscribe = deps.on("snap", () => reset());
+  if ((deps.resolveSnap(deps.getActiveId())?.size ?? 0) > 0) reset();
+  return () => {
+    clearTimer();
+    unsubscribe();
+  };
+}
+
+// src/core/features/content-drag.ts
+function installContentDrag(deps) {
+  const detach = deps.attachDragSurface(deps.container, "content");
+  return () => detach?.();
+}
+
+// src/core/features/visual-viewport.ts
+var SAFETY_PAD = 8;
+function installVisualViewport(deps) {
+  if (typeof window === "undefined" || !window.visualViewport) {
+    return () => {
+    };
   }
-  applySize(size) {
-    const cap = this.snaps.getMaxAxisSize();
-    const clamped = cap > 0 && size > cap && !this.gesture?.isDragging && !this.allowOvershoot ? cap : size;
-    this.size = clamped;
-    const offset = cap - clamped;
-    const style = this.element.style;
-    style.transform = this.transformTemplate(offset);
-    if (this.sizeWriteSentinel.shouldWrite(clamped, SIZE_WRITE_EPSILON)) {
-      style.setProperty("--bs-size", `${clamped}px`);
-      if (this.scrimParent) {
-        this.scrimParent.style.setProperty("--bs-size", `${clamped}px`);
+  const vv = window.visualViewport;
+  let rafId = null;
+  const onResize = () => {
+    if (rafId !== null) return;
+    rafId = requestAnimationFrame(() => {
+      rafId = null;
+      if (deps.isDestroyed()) return;
+      deps.recomputeSnaps();
+      const isVertical = deps.isVerticalAxis();
+      const visible = isVertical ? vv.height : vv.width;
+      const windowSize = isVertical ? window.innerHeight : window.innerWidth;
+      const clamp = Math.max(0, Math.min(windowSize, visible) - SAFETY_PAD);
+      if (clamp < deps.getMaxAxisSize()) {
+        deps.setMaxAxisSize(clamp);
       }
-      if (this.anchorHost && this.anchorHost !== this.scrimParent) {
-        this.anchorHost.style.setProperty("--bs-size", `${clamped}px`);
+      const wasAnimating = deps.isAnimating?.() ?? false;
+      deps.cancelInFlight();
+      deps.newCycle();
+      const max = deps.getMaxAxisSize();
+      deps.setSize(Math.min(deps.getSize(), max));
+      const current = deps.resolveActiveSnap();
+      if (current && !deps.isDragging()) {
+        deps.applySize(Math.min(current.size, max));
+        if (wasAnimating) deps.resyncAfterCancel?.();
+      } else {
+        deps.applySize(deps.getSize());
       }
-      if (this.rootEl && this.rootEl !== this.scrimParent && this.rootEl !== this.anchorHost) {
-        this.rootEl.style.setProperty("--bs-size", `${clamped}px`);
+    });
+  };
+  vv.addEventListener("resize", onResize);
+  return () => {
+    vv.removeEventListener("resize", onResize);
+    if (rafId !== null) cancelAnimationFrame(rafId);
+  };
+}
+
+// src/core/features/engine-features.ts
+function routeFeature() {
+  return {
+    name: "route",
+    install: (ctx) => {
+      const teardowns = new TeardownStack();
+      if (ctx.options.closeOnRouteChange) {
+        teardowns.add(
+          installRouteChange({
+            isDestroyed: ctx.isDestroyed,
+            getSize: ctx.getSize,
+            close: () => ctx.close()
+          })
+        );
       }
+      teardowns.add(
+        installRoute({
+          routedTo: ctx.options.routedTo,
+          closeOnBack: ctx.options.closeOnBack,
+          isTopSheet: ctx.isTopSheet,
+          getSize: ctx.getSize,
+          isDestroyed: ctx.isDestroyed,
+          close: () => ctx.close("back"),
+          on: ctx.on,
+          sheetId: ctx.sheetId
+        })
+      );
+      return () => teardowns.drain();
     }
-    const progress = this.computeProgress(clamped);
-    const progressChanged = this.progressWriteSentinel.shouldWrite(
-      progress,
-      OPACITY_WRITE_EPSILON
-    );
-    if (progressChanged) {
-      style.setProperty("--bs-progress", String(progress));
-      if (this.anchorHost) {
-        this.anchorHost.style.setProperty("--bs-progress", String(progress));
-      }
-      if (this.rootEl && this.rootEl !== this.anchorHost) {
-        this.rootEl.style.setProperty("--bs-progress", String(progress));
-      }
+  };
+}
+function persistFeature() {
+  return {
+    name: "persist",
+    install: (ctx) => {
+      const key = ctx.options.persistKey;
+      if (!key) return;
+      return installPersist({ on: ctx.on }, key);
     }
-    this.scrim.applyOpacity(progress, progressChanged);
-    if (progressChanged && this.bus.listenerCount("progress") > 0) {
-      this.progressPayload.value = progress;
-      this.progressPayload.size = clamped;
-      this.emit("progress", this.progressPayload);
+  };
+}
+function autoCollapseFeature() {
+  return {
+    name: "auto-collapse",
+    install: (ctx) => installAutoCollapse({
+      ms: ctx.options.autoCollapseAfter,
+      isDestroyed: ctx.isDestroyed,
+      isDragging: ctx.isDragging,
+      getAllowedIds: ctx.getAllowedIds,
+      getActiveId: ctx.getActiveId,
+      resolveSnap: ctx.resolveSnap,
+      snapTo: ctx.snapTo,
+      on: ctx.on
+    })
+  };
+}
+function contentSwipeFeature() {
+  return {
+    name: "content-swipe",
+    stage: "attach",
+    install: (ctx) => {
+      if (!ctx.scrollContainer) return;
+      return installContentDrag({
+        container: ctx.scrollContainer,
+        attachDragSurface: ctx.attachDragSurface
+      });
     }
-  }
-  computeProgress(size) {
-    const { min, max } = this.getAllowedRange();
-    const reachableMax = Math.min(max, this.snaps.getMaxAxisSize());
-    if (reachableMax <= min) return 0;
-    return Math.min(Math.max((size - min) / (reachableMax - min), 0), 1);
-  }
-  handleOpen() {
-    sheetStack.promote(this.id);
-    try {
-      this.lifecycle.install();
-    } catch (err) {
-      if (!this.destroyed) this.newCycle();
-      this.handleClose();
-      this.applySize(0);
-      this.activeId = this.snapPointsRaw.find((p) => p.id === "closed")?.id ?? this.activeId;
-      this.size = 0;
-      queueMicrotask(() => {
-        throw err;
+  };
+}
+function visualViewportFeature() {
+  return {
+    name: "visual-viewport",
+    install: (ctx) => {
+      if (typeof window === "undefined") return;
+      return installVisualViewport({
+        element: ctx.element,
+        isVerticalAxis: ctx.isVerticalAxis,
+        isDestroyed: ctx.isDestroyed,
+        isDragging: ctx.isDragging,
+        recomputeSnaps: ctx.recomputeSnaps,
+        resolveActiveSnap: ctx.resolveActiveSnap,
+        getMaxAxisSize: ctx.getMaxAxisSize,
+        getSize: ctx.getSize,
+        setMaxAxisSize: ctx.setMaxAxisSize,
+        setSize: ctx.setSize,
+        applySize: ctx.applySize,
+        cancelInFlight: ctx.cancelInFlight,
+        newCycle: ctx.newCycle,
+        isAnimating: ctx.isAnimating,
+        resyncAfterCancel: ctx.resyncAfterResize
       });
     }
-  }
-  resyncAfterResize() {
-    if (this.destroyed) return;
-    const target = this.snaps.findById(this.activeId);
-    if (!target) return;
-    this.updateAriaSlider();
-    this.emit("snap", {
-      id: target.id,
-      size: this.size,
-      progress: this.computeProgress(this.size)
+  };
+}
+
+// src/core/default-features.ts
+function defaultEngineFeatures() {
+  return [
+    contentSwipeFeature(),
+    visualViewportFeature(),
+    persistFeature(),
+    autoCollapseFeature(),
+    routeFeature()
+  ];
+}
+
+// src/core/BottomSheetEngine.ts
+var BottomSheetEngine = class extends BottomSheetCore {
+  constructor(opts) {
+    super({
+      ...opts,
+      features: [...defaultEngineFeatures(), ...opts.features ?? []]
     });
-    if (target.size > 0 && !this.lifecycle.isInstalled) {
-      this.emitOpenSequence(target.id);
-    } else if (target.size === 0 && this.lifecycle.isInstalled) {
-      this.emitCloseSequence();
-    }
-  }
-  handleClose() {
-    this.opening = false;
-    this.lifecycle.release();
-    sheetStack.update();
   }
 };
 
@@ -3792,6 +4216,8 @@ var BottomSheet = (props) => {
       persistent: props.persistent,
       disableClose: props.disableClose,
       disableDrag: props.disableDrag,
+      dragFrom: props.dragFrom,
+      dragFromContent: props.dragFromContent,
       closeOnRouteChange: props.closeOnRouteChange,
       stackEffect: props.stackEffect,
       returnFocusTo: props.returnFocusTo
@@ -3904,6 +4330,26 @@ var BottomSheet = (props) => {
       { defer: true }
     )
   );
+  createEffect(
+    on(
+      () => props.dragFromContent,
+      (value, prev) => {
+        if (!engine || prev === void 0 || value === void 0) return;
+        engine.setDragFromContent(value);
+      },
+      { defer: true }
+    )
+  );
+  createEffect(
+    on(
+      () => props.dragFrom,
+      (value, prev) => {
+        if (!engine || prev === void 0 || value === void 0) return;
+        engine.setDragFrom(value);
+      },
+      { defer: true }
+    )
+  );
   const showBackdrop = createMemo(() => props.backdrop !== false);
   const mode = createMemo(() => props.mode ?? "bottom");
   const ariaLabel = createMemo(() => props.ariaLabel ?? "Bottom sheet");