@oxyhq/bloom 0.48.0 → 0.49.1

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

@@ -17,6 +17,15 @@ export type { DialogPlacement, ResponsiveDialogPlacement } from './placement';
 export interface DialogHeaderConfig {
     /** Collapsing title — rendered large in-content and small in the nav bar. */
     title?: string;
+    /**
+     * A branded node rendered centered in the nav bar INSTEAD of the collapsing
+     * text title — e.g. a product wordmark. Always visible (it never collapses),
+     * and it suppresses the large in-content title/subtitle entirely, so the
+     * surface starts flush under the bar. `title`/`subtitle` are ignored while
+     * this is set. Must be referentially stable (memoize it) so the header does
+     * not thrash.
+     */
+    titleContent?: ReactNode;
     /** Supporting copy under the large title (and, optionally, in the bar). */
     subtitle?: string;
     /**
@@ -214,6 +223,27 @@ export type DialogProps = React.PropsWithChildren<{
     contentPadding?: number;
     /** Whether tapping the backdrop dismisses the dialog. Defaults to `true`. */
     dismissOnBackdrop?: boolean;
+    /**
+     * Whether the panel MORPHS across an in-place content swap. Defaults to
+     * `true`.
+     *
+     * When the content inside an OPEN dialog is replaced (a nav-within drill-in,
+     * as opposed to presenting a new surface on top), the panel animates from the
+     * outgoing content's size to the incoming one's while the incoming content
+     * fades in, instead of hard-cutting. The swap is signalled by the content
+     * itself through `useDialogFrame` — a dialog whose content never declares a
+     * frame is unaffected either way.
+     *
+     * The centered card morphs its height (about its centre) and its `maxWidth`;
+     * the bottom sheet morphs its height from its anchored edge; side sheets have
+     * fixed geometry and never morph. Morphing also requires the Dialog to own the
+     * scroll container: a `scrollable={false}` surface owns its own size, so its
+     * content only cross-fades.
+     *
+     * Set `false` for content that must never be resized into — e.g. a full-bleed
+     * picker that always fills the surface.
+     */
+    morph?: boolean;
     /**
      * Style overrides applied to the inner content container on native (the
      * floating bottom-sheet card) and to the modal panel on web.

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

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

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":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAEzD,OAAO,KAAK,EAAE,kBAAkB,EAAE,WAAW,EAAE,yBAAyB,EAAE,MAAM,iBAAiB,CAAC;AAElG;;;;;;;;;GASG;AACH,MAAM,WAAW,mBAAmB;IAClC;;;;;OAKG;IACH,SAAS,CAAC,EAAE,yBAAyB,CAAC;IACtC,oEAAoE;IACpE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,2DAA2D;IAC3D,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,oEAAoE;IACpE,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,2DAA2D;IAC3D,KAAK,CAAC,EAAE,WAAW,CAAC;IACpB,8DAA8D;IAC9D,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;OAIG;IACH,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,kFAAkF;IAClF,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB;;;;;;OAMG;IACH,MAAM,CAAC,EAAE,kBAAkB,CAAC;IAC5B;;;;;;OAMG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;;;;OAOG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,8DAA8D;IAC9D,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,mEAAmE;IACnE,UAAU,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAClC,sEAAsE;IACtE,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,uEAAuE;IACvE,cAAc,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IACtC,+CAA+C;IAC/C,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,gEAAgE;IAChE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,0DAA0D;IAC1D,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,iEAAiE;AACjE,MAAM,MAAM,cAAc,GAAG,mBAAmB,CAAC;AAEjD;;;;;;;GAOG;AACH,MAAM,WAAW,eAAe;IAC9B;;;;OAIG;IACH,OAAO,EAAE,CAAC,MAAM,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;IACpC;;;;OAIG;IACH,OAAO,EAAE,CAAC,MAAM,GAAG,OAAO,EACxB,MAAM,EAAE,eAAe,EACvB,IAAI,CAAC,EAAE,cAAc,KAClB,OAAO,CAAC,MAAM,CAAC,CAAC;CACtB;AAED,8EAA8E;AAC9E,MAAM,MAAM,eAAe,GAAG,CAAC,OAAO,EAAE,eAAe,KAAK,SAAS,CAAC;AAEtE,6CAA6C;AAC7C,MAAM,MAAM,aAAa,GAAG,MAAM,GAAG,SAAS,CAAC;AAE/C;;;;;;GAMG;AACH,MAAM,WAAW,YAAY;IAC3B,EAAE,EAAE,MAAM,CAAC;IACX,MAAM,EAAE,eAAe,CAAC;IACxB,YAAY,EAAE,mBAAmB,CAAC;IAClC,MAAM,EAAE,aAAa,CAAC;IACtB,OAAO,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IACnC,OAAO,EAAE,OAAO,CAAC;IACjB,UAAU,EAAE,MAAM,CAAC;CACpB;AAED,4EAA4E;AAC5E,MAAM,WAAW,qBAAqB;IACpC,gBAAgB;IAChB,KAAK,EAAE,MAAM,CAAC;IACd,uBAAuB;IACvB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,qDAAqD;IACrD,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,mDAAmD;IACnD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,gEAAgE;IAChE,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,gEAAgE;IAChE,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,kDAAkD;IAClD,SAAS,CAAC,EAAE,yBAAyB,CAAC;CACvC;AAED,2EAA2E;AAC3E,MAAM,WAAW,oBAAoB;IACnC,gBAAgB;IAChB,KAAK,EAAE,MAAM,CAAC;IACd,uBAAuB;IACvB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,yBAAyB;IACzB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,2BAA2B;IAC3B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,kEAAkE;IAClE,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,+CAA+C;IAC/C,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,mDAAmD;IACnD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,kDAAkD;IAClD,SAAS,CAAC,EAAE,yBAAyB,CAAC;CACvC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oxyhq/bloom",
-  "version": "0.48.0",
+  "version": "0.49.1",
   "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,12 +6,14 @@ import {
     Pressable,
     Dimensions,
     Platform,
+    type LayoutChangeEvent,
     type ViewStyle,
     type StyleProp,
 } from 'react-native';
 import { Gesture, GestureDetector, type GestureType } from 'react-native-gesture-handler';
 import { Z_INDEX } from '../styles/z-index';
 import Animated, {
+    type AnimatedStyle,
     interpolate,
     runOnJS,
     type SharedValue,
@@ -75,7 +77,7 @@ export interface BottomSheetProps {
      * background color, border radius, etc. Composed AFTER the internal sheet
      * styles so it can override them.
      */
-    style?: StyleProp<ViewStyle>;
+    style?: StyleProp<AnimatedStyle<ViewStyle>>;
     enableHandlePanningGesture?: boolean;
     onDismissAttempt?: () => boolean;
     detached?: boolean; // If true, shows with margins and rounded corners. If false, full width with rounded top only.
@@ -151,6 +153,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 +218,7 @@ export const BottomSheetBase = forwardRef((props: BottomSheetBaseProps, ref: Rea
         handleComponent,
         scrollY: externalScrollY,
         headerOverlay,
+        onLayout,
     } = props;
 
     const insets = useSafeAreaInsets();
@@ -780,7 +790,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

@@ -16,6 +16,7 @@ import {
   type ViewStyle,
 } from 'react-native';
 import Animated, {
+  type AnimatedStyle,
   cancelAnimation,
   Easing,
   runOnJS,
@@ -38,6 +39,7 @@ import {
   DialogNavHeader,
   useDialogHeaderController,
 } from './DialogHeader';
+import { DialogMorphContent, useDialogMorph } from './DialogMorph';
 import {
   ANIMATION_DURATION,
   DEFAULT_DIALOG_CONTENT_PADDING,
@@ -113,6 +115,7 @@ function CenteredOrSideDialog({
   actions,
   header,
   scrollable,
+  morph,
   placement,
   layer,
   width = DEFAULT_SIDE_WIDTH,
@@ -131,6 +134,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 +239,25 @@ 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],
+  // The array composes the plain surface styles with the morph's reanimated
+  // animated style (`morphState.panelStyle` from `useAnimatedStyle`), so the
+  // element type must admit an animated style, not just a plain `ViewStyle`.
+  // It flows to `<BottomSheet style>`, which applies it to its outer Animated.View.
+  const sheetStyle = useMemo<StyleProp<AnimatedStyle<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 +347,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 +369,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>
   );
 }