@surdeddd/bottom-sheet 0.9.1 → 0.11.0

package/dist/react.cjs

@@ -193,11 +193,18 @@ var resolveSnap = (point, mode, measureFit) => {
   return Math.max(0, el.getBoundingClientRect().width);
 };
 
+// src/core/primitives/devWarn.ts
+function devWarn(...args) {
+  if (typeof process !== "undefined" && process.env && process.env.NODE_ENV !== "production" && typeof console !== "undefined") {
+    console.warn(...args);
+  }
+}
+
 // src/core/primitives/snap-points.ts
 var resolveSnapList = (points, mode, measureFit) => points.map((p) => {
   const raw = resolveSnap(p.size, mode, measureFit);
   if (!Number.isFinite(raw) || raw < 0) {
-    console.warn(
+    devWarn(
       `[BottomSheet] snap "${p.id}" resolved to invalid size (${String(p.size)} \u2192 ${raw}); clamped to 0.`
     );
     return { id: p.id, size: 0 };
@@ -209,7 +216,7 @@ var auditVhUsage = (points) => {
   for (const p of points) {
     if (typeof p.size !== "string") continue;
     if (!VH_NOT_DVH.test(p.size)) continue;
-    console.warn(
+    devWarn(
       `[BottomSheet] snap "${p.id}" uses "vh" \u2014 prefer "dvh" on mobile (iOS Safari URL bar makes vh unstable). See https://web.dev/blog/viewport-units`
     );
   }
@@ -263,6 +270,26 @@ var findDragSettleTarget = (input) => {
   );
 };
 
+// src/core/primitives/cancelable-emit.ts
+function emitCancelable(emit, base, warnLabel) {
+  let cancelled = false;
+  let frozen = false;
+  emit({
+    ...base,
+    cancel: () => {
+      if (frozen) {
+        devWarn(
+          `[BottomSheet] ${warnLabel}.cancel() called asynchronously \u2014 ignored. cancel() must be invoked synchronously inside the listener.`
+        );
+        return;
+      }
+      cancelled = true;
+    }
+  });
+  frozen = true;
+  return cancelled;
+}
+
 // src/core/primitives/snap-resolver.ts
 var SnapResolver = class {
   constructor(raw, allowed, mode, measureFit, onMaxAxisSizeChange) {
@@ -407,7 +434,9 @@ function notifyLinkedSheets(sheets, self) {
     try {
       if (linked.state.size === 0) continue;
       const ids = linked.getAllowedIds();
-      const target = ids.find((id) => id !== "closed");
+      const resolved = linked.getResolvedSnaps();
+      const sizeOf = (id) => resolved.find((s) => s.id === id)?.size ?? 0;
+      const target = ids.find((id) => sizeOf(id) > 0);
       if (target && target !== linked.state.activeId) {
         void linked.snapTo(target);
       }
@@ -419,46 +448,198 @@ function notifyLinkedSheets(sheets, self) {
   }
 }
 
-// src/core/features/route.ts
-var closers = [];
-var handlerInstalled = false;
+// src/core/features/history-coordinator.ts
+var entries = [];
+var subscribers = /* @__PURE__ */ new Set();
 var suppress = 0;
-var ensureHandler = () => {
-  if (handlerInstalled || typeof window === "undefined") return;
-  handlerInstalled = true;
-  window.addEventListener("popstate", () => {
-    if (suppress > 0) {
-      suppress -= 1;
-      return;
+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 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;
+  }
+  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;
     }
-    let target = null;
-    for (let i = closers.length - 1; i >= 0; i -= 1) {
-      const c = closers[i];
-      if (!c.isOpen()) continue;
-      if (!target) target = c;
-      if (c.isTop()) {
-        target = c;
-        break;
-      }
+    if (entry.surface.isTop()) {
+      target = entry;
+      targetIdx = i;
+      break;
     }
-    if (!target) return;
-    target.consumed = true;
-    const idx = closers.indexOf(target);
-    if (idx !== -1) closers.splice(idx, 1);
-    const settled = target;
-    void Promise.resolve(settled.close()).then(() => {
-      if (settled.isOpen()) settled.restore();
-    });
+  }
+  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);
   });
-};
-var programmaticBack = () => {
-  suppress += 1;
-  try {
-    history.back();
-  } catch {
-    suppress = Math.max(0, suppress - 1);
+  maybeTeardownListener();
+}
+function restore(entry) {
+  if (!hasWindow() || !hasHistory()) return;
+  entry.live = true;
+  runInternal(() => {
+    try {
+      history.pushState(entry.surface.markerState(), "", 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(surface.markerState(), "", 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(
+          rebrandSurface.markerState(),
+          "",
+          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 () => {
@@ -468,92 +649,39 @@ function installRoute(deps) {
     return () => {
     };
   }
-  let pushed = false;
-  let closer = null;
-  const teardownEntry = () => {
-    if (closer) {
-      const idx = closers.indexOf(closer);
-      if (idx !== -1) closers.splice(idx, 1);
-    }
-    const wasConsumed = closer?.consumed ?? false;
-    closer = null;
-    if (pushed && !wasConsumed) {
-      pushed = false;
-      programmaticBack();
-    } else {
-      pushed = false;
-    }
-  };
-  const pushEntry = () => {
-    try {
-      if (deps.routedTo !== void 0) {
-        history.pushState({ __bsRouted: deps.sheetId }, "", deps.routedTo);
-      } else {
-        history.pushState({ __bsSheet: deps.sheetId }, "");
-      }
-      pushed = true;
-    } catch {
-      pushed = false;
-    }
-  };
+  let handle = null;
   const onOpen = () => {
-    if (closer) return;
-    const self = {
+    if (handle) return;
+    handle = pushBackMarker({
       isOpen: () => !deps.isDestroyed() && deps.getSize() > 0,
-      isTop: () => deps.isTopSheet(),
-      close: () => deps.close(),
-      restore: () => {
-        if (deps.isDestroyed() || closer !== self) return;
-        self.consumed = false;
-        if (!closers.includes(self)) closers.push(self);
-        pushEntry();
-      },
-      consumed: false
-    };
-    closer = self;
-    ensureHandler();
-    closers.push(self);
-    pushEntry();
+      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", teardownEntry);
+  const unsubscribeClose = deps.on("close", onClose);
   if (deps.getSize() > 0) onOpen();
   return () => {
     unsubscribeOpen();
     unsubscribeClose();
-    teardownEntry();
+    if (handle) {
+      popBackMarker(handle);
+      handle = null;
+    }
   };
 }
 function installRouteChange(deps) {
-  if (typeof window === "undefined" || typeof history === "undefined") {
-    return () => {
-    };
-  }
-  const onChange = () => {
+  return subscribeRouteChange(() => {
     if (deps.isDestroyed() || deps.getSize() <= 0) return;
     void deps.close();
-  };
-  const wrap = (key) => {
-    const original = history[key];
-    const patched = function(...args) {
-      original.apply(this, args);
-      onChange();
-    };
-    history[key] = patched;
-    return () => {
-      if (history[key] === patched) {
-        history[key] = original;
-      }
-    };
-  };
-  window.addEventListener("popstate", onChange);
-  const restorePush = wrap("pushState");
-  const restoreReplace = wrap("replaceState");
-  return () => {
-    window.removeEventListener("popstate", onChange);
-    restorePush();
-    restoreReplace();
-  };
+  });
 }
 
 // src/core/features/content-swipe.ts
@@ -624,11 +752,15 @@ function installVisualViewport(deps) {
       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());
       }
@@ -769,6 +901,54 @@ function installFitObserver(deps) {
   };
 }
 
+// src/core/features/max-height-controller.ts
+function createMaxHeightController(deps) {
+  let maxHeightCap;
+  let maxHeightRaw;
+  const resolveCap = () => {
+    const raw = maxHeightRaw;
+    if (raw === void 0) {
+      maxHeightCap = void 0;
+      return;
+    }
+    if (typeof raw === "number") {
+      maxHeightCap = raw;
+      return;
+    }
+    if (typeof window === "undefined") return;
+    const measured = resolveSnap(raw, deps.mode);
+    maxHeightCap = measured > 0 ? measured : void 0;
+  };
+  const clampTo = () => {
+    if (maxHeightCap === void 0) return;
+    if (deps.getMaxAxisSize() > maxHeightCap) {
+      deps.setMaxAxisSize(maxHeightCap);
+    }
+  };
+  return {
+    setRadius(r) {
+      deps.element.style.setProperty(
+        "--bs-radius",
+        typeof r === "number" ? `${r}px` : r
+      );
+    },
+    setMaxHeight(h) {
+      const value = typeof h === "number" ? `${h}px` : h;
+      const axis = layoutAxis(deps.mode);
+      deps.element.style.setProperty(
+        axis === "height" ? "max-height" : "max-width",
+        value
+      );
+      maxHeightRaw = h;
+      resolveCap();
+      deps.recompute();
+    },
+    resolveCap,
+    clampTo,
+    getCap: () => maxHeightCap
+  };
+}
+
 // src/core/features/fit-measurement.ts
 var measureSheetNatural = (element, content, vertical) => {
   if (!content) {
@@ -900,13 +1080,6 @@ var WriteSentinel = class {
   }
 };
 
-// src/core/primitives/devWarn.ts
-function devWarn(...args) {
-  if (typeof process !== "undefined" && process.env && process.env.NODE_ENV !== "production" && typeof console !== "undefined") {
-    console.warn(...args);
-  }
-}
-
 // src/core/primitives/overlay-position.ts
 function resolveSheetAnchoredStyle(mode, position, inset) {
   const sizeOffset = `calc(var(--bs-size, 0px) + ${inset})`;
@@ -2361,7 +2534,7 @@ var matchesRange = (def, progress) => {
 };
 function installScrimStages(deps, opts) {
   const doc = deps.host.ownerDocument;
-  const entries = opts.stages.map((def) => {
+  const entries2 = opts.stages.map((def) => {
     const wrapper = doc.createElement("div");
     wrapper.className = "bs-scrim-stage";
     const ws = wrapper.style;
@@ -2382,9 +2555,9 @@ function installScrimStages(deps, opts) {
   const resolveActive = () => {
     const state = deps.getState();
     if (state.size === 0) {
-      return entries.find((e) => matchesId(e.def, state.activeId)) ?? null;
+      return entries2.find((e) => matchesId(e.def, state.activeId)) ?? null;
     }
-    return entries.find((e) => matchesId(e.def, state.activeId)) ?? entries.find((e) => matchesRange(e.def, state.progress)) ?? null;
+    return entries2.find((e) => matchesId(e.def, state.activeId)) ?? entries2.find((e) => matchesRange(e.def, state.progress)) ?? null;
   };
   const hide = (entry, animate) => {
     entry.inFlight?.cancel();
@@ -2433,13 +2606,13 @@ function installScrimStages(deps, opts) {
     deps.on("open", () => update(true)),
     deps.on("close", () => update(true))
   ];
-  if (entries.some((e) => e.def.forRange)) {
+  if (entries2.some((e) => e.def.forRange)) {
     offs.push(deps.on("progress", () => update(true)));
   }
   update(false);
   return () => {
     offs.forEach((off) => off());
-    for (const entry of entries) {
+    for (const entry of entries2) {
       entry.inFlight?.cancel();
       entry.inFlight = null;
       if (entry.wrapper.parentNode) {
@@ -2552,8 +2725,7 @@ var BottomSheetEngine = class {
     __publicField(this, "disableCloseFlag");
     __publicField(this, "disableDragFlag");
     __publicField(this, "closeOnRouteChange");
-    __publicField(this, "maxHeightCap");
-    __publicField(this, "maxHeightRaw");
+    __publicField(this, "maxHeight");
     __publicField(this, "snapPointsRaw");
     __publicField(this, "snaps");
     __publicField(this, "activeId");
@@ -2664,11 +2836,20 @@ var BottomSheetEngine = class {
     auditVhUsage(this.snapPointsRaw);
     this.auditDuplicateSnapIds(this.snapPointsRaw);
     this.rootEl = this.element.closest(".bs-root");
+    this.maxHeight = createMaxHeightController({
+      element: this.element,
+      mode: this.mode,
+      getMaxAxisSize: () => this.snaps.getMaxAxisSize(),
+      setMaxAxisSize: (size) => {
+        this.snaps.setMaxAxisSize(size);
+      },
+      recompute: () => this.recompute()
+    });
     this.fitDeps = {
       element: this.element,
       scrollContainer: this.scrollContainer,
       mode: this.mode,
-      getMaxHeightCap: () => this.maxHeightCap
+      getMaxHeightCap: () => this.maxHeight.getCap()
     };
     this.snaps = new SnapResolver(
       this.snapPointsRaw,
@@ -2690,8 +2871,8 @@ var BottomSheetEngine = class {
     this.attach();
     this.registerInStack();
     if (this.snaps.getMaxAxisSize() === 0 && typeof IntersectionObserver !== "undefined" && typeof document !== "undefined") {
-      const io = new IntersectionObserver((entries) => {
-        for (const entry of entries) {
+      const io = new IntersectionObserver((entries2) => {
+        for (const entry of entries2) {
           if (!entry.isIntersecting) continue;
           if (this.destroyed) return;
           this.snaps.recompute();
@@ -2779,7 +2960,7 @@ var BottomSheetEngine = class {
   }
   use(plugin) {
     if (this.destroyed) {
-      console.warn(
+      devWarn(
         `[BottomSheet] use("${plugin.name}") called on destroyed engine \u2014 ignored.`
       );
       return this;
@@ -2821,6 +3002,9 @@ var BottomSheetEngine = class {
   getAllowedIds() {
     return this.snaps.getAllowedIds().slice();
   }
+  getResolvedSnaps() {
+    return this.snaps.getResolvedSnaps();
+  }
   async snapTo(id, velocityOrOpts = 0, _skipBeforeSnap = false) {
     if (this.destroyed) return;
     const opts = typeof velocityOrOpts === "object" ? velocityOrOpts : { velocity: velocityOrOpts };
@@ -2829,11 +3013,11 @@ var BottomSheetEngine = class {
     if (externalSignal?.aborted) return;
     const target = this.snaps.findById(id);
     if (!target) {
-      console.warn(`[BottomSheet] unknown snap id: ${id}`);
+      devWarn(`[BottomSheet] unknown snap id: ${id}`);
       return;
     }
     if (!this.snaps.getAllowedIds().includes(id)) {
-      console.warn(`[BottomSheet] snap "${id}" is not in allowed list`);
+      devWarn(`[BottomSheet] snap "${id}" is not in allowed list`);
       return;
     }
     if (!_skipBeforeSnap && this.emitBeforeSnap(target, this.activeId)) {
@@ -2965,42 +3149,11 @@ var BottomSheetEngine = class {
   }
   setRadius(r) {
     if (this.destroyed) return;
-    this.element.style.setProperty(
-      "--bs-radius",
-      typeof r === "number" ? `${r}px` : r
-    );
+    this.maxHeight.setRadius(r);
   }
   setMaxHeight(h) {
     if (this.destroyed) return;
-    const value = typeof h === "number" ? `${h}px` : h;
-    const axis = layoutAxis(this.mode);
-    this.element.style.setProperty(
-      axis === "height" ? "max-height" : "max-width",
-      value
-    );
-    this.maxHeightRaw = h;
-    this.resolveMaxHeightCap();
-    this.recompute();
-  }
-  resolveMaxHeightCap() {
-    const raw = this.maxHeightRaw;
-    if (raw === void 0) {
-      this.maxHeightCap = void 0;
-      return;
-    }
-    if (typeof raw === "number") {
-      this.maxHeightCap = raw;
-      return;
-    }
-    if (typeof window === "undefined") return;
-    const measured = resolveSnap(raw, this.mode);
-    this.maxHeightCap = measured > 0 ? measured : void 0;
-  }
-  clampToMaxHeight() {
-    if (this.maxHeightCap === void 0) return;
-    if (this.snaps.getMaxAxisSize() > this.maxHeightCap) {
-      this.snaps.setMaxAxisSize(this.maxHeightCap);
-    }
+    this.maxHeight.setMaxHeight(h);
   }
   setAllowed(ids, snap) {
     if (this.destroyed) return;
@@ -3088,7 +3241,7 @@ var BottomSheetEngine = class {
     };
     const host = this.screenComponent?.parentElement;
     if (!host) {
-      console.warn(
+      devWarn(
         "[BottomSheet] setScrimStages: no scrim element mounted \u2014 pass `scrim` to the engine first."
       );
       return () => {
@@ -3138,9 +3291,9 @@ var BottomSheetEngine = class {
   }
   recompute() {
     if (this.destroyed) return;
-    this.resolveMaxHeightCap();
+    this.maxHeight.resolveCap();
     this.snaps.recompute();
-    this.clampToMaxHeight();
+    this.maxHeight.clampTo();
     this.scrim.invalidateOpacityCache();
     if (this.gesture?.isDragging) return;
     const current = this.snaps.findById(this.activeId);
@@ -3190,42 +3343,18 @@ var BottomSheetEngine = class {
     return this.currentAbort.signal;
   }
   emitBeforeSnap(target, previousId) {
-    let cancelled = false;
-    let frozen = false;
-    this.emit("before-snap", {
-      id: target.id,
-      size: target.size,
-      previousId,
-      cancel: () => {
-        if (frozen) {
-          console.warn(
-            "[BottomSheet] before-snap.cancel() called asynchronously \u2014 ignored. cancel() must be invoked synchronously inside the listener."
-          );
-          return;
-        }
-        cancelled = true;
-      }
-    });
-    frozen = true;
-    return cancelled;
+    return emitCancelable(
+      (payload) => this.emit("before-snap", payload),
+      { id: target.id, size: target.size, previousId },
+      "before-snap"
+    );
   }
   emitBeforeClose(reason) {
-    let cancelled = false;
-    let frozen = false;
-    this.emit("before-close", {
-      reason,
-      cancel: () => {
-        if (frozen) {
-          console.warn(
-            "[BottomSheet] before-close.cancel() called asynchronously \u2014 ignored. cancel() must be invoked synchronously inside the listener."
-          );
-          return;
-        }
-        cancelled = true;
-      }
-    });
-    frozen = true;
-    return cancelled;
+    return emitCancelable(
+      (payload) => this.emit("before-close", payload),
+      { reason },
+      "before-close"
+    );
   }
   applyAutoAriaLabelledBy() {
     if (typeof document === "undefined") return;
@@ -3240,16 +3369,16 @@ var BottomSheetEngine = class {
     this.element.setAttribute("aria-labelledby", titled.id);
   }
   recomputeSnaps() {
-    this.resolveMaxHeightCap();
+    this.maxHeight.resolveCap();
     this.snaps.setRaw(this.snapPointsRaw);
-    this.clampToMaxHeight();
+    this.maxHeight.clampTo();
     this.scrim.invalidateOpacityCache();
   }
   auditDuplicateSnapIds(points) {
     const seen = /* @__PURE__ */ new Set();
     for (const p of points) {
       if (seen.has(p.id)) {
-        console.warn(
+        devWarn(
           `[BottomSheet] duplicate snap id "${p.id}" \u2014 only the first occurrence is reachable.`
         );
       }
@@ -3416,7 +3545,15 @@ var BottomSheetEngine = class {
         setSize: (size) => {
           this.size = size;
         },
-        applySize: (size) => this.applySize(size)
+        applySize: (size) => this.applySize(size),
+        cancelInFlight: () => {
+          this.animation.cancel();
+        },
+        newCycle: () => {
+          this.newCycle();
+        },
+        isAnimating: () => this.animation.isAnimating,
+        resyncAfterCancel: () => this.resyncAfterResize()
       }));
     }
     this.teardowns.add(installSliderKeyboard({
@@ -3452,9 +3589,9 @@ var BottomSheetEngine = class {
       return;
     }
     if (this.emitBeforeSnap(target, previousId)) {
-      const restore = this.snaps.findById(previousId);
-      if (restore) {
-        void this.animation.animateTo(restore.size, 0);
+      const restore2 = this.snaps.findById(previousId);
+      if (restore2) {
+        void this.animation.animateTo(restore2.size, 0);
       }
       return;
     }
@@ -3577,6 +3714,72 @@ var BottomSheetEngine = class {
     sheetStack.update();
   }
 };
+function useEnginePropSync(engineRef, opts) {
+  const optsRef = react.useRef(opts);
+  optsRef.current = opts;
+  const allowedKey = (opts.allowed ?? opts.snapPoints.map((p) => p.id)).join(
+    "\0"
+  );
+  const defKey = opts.snapPoints.map((p) => `${p.id}
${String(p.size)}`).join("\0");
+  const defApplied = react.useRef(false);
+  react.useEffect(() => {
+    if (!defApplied.current) {
+      defApplied.current = true;
+      return;
+    }
+    const engine = engineRef.current;
+    if (!engine) return;
+    const current = optsRef.current;
+    engine.setSnapPoints(
+      current.snapPoints,
+      current.allowed ? Array.from(current.allowed) : void 0
+    );
+  }, [defKey]);
+  react.useEffect(() => {
+    if (!engineRef.current) return;
+    const ids = opts.allowed ? Array.from(opts.allowed) : opts.snapPoints.map((p) => p.id);
+    engineRef.current.setAllowed(ids);
+  }, [allowedKey]);
+  react.useEffect(() => {
+    if (!engineRef.current) return;
+    if (opts.backdropColor !== void 0) {
+      engineRef.current.setScrimColor(opts.backdropColor);
+    }
+  }, [opts.backdropColor]);
+  react.useEffect(() => {
+    if (!engineRef.current) return;
+    if (opts.backdropOpacity !== void 0) {
+      engineRef.current.setBackdropRange([0, opts.backdropOpacity]);
+    }
+  }, [opts.backdropOpacity]);
+  react.useEffect(() => {
+    if (!engineRef.current) return;
+    if (opts.radius !== void 0) {
+      engineRef.current.setRadius(opts.radius);
+    }
+  }, [opts.radius]);
+  react.useEffect(() => {
+    if (!engineRef.current) return;
+    if (opts.maxHeight !== void 0) {
+      engineRef.current.setMaxHeight(opts.maxHeight);
+    }
+  }, [opts.maxHeight]);
+  react.useEffect(() => {
+    if (opts.persistent !== void 0) {
+      engineRef.current?.setPersistent(opts.persistent);
+    }
+  }, [opts.persistent]);
+  react.useEffect(() => {
+    if (opts.disableClose !== void 0) {
+      engineRef.current?.setDisableClose(opts.disableClose);
+    }
+  }, [opts.disableClose]);
+  react.useEffect(() => {
+    if (opts.disableDrag !== void 0) {
+      engineRef.current?.setDisableDrag(opts.disableDrag);
+    }
+  }, [opts.disableDrag]);
+}
 
 // src/core/features/teleport.ts
 var resolveTeleportTarget = (target) => {
@@ -3671,6 +3874,12 @@ function useBottomSheet(opts) {
       engine.on("before-close", (payload) => {
         optsRef.current.onBeforeClose?.(payload);
       }),
+      engine.on("open", (payload) => {
+        optsRef.current.onOpen?.(payload.id);
+      }),
+      engine.on("close", () => {
+        optsRef.current.onClose?.();
+      }),
       engine.on("opened", (payload) => {
         optsRef.current.onOpened?.(payload.id);
       }),
@@ -3686,6 +3895,20 @@ function useBottomSheet(opts) {
         optsRef.current.onDragEnd?.(payload);
       })
     ];
+    if (optsRef.current.onDrag) {
+      offs.push(
+        engine.on("drag", (payload) => {
+          optsRef.current.onDrag?.(payload);
+        })
+      );
+    }
+    if (optsRef.current.onProgress) {
+      offs.push(
+        engine.on("progress", (payload) => {
+          optsRef.current.onProgress?.(payload);
+        })
+      );
+    }
     return () => {
       offs.forEach((off) => off());
       restoreTeleport?.();
@@ -3695,68 +3918,17 @@ function useBottomSheet(opts) {
       setMounted((n) => n + 1);
     };
   }, []);
-  const allowedKey = (opts.allowed ?? opts.snapPoints.map((p) => p.id)).join(
-    "\0"
-  );
-  const defKey = opts.snapPoints.map((p) => `${p.id}
${String(p.size)}`).join("\0");
-  const defApplied = react.useRef(false);
-  react.useEffect(() => {
-    if (!defApplied.current) {
-      defApplied.current = true;
-      return;
-    }
-    const engine = engineRef.current;
-    if (!engine) return;
-    const current = optsRef.current;
-    engine.setSnapPoints(
-      current.snapPoints,
-      current.allowed ? Array.from(current.allowed) : void 0
-    );
-  }, [defKey]);
-  react.useEffect(() => {
-    if (!engineRef.current) return;
-    const ids = opts.allowed ? Array.from(opts.allowed) : opts.snapPoints.map((p) => p.id);
-    engineRef.current.setAllowed(ids);
-  }, [allowedKey]);
-  react.useEffect(() => {
-    if (!engineRef.current) return;
-    if (opts.backdropColor !== void 0) {
-      engineRef.current.setScrimColor(opts.backdropColor);
-    }
-  }, [opts.backdropColor]);
-  react.useEffect(() => {
-    if (!engineRef.current) return;
-    if (opts.backdropOpacity !== void 0) {
-      engineRef.current.setBackdropRange([0, opts.backdropOpacity]);
-    }
-  }, [opts.backdropOpacity]);
-  react.useEffect(() => {
-    if (!engineRef.current) return;
-    if (opts.radius !== void 0) {
-      engineRef.current.setRadius(opts.radius);
-    }
-  }, [opts.radius]);
-  react.useEffect(() => {
-    if (!engineRef.current) return;
-    if (opts.maxHeight !== void 0) {
-      engineRef.current.setMaxHeight(opts.maxHeight);
-    }
-  }, [opts.maxHeight]);
-  react.useEffect(() => {
-    if (opts.persistent !== void 0) {
-      engineRef.current?.setPersistent(opts.persistent);
-    }
-  }, [opts.persistent]);
-  react.useEffect(() => {
-    if (opts.disableClose !== void 0) {
-      engineRef.current?.setDisableClose(opts.disableClose);
-    }
-  }, [opts.disableClose]);
-  react.useEffect(() => {
-    if (opts.disableDrag !== void 0) {
-      engineRef.current?.setDisableDrag(opts.disableDrag);
-    }
-  }, [opts.disableDrag]);
+  useEnginePropSync(engineRef, {
+    snapPoints: opts.snapPoints,
+    allowed: opts.allowed,
+    backdropColor: opts.backdropColor,
+    backdropOpacity: opts.backdropOpacity,
+    radius: opts.radius,
+    maxHeight: opts.maxHeight,
+    persistent: opts.persistent,
+    disableClose: opts.disableClose,
+    disableDrag: opts.disableDrag
+  });
   const subscribe = react.useCallback((fn) => {
     subscribersRef.current.add(fn);
     return () => subscribersRef.current.delete(fn);
@@ -3865,10 +4037,14 @@ var BottomSheet = react.forwardRef(
       scrimStages,
       onChange,
       onBeforeClose,
+      onOpen,
+      onClose,
       onOpened,
       onClosed,
       onDragStart,
       onDragEnd,
+      onDrag,
+      onProgress,
       ariaLabel = "Bottom sheet",
       ariaLabelledBy,
       noSSR = false,
@@ -3894,10 +4070,14 @@ var BottomSheet = react.forwardRef(
     } = useBottomSheet({
       ...engineOpts,
       onBeforeClose,
+      onOpen,
+      onClose,
       onOpened,
       onClosed,
       onDragStart,
-      onDragEnd
+      onDragEnd,
+      onDrag,
+      onProgress
     });
     const ariaModal = engineOpts.focusTrap === true;
     const lastAnnouncedRef = react.useRef("");
@@ -4181,7 +4361,7 @@ function installOverlaySwipe(deps) {
   };
 }
 
-// src/core/overlay.ts
+// src/core/overlay-options.ts
 var OVERLAY_PRESETS = Object.freeze({
   sheet: Object.freeze({
     enterAnimation: "slide",
@@ -4212,6 +4392,8 @@ var OVERLAY_PRESETS = Object.freeze({
     swipeToClose: false
   })
 });
+
+// src/core/overlay.ts
 var OverlayEngine = class {
   constructor(opts) {
     __publicField(this, "id", nextInstanceId("ovl"));
@@ -4246,7 +4428,7 @@ var OverlayEngine = class {
     __publicField(this, "detachSwipe", null);
     __publicField(this, "respectReducedMotionEnabled");
     __publicField(this, "isTop", true);
-    __publicField(this, "backPushed", false);
+    __publicField(this, "backMarker", null);
     __publicField(this, "movedToTarget", false);
     __publicField(this, "onOpenCb");
     __publicField(this, "onCloseCb");
@@ -4258,7 +4440,6 @@ var OverlayEngine = class {
     __publicField(this, "bus", createEventBus());
     __publicField(this, "detachEscape", null);
     __publicField(this, "detachBackdrop", null);
-    __publicField(this, "detachHardwareBack", null);
     __publicField(this, "releaseStackEntry", null);
     __publicField(this, "lifecycle");
     this.element = opts.element;
@@ -4288,7 +4469,7 @@ var OverlayEngine = class {
     this.onOpenCb = opts.onOpen;
     this.onCloseCb = opts.onClose;
     if (this.peekRaw !== void 0 && this.edge !== "bottom") {
-      console.warn(
+      devWarn(
         "[OverlayEngine] `peek` is only supported on edge: 'bottom' \u2014 ignoring."
       );
       this.peekRaw = void 0;
@@ -4355,10 +4536,9 @@ var OverlayEngine = class {
           this.element.style.opacity = "1";
           if (this.backdrop) {
             this.backdrop.style.opacity = String(this.backdropOpacity);
-            this.backdrop.style.pointerEvents = this.backdropOpacity > 0 ? "auto" : "none";
+            this.syncBackdropPointerEvents();
             if (this.backdropFilter) {
-              this.backdrop.style.backdropFilter = this.backdropFilter;
-              this.backdrop.style.webkitBackdropFilter = this.backdropFilter;
+              this.applyBackdropFilter(this.backdropFilter);
             }
           }
           try {
@@ -4378,8 +4558,7 @@ var OverlayEngine = class {
               this.backdrop.style.opacity = "0";
               this.backdrop.style.pointerEvents = "none";
               if (this.backdropFilter) {
-                this.backdrop.style.backdropFilter = "";
-                this.backdrop.style.webkitBackdropFilter = "";
+                this.applyBackdropFilter(void 0);
               }
             }
             this.element.setAttribute("data-state", "closed");
@@ -4414,7 +4593,10 @@ var OverlayEngine = class {
     this.isOpen_ = false;
     this.isAnimating_ = true;
     sheetStack.update();
-    this.popBackMarker(reason);
+    if (reason !== "back" && this.backMarker) {
+      popBackMarker(this.backMarker);
+    }
+    this.backMarker = null;
     this.element.setAttribute("data-state", "exiting");
     const dur = this.effectiveDuration();
     const transitionStr = `transform ${dur}ms ${this.exitEasing}, opacity ${dur}ms ease-in`;
@@ -4437,8 +4619,7 @@ var OverlayEngine = class {
           this.backdrop.style.opacity = "0";
           this.backdrop.style.pointerEvents = "none";
           if (this.backdropFilter) {
-            this.backdrop.style.backdropFilter = "";
-            this.backdrop.style.webkitBackdropFilter = "";
+            this.applyBackdropFilter(void 0);
           }
         }
         this.releaseInteractiveListeners();
@@ -4473,6 +4654,10 @@ var OverlayEngine = class {
     this.bus.clear();
     this.setWillChange(false);
     this.releaseInteractiveListeners();
+    if (this.backMarker) {
+      popBackMarker(this.backMarker);
+      this.backMarker = null;
+    }
     this.releaseStackEntry?.();
     this.releaseStackEntry = null;
     const hadOriginalParent = this.originalParent !== null;
@@ -4486,20 +4671,14 @@ var OverlayEngine = class {
     this.backdropOpacity = opacity;
     if (this.isOpen_ && this.backdrop) {
       this.backdrop.style.opacity = String(opacity);
+      this.syncBackdropPointerEvents();
     }
   }
   setBackdropFilter(filter) {
     if (this.destroyed) return;
     this.backdropFilter = filter;
     if (!this.isOpen_ || !this.backdrop) return;
-    const style = this.backdrop.style;
-    if (filter) {
-      this.backdrop.style.backdropFilter = filter;
-      style.webkitBackdropFilter = filter;
-    } else {
-      this.backdrop.style.backdropFilter = "";
-      style.webkitBackdropFilter = "";
-    }
+    this.applyBackdropFilter(filter);
   }
   setSwipeToClose(config) {
     if (this.destroyed) return;
@@ -4568,16 +4747,10 @@ var OverlayEngine = class {
     if (this.isOpen_ && this.backdrop) {
       if (merged.backdropOpacity !== void 0) {
         this.backdrop.style.opacity = String(this.backdropOpacity);
+        this.syncBackdropPointerEvents();
       }
       if (merged.backdropFilter !== void 0) {
-        const style = this.backdrop.style;
-        if (this.backdropFilter) {
-          this.backdrop.style.backdropFilter = this.backdropFilter;
-          style.webkitBackdropFilter = this.backdropFilter;
-        } else {
-          this.backdrop.style.backdropFilter = "";
-          style.webkitBackdropFilter = "";
-        }
+        this.applyBackdropFilter(this.backdropFilter);
       }
     }
     if (opts.duration !== void 0) this.duration = opts.duration;
@@ -4646,19 +4819,6 @@ var OverlayEngine = class {
   effectiveDuration() {
     return this.respectReducedMotionEnabled && prefersReducedMotion() ? 0 : this.duration;
   }
-  popBackMarker(reason) {
-    if (!this.backPushed) return;
-    this.backPushed = false;
-    if (reason === "back") return;
-    const state = history.state;
-    if (state && state.__bsOverlay === this.id) {
-      try {
-        history.back();
-      } catch {
-        return;
-      }
-    }
-  }
   resolvePeekPx(raw) {
     if (typeof raw === "number") return Math.max(0, raw);
     try {
@@ -4712,6 +4872,21 @@ var OverlayEngine = class {
       this.backdrop.style.pointerEvents = "none";
     }
   }
+  syncBackdropPointerEvents() {
+    if (!this.backdrop) return;
+    this.backdrop.style.pointerEvents = this.backdropOpacity > 0 ? "auto" : "none";
+  }
+  applyBackdropFilter(filter) {
+    if (!this.backdrop) return;
+    const style = this.backdrop.style;
+    if (filter) {
+      this.backdrop.style.backdropFilter = filter;
+      style.webkitBackdropFilter = filter;
+    } else {
+      this.backdrop.style.backdropFilter = "";
+      style.webkitBackdropFilter = "";
+    }
+  }
   setWillChange(on) {
     this.element.style.willChange = on ? "transform, opacity" : "";
     if (this.backdrop) {
@@ -4759,21 +4934,6 @@ var OverlayEngine = class {
       this.backdrop.addEventListener("click", handler);
       this.detachBackdrop = () => this.backdrop?.removeEventListener("click", handler);
     }
-    if (this.closeOnBackEnabled && typeof window !== "undefined" && !this.detachHardwareBack) {
-      try {
-        history.pushState({ __bsOverlay: this.id }, "");
-        this.backPushed = true;
-      } catch {
-      }
-      const onPop = () => {
-        if (this.isOpen_ && this.isTop) {
-          this.backPushed = false;
-          void this.close("back");
-        }
-      };
-      window.addEventListener("popstate", onPop);
-      this.detachHardwareBack = () => window.removeEventListener("popstate", onPop);
-    }
     if (this.closeOnOutsidePointerEnabled && !this.detachOutsidePointer) {
       const handler = (e) => {
         if (!this.isOpen_) return;
@@ -4786,14 +4946,20 @@ var OverlayEngine = class {
       document.addEventListener("pointerdown", handler, true);
       this.detachOutsidePointer = () => document.removeEventListener("pointerdown", handler, true);
     }
+    if (this.closeOnBackEnabled && this.backMarker === null && typeof window !== "undefined") {
+      this.backMarker = pushBackMarker({
+        isOpen: () => this.isOpen_,
+        isTop: () => this.isTop,
+        close: () => this.close("back"),
+        markerState: () => ({ __bsOverlay: this.id })
+      });
+    }
   }
   releaseInteractiveListeners() {
     this.detachEscape?.();
     this.detachEscape = null;
     this.detachBackdrop?.();
     this.detachBackdrop = null;
-    this.detachHardwareBack?.();
-    this.detachHardwareBack = null;
     this.detachSwipe?.();
     this.detachSwipe = null;
     this.detachOutsidePointer?.();
@@ -4944,6 +5110,8 @@ var Overlay = react.forwardRef(function Overlay2(props, ref) {
     )
   ] });
 });
+
+// src/react/config-validation.ts
 var SUPPORTED_VERSION = 1;
 var TOP_LEVEL_KEYS = /* @__PURE__ */ new Set([
   "version",
@@ -4968,7 +5136,7 @@ var warnUnknownKeys = (obj, allowed, context) => {
   if (!obj || typeof obj !== "object") return;
   const unknown = Object.keys(obj).filter((k) => !allowed.has(k));
   if (unknown.length === 0) return;
-  console.warn(
+  devWarn(
     `[BottomSheetFromConfig] Unknown ${unknown.length === 1 ? "key" : "keys"} in ${context}: ${unknown.map((k) => `"${k}"`).join(", ")}. Allowed: ${[...allowed].join(", ")}. Likely a typo \u2014 values ignored.`
   );
 };
@@ -4978,7 +5146,7 @@ function validateConfig(config) {
   validatedConfigs.add(config);
   let ok = true;
   if (config.version !== SUPPORTED_VERSION) {
-    console.warn(
+    devWarn(
       `[BottomSheetFromConfig] Unsupported config version ${String(
         config.version
       )}; expected ${SUPPORTED_VERSION}. Falling back to defaults.`
@@ -4986,7 +5154,7 @@ function validateConfig(config) {
     return false;
   }
   if (!Array.isArray(config.snapPoints) || config.snapPoints.length === 0) {
-    console.warn(
+    devWarn(
       "[BottomSheetFromConfig] config.snapPoints is missing or empty; using a single full-height fallback snap."
     );
     ok = false;