rtl-layout

# RTL Layout Arabic and Hebrew mirror the whole interface. `getLocaleDirection` in `packages/ui/src/lib/i18n/runtime.ts` derives the direction from the UI locale; the i18n provider puts it on `<html dir>` and hands it to Base UI's `DirectionProvider`. Components read it as `useI18n().direction`, or as `isRightToLeft(el)` from `@/lib/i18n` in event handlers and code outside React. Do not call `el.matches(':dir(rtl)')`: it throws on WebKit before 16.4. Adding a right-to-left locale follows `locale-ui-patterns` and also puts it in `RTL_LOCALES` there. Every layout change works in both directions. The test: English stays pixel-identical, and Arabic is its mirror image. ## Logical by default Write sides as start and end of the line: `ms-`/`me-`, `ps-`/`pe-`, `inset-s-`/`inset-e-`, `text-start`/`text-end`, `rounded-s`/`rounded-e`/`rounded-ss`, `border-s`/`border-e`; in CSS and inline styles `margin-inline-start`, `padding-inline-start`, `inset-inline-start`. Flex and grid already follow `dir`, so DOM order stays semantic. What CSS cannot express flips with the `rtl:` variant: `translate-x-*` (`data-[checked]:translate-x-4 rtl:data-[checked]:-translate-x-4`), `bg-gradient-to-r rtl:bg-gradient-to-l`, `origin-top-left rtl:origin-top-right`, and inline transforms built from a sign. A fade toward the end of a line uses `linear-gradient(var(--oc-to-inline-end), …)`. ## Physical on purpose Some sides belong to the screen, not the line. ESLint (`no-restricted-syntax` in `eslint.config.js`) flags physical classes in `packages/ui` class lists, so a deliberate one carries `// eslint-disable-next-line no-restricted-syntax -- <why it is physical>`: - **OS window controls.** macOS traffic lights stay top left in every language; frameless Windows/Linux controls stay on the side the user picked. The titlebar publishes `--oc-titlebar-start-inset` and maps controls through `getInlineStartSide(direction)` (see `Header.tsx`, `TitlebarLeftControls.tsx`). - **Geometry from measurement.** An element moved by `offsetLeft`, `getBoundingClientRect().left` or `clientX` anchors with `left-0`, because the numbers are physical (the active-tab pill in `sortable-tabs-strip.tsx`). - **Content that reads left to right:** code, diffs, terminal output and its key strip, file paths and path fields, URLs, IDs, charts along a time axis. The container gets `dir="ltr"`, so its own logical classes resolve as physical inside it. - **Keyboard keys and labels** that name a physical key ("close tabs to the left" means the screen's left). ## Direction-aware behaviour - **Resize and drag.** A handle on a panel's edge changes width by the pointer delta times a sign: `(clientX - startX) * (rtl ? -1 : 1)` for a start-side panel. Arrow keys on the handle take the same sign. - **Horizontal scroll.** In RTL `scrollLeft` is 0 at the start and negative toward the end. Distance from the start is `Math.abs(scrollLeft)`; distance from the physical left is `scrollWidth - clientWidth + scrollLeft`. Wheel-to-horizontal mapping flips the delta. - **Previous/next keys.** ArrowLeft and ArrowRight swap meaning when they step through a horizontal sequence (tabs, image viewer, thinking levels). - **Sorting.** `horizontalListSortingStrategy` assumes later items sit further right; pass `rectSortingStrategy` in RTL (see `drag-to-reorder`). - **Slide-ins.** A drawer, pushed page or row swipe moves toward the side its trigger sits on; compute the offset sign from `direction` and mirror edge swipes with it (`MobileApp.tsx`, `MobileSessionSwipe.tsx`). ## Mixed-direction text User content (session titles, run names, file names in lists) gets `dir="auto"` so it shows its own start when truncated. Text whose direction differs from the UI aligns with the interface through `oc-ui-start-align`, so it lines up with the rows around it. Values made of numbers and units ("~41 tok/s", "6.6K ↑ · 242 ↓") also take `dir="auto"`. Markdown already resolves direction per block; see `components/chat/message/parts/DOCUMENTATION.md` before touching it. ## Icons `DIRECTIONAL_ICONS` in `components/icon/Icon.tsx` lists the icons that mirror in RTL (back/forward, chevrons, panel sides, send); one CSS rule flips them through `:dir(rtl)`, so an icon inside a `dir="ltr"` block stays as drawn. A new icon whose meaning points somewhere joins the set. The flip happens before the `<svg>`'s own rotation, so a chevron that turns a quarter turn pairs it: `rotate-90 rtl:-rotate-90`. ## Verify 1. Take English screenshots of the affected screens before the change and after it; they match pixel for pixel. 2. Switch to Arabic (`localStorage['openchamber.i18n.v1'] = '{"locale":"ar"}'`) and check the same screens, then drag, scroll and use the arrow keys on whatever changed. 3. For phone layouts, check the drawer and swipe direction at a 390px touch viewport.