@surdeddd/bottom-sheet 0.10.0 → 0.12.0

package/dist/svelte.cjs

@@ -462,46 +462,202 @@ 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 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;
+  }
+  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(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 () => {
@@ -511,92 +667,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
@@ -866,11 +969,15 @@ function createMaxHeightController(deps) {
 
 // src/core/features/fit-measurement.ts
 var measureSheetNatural = (element, content, vertical) => {
-  if (!content) {
-    return vertical ? element.offsetHeight : element.offsetWidth;
-  }
   const axis = vertical ? "height" : "width";
   const sheetStyle = element.style;
+  if (!content) {
+    const prev = sheetStyle[axis];
+    sheetStyle[axis] = "auto";
+    const poked2 = vertical ? element.offsetHeight : element.offsetWidth;
+    sheetStyle[axis] = prev;
+    return poked2;
+  }
   const cs = content.style;
   const prevSheet = sheetStyle[axis];
   const prevFlex = cs.flex;
@@ -2449,7 +2556,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;
@@ -2470,9 +2577,9 @@ function installScrimStages(deps, opts) {
   const resolveActive = () => {
     const state2 = deps.getState();
     if (state2.size === 0) {
-      return entries.find((e) => matchesId(e.def, state2.activeId)) ?? null;
+      return entries2.find((e) => matchesId(e.def, state2.activeId)) ?? null;
     }
-    return entries.find((e) => matchesId(e.def, state2.activeId)) ?? entries.find((e) => matchesRange(e.def, state2.progress)) ?? null;
+    return entries2.find((e) => matchesId(e.def, state2.activeId)) ?? entries2.find((e) => matchesRange(e.def, state2.progress)) ?? null;
   };
   const hide = (entry, animate) => {
     entry.inFlight?.cancel();
@@ -2521,13 +2628,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) {
@@ -2786,17 +2893,12 @@ 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();
-          const current = this.snaps.findById(this.activeId);
-          if (current) {
-            this.size = current.size;
-            this.applySize(this.size);
-            this.updateAriaSlider();
-          }
+          this.healActiveSnap();
           io.disconnect();
           return;
         }
@@ -2960,6 +3062,8 @@ var BottomSheetEngine = class {
       const vt = document.startViewTransition(() => {
         this.applySize(target.size);
       });
+      vt.ready?.catch(() => {
+      });
       this.currentViewTransition = vt;
       try {
         await vt.finished;
@@ -3211,11 +3315,16 @@ var BottomSheetEngine = class {
     this.maxHeight.clampTo();
     this.scrim.invalidateOpacityCache();
     if (this.gesture?.isDragging) return;
+    this.healActiveSnap();
+  }
+  healActiveSnap() {
     const current = this.snaps.findById(this.activeId);
-    if (current) {
-      this.size = current.size;
-      this.applySize(this.size);
-      this.updateAriaSlider();
+    if (!current) return;
+    this.size = current.size;
+    this.applySize(this.size);
+    this.updateAriaSlider();
+    if (this.size > 0 && !this.lifecycle.isInstalled && !this.opening && !this.animation.isAnimating) {
+      this.emitOpenSequence(this.activeId);
     }
   }
   destroy() {
@@ -3504,9 +3613,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;
     }
@@ -3744,12 +3853,12 @@ function createBottomSheet(opts) {
     getEngine: () => engine
   };
 }
-var root_1 = $2__namespace.from_html(`<div class="bs-backdrop" aria-hidden="true"></div>`);
-var root_3 = $2__namespace.from_html(`<div class="bs-header"><!></div>`);
-var root_5 = $2__namespace.from_html(`<div class="bs-footer"><!></div>`);
-var root_6 = $2__namespace.from_html(`<div class="bs-button-slot" data-side="left"><!></div>`);
-var root_7 = $2__namespace.from_html(`<div class="bs-button-slot" data-side="right"><!></div>`);
-var root = $2__namespace.from_html(`<div class="bs-root"><!> <div class="bs-screen"><!></div> <section class="bs-sheet" role="dialog"><div class="bs-handle" role="slider" tabindex="0" aria-label="Resize sheet" aria-valuemin="0" aria-valuemax="0" aria-valuenow="0"></div> <!> <div class="bs-content" tabindex="0" role="region" aria-label="Sheet content"><!></div> <!> <span class="bs-sr-only" role="status" aria-live="polite"> </span></section> <!> <!></div>`);
+var root = $2__namespace.from_html(`<div class="bs-backdrop" aria-hidden="true"></div>`);
+var root_1 = $2__namespace.from_html(`<div class="bs-header"><!></div>`);
+var root_2 = $2__namespace.from_html(`<div class="bs-footer"><!></div>`);
+var root_3 = $2__namespace.from_html(`<div class="bs-button-slot" data-side="left"><!></div>`);
+var root_4 = $2__namespace.from_html(`<div class="bs-button-slot" data-side="right"><!></div>`);
+var root_5 = $2__namespace.from_html(`<div class="bs-root"><!> <div class="bs-screen"><!></div> <section class="bs-sheet" role="dialog"><div class="bs-handle" role="slider" tabindex="0" aria-label="Resize sheet" aria-valuemin="0" aria-valuemax="0" aria-valuenow="0"></div> <!> <div class="bs-content" tabindex="0" role="region" aria-label="Sheet content"><!></div> <!> <span class="bs-sr-only" role="status" aria-live="polite"> </span></section> <!> <!></div>`);
 function BottomSheet($$anchor, $$props) {
   $2__namespace.push($$props, true);
   let mode = $2__namespace.prop($$props, "mode", 3, "bottom"), animation = $2__namespace.prop($$props, "animation", 3, "spring"), focusTrap = $2__namespace.prop($$props, "focusTrap", 3, false), closeOnEscape = $2__namespace.prop($$props, "closeOnEscape", 3, true), closeOnBack = $2__namespace.prop($$props, "closeOnBack", 3, false), lockBodyScroll2 = $2__namespace.prop($$props, "lockBodyScroll", 3, true), rubberBand2 = $2__namespace.prop($$props, "rubberBand", 3, true), backdrop = $2__namespace.prop($$props, "backdrop", 3, true), closeOnBackdrop = $2__namespace.prop($$props, "closeOnBackdrop", 3, true), persistent = $2__namespace.prop($$props, "persistent", 3, false), disableClose = $2__namespace.prop($$props, "disableClose", 3, false), disableDrag = $2__namespace.prop($$props, "disableDrag", 3, false), closeOnRouteChange = $2__namespace.prop($$props, "closeOnRouteChange", 3, false), stackEffect = $2__namespace.prop($$props, "stackEffect", 3, false), teleport = $2__namespace.prop($$props, "teleport", 3, false), openProp = $2__namespace.prop($$props, "open", 15), snap = $2__namespace.prop($$props, "snap", 15), ariaLabel = $2__namespace.prop($$props, "ariaLabel", 3, "Bottom sheet");
@@ -3931,11 +4040,11 @@ function BottomSheet($$anchor, $$props) {
     getState,
     getEngine
   };
-  var div = root();
+  var div = root_5();
   var node = $2__namespace.child(div);
   {
     var consequent = ($$anchor2) => {
-      var div_1 = root_1();
+      var div_1 = root();
       $2__namespace.bind_this(div_1, ($$value) => $2__namespace.set(backdropEl, $$value), () => $2__namespace.get(backdropEl));
       $2__namespace.delegated("click", div_1, function(...$$args) {
         (closeOnBackdrop() ? () => {
@@ -3969,7 +4078,7 @@ function BottomSheet($$anchor, $$props) {
   var node_3 = $2__namespace.sibling(div_3, 2);
   {
     var consequent_2 = ($$anchor2) => {
-      var div_4 = root_3();
+      var div_4 = root_1();
       var node_4 = $2__namespace.child(div_4);
       $2__namespace.snippet(node_4, () => $$props.header, () => $2__namespace.get(viewState));
       $2__namespace.reset(div_4);
@@ -3997,7 +4106,7 @@ function BottomSheet($$anchor, $$props) {
   var node_7 = $2__namespace.sibling(div_5, 2);
   {
     var consequent_4 = ($$anchor2) => {
-      var div_6 = root_5();
+      var div_6 = root_2();
       var node_8 = $2__namespace.child(div_6);
       $2__namespace.snippet(node_8, () => $$props.footer, () => $2__namespace.get(viewState));
       $2__namespace.reset(div_6);
@@ -4015,7 +4124,7 @@ function BottomSheet($$anchor, $$props) {
   var node_9 = $2__namespace.sibling(section, 2);
   {
     var consequent_5 = ($$anchor2) => {
-      var div_7 = root_6();
+      var div_7 = root_3();
       var node_10 = $2__namespace.child(div_7);
       $2__namespace.snippet(node_10, () => $$props.leftButton);
       $2__namespace.reset(div_7);
@@ -4029,7 +4138,7 @@ function BottomSheet($$anchor, $$props) {
   var node_11 = $2__namespace.sibling(node_9, 2);
   {
     var consequent_6 = ($$anchor2) => {
-      var div_8 = root_7();
+      var div_8 = root_4();
       var node_12 = $2__namespace.child(div_8);
       $2__namespace.snippet(node_12, () => $$props.rightButton);
       $2__namespace.reset(div_8);