@oxy.so/bloom 4.15.0 → 4.16.0

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;
+}

package/src/sidebar/Sidebar.tsx

@@ -19,6 +19,7 @@ import { Badge } from '../badge';
 import { CloseButton } from '../button';
 import { useControllableState } from '../hooks/use-controllable-state';
 import { useInteractionState } from '../hooks/use-interaction-state';
+import { useDirectionProps, useIsRtl } from '../hooks/use-is-rtl';
 import { RiCloseLine } from '../icons/remix/RiCloseLine';
 import { RiSearchLine } from '../icons/remix/RiSearchLine';
 import { RiSideBarFill } from '../icons/remix/RiSideBarFill';
@@ -87,6 +88,7 @@ function SearchField({
   onDismiss,
   placeholder,
   label,
+  clearLabel,
   compact = false,
 }: {
   palette: SidebarPalette;
@@ -96,6 +98,7 @@ function SearchField({
   onDismiss: (restoreFocus: boolean) => void;
   placeholder: string;
   label: string;
+  clearLabel: string;
   compact?: boolean;
 }) {
   const inputStyle: TextStyle & WebCssStyle = {
@@ -130,7 +133,7 @@ function SearchField({
       />
       <CloseButton
         size="xs"
-        accessibilityLabel="Clear navigation search"
+        accessibilityLabel={clearLabel}
         onPress={() => onDismiss(true)}
         style={{ backgroundColor: palette.tertiaryHover }}
       />
@@ -157,6 +160,10 @@ const SidebarPanel: React.FC<SidebarProps> = ({
   onCollapsedChange,
   mobile = false,
   onClose,
+  accessibilityLabel = 'Sidebar',
+  collapseLabel = 'Collapse sidebar',
+  expandLabel = 'Expand sidebar',
+  closeLabel = 'Close sidebar',
   fluid = false,
   surface = 'card',
   size: sizeProp,
@@ -167,7 +174,10 @@ const SidebarPanel: React.FC<SidebarProps> = ({
   searchQuery,
   onSearchQueryChange,
   searchLabel = 'Quick Search',
+  searchButtonLabel = 'Search',
   searchPlaceholder,
+  filterLabel = 'Filter navigation',
+  clearSearchLabel = 'Clear navigation search',
   noResultsLabel = 'No results',
   logo,
   account,
@@ -186,6 +196,12 @@ const SidebarPanel: React.FC<SidebarProps> = ({
   const metrics = SIDEBAR_METRICS[size];
   useSidebarWebCss();
   const reducedMotion = useReducedMotion();
+  // Insets below are logical and mirror by themselves; the header control's
+  // `translateX` and the collapse glyph's `scaleX` are signs, and flip here.
+  const dir = useIsRtl() ? -1 : 1;
+  // A standalone sidebar has no shell above it to hand react-native-web the
+  // document's direction, so it hands it on itself (see `useDirectionProps`).
+  const dirProps = useDirectionProps();
 
   const [collapsedState, setCollapsed] = useControllableState<boolean>({
     value: collapsedProp,
@@ -255,8 +271,8 @@ const SidebarPanel: React.FC<SidebarProps> = ({
     return { paddingLeft: padding, paddingRight: padding, marginLeft: (collapsedLane - metrics.row.square) / 2 * progress.value, marginRight: (collapsedLane - metrics.row.square) / 2 * progress.value };
   }, [progress, metrics.row.square, metrics.row.padding, metrics.row.icon, expandedInset, collapsedLane]);
   const sideBarIconStyle = useAnimatedStyle(
-    () => ({ transform: [{ scaleX: 2 * progress.value - 1 }] }),
-    [progress],
+    () => ({ transform: [{ scaleX: dir * (2 * progress.value - 1) }] }),
+    [progress, dir],
   );
 
   const hasLogo = !!logo;
@@ -266,17 +282,17 @@ const SidebarPanel: React.FC<SidebarProps> = ({
   }), [progress, hasLogo, hasAccount]);
   const headerIdentityGeometry = useAnimatedStyle(() => ({
     top: hasLogo ? 0 : 30 * progress.value,
-    right: (hasLogo ? 28 : 20) * (1 - progress.value),
+    insetInlineEnd: (hasLogo ? 28 : 20) * (1 - progress.value),
   }), [progress, hasLogo]);
   const headerControlGeometry = useAnimatedStyle(() => {
     const p = progress.value;
     return {
-      left: `${100 * (1 - p)}%` as `${number}%`,
+      insetInlineStart: `${100 * (1 - p)}%` as `${number}%`,
       width: 20 + (collapsedLane - 20) * p,
       top: hasLogo ? 8 + 38 * p : hasAccount ? 6 * (1 - p) : 0,
-      transform: [{ translateX: -20 * (1 - p) }],
+      transform: [{ translateX: dir * -20 * (1 - p) }],
     };
-  }, [progress, hasLogo, hasAccount, collapsedLane]);
+  }, [progress, hasLogo, hasAccount, collapsedLane, dir]);
   const themeGeometry = useAnimatedStyle(() => ({ height: 40 - 4 * progress.value }), [progress]);
   const themeExpandedStyle = useAnimatedStyle(() => ({ opacity: 1 - progress.value }), [progress]);
   const themeCollapsedStyle = useAnimatedStyle(() => ({ opacity: progress.value }), [progress]);
@@ -368,7 +384,8 @@ const SidebarPanel: React.FC<SidebarProps> = ({
 
   // ---- chrome ------------------------------------------------------------
   // Three surfaces, one place. `docked` keeps the panel fill and spends its
-  // edge on ONE hairline — the side facing the content — because a column
+  // edge on ONE hairline — the side facing the content, its END edge (the
+  // nav is the row's first child, so the right in LTR, the left in RTL) — because a column
   // flush to the window has no other edge to draw: a border all the way round
   // would draw two lines nobody can see and one they can.
   const chrome: WebCssStyle =
@@ -377,8 +394,8 @@ const SidebarPanel: React.FC<SidebarProps> = ({
       : surface === 'docked'
         ? {
             backgroundColor: palette.panel,
-            borderRightWidth: 1,
-            borderRightColor: palette.dockedEdge,
+            borderEndWidth: 1,
+            borderEndColor: palette.dockedEdge,
           }
         : {
             borderRadius: 24,
@@ -411,7 +428,7 @@ const SidebarPanel: React.FC<SidebarProps> = ({
         borderRadius: borderRadius.full,
         backgroundColor: palette.tertiary,
         ...(searchActive
-          ? { flex: 1, gap: 8, paddingLeft: 8, paddingRight: 10, boxShadow: searchRing }
+          ? { flex: 1, gap: 8, paddingInlineStart: 8, paddingInlineEnd: 10, boxShadow: searchRing }
           : { width: 36, gap: 0, paddingLeft: 8, paddingRight: 8 }),
       }}
     >
@@ -419,7 +436,7 @@ const SidebarPanel: React.FC<SidebarProps> = ({
         ref={searchTriggerRef}
         {...(IS_WEB ? { dataSet: { bloomSidebar: 'ring' } } : {})}
         role="button"
-        accessibilityLabel="Search"
+        accessibilityLabel={searchButtonLabel}
         onPress={activateSearch}
         style={{ width: 20, height: 20, alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}
       >
@@ -434,7 +451,8 @@ const SidebarPanel: React.FC<SidebarProps> = ({
           onChangeText={setQuery}
           onDismiss={deactivateSearch}
           placeholder={placeholder}
-          label="Filter navigation"
+          label={filterLabel}
+          clearLabel={clearSearchLabel}
         />
       ) : null}
     </View>
@@ -442,7 +460,7 @@ const SidebarPanel: React.FC<SidebarProps> = ({
     <Pressable
       {...(IS_WEB ? { dataSet: { bloomSidebar: 'ring' } } : {})}
       role="button"
-      accessibilityLabel="Close sidebar"
+      accessibilityLabel={closeLabel}
       onPress={onClose}
       testID="sidebar-close"
     >
@@ -452,7 +470,7 @@ const SidebarPanel: React.FC<SidebarProps> = ({
     <Pressable
       {...(IS_WEB ? { dataSet: { bloomSidebar: 'ring' } } : {})}
       role="button"
-      accessibilityLabel={collapsed ? 'Expand sidebar' : 'Collapse sidebar'}
+      accessibilityLabel={collapsed ? expandLabel : collapseLabel}
       aria-expanded={!collapsed}
       onPress={toggleCollapse}
       style={{ width: '100%', alignItems: 'center', justifyContent: 'center' }}
@@ -476,8 +494,8 @@ const SidebarPanel: React.FC<SidebarProps> = ({
         backgroundColor: palette.tertiary,
         paddingTop: 8,
         paddingBottom: 8,
-        paddingLeft: 8,
-        paddingRight: 10,
+        paddingInlineStart: 8,
+        paddingInlineEnd: 10,
         boxShadow: searchRing,
       }}
       testID="sidebar-search-field"
@@ -490,7 +508,8 @@ const SidebarPanel: React.FC<SidebarProps> = ({
         onChangeText={setQuery}
         onDismiss={deactivateSearch}
         placeholder={placeholder}
-        label="Filter navigation"
+        label={filterLabel}
+        clearLabel={clearSearchLabel}
       />
     </View>
   ) : (
@@ -600,7 +619,7 @@ const SidebarPanel: React.FC<SidebarProps> = ({
   ) : (
     <>
       <Animated.View testID="sidebar-header" style={[{ width: '100%', position: 'relative' }, headerGeometry]}>
-        {logo || account ? <Animated.View style={[{ position: 'absolute', left: 0, minWidth: 0 }, headerIdentityGeometry]}>
+        {logo || account ? <Animated.View style={[{ position: 'absolute', insetInlineStart: 0, minWidth: 0 }, headerIdentityGeometry]}>
           {logo ? <SidebarLogoView logo={logo} collapsed={collapsed} testID="sidebar-logo" /> : accountMenu}
         </Animated.View> : null}
         <Animated.View testID="sidebar-header-control" style={[{ position: 'absolute', height: 20 }, headerControlGeometry]}>
@@ -616,8 +635,9 @@ const SidebarPanel: React.FC<SidebarProps> = ({
     <SidebarGeometryProvider value={geometry}>
     <CollapseProvider value={progress}>
       <Animated.View
+        {...dirProps}
         role="complementary"
-        accessibilityLabel="Sidebar"
+        accessibilityLabel={accessibilityLabel}
         onLayout={onPanelLayout}
         testID={testID}
         style={[
@@ -706,7 +726,7 @@ const SidebarPanel: React.FC<SidebarProps> = ({
             <Animated.View testID="sidebar-theme-morph" style={[{ position: 'relative', overflow: 'hidden' }, themeGeometry]}>
               <Animated.View pointerEvents={collapsed ? 'none' : 'auto'} aria-hidden={collapsed} accessibilityElementsHidden={collapsed} importantForAccessibility={collapsed ? 'no-hide-descendants' : 'auto'}
                 {...(IS_WEB && collapsed ? { inert: true } : {})}
-                style={[{ position: 'absolute', left: 0, top: 0 }, themeExpandedStyle]}>
+                style={[{ position: 'absolute', insetInlineStart: 0, top: 0 }, themeExpandedStyle]}>
                 <ThemeToggle variant="sidebar-segmented" style={plain ? { backgroundColor: palette.panel } : undefined} />
               </Animated.View>
               <Animated.View pointerEvents={collapsed ? 'auto' : 'none'} aria-hidden={!collapsed} accessibilityElementsHidden={!collapsed} importantForAccessibility={collapsed ? 'auto' : 'no-hide-descendants'}

package/src/sidebar/SidebarFolder.tsx

@@ -12,6 +12,7 @@ import Svg, { Path } from 'react-native-svg';
 
 import { useControllableState } from '../hooks/use-controllable-state';
 import { useInteractionState } from '../hooks/use-interaction-state';
+import { useIsRtl } from '../hooks/use-is-rtl';
 import { RiFolderLine } from '../icons/remix/RiFolderLine';
 import { RiFolderOpenLine } from '../icons/remix/RiFolderOpenLine';
 import type { WebCssStyle } from '../styles/web-view-style';
@@ -27,13 +28,15 @@ const FIRST_CENTER = 15;
 /**
  * The curved connector: a guide dropping from the folder glyph with a rounded
  * elbow into each row — 1px icon-quaternary, trunk at x 17, each elbow landing 5px
- * right of it and running on to 11.5.
+ * toward the end of it and running on to 11.5. The path is drawn left-to-right,
+ * so under RTL the box is mirrored as well as anchored from the start edge.
  */
 function TreeConnector({ count, color }: { count: number; color: string }) {
+  const rtl = useIsRtl();
   if (count === 0) return null;
   const height = FIRST_CENTER + ROW_PITCH * (count - 1) + 1;
   return (
-    <View pointerEvents="none" style={{ position: 'absolute', top: 0, left: 16.5, width: 12, height }}>
+    <View pointerEvents="none" style={{ position: 'absolute', top: 0, insetInlineStart: 16.5, width: 12, height, transform: rtl ? [{ scaleX: -1 }] : undefined }}>
       <Svg width={12} height={height} viewBox={`0 0 12 ${height}`} fill="none">
         {Array.from({ length: count }, (_, i) => {
           const y = FIRST_CENTER + ROW_PITCH * i;
@@ -69,8 +72,8 @@ function TreeRow({
     borderRadius: borderRadius.full,
     paddingTop: 5,
     paddingBottom: 5,
-    paddingRight: 8,
-    paddingLeft: 36,
+    paddingInlineEnd: 8,
+    paddingInlineStart: 36,
     backgroundColor: selected || hovered ? palette.rowHover : 'transparent',
     '--bloom-sidebar-ring': palette.ring,
   };

package/src/sidebar/SidebarLogoView.tsx

@@ -18,7 +18,7 @@ export const SIDEBAR_LOGO_SIZE = 36;
  *   mark      centred in a 36 × 36 box — the collapsed column — so it stays
  *             put while the rail morphs; sized by the caller (a 24–28px glyph
  *             reads right)
- *   wordmark  8 to the right, in a collapse slot; a string renders as
+ *   wordmark  8 after it (inline-end), in a collapse slot; a string renders as
  *             headline-semibold text-primary, anything else as given (an SVG
  *             wordmark, an image)
  *   link      with `href` a real anchor on web, with `onPress` a button; the
@@ -53,7 +53,7 @@ const SidebarLogoViewComponent: React.FC<SidebarLogoViewProps> = ({
       ) : null}
       {wordmark != null && showWordmark ? (
         <Collapsible collapsed={collapsed}>
-          <View style={{ minHeight: SIDEBAR_LOGO_SIZE, paddingLeft: icon != null ? 8 : 0, justifyContent: 'center' }} testID={testID ? `${testID}-wordmark` : undefined}>
+          <View style={{ minHeight: SIDEBAR_LOGO_SIZE, paddingInlineStart: icon != null ? 8 : 0, justifyContent: 'center' }} testID={testID ? `${testID}-wordmark` : undefined}>
             {typeof wordmark === 'string' ? (
               <Text variant="headline-semibold" numberOfLines={1} style={{ color: palette.text }}>
                 {wordmark}

package/src/sidebar/SidebarModeSwitcher.tsx

@@ -118,7 +118,7 @@ function ModeRow({
           <Text
             variant="caption-2-regular"
             numberOfLines={1}
-            style={{ color: palette.textTertiary, paddingRight: 12, opacity: hovered ? 1 : 0 }}
+            style={{ color: palette.textTertiary, paddingInlineEnd: 12, opacity: hovered ? 1 : 0 }}
           >
             {mode.shortcut}
           </Text>