@oxy.so/bloom 5.3.0 → 5.4.0

package/src/app-shell/AppShellSplit.tsx

@@ -19,28 +19,13 @@ import { ScrollView, View } from 'react-native';
 
 import { AiChatResizeHandle } from '../ai-chat/AiChatResizeHandle';
 import { Z_INDEX } from '../styles/z-index';
+import { space } from '../styles/tokens';
 import { useTheme } from '../theme/use-theme';
+import { useMessages } from '../locale/messages';
+import { APP_SHELL_MESSAGES } from './messages';
 
-export interface AppShellSplitPanesProps {
-  list?: React.ReactNode;
-  detail?: React.ReactNode;
-  info?: React.ReactNode;
-  /** Which panes have room right now. */
-  showList: boolean;
-  showDetail: boolean;
-  showInfo: boolean;
-  /** The list pane's resting width; a drag moves it within min/max. */
-  listWidth: number;
-  listMinWidth: number;
-  listMaxWidth: number;
-  onListWidthChange?: (width: number) => void;
-  infoWidth: number;
-  resizable: boolean;
-  /** The shell wraps each pane in its own `ScrollView` unless the page owns one. */
-  paneScroll: boolean;
-  resizeLabel: string;
-  testID?: string;
-}
+import type { AppShellSplitPanesProps } from './types';
+import { APP_SHELL_DEFAULTS as D } from './constants';
 
 /** One pane: a bounded column that scrolls its own overflow. */
 function Pane({
@@ -68,23 +53,26 @@ function Pane({
 }
 
 const AppShellSplitPanesComponent: React.FC<AppShellSplitPanesProps> = ({
+  variant = 'joined',
   list,
   detail,
   info,
-  showList,
-  showDetail,
-  showInfo,
-  listWidth,
-  listMinWidth,
-  listMaxWidth,
+  showList = list != null,
+  showDetail = true,
+  showInfo = info != null,
+  listWidth = D.listWidth,
+  listMinWidth = D.listMinWidth,
+  listMaxWidth = D.listMaxWidth,
   onListWidthChange,
-  infoWidth,
-  resizable,
-  paneScroll,
-  resizeLabel,
+  infoWidth = D.infoWidth,
+  resizable = true,
+  paneScroll = true,
+  resizeLabel: resizeLabelProp,
   testID,
 }) => {
   const theme = useTheme();
+  const { messages } = useMessages(APP_SHELL_MESSAGES);
+  const resizeLabel = resizeLabelProp ?? messages.resizePanes;
   const [width, setWidth] = useState(listWidth);
   const widthAtDragStart = useRef(listWidth);
 
@@ -116,11 +104,13 @@ const AppShellSplitPanesComponent: React.FC<AppShellSplitPanesProps> = ({
    * hit test at the divider's centre returned the pane, and the drag never
    * started. Raising the DIVIDER lifts the whole context over both panes.
    */
+  const separated = variant === 'separated';
   const divider = {
-    width: 1,
+    width: separated ? space.md : 1,
+    flexShrink: 0,
     alignSelf: 'stretch' as const,
     zIndex: Z_INDEX.floating,
-    backgroundColor: theme.colors.border,
+    backgroundColor: separated ? 'transparent' : theme.colors.border,
   };
   // Only the panes that are actually drawn count: alone, a pane fills the row.
   const solo = [showList, showDetail, showInfo].filter(Boolean).length === 1;
@@ -137,15 +127,21 @@ const AppShellSplitPanesComponent: React.FC<AppShellSplitPanesProps> = ({
         </Pane>
       ) : null}
       {showList && !solo ? (
-        <View style={divider}>
+        <View style={divider} testID={testID ? `${testID}-list-gap` : undefined}>
           {resizable ? (
-            <AiChatResizeHandle
-              label={resizeLabel}
-              onResizeStart={onResizeStart}
-              onResize={onResize}
-              onNudge={onNudge}
-              testID={testID ? `${testID}-divider` : undefined}
-            />
+            <View
+              pointerEvents="box-none"
+              testID={testID ? `${testID}-resize-anchor` : undefined}
+              style={separated ? { position: 'absolute', top: 0, bottom: 0, left: '50%', right: '50%', width: 0 } : { flex: 1 }}
+            >
+              <AiChatResizeHandle
+                label={resizeLabel}
+                onResizeStart={onResizeStart}
+                onResize={onResize}
+                onNudge={onNudge}
+                testID={testID ? `${testID}-divider` : undefined}
+              />
+            </View>
           ) : null}
         </View>
       ) : null}
@@ -158,7 +154,7 @@ const AppShellSplitPanesComponent: React.FC<AppShellSplitPanesProps> = ({
           {detail}
         </Pane>
       ) : null}
-      {showInfo && !solo ? <View style={divider} /> : null}
+      {showInfo && showDetail && !solo ? <View style={divider} testID={testID ? `${testID}-info-gap` : undefined} /> : null}
       {showInfo ? (
         <Pane
           testID={testID ? `${testID}-pane-info` : undefined}

package/src/app-shell/index.ts

@@ -27,3 +27,6 @@ export type {
   NotificationBellProps,
   ProOfferCardProps,
 } from './types';
+
+export { AppShellSplitPanes } from './AppShellSplit';
+export type { AppShellSplitPanesProps } from './types';

package/src/app-shell/index.web.ts

@@ -32,3 +32,6 @@ export type {
   NotificationBellProps,
   ProOfferCardProps,
 } from './types';
+
+export { AppShellSplitPanes } from './AppShellSplit';
+export type { AppShellSplitPanesProps } from './types';

package/src/app-shell/types.ts

@@ -375,3 +375,33 @@ export interface AppShellNavigationProps {
 export type AppShellProps = Omit<AppShellEngineProps, 'scroll'> & AppShellNavigationProps & {
   scroll?: AppShellScroll | 'auto' | 'external';
 };
+
+
+/** A bounded list/detail/info layout, independent of navigation or surfaces. */
+export interface AppShellSplitPanesProps {
+  /** Joined uses hairline dividers (default); separated leaves a 12px gutter for independent panel surfaces. */
+  variant?: 'joined' | 'separated';
+  list?: ReactNode;
+  detail?: ReactNode;
+  info?: ReactNode;
+  /** Defaults to whether list content was supplied. Hidden panes unmount. */
+  showList?: boolean;
+  /** Defaults to true. Keep true across breakpoints to retain routed detail state. */
+  showDetail?: boolean;
+  /** Defaults to whether info content was supplied. */
+  showInfo?: boolean;
+  /** Initial list width (360), constrained by listMinWidth/listMaxWidth (280/520). */
+  listWidth?: number;
+  listMinWidth?: number;
+  listMaxWidth?: number;
+  onListWidthChange?: (width: number) => void;
+  /** Info column width, defaults to 320. */
+  infoWidth?: number;
+  /** Show the shared draggable/keyboard divider, defaults to true. */
+  resizable?: boolean;
+  /** Wrap each pane in a ScrollView (default true); false for a navigator or virtual list. */
+  paneScroll?: boolean;
+  /** Accessible divider name, defaults to "Resize panes". */
+  resizeLabel?: string;
+  testID?: string;
+}

package/src/icons/remix/RiFormatClear.tsx

@@ -0,0 +1,6 @@
+import { createSinglePathSVG } from '../TEMPLATE';
+
+/** Remix Icon `format-clear` (Editor). */
+export const RiFormatClear = createSinglePathSVG({
+  path: "M12.6512 14.0654L11.6047 20H9.57389L10.9247 12.339L3.51465 4.92892L4.92886 3.51471L20.4852 19.0711L19.071 20.4853L12.6512 14.0654ZM11.7727 7.53009L12.0425 5.99999H10.2426L8.24257 3.99999H19.9999V5.99999H14.0733L13.4991 9.25652L11.7727 7.53009Z",
+});

package/src/icons/remix/RiListOrdered.tsx

@@ -0,0 +1,6 @@
+import { createSinglePathSVG } from '../TEMPLATE';
+
+/** Remix Icon `list-ordered` (Editor). */
+export const RiListOrdered = createSinglePathSVG({
+  path: "M8 4H21V6H8V4ZM5 3V6H6V7H3V6H4V4H3V3H5ZM3 14V11.5H5V11H3V10H6V12.5H4V13H6V14H3ZM5 19.5H3V18.5H5V18H3V17H6V21H3V20H5V19.5ZM8 11H21V13H8V11ZM8 18H21V20H8V18Z",
+});

package/src/icons/remix/RiStrikethrough.tsx

@@ -0,0 +1,6 @@
+import { createSinglePathSVG } from '../TEMPLATE';
+
+/** Remix Icon `strikethrough` (Editor). */
+export const RiStrikethrough = createSinglePathSVG({
+  path: "M17.1538 14C17.3846 14.5161 17.5 15.0893 17.5 15.7196C17.5 17.0625 16.9762 18.1116 15.9286 18.867C14.8809 19.6223 13.4335 20 11.5862 20C9.94674 20 8.32335 19.6185 6.71592 18.8555V16.6009C8.23538 17.4783 9.7908 17.917 11.3822 17.917C13.9333 17.917 15.2128 17.1846 15.2208 15.7196C15.2208 15.0939 15.0049 14.5598 14.5731 14.1173C14.5339 14.0772 14.4939 14.0381 14.4531 14H3V12H21V14H17.1538ZM13.076 11H7.62908C7.4566 10.8433 7.29616 10.6692 7.14776 10.4778C6.71592 9.92084 6.5 9.24559 6.5 8.45207C6.5 7.21602 6.96583 6.165 7.89749 5.299C8.82916 4.43299 10.2706 4 12.2219 4C13.6934 4 15.1009 4.32808 16.4444 4.98426V7.13591C15.2448 6.44921 13.9293 6.10587 12.4978 6.10587C10.0187 6.10587 8.77917 6.88793 8.77917 8.45207C8.77917 8.87172 8.99709 9.23796 9.43293 9.55079C9.86878 9.86362 10.4066 10.1135 11.0463 10.3004C11.6665 10.4816 12.3431 10.7148 13.076 11H13.076Z",
+});

package/src/icons/remix/RiUnderline.tsx

@@ -0,0 +1,6 @@
+import { createSinglePathSVG } from '../TEMPLATE';
+
+/** Remix Icon `underline` (Editor). */
+export const RiUnderline = createSinglePathSVG({
+  path: "M8 3V12C8 14.2091 9.79086 16 12 16C14.2091 16 16 14.2091 16 12V3H18V12C18 15.3137 15.3137 18 12 18C8.68629 18 6 15.3137 6 12V3H8ZM4 20H20V22H4V20Z",
+});

package/src/icons/remix/index.ts

@@ -197,6 +197,7 @@ export { RiFolderOpenLine } from './RiFolderOpenLine';
 export { RiFontSize } from './RiFontSize';
 export { RiFontSize2 } from './RiFontSize2';
 export { RiForbidLine } from './RiForbidLine';
+export { RiFormatClear } from './RiFormatClear';
 export { RiForward10Line } from './RiForward10Line';
 export { RiForward15Line } from './RiForward15Line';
 export { RiForward30Line } from './RiForward30Line';
@@ -259,6 +260,7 @@ export { RiLink } from './RiLink';
 export { RiLinkM } from './RiLinkM';
 export { RiLinkedinBoxFill } from './RiLinkedinBoxFill';
 export { RiListCheck3 } from './RiListCheck3';
+export { RiListOrdered } from './RiListOrdered';
 export { RiListUnordered } from './RiListUnordered';
 export { RiListView } from './RiListView';
 export { RiLiveLine } from './RiLiveLine';
@@ -417,6 +419,7 @@ export { RiStethoscopeLine } from './RiStethoscopeLine';
 export { RiStockLine } from './RiStockLine';
 export { RiStopFill } from './RiStopFill';
 export { RiStore2Line } from './RiStore2Line';
+export { RiStrikethrough } from './RiStrikethrough';
 export { RiSubtractLine } from './RiSubtractLine';
 export { RiSubwayLine } from './RiSubwayLine';
 export { RiSuitcaseLine } from './RiSuitcaseLine';
@@ -446,6 +449,7 @@ export { RiTreeLine } from './RiTreeLine';
 export { RiTv2Line } from './RiTv2Line';
 export { RiTvLine } from './RiTvLine';
 export { RiTwitterXFill } from './RiTwitterXFill';
+export { RiUnderline } from './RiUnderline';
 export { RiUnpinLine } from './RiUnpinLine';
 export { RiUpload2Line } from './RiUpload2Line';
 export { RiUploadCloud2Line } from './RiUploadCloud2Line';

package/src/mail-list/MailList.tsx

@@ -54,6 +54,7 @@ function MailListComponent({
   sections,
   mails,
   density = 'comfortable',
+  showAvatar = true,
   selectedId,
   checkedIds,
   onCheckedIdsChange,
@@ -166,6 +167,7 @@ function MailListComponent({
               actionsPlacement={mail.actionsPlacement ?? actionsPlacement}
               swipeEnabled={mail.swipeEnabled ?? swipeEnabled}
               density={density}
+              showAvatar={mail.showAvatar ?? showAvatar}
               strings={mail.strings ?? strings}
               selected={selectedId === id}
               checked={checked.has(id)}

package/src/mail-list/MailRow.tsx

@@ -41,26 +41,11 @@ import type { MailAction, MailRowProps } from './types';
 /**
  * One message thread in the inbox.
  *
- *   comfortable  72 tall · 16 padding · 48 avatar · sender and time on the
- *                first line, subject and snippet on the second, the star on
- *                the right where it is a control
- *   compact      40 tall · 12 padding · 24 avatar · sender, then subject and
- *                snippet on ONE baseline, then the states and the time
+ * Compact uses one baseline; comfortable and cozy stack sender above subject
+ * and snippet. All three share a geometry table, content, paint and actions.
  *
- * ONE component, two rungs of a geometry table. There is no second row
- * component for the desktop: everything a compact row draws, a comfortable row
- * draws too, and a density that forked into two files is a density that drifts.
- *
- * TWO LINES, NOT THREE, AND NOTHING DRAWN AT REST THAT IS NOT INFORMATION.
- * The phone row is the same 72/48 as a conversation row, so an inbox and a
- * messages screen read as one library. What paid for the third line: the
- * subject and the snippet share line two, the labels collapse to a chip and
- * dots, and the star is drawn only where it is a control.
- *
- * THE SUBJECT AND THE SNIPPET ARE ONE `Text`, at both densities. Two
- * neighbouring flex children each want to be as wide as their content, and the
- * result of a long one is a row that pushes sideways or a subject clipped to
- * nothing. One string with a nested span truncates where the line ends.
+ * The subject and snippet share ONE Text at every density, so a long snippet
+ * cannot claim its own flex width and push the subject out of the row.
  *
  * UNREAD IS THE WHOLE ROW, NOT A DOT. The sender and the subject go semibold
  * and every rung of text moves up to the primary colour; a read row sits on the
@@ -97,6 +82,7 @@ function MailRowComponent({
   checked = false,
   onCheckedChange,
   density = 'comfortable',
+  showAvatar = true,
   onPress,
   onLongPress,
   href,
@@ -210,6 +196,7 @@ function MailRowComponent({
 
   const paperclip = hasAttachment ? (
     <View
+      pointerEvents="none"
       aria-hidden
       importantForAccessibility="no-hide-descendants"
       style={{ flexShrink: 0 }}
@@ -222,6 +209,7 @@ function MailRowComponent({
   const threadBadge =
     (threadCount ?? 0) > 1 ? (
       <View
+        pointerEvents="none"
         aria-hidden
         importantForAccessibility="no-hide-descendants"
         style={{ flexShrink: 0 }}
@@ -233,20 +221,22 @@ function MailRowComponent({
 
   const timeText =
     time === undefined ? null : (
-      <Text
-        variant={geo.timeVariant}
-        numberOfLines={1}
-        style={{ color: timeColor, flexShrink: 0 }}
-        testID={testID ? `${testID}-time` : undefined}
-      >
-        {time}
-      </Text>
+      <View pointerEvents="none" style={{ flexShrink: 0 }}>
+        <Text
+          variant={geo.timeVariant}
+          numberOfLines={1}
+          style={{ color: timeColor, flexShrink: 0 }}
+          testID={testID ? `${testID}-time` : undefined}
+        >
+          {time}
+        </Text>
+      </View>
     );
 
   // --- the leading slot: a checkbox when the list can multi-select ----------
   const leading =
     onCheckedChange !== undefined ? (
-      <View style={{ width: geo.avatar, alignItems: 'center', flexShrink: 0 }}>
+      <View pointerEvents="box-none" style={{ width: geo.avatar, alignItems: 'center', flexShrink: 0 }}>
         <Checkbox
           checked={checked}
           onCheckedChange={onCheckedChange}
@@ -255,7 +245,7 @@ function MailRowComponent({
           testID={testID ? `${testID}-checkbox` : undefined}
         />
       </View>
-    ) : (
+    ) : showAvatar ? (
       <View
         pointerEvents="none"
         aria-hidden
@@ -269,7 +259,7 @@ function MailRowComponent({
           testID={testID ? `${testID}-avatar` : undefined}
         />
       </View>
-    );
+    ) : null;
 
   // --- the text column -----------------------------------------------------
   const column = compact ? (
@@ -283,7 +273,7 @@ function MailRowComponent({
         flexDirection: 'row',
         alignItems: 'center',
         gap: geo.gap,
-        marginLeft: geo.gap,
+        marginLeft: leading === null ? 0 : geo.gap,
       }}
     >
       <Text
@@ -318,7 +308,7 @@ function MailRowComponent({
       pointerEvents="none"
       aria-hidden
       importantForAccessibility="no-hide-descendants"
-      style={{ flex: 1, minWidth: 0, marginLeft: geo.gap, gap: geo.lineGap }}
+      style={{ flex: 1, minWidth: 0, marginLeft: leading === null ? 0 : geo.gap, gap: geo.lineGap }}
     >
       <View style={{ flexDirection: 'row', alignItems: 'center', gap: 6, minWidth: 0 }}>
         <Text
@@ -374,7 +364,7 @@ function MailRowComponent({
   // and every star press would open the thread. Everything else in here is
   // hidden from assistive technology; the row's composed name already says it.
   const states = paperclip || threadBadge || onStarredChange !== undefined ? (
-    <View style={{ flexDirection: 'row', alignItems: 'center', gap: 4 }}>
+    <View pointerEvents="box-none" style={{ flexDirection: 'row', alignItems: 'center', gap: 4 }}>
       {paperclip}
       {threadBadge}
       {onStarredChange === undefined ? (starred ? star : null) : star}
@@ -447,6 +437,7 @@ function MailRowComponent({
         testID={testID ? `${testID}-link` : undefined}
       />
       <View
+        pointerEvents="box-none"
         style={{
           flexDirection: 'row',
           alignItems: 'center',

package/src/mail-list/shared.ts

@@ -1,5 +1,7 @@
 import { Platform } from 'react-native';
 
+import { space } from '../styles/tokens';
+
 import { RiInbox2Line } from '../icons/remix/RiInbox2Line';
 import { formatGregorian } from '../locale/format-date';
 import { pickMessages } from '../locale/messages';
@@ -31,7 +33,7 @@ export const IS_WEB = Platform.OS === 'web';
 export const MAIL_EMPTY_ICON = RiInbox2Line;
 
 // ---------------------------------------------------------------------------
-//  Geometry — the whole difference between the two densities
+//  Geometry — the whole difference between the densities
 // ---------------------------------------------------------------------------
 
 export interface MailRowGeometry {
@@ -85,15 +87,8 @@ export interface MailRowGeometry {
 }
 
 /**
- * 64 tall with two lines on a phone, 40 tall with one on a desktop. The avatar
- * is centred in both, so a row with no snippet is the same height as one with a
- * snippet and a label.
- *
- * The phone rung is the same 72/48 as a `chat-list` row on purpose: a mail row
- * and a conversation row are the same kind of object, and an inbox that stands
- * 16px taller per row than the messages screen reads as a different library.
- * Two lines is what pays for it — the sender and the time share the first, the
- * subject and the snippet the second.
+ * Two stacked lines at comfortable/cozy, one baseline at compact. Stacked rows
+ * grow with their content; cozy gives the same facts more breathing room.
  */
 export const MAIL_ROW_GEOMETRY: Record<MailDensity, MailRowGeometry> = {
   comfortable: {
@@ -121,6 +116,27 @@ export const MAIL_ROW_GEOMETRY: Record<MailDensity, MailRowGeometry> = {
     actionGlyph: 18,
     starControl: 24,
   },
+  cozy: {
+    minHeight: 80,
+    paddingVertical: space.lg,
+    paddingHorizontal: space.lg,
+    avatar: 48,
+    gap: space.md,
+    lineGap: space._2xs,
+    glyph: space.lg,
+    senderWidth: 0,
+    senderMinWidth: 0,
+    senderMaxWidth: '100%',
+    senderVariant: 'headline-regular',
+    senderUnreadVariant: 'headline-semibold',
+    subjectVariant: 'body-regular',
+    subjectUnreadVariant: 'body-semibold',
+    snippetVariant: 'body-regular',
+    timeVariant: 'caption-1-regular',
+    action: 44,
+    actionGlyph: 18,
+    starControl: space._2xl,
+  },
   compact: {
     minHeight: 40,
     height: 40,
@@ -164,6 +180,7 @@ export const MAIL_LABEL_DOT = 8;
 /** The selection bar's height, per density. */
 export const MAIL_SELECTION_BAR_HEIGHT: Record<MailDensity, number> = {
   comfortable: 56,
+  cozy: 56,
   compact: 44,
 };
 

package/src/mail-list/types.ts

@@ -5,13 +5,11 @@ import type { BloomIconComponent } from '../icons/icon-component';
 import type { AccentTone } from '../theme/accent-colors';
 
 /**
- * The two rungs of ONE row, not two components.
- *
- * `comfortable` is the phone inbox: avatar, three lines, 88 tall. `compact` is
- * the desktop list: one line, 40 tall, the same facts on a single baseline.
- * Nothing but the geometry table changes between them.
+ * One row at three densities: compact is a single 40px baseline, comfortable
+ * stacks two lines at a 64px floor, cozy keeps those lines with an 80px floor
+ * and a larger avatar and insets. All share the same content and actions.
  */
-export type MailDensity = 'comfortable' | 'compact';
+export type MailDensity = 'comfortable' | 'cozy' | 'compact';
 
 /** Who a message is from, as a row draws them. */
 export interface MailSender {
@@ -154,6 +152,8 @@ export interface MailRowProps {
    */
   checked?: boolean;
   onCheckedChange?: (checked: boolean) => void;
+  /** Show sender avatars. Selection checkboxes remain visible when enabled. */
+  showAvatar?: boolean;
   density?: MailDensity;
   onPress?: () => void;
   onLongPress?: () => void;
@@ -203,6 +203,8 @@ export interface MailListProps {
   sections?: readonly MailListSection[];
   /** One unlabelled run, for a list that is not bucketed. */
   mails?: readonly MailSummary[];
+  /** Show sender avatars. Selection checkboxes remain visible when enabled. */
+  showAvatar?: boolean;
   density?: MailDensity;
   /** The row the reading pane is showing. */
   selectedId?: string;

package/src/settings-modal/SettingsModal.tsx

@@ -25,6 +25,7 @@ import { PageHeader } from '../page-header';
 import { ButtonGroup, ButtonGroupItem } from '../button-group';
 import { RiCloseLine } from '../icons/remix/RiCloseLine';
 import { Backdrop, OverlayRoot } from '../overlay';
+import { ModalKeyboard } from '../overlay/ModalKeyboard';
 import type { WebCssStyle } from '../styles/web-view-style';
 import { webDataSet } from '../styles/web-data';
 import { Text } from '../typography';
@@ -139,6 +140,7 @@ export function SettingsModal({
   labels,
   testID,
 }: SettingsModalProps) {
+  const panelRef = useRef<View>(null);
   const common = useCommonMessages();
   const { messages } = useMessages(SETTINGS_MODAL_MESSAGES);
   useSettingsWebCss();
@@ -253,21 +255,6 @@ export function SettingsModal({
     if (mayLeave('navigation')) setCompactPageOpen(false);
   }, [mayLeave]);
 
-  // Escape closes (web). On `window`, not `document`: a menu or popover opened
-  // inside the modal handles Escape on `document` and stops propagation there,
-  // so the innermost surface closes first and the modal stays open.
-  useEffect(() => {
-    if (!mounted || !IS_WEB || typeof window === 'undefined') return;
-    const handler = (event: KeyboardEvent) => {
-      if (event.key === 'Escape') {
-        event.stopPropagation();
-        requestClose();
-      }
-    };
-    window.addEventListener('keydown', handler);
-    return () => window.removeEventListener('keydown', handler);
-  }, [mounted, requestClose]);
-
   const compactPageOpenRef = useRef(false);
   compactPageOpenRef.current = compactPageOpen && layoutRef.current === 'compact';
 
@@ -355,6 +342,14 @@ export function SettingsModal({
     <ModalPortal>
       <SettingsModalContext.Provider value={context}>
         <OverlayRoot onRequestClose={onHardwareBack} modal>
+          {IS_WEB ? (
+            <ModalKeyboard
+              panelRef={panelRef}
+              closing={!visible && wasVisible.current}
+              dismissible
+              dismiss={requestClose}
+            />
+          ) : null}
           <Backdrop
             onPress={requestClose}
             progress={progress}
@@ -377,6 +372,8 @@ export function SettingsModal({
                 ]}
               >
                 <View
+                  ref={panelRef}
+                  tabIndex={IS_WEB ? -1 : undefined}
                   role="dialog"
                   aria-modal
                   aria-label={labels?.dialog ?? messages.dialog}