@oxy.so/bloom 4.14.1 → 4.16.0

package/src/app-shell/AppShellEngine.tsx

@@ -13,6 +13,7 @@ import Animated, {
 import type { ContentPanelProps } from '../content-panel/types';
 import type { BloomColorScopeProps } from '../theme/color-scope/ColorScope';
 import { useControllableState } from '../hooks/use-controllable-state';
+import { useDirectionProps, useIsRtl } from '../hooks/use-is-rtl';
 import { Backdrop, OverlayRoot } from '../overlay';
 import { Portal } from '../portal';
 import { Sidebar } from '../sidebar';
@@ -39,11 +40,11 @@ import { useShellWidth } from './use-shell-width';
  *   nav        the sidebar in flow from `navFrom` (`lg` for the panel, `sm` for
  *              a rail, `sm` whenever `navExpandedFrom` swaps the two); below it
  *              the same props drive the drawer. `overlay` pads the whole frame
- *              by `gutter`, `reveal` sits the rail 12 from the top-left
+ *              by `gutter`, `reveal` sits the rail 12 from the top-start corner
  *   page       `dashboard` one fluid column capped at `contentMaxWidth`;
  *              `feed`/`focus` a `contentWidth` reading column centred in what
  *              the nav leaves; `split` a column of header over three panes
- *   aside      optional right column, `asideWidth` (320) wide from `asideFrom`
+ *   aside      optional end-side column (right in LTR), `asideWidth` (320) wide from `asideFrom`
  *              (xl), pinned like the rail; below it stacked after the content
  *   slots      `topBar` above the columns, `bottomBar` pinned to the bottom
  *              with the safe-area inset, `floatingAction` above that bar —
@@ -51,7 +52,7 @@ import { useShellWidth } from './use-shell-width';
  *   below nav  the header grows a hamburger (also with no title — see
  *              `useAppShell` / `AppShellMenuButton`). `overlay` opens the rail
  *              as a drawer (12 inset) over a 40% black backdrop; `reveal`
- *              slides the page 272 right and rounds it to 32 while the rail,
+ *              slides the page 272 toward the end edge and rounds it to 32 while the rail,
  *              flat beneath it, scales up from 0.94 and fades in (325ms,
  *              cubic-bezier(0.42, 0, 0.58, 1)); pressing the page (a 10% black
  *              / 5% white veil) closes it
@@ -148,6 +149,8 @@ const AppShellComponent: React.FC<AppShellEngineProps> = ({
   overlay,
   drawerOpen,
   onDrawerOpenChange,
+  drawerOpenLabel = 'Open navigation',
+  drawerCloseLabel = 'Close navigation',
   scroll = 'document',
   style,
   testID,
@@ -204,6 +207,15 @@ const AppShellComponent: React.FC<AppShellEngineProps> = ({
   const asideStacked = hasAside && !asideBeside && asideCollapse === 'stack' && !canvas;
 
   const reducedMotion = useReducedMotion();
+  // Insets here are logical; a `translateX` sign and a `transformOrigin` are
+  // not, so the reveal reads the direction once here.
+  const rtl = useIsRtl();
+  const dir = rtl ? -1 : 1;
+  const railOrigin = rtl ? 'right center' : 'left center';
+  // react-native-web resolves logical insets against its OWN direction context
+  // (a `dir` prop), not `<html dir>` — every root and the portaled drawer hand
+  // it on.
+  const dirProps = useDirectionProps();
   const [open, setOpen] = useControllableState<boolean>({
     value: drawerOpen,
     defaultValue: false,
@@ -337,6 +349,7 @@ const AppShellComponent: React.FC<AppShellEngineProps> = ({
           actions={actions}
           menuOpen={isOpen}
           showMenu={menuInHeader}
+          menuLabel={drawerOpenLabel}
           onMenuPress={menuInHeader ? shell.toggleDrawer : undefined}
           testID={testID ? `${testID}-header` : undefined}
         />
@@ -387,8 +400,8 @@ const AppShellComponent: React.FC<AppShellEngineProps> = ({
     reveal.value = reducedMotion ? target : withTiming(target, { duration: REVEAL_MS, easing: REVEAL_EASE });
   }, [isOpen, drawerStyle, reducedMotion, reveal]);
   const feedPageStyle = useAnimatedStyle(() => ({
-    transform: reveal.value === 0 ? [] : [{ translateX: (REVEAL_OFFSET + 12) * reveal.value }],
-  }), [reveal]);
+    transform: reveal.value === 0 ? [] : [{ translateX: dir * (REVEAL_OFFSET + 12) * reveal.value }],
+  }), [reveal, dir]);
 
   const feedChromeTransition: WebCssStyle = Platform.OS === 'web'
     ? { '--bloom-panel-inset-duration': reducedMotion ? '0ms' : `${REVEAL_MS}ms` } : {};
@@ -407,8 +420,8 @@ const AppShellComponent: React.FC<AppShellEngineProps> = ({
     [reveal],
   );
   const pageStyle = useAnimatedStyle(
-    () => ({ transform: reveal.value === 0 ? [] : [{ translateX: REVEAL_OFFSET * reveal.value }], borderRadius: 32 * reveal.value }),
-    [reveal],
+    () => ({ transform: reveal.value === 0 ? [] : [{ translateX: dir * REVEAL_OFFSET * reveal.value }], borderRadius: 32 * reveal.value }),
+    [reveal, dir],
   );
   const veilStyle = useAnimatedStyle(() => ({ opacity: reveal.value }), [reveal]);
 
@@ -416,6 +429,7 @@ const AppShellComponent: React.FC<AppShellEngineProps> = ({
     return (
       <AppShellProvider value={shell}>
         <View
+          {...dirProps}
           testID={testID}
           onLayout={onLayout}
           style={[frame, doc ? { overflow: WEB_OVERFLOW_CLIP } : null, { flexDirection: 'row', backgroundColor: background }, style]}
@@ -425,7 +439,7 @@ const AppShellComponent: React.FC<AppShellEngineProps> = ({
               style={[
                 flowSidebar.surface === 'docked'
                   ? { flexShrink: 0 }
-                  : { paddingTop: 12, paddingBottom: 12, paddingLeft: 12, flexShrink: 0 },
+                  : { paddingTop: 12, paddingBottom: 12, paddingInlineStart: 12, flexShrink: 0 },
                 doc ? stickyRail(0) : null,
               ]}
             >
@@ -438,9 +452,9 @@ const AppShellComponent: React.FC<AppShellEngineProps> = ({
               pointerEvents={isOpen ? 'auto' : 'none'}
               // Fixed on web in document mode: the rail waits beneath the VIEWPORT,
               // wherever the page is scrolled to.
-              style={{ position: doc ? WEB_POSITION_FIXED : 'absolute', top: 0, bottom: 0, left: 0, width: 272, paddingTop: 12, paddingBottom: 12, paddingLeft: 6 }}
+              style={{ position: doc ? WEB_POSITION_FIXED : 'absolute', top: 0, bottom: 0, insetInlineStart: 0, width: 272, paddingTop: 12, paddingBottom: 12, paddingInlineStart: 6 }}
             >
-              <Animated.View style={[{ height: '100%', width: 260, transformOrigin: 'left center' }, railStyle]}>
+              <Animated.View style={[{ height: '100%', width: 260, transformOrigin: railOrigin }, railStyle]}>
                 <Sidebar {...drawerSidebar} mobile surface="plain" onClose={() => setOpen(false)} />
               </Animated.View>
             </View>
@@ -473,7 +487,7 @@ const AppShellComponent: React.FC<AppShellEngineProps> = ({
             >
               {column}
             </Scroller>
-            {asideColumn({ paddingTop: small ? 24 : 12, paddingBottom: 12, paddingRight: 12 })}
+            {asideColumn({ paddingTop: small ? 24 : 12, paddingBottom: 12, paddingInlineEnd: 12 })}
             {!wide ? (
               <Animated.View
                 pointerEvents={isOpen ? 'auto' : 'none'}
@@ -481,7 +495,7 @@ const AppShellComponent: React.FC<AppShellEngineProps> = ({
               >
                 <Pressable
                   role="button"
-                  accessibilityLabel="Close navigation"
+                  accessibilityLabel={drawerCloseLabel}
                   focusable={isOpen}
                   onPress={() => setOpen(false)}
                   style={{
@@ -713,7 +727,7 @@ const AppShellComponent: React.FC<AppShellEngineProps> = ({
         {headerNode}
         <View style={{ flex: 1, minHeight: 0, minWidth: 0 }}>{children}</View>
       </View>
-      {asideColumn(canvas ? { padding: gutter, paddingLeft: 0 } : {})}
+      {asideColumn(canvas ? { paddingTop: gutter, paddingBottom: gutter, paddingInlineEnd: gutter } : {})}
     </>
   );
 
@@ -727,7 +741,7 @@ const AppShellComponent: React.FC<AppShellEngineProps> = ({
           : dashboardBody;
 
   // A DOCKED nav is flush to the window: it takes the shell's whole height and
-  // its own hairline is the separator, so the shell gives up its left and
+  // its own hairline is the separator, so the shell gives up its start and
   // vertical padding around that column rather than framing it like a card.
   const dockedNav = navInFlow && flowSidebar?.surface === 'docked';
   const navRegion =
@@ -738,7 +752,7 @@ const AppShellComponent: React.FC<AppShellEngineProps> = ({
         </View>
       ) : canvas && !dockedNav ? (
         // The canvas row has no padding of its own, so the nav states its.
-        <View style={{ padding: gutter, paddingRight: 0, flexShrink: 0 }}>
+        <View style={{ paddingTop: gutter, paddingBottom: gutter, paddingInlineStart: gutter, flexShrink: 0 }}>
           <Sidebar {...flowSidebar} />
         </View>
       ) : (
@@ -754,11 +768,12 @@ const AppShellComponent: React.FC<AppShellEngineProps> = ({
             onPress={() => setOpen(false)}
             blurIntensity={0}
             dimOpacity={0.4}
-            accessibilityLabel="Close navigation"
+            accessibilityLabel={drawerCloseLabel}
           />
           <View
+            {...dirProps}
             pointerEvents="box-none"
-            style={{ position: 'absolute', top: 0, bottom: 0, left: 0, flexDirection: 'row', padding: 12 }}
+            style={{ position: 'absolute', top: 0, bottom: 0, insetInlineStart: 0, flexDirection: 'row', padding: 12 }}
           >
             <View pointerEvents="auto" style={{ height: '100%' }}>
               <Sidebar {...drawerSidebar} mobile onClose={() => setOpen(false)} />
@@ -774,19 +789,24 @@ const AppShellComponent: React.FC<AppShellEngineProps> = ({
     gap: dockedNav || canvas ? 0 : Math.max(0, navigationGap ?? columnGap),
     // A canvas runs to the window's edge, so the row keeps no padding at all
     // and each region carries its own (the nav below, the aside in `canvasBody`).
-    padding: canvas || plainDocumentFrame ? 0 : gutter,
-    ...(dockedNav ? { paddingLeft: 0, paddingTop: 0, paddingBottom: 0 } : null),
+    // A docked nav keeps only the END padding. Spelled in longhands, never the
+    // `padding` shorthand plus a logical override: react-native-web expands the
+    // shorthand to physical sides, and which of two declarations for one edge
+    // wins is then a matter of declaration order rather than intent.
+    ...(dockedNav
+      ? { paddingTop: 0, paddingBottom: 0, paddingInlineStart: 0, paddingInlineEnd: canvas || plainDocumentFrame ? 0 : gutter }
+      : { padding: canvas || plainDocumentFrame ? 0 : gutter }),
     backgroundColor: background,
   };
 
   if (variant === 'feed' && drawerStyle === 'reveal' && drawerAvailable) {
     return (
       <AppShellProvider value={shell}>
-        <View testID={testID} onLayout={onLayout}
+        <View {...dirProps} testID={testID} onLayout={onLayout}
           style={[frame, { overflow: doc ? WEB_OVERFLOW_CLIP : 'hidden', backgroundColor: background }, style]}>
           <View aria-hidden={!isOpen} pointerEvents={isOpen ? 'auto' : 'none'}
-            style={{ position: doc ? WEB_POSITION_FIXED : 'absolute', top: 0, bottom: 0, left: 0, width: 272, paddingTop: 12, paddingBottom: 12, paddingLeft: 6 }}>
-            <Animated.View style={[{ height: '100%', width: 260, transformOrigin: 'left center' }, railStyle]}>
+            style={{ position: doc ? WEB_POSITION_FIXED : 'absolute', top: 0, bottom: 0, insetInlineStart: 0, width: 272, paddingTop: 12, paddingBottom: 12, paddingInlineStart: 6 }}>
+            <Animated.View style={[{ height: '100%', width: 260, transformOrigin: railOrigin }, railStyle]}>
               {drawerSidebar && <Sidebar {...drawerSidebar} mobile surface="plain" onClose={() => setOpen(false)} />}
             </Animated.View>
           </View>
@@ -798,7 +818,7 @@ const AppShellComponent: React.FC<AppShellEngineProps> = ({
             </StyledView>
             <Animated.View pointerEvents={isOpen ? 'auto' : 'none'}
               style={[{ position: 'absolute', top: 0, left: 0, right: 0, bottom: 0 }, veilStyle]}>
-              <Pressable role="button" accessibilityLabel="Close navigation" focusable={isOpen}
+              <Pressable role="button" accessibilityLabel={drawerCloseLabel} focusable={isOpen}
                 onPress={() => setOpen(false)} testID={testID ? `${testID}-veil` : undefined}
                 style={{ flex: 1 }} />
             </Animated.View>
@@ -823,6 +843,7 @@ const AppShellComponent: React.FC<AppShellEngineProps> = ({
     return (
       <AppShellProvider value={shell}>
         <View
+          {...dirProps}
           testID={testID}
           onLayout={onLayout}
           style={[frame, { flexDirection: 'column', backgroundColor: background }, style]}
@@ -842,7 +863,7 @@ const AppShellComponent: React.FC<AppShellEngineProps> = ({
 
   return (
     <AppShellProvider value={shell}>
-      <View testID={testID} onLayout={onLayout} style={[frame, rowStyle, style]}>
+      <View {...dirProps} testID={testID} onLayout={onLayout} style={[frame, rowStyle, style]}>
         {navRegion}
         {drawerRegion}
         {body}

package/src/app-shell/AppShellHeader.tsx

@@ -15,9 +15,9 @@ import type { AppShellHeaderProps } from './types';
  *
  *   header     column, gap 8
  *   title row  wraps, items bottom-aligned, space-between, gap 8
- *   left       gap 6: a medium icon button (hamburger, below `lg` only) and the
+ *   start      gap 6: a medium icon button (hamburger, below `lg` only) and the
  *              title — title-2-medium, px4, no wrap, text-primary
- *   actions    wrap, right-aligned, gap 10
+ *   actions    wrap, end-aligned (right in LTR, left in RTL), gap 10
  */
 const AppShellHeaderComponent: React.FC<AppShellHeaderProps> = ({
   title,
@@ -26,6 +26,7 @@ const AppShellHeaderComponent: React.FC<AppShellHeaderProps> = ({
   onMenuPress,
   menuOpen = false,
   showMenu: showMenuProp,
+  menuLabel = 'Open navigation',
   style,
   testID,
 }) => {
@@ -52,7 +53,7 @@ const AppShellHeaderComponent: React.FC<AppShellHeaderProps> = ({
       >
         <View style={{ minWidth: 0, flexDirection: 'row', alignItems: 'center', gap: 6 }}>
           {showMenu ? (
-            <Button size="md" icon={menuOpen ? RiCloseLine : RiMenuLine} accessibilityLabel="Open navigation" aria-expanded={menuOpen} onPress={onMenuPress} testID={testID ? `${testID}-menu` : undefined} appearance="plain" tone="neutral" />
+            <Button size="md" icon={menuOpen ? RiCloseLine : RiMenuLine} accessibilityLabel={menuLabel} aria-expanded={menuOpen} onPress={onMenuPress} testID={testID ? `${testID}-menu` : undefined} appearance="plain" tone="neutral" />
           ) : null}
           {title != null ? (
             <Text

package/src/app-shell/NotificationBell.tsx

@@ -3,6 +3,7 @@ import { View } from 'react-native';
 
 import { Button } from '../button';
 import { useInteractionState } from '../hooks/use-interaction-state';
+import { mirrorAlign, useDirectionProps, useIsRtl } from '../hooks/use-is-rtl';
 import { RiNotificationLine } from '../icons/remix/RiNotificationLine';
 import { NotificationCenter } from '../notification-center';
 import { Popover, PopoverContent, PopoverTrigger } from '../popover';
@@ -16,10 +17,10 @@ import type { NotificationBellProps } from './types';
  * glyph, and the notification center in a popover under it.
  *
  *   trigger   medium secondary icon button (36), RiNotificationLine 20
- *   count     16px red-600 disc at top 2 / left 18, 1.5px ring in the button's
+ *   count     16px red-600 disc at top 2 / inline-start 18, 1.5px ring in the button's
  *             own surface (so it reads punched out), 10/16 bold white; the ring
  *             drops away while the button is hovered or pressed
- *   popover   bottom-end, 8px off, 440 wide, no chrome of its own — the center
+ *   popover   bottom, trailing edge (mirrored under RTL), 8px off, 440 wide, no chrome of its own — the center
  *             (max 430) is the card
  */
 const NotificationBellComponent: React.FC<NotificationBellProps> = ({
@@ -33,6 +34,8 @@ const NotificationBellComponent: React.FC<NotificationBellProps> = ({
   testID,
 }) => {
   const theme = useTheme();
+  const rtl = useIsRtl();
+  const dirProps = useDirectionProps();
   const [open, setOpen] = useState(false);
   const { state: hovered, onIn, onOut } = useInteractionState();
   const unread = unreadCount ?? notifications.filter((item) => item.unread).length;
@@ -48,6 +51,7 @@ const NotificationBellComponent: React.FC<NotificationBellProps> = ({
   return (
     <Popover open={open} onOpenChange={setOpen}>
       <View
+        {...dirProps}
         style={{ position: 'relative', flexDirection: 'row' }}
         // Hover is read on the wrapper (the `group`).
         {...({ onPointerEnter: onIn, onPointerLeave: onOut })}
@@ -62,7 +66,7 @@ const NotificationBellComponent: React.FC<NotificationBellProps> = ({
             style={{
               position: 'absolute',
               top: 2,
-              left: 18,
+              insetInlineStart: 18,
               width: 16,
               height: 16,
               borderRadius: borderRadius.full,
@@ -82,7 +86,7 @@ const NotificationBellComponent: React.FC<NotificationBellProps> = ({
       <PopoverContent
         label={accessibilityLabel}
         side="bottom"
-        align="end"
+        align={mirrorAlign('end', 'bottom', rtl)}
         sideOffset={8}
         style={{
           width,

package/src/app-shell/ProOfferCard.tsx

@@ -13,6 +13,7 @@ import Animated, {
 import Svg, { Defs, LinearGradient, Mask, Rect, Stop } from 'react-native-svg';
 
 import { Button, CloseButton } from '../button';
+import { useDirectionProps, useIsRtl } from '../hooks/use-is-rtl';
 import { BREAKPOINTS } from '../styles/breakpoints';
 import { WEB_POSITION_FIXED, type WebCssStyle } from '../styles/web-view-style';
 import { Z_INDEX } from '../styles/z-index';
@@ -22,18 +23,19 @@ import type { ProOfferCardProps } from './types';
 
 /**
  * `ProOfferCard`: the upgrade prompt anchored
- * bottom-left of the app.
+ * bottom-start of the app (bottom-left in LTR, bottom-right in RTL).
  *
  *   card       280 wide (full width minus 12 each side under `sm`), 12 from
- *              the bottom-left, radius 16, 1px border-button-white,
+ *              the bottom-start corner, radius 16, 1px border-button-white,
  *              background-secondary, p16, gap 12, shadow-waitlist
  *   backdrop   a tonal band across the top (card → raised surface →
  *              clear, diagonal, 70%), masked from opaque at 38% to clear
  *   copy       mark, then title body-medium / description body-2-regular
  *              secondary, 4 apart
  *   cta        full-width button with a white 40% shimmer sweeping across it
- *              every 2.5s (skewed −12°), hidden under reduced motion
- *   close      xs close button 12 from the top-right
+ *              every 2.5s (skewed −12°) toward the end edge, hidden under
+ *              reduced motion
+ *   close      xs close button 12 from the top-end corner
  *   enter      fades up 16px over 300ms after a 1.2s delay
  *
  * No shader backdrop ships by default; pass your own
@@ -79,6 +81,8 @@ function DefaultBackdrop({ from, via }: { from: string; via: string }) {
 
 function Shimmer({ width }: { width: number }) {
   const reducedMotion = useReducedMotion();
+  // The sweep runs start → end, so under RTL both its travel and its lean flip.
+  const dir = useIsRtl() ? -1 : 1;
   const travel = useSharedValue(0);
   useEffect(() => {
     if (reducedMotion || width === 0) return;
@@ -90,14 +94,14 @@ function Shimmer({ width }: { width: number }) {
   }, [reducedMotion, width, travel]);
   const barWidth = width * 0.45;
   const style = useAnimatedStyle(
-    () => ({ transform: [{ translateX: travel.value * barWidth * 3.5 }, { skewX: '-12deg' }] }),
-    [travel, barWidth],
+    () => ({ transform: [{ translateX: dir * travel.value * barWidth * 3.5 }, { skewX: `${dir * -12}deg` }] }),
+    [travel, barWidth, dir],
   );
   if (reducedMotion || width === 0) return null;
   return (
     <Animated.View
       pointerEvents="none"
-      style={[{ position: 'absolute', top: 0, bottom: 0, left: -width * 0.55, width: barWidth }, style]}
+      style={[{ position: 'absolute', top: 0, bottom: 0, insetInlineStart: -width * 0.55, width: barWidth }, style]}
     >
       <Svg width="100%" height="100%">
         <Defs>
@@ -130,6 +134,9 @@ const ProOfferCardComponent: React.FC<ProOfferCardProps> = ({
   testID,
 }) => {
   const theme = useTheme();
+  // Fixed to the viewport, usually outside any shell: it hands react-native-web
+  // the document's direction itself so its logical insets resolve against it.
+  const dirProps = useDirectionProps();
   const { width: viewport } = useWindowDimensions();
   const reducedMotion = useReducedMotion();
   const [ctaWidth, setCtaWidth] = useState(0);
@@ -160,8 +167,8 @@ const ProOfferCardComponent: React.FC<ProOfferCardProps> = ({
       ? {
           position: IS_WEB ? WEB_POSITION_FIXED : 'absolute',
           bottom: 12,
-          left: 12,
-          ...(narrow ? { right: 12 } : { width: 280 }),
+          insetInlineStart: 12,
+          ...(narrow ? { insetInlineEnd: 12 } : { width: 280 }),
           zIndex: Z_INDEX.floating,
         }
       : { width: 280 };
@@ -183,6 +190,7 @@ const ProOfferCardComponent: React.FC<ProOfferCardProps> = ({
 
   return (
     <Animated.View
+      {...dirProps}
       role="complementary"
       accessibilityLabel={accessibilityLabel}
       testID={testID}
@@ -235,7 +243,7 @@ const ProOfferCardComponent: React.FC<ProOfferCardProps> = ({
         size="xs"
         accessibilityLabel={dismissLabel}
         onPress={onDismiss}
-        style={{ position: 'absolute', top: 12, right: 12, zIndex: Z_INDEX.raised }}
+        style={{ position: 'absolute', top: 12, insetInlineEnd: 12, zIndex: Z_INDEX.raised }}
         testID={testID ? `${testID}-dismiss` : undefined}
       />
     </Animated.View>

package/src/app-shell/types.ts

@@ -10,8 +10,9 @@ import type { SidebarProps } from '../sidebar/types';
  * How the sidebar reaches a narrow screen (below `lg`):
  *
  * - `overlay`  a drawer over the page with a 40% black backdrop
- * - `reveal`   the sidebar waits beneath the page, which slides 272px right and
- *              rounds its corner to 32 as the rail scales in from 0.94
+ * - `reveal`   the sidebar waits beneath the page, which slides 272px toward
+ *              the end edge (right in LTR, left in RTL) and rounds its corner
+ *              to 32 as the rail scales in from 0.94
  */
 export type AppShellDrawer = 'overlay' | 'reveal';
 
@@ -92,7 +93,7 @@ export interface AppShellEngineProps {
   title?: string;
   /** Breadcrumb trail above the heading (a `Breadcrumb`). */
   breadcrumb?: ReactNode;
-  /** Header actions on the right (`NotificationBell`, buttons). */
+  /** Header actions at the end edge — the right in LTR (`NotificationBell`, buttons). */
   actions?: ReactNode;
   /**
    * Replaces the whole header. Put an `AppShellMenuButton` in it to keep the
@@ -105,7 +106,7 @@ export interface AppShellEngineProps {
    */
   header?: ReactNode;
   /**
-   * A second column on the right of the page (a detail panel, activity, a
+   * A second column at the page's end edge — the right in LTR, the left in RTL (a detail panel, activity, a
    * chat). In flow from `asideFrom`; below it, stacked under the content or
    * hidden (`asideCollapse`). Pinned like the sidebar — with document scroll
    * it stays in document flow and sticks after tall content reaches its lower edge.
@@ -130,6 +131,14 @@ export interface AppShellEngineProps {
   /** Controlled drawer state (below `lg`). */
   drawerOpen?: boolean;
   onDrawerOpenChange?: (open: boolean) => void;
+  /** Names the hamburger that opens the drawer. Default `"Open navigation"`. */
+  drawerOpenLabel?: string;
+  /**
+   * Names the controls that close the drawer — the backdrop and the page veil a
+   * `reveal` drawer leaves. Default `"Close navigation"`. The sidebar's own close
+   * button is `sidebar.closeLabel`.
+   */
+  drawerCloseLabel?: string;
   /**
    * What scrolls the page.
    *
@@ -285,6 +294,8 @@ export interface AppShellHeaderProps {
    * header falls back to the window being narrower than `lg`.
    */
   showMenu?: boolean;
+  /** Names the hamburger. Default `"Open navigation"`. */
+  menuLabel?: string;
   style?: StyleProp<ViewStyle>;
   testID?: string;
 }
@@ -318,7 +329,7 @@ export interface ProOfferCardProps {
   accessibilityLabel?: string;
   dismissLabel?: string;
   /**
-   * `fixed` (default) anchors bottom-left of the viewport (web) / the nearest
+   * `fixed` (default) anchors bottom-start (bottom-left in LTR) of the viewport (web) / the nearest
    * positioned parent (native); `inline` renders in flow.
    */
   placement?: 'fixed' | 'inline';

package/src/bottom-bar/BottomBarBase.tsx

@@ -3,6 +3,7 @@ import { View, ScrollView, Keyboard, Platform } from 'react-native';
 import { useEffect } from 'react';
 import Animated, { useAnimatedReaction, useAnimatedStyle, interpolate, runOnJS, useReducedMotion } from 'react-native-reanimated';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { useDirectionProps } from '../hooks/use-is-rtl';
 import { BottomBarSlotContext } from '../layout/bottom-bar-slot';
 import { useClaimBottomEdge } from '../layout/bottom-edge';
 import { FAB_METRICS } from '../fab/constants';
@@ -21,6 +22,8 @@ interface Props extends BottomBarProps {
 export function BottomBarBase({ Navigation, Item, Blur, items, value, onValueChange, activeProgress, onValueLongPress, action,
   actionPlacement = 'auto', actionBehavior = 'hide', material = 'translucent', minimizeProgress, blur = true, maxWidth = 560, style, testID }: Props) {
   const insets = useSafeAreaInsets();
+  // Logical insets below; react-native-web needs the direction handed to it.
+  const dirProps = useDirectionProps();
   const minimize = useMinimizeState();
   const progress = minimizeProgress ?? minimize.progress;
   const reducedMotion = useReducedMotion();
@@ -62,13 +65,16 @@ export function BottomBarBase({ Navigation, Item, Blur, items, value, onValueCha
     const amount = hideAction ? Math.min(1, Math.max(0, reducedMotion ? Number(progress.value > 0.01) : progress.value)) : 0;
     return {
       ...(actionWidth == null ? {} : { width: actionWidth * (1 - amount) }),
-      marginLeft: items.length && !above ? 10 * (1 - amount) : 0,
+      // Logical, and the CSS name rather than RN's `marginStart`: reanimated's
+      // web writer hands a mapper's result to RNW's `createReactDOMStyle`,
+      // which never rewrites `marginStart`, so the browser would drop it.
+      marginInlineStart: items.length && !above ? 10 * (1 - amount) : 0,
       opacity: 1 - amount,
       transform: [{ scale: 1 - amount * 0.15 }],
     };
   }, [progress, hideAction, reducedMotion, actionWidth, items.length, above]);
   if (keyboardVisible || (!items.length && !action)) return null;
-  return <View testID={testID} pointerEvents="box-none" style={[{ height: bottom + footprint, justifyContent: 'flex-end' }, style]}>
+  return <View {...dirProps} testID={testID} pointerEvents="box-none" style={[{ height: bottom + footprint, justifyContent: 'flex-end' }, style]}>
     {blur && material === 'translucent' && <Blur direction="bottom" style={{ position: 'absolute', left: 0, right: 0, bottom: 0, height: bottom + footprint + BLUR_BLEED }} />}
     <Animated.View testID={testID ? `${testID}-row` : undefined} onLayout={event => setRowWidth(event.nativeEvent.layout.width)} pointerEvents="box-none" style={[{ justifyContent: items.length ? 'center' : 'flex-end', alignSelf: 'center', width: '100%', maxWidth, paddingLeft: 12, paddingRight: 12, marginBottom: bottom, flexDirection: 'row', alignItems: 'center' }, rowStyle]}>
       {items.length > 0 && <View testID={testID ? `${testID}-navigation` : undefined} style={{ width: navigationWidth, minWidth: 0 }}><ScrollView horizontal showsHorizontalScrollIndicator={false} contentContainerStyle={{ minWidth: '100%' }}><View style={{ width: Math.max(navigationWidth, items.length * 44 + 8) }}><Navigation scrollable={navigationWidth > 0 && navigationWidth < items.length * 44 + 8} embedded blur={false} material={material} minimizeProgress={progress}
@@ -79,7 +85,7 @@ export function BottomBarBase({ Navigation, Item, Blur, items, value, onValueCha
       {action && <Animated.View ref={actionRef} pointerEvents={actionHidden ? 'none' : 'auto'}
         accessibilityElementsHidden={actionHidden} importantForAccessibility={actionHidden ? 'no-hide-descendants' : 'auto'}
         aria-hidden={actionHidden} testID={testID ? `${testID}-action` : undefined}
-        style={[{ flexShrink: 0, alignItems: 'flex-start', justifyContent: 'center' }, above ? { position: 'absolute', right: 12, bottom: '100%', marginBottom: 10 } : undefined, actionStyle]}>
+        style={[{ flexShrink: 0, alignItems: 'flex-start', justifyContent: 'center' }, above ? { position: 'absolute', insetInlineEnd: 12, bottom: '100%', marginBottom: 10 } : undefined, actionStyle]}>
         <View testID={testID ? `${testID}-action-content` : undefined} onLayout={event => { setActionWidth(event.nativeEvent.layout.width); setActionHeight(event.nativeEvent.layout.height); }} style={{ flexShrink: 0, ...(actionWidth == null ? {} : { width: actionWidth }) }}>{action}</View>
       </Animated.View>}
     </Animated.View>

package/src/hooks/index.ts

@@ -14,3 +14,4 @@ export type { Gutter, Gutters } from './use-gutters';
 export { useImagePreload, preloadImage } from './use-image-preload';
 export { useContainerWidth } from './use-container-width';
 export { moveItem, dragTarget, dragShift } from './list-reorder';
+export { useIsRtl } from './use-is-rtl';

package/src/hooks/use-is-rtl.ts

@@ -0,0 +1,102 @@
+import { useSyncExternalStore } from 'react';
+import { I18nManager, Platform } from 'react-native';
+
+import type { FloatingAlign, FloatingSide } from '../floating/types';
+
+/**
+ * Whether the layout around the caller is mirrored (right-to-left), read from
+ * the SAME place each platform's layout engine reads it, so a sign computed
+ * from it agrees with the flex order and the logical insets by construction:
+ *
+ *   web     `document.documentElement.dir === 'rtl'`, observed live — an app
+ *           that switches language sets `dir` on `<html>` and every caller
+ *           re-renders. Bloom never writes `dir` itself.
+ *   native  `I18nManager.isRTL`. `I18nManager.forceRTL` takes effect on the
+ *           NEXT launch (a running app cannot mirror itself), so the value is
+ *           constant for the process and the subscription never fires.
+ *
+ * It exists for what logical style keys CANNOT express: a `translateX` sign, a
+ * `transformOrigin`, a floating `side`. Insets use the `*InlineStart`/
+ * `*InlineEnd` keys instead, with `useDirectionProps()` on the root on web.
+ *
+ * `useSyncExternalStore`, not a read in render: both sources are external
+ * mutable state, and the sign has to be settled before the first paint rather
+ * than one effect later. The server snapshot is left-to-right — a statically
+ * exported shell has no `dir` yet.
+ */
+export function useIsRtl(): boolean {
+  const web = Platform.OS === 'web';
+  return useSyncExternalStore(
+    web ? subscribeToDocumentDirection : subscribeToNothing,
+    web ? readDocumentDirection : readNativeDirection,
+    readServerDirection,
+  );
+}
+
+function subscribeToNothing(): () => void {
+  return () => {};
+}
+
+function readNativeDirection(): boolean {
+  return I18nManager?.isRTL === true;
+}
+
+function readServerDirection(): boolean {
+  return false;
+}
+
+function subscribeToDocumentDirection(onChange: () => void): () => void {
+  // No DOM (static export under Node) or no observer (a bare DOM shim): nothing
+  // can change during that render, and the first client render subscribes.
+  if (typeof document === 'undefined' || typeof MutationObserver === 'undefined') return () => {};
+  const observer = new MutationObserver(onChange);
+  observer.observe(document.documentElement, { attributes: true, attributeFilter: ['dir'] });
+  return () => observer.disconnect();
+}
+
+function readDocumentDirection(): boolean {
+  if (typeof document === 'undefined') return false;
+  return document.documentElement.dir === 'rtl';
+}
+
+/**
+ * Floating surfaces (`side`, `align`) are PHYSICAL — `'right'` is the right of
+ * the viewport, and under a vertical side `'end'` is the right edge of the
+ * anchor. A caller that means "beside the trailing edge" mirrors them here.
+ */
+export function mirrorSide(side: FloatingSide, rtl: boolean): FloatingSide {
+  if (!rtl) return side;
+  return side === 'left' ? 'right' : side === 'right' ? 'left' : side;
+}
+
+/** The horizontal `align` under a `top`/`bottom` side; a no-op otherwise. */
+export function mirrorAlign(align: FloatingAlign, side: FloatingSide, rtl: boolean): FloatingAlign {
+  if (!rtl || (side !== 'top' && side !== 'bottom')) return align;
+  return align === 'start' ? 'end' : align === 'end' ? 'start' : align;
+}
+
+const RTL_DIR = { dir: 'rtl' } as const;
+const NO_DIR = {} as const;
+
+/**
+ * Props that hand the document's direction to react-native-web — spread them on
+ * the ROOT view of anything using logical insets.
+ *
+ * react-native-web does NOT resolve `paddingInlineStart`/`insetInlineEnd`/
+ * `borderEndWidth` against `<html dir>`. Its inline and atomic style paths both
+ * rewrite them to PHYSICAL properties against its own direction context, which
+ * only a `dir` (or `lang`) prop on an ancestor `View` sets and which otherwise
+ * defaults to left-to-right. Without this the flex rows mirror (CSS `direction`
+ * inherits from `<html>`) while every logical inset stays on the left — half a
+ * mirror. Measured on react-native-web 0.21.2: `StyleSheet([{ insetInlineStart:
+ * 0 }])` resolves to `left: 0px` with no context.
+ *
+ * Reanimated's web writer bypasses that rewrite and sets the CSS logical
+ * property itself, which then follows the DOM `dir` this also sets — so the first
+ * paint and every animated frame agree. Web only; native Yoga reads
+ * `I18nManager` directly and has no `dir` prop.
+ */
+export function useDirectionProps(): { dir?: 'rtl' } {
+  const rtl = useIsRtl();
+  return Platform.OS === 'web' && rtl ? RTL_DIR : NO_DIR;
+}