@oxy.so/bloom 4.19.1 → 4.21.0

package/src/composer-panel/AttachmentStrip.tsx

@@ -10,6 +10,8 @@ import Animated, {
 import Svg, { Path } from 'react-native-svg';
 
 import { mixColor } from '../button/shared';
+import { RiErrorWarningLine } from '../icons/remix/RiErrorWarningLine';
+import { RiRefreshLine } from '../icons/remix/RiRefreshLine';
 import { Text } from '../typography';
 import type { WebCssStyle } from '../styles/web-view-style';
 import {
@@ -101,6 +103,41 @@ function TileDismiss({
   );
 }
 
+/**
+ * A failed tile's retry: a 24px disc on the card surface where the kind glyph
+ * sits (3, 4), a 14px refresh glyph in the error foreground, text-primary on
+ * hover.
+ */
+function TileRetry({ label, onPress, palette }: { label: string; onPress: () => void; palette: ComposerPalette }) {
+  const [hovered, setHovered] = useState(false);
+  const style: WebCssStyle = {
+    position: 'absolute',
+    top: 3,
+    left: 3,
+    width: 24,
+    height: 24,
+    borderRadius: 12,
+    alignItems: 'center',
+    justifyContent: 'center',
+    backgroundColor: palette.surface,
+    cursor: 'pointer',
+    '--bloom-composer-ring': palette.focusRing,
+  };
+  return (
+    <Pressable
+      {...dataHook('bloomComposerControl', 'offset')}
+      accessibilityRole="button"
+      accessibilityLabel={label}
+      onPress={onPress}
+      onHoverIn={() => setHovered(true)}
+      onHoverOut={() => setHovered(false)}
+      hitSlop={4}
+      style={style}>
+      <RiRefreshLine width={14} height={14} fill={hovered ? palette.text : palette.errorText} />
+    </Pressable>
+  );
+}
+
 /** The upload percentage's box: top 3 / right 3, blurring out as it fades. */
 function percentStyle(inFlight: boolean): WebCssStyle {
   return {
@@ -123,7 +160,9 @@ interface TileProps {
   attachment: ComposerPanelAttachment;
   palette: ComposerPalette;
   onRemove?: () => void;
+  onRetry?: () => void;
   removeLabel: string;
+  retryLabel: string;
 }
 
 /**
@@ -134,9 +173,23 @@ interface TileProps {
  * percentage (9/16 medium, tabular; white over a photo, accent-500 otherwise)
  * sits at top 3 / right 3; once landed it blurs out as the dismiss blurs in on
  * the same spot.
+ *
+ * A FAILED tile (`error`) drops the ring and percentage and fills with the
+ * error subtle surface under an error-foreground border: the warning glyph (or
+ * the retry button) at (3, 4) and the message in 9/11 medium, two lines at
+ * most, from (5, 30). The dismiss shows as on a landed tile.
  */
-export const AttachmentTile = memo(function AttachmentTile({ attachment, palette, onRemove, removeLabel }: TileProps) {
-  const { progress } = attachment;
+export const AttachmentTile = memo(function AttachmentTile({
+  attachment,
+  palette,
+  onRemove,
+  onRetry,
+  removeLabel,
+  retryLabel,
+}: TileProps) {
+  const { error } = attachment;
+  const failed = !!error;
+  const progress = failed ? undefined : attachment.progress;
   const inFlight = progress !== undefined;
   const image = attachment.kind === 'image' ? attachment.src : undefined;
   const dash = inFlight && progress < 100 ? (Math.max(0, progress) / 100) * TILE_RING_LENGTH : TILE_RING_LENGTH + 2;
@@ -144,8 +197,8 @@ export const AttachmentTile = memo(function AttachmentTile({ attachment, palette
 
   return (
     <View
-      accessibilityLabel={attachment.name}
-      {...(IS_WEB ? { title: attachment.name } : {})}
+      accessibilityLabel={failed ? `${attachment.name}: ${error}` : attachment.name}
+      {...(IS_WEB ? { title: failed ? `${attachment.name}: ${error}` : attachment.name } : {})}
       style={{
         position: 'relative',
         width: TILE,
@@ -153,7 +206,7 @@ export const AttachmentTile = memo(function AttachmentTile({ attachment, palette
         flexShrink: 0,
         borderRadius: TILE_RADIUS,
         borderWidth: 1,
-        borderColor: palette.tileBorder,
+        borderColor: failed ? palette.errorText : palette.tileBorder,
       }}>
       {image ? (
         <View
@@ -196,6 +249,41 @@ export const AttachmentTile = memo(function AttachmentTile({ attachment, palette
         </View>
       )}
 
+      {failed ? (
+        <View
+          style={{
+            position: 'absolute',
+            top: 0,
+            left: 0,
+            right: 0,
+            bottom: 0,
+            borderRadius: TILE_RADIUS - 1,
+            backgroundColor: palette.errorSurface,
+          }}>
+          {onRetry ? null : (
+            <View style={{ position: 'absolute', top: 4, left: 3, width: 24, height: 24, alignItems: 'center', justifyContent: 'center' }}>
+              <RiErrorWarningLine width={20} height={20} fill={palette.errorText} />
+            </View>
+          )}
+          <Text
+            numberOfLines={2}
+            style={{
+              position: 'absolute',
+              top: 30,
+              left: 5,
+              right: 5,
+              // 9px has no type-ramp step; spelled out literally.
+              fontSize: 9,
+              lineHeight: 11,
+              fontWeight: '500',
+              color: palette.errorText,
+            }}>
+            {error}
+          </Text>
+          {onRetry ? <TileRetry label={`${retryLabel} ${attachment.name}`} onPress={onRetry} palette={palette} /> : null}
+        </View>
+      ) : null}
+
       {/* Upload ring over the border: the svg spans the border box. */}
       <View
         pointerEvents="none"
@@ -288,7 +376,9 @@ interface StripProps {
   attachments: ReadonlyArray<ComposerPanelAttachment>;
   palette: ComposerPalette;
   onRemove?: (id: string) => void;
+  onRetry?: (id: string) => void;
   removeLabel: string;
+  retryLabel: string;
 }
 
 /**
@@ -296,7 +386,7 @@ interface StripProps {
  * scale 0.8 → 1, fade and un-blur on arrival over 280ms `cubic-bezier(0.22, 1,
  * 0.36, 1)`, and play it backwards on dismissal before leaving the row.
  */
-export function AttachmentStrip({ attachments, palette, onRemove, removeLabel }: StripProps) {
+export function AttachmentStrip({ attachments, palette, onRemove, onRetry, removeLabel, retryLabel }: StripProps) {
   const [leaving, setLeaving] = useState<ReadonlyArray<ComposerPanelAttachment>>([]);
   const previous = useRef(attachments);
 
@@ -330,7 +420,9 @@ export function AttachmentStrip({ attachments, palette, onRemove, removeLabel }:
             attachment={attachment}
             palette={palette}
             removeLabel={removeLabel}
+            retryLabel={retryLabel}
             onRemove={onRemove && !isLeaving ? () => onRemove(attachment.id) : undefined}
+            onRetry={onRetry && !isLeaving ? () => onRetry(attachment.id) : undefined}
           />
         </PresenceTile>
       ))}

package/src/composer-panel/ComposerPanelBase.tsx

@@ -50,6 +50,7 @@ const DEFAULT_LABELS: Required<ComposerPanelLabels> = {
   send: 'Send message',
   stop: 'Stop generating',
   remove: 'Remove',
+  retry: 'Retry',
 };
 
 /**
@@ -143,6 +144,7 @@ export function ComposerPanelBase({
   onListeningChange,
   attachments,
   onRemoveAttachment,
+  onAttachmentRetry,
   status,
   emptyAction,
   onKeyPress: onKeyPressProp,
@@ -235,7 +237,9 @@ export function ComposerPanelBase({
               attachments={attachments ?? []}
               palette={palette}
               onRemove={onRemoveAttachment}
+              onRetry={onAttachmentRetry}
               removeLabel={labels.remove}
+              retryLabel={labels.retry}
             />
           </View>
         </Collapse>

package/src/composer-panel/ComposerPillBase.tsx

@@ -690,6 +690,7 @@ const DEFAULT_PANEL_LABELS = {
   send: 'Send message',
   stop: 'Stop generating',
   remove: 'Remove',
+  retry: 'Retry',
 };
 
 /**

package/src/composer-panel/shared.ts

@@ -74,6 +74,9 @@ export interface ComposerPalette {
   accent500: string;
   /** `border-focus-ring`. */
   focusRing: string;
+  /** A failed tile: the error subtle surface and its paired foreground. */
+  errorSurface: string;
+  errorText: string;
   /** `shadow-xs`, `shadow-dropdown` and the card's raw Figma shadow. */
   shadowXs: string;
   shadowDropdown: string;
@@ -121,6 +124,8 @@ export function resolveComposerPalette(theme: Theme): ComposerPalette {
     accent400: c.primary,
     accent500: c.primarySubtleForeground,
     focusRing: c.primary,
+    errorSurface: c.errorSubtle,
+    errorText: c.errorSubtleForeground,
     shadowXs: dark ? BUTTON_SHADOW.dark : BUTTON_SHADOW.light,
     shadowDropdown: dark ? MENU_SHADOW.dark : MENU_SHADOW.light,
     shadowCard: '0 1px 0.5px 0 rgba(0, 0, 0, 0.02), 0 4px 2px 0 rgba(0, 0, 0, 0.02)',

package/src/composer-panel/types.ts

@@ -80,6 +80,13 @@ export interface ComposerPanelAttachment {
    * once the file has landed — that also reveals the dismiss.
    */
   progress?: number;
+  /**
+   * The upload failed, and why ("Too large", "Network error"). The tile turns
+   * to the error surface and shows this in place of the name; the ring and the
+   * percentage go (any `progress` is ignored) and the dismiss comes back. With
+   * `ComposerPanel`'s `onAttachmentRetry` it also gets a retry button.
+   */
+  error?: string;
 }
 
 // ---------------------------------------------------------------------------
@@ -195,6 +202,8 @@ export interface ComposerPanelLabels {
   stop?: string;
   /** Default `'Remove'` — prefixed to the file name on a tile's dismiss. */
   remove?: string;
+  /** Default `'Retry'` — prefixed to the file name on a failed tile's retry. */
+  retry?: string;
 }
 
 export interface ComposerPanelProps {
@@ -256,6 +265,8 @@ export interface ComposerPanelProps {
   /** Tiles above the prompt. Each one's `progress` drives its upload ring. */
   attachments?: ReadonlyArray<ComposerPanelAttachment>;
   onRemoveAttachment?: (id: string) => void;
+  /** Draws a retry button on every tile with an `error`; called with its id. */
+  onAttachmentRetry?: (id: string) => void;
 
   /** The tab on the card's top edge — typically `<ComposerPanelStatusTab />`. */
   status?: ReactNode;

package/src/composer-panel/use-attachment-queue.ts

@@ -4,8 +4,11 @@ import type { ComposerAttachmentsProps, ComposerPanelAttachment } from './types'
 
 const TICK_MS = 50;
 
-/** Anything carrying a progress value — the closed ring at 100 included — is still the queue's. */
-const inFlight = (attachment: ComposerPanelAttachment) => attachment.progress !== undefined;
+/**
+ * Anything carrying a progress value — the closed ring at 100 included — is
+ * still the queue's, unless it failed: a failed file is done with.
+ */
+const inFlight = (attachment: ComposerPanelAttachment) => attachment.progress !== undefined && !attachment.error;
 
 /** Keep the parent's order; keep our progress for files we already know. */
 function reconcile(

package/src/design-tokens/theme-css.ts

@@ -35,6 +35,17 @@ import {
 } from './scales';
 import { SHADOW_BOX } from './shadows';
 
+/**
+ * A px line-height as the unitless ratio of its font-size, spelled the way
+ * Tailwind spells its own type scale: `lineHeightRatio(22, 15)` → `calc(22 / 15)`.
+ * Exact on both platforms (no rounded decimal), and the only form
+ * react-native-css resolves correctly through `var()` — it multiplies any
+ * number by the font-size.
+ */
+export function lineHeightRatio(lineHeightPx: number, fontSizePx: number): string {
+  return `calc(${lineHeightPx} / ${fontSizePx})`;
+}
+
 /**
  * Produce the BODY of a Tailwind v4 `@theme` block (no surrounding braces) that
  * registers the full Bloom semantic vocabulary.
@@ -42,7 +53,7 @@ import { SHADOW_BOX } from './shadows';
  * - Colors → `--color-<role>: var(--canonical);`
  * - Spacing → `--spacing-<key>: <px>;`
  * - Radius  → `--radius-<key>: <px>;`
- * - Type    → `--text-<role>: <size>; --text-<role>--line-height: <lh>;`
+ * - Type    → `--text-<role>: <size>; --text-<role>--line-height: calc(<lh> / <size>);`
  *             `--font-<role>: var(--bloom-font-*);` (+ weight via utility doc)
  * - Shadow  → `--shadow-<s|m>: <box-shadow>;`
  */
@@ -94,10 +105,20 @@ export function bloomThemeCss(): string {
   }
 
   // Typography: size + line-height + family per role.
+  //
+  // The line-height is a UNITLESS ratio (`calc(22 / 15)`), the form Tailwind's
+  // own `--text-sm--line-height: calc(1.25 / 0.875)` takes — never px. On the
+  // web the two are identical (a unitless line-height is a multiple of the
+  // font-size: 15px × 22/15 = 22px). On native they are not: Tailwind v4 emits
+  // `line-height: var(--tw-leading, var(--text-body--line-height))`,
+  // react-native-css compiles that to `lineHeight(var(…, 22))`, and its runtime
+  // `lineHeight` resolver treats EVERY number as an em multiplier — so a px
+  // token rendered `text-body` at 22 × 15 = 330dp line-height on Android and
+  // iOS. See `lineHeightRatio` and `docs/typography.mdx`.
   for (const name of Object.keys(TYPOGRAPHY) as TypeRoleName[]) {
     const role = TYPOGRAPHY[name];
     lines.push(`  --text-${name}: ${role.size}px;`);
-    lines.push(`  --text-${name}--line-height: ${role.lineHeight}px;`);
+    lines.push(`  --text-${name}--line-height: ${lineHeightRatio(role.lineHeight, role.size)};`);
     lines.push(`  --text-${name}--font-weight: ${role.weight};`);
     lines.push(`  --font-${name}: ${FONT_FAMILY_VARS[role.family]};`);
   }

package/src/design-tokens/theme.css

@@ -124,35 +124,35 @@
   --radius-radius-max: 9999px;
   --border-width-hairline: 0.5px;
   --text-caption: 11px;
-  --text-caption--line-height: 14px;
+  --text-caption--line-height: calc(14 / 11);
   --text-caption--font-weight: 400;
   --font-caption: var(--bloom-font-sans);
   --text-bodySmall: 13px;
-  --text-bodySmall--line-height: 18px;
+  --text-bodySmall--line-height: calc(18 / 13);
   --text-bodySmall--font-weight: 400;
   --font-bodySmall: var(--bloom-font-sans);
   --text-bodyTitleSmall: 13px;
-  --text-bodyTitleSmall--line-height: 18px;
+  --text-bodyTitleSmall--line-height: calc(18 / 13);
   --text-bodyTitleSmall--font-weight: 600;
   --font-bodyTitleSmall: var(--bloom-font-sans);
   --text-body: 15px;
-  --text-body--line-height: 22px;
+  --text-body--line-height: calc(22 / 15);
   --text-body--font-weight: 400;
   --font-body: var(--bloom-font-sans);
   --text-subtitle: 17px;
-  --text-subtitle--line-height: 24px;
+  --text-subtitle--line-height: calc(24 / 17);
   --text-subtitle--font-weight: 500;
   --font-subtitle: var(--bloom-font-sans);
   --text-sectionTitle: 20px;
-  --text-sectionTitle--line-height: 26px;
+  --text-sectionTitle--line-height: calc(26 / 20);
   --text-sectionTitle--font-weight: 600;
   --font-sectionTitle: var(--bloom-font-sans);
   --text-headerBold: 28px;
-  --text-headerBold--line-height: 34px;
+  --text-headerBold--line-height: calc(34 / 28);
   --text-headerBold--font-weight: 700;
   --font-headerBold: var(--bloom-font-display);
   --text-buttonLarge: 17px;
-  --text-buttonLarge--line-height: 22px;
+  --text-buttonLarge--line-height: calc(22 / 17);
   --text-buttonLarge--font-weight: 600;
   --font-buttonLarge: var(--bloom-font-sans);
   --font-bloom-sans: var(--bloom-font-sans);

package/src/dialog/DialogBottomSheet.tsx

@@ -13,6 +13,7 @@ import {
   type ViewStyle,
 } from 'react-native';
 import { type AnimatedStyle } from 'react-native-reanimated';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
 import { BottomSheet, type BottomSheetRef } from '../bottom-sheet';
 import { useTheme } from '../theme/use-theme';
@@ -86,6 +87,11 @@ export function DialogBottomSheet({
   const titleId = useId();
   const descriptionId = useId();
   const headerController = useDialogHeaderController();
+  // The sheet is flush with the bottom of the window (a `<Modal>` drawn
+  // edge-to-edge on Android, and under the home indicator on iOS), and
+  // `BottomSheet` deliberately leaves the safe area to its content. This Dialog
+  // IS the content's chrome, so it owns the inset (the spacer after the body).
+  const { bottom: bottomInset } = useSafeAreaInsets();
 
   // Read the latest controlled flag / `onClose` inside stable callbacks without
   // re-binding them (the context + imperative handle depend on `close` staying
@@ -325,12 +331,27 @@ export function DialogBottomSheet({
           <DialogMorphContent morph={morphState} style={scrollableResolved ? undefined : FILL_BOUNDED}>
             {header ? headerBody : dialogBody}
           </DialogMorphContent>
+          {/* The bottom safe area, INSIDE the scroll content. Without it the
+              last row of every bottom-placement Dialog was painted under the
+              Android gesture bar / iOS home indicator (a 2400px Pixel put a
+              "Having trouble?" link at 2297–2356px), and a body that outgrew
+              the sheet could not scroll its last rows out from under the bar —
+              the scroll range ended exactly where the bar began. A spacer
+              rather than a padding: the content box keeps the caller's
+              `padding`/`contentPadding` untouched on both platforms, and the
+              morph layer above still measures the content alone. */}
+          {bottomInset > 0 ? (
+            <View testID={SAFE_AREA_SPACER_TESTID} style={{ height: bottomInset }} />
+          ) : null}
         </StyledView>
       </Context.Provider>
     </BottomSheet>
   );
 }
 
+/** Test handle for the bottom safe-area spacer. */
+const SAFE_AREA_SPACER_TESTID = 'dialog-sheet-safe-area';
+
 /** Passes a bounded height down to a `scrollable={false}` body. */
 const FILL_BOUNDED = { flex: 1, minHeight: 0 } as const;
 

package/src/dialog/DialogHeader.tsx

@@ -83,6 +83,52 @@ const HEADER_H_PADDING = 20;
 /** Circular icon-button diameter for the default back / close affordances. */
 const NAV_BUTTON_SIZE = 36;
 
+/** The large title's line box (px) — `styles.largeTitle.lineHeight`. */
+const LARGE_TITLE_LINE_HEIGHT = 38;
+
+/**
+ * Content top inset (px) for an INLINE-CLOSE header (see {@link isInlineCloseHeader}):
+ * the large title's first line is centred on the nav row, level with the ✕,
+ * instead of starting below the whole bar.
+ */
+export const DIALOG_HEADER_INLINE_CONTENT_TOP = (DIALOG_NAV_BAR_HEIGHT - LARGE_TITLE_LINE_HEIGHT) / 2;
+
+/**
+ * Space (px) the large title's first line keeps clear at its trailing edge for
+ * the ✕ it shares a row with: the nav row's gutter + the button + an 8px gap,
+ * less the title block's own gutter.
+ */
+const INLINE_CLOSE_TITLE_RESERVE = HEADER_H_PADDING - 4 + NAV_BUTTON_SIZE + 8 - HEADER_H_PADDING;
+
+/** Scroll distance (px) over which the bar's scrim fades in on an inline-close header. */
+const INLINE_SCRIM_FADE_DISTANCE = 16;
+
+/**
+ * Whether a large-title header puts its title IN the nav row, beside the ✕,
+ * rather than in a band below the bar.
+ *
+ * The nav row exists for its controls. When it would hold nothing but the
+ * default close — no back, no leading slot, no trailing actions, no custom
+ * trailing node — a full 72px row above the title is an empty band on every
+ * entry view of a flow (an account dialog's first screen, a one-page sheet).
+ * The title then starts level with the ✕ and wraps before it; the bar's scrim
+ * and the small collapsed title still arrive once the title scrolls under it.
+ *
+ * Anything that gives the row content of its own keeps the stacked layout: a
+ * back button (the title would sit between two buttons), rich trailing actions
+ * or a custom `right` (unknown width), a branded `titleContent` (no large title
+ * at all), and `tone: 'onImage'` (the scrim is what makes the chrome legible
+ * over media, so it cannot start hidden).
+ */
+export function isInlineCloseHeader(config: DialogHeaderConfig): boolean {
+  const hasLargeTitle = !config.titleContent && (config.largeTitle ?? true) && !!config.title;
+  if (!hasLargeTitle) return false;
+  if (config.tone === 'onImage') return false;
+  if (config.left || config.onBack || config.right) return false;
+  if (config.actions?.length || config.primaryAction) return false;
+  return true;
+}
+
 /**
  * Trailing icon `actions` shown inline before they collapse into a "more"
  * overflow menu (Material overflow pattern). Kept small so the nav row never
@@ -473,6 +519,17 @@ export const DialogNavHeader = memo(function DialogNavHeader({
   // 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;
+  // The large title shares the nav row with the ✕ at rest (`isInlineCloseHeader`),
+  // so the scrim — opaque at the top — must not paint over it until content
+  // actually scrolls under the bar. Only a collapsing bar has an in-content title.
+  const inlineClose = collapse && isInlineCloseHeader(config);
+
+  const scrimStyle = useAnimatedStyle(() => {
+    if (!inlineClose) return { opacity: 1 };
+    return {
+      opacity: interpolate(scrollY.value, [0, INLINE_SCRIM_FADE_DISTANCE], [0, 1], Extrapolation.CLAMP),
+    };
+  }, [scrollY, inlineClose]);
 
   const titleStyle = useAnimatedStyle(() => {
     // When there is no large title to collapse under, the bar title is always
@@ -548,14 +605,23 @@ export const DialogNavHeader = memo(function DialogNavHeader({
       {/* Opaque (surface bg) at the top → transparent at the bottom, so scrolled
           content fades out under the bar. `onImage` swaps to a dark scrim so the
           chrome reads over media. Pure NativeWind — no SVG dependency. */}
-      <View
-        className={
-          onImage
-            ? 'bg-gradient-to-b from-black/60 to-transparent'
-            : 'bg-gradient-to-b from-bg to-transparent'
-        }
-        style={[StyleSheet.absoluteFill, { height: DIALOG_HEADER_OVERLAY_HEIGHT, pointerEvents: 'none' }]}
-      />
+      <Animated.View
+        testID="dialog-nav-scrim"
+        style={[
+          StyleSheet.absoluteFill,
+          { height: DIALOG_HEADER_OVERLAY_HEIGHT, pointerEvents: 'none' },
+          scrimStyle,
+        ]}
+      >
+        <View
+          className={
+            onImage
+              ? 'bg-gradient-to-b from-black/60 to-transparent'
+              : 'bg-gradient-to-b from-bg to-transparent'
+          }
+          style={StyleSheet.absoluteFill}
+        />
+      </Animated.View>
       <View pointerEvents="box-none" style={styles.navRow}>
         <View style={styles.side}>{left}</View>
         <Animated.View
@@ -625,14 +691,31 @@ export const DialogLargeTitle = memo(function DialogLargeTitle({
     return onImage ? null : <View style={{ height: DIALOG_NAV_BAR_HEIGHT }} />;
   }
 
+  // Title level with the ✕ when the nav row would hold nothing else.
+  const inlineClose = isInlineCloseHeader(config);
+
   return (
     <>
-      {/* Clear the whole gradient overlay so the block starts below the bar. */}
-      <View style={{ height: DIALOG_HEADER_CONTENT_TOP }} />
+      {/* Clear the whole gradient overlay so the block starts below the bar —
+          or, inline with the ✕, just centre the first line on the nav row. */}
+      <View
+        testID="dialog-large-title-inset"
+        style={{ height: inlineClose ? DIALOG_HEADER_INLINE_CONTENT_TOP : DIALOG_HEADER_CONTENT_TOP }}
+      />
       <View onLayout={onLayout} testID="dialog-large-title" style={styles.largeTitleBlock}>
         {hasLargeTitle ? (
           <>
-            <H1 style={[styles.largeTitle, { color: onImage ? ON_IMAGE_TEXT : theme.colors.text }]}>
+            <H1
+              style={[
+                styles.largeTitle,
+                { color: onImage ? ON_IMAGE_TEXT : theme.colors.text },
+                // Wrap before the ✕ it shares the row with. A logical inset, so
+                // it follows the ✕ to the left edge in a right-to-left layout.
+                inlineClose && config.showClose !== false
+                  ? { marginInlineEnd: INLINE_CLOSE_TITLE_RESERVE }
+                  : null,
+              ]}
+            >
               {config.title}
             </H1>
             {config.subtitle ? (