@rific/scroll-view 0.8.3 → 0.9.1

package/dist/index.mjs

@@ -38,6 +38,9 @@ import { runOnJS, useAnimatedScrollHandler, useSharedValue as useSharedValue2, w
 import { createContext } from "react";
 var ScrollViewContext = createContext({
   blur: true,
+  chromeHosted: false,
+  chromeOverhang: 0,
+  chromeWritable: null,
   footerAboveKeyboard: false,
   footerHeight: null,
   footerHeightShared: null,
@@ -68,6 +71,7 @@ var ScrollViewContext = createContext({
   },
   snapBackFooterShared: null,
   snapBackHeaderShared: null,
+  stackHeightShared: null,
   tabBarHeight: 0
 });
 
@@ -259,9 +263,20 @@ function useScrollInit({ listHeaderComponent, onMomentumScrollEnd: externalMomen
   return { activeListHeader, handleMomentumScrollEnd, handleScrollBeginDrag, handleScrollEndDrag, hiddenHeader, onRemountSyncRetry, onRemountSynced, pullSearchMinHeight: pullSearchHeight ?? 0, remountSyncTarget, remountTarget, scrollReady };
 }
 
+// src/internal/chrome.ts
+var CHROME_SLACK = 2;
+var chromeTravel = (maxScroll, headerHeight) => {
+  "worklet";
+  return usesContentInset ? maxScroll + headerHeight : maxScroll;
+};
+var chromeSettleTarget = (offset, stackHeight) => {
+  "worklet";
+  return offset > stackHeight / 2 ? stackHeight : 0;
+};
+
 // src/internal/useScrollHandler.ts
 function useScrollHandler({ capturedGeneration, chipHidden, chipThreshold = 100, footerFixed, headerFixed, isHorizontal, listGeneration, onRemountSyncRetry, onRemountSynced, remountSyncTarget }) {
-  const { footerHeightShared, footerOffset, headerHeightShared, headerOffset, pullSearchHeightShared, scrollPosition, snapBackFooterShared, snapBackHeaderShared } = useContext2(ScrollViewContext);
+  const { chromeHosted, chromeWritable, footerOffset, headerHeightShared, headerOffset, pullSearchHeightShared, scrollPosition, snapBackFooterShared, snapBackHeaderShared, stackHeightShared } = useContext2(ScrollViewContext);
   const snapUpAccum = useSharedValue2(0);
   const fromBottomBounce = useSharedValue2(false);
   return useAnimatedScrollHandler(
@@ -296,7 +311,9 @@ function useScrollHandler({ capturedGeneration, chipHidden, chipThreshold = 100,
           fromBottomBounce.value = false;
         }
         const snapHeader = snapBackHeaderShared.value && !headerFixed;
-        const snapFooter = snapBackFooterShared.value && !footerFixed;
+        const hideable = !chromeHosted || chromeTravel(maxScroll, headerHeightShared.value) >= stackHeightShared.value;
+        if (chromeHosted && !hideable && chromeWritable.value && footerOffset.value !== 0) footerOffset.value = 0;
+        const snapFooter = snapBackFooterShared.value && !footerFixed && chromeWritable.value && hideable;
         if (snapHeader || snapFooter) {
           if (yn <= -headerHeightShared.value) {
             snapUpAccum.value = 0;
@@ -306,7 +323,7 @@ function useScrollHandler({ capturedGeneration, chipHidden, chipThreshold = 100,
             snapUpAccum.value = 0;
             if (yn >= -headerHeightShared.value + pullSearchHeightShared.value) {
               if (snapHeader) headerOffset.value = Math.max(-headerHeightShared.value, Math.min(0, headerOffset.value - delta));
-              if (snapFooter) footerOffset.value = Math.max(0, Math.min(footerHeightShared.value, footerOffset.value + delta));
+              if (snapFooter) footerOffset.value = Math.max(0, Math.min(stackHeightShared.value, footerOffset.value + delta));
             }
           } else if (delta < 0 && !fromBottomBounce.value) {
             if (yn >= -headerHeightShared.value + pullSearchHeightShared.value) snapUpAccum.value -= delta;
@@ -323,21 +340,29 @@ function useScrollHandler({ capturedGeneration, chipHidden, chipThreshold = 100,
         fromBottomBounce.value = false;
         snapUpAccum.value = 0;
       },
-      onEndDrag: ({ contentOffset: { y }, contentSize: { height: contentHeight }, layoutMeasurement: { height: layoutHeight } }) => {
+      onEndDrag: ({ contentOffset: { y }, contentSize: { height: contentHeight }, layoutMeasurement: { height: layoutHeight }, velocity }) => {
         "worklet";
         if (isHorizontal) return;
+        const revealing = snapUpAccum.value >= 10;
         if (y >= contentHeight - layoutHeight - 10) {
           fromBottomBounce.value = true;
           snapUpAccum.value = 0;
         }
+        if (chromeHosted && !footerFixed && chromeWritable.value && (velocity === void 0 || Math.abs(velocity.y) < 0.1)) {
+          footerOffset.value = withTiming(revealing ? 0 : chromeSettleTarget(footerOffset.value, stackHeightShared.value), { duration: 200 });
+        }
       },
       onMomentumEnd: () => {
         "worklet";
+        const revealing = snapUpAccum.value >= 10;
         fromBottomBounce.value = false;
         snapUpAccum.value = 0;
+        if (chromeHosted && !isHorizontal && !footerFixed && chromeWritable.value) {
+          footerOffset.value = withTiming(revealing ? 0 : chromeSettleTarget(footerOffset.value, stackHeightShared.value), { duration: 200 });
+        }
       }
     },
-    [capturedGeneration, headerFixed, footerFixed, isHorizontal, chipThreshold, listGeneration, onRemountSyncRetry, onRemountSynced, remountSyncTarget]
+    [capturedGeneration, chromeHosted, headerFixed, footerFixed, isHorizontal, chipThreshold, listGeneration, onRemountSyncRetry, onRemountSynced, remountSyncTarget]
   );
 }
 
@@ -379,18 +404,20 @@ var CHIP_SLIDE = 48;
 function useScrollList({ footerFixed: footerFixedProp, headerFixed: headerFixedProp, hideUntilMeasured, isHorizontal, keyboardAware, pullSearchHeight, style } = {}) {
   const insets = useSafeAreaInsets();
   const keyboardHeight = useKeyboardInset();
-  const { footerAboveKeyboard, footerHeight, footerFixed: contextFooterFixed, headerHeight, headerHeightShared, headerFixed: contextHeaderFixed, headerOffset, pullSearchHeightShared, scrollPosition, snapBackHeaderShared, tabBarHeight } = useContext3(ScrollViewContext);
+  const { chromeHosted, chromeOverhang, footerAboveKeyboard, footerHeight, footerFixed: contextFooterFixed, headerHeight, headerHeightShared, headerFixed: contextHeaderFixed, headerOffset, pullSearchHeightShared, scrollPosition, snapBackHeaderShared, tabBarHeight } = useContext3(ScrollViewContext);
   const headerFixed = isHorizontal ? true : headerFixedProp ?? contextHeaderFixed;
-  const footerFixed = isHorizontal ? true : footerFixedProp ?? contextFooterFixed;
+  const footerFixed = isHorizontal ? true : chromeHosted ? contextFooterFixed : footerFixedProp ?? contextFooterFixed;
   useEffect2(() => {
     pullSearchHeightShared.value = usesContentInset ? pullSearchHeight ?? 0 : 0;
   }, [pullSearchHeight, pullSearchHeightShared]);
   const containerStyle = useMemo(() => headerHeight === null ? [{ flex: 1, opacity: hideUntilMeasured ? 0 : 1 }, style] : [StyleSheet2.absoluteFill, style], [headerHeight, hideUntilMeasured, style]);
   const insetGeometry = useMemo(() => {
-    const footerReserve = footerFixed ? footerHeight || insets.bottom : insets.bottom;
-    const bottom = (!keyboardAware || footerFixed && footerAboveKeyboard ? footerReserve : Math.max(footerReserve, keyboardHeight)) + tabBarHeight;
+    const baseReserve = chromeHosted ? chromeOverhang : insets.bottom;
+    const footerReserve = chromeHosted ? Math.max(footerHeight ?? 0, baseReserve) : footerFixed ? footerHeight || baseReserve : baseReserve;
+    const barReserve = chromeHosted && footerFixed && footerAboveKeyboard ? Math.max(tabBarHeight - keyboardHeight, 0) : tabBarHeight;
+    const bottom = (!keyboardAware || footerFixed && footerAboveKeyboard ? footerReserve : Math.max(footerReserve, keyboardHeight)) + barReserve;
     return { bottom, top: headerHeight ?? 0 };
-  }, [footerAboveKeyboard, footerFixed, footerHeight, insets.bottom, tabBarHeight, headerHeight, keyboardAware, keyboardHeight]);
+  }, [chromeHosted, chromeOverhang, footerAboveKeyboard, footerFixed, footerHeight, insets.bottom, tabBarHeight, headerHeight, keyboardAware, keyboardHeight]);
   const contentInset = usesContentInset ? insetGeometry : ZERO_INSET;
   const contentPadding = useMemo(() => usesContentInset || isHorizontal ? null : { paddingBottom: insetGeometry.bottom, paddingTop: insetGeometry.top }, [insetGeometry, isHorizontal]);
   const [startedWithHeader] = useState3(headerHeight !== null);
@@ -579,7 +606,7 @@ import { withTiming as withTiming3 } from "react-native-reanimated";
 var REMOUNT_RETRY_TOLERANCE = 1;
 var REMOUNT_RETRY_MAX_ATTEMPTS = 8;
 function useScrollHandlerJS({ capturedGeneration, chipHidden, chipThreshold = 100, footerFixed, headerFixed, isHorizontal, jsListGeneration, remountTarget = null, scrollTo }) {
-  const { footerHeightShared, footerOffset, headerHeightShared, headerOffset, pullSearchHeightShared, scrollPosition, snapBackFooterShared, snapBackHeaderShared } = useContext6(ScrollViewContext);
+  const { chromeHosted, chromeWritable, footerOffset, headerHeightShared, headerOffset, pullSearchHeightShared, scrollPosition, snapBackFooterShared, snapBackHeaderShared, stackHeightShared } = useContext6(ScrollViewContext);
   const snapUpAccum = useRef3(0);
   const fromBottomBounce = useRef3(false);
   const pendingRemountTarget = useRef3(remountTarget);
@@ -623,7 +650,9 @@ function useScrollHandlerJS({ capturedGeneration, chipHidden, chipThreshold = 10
         fromBottomBounce.current = false;
       }
       const snapHeader = snapBackHeaderShared.value && !headerFixed;
-      const snapFooter = snapBackFooterShared.value && !footerFixed;
+      const hideable = !chromeHosted || chromeTravel(maxScroll, headerHeightShared.value) >= stackHeightShared.value;
+      if (chromeHosted && !hideable && chromeWritable.value && footerOffset.value !== 0) footerOffset.value = 0;
+      const snapFooter = snapBackFooterShared.value && !footerFixed && chromeWritable.value && hideable;
       if (snapHeader || snapFooter) {
         if (yn <= -headerHeightShared.value) {
           snapUpAccum.current = 0;
@@ -633,7 +662,7 @@ function useScrollHandlerJS({ capturedGeneration, chipHidden, chipThreshold = 10
           snapUpAccum.current = 0;
           if (yn >= -headerHeightShared.value + pullSearchHeightShared.value) {
             if (snapHeader) headerOffset.value = Math.max(-headerHeightShared.value, Math.min(0, headerOffset.value - delta));
-            if (snapFooter) footerOffset.value = Math.max(0, Math.min(footerHeightShared.value, footerOffset.value + delta));
+            if (snapFooter) footerOffset.value = Math.max(0, Math.min(stackHeightShared.value, footerOffset.value + delta));
           }
         } else if (delta < 0 && !fromBottomBounce.current) {
           if (yn >= -headerHeightShared.value + pullSearchHeightShared.value) snapUpAccum.current -= delta;
@@ -645,7 +674,7 @@ function useScrollHandlerJS({ capturedGeneration, chipHidden, chipThreshold = 10
         }
       }
     },
-    [capturedGeneration, chipHidden, chipThreshold, footerFixed, footerHeightShared, footerOffset, headerFixed, headerHeightShared, headerOffset, isHorizontal, jsListGeneration, pullSearchHeightShared, scrollPosition, scrollTo, snapBackFooterShared, snapBackHeaderShared]
+    [capturedGeneration, chipHidden, chipThreshold, chromeHosted, chromeWritable, footerFixed, footerOffset, headerFixed, headerHeightShared, headerOffset, isHorizontal, jsListGeneration, pullSearchHeightShared, scrollPosition, scrollTo, snapBackFooterShared, snapBackHeaderShared, stackHeightShared]
   );
   const onScrollBeginDrag = useCallback3(() => {
     fromBottomBounce.current = false;
@@ -653,25 +682,37 @@ function useScrollHandlerJS({ capturedGeneration, chipHidden, chipThreshold = 10
   }, []);
   const onMomentumScrollBegin = useCallback3(() => {
   }, []);
+  const settle = useCallback3(
+    (revealing) => {
+      if (!chromeHosted || footerFixed || !chromeWritable.value) return;
+      footerOffset.value = withTiming3(revealing ? 0 : chromeSettleTarget(footerOffset.value, stackHeightShared.value), { duration: 200 });
+    },
+    [chromeHosted, chromeWritable, footerFixed, footerOffset, stackHeightShared]
+  );
   const onScrollEndDrag = useCallback3(
     (event) => {
       if (isHorizontal) return;
       const {
         contentOffset: { y },
         contentSize: { height: contentHeight },
-        layoutMeasurement: { height: layoutHeight }
+        layoutMeasurement: { height: layoutHeight },
+        velocity
       } = event.nativeEvent;
+      const revealing = snapUpAccum.current >= 10;
       if (y >= contentHeight - layoutHeight - 10) {
         fromBottomBounce.current = true;
         snapUpAccum.current = 0;
       }
+      if (velocity === void 0 || Math.abs(velocity.y) < 0.1) settle(revealing);
     },
-    [isHorizontal]
+    [isHorizontal, settle]
   );
   const onMomentumScrollEnd = useCallback3(() => {
+    const revealing = snapUpAccum.current >= 10;
     fromBottomBounce.current = false;
     snapUpAccum.current = 0;
-  }, []);
+    if (!isHorizontal) settle(revealing);
+  }, [isHorizontal, settle]);
   return { onMomentumScrollBegin, onMomentumScrollEnd, onScroll, onScrollBeginDrag, onScrollEndDrag };
 }
 
@@ -859,7 +900,7 @@ var PullSearch = forwardRef(function PullSearch2({ debounce, onChangeText, onHei
     (isHidden, wasHidden) => {
       if (isHidden && !wasHidden) runOnJS3(blurInput)();
     },
-    // scrollPosition has to be listed too, not just read — see useStickyHeaders' useAnimatedReaction
+    // scrollPosition has to be listed too, not just read - see useStickyHeaders' useAnimatedReaction
     // for why: on web, without reanimated's Babel plugin active, an unlisted SharedValue mutation
     // never re-triggers this reaction (confirmed empirically elsewhere in this package).
     [barHeight, headerHeight, blurInput, scrollPosition]
@@ -1000,22 +1041,56 @@ var ScrollViewInner = ({ chipProps, chipThreshold, children, contentContainerSty
 };
 var ScrollView = memo3(ScrollViewInner);
 
+// src/ScrollViewChromeProvider.tsx
+import { useCallback as useCallback7, useEffect as useEffect4, useMemo as useMemo5, useState as useState5 } from "react";
+import { useSharedValue as useSharedValue6, withTiming as withTiming4 } from "react-native-reanimated";
+
+// src/ScrollViewChromeContext.ts
+import { createContext as createContext2 } from "react";
+var ScrollViewChromeHostContext = createContext2(null);
+var ScrollViewChromeContext = createContext2(null);
+
+// src/ScrollViewChromeProvider.tsx
+import { jsx as jsx8 } from "react/jsx-runtime";
+var REVEAL_DURATION = 200;
+var alwaysActive = () => true;
+var ScrollViewChromeProvider = ({ children, footprint, overhang = 0, snapBack = true, useIsActive = alwaysActive }) => {
+  const offset = useSharedValue6(0);
+  const [claims, setClaims] = useState5([]);
+  const [pins, setPins] = useState5(0);
+  const activeId = claims.length > 0 ? claims[claims.length - 1] : null;
+  const pinned = pins > 0;
+  const claim = useCallback7((id) => setClaims((current) => [...current.filter((c) => c !== id), id]), []);
+  const release = useCallback7((id) => setClaims((current) => current.filter((c) => c !== id)), []);
+  const addPin = useCallback7(() => setPins((current) => current + 1), []);
+  const removePin = useCallback7(() => setPins((current) => Math.max(0, current - 1)), []);
+  const reveal = useCallback7(() => {
+    offset.value = withTiming4(0, { duration: REVEAL_DURATION });
+  }, [offset]);
+  useEffect4(() => {
+    reveal();
+  }, [activeId, pinned, reveal]);
+  const host = useMemo5(() => ({ activeId, claim, footprint, offset, overhang, pinned, release, reveal, snapBack, useIsActive }), [activeId, claim, footprint, offset, overhang, pinned, release, reveal, snapBack, useIsActive]);
+  const chrome = useMemo5(() => ({ addPin, footprint, offset, overhang, removePin, reveal }), [addPin, footprint, offset, overhang, removePin, reveal]);
+  return /* @__PURE__ */ jsx8(ScrollViewChromeContext.Provider, { value: chrome, children: /* @__PURE__ */ jsx8(ScrollViewChromeHostContext.Provider, { value: host, children }) });
+};
+
 // src/ScrollViewFooter.tsx
 import { BlurView as BlurView2 } from "@rific/auto-paper";
-import { useContext as useContext10, useEffect as useEffect4, useRef as useRef7 } from "react";
-import { StyleSheet as StyleSheet5, View as View5 } from "react-native";
+import { useContext as useContext10, useEffect as useEffect5, useLayoutEffect as useLayoutEffect5, useRef as useRef7 } from "react";
+import { Platform as Platform5, StyleSheet as StyleSheet5, View as View5 } from "react-native";
 import Animated5, { useAnimatedStyle as useAnimatedStyle4 } from "react-native-reanimated";
 import { useSafeAreaInsets as useSafeAreaInsets3 } from "react-native-safe-area-context";
-import { jsx as jsx8, jsxs as jsxs5 } from "react/jsx-runtime";
+import { jsx as jsx9, jsxs as jsxs5 } from "react/jsx-runtime";
 var ScrollViewFooter = ({ children, style }) => {
-  const { blur, footerAboveKeyboard, footerHeight, footerFixed, footerOffset, headerHeightShared, pullSearchHeightShared, scrollPosition, setFooterHeight, snapBackFooterShared, tabBarHeight } = useContext10(ScrollViewContext);
+  const { blur, chromeHosted, chromeOverhang, footerAboveKeyboard, footerHeight, footerFixed, footerOffset, headerHeightShared, pullSearchHeightShared, scrollPosition, setFooterHeight, snapBackFooterShared, stackHeightShared, tabBarHeight } = useContext10(ScrollViewContext);
   const insets = useSafeAreaInsets3();
   const keyboardHeight = useKeyboardInset();
   const setFooterHeightRef = useRef7(setFooterHeight);
-  useEffect4(() => {
+  useEffect5(() => {
     setFooterHeightRef.current = setFooterHeight;
   });
-  useEffect4(
+  useEffect5(
     () => () => {
       setFooterHeightRef.current(null);
     },
@@ -1029,23 +1104,33 @@ var ScrollViewFooter = ({ children, style }) => {
     if (footerHeight !== height) setFooterHeight(height);
   };
   const footerStyle = useAnimatedStyle4(() => {
+    if (chromeHosted) return { transform: [{ translateY: Math.min(Math.max(footerOffset.value, 0), stackHeightShared.value) }] };
     if (footerFixed) return { transform: [{ translateY: 0 }] };
     if (snapBackFooterShared.value) return { transform: [{ translateY: footerOffset.value }] };
     const effective = scrollPosition.value + headerHeightShared.value - pullSearchHeightShared.value;
     if (effective <= 0) return { transform: [{ translateY: 0 }] };
     return { transform: [{ translateY: Math.min(effective, footerHeight ?? 0) }] };
-  }, [footerHeight, footerFixed, headerHeightShared, pullSearchHeightShared, scrollPosition, snapBackFooterShared, footerOffset]);
+  }, [chromeHosted, footerHeight, footerFixed, headerHeightShared, pullSearchHeightShared, scrollPosition, snapBackFooterShared, footerOffset, stackHeightShared]);
   const containerPaddingBottom = footerFixed && footerAboveKeyboard ? keyboardHeight : 0;
-  const rowPaddingBottom = footerFixed && footerAboveKeyboard ? Math.max(insets.bottom - keyboardHeight, 0) : insets.bottom;
+  const rowRef = useRef7(null);
+  useLayoutEffect5(() => {
+    if (Platform5.OS !== "web" || footerHeight) return;
+    const height = rowRef.current?.offsetHeight;
+    if (typeof height !== "number" || height <= 0) return;
+    setFooterHeight(height + containerPaddingBottom);
+  }, []);
+  const bottomPadding = chromeHosted ? chromeOverhang : insets.bottom;
+  const rowPaddingBottom = footerFixed && footerAboveKeyboard ? Math.max(bottomPadding - keyboardHeight, 0) : bottomPadding;
+  const footerBottom = chromeHosted && footerFixed && footerAboveKeyboard ? Math.max(tabBarHeight - keyboardHeight, 0) : tabBarHeight;
   const { paddingBottom: consumerPaddingBottom, ...restStyle } = style ?? {};
   return (
     // bottom: tabBarHeight (not the styles.footer default of 0) - a consuming app's own persistent
     // tab bar (a fixture outside this package's header/footer concepts entirely, same as
     // useScrollList's content-inset reservation) sits below this at the true screen bottom, so this
     // bar has to clear it rather than rendering flush against 0 and overlapping/hiding behind it.
-    /* @__PURE__ */ jsxs5(Animated5.View, { onLayout: handleLayout, pointerEvents: "box-none", style: [styles6.footer, { bottom: tabBarHeight, paddingBottom: containerPaddingBottom }, footerStyle], children: [
-      (footerHeight ?? 0) > 0 && /* @__PURE__ */ jsx8(BlurView2, { blur, style: StyleSheet5.absoluteFill }),
-      /* @__PURE__ */ jsx8(View5, { style: [styles6.row, restStyle, { paddingBottom: rowPaddingBottom + (typeof consumerPaddingBottom === "number" ? consumerPaddingBottom : 0) }], children })
+    /* @__PURE__ */ jsxs5(Animated5.View, { onLayout: handleLayout, pointerEvents: "box-none", style: [styles6.footer, { bottom: footerBottom, paddingBottom: containerPaddingBottom }, footerStyle], children: [
+      (footerHeight ?? 0) > 0 && /* @__PURE__ */ jsx9(BlurView2, { blur, style: StyleSheet5.absoluteFill }),
+      /* @__PURE__ */ jsx9(View5, { ref: rowRef, style: [styles6.row, restStyle, { paddingBottom: rowPaddingBottom + (typeof consumerPaddingBottom === "number" ? consumerPaddingBottom : 0) }], children })
     ] })
   );
 };
@@ -1056,13 +1141,13 @@ var styles6 = StyleSheet5.create({
 
 // src/ScrollViewHeader.tsx
 import { BlurView as BlurView3 } from "@rific/auto-paper";
-import { useContext as useContext11 } from "react";
-import { StyleSheet as StyleSheet6, Text, View as View6 } from "react-native";
+import { useContext as useContext11, useLayoutEffect as useLayoutEffect6, useRef as useRef8 } from "react";
+import { Platform as Platform6, StyleSheet as StyleSheet6, Text, View as View6 } from "react-native";
 import { Appbar, ProgressBar, Surface, useTheme as useTheme4 } from "react-native-paper";
-import Animated6, { useAnimatedStyle as useAnimatedStyle5, useSharedValue as useSharedValue6 } from "react-native-reanimated";
+import Animated6, { useAnimatedStyle as useAnimatedStyle5, useSharedValue as useSharedValue7 } from "react-native-reanimated";
 import { useSafeAreaInsets as useSafeAreaInsets4 } from "react-native-safe-area-context";
-import { Fragment as Fragment4, jsx as jsx9, jsxs as jsxs6 } from "react/jsx-runtime";
-var ActionBg = ({ blur, style }) => blur ? /* @__PURE__ */ jsx9(View6, { style: [StyleSheet6.absoluteFill, styles7.actionBg, style], children: /* @__PURE__ */ jsx9(BlurView3, { blur: true, style: StyleSheet6.absoluteFill }) }) : /* @__PURE__ */ jsx9(View6, { style: [StyleSheet6.absoluteFill, styles7.actionBg, style], pointerEvents: "none", children: /* @__PURE__ */ jsx9(Surface, { style: StyleSheet6.absoluteFill, elevation: 1, children: null }) });
+import { Fragment as Fragment4, jsx as jsx10, jsxs as jsxs6 } from "react/jsx-runtime";
+var ActionBg = ({ blur, style }) => blur ? /* @__PURE__ */ jsx10(View6, { style: [StyleSheet6.absoluteFill, styles7.actionBg, style], children: /* @__PURE__ */ jsx10(BlurView3, { blur: true, style: StyleSheet6.absoluteFill }) }) : /* @__PURE__ */ jsx10(View6, { style: [StyleSheet6.absoluteFill, styles7.actionBg, style], pointerEvents: "none", children: /* @__PURE__ */ jsx10(Surface, { style: StyleSheet6.absoluteFill, elevation: 1, children: null }) });
 var ScrollViewHeader = ({ actionSize = 48, actionStyle, backAction, backActionAccessibilityLabel, backActionFixed, caption, centerContent, children, iconSize, style, title, topInset = true, trailingAction, trailingActionFixed = true }) => {
   const { blur, headerHeight, headerFixed, headerHeightShared, headerOffset, progress, progressing, pullSearchHeightShared, scrollPosition, setHeaderHeight, snapBackHeaderShared } = useContext11(ScrollViewContext);
   const { settings } = useContext11(ScrollViewSettingsContext);
@@ -1070,7 +1155,7 @@ var ScrollViewHeader = ({ actionSize = 48, actionStyle, backAction, backActionAc
   const insets = useSafeAreaInsets4();
   const theme = useTheme4();
   const top = topInset ? insets.top : 0;
-  const measuredShared = useSharedValue6(false);
+  const measuredShared = useSharedValue7(false);
   const handleLayout = ({
     nativeEvent: {
       layout: { height }
@@ -1079,6 +1164,14 @@ var ScrollViewHeader = ({ actionSize = 48, actionStyle, backAction, backActionAc
     measuredShared.value = true;
     if (headerHeight !== height) setHeaderHeight(height);
   };
+  const contentRef = useRef8(null);
+  useLayoutEffect6(() => {
+    if (Platform6.OS !== "web" || headerHeight) return;
+    const height = contentRef.current?.offsetHeight;
+    if (typeof height !== "number" || height <= 0) return;
+    measuredShared.value = true;
+    setHeaderHeight(height);
+  }, []);
   const actionMargin = 4;
   const contentMinHeight = actionSize + 2 * actionMargin;
   const unmeasuredHeight = top + contentMinHeight;
@@ -1108,31 +1201,31 @@ var ScrollViewHeader = ({ actionSize = 48, actionStyle, backAction, backActionAc
   const leadingStyle = { alignItems: "center", height: actionSize, justifyContent: "center", left: actionMargin, position: "absolute", top: actionTop, width: actionSize, zIndex: 3, ...actionShadow };
   const trailingStyle = { alignItems: "center", height: actionSize, justifyContent: "center", position: "absolute", right: actionMargin, top: actionTop, width: actionSize, zIndex: 3, ...actionShadow };
   return /* @__PURE__ */ jsxs6(Fragment4, { children: [
-    /* @__PURE__ */ jsx9(Animated6.View, { pointerEvents: "none", style: [styles7.blur, blurStyle], children: headerHeight !== 0 && /* @__PURE__ */ jsx9(BlurView3, { blur, style: [styles7.blurInner, { height: headerHeight ?? unmeasuredHeight }] }) }),
+    /* @__PURE__ */ jsx10(Animated6.View, { pointerEvents: "none", style: [styles7.blur, blurStyle], children: headerHeight !== 0 && /* @__PURE__ */ jsx10(BlurView3, { blur, style: [styles7.blurInner, { height: headerHeight ?? unmeasuredHeight }] }) }),
     /* @__PURE__ */ jsxs6(Animated6.View, { onLayout: handleLayout, pointerEvents: "box-none", style: [headerHeight === null ? styles7.headerInit : styles7.header, translateStyle], children: [
-      /* @__PURE__ */ jsx9(View6, { style: [{ paddingTop: top }, style], children: children ?? /* @__PURE__ */ jsxs6(View6, { style: [styles7.content, { minHeight: contentMinHeight }], children: [
-        /* @__PURE__ */ jsx9(View6, { style: styles7.side }),
-        /* @__PURE__ */ jsx9(View6, { style: styles7.spacer }),
-        (centerContent || title || caption) && /* @__PURE__ */ jsx9(View6, { style: [StyleSheet6.absoluteFill, styles7.titleContainer], pointerEvents: centerContent ? "box-none" : "none", children: centerContent ?? /* @__PURE__ */ jsxs6(Fragment4, { children: [
-          title && /* @__PURE__ */ jsx9(Text, { numberOfLines: 1, style: [styles7.title, { color: theme.colors.onSurface }], children: title }),
-          caption && /* @__PURE__ */ jsx9(Text, { numberOfLines: 1, style: [styles7.caption, { color: theme.colors.onSurfaceVariant }], children: caption })
+      /* @__PURE__ */ jsx10(View6, { ref: contentRef, style: [{ paddingTop: top }, style], children: children ?? /* @__PURE__ */ jsxs6(View6, { style: [styles7.content, { minHeight: contentMinHeight }], children: [
+        /* @__PURE__ */ jsx10(View6, { style: styles7.side }),
+        /* @__PURE__ */ jsx10(View6, { style: styles7.spacer }),
+        (centerContent || title || caption) && /* @__PURE__ */ jsx10(View6, { style: [StyleSheet6.absoluteFill, styles7.titleContainer], pointerEvents: centerContent ? "box-none" : "none", children: centerContent ?? /* @__PURE__ */ jsxs6(Fragment4, { children: [
+          title && /* @__PURE__ */ jsx10(Text, { numberOfLines: 1, style: [styles7.title, { color: theme.colors.onSurface }], children: title }),
+          caption && /* @__PURE__ */ jsx10(Text, { numberOfLines: 1, style: [styles7.caption, { color: theme.colors.onSurfaceVariant }], children: caption })
         ] }) })
       ] }) }),
-      !blur && /* @__PURE__ */ jsx9(View6, { style: [styles7.divider, { backgroundColor: theme.colors.outlineVariant }] })
+      !blur && /* @__PURE__ */ jsx10(View6, { style: [styles7.divider, { backgroundColor: theme.colors.outlineVariant }] })
     ] }),
-    /* @__PURE__ */ jsx9(Animated6.View, { pointerEvents: "none", style: [styles7.progress, progressStyle], children: /* @__PURE__ */ jsx9(ProgressBar, { indeterminate: progress === null, visible: progressing, progress: progress ?? void 0 }) }),
+    /* @__PURE__ */ jsx10(Animated6.View, { pointerEvents: "none", style: [styles7.progress, progressStyle], children: /* @__PURE__ */ jsx10(ProgressBar, { indeterminate: progress === null, visible: progressing, progress: progress ?? void 0 }) }),
     backAction && (effectiveBackActionFixed ? /* @__PURE__ */ jsxs6(Animated6.View, { style: leadingStyle, children: [
-      /* @__PURE__ */ jsx9(ActionBg, { blur, style: actionStyle }),
-      typeof backAction === "function" ? /* @__PURE__ */ jsx9(Appbar.BackAction, { accessibilityLabel: backActionAccessibilityLabel, onPress: backAction, size: iconSize ?? actionSize / 2, style: buttonStyle }) : backAction
+      /* @__PURE__ */ jsx10(ActionBg, { blur, style: actionStyle }),
+      typeof backAction === "function" ? /* @__PURE__ */ jsx10(Appbar.BackAction, { accessibilityLabel: backActionAccessibilityLabel, onPress: backAction, size: iconSize ?? actionSize / 2, style: buttonStyle }) : backAction
     ] }) : /* @__PURE__ */ jsxs6(Animated6.View, { style: [leadingStyle, translateStyle], children: [
-      /* @__PURE__ */ jsx9(ActionBg, { blur, style: actionStyle }),
-      typeof backAction === "function" ? /* @__PURE__ */ jsx9(Appbar.BackAction, { accessibilityLabel: backActionAccessibilityLabel, onPress: backAction, size: iconSize ?? actionSize / 2, style: buttonStyle }) : backAction
+      /* @__PURE__ */ jsx10(ActionBg, { blur, style: actionStyle }),
+      typeof backAction === "function" ? /* @__PURE__ */ jsx10(Appbar.BackAction, { accessibilityLabel: backActionAccessibilityLabel, onPress: backAction, size: iconSize ?? actionSize / 2, style: buttonStyle }) : backAction
     ] })),
     trailingAction && (trailingActionFixed ? /* @__PURE__ */ jsxs6(View6, { style: trailingStyle, children: [
-      /* @__PURE__ */ jsx9(ActionBg, { blur, style: actionStyle }),
+      /* @__PURE__ */ jsx10(ActionBg, { blur, style: actionStyle }),
       trailingAction
     ] }) : /* @__PURE__ */ jsxs6(Animated6.View, { style: [trailingStyle, translateStyle], children: [
-      /* @__PURE__ */ jsx9(ActionBg, { blur, style: actionStyle }),
+      /* @__PURE__ */ jsx10(ActionBg, { blur, style: actionStyle }),
       trailingAction
     ] }))
   ] });
@@ -1155,57 +1248,101 @@ var styles7 = StyleSheet6.create({
 
 // src/ScrollViewProvider.tsx
 import { useBlur } from "@rific/auto-paper";
-import { useCallback as useCallback7, useContext as useContext12, useEffect as useEffect5, useMemo as useMemo5, useRef as useRef8, useState as useState5 } from "react";
-import { Dimensions as Dimensions3, Platform as Platform5 } from "react-native";
-import { useSharedValue as useSharedValue7 } from "react-native-reanimated";
-import { jsx as jsx10 } from "react/jsx-runtime";
-var ScrollViewProvider = ({ blur, children, fixed = false, footerAboveKeyboard = false, footerFixed, headerFixed, snapBack, snapBackFooter, snapBackHeader, tabBarHeight = 0 }) => {
+import { useCallback as useCallback8, useContext as useContext12, useEffect as useEffect7, useLayoutEffect as useLayoutEffect7, useMemo as useMemo6, useRef as useRef9, useState as useState6 } from "react";
+import { Dimensions as Dimensions3, Platform as Platform7 } from "react-native";
+import { useSharedValue as useSharedValue8 } from "react-native-reanimated";
+
+// src/internal/ChromeRegistrar.tsx
+import { useEffect as useEffect6, useId } from "react";
+var ChromeRegistrar = ({ footerFixed, host, writable }) => {
+  const id = useId();
+  const active = host.useIsActive();
+  const { activeId, claim, pinned, release, reveal } = host;
+  useEffect6(() => {
+    if (!active) return void 0;
+    claim(id);
+    return () => release(id);
+  }, [active, claim, id, release]);
+  const owner = activeId === id;
+  useEffect6(() => {
+    writable.value = owner && !pinned;
+  }, [owner, pinned, writable]);
+  useEffect6(() => {
+    if (owner && footerFixed) reveal();
+  }, [footerFixed, owner, reveal]);
+  return null;
+};
+
+// src/ScrollViewProvider.tsx
+import { jsx as jsx11, jsxs as jsxs7 } from "react/jsx-runtime";
+var ScrollViewProvider = ({ blur, chrome, children, fixed = false, footerAboveKeyboard = false, footerFixed, headerFixed, snapBack, snapBackFooter, snapBackHeader, tabBarHeight = 0 }) => {
   const { settings } = useContext12(ScrollViewSettingsContext);
+  const enclosingHost = useContext12(ScrollViewChromeHostContext);
+  const chromeHost = chrome === false ? null : enclosingHost;
+  const chromeHosted = chromeHost !== null;
+  const chromeFootprint = chromeHost?.footprint ?? 0;
+  const chromeOverhang = chromeHost?.overhang ?? 0;
+  const chromeSnapBack = chromeHost?.snapBack ?? false;
   const effectiveBlur = useBlur(blur);
   const effectiveSnapBack = snapBack ?? settings.snapBack;
   const effectiveSnapBackHeader = snapBackHeader ?? settings.snapBackHeader;
   const effectiveSnapBackFooter = snapBackFooter ?? settings.snapBackFooter;
-  const [headerHeight, setHeaderHeightState] = useState5(null);
-  const [footerHeight, setFooterHeightState] = useState5(null);
-  const [progress, setProgress] = useState5(null);
-  const [progressing, setProgressing] = useState5(false);
-  const scrollPosition = useSharedValue7(0);
-  const listGeneration = useSharedValue7(0);
-  const jsListGeneration = useRef8(0);
-  const headerHeightShared = useSharedValue7(0);
-  const footerHeightShared = useSharedValue7(0);
-  const headerOffset = useSharedValue7(0);
-  const footerOffset = useSharedValue7(0);
-  const pullSearchHeightShared = useSharedValue7(0);
-  const snapBackHeaderShared = useSharedValue7(false);
-  const snapBackFooterShared = useSharedValue7(false);
-  useEffect5(() => {
+  const [headerHeight, setHeaderHeightState] = useState6(null);
+  const [footerHeight, setFooterHeightState] = useState6(null);
+  const [progress, setProgress] = useState6(null);
+  const [progressing, setProgressing] = useState6(false);
+  const scrollPosition = useSharedValue8(0);
+  const listGeneration = useSharedValue8(0);
+  const jsListGeneration = useRef9(0);
+  const headerHeightShared = useSharedValue8(0);
+  const footerHeightShared = useSharedValue8(0);
+  const headerOffset = useSharedValue8(0);
+  const ownFooterOffset = useSharedValue8(0);
+  const ownStackHeight = useSharedValue8(0);
+  const footerOffset = chromeHost ? chromeHost.offset : ownFooterOffset;
+  const chromeWritable = useSharedValue8(!chromeHosted);
+  useEffect7(() => {
+    if (!chromeHosted) chromeWritable.value = true;
+  }, [chromeHosted, chromeWritable]);
+  const revealChrome = chromeHost?.reveal;
+  const stackHeightShared = chromeHosted ? ownStackHeight : footerHeightShared;
+  const pullSearchHeightShared = useSharedValue8(0);
+  const snapBackHeaderShared = useSharedValue8(false);
+  const snapBackFooterShared = useSharedValue8(false);
+  useEffect7(() => {
     snapBackHeaderShared.value = effectiveSnapBackHeader ?? effectiveSnapBack;
-    snapBackFooterShared.value = effectiveSnapBackFooter ?? effectiveSnapBack;
-  }, [effectiveSnapBack, effectiveSnapBackFooter, effectiveSnapBackHeader, snapBackFooterShared, snapBackHeaderShared]);
-  const setHeaderHeight = useCallback7(
-    (h) => {
-      if (h === 0 && headerHeight) return;
-      setHeaderHeightState(h);
-      headerHeightShared.value = h ?? 0;
-    },
-    [headerHeight, headerHeightShared]
-  );
-  const onListUnmount = useCallback7(() => {
+    snapBackFooterShared.value = chromeHosted ? chromeSnapBack : effectiveSnapBackFooter ?? effectiveSnapBack;
+  }, [chromeHosted, chromeSnapBack, effectiveSnapBack, effectiveSnapBackFooter, effectiveSnapBackHeader, snapBackFooterShared, snapBackHeaderShared]);
+  useEffect7(() => {
+    if (!chromeHosted) return;
+    ownStackHeight.value = chromeFootprint + Math.max(footerHeight ?? 0, chromeOverhang) + CHROME_SLACK;
+  }, [chromeFootprint, chromeHosted, chromeOverhang, footerHeight, ownStackHeight]);
+  const headerHeightRef = useRef9(null);
+  const footerHeightRef = useRef9(null);
+  const setHeaderHeight = useCallback8((h) => {
+    if (h === 0 && headerHeightRef.current) return;
+    headerHeightRef.current = h;
+    setHeaderHeightState(h);
+  }, []);
+  useLayoutEffect7(() => {
+    headerHeightShared.value = headerHeight ?? 0;
+  }, [headerHeight, headerHeightShared]);
+  const onListUnmount = useCallback8(() => {
     listGeneration.value += 1;
-  }, [listGeneration]);
-  const onJsListUnmount = useCallback7(() => {
+    if (revealChrome && chromeWritable.value) revealChrome();
+  }, [chromeWritable, listGeneration, revealChrome]);
+  const onJsListUnmount = useCallback8(() => {
     jsListGeneration.current += 1;
   }, []);
-  useEffect5(() => {
+  useEffect7(() => {
     if (!__DEV__ || headerHeight !== null) return;
     const timeout = setTimeout(() => {
-      console.warn("[scroll-view] No ScrollViewHeader ever measured inside this ScrollViewProvider \u2014 scroll content stays hidden (opacity: 0) until one does. Render a <ScrollViewHeader> (it can be empty / zero height) inside this provider.");
+      console.warn("[scroll-view] No ScrollViewHeader ever measured inside this ScrollViewProvider: scroll content stays hidden (opacity: 0) until one does. Render a <ScrollViewHeader> (it can be empty / zero height) inside this provider.");
     }, 3e3);
     return () => clearTimeout(timeout);
   }, [headerHeight]);
-  useEffect5(() => {
-    if (Platform5.OS !== "web" || headerHeight !== null) return;
+  useEffect7(() => {
+    if (Platform7.OS !== "web" || headerHeight !== null) return;
     let raf2 = 0;
     const raf1 = requestAnimationFrame(() => {
       raf2 = requestAnimationFrame(() => setHeaderHeight(0));
@@ -1215,46 +1352,54 @@ var ScrollViewProvider = ({ blur, children, fixed = false, footerAboveKeyboard =
       cancelAnimationFrame(raf2);
     };
   }, [headerHeight, setHeaderHeight]);
-  const setFooterHeight = useCallback7(
+  const setFooterHeight = useCallback8(
     (h) => {
-      if (h === 0 && footerHeight) return;
+      if (h === 0 && footerHeightRef.current) return;
+      footerHeightRef.current = h;
       setFooterHeightState(h);
       footerHeightShared.value = h ?? 0;
     },
-    [footerHeight, footerHeightShared]
+    [footerHeightShared]
   );
-  const scrollHeight = useMemo5(() => Dimensions3.get("window").height - (headerHeight ?? 0) - (footerHeight ?? 0), [headerHeight, footerHeight]);
+  const scrollHeight = useMemo6(() => Dimensions3.get("window").height - (headerHeight ?? 0) - (footerHeight ?? 0), [headerHeight, footerHeight]);
   const effectiveHeaderFixed = fixed || (headerFixed ?? settings.headerFixed);
   const effectiveFooterFixed = fixed || (footerFixed ?? settings.footerFixed);
-  const value = useMemo5(() => ({ blur: effectiveBlur, footerAboveKeyboard, footerHeight, footerHeightShared, footerFixed: effectiveFooterFixed, footerOffset, headerHeight, headerHeightShared, headerFixed: effectiveHeaderFixed, headerOffset, jsListGeneration, listGeneration, onJsListUnmount, onListUnmount, progress, pullSearchHeightShared, progressing, scrollHeight, scrollPosition, setFooterHeight, setHeaderHeight, setProgress, setProgressing, snapBackFooterShared, snapBackHeaderShared, tabBarHeight }), [effectiveBlur, footerAboveKeyboard, effectiveFooterFixed, effectiveHeaderFixed, footerHeight, footerHeightShared, footerOffset, headerHeight, headerHeightShared, headerOffset, jsListGeneration, listGeneration, onJsListUnmount, onListUnmount, progress, pullSearchHeightShared, progressing, scrollHeight, scrollPosition, setFooterHeight, setHeaderHeight, snapBackFooterShared, snapBackHeaderShared, tabBarHeight]);
-  return /* @__PURE__ */ jsx10(ScrollViewContext.Provider, { value, children });
+  const effectiveTabBarHeight = chromeHosted ? chromeFootprint : tabBarHeight;
+  const value = useMemo6(
+    () => ({ blur: effectiveBlur, chromeHosted, chromeOverhang, chromeWritable, footerAboveKeyboard, footerHeight, footerHeightShared, footerFixed: effectiveFooterFixed, footerOffset, headerHeight, headerHeightShared, headerFixed: effectiveHeaderFixed, headerOffset, jsListGeneration, listGeneration, onJsListUnmount, onListUnmount, progress, pullSearchHeightShared, progressing, scrollHeight, scrollPosition, setFooterHeight, setHeaderHeight, setProgress, setProgressing, snapBackFooterShared, snapBackHeaderShared, stackHeightShared, tabBarHeight: effectiveTabBarHeight }),
+    [effectiveBlur, chromeHosted, chromeOverhang, chromeWritable, footerAboveKeyboard, effectiveFooterFixed, effectiveHeaderFixed, footerHeight, footerHeightShared, footerOffset, headerHeight, headerHeightShared, headerOffset, jsListGeneration, listGeneration, onJsListUnmount, onListUnmount, progress, pullSearchHeightShared, progressing, scrollHeight, scrollPosition, setFooterHeight, setHeaderHeight, snapBackFooterShared, snapBackHeaderShared, stackHeightShared, effectiveTabBarHeight]
+  );
+  return /* @__PURE__ */ jsx11(ScrollViewContext.Provider, { value, children: /* @__PURE__ */ jsxs7(ScrollViewChromeHostContext.Provider, { value: null, children: [
+    children,
+    chromeHost ? /* @__PURE__ */ jsx11(ChromeRegistrar, { footerFixed: effectiveFooterFixed, host: chromeHost, writable: chromeWritable }) : null
+  ] }) });
 };
 
 // src/ScrollViewSettingsProvider.tsx
 var ScrollViewSettingsProvider = scrollViewSettingsProvider;
 
 // src/SectionList.tsx
-import { memo as memo4, useCallback as useCallback9, useContext as useContext14, useEffect as useEffect6, useLayoutEffect as useLayoutEffect6, useMemo as useMemo6, useRef as useRef10 } from "react";
-import { Dimensions as Dimensions4, Platform as Platform6, SectionList as RNSectionList, View as View7 } from "react-native";
+import { memo as memo4, useCallback as useCallback10, useContext as useContext14, useEffect as useEffect8, useLayoutEffect as useLayoutEffect9, useMemo as useMemo7, useRef as useRef11 } from "react";
+import { Dimensions as Dimensions4, Platform as Platform8, SectionList as RNSectionList, View as View7 } from "react-native";
 import { Gesture as Gesture4, GestureDetector as GestureDetector4 } from "react-native-gesture-handler";
-import Animated7, { runOnUI as runOnUI3, useSharedValue as useSharedValue9 } from "react-native-reanimated";
+import Animated7, { runOnUI as runOnUI3, useSharedValue as useSharedValue10 } from "react-native-reanimated";
 
 // src/internal/useStickyHeaders.ts
-import { useCallback as useCallback8, useContext as useContext13, useLayoutEffect as useLayoutEffect5, useRef as useRef9, useState as useState6 } from "react";
-import { runOnJS as runOnJS4, useAnimatedReaction as useAnimatedReaction2, useAnimatedStyle as useAnimatedStyle6, useSharedValue as useSharedValue8 } from "react-native-reanimated";
+import { useCallback as useCallback9, useContext as useContext13, useLayoutEffect as useLayoutEffect8, useRef as useRef10, useState as useState7 } from "react";
+import { runOnJS as runOnJS4, useAnimatedReaction as useAnimatedReaction2, useAnimatedStyle as useAnimatedStyle6, useSharedValue as useSharedValue9 } from "react-native-reanimated";
 import { useSafeAreaInsets as useSafeAreaInsets5 } from "react-native-safe-area-context";
 function useStickyHeaders(headerFixed, enabled) {
   const { headerHeightShared, headerOffset, pullSearchHeightShared, scrollPosition, snapBackHeaderShared } = useContext13(ScrollViewContext);
   const insetsTop = useSafeAreaInsets5().top;
-  const sectionYPositions = useSharedValue8([]);
-  const sectionHeights = useSharedValue8([]);
-  const [activeIndex, setActiveIndex] = useState6(-1);
-  const contentIndexShared = useSharedValue8(-1);
-  useLayoutEffect5(() => {
+  const sectionYPositions = useSharedValue9([]);
+  const sectionHeights = useSharedValue9([]);
+  const [activeIndex, setActiveIndex] = useState7(-1);
+  const contentIndexShared = useSharedValue9(-1);
+  useLayoutEffect8(() => {
     contentIndexShared.value = activeIndex;
   }, [activeIndex, contentIndexShared]);
-  const positionsCache = useRef9([]);
-  const heightsCache = useRef9([]);
+  const positionsCache = useRef10([]);
+  const heightsCache = useRef10([]);
   useAnimatedReaction2(
     () => {
       if (!enabled) return -1;
@@ -1285,7 +1430,7 @@ function useStickyHeaders(headerFixed, enabled) {
     // Same web-only reanimated gap as useAnimatedStyle elsewhere in this file: this "prepare"
     // function's own SharedValue reads (sectionYPositions, headerHeightShared, scrollPosition,
     // snapBackHeaderShared, headerOffset, pullSearchHeightShared) need to be listed explicitly too
-    // — confirmed empirically that without them, useAnimatedReaction re-evaluates once on mount and
+    // - confirmed empirically that without them, useAnimatedReaction re-evaluates once on mount and
     // then never again on web, permanently freezing activeIndex/the active sticky section.
     [enabled, headerFixed, insetsTop, sectionYPositions, headerHeightShared, scrollPosition, snapBackHeaderShared, headerOffset, pullSearchHeightShared]
   );
@@ -1331,7 +1476,7 @@ function useStickyHeaders(headerFixed, enabled) {
     }
     return { opacity: 1, top: 0, transform: [{ translateY }] };
   }, [enabled, headerFixed, insetsTop, contentIndexShared, sectionYPositions, headerHeightShared, scrollPosition, snapBackHeaderShared, headerOffset, pullSearchHeightShared, sectionHeights]);
-  const measureHeader = useCallback8(
+  const measureHeader = useCallback9(
     (index, pageY, height) => {
       const contentY = pageY + scrollPosition.value;
       positionsCache.current[index] = contentY;
@@ -1341,7 +1486,7 @@ function useStickyHeaders(headerFixed, enabled) {
     },
     [scrollPosition, sectionHeights, sectionYPositions]
   );
-  const resetPositions = useCallback8(
+  const resetPositions = useCallback9(
     (count) => {
       positionsCache.current = Array.from({ length: count }, () => -1);
       sectionYPositions.value = positionsCache.current.slice();
@@ -1354,17 +1499,17 @@ function useStickyHeaders(headerFixed, enabled) {
 }
 
 // src/SectionList.tsx
-import { Fragment as Fragment5, jsx as jsx11, jsxs as jsxs7 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx12, jsxs as jsxs8 } from "react/jsx-runtime";
 var AnimatedSectionList = Animated7.createAnimatedComponent(RNSectionList);
 var SectionListInner = ({ chipProps, chipThreshold, contentContainerStyle: externalContentContainerStyle, initialNumToRender = 20, maxToRenderPerBatch = 50, renderFilters, footerFixed: footerFixedProp, gesture, headerFixed: headerFixedProp, keyboardAware, ListHeaderComponent: externalListHeaderComponent, onChipPress, onMomentumScrollEnd: externalMomentumScrollEnd, onRefresh, onContentSizeChange, onScrollBeginDrag: externalScrollBeginDrag, onScrollEndDrag: externalScrollEndDrag, pullSearchHeight, refreshing, removeClippedSubviews = false, sections, showsVerticalScrollIndicator, style, ref: externalRef, windowSize = 100, ...props }) => {
-  const scrollView = useRef10(null);
+  const scrollView = useRef11(null);
   const { stickySectionHeadersEnabled = true, renderSectionHeader, ...passThroughProps } = props;
   const { chipHidden, chipStyle, containerStyle, contentInset, contentOffset, contentPadding, footerFixed, headerFixed, headerHeight } = useScrollList({ footerFixed: footerFixedProp, headerFixed: headerFixedProp, hideUntilMeasured: true, keyboardAware, pullSearchHeight, style });
   const { listGeneration, onListUnmount } = useContext14(ScrollViewContext);
-  const capturedGeneration = useSharedValue9(-1);
-  useLayoutEffect6(() => {
+  const capturedGeneration = useSharedValue10(-1);
+  useLayoutEffect9(() => {
     const generation = listGeneration.value;
-    if (Platform6.OS === "web") {
+    if (Platform8.OS === "web") {
       capturedGeneration.value = generation;
       return;
     }
@@ -1375,15 +1520,15 @@ var SectionListInner = ({ chipProps, chipThreshold, contentContainerStyle: exter
   }, [capturedGeneration, listGeneration]);
   const usesCustomSticky = stickySectionHeadersEnabled && renderSectionHeader != null;
   const { activeIndex, clipStyle, measureHeader, overlayStyle, resetPositions } = useStickyHeaders(headerFixed, usesCustomSticky);
-  useLayoutEffect6(() => {
+  useLayoutEffect9(() => {
     if (usesCustomSticky) resetPositions(sections.length);
   }, [sections, usesCustomSticky, resetPositions, headerHeight]);
-  const sectionViewRefs = useRef10(/* @__PURE__ */ new Map());
-  const wrappedRenderSectionHeader = useMemo6(() => {
+  const sectionViewRefs = useRef11(/* @__PURE__ */ new Map());
+  const wrappedRenderSectionHeader = useMemo7(() => {
     if (!usesCustomSticky) return renderSectionHeader ?? void 0;
     return (info) => {
       const idx = sections.findIndex((s) => s === info.section);
-      return /* @__PURE__ */ jsx11(
+      return /* @__PURE__ */ jsx12(
         View7,
         {
           ref: (el) => {
@@ -1400,8 +1545,8 @@ var SectionListInner = ({ chipProps, chipThreshold, contentContainerStyle: exter
       );
     };
   }, [usesCustomSticky, renderSectionHeader, sections, measureHeader]);
-  useLayoutEffect6(() => () => onListUnmount(), [onListUnmount]);
-  const scrollTo = useCallback9((offset, animated) => {
+  useLayoutEffect9(() => () => onListUnmount(), [onListUnmount]);
+  const scrollTo = useCallback10((offset, animated) => {
     scrollView.current?.getScrollResponder()?.scrollTo({ y: offset, animated });
   }, []);
   const {
@@ -1419,16 +1564,16 @@ var SectionListInner = ({ chipProps, chipThreshold, contentContainerStyle: exter
     pullSearchHeight,
     scrollTo
   });
-  const activeListHeader = useMemo6(() => {
+  const activeListHeader = useMemo7(() => {
     if (!renderFilters) return pullSearchHeader;
     const Inner = pullSearchHeader;
-    return () => /* @__PURE__ */ jsxs7(Fragment5, { children: [
-      Inner ? typeof Inner === "function" ? /* @__PURE__ */ jsx11(Inner, {}) : Inner : null,
+    return () => /* @__PURE__ */ jsxs8(Fragment5, { children: [
+      Inner ? typeof Inner === "function" ? /* @__PURE__ */ jsx12(Inner, {}) : Inner : null,
       renderFilters
     ] });
   }, [pullSearchHeader, renderFilters]);
-  const pullSearchSettled = useRef10(false);
-  useEffect6(() => {
+  const pullSearchSettled = useRef11(false);
+  useEffect8(() => {
     if (!usesCustomSticky || activeListHeader == null || pullSearchSettled.current) return;
     pullSearchSettled.current = true;
     const handle = requestAnimationFrame(() => {
@@ -1440,24 +1585,24 @@ var SectionListInner = ({ chipProps, chipThreshold, contentContainerStyle: exter
     });
     return () => cancelAnimationFrame(handle);
   }, [activeListHeader, usesCustomSticky, measureHeader]);
-  const contentContainerStyle = useMemo6(() => [{ minHeight: Dimensions4.get("window").height - contentInset.top - contentInset.bottom + pullSearchMinHeight }, externalContentContainerStyle, contentPadding], [contentInset.bottom, contentInset.top, contentPadding, externalContentContainerStyle, pullSearchMinHeight]);
+  const contentContainerStyle = useMemo7(() => [{ minHeight: Dimensions4.get("window").height - contentInset.top - contentInset.bottom + pullSearchMinHeight }, externalContentContainerStyle, contentPadding], [contentInset.bottom, contentInset.top, contentPadding, externalContentContainerStyle, pullSearchMinHeight]);
   const handleScroll = useScrollHandler({ capturedGeneration, chipHidden, chipThreshold, footerFixed, headerFixed, listGeneration });
-  const handleScrollToTop = useCallback9(() => {
+  const handleScrollToTop = useCallback10(() => {
     const offset = pullSearchHeight ? -contentInset.top + pullSearchHeight : -contentInset.top;
     scrollView.current?.getScrollResponder()?.scrollTo({ y: offset, animated: true });
   }, [contentInset.top, pullSearchHeight]);
-  const handleContentSizeChange = useCallback9(
+  const handleContentSizeChange = useCallback10(
     (w, h) => {
       if (onContentSizeChange) onContentSizeChange(w, h);
     },
     [onContentSizeChange]
   );
-  const refreshControl = useMemo6(() => onRefresh ? /* @__PURE__ */ jsx11(RefreshControl, { onRefresh, refreshing: refreshing ?? false }) : /* @__PURE__ */ jsx11(RefreshControl, {}), [onRefresh, refreshing]);
-  const nativeGesture = useMemo6(() => Gesture4.Native(), []);
-  const combinedGesture = useMemo6(() => gesture !== void 0 ? Gesture4.Simultaneous(gesture, nativeGesture) : nativeGesture, [gesture, nativeGesture]);
+  const refreshControl = useMemo7(() => onRefresh ? /* @__PURE__ */ jsx12(RefreshControl, { onRefresh, refreshing: refreshing ?? false }) : /* @__PURE__ */ jsx12(RefreshControl, {}), [onRefresh, refreshing]);
+  const nativeGesture = useMemo7(() => Gesture4.Native(), []);
+  const combinedGesture = useMemo7(() => gesture !== void 0 ? Gesture4.Simultaneous(gesture, nativeGesture) : nativeGesture, [gesture, nativeGesture]);
   const detectorGesture = gesture !== void 0 ? combinedGesture : void 0;
-  const content = /* @__PURE__ */ jsxs7(View7, { style: containerStyle, children: [
-    /* @__PURE__ */ jsx11(
+  const content = /* @__PURE__ */ jsxs8(View7, { style: containerStyle, children: [
+    /* @__PURE__ */ jsx12(
       AnimatedSectionList,
       {
         ...passThroughProps,
@@ -1487,11 +1632,11 @@ var SectionListInner = ({ chipProps, chipThreshold, contentContainerStyle: exter
       },
       headerHeight !== null && headerHeight > 0 ? 1 : 0
     ),
-    hiddenHeader && /* @__PURE__ */ jsx11(View7, { pointerEvents: "none", style: styles8.measureContainer, children: hiddenHeader }),
-    /* @__PURE__ */ jsx11(ScrollViewChip, { chipProps, onChipPress, onPress: handleScrollToTop, style: chipStyle }),
-    usesCustomSticky && /* @__PURE__ */ jsx11(Animated7.View, { pointerEvents: "none", style: [styles8.stickyClip, clipStyle], children: activeIndex >= 0 && activeIndex < sections.length && /* @__PURE__ */ jsx11(Animated7.View, { style: [styles8.stickyOverlay, overlayStyle], children: renderSectionHeader({ section: sections[activeIndex] }) }) })
+    hiddenHeader && /* @__PURE__ */ jsx12(View7, { pointerEvents: "none", style: styles8.measureContainer, children: hiddenHeader }),
+    /* @__PURE__ */ jsx12(ScrollViewChip, { chipProps, onChipPress, onPress: handleScrollToTop, style: chipStyle }),
+    usesCustomSticky && /* @__PURE__ */ jsx12(Animated7.View, { pointerEvents: "none", style: [styles8.stickyClip, clipStyle], children: activeIndex >= 0 && activeIndex < sections.length && /* @__PURE__ */ jsx12(Animated7.View, { style: [styles8.stickyOverlay, overlayStyle], children: renderSectionHeader({ section: sections[activeIndex] }) }) })
   ] });
-  return detectorGesture ? /* @__PURE__ */ jsx11(GestureDetector4, { gesture: detectorGesture, children: content }) : content;
+  return detectorGesture ? /* @__PURE__ */ jsx12(GestureDetector4, { gesture: detectorGesture, children: content }) : content;
 };
 var styles8 = {
   measureContainer: { left: 0, opacity: 0, position: "absolute", right: 0, top: -9999 },
@@ -1507,6 +1652,32 @@ var useScrollView = () => {
   return { progress, progressing, scrollHeight, scrollPosition, setProgress, setProgressing };
 };
 
+// src/useScrollViewChrome.ts
+import { useContext as useContext16, useEffect as useEffect9 } from "react";
+import { useAnimatedStyle as useAnimatedStyle7, useSharedValue as useSharedValue11 } from "react-native-reanimated";
+var noop = () => {
+};
+var useScrollViewChromeStyle = () => {
+  const chrome = useContext16(ScrollViewChromeContext);
+  const fallback = useSharedValue11(0);
+  const offset = chrome?.offset ?? fallback;
+  return useAnimatedStyle7(() => ({ transform: [{ translateY: offset.value }] }), [offset]);
+};
+var useScrollViewChromePin = (active) => {
+  const chrome = useContext16(ScrollViewChromeContext);
+  const addPin = chrome?.addPin;
+  const removePin = chrome?.removePin;
+  useEffect9(() => {
+    if (!active || !addPin || !removePin) return void 0;
+    addPin();
+    return removePin;
+  }, [active, addPin, removePin]);
+};
+var useScrollViewChromeReveal = () => {
+  const chrome = useContext16(ScrollViewChromeContext);
+  return chrome?.reveal ?? noop;
+};
+
 // src/useScrollViewSettings.ts
 var useScrollViewSettings = scrollViewUseSettings;
 export {
@@ -1514,6 +1685,7 @@ export {
   FlatList,
   PullSearch,
   ScrollView,
+  ScrollViewChromeProvider,
   ScrollViewContext,
   ScrollViewFooter,
   ScrollViewHeader,
@@ -1526,5 +1698,8 @@ export {
   scrollViewReducer,
   useKeyboardInset,
   useScrollView,
+  useScrollViewChromePin,
+  useScrollViewChromeReveal,
+  useScrollViewChromeStyle,
   useScrollViewSettings
 };