@oxy.so/bloom 4.15.0 → 4.16.1

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>

package/src/sidebar/SidebarPlanCard.tsx

@@ -31,8 +31,8 @@ function SidebarPlanCardComponent({ plan, collapsed = false, style, testID }: Si
   const geometry = useAnimatedStyle(() => ({
     width: inSidebar ? '100%' : naturalWidth.value > 0 ? naturalWidth.value + (36 - naturalWidth.value) * progress.value : progress.value === 1 ? 36 : '100%',
     height: 56 - 20 * progress.value,
-    paddingLeft: 10 + (compactPadding - 10) * progress.value,
-    paddingRight: 12 + (compactPadding - 12) * progress.value,
+    paddingInlineStart: 10 + (compactPadding - 10) * progress.value,
+    paddingInlineEnd: 12 + (compactPadding - 12) * progress.value,
   }), [progress, inSidebar, naturalWidth, compactPadding]);
   const fill = useAnimatedStyle(() => ({ opacity: 1 - progress.value }), [progress]);
   const avatar = plan.avatar ?? { initials: plan.name.slice(0, 1).toUpperCase(), color: 'blue' as const };
@@ -87,7 +87,7 @@ function SidebarPlanCardComponent({ plan, collapsed = false, style, testID }: Si
       <View style={{ minWidth: 0, flexShrink: 1, flexDirection: 'row', alignItems: 'center' }}>
         {avatarNode}
         <Collapsible collapsed={collapsed}>
-        <View style={{ paddingLeft: 8, minWidth: 0, flexShrink: 1, flexDirection: 'column', alignItems: 'flex-start', justifyContent: 'center' }}>
+        <View style={{ paddingInlineStart: 8, minWidth: 0, flexShrink: 1, flexDirection: 'column', alignItems: 'flex-start', justifyContent: 'center' }}>
           <Text variant="body-medium" numberOfLines={1} style={{ color: palette.text }}>
             {plan.name}
           </Text>

package/src/sidebar/SidebarRail.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import { View } from 'react-native';
 
 import { Badge } from '../badge';
+import { useDirectionProps } from '../hooks/use-is-rtl';
 import { useSidebarPalette } from './palette';
 import { IS_WEB } from './parts';
 import { SidebarPrimaryAction } from './SidebarPrimaryAction';
@@ -34,10 +35,14 @@ export function SidebarRail({
   secondaryItems = [],
   selected,
   onNavigate,
+  accessibilityLabel = 'Sidebar',
   style,
   testID,
 }: SidebarProps) {
   const palette = useSidebarPalette();
+  // The badges sit on logical insets; react-native-web resolves those against a
+  // `dir` prop, not `<html dir>` (see `useDirectionProps`).
+  const dirProps = useDirectionProps();
 
   const renderItem = (item: SidebarNavItem) => {
     const isSelected = selected === item.key;
@@ -68,8 +73,9 @@ export function SidebarRail({
 
   return (
     <View
+      {...dirProps}
       role="complementary"
-      accessibilityLabel="Sidebar"
+      accessibilityLabel={accessibilityLabel}
       testID={testID}
       style={[
         {

package/src/sidebar/SidebarRailItem.tsx

@@ -26,7 +26,7 @@ const SELECTION_DURATION = 220;
  *              glyph), background-secondary-hover on hover
  *   label      10px, centred, one line; text-primary medium while selected,
  *              text-secondary otherwise
- *   badge      over the indicator's top-right corner
+ *   badge      over the indicator's top-end corner (top-right in LTR)
  *
  * With `href` the item is a link (a real anchor on web).
  */
@@ -111,7 +111,7 @@ const SidebarRailItemComponent: React.FC<SidebarRailItemProps> = ({
           <SelectedGlyph width={ICON_SIZE} height={ICON_SIZE} fill={palette.selectedForeground} />
         </Animated.View>
         {badge != null ? (
-          <View pointerEvents="none" style={{ position: 'absolute', top: -6, left: INDICATOR_WIDTH - 16 }}>
+          <View pointerEvents="none" style={{ position: 'absolute', top: -6, insetInlineStart: INDICATOR_WIDTH - 16 }}>
             {badge}
           </View>
         ) : null}

package/src/sidebar/SidebarTeamMenu.tsx

@@ -10,6 +10,7 @@ import Animated, {
 
 import { Badge } from '../badge';
 import { useInteractionState } from '../hooks/use-interaction-state';
+import { mirrorAlign, mirrorSide, useIsRtl } from '../hooks/use-is-rtl';
 import { Popover, PopoverContent, PopoverTrigger } from '../popover';
 import { BREAKPOINTS } from '../styles/breakpoints';
 import { borderRadius } from '../styles/tokens';
@@ -43,7 +44,7 @@ const AnimatedPressable = Animated.createAnimatedComponent(Pressable);
  *                     tertiary-hover) that turns over while open (200ms)
  *   card (collapsed)  36px circle, transparent, just the avatar
  *   menu              265 wide, radius 16, 1px border, p10, shadow-dropdown,
- *                     beside the rail (right, bottom-aligned), below it under
+ *                     beside the rail (end side, bottom-aligned), below it under
  *                     `sm`; header, grouped rows with full-bleed dividers
  *                     (10px either side), footer with a version chip
  *   row               p8 radius 10 gap 10, icon 20 secondary, body-medium
@@ -149,6 +150,7 @@ const SidebarTeamMenuComponent: React.FC<SidebarTeamMenuProps> = ({ team, collap
   const narrow = width < BREAKPOINTS.sm;
   const { state: hovered, onIn, onOut } = useInteractionState();
   const reducedMotion = useReducedMotion();
+  const rtl = useIsRtl();
 
   const turn = useSharedValue(0);
   useEffect(() => {
@@ -168,7 +170,7 @@ const SidebarTeamMenuComponent: React.FC<SidebarTeamMenuProps> = ({ team, collap
     const height = expandedHeight + (36 - expandedHeight) * p;
     return { width: inSidebar ? '100%' : naturalWidth.value > 0 ? naturalWidth.value + (36 - naturalWidth.value) * p : p === 1 ? 36 : '100%',
       height,
-      borderRadius: height / 2, paddingLeft: 10 + (compactPadding - 10) * p, paddingRight: 16 + (compactPadding - 16) * p };
+      borderRadius: height / 2, paddingInlineStart: 10 + (compactPadding - 10) * p, paddingInlineEnd: 16 + (compactPadding - 16) * p };
   }, [progress, expandedHeight, inSidebar, naturalWidth, compactPadding]);
   const fill = useAnimatedStyle(() => ({ opacity: 1 - progress.value }), [progress]);
   const cardStyle: WebCssStyle = {
@@ -209,7 +211,7 @@ const SidebarTeamMenuComponent: React.FC<SidebarTeamMenuProps> = ({ team, collap
           <View style={{ flexDirection: 'row', alignItems: 'center', minWidth: 0, flexShrink: 1 }}>
             <SidebarAvatarView avatar={team.avatar} size="md" palette={palette} />
             <Collapsible collapsed={collapsed}>
-              <View style={{ paddingLeft: 8, justifyContent: 'center', alignItems: 'flex-start' }}>
+              <View style={{ paddingInlineStart: 8, justifyContent: 'center', alignItems: 'flex-start' }}>
                 <Text variant="body-medium" numberOfLines={1} style={{ color: palette.text }}>
                   {team.name}
                 </Text>
@@ -241,9 +243,11 @@ const SidebarTeamMenuComponent: React.FC<SidebarTeamMenuProps> = ({ team, collap
         </AnimatedPressable>
       </PopoverTrigger>
       <PopoverContent
-        label={`${team.name} menu`}
-        side={narrow ? 'bottom' : 'right'}
-        align={narrow ? 'start' : 'end'}
+        label={team.menuLabel ?? `${team.name} menu`}
+        // Beside the rail's trailing edge: floating sides are physical, so
+        // they are mirrored here rather than by the layout.
+        side={mirrorSide(narrow ? 'bottom' : 'right', rtl)}
+        align={mirrorAlign(narrow ? 'start' : 'end', narrow ? 'bottom' : 'right', rtl)}
         sideOffset={8}
         maxWidth={width - 32}
         style={SIDEBAR_MENU_PANEL}

package/src/sidebar/SidebarUserMenu.tsx

@@ -4,6 +4,7 @@ import Animated, { useAnimatedStyle } from 'react-native-reanimated';
 
 import { Button } from '../button';
 import { useInteractionState } from '../hooks/use-interaction-state';
+import { mirrorAlign, mirrorSide, useIsRtl } from '../hooks/use-is-rtl';
 import { RiAddFill } from '../icons/remix/RiAddFill';
 import { RiEqualizer3Line } from '../icons/remix/RiEqualizer3Line';
 import { Popover, PopoverContent, PopoverTrigger } from '../popover';
@@ -36,7 +37,7 @@ const AnimatedPressable = Animated.createAnimatedComponent(Pressable);
  *              without moving layout. Collapsed: the rail's 36px column, the
  *              pill squared to 42×42 (3px sides).
  *   menu       265 wide, radius 16, border, p10, shadow-dropdown, beside the
- *              rail (right, top-aligned), below it under `sm`: "Users with
+ *              rail (its end side — right in LTR — top-aligned), below it under `sm`: "Users with
  *              access" (pt5, gap 6), rows px8 py6 radius 10 (20px avatar +
  *              body-medium), a full-bleed divider 14px either side, then two
  *              small secondary buttons 12 apart, pb8 so the inset reads 18
@@ -158,6 +159,7 @@ const SidebarUserMenuComponent: React.FC<SidebarUserMenuProps> = ({
   const [open, setOpen] = useState(false);
   const { width } = useWindowDimensions();
   const narrow = width < BREAKPOINTS.sm;
+  const rtl = useIsRtl();
   const { state: hovered, onIn, onOut } = useInteractionState();
 
   const progress = useSidebarCollapseProgress(collapsed);
@@ -208,7 +210,7 @@ const SidebarUserMenuComponent: React.FC<SidebarUserMenuProps> = ({
           />
           <SidebarAvatarView avatar={account.avatar} size="md" palette={palette} background={avatarBackground} />
           <Collapsible collapsed={collapsed}>
-            <View style={{ flexDirection: 'row', alignItems: 'center', gap: 2, paddingLeft: 8 }}>
+            <View style={{ flexDirection: 'row', alignItems: 'center', gap: 2, paddingInlineStart: 8 }}>
               <Text variant="body-medium" numberOfLines={1} style={{ color: palette.text }}>
                 {account.name}
               </Text>
@@ -218,9 +220,10 @@ const SidebarUserMenuComponent: React.FC<SidebarUserMenuProps> = ({
         </AnimatedPressable>
       </PopoverTrigger>
       <PopoverContent
-        label="Account menu"
-        side={narrow ? 'bottom' : 'right'}
-        align="start"
+        label={account.menuLabel ?? 'Account menu'}
+        // Beside the rail's trailing edge; floating sides are physical.
+        side={mirrorSide(narrow ? 'bottom' : 'right', rtl)}
+        align={mirrorAlign('start', narrow ? 'bottom' : 'right', rtl)}
         sideOffset={8}
         maxWidth={width - 32}
         style={SIDEBAR_MENU_PANEL}