@oxyhq/bloom 0.46.0 → 0.49.0

package/lib/commonjs/dialog/DialogBottomSheet.js

@@ -10,6 +10,8 @@ var _bottomSheet = require("../bottom-sheet");
 var _useTheme = require("../theme/use-theme.js");
 var _context = require("./context.js");
 var _DialogContent = require("./DialogContent.js");
+var _DialogHeader = require("./DialogHeader.js");
+var _DialogMorph = require("./DialogMorph.js");
 var _placement = require("./placement.js");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
@@ -36,15 +38,19 @@ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r
 function DialogBottomSheet({
   control,
   open: controlledOpen,
+  startOpen,
   onClose,
   testID,
   title,
   description,
   actions,
+  header,
   maxHeightRatio = _placement.DEFAULT_MAX_HEIGHT_RATIO,
   showHandle = true,
   dismissOnBackdrop = true,
   contentPadding = _placement.DEFAULT_DIALOG_CONTENT_PADDING,
+  scrollable,
+  morph,
   style,
   panelStyle,
   panelClassName,
@@ -55,10 +61,14 @@ function DialogBottomSheet({
 }) {
   const isControlled = controlledOpen !== undefined;
   const theme = (0, _useTheme.useTheme)();
+  const {
+    height: viewportHeight
+  } = (0, _reactNative.useWindowDimensions)();
   const ref = (0, _react.useRef)(null);
   const closeCallbacks = (0, _react.useRef)([]);
   const titleId = (0, _react.useId)();
   const descriptionId = (0, _react.useId)();
+  const headerController = (0, _DialogHeader.useDialogHeaderController)();
 
   // Read the latest controlled flag / `onClose` inside stable callbacks without
   // re-binding them (the context + imperative handle depend on `close` staying
@@ -136,6 +146,18 @@ function DialogBottomSheet({
   // from `onDismissAttempt` blocks the BottomSheet's own backdrop/pan dismissal,
   // which is how `dismissOnBackdrop: false` maps onto the single sheet API.
   const onDismissAttempt = (0, _react.useCallback)(() => dismissOnBackdrop, [dismissOnBackdrop]);
+  const scrollableResolved = scrollable ?? true;
+
+  // Size morphing across an in-place content swap. The sheet is anchored at the
+  // bottom, so animating its height makes it grow/shrink from that edge; its
+  // width is fixed by the placement. The sheet's own `maxHeight` (the ratio
+  // percentage + the safe-area clamp inside `BottomSheet`) does the exact
+  // capping — the viewport is just the bound the reshape may not exceed.
+  const morphState = (0, _DialogMorph.useDialogMorph)({
+    enabled: morph !== false,
+    measurable: scrollableResolved,
+    maxHeight: viewportHeight
+  });
 
   // `panelStyle` paints the sheet surface (e.g. a brand background). It composes
   // AFTER the BottomSheet's internal background so a host palette wins; the
@@ -147,46 +169,105 @@ function DialogBottomSheet({
       borderTopLeftRadius: _placement.PANEL_RADIUS + 4,
       borderTopRightRadius: _placement.PANEL_RADIUS + 4,
       maxHeight: maxHeightPercent
-    }, panelStyle];
-  }, [theme.colors.background, maxHeightRatio, panelStyle]);
+    }, panelStyle,
+    // Drives the card's `height` only while a morph is in flight; at rest it
+    // resolves to `height: 'auto'` — the sheet's normal content sizing.
+    morphState.panelStyle];
+  }, [theme.colors.background, maxHeightRatio, panelStyle, morphState.panelStyle]);
 
   // Does this dialog render bloom's declarative chrome (title / description /
-  // actions), or is it pure custom `children`? Pure custom children own their
-  // own layout and scrolling, so we render them through a NON-scrollable
-  // BottomSheet body — otherwise the sheet's internal ScrollView would wrap a
-  // child that already contains its own scroller, producing a scroll-in-scroll
-  // (double scroll container). Declarative dialogs are short and keep the
-  // sheet's default scrollable body so they degrade gracefully on small
-  // viewports. This only changes what `DialogBottomSheet` passes to
-  // `BottomSheet`; the standalone `BottomSheet` API and its `scrollable` default
-  // are unchanged for direct consumers.
+  // actions)? This no longer gates the SCROLL decision (that is now the explicit
+  // `scrollable` prop below) — it only opts declarative dialogs into the
+  // gorhom-style pan coordination for their internal ScrollView. A declarative
+  // dialog overflowing on a small viewport needs the coordinated pan so the body
+  // scrolls instead of the drag stealing every vertical gesture; pure-custom
+  // children keep the legacy always-active pan.
   const hasDeclarativeChrome = title !== undefined || description !== undefined || actions !== undefined && actions.length > 0;
+  const dialogBody = /*#__PURE__*/(0, _jsxRuntime.jsx)(_DialogContent.DialogBody, {
+    titleId: titleId,
+    descriptionId: descriptionId,
+    title: title,
+    description: description,
+    actions: actions,
+    children: children
+  });
+
+  // Nav-header mode: the Dialog OWNS a sticky gradient nav bar + a large
+  // collapsing title over the sheet's OWN scroll content. The bar floats via the
+  // BottomSheet `headerOverlay` slot; the sheet's scroll offset feeds the shared
+  // controller (`scrollY`) that drives the small-title cross-fade. `contentPadding`
+  // is dropped (the large title + screens own their padding).
+  const headerBody = header ? scrollableResolved ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_DialogHeader.DialogLargeTitle, {
+      controller: headerController,
+      header: header
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_DialogHeader.DialogHeaderProvider, {
+      controller: headerController,
+      children: dialogBody
+    })]
+  }) : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: {
+        height: _DialogHeader.DIALOG_NAV_BAR_HEIGHT
+      }
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_DialogHeader.DialogHeaderProvider, {
+      controller: headerController,
+      children: dialogBody
+    })]
+  }) : null;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_bottomSheet.BottomSheet, {
-    ref: ref,
+    ref: ref
+    // Seed the sheet's open state so a fresh mount that should be open renders
+    // visible on its FIRST commit instead of relying on a present()-in-effect
+    // that races the mount and flashes blank. In controlled mode that seed is
+    // `controlledOpen`; in imperative mode it is the surface's `startOpen`
+    // intent — which is what lets a responsive Dialog survive a resize
+    // placement swap (centered card → bottom sheet) STILL OPEN.
+    ,
+    open: isControlled ? controlledOpen : startOpen,
     onDismiss: handleDismiss,
     onDismissAttempt: onDismissAttempt,
-    enablePanDownToClose: true,
-    showHandle: showHandle
-    // Pure custom children own scrolling → opt OUT of BottomSheet's internal
-    // ScrollView so there is exactly ONE scroll container (no scroll-in-scroll).
+    enablePanDownToClose: true
+    // Nav-header mode hides the drag handle (the nav bar sits at the very top);
+    // drag-to-dismiss still works via the coordinated body pan.
+    ,
+    showHandle: header ? false : showHandle
+    // Content scrolls inside the sheet's internal ScrollView by default; the
+    // Dialog owns the scroll boundary. A surface whose content owns its own
+    // scroller (a FlatList / VirtualizedList) passes `scrollable={false}` to
+    // opt OUT so there is exactly ONE scroll container (no scroll-in-scroll,
+    // no "VirtualizedList inside a plain ScrollView" warning).
     ,
-    scrollable: hasDeclarativeChrome
-    // Declarative dialogs (title/description/actions) that overflow render a
-    // tall body inside BottomSheet's internal ScrollView. Opt those sheets into
+    scrollable: scrollableResolved
+    // Declarative dialogs (title/description/actions) that overflow — AND every
+    // nav-header page (its scroll content overflows by design) — need
     // gorhom-style pan coordination: the drag-to-dismiss pan only activates
     // when the ScrollView is at the top AND the finger moves down >8dp —
     // otherwise the ScrollView owns the touch. Without this the always-active
     // legacy body-pan steals vertical drags and a tall body cannot scroll
     // (dragging up dismisses the sheet / bleeds into the parent instead). The
     // standalone `BottomSheet` API keeps its legacy `manualActivation={false}`
-    // default, so direct consumers are unaffected. Gated on the same flag as
-    // `scrollable` because only the internal-ScrollView path needs it.
+    // default, so direct consumers are unaffected.
+    ,
+    manualActivation: header ? scrollableResolved : hasDeclarativeChrome
+    // Feed the sheet's scroll offset into the nav header's collapse controller.
     ,
-    manualActivation: hasDeclarativeChrome
+    scrollY: header ? headerController.scrollY : undefined
+    // Float the sticky nav bar over the scroll body (clipped to the sheet top).
+    ,
+    headerOverlay: header ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_DialogHeader.DialogNavHeader, {
+      controller: headerController,
+      header: header,
+      onDismiss: close,
+      collapse: scrollableResolved
+    }) : undefined
     // Stronger dim than a lone sheet so an underlying sheet's handle/content
     // doesn't bleed through when a Dialog is stacked over one.
     ,
-    backdropOpacity: _placement.SHEET_BACKDROP_OPACITY + 0.3,
+    backdropOpacity: _placement.SHEET_BACKDROP_OPACITY + 0.3
+    // Measures the sheet card — the size a morph starts from.
+    ,
+    onLayout: morphState.onPanelLayout,
     style: sheetStyle,
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_context.Context.Provider, {
       value: context,
@@ -201,19 +282,18 @@ function DialogBottomSheet({
         ...(panelClassName ? {
           className: panelClassName
         } : {}),
-        style: [{
+        style: [
+        // Nav-header mode: the large title + screens own their padding, so the
+        // wrapper adds none. Otherwise the Dialog's uniform content padding.
+        header ? null : {
           padding: contentPadding
         },
         // `containerStyle` carries the host's CSS-var theme scope; it wraps
         // the content subtree so descendants read the scoped palette.
         containerStyle, style, panelStyle],
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_DialogContent.DialogBody, {
-          titleId: titleId,
-          descriptionId: descriptionId,
-          title: title,
-          description: description,
-          actions: actions,
-          children: children
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_DialogMorph.DialogMorphContent, {
+          morph: morphState,
+          children: header ? headerBody : dialogBody
         })
       })
     })

package/lib/commonjs/dialog/DialogBottomSheet.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireWildcard","require","_reactNative","_bottomSheet","_useTheme","_context","_DialogContent","_placement","_jsxRuntime","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","DialogBottomSheet","control","open","controlledOpen","onClose","testID","title","description","actions","maxHeightRatio","DEFAULT_MAX_HEIGHT_RATIO","showHandle","dismissOnBackdrop","contentPadding","DEFAULT_DIALOG_CONTENT_PADDING","style","panelStyle","panelClassName","containerStyle","containerClassName","label","children","isControlled","undefined","theme","useTheme","ref","useRef","closeCallbacks","titleId","useId","descriptionId","isControlledRef","current","onCloseRef","callQueuedCallbacks","useCallback","queued","cb","console","error","present","close","push","dismiss","handleDismiss","useEffect","useImperativeHandle","context","useMemo","isWithinDialog","onDismissAttempt","sheetStyle","maxHeightPercent","Math","round","backgroundColor","colors","background","borderTopLeftRadius","PANEL_RADIUS","borderTopRightRadius","maxHeight","hasDeclarativeChrome","length","jsx","BottomSheet","onDismiss","enablePanDownToClose","scrollable","manualActivation","backdropOpacity","SHEET_BACKDROP_OPACITY","Context","Provider","value","View","accessibilityLabel","className","padding","DialogBody"],"sourceRoot":"../../../src","sources":["dialog/DialogBottomSheet.tsx"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["_react","_interopRequireWildcard","require","_reactNative","_bottomSheet","_useTheme","_context","_DialogContent","_DialogHeader","_DialogMorph","_placement","_jsxRuntime","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","DialogBottomSheet","control","open","controlledOpen","startOpen","onClose","testID","title","description","actions","header","maxHeightRatio","DEFAULT_MAX_HEIGHT_RATIO","showHandle","dismissOnBackdrop","contentPadding","DEFAULT_DIALOG_CONTENT_PADDING","scrollable","morph","style","panelStyle","panelClassName","containerStyle","containerClassName","label","children","isControlled","undefined","theme","useTheme","height","viewportHeight","useWindowDimensions","ref","useRef","closeCallbacks","titleId","useId","descriptionId","headerController","useDialogHeaderController","isControlledRef","current","onCloseRef","callQueuedCallbacks","useCallback","queued","cb","console","error","present","close","push","dismiss","handleDismiss","useEffect","useImperativeHandle","context","useMemo","isWithinDialog","onDismissAttempt","scrollableResolved","morphState","useDialogMorph","enabled","measurable","maxHeight","sheetStyle","maxHeightPercent","Math","round","backgroundColor","colors","background","borderTopLeftRadius","PANEL_RADIUS","borderTopRightRadius","hasDeclarativeChrome","length","dialogBody","jsx","DialogBody","headerBody","jsxs","Fragment","DialogLargeTitle","controller","DialogHeaderProvider","View","DIALOG_NAV_BAR_HEIGHT","BottomSheet","onDismiss","enablePanDownToClose","manualActivation","scrollY","headerOverlay","DialogNavHeader","collapse","backdropOpacity","SHEET_BACKDROP_OPACITY","onLayout","onPanelLayout","Context","Provider","value","accessibilityLabel","className","padding","DialogMorphContent"],"sourceRoot":"../../../src","sources":["dialog/DialogBottomSheet.tsx"],"mappings":"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","ignoreList":[]}

package/lib/commonjs/dialog/DialogHeader.js

@@ -0,0 +1,371 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DIALOG_NAV_BAR_HEIGHT = exports.DIALOG_HEADER_OVERLAY_HEIGHT = exports.DIALOG_HEADER_CONTENT_TOP = void 0;
+exports.DialogHeaderProvider = DialogHeaderProvider;
+exports.DialogNavHeader = exports.DialogLargeTitle = void 0;
+exports.useDialogHeader = useDialogHeader;
+exports.useDialogHeaderController = useDialogHeaderController;
+var _react = _interopRequireWildcard(require("react"));
+var _reactNative = require("react-native");
+var _reactNativeReanimated = _interopRequireWildcard(require("react-native-reanimated"));
+var _index = require("../icons/index.js");
+var _frostedIconButton = require("../frosted-icon-button");
+var _useTheme = require("../theme/use-theme.js");
+var _index2 = require("../typography/index.js");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+// ---------------------------------------------------------------------------
+//  Dialog-owned navigation header (iOS large-title collapse).
+//
+//  This is a DISTINCT surface mode from the declarative
+//  `title`/`description`/`actions` centered-heading path: it turns the Dialog
+//  into a scrolling page with a sticky, gradient top bar (left + right slots)
+//  and a large collapsing title that lives in the Dialog's OWN scroll content.
+//  As the large title scrolls under the bar, a small title cross-fades into the
+//  bar center.
+//
+//  Screens render NO header of their own — they declare their title/subtitle
+//  (via the surface registry) or contribute runtime slots (a Save action, a
+//  dynamic title) through {@link useDialogHeader}.
+// ---------------------------------------------------------------------------
+
+/** Interactive nav-bar row height (px). Buttons + collapsed title live here. */
+const DIALOG_NAV_BAR_HEIGHT = exports.DIALOG_NAV_BAR_HEIGHT = 52;
+
+/** Extra gradient tail (px) below the bar, over which scrolled content fades. */
+const GRADIENT_FADE = 20;
+
+/** Total gradient overlay height (bar + fade tail). */
+const DIALOG_HEADER_OVERLAY_HEIGHT = exports.DIALOG_HEADER_OVERLAY_HEIGHT = DIALOG_NAV_BAR_HEIGHT + GRADIENT_FADE;
+
+/**
+ * Top inset applied to the Dialog's scroll content so the large title starts
+ * BELOW the whole gradient overlay (fully clear at rest, then scrolls under it).
+ */
+const DIALOG_HEADER_CONTENT_TOP = exports.DIALOG_HEADER_CONTENT_TOP = DIALOG_HEADER_OVERLAY_HEIGHT;
+
+/** Horizontal gutter — matches the `screen-margin` (20px) SDK screens use. */
+const HEADER_H_PADDING = 20;
+
+/** Circular icon-button diameter for the default back / close affordances. */
+const NAV_BUTTON_SIZE = 36;
+
+// --- Runtime override store (child screen → nav bar / large title) ----------
+//
+// The nav bar overlay and the in-content large title live in DIFFERENT subtrees
+// (the bar is a sibling ABOVE the scroller; the large title + the screen are
+// inside it), so a plain React ancestor context cannot bridge a screen's runtime
+// contribution up to the bar. We use a tiny external store instead: the screen
+// writes its override through {@link useDialogHeader}; the bar and large title
+// read it via `useSyncExternalStore`. Only those two re-render — never the
+// screen subtree — and there is no shared-ancestor constraint.
+
+function configsEqual(a, b) {
+  if (a === b) return true;
+  if (!a || !b) return false;
+  return a.title === b.title && a.titleContent === b.titleContent && a.subtitle === b.subtitle && a.largeTitle === b.largeTitle && a.left === b.left && a.right === b.right && a.onBack === b.onBack && a.showClose === b.showClose;
+}
+function createHeaderStore() {
+  let override = null;
+  const listeners = new Set();
+  return {
+    getSnapshot: () => override,
+    setOverride: next => {
+      if (configsEqual(override, next)) return;
+      override = next;
+      for (const l of listeners) l();
+    },
+    subscribe: listener => {
+      listeners.add(listener);
+      return () => listeners.delete(listener);
+    }
+  };
+}
+
+/**
+ * The per-surface header controller — the scroll offset + measured large-title
+ * height shared values plus the runtime-override store. Created once per Dialog
+ * (via {@link useDialogHeaderController}) and threaded into the scroller (writes
+ * `scrollY`), the nav bar, the large title, and the child provider.
+ */
+
+/** Create the header controller for one Dialog. Stable for the Dialog's life. */
+function useDialogHeaderController() {
+  const scrollY = (0, _reactNativeReanimated.useSharedValue)(0);
+  const largeTitleHeight = (0, _reactNativeReanimated.useSharedValue)(0);
+  const store = (0, _react.useMemo)(() => createHeaderStore(), []);
+  return (0, _react.useMemo)(() => ({
+    scrollY,
+    largeTitleHeight,
+    store
+  }), [scrollY, largeTitleHeight, store]);
+}
+const DialogHeaderContext = /*#__PURE__*/(0, _react.createContext)(null);
+
+/**
+ * Wraps the Dialog's scroll content so a mounted screen can contribute header
+ * slots via {@link useDialogHeader}. Only the child subtree needs this — the nav
+ * bar and large title read the same controller directly.
+ */
+function DialogHeaderProvider({
+  controller,
+  children
+}) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(DialogHeaderContext.Provider, {
+    value: controller,
+    children: children
+  });
+}
+
+/**
+ * Contribute header content from within a Dialog surface — a dynamic title, a
+ * Save action, custom slots. Merges over the surface's static (registry) header
+ * config; unmounting clears the contribution. Slot nodes (`left`/`right`) MUST
+ * be referentially stable (memoize them) so the effect does not thrash.
+ *
+ * No-op outside a header-mode Dialog (e.g. a confirm dialog), so a screen can
+ * call it unconditionally.
+ */
+function useDialogHeader(config) {
+  const controller = (0, _react.useContext)(DialogHeaderContext);
+  const store = controller?.store;
+  // Set synchronously in the commit's layout phase so the bar/title fill in
+  // BEFORE the browser paints — no first-frame flash of an empty bar.
+  (0, _react.useLayoutEffect)(() => {
+    if (!store) return;
+    store.setOverride(config ?? null);
+    return () => store.setOverride(null);
+    // Slot nodes are compared by identity; callers memoize them.
+  }, [store, config?.title, config?.titleContent, config?.subtitle, config?.largeTitle, config?.left, config?.right, config?.onBack, config?.showClose]);
+}
+
+/** Read the merged (base + runtime-override) header config, reactively. */
+function useMergedHeaderConfig(base, store) {
+  const override = (0, _react.useSyncExternalStore)(store.subscribe, store.getSnapshot, store.getSnapshot);
+  return (0, _react.useMemo)(() => override ? {
+    ...base,
+    ...override
+  } : base, [base, override]);
+}
+
+// --- Nav bar overlay --------------------------------------------------------
+
+/**
+ * The sticky nav bar: gradient background + left / center (collapsing title) /
+ * right slots. Absolutely positioned at the top of the Dialog surface, painted
+ * ABOVE the scroll content. Reads the scroll offset to cross-fade the small
+ * title in as the large title scrolls under it.
+ *
+ * `onDismiss` is the Dialog's own close (the default right-slot close button
+ * calls it) — passed explicitly rather than read from the dialog context because
+ * the bar is rendered as a sibling of the scroller, outside that context on the
+ * bottom-sheet path.
+ */
+const DialogNavHeader = exports.DialogNavHeader = /*#__PURE__*/(0, _react.memo)(function DialogNavHeader({
+  controller,
+  header,
+  onDismiss,
+  collapse = true,
+  style
+}) {
+  const theme = (0, _useTheme.useTheme)();
+  const config = useMergedHeaderConfig(header, controller.store);
+  const {
+    scrollY,
+    largeTitleHeight
+  } = controller;
+
+  // A branded `titleContent` owns the bar centre outright: it is always visible,
+  // so there is nothing to collapse and no large in-content title to collapse under.
+  const hasLargeTitle = collapse && !config.titleContent && (config.largeTitle ?? true) && !!config.title;
+  const titleStyle = (0, _reactNativeReanimated.useAnimatedStyle)(() => {
+    // When there is no large title to collapse under, the bar title is always
+    // shown (a plain, non-collapsing nav bar). Otherwise it cross-fades in as the
+    // large title scrolls up under the bar.
+    if (!hasLargeTitle) return {
+      opacity: 1,
+      transform: [{
+        translateY: 0
+      }]
+    };
+    const threshold = largeTitleHeight.value > 0 ? largeTitleHeight.value : 44;
+    const start = threshold * 0.35;
+    const end = threshold * 0.9;
+    return {
+      opacity: (0, _reactNativeReanimated.interpolate)(scrollY.value, [start, end], [0, 1], _reactNativeReanimated.Extrapolation.CLAMP),
+      transform: [{
+        translateY: (0, _reactNativeReanimated.interpolate)(scrollY.value, [start, end], [10, 0], _reactNativeReanimated.Extrapolation.CLAMP)
+      }]
+    };
+    // Reanimated on RN-Web has no worklets plugin: every shared value the mapper
+    // reads MUST be in the deps array or it freezes on the first frame.
+  }, [scrollY, largeTitleHeight, hasLargeTitle]);
+  const left = config.left ?? (config.onBack ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_frostedIconButton.FrostedIconButton, {
+    onPress: config.onBack,
+    accessibilityLabel: "Go back",
+    icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.ChevronLeft_Stroke2_Corner0_Rounded, {
+      size: "md"
+    })
+  }) : null);
+  const right = config.right ?? (config.showClose !== false ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_frostedIconButton.FrostedIconButton, {
+    onPress: onDismiss,
+    accessibilityLabel: "Close",
+    icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.TimesLarge_Stroke2_Corner0_Rounded, {
+      size: "md"
+    })
+  }) : null);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    pointerEvents: "box-none",
+    style: [styles.overlay, style],
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      pointerEvents: "none",
+      className: "bg-gradient-to-b from-bg to-transparent",
+      style: [_reactNative.StyleSheet.absoluteFill, {
+        height: DIALOG_HEADER_OVERLAY_HEIGHT
+      }]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      pointerEvents: "box-none",
+      style: styles.navRow,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        style: styles.side,
+        children: left
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNativeReanimated.default.View, {
+        pointerEvents: "none",
+        testID: "dialog-nav-title",
+        style: [styles.centerTitle, titleStyle],
+        children: [config.titleContent ?? null, !config.titleContent && config.title ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_index2.Text, {
+          numberOfLines: 1,
+          style: [styles.smallTitle, {
+            color: theme.colors.text
+          }],
+          children: config.title
+        }) : null, !hasLargeTitle && !config.titleContent && config.subtitle ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_index2.Text, {
+          numberOfLines: 1,
+          style: [styles.smallSubtitle, {
+            color: theme.colors.textSecondary
+          }],
+          children: config.subtitle
+        }) : null]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        style: [styles.side, styles.sideRight],
+        children: right
+      })]
+    })]
+  });
+});
+
+// --- In-content large title -------------------------------------------------
+
+/**
+ * The large collapsing title, rendered at the TOP of the Dialog's scroll content
+ * (before the screen body). Owns the content top inset (so the title starts
+ * below the gradient overlay) and measures its own text height into the
+ * controller so the nav bar knows when to cross-fade the small title in.
+ */
+const DialogLargeTitle = exports.DialogLargeTitle = /*#__PURE__*/(0, _react.memo)(function DialogLargeTitle({
+  controller,
+  header
+}) {
+  const theme = (0, _useTheme.useTheme)();
+  const config = useMergedHeaderConfig(header, controller.store);
+  const {
+    largeTitleHeight
+  } = controller;
+
+  // A branded `titleContent` lives in the bar and never collapses, so the
+  // surface starts flush under the bar with no large title above it.
+  const hasLargeTitle = !config.titleContent && (config.largeTitle ?? true) && !!config.title;
+  const onLayout = e => {
+    largeTitleHeight.value = e.nativeEvent.layout.height;
+  };
+  if (!hasLargeTitle) {
+    // No large title: just inset the content below the nav bar.
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: {
+        height: DIALOG_NAV_BAR_HEIGHT
+      }
+    });
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: {
+        height: DIALOG_HEADER_CONTENT_TOP
+      }
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      onLayout: onLayout,
+      testID: "dialog-large-title",
+      style: styles.largeTitleBlock,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_index2.H1, {
+        style: [styles.largeTitle, {
+          color: theme.colors.text
+        }],
+        children: config.title
+      }), config.subtitle ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_index2.Text, {
+        style: [styles.largeSubtitle, {
+          color: theme.colors.textSecondary
+        }],
+        children: config.subtitle
+      }) : null]
+    })]
+  });
+});
+const styles = _reactNative.StyleSheet.create({
+  overlay: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    height: DIALOG_HEADER_OVERLAY_HEIGHT,
+    zIndex: 10
+  },
+  navRow: {
+    height: DIALOG_NAV_BAR_HEIGHT,
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingHorizontal: HEADER_H_PADDING - 4
+  },
+  side: {
+    minWidth: NAV_BUTTON_SIZE,
+    flexDirection: 'row',
+    alignItems: 'center'
+  },
+  sideRight: {
+    justifyContent: 'flex-end'
+  },
+  centerTitle: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+    paddingHorizontal: 8
+  },
+  smallTitle: {
+    fontSize: 16,
+    fontWeight: '600',
+    letterSpacing: -0.2,
+    lineHeight: 20
+  },
+  smallSubtitle: {
+    fontSize: 12,
+    fontWeight: '400',
+    lineHeight: 14
+  },
+  largeTitleBlock: {
+    paddingHorizontal: HEADER_H_PADDING,
+    paddingBottom: 4
+  },
+  largeTitle: {
+    fontSize: 32,
+    lineHeight: 38,
+    letterSpacing: -0.5,
+    fontWeight: '700'
+  },
+  largeSubtitle: {
+    fontSize: 16,
+    lineHeight: 22,
+    marginTop: 4
+  }
+});
+//# sourceMappingURL=DialogHeader.js.map