@oxyhq/bloom 0.48.0 → 0.49.0

package/lib/typescript/module/surfaces/SurfaceHost.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SurfaceHost.d.ts","sourceRoot":"","sources":["../../../../src/surfaces/SurfaceHost.tsx"],"names":[],"mappings":"AAAA,OAAO,KAKN,MAAM,OAAO,CAAC;AAIf,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAYnD,KAAK,eAAe,GAAG,KAAK,CAAC,aAAa,CAAC,WAAW,CAAC,CAAC;AA+BxD;;;;;;;GAOG;AACH,wBAAgB,iBAAiB,CAAC,MAAM,EAAE,eAAe;;;;;;uBAqGhB;YAAE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;SAAE;;;EAcrE"}
+{"version":3,"file":"SurfaceHost.d.ts","sourceRoot":"","sources":["../../../../src/surfaces/SurfaceHost.tsx"],"names":[],"mappings":"AAAA,OAAO,KAKN,MAAM,OAAO,CAAC;AAIf,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAYnD,KAAK,eAAe,GAAG,KAAK,CAAC,aAAa,CAAC,WAAW,CAAC,CAAC;AAgCxD;;;;;;;GAOG;AACH,wBAAgB,iBAAiB,CAAC,MAAM,EAAE,eAAe;;;;;;uBAqGhB;YAAE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;SAAE;;;EAcrE"}

package/lib/typescript/module/surfaces/types.d.ts

@@ -53,6 +53,15 @@ export interface SurfacePresentation {
      * to `Dialog`.
      */
     scrollable?: boolean;
+    /**
+     * Whether the surface MORPHS its panel when its content is swapped in place —
+     * navigation WITHIN this surface, as opposed to presenting a new surface on
+     * top. Defaults to `true`. The content signals the swap through
+     * `useDialogFrame`; a surface whose content never declares a frame is
+     * unaffected. Set `false` for content that must never be resized into (a
+     * full-bleed picker). Forwarded to `Dialog`.
+     */
+    morph?: boolean;
     /** Style overrides applied to the inner content container. */
     style?: StyleProp<ViewStyle>;
     /** Style overrides for the side/bottom placement panel surface. */

package/lib/typescript/module/surfaces/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/surfaces/types.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/surfaces/types.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oxyhq/bloom",
-  "version": "0.48.0",
+  "version": "0.49.0",
   "description": "Bloom UI — Oxy ecosystem component library for React Native + Expo + Web",
   "main": "lib/commonjs/index.js",
   "module": "lib/module/index.js",

package/src/__tests__/DialogMorph.test.tsx

@@ -0,0 +1,230 @@
+import React from 'react';
+import { act, render } from '@testing-library/react-native';
+import type { LayoutChangeEvent, ViewStyle } from 'react-native';
+
+import {
+  DialogMorphContent,
+  useDialogFrame,
+  useDialogMorph,
+} from '../dialog/DialogMorph';
+
+/**
+ * Size morphing across an in-place content swap.
+ *
+ * These assert the STATE MACHINE — when the panel height is taken over and when
+ * it is handed back to natural sizing. The reanimated mock settles `withTiming`
+ * synchronously, so the frame-by-frame interpolation is NOT observable here; it
+ * is verified in a real browser, the only place reanimated's web mapper ticks.
+ */
+
+const layout = (height: number): LayoutChangeEvent =>
+  ({
+    nativeEvent: { layout: { x: 0, y: 0, width: 320, height } },
+  }) as LayoutChangeEvent;
+
+interface HarnessProps {
+  morphEnabled?: boolean;
+  measurable?: boolean;
+  frameKey: string;
+  frameMorph?: boolean;
+  onState: (state: {
+    panelStyle: ViewStyle;
+    onPanelLayout: (e: LayoutChangeEvent) => void;
+    onContentLayout: (e: LayoutChangeEvent) => void;
+  }) => void;
+}
+
+/** Drives one surface: measurement in, panel style + a frame-declaring child out. */
+function Harness({
+  morphEnabled = true,
+  measurable = true,
+  frameKey,
+  frameMorph,
+  onState,
+}: HarnessProps) {
+  const morph = useDialogMorph({ enabled: morphEnabled, measurable, maxHeight: 800 });
+  onState({
+    panelStyle: morph.panelStyle as ViewStyle,
+    onPanelLayout: morph.onPanelLayout,
+    onContentLayout: morph.onContentLayout,
+  });
+  return (
+    <DialogMorphContent morph={morph}>
+      <Frame frameKey={frameKey} frameMorph={frameMorph} />
+    </DialogMorphContent>
+  );
+}
+
+function Frame({ frameKey, frameMorph }: { frameKey: string; frameMorph?: boolean }) {
+  useDialogFrame({ key: frameKey, morph: frameMorph });
+  return null;
+}
+
+/** Mount the harness and return a handle for driving layout + swapping frames. */
+function mountHarness(props: Omit<Partial<HarnessProps>, 'onState' | 'frameKey'> = {}) {
+  let state: Parameters<HarnessProps['onState']>[0] | null = null;
+  const onState: HarnessProps['onState'] = (next) => {
+    state = next;
+  };
+  const element = (frameKey: string, extra: Omit<Partial<HarnessProps>, 'onState'> = {}) => (
+    <Harness frameKey={frameKey} onState={onState} {...props} {...extra} />
+  );
+  const { rerender, unmount } = render(element('a'));
+  const read = () => {
+    if (!state) throw new Error('harness did not render');
+    return state;
+  };
+  return {
+    /** The panel height the surface currently resolves to. */
+    panelHeight: () => read().panelStyle.height,
+    /** Report the panel's and then the content's laid-out heights. */
+    measure(panelHeight: number, contentHeight: number) {
+      act(() => {
+        read().onPanelLayout(layout(panelHeight));
+        read().onContentLayout(layout(contentHeight));
+      });
+    },
+    /**
+     * Report only the content's natural height (the incoming frame settling).
+     * Followed by a re-render: the mock's `useAnimatedStyle` only re-evaluates
+     * on render, whereas the real one re-runs on the shared-value write.
+     */
+    measureContent(contentHeight: number, frameKey = 'b') {
+      act(() => read().onContentLayout(layout(contentHeight)));
+      rerender(element(frameKey));
+    },
+    /** Declare a frame, then re-render so the resulting panel style is observable. */
+    swapTo(frameKey: string, extra: Omit<Partial<HarnessProps>, 'onState'> = {}) {
+      rerender(element(frameKey, extra));
+      rerender(element(frameKey, extra));
+    },
+    unmount,
+  };
+}
+
+describe('Dialog size morphing', () => {
+  it('leaves the panel naturally sized until a frame actually changes', () => {
+    const h = mountHarness();
+    expect(h.panelHeight()).toBe('auto');
+
+    h.measure(300, 298);
+    expect(h.panelHeight()).toBe('auto');
+
+    // Re-declaring the SAME frame is not a swap.
+    h.swapTo('a');
+    expect(h.panelHeight()).toBe('auto');
+    h.unmount();
+  });
+
+  it('pins the panel at the outgoing size, then releases onto the incoming one', () => {
+    const h = mountHarness();
+    h.measure(300, 298);
+
+    h.swapTo('b');
+    // Held at the size the outgoing frame was painted at — no jump while the
+    // incoming content is still being measured.
+    expect(h.panelHeight()).toBe(300);
+
+    // The incoming frame reports 500 of natural height; the panel carries the
+    // 2px of chrome calibrated from the outgoing frame, then hands the height
+    // back so later content changes size the panel normally again.
+    h.measureContent(500);
+    expect(h.panelHeight()).toBe('auto');
+    h.unmount();
+  });
+
+  it('releases the pin even when the incoming frame is taller than the bound', () => {
+    const h = mountHarness();
+    h.measure(300, 300);
+    h.swapTo('b');
+    expect(h.panelHeight()).toBe(300);
+
+    h.measureContent(5000);
+    expect(h.panelHeight()).toBe('auto');
+    h.unmount();
+  });
+
+  it('releases without reshaping when the incoming frame fills the space it is given', () => {
+    const h = mountHarness();
+    h.measure(300, 300);
+    h.swapTo('b');
+    expect(h.panelHeight()).toBe(300);
+
+    // A child that flexes to its container measures ~0 inside a content-sized
+    // wrapper; collapsing the panel onto that would empty the surface.
+    h.measureContent(0);
+    expect(h.panelHeight()).toBe('auto');
+    h.unmount();
+  });
+
+  it('never pins when nothing has been measured yet', () => {
+    const h = mountHarness();
+    h.swapTo('b');
+    expect(h.panelHeight()).toBe('auto');
+    h.unmount();
+  });
+
+  it('honours the per-frame morph opt-out', () => {
+    const h = mountHarness();
+    h.measure(300, 300);
+    h.swapTo('b', { frameMorph: false });
+    expect(h.panelHeight()).toBe('auto');
+    h.unmount();
+  });
+
+  it('honours the surface-level morph opt-out', () => {
+    const h = mountHarness({ morphEnabled: false });
+    h.measure(300, 300);
+    h.swapTo('b');
+    expect(h.panelHeight()).toBe('auto');
+    h.unmount();
+  });
+
+  it('does not pin a surface whose content owns its own size', () => {
+    const h = mountHarness({ measurable: false });
+    h.measure(300, 300);
+    h.swapTo('b');
+    expect(h.panelHeight()).toBe('auto');
+    h.unmount();
+  });
+
+  it('drives maxWidth only on a placement that can vary it', () => {
+    let fixedWidth: ViewStyle | null = null;
+    let varyingWidth: ViewStyle | null = null;
+    render(
+      <WidthHarness
+        onStyle={(s) => {
+          fixedWidth = s;
+        }}
+      />,
+    );
+    render(
+      <WidthHarness
+        maxWidth={480}
+        onStyle={(s) => {
+          varyingWidth = s;
+        }}
+      />,
+    );
+    expect((fixedWidth as unknown as ViewStyle).maxWidth).toBeUndefined();
+    expect((varyingWidth as unknown as ViewStyle).maxWidth).toBe(480);
+  });
+});
+
+function WidthHarness({
+  maxWidth,
+  onStyle,
+}: {
+  maxWidth?: number;
+  onStyle: (style: ViewStyle) => void;
+}) {
+  const morph = useDialogMorph({ enabled: true, measurable: true, maxHeight: 800, maxWidth });
+  onStyle(morph.panelStyle as ViewStyle);
+  return null;
+}
+
+describe('useDialogFrame outside a morph-capable surface', () => {
+  it('is a no-op (a side sheet, or a plain confirm dialog)', () => {
+    expect(() => render(<Frame frameKey="only" />)).not.toThrow();
+  });
+});

package/src/bottom-sheet/BottomSheetBase.tsx

@@ -6,6 +6,7 @@ import {
     Pressable,
     Dimensions,
     Platform,
+    type LayoutChangeEvent,
     type ViewStyle,
     type StyleProp,
 } from 'react-native';
@@ -151,6 +152,13 @@ export interface BottomSheetProps {
      * Dialog to float its sticky nav header over the sheet's scroll content.
      */
     headerOverlay?: React.ReactNode;
+    /**
+     * Layout callback for the SHEET CARD — the same box `style` targets. Lets a
+     * host observe the card's rendered size (the Dialog measures it to morph the
+     * sheet between two content frames). Fires on every size change, including
+     * while a host animates the card's height.
+     */
+    onLayout?: (event: LayoutChangeEvent) => void;
 }
 
 /**
@@ -209,6 +217,7 @@ export const BottomSheetBase = forwardRef((props: BottomSheetBaseProps, ref: Rea
         handleComponent,
         scrollY: externalScrollY,
         headerOverlay,
+        onLayout,
     } = props;
 
     const insets = useSafeAreaInsets();
@@ -780,7 +789,10 @@ export const BottomSheetBase = forwardRef((props: BottomSheetBaseProps, ref: Rea
                 </Animated.View>
 
                 <GestureDetector gesture={panGesture}>
-                    <Animated.View style={[dynamicStyles.sheet, sheetMarginStyle, sheetStyle, sheetHeightStyle, style]}>
+                    <Animated.View
+                        onLayout={onLayout}
+                        style={[dynamicStyles.sheet, sheetMarginStyle, sheetStyle, sheetHeightStyle, style]}
+                    >
                         {backgroundComponent?.({ style: styles.background })}
 
                         {handleSlot}

package/src/dialog/Dialog.tsx

@@ -38,6 +38,7 @@ import {
   DialogNavHeader,
   useDialogHeaderController,
 } from './DialogHeader';
+import { DialogMorphContent, useDialogMorph } from './DialogMorph';
 import {
   ANIMATION_DURATION,
   DEFAULT_DIALOG_CONTENT_PADDING,
@@ -113,6 +114,7 @@ function CenteredOrSideDialog({
   actions,
   header,
   scrollable,
+  morph,
   placement,
   layer,
   width = DEFAULT_SIDE_WIDTH,
@@ -131,6 +133,19 @@ function CenteredOrSideDialog({
   const isSide = placement === 'left' || placement === 'right';
   const headerController = useDialogHeaderController();
   const scrollableResolved = scrollable ?? true;
+  const { height: viewportHeight } = useWindowDimensions();
+
+  // Size morphing across an in-place content swap. The detached centered card
+  // is content-hugging, so animating its height reshapes it about its own
+  // centre; the side placements are anchored top-to-bottom at a fixed width and
+  // have no size to morph, so they never pin (`measurable: false`). The card's
+  // own `maxHeight` (inside `BottomSheet`) does the exact capping — the viewport
+  // is just the bound the reshape may not exceed.
+  const morphState = useDialogMorph({
+    enabled: morph !== false && !isSide,
+    measurable: scrollableResolved && !isSide,
+    maxHeight: viewportHeight,
+  });
 
   // Imperative open state for the side placement (the BottomSheet path owns its
   // own visibility via its ref instead).
@@ -223,16 +238,21 @@ function CenteredOrSideDialog({
     [close],
   );
 
-  const sheetStyle = useMemo(
-    () => ({
-      maxWidth: 500,
-      backgroundColor: theme.colors.background,
-      // All four corners rounded — bloom's BottomSheet defaults to top-only
-      // radius in flush mode, but we use `detached` so the whole card is
-      // floating and rounded uniformly.
-      borderRadius: 20,
-    }),
-    [theme.colors.background],
+  const sheetStyle = useMemo<StyleProp<ViewStyle>>(
+    () => [
+      {
+        maxWidth: 500,
+        backgroundColor: theme.colors.background,
+        // All four corners rounded — bloom's BottomSheet defaults to top-only
+        // radius in flush mode, but we use `detached` so the whole card is
+        // floating and rounded uniformly.
+        borderRadius: 20,
+      },
+      // Drives the card's `height` only while a morph is in flight; at rest it
+      // resolves to `height: 'auto'` — the card's normal content sizing.
+      morphState.panelStyle,
+    ],
+    [theme.colors.background, morphState.panelStyle],
   );
 
   const bodyNode = (
@@ -322,6 +342,8 @@ function CenteredOrSideDialog({
       // Stronger dim when a Dialog is stacked over another sheet so the
       // underlying sheet's handle/content doesn't bleed through.
       backdropOpacity={0.7}
+      // Measures the floating card — the size a morph starts from.
+      onLayout={morphState.onPanelLayout}
       style={sheetStyle}
     >
       <Context.Provider value={context}>
@@ -342,7 +364,12 @@ function CenteredOrSideDialog({
             panelStyle,
           ]}
         >
-          {header ? headerBody : bodyNode}
+          {/* The morph layer is its own node INSIDE the class-name'd container:
+              a className'd component's `onLayout` never fires on web, and this
+              one has to measure the incoming frame. */}
+          <DialogMorphContent morph={morphState}>
+            {header ? headerBody : bodyNode}
+          </DialogMorphContent>
         </View>
       </Context.Provider>
     </BottomSheet>

package/src/dialog/Dialog.web.tsx

@@ -16,6 +16,7 @@ import {
   type StyleProp,
   type ViewStyle,
 } from 'react-native';
+import Animated from 'react-native-reanimated';
 import { RemoveScrollBar } from 'react-remove-scroll-bar';
 
 import { Portal } from '../portal/index.web';
@@ -31,11 +32,13 @@ import {
   DialogNavHeader,
   useDialogHeaderController,
 } from './DialogHeader';
+import { DialogMorphContent, useDialogMorph } from './DialogMorph';
 import {
   ANIMATION_DURATION,
   CENTER_FADE_OUT_DURATION,
   DEFAULT_CENTER_MAX_WIDTH,
   DEFAULT_DIALOG_CONTENT_PADDING,
+  DEFAULT_MAX_HEIGHT_RATIO,
   DEFAULT_SIDE_WIDTH,
   DIALOG_SHEET_BACKDROP_TESTID,
   EASE_OUT,
@@ -149,6 +152,7 @@ function CenterOrSideDialog({
   contentPadding = DEFAULT_DIALOG_CONTENT_PADDING,
   maxHeightRatio,
   scrollable,
+  morph,
   style,
   panelStyle,
   panelClassName,
@@ -323,6 +327,7 @@ function CenterOrSideDialog({
                 contentPadding={contentPadding}
                 maxHeightRatio={maxHeightRatio}
                 scrollable={scrollable}
+                morph={morph}
                 surfaceZIndex={dialogZIndex.surface}
                 isClosing={isClosing}
               >
@@ -383,6 +388,7 @@ function DialogPanel({
   contentPadding,
   maxHeightRatio,
   scrollable,
+  morph,
   surfaceZIndex,
   isClosing,
   children,
@@ -398,6 +404,7 @@ function DialogPanel({
   contentPadding: number;
   maxHeightRatio?: number;
   scrollable?: boolean;
+  morph?: boolean;
   surfaceZIndex: number;
   isClosing: boolean;
   children?: React.ReactNode;
@@ -407,6 +414,19 @@ function DialogPanel({
   const titleId = useId();
   const descriptionId = useId();
   const headerController = useDialogHeaderController();
+  const { height: viewportHeight } = useWindowDimensions();
+  const heightRatio = maxHeightRatio ?? DEFAULT_MAX_HEIGHT_RATIO;
+
+  // Size morphing across an in-place content swap. The centered card is the one
+  // placement whose width can vary too, so `maxWidth` is handed over as well.
+  // The card's own `maxHeight` (the ratio percentage below) does the exact
+  // capping — the viewport is just the bound the reshape may not exceed.
+  const morphState = useDialogMorph({
+    enabled: morph !== false,
+    measurable: scrollable !== false,
+    maxHeight: viewportHeight,
+    maxWidth,
+  });
 
   const body = (
     <DialogBody
@@ -421,12 +441,13 @@ function DialogPanel({
   );
 
   return (
-    <View
+    <Animated.View
       role="dialog"
       aria-label={label}
       aria-labelledby={title ? titleId : undefined}
       aria-describedby={description ? descriptionId : undefined}
       testID={testID}
+      onLayout={morphState.onPanelLayout}
       onStartShouldSetResponder={() => true}
       onResponderRelease={stopPropagation}
       {...({ onClick: stopPropagation } as Record<string, unknown>)}
@@ -441,7 +462,7 @@ function DialogPanel({
           // capped at `maxHeightRatio` of the viewport and scrolls inside the
           // rounded card (via the ScrollView below) — consumers never add their
           // own height cap / ScrollView. `overflow: hidden` clips to the radius.
-          maxHeight: `${Math.round((maxHeightRatio ?? 0.9) * 100)}%`,
+          maxHeight: `${Math.round(heightRatio * 100)}%`,
           overflow: 'hidden',
           backgroundColor: theme.colors.background,
           borderWidth: 1,
@@ -455,6 +476,10 @@ function DialogPanel({
         isClosing
           ? ({ animation: `bloomDialogZoomFadeOut ease-in ${FADE_OUT_DURATION}ms forwards` } as ViewStyle)
           : ({ animation: 'bloomDialogZoomFadeIn cubic-bezier(0.16, 1, 0.3, 1) 0.3s' } as ViewStyle),
+        // Drives `height` (and `maxWidth`) only while a morph is in flight; at
+        // rest it resolves to `height: 'auto'` — the natural sizing above. Placed
+        // before `style` so a consumer's explicit size still wins.
+        morphState.panelStyle,
         style,
       ]}
     >
@@ -471,10 +496,10 @@ function DialogPanel({
             collapse={scrollable !== false}
           />
           {scrollable === false ? (
-            <View style={{ flex: 1, minHeight: 0 }}>
+            <DialogMorphContent morph={morphState} style={{ flex: 1, minHeight: 0 }}>
               <View style={{ height: DIALOG_NAV_BAR_HEIGHT }} />
               <DialogHeaderProvider controller={headerController}>{body}</DialogHeaderProvider>
-            </View>
+            </DialogMorphContent>
           ) : (
             <ScrollView
               style={{ flexShrink: 1 }}
@@ -485,8 +510,10 @@ function DialogPanel({
                 headerController.scrollY.value = e.nativeEvent.contentOffset.y;
               }}
             >
-              <DialogLargeTitle controller={headerController} header={header} />
-              <DialogHeaderProvider controller={headerController}>{body}</DialogHeaderProvider>
+              <DialogMorphContent morph={morphState}>
+                <DialogLargeTitle controller={headerController} header={header} />
+                <DialogHeaderProvider controller={headerController}>{body}</DialogHeaderProvider>
+              </DialogMorphContent>
             </ScrollView>
           )}
         </>
@@ -496,19 +523,22 @@ function DialogPanel({
         // `maxHeight` + `overflow: hidden` cap it and `flex: 1` + `minHeight: 0`
         // hand the child a bounded height to scroll into — with NO wrapping
         // ScrollView, so a VirtualizedList never nests inside one.
-        <View style={{ flex: 1, minHeight: 0, padding: contentPadding }}>
+        <DialogMorphContent
+          morph={morphState}
+          style={{ flex: 1, minHeight: 0, padding: contentPadding }}
+        >
           {body}
-        </View>
+        </DialogMorphContent>
       ) : (
         <ScrollView
           style={{ flexShrink: 1 }}
           contentContainerStyle={{ padding: contentPadding }}
           showsVerticalScrollIndicator={false}
         >
-          {body}
+          <DialogMorphContent morph={morphState}>{body}</DialogMorphContent>
         </ScrollView>
       )}
-    </View>
+    </Animated.View>
   );
 }
 

package/src/dialog/DialogBottomSheet.tsx

@@ -6,7 +6,12 @@ import React, {
   useMemo,
   useRef,
 } from 'react';
-import { View, type StyleProp, type ViewStyle } from 'react-native';
+import {
+  useWindowDimensions,
+  View,
+  type StyleProp,
+  type ViewStyle,
+} from 'react-native';
 
 import { BottomSheet, type BottomSheetRef } from '../bottom-sheet';
 import { useTheme } from '../theme/use-theme';
@@ -19,6 +24,7 @@ import {
   DialogNavHeader,
   useDialogHeaderController,
 } from './DialogHeader';
+import { DialogMorphContent, useDialogMorph } from './DialogMorph';
 import {
   DEFAULT_DIALOG_CONTENT_PADDING,
   DEFAULT_MAX_HEIGHT_RATIO,
@@ -62,6 +68,7 @@ export function DialogBottomSheet({
   dismissOnBackdrop = true,
   contentPadding = DEFAULT_DIALOG_CONTENT_PADDING,
   scrollable,
+  morph,
   style,
   panelStyle,
   panelClassName,
@@ -72,6 +79,7 @@ export function DialogBottomSheet({
 }: DialogBottomSheetProps) {
   const isControlled = controlledOpen !== undefined;
   const theme = useTheme();
+  const { height: viewportHeight } = useWindowDimensions();
   const ref = useRef<BottomSheetRef>(null);
   const closeCallbacks = useRef<(() => void)[]>([]);
   const titleId = useId();
@@ -155,6 +163,19 @@ export function DialogBottomSheet({
     [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 = 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
   // shape (radius, max height) is supplied here and remains overridable.
@@ -168,8 +189,11 @@ export function DialogBottomSheet({
         maxHeight: maxHeightPercent,
       },
       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]);
+  }, [theme.colors.background, maxHeightRatio, panelStyle, morphState.panelStyle]);
 
   // Does this dialog render bloom's declarative chrome (title / description /
   // actions)? This no longer gates the SCROLL decision (that is now the explicit
@@ -183,8 +207,6 @@ export function DialogBottomSheet({
     description !== undefined ||
     (actions !== undefined && actions.length > 0);
 
-  const scrollableResolved = scrollable ?? true;
-
   const dialogBody = (
     <DialogBody
       titleId={titleId}
@@ -264,6 +286,8 @@ export function DialogBottomSheet({
       // 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={SHEET_BACKDROP_OPACITY + 0.3}
+      // Measures the sheet card — the size a morph starts from.
+      onLayout={morphState.onPanelLayout}
       style={sheetStyle}
     >
       <Context.Provider value={context}>
@@ -285,7 +309,12 @@ export function DialogBottomSheet({
             panelStyle,
           ]}
         >
-          {header ? headerBody : dialogBody}
+          {/* The morph layer is its own node INSIDE the class-name'd container:
+              a className'd component's `onLayout` never fires on web, and this
+              one has to measure the incoming frame. */}
+          <DialogMorphContent morph={morphState}>
+            {header ? headerBody : dialogBody}
+          </DialogMorphContent>
         </View>
       </Context.Provider>
     </BottomSheet>
@@ -313,6 +342,7 @@ export type DialogBottomSheetProps = Pick<
   | 'dismissOnBackdrop'
   | 'contentPadding'
   | 'scrollable'
+  | 'morph'
   | 'style'
   | 'panelStyle'
   | 'panelClassName'