@capgo/capacitor-sheets 8.1.0 → 8.2.1

package/README.md

@@ -1,19 +1,32 @@
 # @capgo/capacitor-sheets
 
-<a href="https://capgo.app/">
+<a href="https://capgo.app/?ref=plugin_sheets">
   <img
     src="https://capgo.app/readme-banner.svg?repo=Cap-go/capacitor-sheets"
-    alt="Capgo - Instant updates for Capacitor"
+    alt="Capgo - Build Capacitor apps with AI, ship updates instantly"
   />
 </a>
 
+<div align="center">
+  <p>
+    <b>Capgo</b>: push fixes to your Capacitor users in minutes, build signed iOS and Android apps without a Mac, and
+    roll back in one click.
+  </p>
+  <h2>
+    <a href="https://capgo.app/register/?ref=plugin_sheets">➡️ Get started for free</a>
+  </h2>
+  <p>14-day unlimited free trial. No credit card required</p>
+</div>
+
+> 🤖 **Building with an AI coding agent?** Install [Capgo skills](https://capgo.app/skills/?ref=plugin_sheets) so Claude Code, Codex, Cursor, Copilot, or Gemini CLI know how to install and use `@capgo/capacitor-sheets` in your Capacitor app: `npx skills add Cap-go/capgo-skills`. Then ask your agent: _"Add @capgo/capacitor-sheets to my Capacitor app and wire it up."_ [Agent setup guides](https://capgo.app/agents/?ref=plugin_sheets) · [Hosted MCP](https://capgo.app/docs/ai/mcp/?ref=plugin_sheets)
+
 Framework-agnostic sheets, drawers, dialogs, scroll helpers, and overlay primitives for Capacitor apps.
 
 This package is inspired by the public Silk feature surface, but it is not a wrapper around Silk and does not include Silk source code. It uses platform web APIs and custom elements so the same primitives work in React, Vue, Angular, Svelte, Solid, or plain TypeScript.
 
 ## Usecase Demos
 
-Each usecase has its own animated WebP demo. These match the public Silk-style example set: long sheets, detents, sidebars, bottom/top sheets, keyboard-aware sheets, toasts, detached sheets, full pages, stacking, depth, parallax, lightboxes, persistent detents, and cards.
+Each usecase has its own animated WebP demo. These match the public Silk-style example set: long sheets, detents, sidebars, bottom/top sheets, keyboard-aware sheets, toasts, detached sheets, full pages, stacking, depth, parallax, lightboxes, persistent detents, and cards..
 
 <table>
   <tr>

package/dist/angular/index.js

@@ -529,6 +529,9 @@ function releaseThemeColorDimmer(documentRef) {
 }
 
 // src/core/sheet-controller.ts
+var inertDepth = /* @__PURE__ */ new WeakMap();
+var inertOriginal = /* @__PURE__ */ new WeakMap();
+var inertHolders = /* @__PURE__ */ new WeakMap();
 var defaultOptions = {
   contentPlacement: "bottom",
   sheetRole: "dialog",
@@ -713,24 +716,32 @@ var SheetController = class {
   pointerTravel = null;
   connected = false;
   lockedScroll = false;
-  inertedElements = /* @__PURE__ */ new Map();
+  inertHeldElements = /* @__PURE__ */ new Set();
+  remeasureFrame = null;
+  activeMotion = null;
+  pendingSettle = null;
+  /** Entering completion deferred by a drag that interrupted present(); runs once the sheet settles. */
+  deferredEnteringComplete = null;
+  /** Resolves the in-flight present() after entering lifecycle completes or is abandoned. */
+  settlePresentPromise = null;
   previousFocus = null;
   hasThemeDimmer = false;
   stackId = null;
   documentListenersAttached = false;
   viewListenersElement = null;
   visualViewportListenersAttached = false;
-  handleVisualViewportResize = () => {
+  handleVisualViewportResize = (event) => {
     const view = this.parts.view;
     const visualViewport = this.root.ownerDocument.defaultView?.visualViewport;
     if (!view) return;
+    const viewportChanged = event !== void 0;
     if (!visualViewport || this.options.nativeFocusScrollPrevention === false) {
-      this.setKeyboardOffset("0em");
+      this.setKeyboardOffset("0em", viewportChanged);
       return;
     }
     const layoutHeight = this.root.ownerDocument.documentElement.clientHeight;
     const keyboardOffset = Math.max(0, layoutHeight - visualViewport.height - visualViewport.offsetTop);
-    this.setKeyboardOffset(`${toEm(view, keyboardOffset)}em`);
+    this.setKeyboardOffset(`${toEm(view, keyboardOffset)}em`, viewportChanged);
   };
   handleFocusIn = (event) => {
     if (!this.presented || this.options.nativeFocusScrollPrevention === false) return;
@@ -761,10 +772,18 @@ var SheetController = class {
     if (!this.presented || this.options.swipe === false || this.options.contentPlacement === "center") return;
     if (!(event.target instanceof Element)) return;
     if (!this.parts.content?.contains(event.target) && event.target !== this.parts.backdrop) return;
+    if (this.pointerTravel && !event.isPrimary) return;
     if (this.options.nativeEdgeSwipePrevention !== false && this.isNativeEdgePointer(event)) {
       event.preventDefault();
     }
+    this.syncOffsetFromRenderedPosition();
+    const interruptedMotion = this.activeMotion ? this.pendingSettle : null;
+    this.pendingSettle = null;
+    this.cancelActiveMotion();
+    this.applyOffset(this.currentOffsetPx, this.status);
     this.remeasure();
+    const axis = isVerticalTrack(this.activeTrack) ? "y" : "x";
+    const startPos = axis === "y" ? event.clientY : event.clientX;
     this.pointerTravel = {
       id: event.pointerId,
       startOffsetPx: this.currentOffsetPx,
@@ -774,7 +793,9 @@ var SheetController = class {
       lastY: event.clientY,
       lastTime: performance.now(),
       velocity: 0,
-      dragging: false
+      dragging: false,
+      samples: [{ t: performance.now(), pos: startPos }],
+      interruptedMotion
     };
   };
   handlePointerMove = (event) => {
@@ -802,6 +823,8 @@ var SheetController = class {
     travel.lastX = event.clientX;
     travel.lastY = event.clientY;
     travel.lastTime = now;
+    travel.samples.push({ t: now, pos: current });
+    if (travel.samples.length > 24) travel.samples.shift();
     const nextOffset = this.limitOffset(travel.startOffsetPx + delta);
     this.applyOffset(nextOffset, "dragging");
   };
@@ -813,9 +836,17 @@ var SheetController = class {
       currentTarget.releasePointerCapture(event.pointerId);
     }
     this.pointerTravel = null;
-    if (!travel.dragging) return;
-    const nearest = this.nearestDetentForOffset(this.currentOffsetPx, travel.velocity);
+    if (!travel.dragging) {
+      if (travel.interruptedMotion && this.presented) {
+        void this.runSettleMotion(travel.interruptedMotion);
+      }
+      return;
+    }
+    const nearest = this.nearestDetentForOffset(this.currentOffsetPx, this.releaseVelocity(travel));
     dispatch(this.root, "cap-sheet-drag-end", this.getTravelEvent());
+    if (travel.interruptedMotion?.status === "entering") {
+      this.deferredEnteringComplete = travel.interruptedMotion.complete;
+    }
     if (nearest === 0 && this.options.swipeDismissal !== false) {
       void this.dismiss({ source: "gesture" });
       return;
@@ -900,6 +931,8 @@ var SheetController = class {
       this.remeasure();
       this.applyOffset(this.detentOffsetsPx[0] || this.hiddenOffsetPx, this.status);
       this.updateDomState(false);
+    } else if (this.presented && affectsDismissedOffset(options)) {
+      this.scheduleRemeasure();
     }
     this.registerStack();
   }
@@ -954,6 +987,7 @@ var SheetController = class {
     }
     this.previousFocus = this.root.ownerDocument.activeElement;
     this.presented = true;
+    this.abandonDeferredEntering();
     this.activeDetent = clamp(options.detent ?? this.resolveInitialDetent(), 1, this.detentOffsetsPx.length - 1);
     this.updateDetentState();
     this.updateDomState(true);
@@ -962,15 +996,33 @@ var SheetController = class {
     this.retainThemeDimmer();
     this.setStatus("entering");
     dispatch(this.root, "cap-sheet-present", this.getTravelEvent());
-    await this.animateTo(this.detentOffsetsPx[this.activeDetent] || 0, {
-      ...this.options.enteringAnimationSettings || {},
-      ...options.animation || {}
+    const source = options.source || "programmatic";
+    let resolvePresent;
+    const presentLifecycleSettled = new Promise((resolve) => {
+      resolvePresent = resolve;
     });
-    this.setStatus("idle");
-    this.focusInitialElement();
-    this.emitPresentedChange(true, options.source || "programmatic");
-    this.emitActiveDetentChange(this.activeDetent, 0);
-    this.updateStack();
+    this.settlePresentPromise = () => {
+      resolvePresent();
+    };
+    const complete = () => {
+      this.setStatus("idle");
+      this.focusInitialElement();
+      this.emitPresentedChange(true, source);
+      this.emitActiveDetentChange(this.activeDetent, 0);
+      this.updateStack();
+      this.releasePresentAwait();
+    };
+    const finished = await this.runSettleMotion({
+      status: "entering",
+      animation: {
+        ...this.options.enteringAnimationSettings || {},
+        ...options.animation || {}
+      },
+      complete
+    });
+    if (!finished) {
+      await presentLifecycleSettled;
+    }
   }
   /** Dismiss the sheet. */
   async dismiss(options = {}) {
@@ -979,6 +1031,8 @@ var SheetController = class {
     const previous = this.activeDetent;
     this.presented = false;
     this.activeDetent = 0;
+    this.pendingSettle = null;
+    this.abandonDeferredEntering();
     this.updateDetentState();
     this.setStatus("exiting");
     dispatch(this.root, "cap-sheet-dismiss", this.getTravelEvent());
@@ -1019,15 +1073,49 @@ var SheetController = class {
     const previous = this.activeDetent;
     this.activeDetent = target;
     this.updateDetentState();
-    this.setStatus("settling");
-    await this.animateTo(this.detentOffsetsPx[target] || 0, {
-      ...this.options.steppingAnimationSettings || {},
-      ...options.animation || {}
+    await this.runSettleMotion({
+      status: "settling",
+      animation: {
+        ...this.options.steppingAnimationSettings || {},
+        ...options.animation || {}
+      },
+      complete: () => {
+        const enteringComplete = this.deferredEnteringComplete;
+        if (enteringComplete) {
+          this.deferredEnteringComplete = null;
+          enteringComplete();
+          return;
+        }
+        this.setStatus("idle");
+        if (previous !== target) {
+          this.emitActiveDetentChange(target, previous);
+        }
+      }
     });
-    this.setStatus("idle");
-    if (previous !== target) {
-      this.emitActiveDetentChange(target, previous);
-    }
+  }
+  /**
+   * Animate to the active detent and run the completion once the motion finishes.
+   * When the motion is cancelled by a pointerdown, the settle stays pending so a tap
+   * that never becomes a drag can resume it.
+   */
+  releasePresentAwait() {
+    if (!this.settlePresentPromise) return;
+    const settle = this.settlePresentPromise;
+    this.settlePresentPromise = null;
+    settle();
+  }
+  abandonDeferredEntering() {
+    this.deferredEnteringComplete = null;
+    this.releasePresentAwait();
+  }
+  async runSettleMotion(motion) {
+    this.setStatus(motion.status);
+    this.pendingSettle = motion;
+    const finished = await this.animateTo(this.detentOffsetsPx[this.activeDetent] || 0, motion.animation);
+    if (!finished) return false;
+    if (this.pendingSettle === motion) this.pendingSettle = null;
+    motion.complete();
+    return true;
   }
   /** Step up or down one detent. */
   async step(direction = "up", options = {}) {
@@ -1159,7 +1247,7 @@ var SheetController = class {
     const resolved = resolveAnimation(settings);
     if (!content || shouldSkipMotion(resolved.skip)) {
       this.applyOffset(targetOffsetPx, "idle");
-      return;
+      return true;
     }
     const startOffset = this.currentOffsetPx;
     const fromProgress = this.getProgressForOffset(startOffset);
@@ -1184,7 +1272,18 @@ var SheetController = class {
     );
     const started = performance.now();
     let frame;
+    let cancelled = false;
+    const cancelMotion = () => {
+      if (cancelled) return;
+      cancelled = true;
+      cancelAnimationFrame(frame);
+      contentAnimation?.cancel();
+      backdropAnimation?.cancel();
+      this.activeMotion = null;
+    };
+    this.activeMotion = { cancel: cancelMotion };
     const tick = () => {
+      if (cancelled) return;
       const progress = duration === 0 ? 1 : clamp((performance.now() - started) / duration, 0, 1);
       const offset = startOffset + (targetOffsetPx - startOffset) * progress;
       this.currentOffsetPx = offset;
@@ -1198,10 +1297,13 @@ var SheetController = class {
       contentAnimation?.finished,
       backdropAnimation ? backdropAnimation.finished : Promise.resolve()
     ]);
+    if (cancelled) return false;
     cancelAnimationFrame(frame);
     contentAnimation?.cancel();
     backdropAnimation?.cancel();
+    this.activeMotion = null;
     this.applyOffset(targetOffsetPx, "idle");
+    return true;
   }
   getProgressForOffset(offsetPx) {
     if (this.options.contentPlacement === "center") {
@@ -1425,47 +1527,152 @@ var SheetController = class {
     documentLockSnapshot.delete(doc);
     this.lockedScroll = false;
   }
-  setKeyboardOffset(value) {
+  setKeyboardOffset(value, viewportChanged = false) {
     const view = this.parts.view;
     if (!view) return;
-    if (view.style.getPropertyValue("--cap-sheet-keyboard-offset") !== value) {
-      view.style.setProperty("--cap-sheet-keyboard-offset", value);
-    }
+    const changed = view.style.getPropertyValue("--cap-sheet-keyboard-offset") !== value;
+    if (changed) view.style.setProperty("--cap-sheet-keyboard-offset", value);
+    if (changed || viewportChanged) this.scheduleRemeasure();
+  }
+  scheduleRemeasure() {
     if (!this.presented) return;
-    requestAnimationFrame(() => {
+    if (this.remeasureFrame !== null) return;
+    this.remeasureFrame = requestAnimationFrame(() => {
+      this.remeasureFrame = null;
       if (!this.presented) return;
       this.remeasure();
+      if (this.status === "dragging") return;
       this.applyOffset(this.detentOffsetsPx[this.activeDetent] || 0, this.status);
     });
   }
+  cancelActiveMotion() {
+    this.activeMotion?.cancel();
+    this.activeMotion = null;
+  }
+  syncOffsetFromRenderedPosition() {
+    const content = this.parts.content;
+    if (!content || this.options.contentPlacement === "center") return;
+    const offsetPx = this.readOffsetPxFromTransform(content);
+    if (offsetPx === null) return;
+    this.currentOffsetPx = offsetPx;
+  }
+  readOffsetPxFromTransform(content) {
+    const axis = isVerticalTrack(this.activeTrack) ? "y" : "x";
+    const computed = this.root.ownerDocument.defaultView?.getComputedStyle(content).transform;
+    const inline = content.style.transform;
+    const transform = computed && computed !== "none" ? computed : inline && inline !== "none" ? inline : "";
+    if (!transform) return this.currentOffsetPx;
+    const translateMatch = transform.match(/translate3d\(\s*([^,]+)\s*,\s*([^,]+)\s*,/);
+    if (translateMatch) {
+      const raw = axis === "y" ? translateMatch[2] : translateMatch[1];
+      const emMatch = raw.trim().match(/^(-?[\d.]+)em$/);
+      if (emMatch) return Number.parseFloat(emMatch[1]) * getEmPx(content);
+      const pxMatch = raw.trim().match(/^(-?[\d.]+)px$/);
+      if (pxMatch) return Number.parseFloat(pxMatch[1]);
+    }
+    const matrixMatch = transform.match(/^matrix\(([^)]+)\)$/);
+    if (matrixMatch) {
+      const values = matrixMatch[1].split(",").map((part) => Number.parseFloat(part.trim()));
+      const translation = axis === "y" ? values[5] : values[4];
+      if (Number.isFinite(translation)) return translation;
+    }
+    const matrix3dMatch = transform.match(/^matrix3d\(([^)]+)\)$/);
+    if (matrix3dMatch) {
+      const values = matrix3dMatch[1].split(",").map((part) => Number.parseFloat(part.trim()));
+      const translation = axis === "y" ? values[13] : values[12];
+      if (Number.isFinite(translation)) return translation;
+    }
+    return null;
+  }
+  releaseVelocity(travel) {
+    const windowMs = 100;
+    const now = performance.now();
+    const samples = travel.samples.filter((sample) => now - sample.t <= windowMs);
+    if (samples.length < 2) return 0;
+    const first = samples[0];
+    const last = samples[samples.length - 1];
+    const elapsed = Math.max(last.t - first.t, 1);
+    return (last.pos - first.pos) / elapsed * 1e3;
+  }
+  getAllowedOutsideElements() {
+    const allowed = /* @__PURE__ */ new Set();
+    if (this.parts.view) allowed.add(this.parts.view);
+    for (const element of this.parts.islands) allowed.add(element);
+    for (const element of this.parts.externalOverlays) allowed.add(element);
+    return allowed;
+  }
+  applyInertForElement(element, allowed) {
+    const isAllowed = Array.from(allowed).some((candidate) => element === candidate || element.contains(candidate));
+    if (isAllowed) {
+      element.inert = false;
+      element.removeAttribute("aria-hidden");
+      return;
+    }
+    element.inert = true;
+    element.setAttribute("aria-hidden", "true");
+  }
   applyInert() {
     if (this.options.inertOutside === false || !this.parts.view) return;
-    const body = this.root.ownerDocument.body;
-    const allowed = /* @__PURE__ */ new Set([this.parts.view, ...this.parts.islands, ...this.parts.externalOverlays]);
-    this.clearInert();
+    const doc = this.root.ownerDocument;
+    const body = doc.body;
+    const allowed = this.getAllowedOutsideElements();
+    this.releaseInertHold();
+    const holders = inertHolders.get(doc) || /* @__PURE__ */ new Set();
+    holders.add(this);
+    inertHolders.set(doc, holders);
     for (const child of Array.from(body.children)) {
       if (!(child instanceof HTMLElement)) continue;
-      this.inertedElements.set(child, { inert: child.inert, ariaHidden: child.getAttribute("aria-hidden") });
-      const isAllowed = Array.from(allowed).some((element) => child === element || child.contains(element));
-      if (isAllowed) {
-        child.inert = false;
-        child.removeAttribute("aria-hidden");
-        continue;
+      const depth = inertDepth.get(child) ?? 0;
+      if (depth === 0) {
+        inertOriginal.set(child, { inert: child.inert, ariaHidden: child.getAttribute("aria-hidden") });
       }
-      child.inert = true;
-      child.setAttribute("aria-hidden", "true");
+      inertDepth.set(child, depth + 1);
+      this.inertHeldElements.add(child);
+      this.applyInertForElement(child, allowed);
     }
   }
   clearInert() {
-    for (const [element, state] of this.inertedElements) {
-      element.inert = state.inert;
-      if (state.ariaHidden === null) {
-        element.removeAttribute("aria-hidden");
+    this.releaseInertHold();
+  }
+  releaseInertHold() {
+    if (this.inertHeldElements.size === 0) return;
+    const doc = this.root.ownerDocument;
+    const holders = inertHolders.get(doc);
+    holders?.delete(this);
+    if (holders?.size === 0) inertHolders.delete(doc);
+    for (const element of this.inertHeldElements) {
+      const depth = Math.max((inertDepth.get(element) ?? 1) - 1, 0);
+      if (depth === 0) {
+        inertDepth.delete(element);
+        const snapshot = inertOriginal.get(element);
+        if (snapshot) {
+          element.inert = snapshot.inert;
+          if (snapshot.ariaHidden === null) {
+            element.removeAttribute("aria-hidden");
+          } else {
+            element.setAttribute("aria-hidden", snapshot.ariaHidden);
+          }
+          inertOriginal.delete(element);
+        }
       } else {
-        element.setAttribute("aria-hidden", state.ariaHidden);
+        inertDepth.set(element, depth);
       }
     }
-    this.inertedElements.clear();
+    this.inertHeldElements.clear();
+    this.reapplyDocumentInert(doc);
+  }
+  reapplyDocumentInert(doc) {
+    const holders = inertHolders.get(doc);
+    if (!holders?.size) return;
+    const top = Array.from(holders).filter((controller) => controller.presented && controller.options.inertOutside !== false).sort((left, right) => right.getStackZIndex() - left.getStackZIndex())[0];
+    if (!top) return;
+    const allowed = top.getAllowedOutsideElements();
+    const body = doc.body;
+    for (const child of Array.from(body.children)) {
+      if (!(child instanceof HTMLElement)) continue;
+      if ((inertDepth.get(child) ?? 0) === 0) continue;
+      top.applyInertForElement(child, allowed);
+    }
   }
   retainThemeDimmer() {
     if (this.hasThemeDimmer || this.options.themeColorDimming !== "auto") return;