@surdeddd/bottom-sheet 0.23.2 → 0.23.3

package/dist/element.js

@@ -97,9 +97,10 @@ function buildTransformTemplate(axis) {
       return (offset) => `translate3d(${offset}px, 0, 0)`;
   }
 }
-var layoutAxis;
+var offsetFromMatrix, layoutAxis;
 var init_transform = __esm({
   "src/core/primitives/transform.ts"() {
+    offsetFromMatrix = (axis, m) => axis === "bottom" ? m.m42 : axis === "top" ? -m.m42 : axis === "left" ? -m.m41 : m.m41;
     layoutAxis = (axis) => axis === "left" || axis === "right" ? "width" : "height";
   }
 });
@@ -1286,7 +1287,7 @@ var init_animation = __esm({
         }
         const step = (now) => {
           if (cancelled) return;
-          const elapsed = now - start;
+          const elapsed = Math.max(0, now - start);
           const t = Math.min(elapsed / duration, 1);
           const value = from + (to - from) * easing(t);
           onUpdate(value);
@@ -1344,8 +1345,8 @@ var init_spring = __esm({
         resolveFn = resolve;
         const step = (now) => {
           if (cancelled) return;
-          const dt = Math.min((now - lastTime) / 1e3, MAX_DT);
-          lastTime = now;
+          const dt = Math.min(Math.max(0, now - lastTime) / 1e3, MAX_DT);
+          lastTime = Math.max(lastTime, now);
           const steps = Math.max(1, Math.ceil(dt * 240));
           const subDt = dt / steps;
           let stepsLeft = steps;
@@ -1458,10 +1459,11 @@ function sampleTweenSettle(from, to, durationMs, easing) {
     durationMs
   };
 }
-var SIM_HZ, SAMPLE_STRIDE, MAX_SIM_MS;
+var SETTLE_ANIMATION_ID, SIM_HZ, SAMPLE_STRIDE, MAX_SIM_MS;
 var init_waapi_settle = __esm({
   "src/core/animation/waapi-settle.ts"() {
     init_spring();
+    SETTLE_ANIMATION_ID = "bs-settle";
     SIM_HZ = 240;
     SAMPLE_STRIDE = 4;
     MAX_SIM_MS = 3e3;
@@ -1487,6 +1489,7 @@ var init_animation_runner = __esm({
         __publicField(this, "isDragging");
         __publicField(this, "applyAux");
         __publicField(this, "getTransformFor");
+        __publicField(this, "readShownSize");
         __publicField(this, "settleWaapi");
         __publicField(this, "currentWaapi", null);
         __publicField(this, "animationKind");
@@ -1506,6 +1509,7 @@ var init_animation_runner = __esm({
         this.isDragging = deps.isDragging;
         this.applyAux = deps.applyAux;
         this.getTransformFor = deps.getTransformFor;
+        this.readShownSize = deps.readShownSize;
         this.settleWaapi = opts.settleAnimation === "waapi";
         const preset = resolveAnimationPreset(opts.animation);
         this.animationKind = preset.kind;
@@ -1538,10 +1542,12 @@ var init_animation_runner = __esm({
         const entry = this.currentWaapi;
         this.currentWaapi = null;
         entry.stop();
+        const size = this.readShownSize?.() ?? entry.sizeNow();
         try {
           entry.anim.cancel();
         } catch {
         }
+        this.applySizeFn(size);
       }
       cancel() {
         this.currentTween?.cancel();
@@ -1551,6 +1557,7 @@ var init_animation_runner = __esm({
       async animateTo(target, velocityPxPerMs) {
         if (target === this.getSize()) {
           if (!this.isAnimating && !this.isDragging()) {
+            this.applySizeFn(target);
             this.element.style.willChange = "";
           }
           return;
@@ -1587,6 +1594,7 @@ var init_animation_runner = __esm({
             return;
           }
         }
+        let current = false;
         if (this.animationKind === "spring") {
           const spring = runSpring({
             from: this.getSize(),
@@ -1597,7 +1605,8 @@ var init_animation_runner = __esm({
           });
           this.currentSpring = spring;
           await spring.promise;
-          if (this.currentSpring === spring) this.currentSpring = null;
+          current = this.currentSpring === spring;
+          if (current) this.currentSpring = null;
         } else {
           const tw = tween({
             from: this.getSize(),
@@ -1608,11 +1617,15 @@ var init_animation_runner = __esm({
           });
           this.currentTween = tw;
           await tw.promise;
-          if (this.currentTween === tw) this.currentTween = null;
+          current = this.currentTween === tw;
+          if (current) this.currentTween = null;
         }
         if (!this.isAnimating) {
           this.getRootEl()?.removeAttribute("data-animating");
-          if (!this.isDragging()) this.element.style.willChange = "";
+          if (!this.isDragging()) {
+            if (current) this.applySizeFn(this.getSize());
+            this.element.style.willChange = "";
+          }
         }
       }
       async runWaapiSettle(samples, target) {
@@ -1626,11 +1639,11 @@ var init_animation_runner = __esm({
           easing: "linear",
           fill: "forwards"
         });
+        anim.id = SETTLE_ANIMATION_ID;
         let stopped = false;
         let auxRaf = 0;
         const lastIdx = samples.values.length - 1;
-        const auxTick = () => {
-          if (stopped) return;
+        const sizeNow = () => {
           const at = Math.min(
             (Number(anim.currentTime) || 0) / samples.stepMs,
             lastIdx
@@ -1638,7 +1651,11 @@ var init_animation_runner = __esm({
           const idx = Math.floor(at);
           const from = samples.values[idx];
           const to = samples.values[Math.min(idx + 1, lastIdx)];
-          applyAux(from + (to - from) * (at - idx));
+          return from + (to - from) * (at - idx);
+        };
+        const auxTick = () => {
+          if (stopped) return;
+          applyAux(sizeNow());
           auxRaf = requestAnimationFrame(auxTick);
         };
         auxRaf = requestAnimationFrame(auxTick);
@@ -1647,7 +1664,8 @@ var init_animation_runner = __esm({
           stop: () => {
             stopped = true;
             cancelAnimationFrame(auxRaf);
-          }
+          },
+          sizeNow
         };
         this.currentWaapi = entry;
         try {
@@ -2886,6 +2904,7 @@ var init_BottomSheetCore = __esm({
         __publicField(this, "closeOnBack");
         __publicField(this, "routedTo");
         __publicField(this, "fitContentToSnap");
+        __publicField(this, "settleAnimation");
         __publicField(this, "persistent");
         __publicField(this, "disableCloseFlag");
         __publicField(this, "disableDragFlag");
@@ -2990,6 +3009,11 @@ var init_BottomSheetCore = __esm({
               const cap = this.snaps.getMaxAxisSize();
               const shown = cap > 0 && !this.allowOvershoot ? Math.min(size, cap) : size;
               return this.transformTemplate(cap - shown);
+            },
+            readShownSize: () => {
+              const shown = getComputedStyle(this.element).transform;
+              if (!shown || shown === "none") return void 0;
+              return this.snaps.getMaxAxisSize() - offsetFromMatrix(this.mode, new DOMMatrix(shown));
             }
           },
           resolved.animation
@@ -3004,6 +3028,7 @@ var init_BottomSheetCore = __esm({
         this.closeOnBack = resolved.closeOnBack;
         this.routedTo = opts.routedTo;
         this.fitContentToSnap = opts.fitContentToSnap === true;
+        this.settleAnimation = opts.settleAnimation;
         this.persistent = resolved.persistent;
         this.disableCloseFlag = resolved.disableClose;
         this.disableDragFlag = resolved.disableDrag;
@@ -3106,7 +3131,8 @@ var init_BottomSheetCore = __esm({
             closeOnRouteChange: this.closeOnRouteChange,
             persistKey: this.persistKey,
             autoCollapseAfter,
-            fitContentToSnap: this.fitContentToSnap
+            fitContentToSnap: this.fitContentToSnap,
+            settleAnimation: this.settleAnimation
           },
           isDestroyed: () => this.destroyed,
           isDragging: () => this.isDraggingAny(),
@@ -3998,7 +4024,11 @@ var init_BottomSheetCore = __esm({
         const offset = cap - clamped;
         const style = this.element.style;
         if (!skipTransform) style.transform = this.transformTemplate(offset);
-        if (this.sizeWriteSentinel.shouldWrite(clamped, SIZE_WRITE_EPSILON)) {
+        const sizeChanged = this.sizeWriteSentinel.shouldWrite(
+          clamped,
+          this.animation.isAnimating || this.isDraggingAny() ? SIZE_WRITE_EPSILON : 0
+        );
+        if (sizeChanged) {
           style.setProperty("--bs-size", `${clamped}px`);
           if (this.scrimParent) {
             this.scrimParent.style.setProperty("--bs-size", `${clamped}px`);
@@ -4025,7 +4055,7 @@ var init_BottomSheetCore = __esm({
           }
         }
         this.scrim.applyOpacity(progress, progressChanged);
-        if (progressChanged && this.bus.listenerCount("progress") > 0) {
+        if ((progressChanged || sizeChanged) && this.bus.listenerCount("progress") > 0) {
           this.progressPayload.value = progress;
           this.progressPayload.size = clamped;
           this.emit("progress", this.progressPayload);
@@ -4569,10 +4599,14 @@ function contentFitFeature() {
         return;
       }
       const sheet = ctx.element;
+      const waapi = ctx.options.settleAnimation === "waapi";
       let inset = 0;
       let unpaddedMax = -1;
       let top = 0;
       let resting = false;
+      let liftMax = 0;
+      let followed = null;
+      let follower = null;
       const put = (name, px) => sheet.style.setProperty(name, `${px}px`);
       const hiddenAt = (size) => sheet.dataset.mode === "bottom" ? Math.max(0, ctx.getMaxAxisSize() - size) : 0;
       const follow = (size) => {
@@ -4586,8 +4620,45 @@ function contentFitFeature() {
           top = limit;
         }
       };
+      const unfollow = () => {
+        follower?.cancel();
+        follower = null;
+        followed = null;
+      };
+      const followSettle = () => {
+        if (followed?.playState === "running") return;
+        const settleAnim = sheet.getAnimations?.().find((a) => a.id === SETTLE_ANIMATION_ID);
+        const footer = sheet.querySelector(".bs-footer");
+        if (!settleAnim || !footer) return;
+        const effect = settleAnim.effect;
+        unfollow();
+        const own = footer.animate(
+          effect.getKeyframes().map((k) => ({
+            offset: k.computedOffset,
+            transform: `translateY(${-Math.min(
+              Math.max(0, parseFloat(String(k.transform).split(",")[1]) || 0),
+              liftMax
+            )}px)`
+          })),
+          {
+            duration: effect.getTiming().duration,
+            easing: "linear",
+            fill: "forwards"
+          }
+        );
+        follower = own;
+        followed = settleAnim;
+        const done = () => {
+          if (followed === settleAnim) unfollow();
+        };
+        settleAnim.ready.then(() => {
+          if (follower === own) own.startTime = settleAnim.startTime;
+        }, done);
+        settleAnim.finished.then(done, done);
+      };
       const settle = () => {
         if (ctx.isDestroyed()) return;
+        unfollow();
         const size = ctx.getSize();
         if (!resting) {
           unpaddedMax = -1;
@@ -4595,7 +4666,6 @@ function contentFitFeature() {
         }
         inset = hiddenAt(size);
         put(INSET_VAR, inset);
-        put(SIZE_VAR, size);
         put(CAP_VAR, ctx.getMaxAxisSize());
         if (!resting) {
           resting = true;
@@ -4607,9 +4677,13 @@ function contentFitFeature() {
         if (resting) {
           resting = false;
           sheet.setAttribute(FIT_ATTR, "moving");
-          put(LIFT_VAR, scroller.offsetHeight);
+          liftMax = scroller.offsetHeight;
+          put(LIFT_VAR, liftMax);
         }
         follow(size);
+        if (waapi && ctx.isAnimating() && sheet.dataset.mode === "bottom") {
+          followSettle();
+        }
       };
       const moving = () => ctx.isAnimating() || ctx.isDragging();
       const whenIdle = () => {
@@ -4622,13 +4696,20 @@ function contentFitFeature() {
       );
       const offSnap = ctx.on("snap", settle);
       const offDragStart = ctx.on("dragstart", () => move(ctx.getSize()));
+      const offBeforeSnap = ctx.on("before-snap", () => {
+        queueMicrotask(() => {
+          if (!ctx.isDestroyed() && ctx.isAnimating()) move(ctx.getSize());
+        });
+      });
       const observer = typeof ResizeObserver === "undefined" ? null : new ResizeObserver(whenIdle);
       observer?.observe(document.documentElement);
       window.addEventListener("orientationchange", whenIdle);
       return () => {
+        unfollow();
         offProgress();
         offSnap();
         offDragStart();
+        offBeforeSnap();
         observer?.disconnect();
         window.removeEventListener("orientationchange", whenIdle);
         sheet.removeAttribute(FIT_ATTR);
@@ -4639,11 +4720,11 @@ function contentFitFeature() {
     }
   };
 }
-var INSET_VAR, SIZE_VAR, CAP_VAR, LIFT_VAR, FIT_ATTR;
+var INSET_VAR, CAP_VAR, LIFT_VAR, FIT_ATTR;
 var init_content_fit = __esm({
   "src/core/features/content-fit.ts"() {
+    init_waapi_settle();
     INSET_VAR = "--bs-content-inset";
-    SIZE_VAR = "--bs-size";
     CAP_VAR = "--bs-max-size";
     LIFT_VAR = "--bs-footer-lift-max";
     FIT_ATTR = "data-bs-fit-content";

package/dist/features.cjs

@@ -468,9 +468,11 @@ function visualViewportFeature() {
   };
 }
 
+// src/core/animation/waapi-settle.ts
+var SETTLE_ANIMATION_ID = "bs-settle";
+
 // src/core/features/content-fit.ts
 var INSET_VAR = "--bs-content-inset";
-var SIZE_VAR = "--bs-size";
 var CAP_VAR = "--bs-max-size";
 var LIFT_VAR = "--bs-footer-lift-max";
 var FIT_ATTR = "data-bs-fit-content";
@@ -483,10 +485,14 @@ function contentFitFeature() {
         return;
       }
       const sheet = ctx.element;
+      const waapi = ctx.options.settleAnimation === "waapi";
       let inset = 0;
       let unpaddedMax = -1;
       let top = 0;
       let resting = false;
+      let liftMax = 0;
+      let followed = null;
+      let follower = null;
       const put = (name, px) => sheet.style.setProperty(name, `${px}px`);
       const hiddenAt = (size) => sheet.dataset.mode === "bottom" ? Math.max(0, ctx.getMaxAxisSize() - size) : 0;
       const follow = (size) => {
@@ -500,8 +506,45 @@ function contentFitFeature() {
           top = limit;
         }
       };
+      const unfollow = () => {
+        follower?.cancel();
+        follower = null;
+        followed = null;
+      };
+      const followSettle = () => {
+        if (followed?.playState === "running") return;
+        const settleAnim = sheet.getAnimations?.().find((a) => a.id === SETTLE_ANIMATION_ID);
+        const footer = sheet.querySelector(".bs-footer");
+        if (!settleAnim || !footer) return;
+        const effect = settleAnim.effect;
+        unfollow();
+        const own = footer.animate(
+          effect.getKeyframes().map((k) => ({
+            offset: k.computedOffset,
+            transform: `translateY(${-Math.min(
+              Math.max(0, parseFloat(String(k.transform).split(",")[1]) || 0),
+              liftMax
+            )}px)`
+          })),
+          {
+            duration: effect.getTiming().duration,
+            easing: "linear",
+            fill: "forwards"
+          }
+        );
+        follower = own;
+        followed = settleAnim;
+        const done = () => {
+          if (followed === settleAnim) unfollow();
+        };
+        settleAnim.ready.then(() => {
+          if (follower === own) own.startTime = settleAnim.startTime;
+        }, done);
+        settleAnim.finished.then(done, done);
+      };
       const settle = () => {
         if (ctx.isDestroyed()) return;
+        unfollow();
         const size = ctx.getSize();
         if (!resting) {
           unpaddedMax = -1;
@@ -509,7 +552,6 @@ function contentFitFeature() {
         }
         inset = hiddenAt(size);
         put(INSET_VAR, inset);
-        put(SIZE_VAR, size);
         put(CAP_VAR, ctx.getMaxAxisSize());
         if (!resting) {
           resting = true;
@@ -521,9 +563,13 @@ function contentFitFeature() {
         if (resting) {
           resting = false;
           sheet.setAttribute(FIT_ATTR, "moving");
-          put(LIFT_VAR, scroller.offsetHeight);
+          liftMax = scroller.offsetHeight;
+          put(LIFT_VAR, liftMax);
         }
         follow(size);
+        if (waapi && ctx.isAnimating() && sheet.dataset.mode === "bottom") {
+          followSettle();
+        }
       };
       const moving = () => ctx.isAnimating() || ctx.isDragging();
       const whenIdle = () => {
@@ -536,13 +582,20 @@ function contentFitFeature() {
       );
       const offSnap = ctx.on("snap", settle);
       const offDragStart = ctx.on("dragstart", () => move(ctx.getSize()));
+      const offBeforeSnap = ctx.on("before-snap", () => {
+        queueMicrotask(() => {
+          if (!ctx.isDestroyed() && ctx.isAnimating()) move(ctx.getSize());
+        });
+      });
       const observer = typeof ResizeObserver === "undefined" ? null : new ResizeObserver(whenIdle);
       observer?.observe(document.documentElement);
       window.addEventListener("orientationchange", whenIdle);
       return () => {
+        unfollow();
         offProgress();
         offSnap();
         offDragStart();
+        offBeforeSnap();
         observer?.disconnect();
         window.removeEventListener("orientationchange", whenIdle);
         sheet.removeAttribute(FIT_ATTR);

package/dist/features.d.cts

@@ -1,6 +1,6 @@
-export { a as autoCollapseFeature, c as contentSwipeFeature, d as defaultEngineFeatures, p as persistFeature, r as routeFeature, v as visualViewportFeature } from './default-features-DkG9aho0.cjs';
-import { E as EngineFeature } from './BottomSheetCore-CQStdVy2.cjs';
-export { a as EngineFeatureContext, b as EngineFeatureOptions, c as EngineFeatureStage } from './BottomSheetCore-CQStdVy2.cjs';
+export { a as autoCollapseFeature, c as contentSwipeFeature, d as defaultEngineFeatures, p as persistFeature, r as routeFeature, v as visualViewportFeature } from './default-features-CTJb8Wdk.cjs';
+import { E as EngineFeature } from './BottomSheetCore-CaJwHnxY.cjs';
+export { a as EngineFeatureContext, b as EngineFeatureOptions, c as EngineFeatureStage } from './BottomSheetCore-CaJwHnxY.cjs';
 import './transform-jVfAikE9.cjs';
 
 declare function contentFitFeature(): EngineFeature;

package/dist/features.d.ts

@@ -1,6 +1,6 @@
-export { a as autoCollapseFeature, c as contentSwipeFeature, d as defaultEngineFeatures, p as persistFeature, r as routeFeature, v as visualViewportFeature } from './default-features-C3cilcW9.js';
-import { E as EngineFeature } from './BottomSheetCore-9i-Uh6T3.js';
-export { a as EngineFeatureContext, b as EngineFeatureOptions, c as EngineFeatureStage } from './BottomSheetCore-9i-Uh6T3.js';
+export { a as autoCollapseFeature, c as contentSwipeFeature, d as defaultEngineFeatures, p as persistFeature, r as routeFeature, v as visualViewportFeature } from './default-features-BJx7J0NH.js';
+import { E as EngineFeature } from './BottomSheetCore-COvILxmR.js';
+export { a as EngineFeatureContext, b as EngineFeatureOptions, c as EngineFeatureStage } from './BottomSheetCore-COvILxmR.js';
 import './transform-jVfAikE9.js';
 
 declare function contentFitFeature(): EngineFeature;

package/dist/features.js

@@ -466,9 +466,11 @@ function visualViewportFeature() {
   };
 }
 
+// src/core/animation/waapi-settle.ts
+var SETTLE_ANIMATION_ID = "bs-settle";
+
 // src/core/features/content-fit.ts
 var INSET_VAR = "--bs-content-inset";
-var SIZE_VAR = "--bs-size";
 var CAP_VAR = "--bs-max-size";
 var LIFT_VAR = "--bs-footer-lift-max";
 var FIT_ATTR = "data-bs-fit-content";
@@ -481,10 +483,14 @@ function contentFitFeature() {
         return;
       }
       const sheet = ctx.element;
+      const waapi = ctx.options.settleAnimation === "waapi";
       let inset = 0;
       let unpaddedMax = -1;
       let top = 0;
       let resting = false;
+      let liftMax = 0;
+      let followed = null;
+      let follower = null;
       const put = (name, px) => sheet.style.setProperty(name, `${px}px`);
       const hiddenAt = (size) => sheet.dataset.mode === "bottom" ? Math.max(0, ctx.getMaxAxisSize() - size) : 0;
       const follow = (size) => {
@@ -498,8 +504,45 @@ function contentFitFeature() {
           top = limit;
         }
       };
+      const unfollow = () => {
+        follower?.cancel();
+        follower = null;
+        followed = null;
+      };
+      const followSettle = () => {
+        if (followed?.playState === "running") return;
+        const settleAnim = sheet.getAnimations?.().find((a) => a.id === SETTLE_ANIMATION_ID);
+        const footer = sheet.querySelector(".bs-footer");
+        if (!settleAnim || !footer) return;
+        const effect = settleAnim.effect;
+        unfollow();
+        const own = footer.animate(
+          effect.getKeyframes().map((k) => ({
+            offset: k.computedOffset,
+            transform: `translateY(${-Math.min(
+              Math.max(0, parseFloat(String(k.transform).split(",")[1]) || 0),
+              liftMax
+            )}px)`
+          })),
+          {
+            duration: effect.getTiming().duration,
+            easing: "linear",
+            fill: "forwards"
+          }
+        );
+        follower = own;
+        followed = settleAnim;
+        const done = () => {
+          if (followed === settleAnim) unfollow();
+        };
+        settleAnim.ready.then(() => {
+          if (follower === own) own.startTime = settleAnim.startTime;
+        }, done);
+        settleAnim.finished.then(done, done);
+      };
       const settle = () => {
         if (ctx.isDestroyed()) return;
+        unfollow();
         const size = ctx.getSize();
         if (!resting) {
           unpaddedMax = -1;
@@ -507,7 +550,6 @@ function contentFitFeature() {
         }
         inset = hiddenAt(size);
         put(INSET_VAR, inset);
-        put(SIZE_VAR, size);
         put(CAP_VAR, ctx.getMaxAxisSize());
         if (!resting) {
           resting = true;
@@ -519,9 +561,13 @@ function contentFitFeature() {
         if (resting) {
           resting = false;
           sheet.setAttribute(FIT_ATTR, "moving");
-          put(LIFT_VAR, scroller.offsetHeight);
+          liftMax = scroller.offsetHeight;
+          put(LIFT_VAR, liftMax);
         }
         follow(size);
+        if (waapi && ctx.isAnimating() && sheet.dataset.mode === "bottom") {
+          followSettle();
+        }
       };
       const moving = () => ctx.isAnimating() || ctx.isDragging();
       const whenIdle = () => {
@@ -534,13 +580,20 @@ function contentFitFeature() {
       );
       const offSnap = ctx.on("snap", settle);
       const offDragStart = ctx.on("dragstart", () => move(ctx.getSize()));
+      const offBeforeSnap = ctx.on("before-snap", () => {
+        queueMicrotask(() => {
+          if (!ctx.isDestroyed() && ctx.isAnimating()) move(ctx.getSize());
+        });
+      });
       const observer = typeof ResizeObserver === "undefined" ? null : new ResizeObserver(whenIdle);
       observer?.observe(document.documentElement);
       window.addEventListener("orientationchange", whenIdle);
       return () => {
+        unfollow();
         offProgress();
         offSnap();
         offDragStart();
+        offBeforeSnap();
         observer?.disconnect();
         window.removeEventListener("orientationchange", whenIdle);
         sheet.removeAttribute(FIT_ATTR);

package/dist/{index-CVGC5B5D.d.cts → index-BBrJJjy5.d.cts}

@@ -1,4 +1,4 @@
-import { e as SnapPointDef, f as SheetMode } from './BottomSheetCore-CQStdVy2.cjs';
+import { e as SnapPointDef, f as SheetMode } from './BottomSheetCore-CaJwHnxY.cjs';
 
 type ResolvedSnap = {
     id: string;

package/dist/{index-CnsJQZp2.d.ts → index-CXN7t3rr.d.ts}

@@ -1,4 +1,4 @@
-import { e as SnapPointDef, f as SheetMode } from './BottomSheetCore-9i-Uh6T3.js';
+import { e as SnapPointDef, f as SheetMode } from './BottomSheetCore-COvILxmR.js';
 
 type ResolvedSnap = {
     id: string;