@astryxdesign/core 0.7.9-canary.e9bfd12 → 0.7.9-canary.ef3db95

package/dist/BottomSheet/BottomSheetPanel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BottomSheetPanel.d.ts","sourceRoot":"","sources":["../../src/BottomSheet/BottomSheetPanel.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;GAeG;AAEH,OAAO,EAOL,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAEf,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AA+B5C,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,gBAAgB,CAAC;AAChD,OAAO,EAGL,KAAK,oBAAoB,EAC1B,MAAM,eAAe,CAAC;AAQvB,QAAA,MAAM,cAAc;;;;CAIV,CAAC;AAEX,MAAM,MAAM,iBAAiB,GAAG,MAAM,OAAO,cAAc,CAAC;AAC5D,YAAY,EAAC,oBAAoB,EAAC,CAAC;AA4CnC,eAAO,MAAM,2BAA2B,2DACkB,CAAC;AA+N3D,MAAM,MAAM,sBAAsB,GAChC,UAAU,GAAG,UAAU,GAAG,QAAQ,GAAG,SAAS,CAAC;AAEjD,MAAM,MAAM,qBAAqB,GAC7B;IAAC,IAAI,EAAE,QAAQ,CAAA;CAAC,GAChB;IAAC,IAAI,EAAE,MAAM,CAAC;IAAC,QAAQ,EAAE,OAAO,CAAA;CAAC,GACjC;IACE,IAAI,EAAE,UAAU,CAAC;IACjB,MAAM,EAAE,SAAS,GAAG,UAAU,GAAG,QAAQ,CAAC;IAC1C,eAAe,EAAE,MAAM,CAAC;CACzB,GACD;IAAC,IAAI,EAAE,SAAS,CAAA;CAAC,CAAC;AAEtB,UAAU,qBAAsB,SAAQ,SAAS,CAAC,cAAc,CAAC;IAC/D,+CAA+C;IAC/C,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC,KAAK,EAAE,qBAAqB,CAAC;IAC7B;;;OAGG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB;;;OAGG;IACH,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;IAC5B;;;;;OAKG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,MAAM,EAAE,iBAAiB,GAAG,MAAM,GAAG,MAAM,CAAC;IAC5C,mEAAmE;IACnE,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,SAAS,CAAC;IACpB;;;OAGG;IACH,OAAO,CAAC,EAAE,WAAW,CAAC;IACtB,UAAU,CAAC,EAAE,aAAa,CAAC,oBAAoB,CAAC,CAAC;IACjD,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC,gFAAgF;IAChF,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,SAAS,EAAE,MAAM,IAAI,CAAC;IACtB,cAAc,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1C,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,cAAc,GAAG,IAAI,KAAK,IAAI,CAAC;IAC3D,aAAa,CAAC,EAAE,CAAC,MAAM,EAAE,sBAAsB,KAAK,IAAI,CAAC;IACzD,gBAAgB,CAAC,EAAE,CAAC,MAAM,EAAE,sBAAsB,KAAK,IAAI,CAAC;CAC7D;AAyJD,4EAA4E;AAC5E,wBAAgB,gBAAgB,CAAC,EAC/B,GAAG,EACH,KAAK,EACL,eAAe,EACf,MAAM,EACN,KAAK,EACL,QAAQ,EACR,OAAO,EACP,UAAU,EACV,SAAS,EACT,KAAK,EACL,QAAQ,EACR,MAAM,EACN,cAAsB,EACtB,cAAc,EACd,eAAe,EACf,qBAA4B,EAC5B,kBAA0B,EAC1B,SAAS,EACT,cAAc,EACd,eAAe,EACf,aAAa,EACb,gBAAgB,EAChB,GAAG,KAAK,EACT,EAAE,qBAAqB,+BAuavB;yBA/be,gBAAgB"}
+{"version":3,"file":"BottomSheetPanel.d.ts","sourceRoot":"","sources":["../../src/BottomSheet/BottomSheetPanel.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;GAeG;AAEH,OAAO,EAQL,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAEf,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAgC5C,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,gBAAgB,CAAC;AAChD,OAAO,EAGL,KAAK,oBAAoB,EAC1B,MAAM,eAAe,CAAC;AAQvB,QAAA,MAAM,cAAc;;;;CAIV,CAAC;AAEX,MAAM,MAAM,iBAAiB,GAAG,MAAM,OAAO,cAAc,CAAC;AAC5D,YAAY,EAAC,oBAAoB,EAAC,CAAC;AAgFnC,eAAO,MAAM,2BAA2B,2DACkB,CAAC;AA+N3D,MAAM,MAAM,sBAAsB,GAChC,UAAU,GAAG,UAAU,GAAG,QAAQ,GAAG,SAAS,CAAC;AAEjD,MAAM,MAAM,qBAAqB,GAC7B;IAAC,IAAI,EAAE,QAAQ,CAAA;CAAC,GAChB;IAAC,IAAI,EAAE,MAAM,CAAC;IAAC,QAAQ,EAAE,OAAO,CAAA;CAAC,GACjC;IACE,IAAI,EAAE,UAAU,CAAC;IACjB,MAAM,EAAE,SAAS,GAAG,UAAU,GAAG,QAAQ,CAAC;IAC1C,eAAe,EAAE,MAAM,CAAC;CACzB,GACD;IAAC,IAAI,EAAE,SAAS,CAAA;CAAC,CAAC;AAEtB,UAAU,qBAAsB,SAAQ,SAAS,CAAC,cAAc,CAAC;IAC/D,+CAA+C;IAC/C,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC,KAAK,EAAE,qBAAqB,CAAC;IAC7B;;;OAGG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB;;;OAGG;IACH,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;IAC5B;;;;;OAKG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,MAAM,EAAE,iBAAiB,GAAG,MAAM,GAAG,MAAM,CAAC;IAC5C,mEAAmE;IACnE,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,SAAS,CAAC;IACpB;;;OAGG;IACH,OAAO,CAAC,EAAE,WAAW,CAAC;IACtB,UAAU,CAAC,EAAE,aAAa,CAAC,oBAAoB,CAAC,CAAC;IACjD,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC,gFAAgF;IAChF,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,SAAS,EAAE,MAAM,IAAI,CAAC;IACtB,cAAc,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1C,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,cAAc,GAAG,IAAI,KAAK,IAAI,CAAC;IAC3D,aAAa,CAAC,EAAE,CAAC,MAAM,EAAE,sBAAsB,KAAK,IAAI,CAAC;IACzD,gBAAgB,CAAC,EAAE,CAAC,MAAM,EAAE,sBAAsB,KAAK,IAAI,CAAC;CAC7D;AAyJD,4EAA4E;AAC5E,wBAAgB,gBAAgB,CAAC,EAC/B,GAAG,EACH,KAAK,EACL,eAAe,EACf,MAAM,EACN,KAAK,EACL,QAAQ,EACR,OAAO,EACP,UAAU,EACV,SAAS,EACT,KAAK,EACL,QAAQ,EACR,MAAM,EACN,cAAsB,EACtB,cAAc,EACd,eAAe,EACf,qBAA4B,EAC5B,kBAA0B,EAC1B,SAAS,EACT,cAAc,EACd,eAAe,EACf,aAAa,EACb,gBAAgB,EAChB,GAAG,KAAK,EACT,EAAE,qBAAqB,+BA0bvB;yBAlde,gBAAgB"}

package/dist/BottomSheet/BottomSheetPanel.js

@@ -18,7 +18,7 @@
  * - /packages/core/src/BottomSheet/useSheetGestures.ts
  * - /packages/core/src/Layout/container.stylex.ts (bottom-sheet padding chain)
  */
-import { useCallback, useEffect, useImperativeHandle, useLayoutEffect, useMemo, useRef } from 'react';
+import { useCallback, useEffect, useImperativeHandle, useLayoutEffect, useMemo, useRef, useSyncExternalStore } from 'react';
 import * as stylex from '@stylexjs/stylex';
 import { useDevWarning } from "../hooks/useDevWarning.js";
 import { useMediaQuery } from "../hooks/useMediaQuery.js";
@@ -33,6 +33,7 @@ import { layerStructureReset } from "../Layer/layerStructureReset.stylex.js";
 import { LayerContentBoundary } from "../Layer/layerScopedContext.js";
 import { container } from "../Layout/container.stylex.js";
 import { containerPaddingBlockEndVarStyles, containerPaddingBlockStartVarStyles, containerPaddingInlineVarStyles, overlayPaddingReset, paddingStyles, spacingStepToToken } from "../Layout/padding.stylex.js";
+import { subscribeInput } from "../utils/inputStream.js";
 import { isValidSnapPoint, resolveSnapPoints } from "./snapOffsets.js";
 import { useMobileKeyboard } from "../keyboard/useMobileKeyboard.js";
 import { scrollPreservationPadding, sheetLayoutHeight, useSheetGestures } from "./useSheetGestures.js";
@@ -42,8 +43,16 @@ const HEIGHT_BUDGETS = {
   capped: '62dvh',
   tall: '92dvh'
 };
-// SYNC: must match OVERSCROLL_MAX in useSheetGestures.ts.
-const OVERSCROLL_PADDING = 48;
+// The reserve: how far the sheet's surface reaches below the screen, so a
+// pull past the top never shows the page under it.
+// SYNC: OVERSCROLL_MAX in useSheetGestures.ts must not exceed MIN_RESERVE.
+const MIN_RESERVE = 48;
+// A finger can pull past the top by at most the viewport's height. The rubber
+// band over a sheet as tall as the viewport then shows 35.5% of it.
+const RESERVE_VIEWPORT_SHARE = 0.4;
+function sheetReserve(viewportHeight) {
+  return Math.max(MIN_RESERVE, Math.ceil(viewportHeight * RESERVE_VIEWPORT_SHARE));
+}
 const MOBILE_KEYBOARD_BOTTOM_CLEARANCE = 48;
 const TRANSITION_BACKSTOP_BUFFER_MS = 50;
 // The floating handle bar's height. The bar is out of flow, so this is not
@@ -51,6 +60,12 @@ const TRANSITION_BACKSTOP_BUFFER_MS = 50;
 // from the sheet's top edge, inside the space a content wrapper's own top
 // padding already provides.
 const HANDLE_BAR_HEIGHT = spacingVars['--spacing-6'];
+const BLOCK_SIZE_PROPERTIES = ['height', 'minHeight', 'maxHeight', 'blockSize', 'minBlockSize', 'maxBlockSize'];
+
+/** Whether StyleX styles hold any style: they can nest in arrays. */
+function hasStyles(xstyle) {
+  return Array.isArray(xstyle) ? xstyle.some(hasStyles) : xstyle != null && typeof xstyle === 'object';
+}
 
 // Measure the viewport that the height budgets use. They are `dvh`, which
 // the virtual keyboard does not shrink, so `visualViewport` would differ by
@@ -59,6 +74,12 @@ const HANDLE_BAR_HEIGHT = spacingVars['--spacing-6'];
 function layoutViewportHeight() {
   return typeof window === 'undefined' ? 0 : window.innerHeight;
 }
+function subscribeToResize(onChange) {
+  return subscribeInput(window, 'resize', onChange);
+}
+function subscribeToNothing() {
+  return () => {};
+}
 
 /**
  * A stable identity for a set of snap points. Type-tagged, so the fraction
@@ -112,8 +133,8 @@ const styles = {
     kGVxlE: "x1kcpxr7",
     kI3sdo: "x1a2a7pz",
     kVQacm: "xb3r6kr",
-    kGO01o: "x1wkw6tp",
-    k1K539: "x1if0o47",
+    kGO01o: "x5559hn",
+    k1K539: "xgwt18o",
     k3aq6I: "xnn1q72 xhbqy3z xspp5ug",
     kSiTet: "x1hc1fzr x1igigxu xgo67oj",
     k1ekBW: "xwcsmn1",
@@ -178,12 +199,12 @@ const styles = {
     "--x-nsbhg8": (val => typeof val === "number" ? val + "px" : val != null ? val : undefined)(inset)
   }],
   budget: {
-    kZKoxP: "x1tpcejd",
+    kZKoxP: "x1fqcpoh",
     $$css: true
   },
   hugHeight: {
     kZKoxP: "xg7h5cd",
-    kskxy: "x14bu9tk",
+    kskxy: "xkche18",
     $$css: true
   }
 };
@@ -390,6 +411,16 @@ export function BottomSheetPanel({
 
   // A caller's height owns the element's height: the drag never writes it.
   const consumerHeight = style?.height;
+  // StyleX styles and a class name can size the sheet too. Their rules are
+  // only class names here, so any of them counts as a size.
+  const isSizedByCaller = BLOCK_SIZE_PROPERTIES.some(property => style?.[property] != null) || hasStyles(xstyle) || className != null && className !== '';
+  // Only a finger stretches the sheet past MIN_RESERVE, so a device with no
+  // touch pointer keeps the smallest reserve. So does a sheet the caller
+  // sizes, which nothing extends by the reserve; the stretch stops at it.
+  const hasTouchPointer = useMediaQuery('(any-pointer: coarse)');
+  const tracksViewport = isPresented && hasTouchPointer && !isSizedByCaller;
+  const viewportHeight = useSyncExternalStore(tracksViewport ? subscribeToResize : subscribeToNothing, () => tracksViewport ? layoutViewportHeight() : 0, () => 0);
+  const reserve = viewportHeight > 0 ? sheetReserve(viewportHeight) : MIN_RESERVE;
   const {
     contentProps,
     handleProps,
@@ -409,7 +440,7 @@ export function BottomSheetPanel({
     isOpen: isInteractive,
     isOpenRequested: isOpenRequested ?? isInteractive,
     canDismiss: isSwipeDismissAllowed,
-    offscreenBlockEndInset: OVERSCROLL_PADDING,
+    offscreenBlockEndInset: reserve,
     onDismiss,
     snapHeights,
     onTravelStart: () => {
@@ -624,6 +655,7 @@ export function BottomSheetPanel({
     },
     ...mergeProps(themeProps('bottom-sheet'), stylex.props(layerTextReset.reset, layerStructureReset.reset, styles.sheet, overlayPaddingReset.reset, height === 'hug' ? styles.hugHeight : styles.budget, isClosing && styles.sheetClosing, isClosing && isCrossFade && styles.sheetClosingCrossFade, isFading && styles.sheetFading, isInactive && styles.sheetInactive, isEntrySettled && styles.sheetSettled, xstyle), className, {
       ['--_sheet-budget']: budget,
+      ['--_sheet-reserve']: `${reserve}px`,
       ...(isInteractive ? gestureStyle : isRetained || isClosing ? {
         height: hostHeight
       } : {}),

package/dist/BottomSheet/useSheetGestures.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useSheetGestures.d.ts","sourceRoot":"","sources":["../../src/BottomSheet/useSheetGestures.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"useSheetGestures.d.ts","sourceRoot":"","sources":["../../src/BottomSheet/useSheetGestures.ts"],"names":[],"mappings":"AAIA;;;;;;;;;;;GAWG;AAoCH,OAAO,EAOL,KAAK,aAAa,EAClB,KAAK,UAAU,IAAI,eAAe,EAClC,KAAK,YAAY,IAAI,iBAAiB,EACtC,KAAK,SAAS,EACd,KAAK,UAAU,IAAI,eAAe,EAClC,KAAK,OAAO,IAAI,YAAY,EAC7B,MAAM,OAAO,CAAC;AA4Hf;;;;;GAKG;AACH,wBAAgB,iBAAiB,CAC/B,WAAW,EAAE,MAAM,EACnB,YAAY,EAAE,MAAM,GACnB,MAAM,CAER;AAED;;;;GAIG;AACH,wBAAgB,yBAAyB,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,CAE3E;AA+BD;;;;;;;;;;;GAWG;AACH,wBAAgB,mBAAmB,CACjC,MAAM,EAAE,WAAW,GAAG,IAAI,EAC1B,IAAI,EAAE,WAAW,GAChB,OAAO,CAWT;AAED;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,gBAAgB,CAC9B,MAAM,EAAE,WAAW,GAAG,IAAI,EAC1B,IAAI,EAAE,WAAW,GAChB,WAAW,EAAE,CAaf;AA0DD,MAAM,WAAW,uBAAuB;IACtC,0EAA0E;IAC1E,MAAM,EAAE,OAAO,CAAC;IAChB;;;;;OAKG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;OAIG;IACH,sBAAsB,CAAC,EAAE,MAAM,CAAC;IAChC,gFAAgF;IAChF,SAAS,EAAE,MAAM,IAAI,CAAC;IACtB;;;;;;;;;;OAUG;IACH,WAAW,CAAC,EAAE,MAAM,MAAM,EAAE,CAAC;IAC7B,oEAAoE;IACpE,MAAM,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IACpC,+DAA+D;IAC/D,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;IAC3B;;;;;;OAMG;IACH,cAAc,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IAC3C;;;;;;OAMG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B;AAED,MAAM,WAAW,iBAAiB;IAChC,KAAK,EAAE,aAAa,CAAC;CACtB;AAED,MAAM,WAAW,gBAAgB;IAC/B,KAAK,EAAE,aAAa,CAAC;IACrB,aAAa,EAAE,CAAC,KAAK,EAAE,eAAe,KAAK,IAAI,CAAC;IAChD,oBAAoB,EAAE,CAAC,KAAK,EAAE,iBAAiB,KAAK,IAAI,CAAC;IACzD,aAAa,EAAE,CAAC,KAAK,EAAE,iBAAiB,KAAK,IAAI,CAAC;IAClD,aAAa,EAAE,CAAC,KAAK,EAAE,iBAAiB,KAAK,IAAI,CAAC;IAClD,WAAW,EAAE,CAAC,KAAK,EAAE,iBAAiB,KAAK,IAAI,CAAC;IAChD,eAAe,EAAE,CAAC,KAAK,EAAE,iBAAiB,KAAK,IAAI,CAAC;IACpD,YAAY,EAAE,CAAC,KAAK,EAAE,eAAe,KAAK,IAAI,CAAC;IAC/C,WAAW,EAAE,CAAC,KAAK,EAAE,eAAe,KAAK,IAAI,CAAC;CAC/C;AAED,MAAM,WAAW,cAAc;IAC7B,GAAG,EAAE,CAAC,IAAI,EAAE,WAAW,GAAG,IAAI,KAAK,IAAI,CAAC;IACxC,aAAa,EAAE,CAAC,KAAK,EAAE,eAAe,KAAK,IAAI,CAAC;IAChD,oBAAoB,EAAE,CAAC,KAAK,EAAE,iBAAiB,KAAK,IAAI,CAAC;IACzD,aAAa,EAAE,CAAC,KAAK,EAAE,iBAAiB,KAAK,IAAI,CAAC;IAClD,aAAa,EAAE,CAAC,KAAK,EAAE,iBAAiB,KAAK,IAAI,CAAC;IAClD,WAAW,EAAE,CAAC,KAAK,EAAE,iBAAiB,KAAK,IAAI,CAAC;IAChD,eAAe,EAAE,CAAC,KAAK,EAAE,iBAAiB,KAAK,IAAI,CAAC;IACpD,QAAQ,EAAE,CAAC,KAAK,EAAE,YAAY,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;CACtD;AAED,MAAM,WAAW,sBAAsB;IACrC;;;;OAIG;IACH,QAAQ,EAAE,CAAC,IAAI,EAAE,WAAW,GAAG,IAAI,KAAK,IAAI,CAAC;IAC7C,8HAA8H;IAC9H,YAAY,EAAE,iBAAiB,CAAC;IAChC,gEAAgE;IAChE,WAAW,EAAE,gBAAgB,CAAC;IAC9B;;;;OAIG;IACH,SAAS,EAAE,cAAc,CAAC;IAC1B;;;;;OAKG;IACH,cAAc,EAAE,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;IAC9C;;;;;OAKG;IACH,UAAU,EAAE,MAAM,CAAC;IACnB,kEAAkE;IAClE,aAAa,EAAE,MAAM,CAAC;IACtB,+CAA+C;IAC/C,UAAU,EAAE,OAAO,CAAC;IACpB,4EAA4E;IAC5E,WAAW,EAAE,OAAO,CAAC;IACrB;;;;;;;OAOG;IACH,sBAAsB,EAAE,OAAO,CAAC;IAChC;;;;OAIG;IACH,eAAe,EAAE,SAAS,CAAC,MAAM,CAAC,CAAC;IACnC,mDAAmD;IACnD,WAAW,EAAE,MAAM,CAAC;IACpB,4EAA4E;IAC5E,uBAAuB,EAAE,MAAM,CAAC;IAChC,qEAAqE;IACrE,oBAAoB,EAAE,MAAM,GAAG,IAAI,CAAC;IACpC;;;;;;;OAOG;IACH,wBAAwB,EAAE,MAAM,IAAI,CAAC;IACrC;;;;OAIG;IACH,mBAAmB,EAAE,MAAM,CAAC;CAC7B;AASD;;;;;;;;;;;;;;;;;;GAkBG;AACH,wBAAgB,gBAAgB,CAAC,EAC/B,MAAM,EACN,eAAwB,EACxB,UAAiB,EACjB,sBAA0B,EAC1B,SAAS,EACT,WAAW,EACX,MAAM,EACN,aAAa,EACb,cAAc,EACd,cAAsB,GACvB,EAAE,uBAAuB,GAAG,sBAAsB,CAg3ClD"}

package/dist/BottomSheet/useSheetGestures.js

@@ -49,6 +49,8 @@
 // finger ends any drag (yieldToPinch). There is no module-scope DOM access,
 // so the hook is SSR-safe. Reduced motion skips the settle transition.
 import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
+import { rubberBand } from "../motion/rubberBand.js";
+import { scroll } from "../motion/uikit/scroll.js";
 import { computeDetentOffsets, peekOffsetFor, resolveSettleOffset, scrimOpacityForOffset } from "./snapOffsets.js";
 
 /**
@@ -86,13 +88,17 @@ const MAGNET_RANGE = 40;
 function isSyntheticTouch(event) {
   return event.syntheticTouch === true;
 }
+// An Apple Pencil raises touch events too, marked `stylus`. Its drag is a
+// pen's, as on the grabber, where WebKit reports it as a pen.
+function touchPointerType(touch) {
+  return touch.touchType === 'stylus' ? 'pen' : 'touch';
+}
 
-// Rubber-band factor for dragging up past fully-open, capped at OVERSCROLL_MAX
-// (the sheet reserves that much bottom padding for the lift to reveal).
+// A mouse's stretch past fully open: a resisted fraction of the drag, capped
+// at OVERSCROLL_MAX.
 const OVERSCROLL_RESISTANCE = 0.35;
-// SYNC: must match OVERSCROLL_PADDING in BottomSheetPanel.tsx (the reserved
-// bottom padding the lift reveals). Kept as a local const rather than a shared
-// import so it can be used inside stylex.create there.
+// SYNC: must not exceed MIN_RESERVE in BottomSheetPanel.tsx, the smallest
+// reserve the sheet keeps below the screen.
 const OVERSCROLL_MAX = 48;
 // Travel past the point where a scrolling gesture ran out of content before it
 // hands the sheet the rest of the pull. Small enough to feel continuous with
@@ -253,6 +259,32 @@ function chainAtTop(chain) {
 function chainAtBottom(chain) {
   return chain.every(elementAtBottom);
 }
+function chainScrolls(chain) {
+  return chain.some(element => element.scrollHeight - element.clientHeight > 1);
+}
+
+/**
+ * iOS rubber-bands a scroller past its end even under `overscroll-behavior:
+ * contain`. While the content sits at its end mid-pull, `none` holds it still,
+ * so only the sheet moves. Returns the undo.
+ */
+function holdAtEnd(chain) {
+  const previous = chain.map(element => element.style.overscrollBehaviorY);
+  for (const element of chain) {
+    element.style.overscrollBehaviorY = 'none';
+  }
+  return () => {
+    chain.forEach((element, index) => {
+      element.style.overscrollBehaviorY = previous[index];
+    });
+  };
+}
+function releaseContentHold(armed) {
+  if (armed?.releaseContentHold != null) {
+    armed.releaseContentHold();
+    armed.releaseContentHold = null;
+  }
+}
 function visibleHeightForOffset(sheetHeight, offset, offscreenBlockEndInset) {
   return Math.max(0, sheetHeight - offscreenBlockEndInset - offset);
 }
@@ -775,7 +807,7 @@ export function useSheetGestures({
     const baseLayoutOffset = settledLayoutOffsetRef.current;
     dragStateRef.current = {
       syntheticTouch,
-      pointerType: syntheticTouch ? 'touch' : event.pointerType,
+      pointerType: event.pointerType,
       pointerId: event.pointerId,
       startCoord: start,
       lastCoord: event.clientY,
@@ -786,6 +818,7 @@ export function useSheetGestures({
       }],
       velocity: 0,
       height: sheetHeight,
+      reserve: offscreenBlockEndInsetRef.current,
       baseOffset: settledOffset,
       baseLayoutOffset,
       renderedOffset: settledOffset,
@@ -866,8 +899,9 @@ export function useSheetGestures({
     const maxDetentOffset = offsets[offsets.length - 1];
     let next;
     if (raw < 0) {
-      // Up past fully-open: damped + capped rubber-band; springs back on release.
-      next = Math.max(-OVERSCROLL_MAX, raw * OVERSCROLL_RESISTANCE);
+      // A touch device's reserve covers the whole stretch. The clamp binds
+      // only where the reserve is short.
+      next = state.pointerType === 'touch' ? Math.max(-state.reserve, rubberBand(raw, state.height - state.reserve, scroll.rubberBand.coefficient)) : Math.max(-OVERSCROLL_MAX, raw * OVERSCROLL_RESISTANCE);
     } else if (raw > maxDetentOffset) {
       // In the dismiss zone: no magnet, so it doesn't fight a drag-to-close.
       next = raw;
@@ -1008,6 +1042,7 @@ export function useSheetGestures({
   // hand-off and any drag in flight so nothing claims (or preventDefault()s)
   // the gesture; the sheet returns to its detent.
   const yieldToPinch = useCallback(target => {
+    releaseContentHold(touchDragRef.current);
     touchDragRef.current = null;
     armedBodyRef.current = null;
     cancelDrag(target);
@@ -1030,6 +1065,7 @@ export function useSheetGestures({
     const asPointer = (touch, target) => ({
       syntheticTouch: true,
       pointerId: touch.identifier,
+      pointerType: touchPointerType(touch),
       clientY: touch.clientY,
       timeStamp: Date.now(),
       currentTarget: target,
@@ -1049,21 +1085,19 @@ export function useSheetGestures({
       // scroll, but it is tracked all the same: the scroller can run out of
       // content while the finger is still down (see onTouchMove). A touch
       // inside a layer this sheet hosts is that layer's, never tracked here.
+      releaseContentHold(touchDragRef.current);
       if (!touch || isInsideNestedLayer(event.target, body)) {
         touchDragRef.current = null;
         return;
       }
       const scrollers = scrollChainUnder(event.target, body);
       const top = chainAtTop(scrollers);
-      // The bottom edge hands off so the sheet can EXPAND, so it is only a
-      // handoff when a taller detent exists. Already at the tallest, an
-      // upward pull has nowhere to travel: promoting it would trade the
-      // user's scroll for a rubber-band the release throws straight back, and
-      // — because promotion preventDefault()s the rest of the gesture — would
-      // strand the scroller for as long as the finger stays down, so reversing
-      // downward to scroll back would collapse the sheet instead. Leave the
-      // gesture with the content.
-      const bottom = chainAtBottom(scrollers) && activeOffsetRef.current > 0;
+      // Claiming a pull up from its first move blocks the content's scroll for
+      // the whole touch. So it is claimed here only below the tallest detent,
+      // or over content that cannot scroll. At the tallest detent, a list at
+      // its end keeps its touch. Its pull reaches the sheet through the
+      // content-end hand-off below, and a reversal hands it back.
+      const bottom = chainAtBottom(scrollers) && (activeOffsetRef.current > 0 || !chainScrolls(scrollers));
       touchDragRef.current = {
         id: touch.identifier,
         startY: touch.clientY,
@@ -1071,7 +1105,8 @@ export function useSheetGestures({
         top,
         bottom,
         contentEndY: null,
-        promotedAtContentEnd: false
+        promotedAtContentEnd: false,
+        releaseContentHold: null
       };
     };
     const onTouchMove = event => {
@@ -1098,6 +1133,7 @@ export function useSheetGestures({
             // at once; a later pull past the end promotes again.
             armed.contentEndY = null;
             armed.promotedAtContentEnd = false;
+            releaseContentHold(armed);
             cancelDragRef.current(scroller);
             return;
           }
@@ -1127,6 +1163,7 @@ export function useSheetGestures({
       const pullUpAtBottom = armed.bottom && delta < -DRAG_PROMOTION_SLOP && chainAtBottom(armed.scrollers);
       if (pullDownAtTop || pullUpAtBottom) {
         event.preventDefault();
+        releaseContentHold(armed);
         touchDragRef.current = null;
         beginDragRef.current(asPointer(t, scroller), measureHeightRef.current(), armed.startY);
         pointerMoveRef.current(asPointer(t, scroller));
@@ -1142,13 +1179,14 @@ export function useSheetGestures({
       // cannot see this, and re-arming for a preventDefault() promotion would
       // be useless anyway: once the browser has committed the gesture to
       // scrolling, every remaining touchmove is non-cancelable. Nothing needs
-      // cancelling either — the scroller is clamped at its maximum, so further
-      // upward travel scrolls nothing. Anchor at the point where the content
+      // cancelling either: the hold clamps the scroller at its maximum, so
+      // further upward travel scrolls nothing. Anchor at the point where the content
       // ran out and give the sheet everything past it, so the pull continues
       // into the sheet with no jump and no lost scrolling.
-      if (activeOffsetRef.current > 0 && chainAtBottom(armed.scrollers)) {
+      if (chainAtBottom(armed.scrollers)) {
         if (armed.contentEndY == null) {
           armed.contentEndY = t.clientY;
+          armed.releaseContentHold ??= holdAtEnd(armed.scrollers);
         } else if (armed.contentEndY - t.clientY >= CONTENT_END_HANDOFF_SLOP) {
           armed.promotedAtContentEnd = true;
           beginDragRef.current(asPointer(t, scroller), measureHeightRef.current(), armed.contentEndY);
@@ -1156,9 +1194,11 @@ export function useSheetGestures({
         }
       } else {
         armed.contentEndY = null;
+        releaseContentHold(armed);
       }
     };
     const onTouchEnd = event => {
+      releaseContentHold(touchDragRef.current);
       touchDragRef.current = null;
       const pointerId = dragStateRef.current?.pointerId;
       if (pointerId == null) {

package/dist/astryx.css

@@ -1916,7 +1916,7 @@
   .xpa73km:not(#\#):not(#\#):not(#\#):not(#\#){height:calc(100dvh - var(--_app-shell-header-height,0px))}
   .xlgwz2i:not(#\#):not(#\#):not(#\#):not(#\#){height:calc(2 * var(--spacing-3) + var(--text-code-size) * var(--text-code-leading))}
   .x166xdbf:not(#\#):not(#\#):not(#\#):not(#\#){height:calc(2 * var(--spacing-3) + var(--text-supporting-size) * var(--text-code-leading))}
-  .x1tpcejd:not(#\#):not(#\#):not(#\#):not(#\#){height:calc(var(--_sheet-budget) + 48px)}
+  .x1fqcpoh:not(#\#):not(#\#):not(#\#):not(#\#){height:calc(var(--_sheet-budget) + var(--_sheet-reserve,48px))}
   .x1uiybsj:not(#\#):not(#\#):not(#\#):not(#\#){height:calc(var(--size-element-lg) - 4px)}
   .x102lyln:not(#\#):not(#\#):not(#\#):not(#\#){height:calc(var(--size-element-lg) - 8px)}
   .x184gfjb:not(#\#):not(#\#):not(#\#):not(#\#){height:calc(var(--size-element-md) - 4px)}
@@ -1961,10 +1961,10 @@
   .x6hpsvf:not(#\#):not(#\#):not(#\#):not(#\#){height:28px}
   .x1nrll8i:not(#\#):not(#\#):not(#\#):not(#\#){left:50%}
   .x1jyxor1:not(#\#):not(#\#):not(#\#):not(#\#){margin-bottom:-1px}
-  .x1if0o47:not(#\#):not(#\#):not(#\#):not(#\#){margin-bottom:-48px}
   .xat24cr:not(#\#):not(#\#):not(#\#):not(#\#){margin-bottom:0}
   .xlgak1e:not(#\#):not(#\#):not(#\#):not(#\#){margin-bottom:calc(-1 * (max(var(--_tab-strip-bleed),calc(-1 * var(--_tab-indicator-bottom,-1px)))))}
   .x1z0f2p2:not(#\#):not(#\#):not(#\#):not(#\#){margin-bottom:calc(-1 * var(--_chat-composer-radius))}
+  .xgwt18o:not(#\#):not(#\#):not(#\#):not(#\#){margin-bottom:calc(-1 * var(--_sheet-reserve,48px))}
   .x13i4uq0:not(#\#):not(#\#):not(#\#):not(#\#){margin-bottom:calc(-1 * var(--astryx-number-input-padding-block-end,var(--astryx-number-input-padding,var(--spacing-1))))}
   .xmtqr6q:not(#\#):not(#\#):not(#\#):not(#\#){margin-bottom:calc(-1 * var(--border-width))}
   .x6h7pi7:not(#\#):not(#\#):not(#\#):not(#\#){margin-bottom:calc(-1 * var(--container-padding-block-end,0px))}
@@ -2007,7 +2007,7 @@
   .x1xiyphd:not(#\#):not(#\#):not(#\#):not(#\#){max-height:240px}
   .xuyqlj2:not(#\#):not(#\#):not(#\#):not(#\#){max-height:300px}
   .xbhvqqn:not(#\#):not(#\#):not(#\#):not(#\#){max-height:calc(100% - var(--spacing-3))}
-  .x14bu9tk:not(#\#):not(#\#):not(#\#):not(#\#){max-height:calc(92dvh + 48px)}
+  .xkche18:not(#\#):not(#\#):not(#\#):not(#\#){max-height:calc(92dvh + var(--_sheet-reserve,48px))}
   .x3v4n1:not(#\#):not(#\#):not(#\#):not(#\#){max-height:calc(calc(100vh - var(--spacing-4) - var(--spacing-4) - var(--astryx-layer-inset-block-start, 0px) - var(--astryx-layer-inset-block-end, 0px)));max-height:calc(calc(100dvb - calc(max(var(--spacing-4), env(safe-area-inset-top, 0px)) + var(--astryx-layer-inset-block-start, 0px)) - calc(max(var(--spacing-4), env(safe-area-inset-bottom, 0px)) + var(--astryx-layer-inset-block-end, 0px))))}
   .x1uh1i8a:not(#\#):not(#\#):not(#\#):not(#\#){max-height:min(300px,calc(100vh - var(--spacing-4) - var(--spacing-4) - var(--astryx-layer-inset-block-start, 0px) - var(--astryx-layer-inset-block-end, 0px)));max-height:min(300px,calc(100dvb - calc(max(var(--spacing-4), env(safe-area-inset-top, 0px)) + var(--astryx-layer-inset-block-start, 0px)) - calc(max(var(--spacing-4), env(safe-area-inset-bottom, 0px)) + var(--astryx-layer-inset-block-end, 0px))))}
   .xa1agwl:not(#\#):not(#\#):not(#\#):not(#\#){max-height:min(480px,calc(100vh - var(--spacing-4) - var(--spacing-4) - var(--astryx-layer-inset-block-start, 0px) - var(--astryx-layer-inset-block-end, 0px)));max-height:min(480px,calc(100dvb - calc(max(var(--spacing-4), env(safe-area-inset-top, 0px)) + var(--astryx-layer-inset-block-start, 0px)) - calc(max(var(--spacing-4), env(safe-area-inset-bottom, 0px)) + var(--astryx-layer-inset-block-end, 0px))))}
@@ -2103,7 +2103,7 @@
   .x1e4zzel:not(#\#):not(#\#):not(#\#):not(#\#){overscroll-behavior-y:contain}
   .x18d9i69:not(#\#):not(#\#):not(#\#):not(#\#){padding-bottom:0}
   .x1j85h84:not(#\#):not(#\#):not(#\#):not(#\#){padding-bottom:1px}
-  .x1wkw6tp:not(#\#):not(#\#):not(#\#):not(#\#){padding-bottom:calc(env(safe-area-inset-bottom,0px) + 48px)}
+  .x5559hn:not(#\#):not(#\#):not(#\#):not(#\#){padding-bottom:calc(env(safe-area-inset-bottom,0px) + var(--_sheet-reserve,48px))}
   .x9jihrk:not(#\#):not(#\#):not(#\#):not(#\#){padding-bottom:calc(var(--_chat-composer-padding) + var(--_chat-composer-radius))}
   .xvmia7e:not(#\#):not(#\#):not(#\#):not(#\#){padding-bottom:calc(var(--container-padding-block-end,0px) + env(safe-area-inset-bottom,0px))}
   .xbv1mwh:not(#\#):not(#\#):not(#\#):not(#\#){padding-bottom:calc(var(--container-padding-block-end) - var(--border-width))}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@astryxdesign/core",
-  "version": "0.7.9-canary.e9bfd12",
+  "version": "0.7.9-canary.ef3db95",
   "displayName": "Astryx Core",
   "description": "The component library. Accessible, themeable React components with built-in spacing, dark mode, and StyleX styling.",
   "author": "Meta Open Source",
@@ -875,9 +875,9 @@
     "react-dom": ">=19.0.0"
   },
   "devDependencies": {
-    "@astryxdesign/a11y-spec": "0.7.9-canary.e9bfd12",
-    "@astryxdesign/cli": "0.7.9-canary.e9bfd12",
-    "@astryxdesign/interaction-harness": "0.7.9-canary.e9bfd12",
+    "@astryxdesign/a11y-spec": "0.7.9-canary.ef3db95",
+    "@astryxdesign/cli": "0.7.9-canary.ef3db95",
+    "@astryxdesign/interaction-harness": "0.7.9-canary.ef3db95",
     "@babel/cli": "^7.29.7",
     "@babel/core": "^7.29.7",
     "@babel/preset-react": "^7.29.7",

package/src/BottomSheet/BottomSheetPanel.tsx

@@ -26,6 +26,7 @@ import {
   useLayoutEffect,
   useMemo,
   useRef,
+  useSyncExternalStore,
   type ReactNode,
 } from 'react';
 import * as stylex from '@stylexjs/stylex';
@@ -60,6 +61,7 @@ import {
   paddingStyles,
   spacingStepToToken,
 } from '../Layout/padding.stylex';
+import {subscribeInput} from '../utils/inputStream';
 import type {SpacingStep} from '../utils/types';
 import {
   isValidSnapPoint,
@@ -82,8 +84,20 @@ const HEIGHT_BUDGETS = {
 export type BottomSheetHeight = keyof typeof HEIGHT_BUDGETS;
 export type {BottomSheetSnapPoint};
 
-// SYNC: must match OVERSCROLL_MAX in useSheetGestures.ts.
-const OVERSCROLL_PADDING = 48;
+// The reserve: how far the sheet's surface reaches below the screen, so a
+// pull past the top never shows the page under it.
+// SYNC: OVERSCROLL_MAX in useSheetGestures.ts must not exceed MIN_RESERVE.
+const MIN_RESERVE = 48;
+// A finger can pull past the top by at most the viewport's height. The rubber
+// band over a sheet as tall as the viewport then shows 35.5% of it.
+const RESERVE_VIEWPORT_SHARE = 0.4;
+
+function sheetReserve(viewportHeight: number): number {
+  return Math.max(
+    MIN_RESERVE,
+    Math.ceil(viewportHeight * RESERVE_VIEWPORT_SHARE),
+  );
+}
 const MOBILE_KEYBOARD_BOTTOM_CLEARANCE = 48;
 const TRANSITION_BACKSTOP_BUFFER_MS = 50;
 // The floating handle bar's height. The bar is out of flow, so this is not
@@ -92,6 +106,22 @@ const TRANSITION_BACKSTOP_BUFFER_MS = 50;
 // padding already provides.
 const HANDLE_BAR_HEIGHT = spacingVars['--spacing-6'];
 
+const BLOCK_SIZE_PROPERTIES = [
+  'height',
+  'minHeight',
+  'maxHeight',
+  'blockSize',
+  'minBlockSize',
+  'maxBlockSize',
+] as const;
+
+/** Whether StyleX styles hold any style: they can nest in arrays. */
+function hasStyles(xstyle: unknown): boolean {
+  return Array.isArray(xstyle)
+    ? xstyle.some(hasStyles)
+    : xstyle != null && typeof xstyle === 'object';
+}
+
 // Measure the viewport that the height budgets use. They are `dvh`, which
 // the virtual keyboard does not shrink, so `visualViewport` would differ by
 // the keyboard's height. `useMobileKeyboard` handles the keyboard and does
@@ -100,6 +130,14 @@ function layoutViewportHeight(): number {
   return typeof window === 'undefined' ? 0 : window.innerHeight;
 }
 
+function subscribeToResize(onChange: () => void): () => void {
+  return subscribeInput(window, 'resize', onChange);
+}
+
+function subscribeToNothing(): () => void {
+  return () => {};
+}
+
 /**
  * A stable identity for a set of snap points. Type-tagged, so the fraction
  * `0.5` and the (invalid) string `'0.5'` cannot collide on one key.
@@ -159,8 +197,8 @@ const styles = stylex.create({
     boxShadow: shadowVars['--shadow-high'],
     outline: 'none',
     overflow: 'hidden',
-    paddingBlockEnd: `calc(env(safe-area-inset-bottom, 0px) + ${OVERSCROLL_PADDING}px)`,
-    marginBlockEnd: `${-OVERSCROLL_PADDING}px`,
+    paddingBlockEnd: `calc(env(safe-area-inset-bottom, 0px) + var(--_sheet-reserve, ${MIN_RESERVE}px))`,
+    marginBlockEnd: `calc(-1 * var(--_sheet-reserve, ${MIN_RESERVE}px))`,
     // Under reduced motion no transform runs. On a coarse primary pointer the
     // entrance is an opacity cross-fade of at most 200 ms. A fine pointer gets
     // the change at once (the 0.01s collapse).
@@ -340,11 +378,11 @@ const styles = stylex.create({
     },
   }),
   budget: {
-    height: `calc(var(--_sheet-budget) + ${OVERSCROLL_PADDING}px)`,
+    height: `calc(var(--_sheet-budget) + var(--_sheet-reserve, ${MIN_RESERVE}px))`,
   },
   hugHeight: {
     height: 'fit-content',
-    maxHeight: `calc(${HEIGHT_BUDGETS.hug} + ${OVERSCROLL_PADDING}px)`,
+    maxHeight: `calc(${HEIGHT_BUDGETS.hug} + var(--_sheet-reserve, ${MIN_RESERVE}px))`,
   },
 });
 
@@ -649,6 +687,24 @@ export function BottomSheetPanel({
 
   // A caller's height owns the element's height: the drag never writes it.
   const consumerHeight = style?.height;
+  // StyleX styles and a class name can size the sheet too. Their rules are
+  // only class names here, so any of them counts as a size.
+  const isSizedByCaller =
+    BLOCK_SIZE_PROPERTIES.some(property => style?.[property] != null) ||
+    hasStyles(xstyle) ||
+    (className != null && className !== '');
+  // Only a finger stretches the sheet past MIN_RESERVE, so a device with no
+  // touch pointer keeps the smallest reserve. So does a sheet the caller
+  // sizes, which nothing extends by the reserve; the stretch stops at it.
+  const hasTouchPointer = useMediaQuery('(any-pointer: coarse)');
+  const tracksViewport = isPresented && hasTouchPointer && !isSizedByCaller;
+  const viewportHeight = useSyncExternalStore(
+    tracksViewport ? subscribeToResize : subscribeToNothing,
+    () => (tracksViewport ? layoutViewportHeight() : 0),
+    () => 0,
+  );
+  const reserve =
+    viewportHeight > 0 ? sheetReserve(viewportHeight) : MIN_RESERVE;
   const {
     contentProps,
     handleProps,
@@ -668,7 +724,7 @@ export function BottomSheetPanel({
     isOpen: isInteractive,
     isOpenRequested: isOpenRequested ?? isInteractive,
     canDismiss: isSwipeDismissAllowed,
-    offscreenBlockEndInset: OVERSCROLL_PADDING,
+    offscreenBlockEndInset: reserve,
     onDismiss,
     snapHeights,
     onTravelStart: () => {
@@ -931,6 +987,7 @@ export function BottomSheetPanel({
         className,
         {
           ['--_sheet-budget' as string]: budget,
+          ['--_sheet-reserve' as string]: `${reserve}px`,
           ...(isInteractive
             ? gestureStyle
             : isRetained || isClosing

package/src/BottomSheet/useSheetGestures.ts

@@ -64,6 +64,8 @@ import {
   type UIEvent as ReactUIEvent,
 } from 'react';
 
+import {rubberBand} from '../motion/rubberBand';
+import {scroll} from '../motion/uikit/scroll';
 import {
   computeDetentOffsets,
   peekOffsetFor,
@@ -112,12 +114,19 @@ function isSyntheticTouch(event: ReactPointerEvent): boolean {
   return (event as SyntheticTouchPointer).syntheticTouch === true;
 }
 
-// Rubber-band factor for dragging up past fully-open, capped at OVERSCROLL_MAX
-// (the sheet reserves that much bottom padding for the lift to reveal).
+type StylusTouch = Touch & {touchType?: string};
+
+// An Apple Pencil raises touch events too, marked `stylus`. Its drag is a
+// pen's, as on the grabber, where WebKit reports it as a pen.
+function touchPointerType(touch: Touch): string {
+  return (touch as StylusTouch).touchType === 'stylus' ? 'pen' : 'touch';
+}
+
+// A mouse's stretch past fully open: a resisted fraction of the drag, capped
+// at OVERSCROLL_MAX.
 const OVERSCROLL_RESISTANCE = 0.35;
-// SYNC: must match OVERSCROLL_PADDING in BottomSheetPanel.tsx (the reserved
-// bottom padding the lift reveals). Kept as a local const rather than a shared
-// import so it can be used inside stylex.create there.
+// SYNC: must not exceed MIN_RESERVE in BottomSheetPanel.tsx, the smallest
+// reserve the sheet keeps below the screen.
 const OVERSCROLL_MAX = 48;
 // Travel past the point where a scrolling gesture ran out of content before it
 // hands the sheet the rest of the pull. Small enough to feel continuous with
@@ -308,6 +317,36 @@ function chainAtBottom(chain: ReadonlyArray<HTMLElement>): boolean {
   return chain.every(elementAtBottom);
 }
 
+function chainScrolls(chain: ReadonlyArray<HTMLElement>): boolean {
+  return chain.some(element => element.scrollHeight - element.clientHeight > 1);
+}
+
+/**
+ * iOS rubber-bands a scroller past its end even under `overscroll-behavior:
+ * contain`. While the content sits at its end mid-pull, `none` holds it still,
+ * so only the sheet moves. Returns the undo.
+ */
+function holdAtEnd(chain: ReadonlyArray<HTMLElement>): () => void {
+  const previous = chain.map(element => element.style.overscrollBehaviorY);
+  for (const element of chain) {
+    element.style.overscrollBehaviorY = 'none';
+  }
+  return () => {
+    chain.forEach((element, index) => {
+      element.style.overscrollBehaviorY = previous[index];
+    });
+  };
+}
+
+function releaseContentHold(
+  armed: {releaseContentHold: (() => void) | null} | null,
+): void {
+  if (armed?.releaseContentHold != null) {
+    armed.releaseContentHold();
+    armed.releaseContentHold = null;
+  }
+}
+
 function visibleHeightForOffset(
   sheetHeight: number,
   offset: number,
@@ -690,6 +729,8 @@ export function useSheetGestures({
     samples: {t: number; y: number}[];
     velocity: number;
     height: number;
+    /** The surface kept below the screen when the drag began. */
+    reserve: number;
     baseOffset: number;
     baseLayoutOffset: number;
     renderedOffset: number;
@@ -1171,7 +1212,7 @@ export function useSheetGestures({
       const baseLayoutOffset = settledLayoutOffsetRef.current;
       dragStateRef.current = {
         syntheticTouch,
-        pointerType: syntheticTouch ? 'touch' : event.pointerType,
+        pointerType: event.pointerType,
         pointerId: event.pointerId,
         startCoord: start,
         lastCoord: event.clientY,
@@ -1179,6 +1220,7 @@ export function useSheetGestures({
         samples: [{t: event.timeStamp, y: event.clientY}],
         velocity: 0,
         height: sheetHeight,
+        reserve: offscreenBlockEndInsetRef.current,
         baseOffset: settledOffset,
         baseLayoutOffset,
         renderedOffset: settledOffset,
@@ -1279,8 +1321,19 @@ export function useSheetGestures({
       const maxDetentOffset = offsets[offsets.length - 1];
       let next: number;
       if (raw < 0) {
-        // Up past fully-open: damped + capped rubber-band; springs back on release.
-        next = Math.max(-OVERSCROLL_MAX, raw * OVERSCROLL_RESISTANCE);
+        // A touch device's reserve covers the whole stretch. The clamp binds
+        // only where the reserve is short.
+        next =
+          state.pointerType === 'touch'
+            ? Math.max(
+                -state.reserve,
+                rubberBand(
+                  raw,
+                  state.height - state.reserve,
+                  scroll.rubberBand.coefficient,
+                ),
+              )
+            : Math.max(-OVERSCROLL_MAX, raw * OVERSCROLL_RESISTANCE);
       } else if (raw > maxDetentOffset) {
         // In the dismiss zone: no magnet, so it doesn't fight a drag-to-close.
         next = raw;
@@ -1482,6 +1535,8 @@ export function useSheetGestures({
     // armed at `touchstart`. That drag never cancelled the native scroll, so
     // it has to yield again if the finger comes back down.
     promotedAtContentEnd: boolean;
+    // Null while no hold is set.
+    releaseContentHold: (() => void) | null;
   } | null>(null);
   const previousTouchHandlersRef = useRef<{
     start: (e: TouchEvent) => void;
@@ -1495,6 +1550,7 @@ export function useSheetGestures({
   // the gesture; the sheet returns to its detent.
   const yieldToPinch = useCallback(
     (target?: HTMLElement) => {
+      releaseContentHold(touchDragRef.current);
       touchDragRef.current = null;
       armedBodyRef.current = null;
       cancelDrag(target);
@@ -1522,6 +1578,7 @@ export function useSheetGestures({
       ({
         syntheticTouch: true,
         pointerId: touch.identifier,
+        pointerType: touchPointerType(touch),
         clientY: touch.clientY,
         timeStamp: Date.now(),
         currentTarget: target,
@@ -1542,21 +1599,21 @@ export function useSheetGestures({
       // scroll, but it is tracked all the same: the scroller can run out of
       // content while the finger is still down (see onTouchMove). A touch
       // inside a layer this sheet hosts is that layer's, never tracked here.
+      releaseContentHold(touchDragRef.current);
       if (!touch || isInsideNestedLayer(event.target, body)) {
         touchDragRef.current = null;
         return;
       }
       const scrollers = scrollChainUnder(event.target, body);
       const top = chainAtTop(scrollers);
-      // The bottom edge hands off so the sheet can EXPAND, so it is only a
-      // handoff when a taller detent exists. Already at the tallest, an
-      // upward pull has nowhere to travel: promoting it would trade the
-      // user's scroll for a rubber-band the release throws straight back, and
-      // — because promotion preventDefault()s the rest of the gesture — would
-      // strand the scroller for as long as the finger stays down, so reversing
-      // downward to scroll back would collapse the sheet instead. Leave the
-      // gesture with the content.
-      const bottom = chainAtBottom(scrollers) && activeOffsetRef.current > 0;
+      // Claiming a pull up from its first move blocks the content's scroll for
+      // the whole touch. So it is claimed here only below the tallest detent,
+      // or over content that cannot scroll. At the tallest detent, a list at
+      // its end keeps its touch. Its pull reaches the sheet through the
+      // content-end hand-off below, and a reversal hands it back.
+      const bottom =
+        chainAtBottom(scrollers) &&
+        (activeOffsetRef.current > 0 || !chainScrolls(scrollers));
       touchDragRef.current = {
         id: touch.identifier,
         startY: touch.clientY,
@@ -1565,6 +1622,7 @@ export function useSheetGestures({
         bottom,
         contentEndY: null,
         promotedAtContentEnd: false,
+        releaseContentHold: null,
       };
     };
 
@@ -1594,6 +1652,7 @@ export function useSheetGestures({
             // at once; a later pull past the end promotes again.
             armed.contentEndY = null;
             armed.promotedAtContentEnd = false;
+            releaseContentHold(armed);
             cancelDragRef.current(scroller);
             return;
           }
@@ -1627,6 +1686,7 @@ export function useSheetGestures({
         chainAtBottom(armed.scrollers);
       if (pullDownAtTop || pullUpAtBottom) {
         event.preventDefault();
+        releaseContentHold(armed);
         touchDragRef.current = null;
         beginDragRef.current(
           asPointer(t, scroller),
@@ -1646,13 +1706,14 @@ export function useSheetGestures({
       // cannot see this, and re-arming for a preventDefault() promotion would
       // be useless anyway: once the browser has committed the gesture to
       // scrolling, every remaining touchmove is non-cancelable. Nothing needs
-      // cancelling either — the scroller is clamped at its maximum, so further
-      // upward travel scrolls nothing. Anchor at the point where the content
+      // cancelling either: the hold clamps the scroller at its maximum, so
+      // further upward travel scrolls nothing. Anchor at the point where the content
       // ran out and give the sheet everything past it, so the pull continues
       // into the sheet with no jump and no lost scrolling.
-      if (activeOffsetRef.current > 0 && chainAtBottom(armed.scrollers)) {
+      if (chainAtBottom(armed.scrollers)) {
         if (armed.contentEndY == null) {
           armed.contentEndY = t.clientY;
+          armed.releaseContentHold ??= holdAtEnd(armed.scrollers);
         } else if (armed.contentEndY - t.clientY >= CONTENT_END_HANDOFF_SLOP) {
           armed.promotedAtContentEnd = true;
           beginDragRef.current(
@@ -1664,10 +1725,12 @@ export function useSheetGestures({
         }
       } else {
         armed.contentEndY = null;
+        releaseContentHold(armed);
       }
     };
 
     const onTouchEnd = (event: TouchEvent) => {
+      releaseContentHold(touchDragRef.current);
       touchDragRef.current = null;
       const pointerId = dragStateRef.current?.pointerId;
       if (pointerId == null) {