feat(ui): add RTL support for tldraw UI (tldraw#8033)

Resurrects the approach from tldraw#6682 with review feedback addressed. In
order to support RTL languages like Arabic in the tldraw UI, this PR
adds a `useDirection()` hook and updates all Radix UI components and CSS
to respect the current locale's text direction.

Screenshot:
<img width="1430" height="658" alt="Screenshot 2026-03-09 at 10 19 14"
src="https://github.com/user-attachments/assets/9b0e91a8-74be-4be3-93b4-caa55662ecc9"
/>


### Key changes

- **`useDirection()` hook**: Returns `'ltr'` or `'rtl'` from the current
translation context. Exported publicly from `@tldraw/tldraw`.
- **Container `dir` attribute**: Set on `.tl-container` via `useEffect`
so CSS can use `.tl-container[dir='rtl']` selectors (review feedback:
set `dir` on container instead of scattering it everywhere).
- **Provider reordering**: `TldrawUiTranslationProvider` moved above
`TldrawUiTooltipProvider` so tooltips can access direction (review
feedback from tldraw#6682).
- **Radix `dir` prop**: All Radix UI root components use `dir={dir}`
instead of hardcoded `dir="ltr"` — dropdown menus, popovers, dialogs,
selects, sliders, tooltips, context menus. Context menu trigger keeps
`dir="ltr"` since the canvas is always LTR.
- **Submenu chevrons**: Flip to `chevron-left` in RTL mode.
- **CSS logical properties**: Converted physical properties
(`margin-left`, `padding-right`, `text-align: left`, `left`/`right`) to
logical equivalents (`margin-inline-start`, `padding-inline-end`,
`text-align: start`, `inset-inline-start`/`inset-inline-end`). Added
`.tl-container[dir='rtl']` overrides for gradients that can't use
logical properties.

### Review feedback from tldraw#6682 addressed

1. ✅ Set `dir` on `.tl-container` instead of scattering `dir` attributes
2. ✅ Don't call hooks inline as props — hooks called at component level
3. ✅ Keep popover `align = 'center'` default unchanged
4. ✅ No brittle `width: 15px` on `.tlui-kbd > span`
5. ✅ Use Radix `dir` props instead of CSS `!important` overrides
6. ✅ Context menu trigger uses `dir="ltr"` (canvas is always LTR), Root
uses `{dir}`
7. ✅ `TldrawUiTranslationProvider` moved above `TldrawUiTooltipProvider`

### Change type

- [x] `feature`

### Test plan

1. `yarn dev` → open localhost:5420
2. Switch language to Arabic (العربية) in user preferences
3. Verify menus open on the correct side
4. Verify context menu positions correctly
5. Verify keyboard shortcuts display correctly in menus
6. Verify page menu layout mirrors
7. Verify submenus have left chevrons
8. Verify dialog titles and buttons respect direction

- [x] Unit tests

### API changes

- Added `useDirection()` — returns current text direction (`'ltr'` |
`'rtl'`) based on locale

### Release notes

- Add RTL (right-to-left) support for the tldraw UI when using Arabic
and other RTL languages


<!-- CURSOR_SUMMARY -->
---

> [!NOTE]
> **Medium Risk**
> Touches a wide surface area of UI components and CSS, so regressions
in menu positioning, animations, and resizing behavior are possible,
especially in mixed LTR/RTL embedding scenarios. No auth or
data-handling logic changes.
> 
> **Overview**
> Adds end-to-end RTL support by deriving a `dir` value from the active
translation/locale and propagating it through the UI.
> 
> Introduces `useDirection()` (public) plus a shared `RTL_LANGUAGES`
set, sets `dir`/`lang` on the `.tl-container`, and updates Radix-based
primitives (menus, popovers, dialogs, selects, sliders, tooltips,
context menus) to use `dir={dir}` instead of hardcoded LTR, including
flipping submenu chevrons in RTL.
> 
> Updates styling to be direction-aware via CSS logical properties and
targeted `.tl-container[dir='rtl']` overrides (e.g., sidebar/layout
positioning, toast animations/gradients, watermark placement, and dotcom
cookie/sidebar spacing), and reorders providers so tooltips can access
translation direction.
> 
> <sup>Written by [Cursor
Bugbot](https://cursor.com/dashboard?tab=bugbot) for commit
5b11d76. This will update automatically
on new commits. Configure
[here](https://cursor.com/dashboard?tab=bugbot).</sup>
<!-- /CURSOR_SUMMARY -->

Author: mimecuvalo

apps/dotcom/client/src/tla/components/TlaSidebar/sidebar.module.css

@@ -15,6 +15,13 @@
 	transition: transform 0.16s ease-in-out;
 }
 
+:global(.tl-container[dir='rtl']) .sidebar {
+	left: auto;
+	right: calc(var(--tla-sidebar-width) * -1);
+	border-right: none;
+	border-left: 1px solid transparent;
+}
+
 .sidebarDragOverlay {
 	position: absolute;
 	inset: 0px;
@@ -59,6 +66,15 @@
 		transform: translate(100%, 0px);
 		transition: transform 0.22s ease-out;
 	}
+
+	:global(.tl-container[dir='rtl']) .sidebar {
+		border-right: none;
+		border-left: 1px solid var(--tl-color-low);
+	}
+
+	:global(.tl-container[dir='rtl']) .sidebar[data-visible='true'] {
+		transform: translate(-100%, 0px);
+	}
 }
 
 @media (max-width: 767px) {
@@ -73,6 +89,15 @@
 		transform: translate(100%, 0px);
 	}
 
+	:global(.tl-container[dir='rtl']) .sidebar {
+		left: auto;
+		right: calc(var(--w) * -1);
+	}
+
+	:global(.tl-container[dir='rtl']) .sidebar[data-visiblemobile='true'] {
+		transform: translate(-100%, 0px);
+	}
+
 	.sidebarOverlayMobile[data-visiblemobile='true'] {
 		display: block;
 	}
@@ -261,6 +286,11 @@
 	z-index: 10;
 }
 
+:global(.tl-container[dir='rtl']) .sidebarCreateFileButton {
+	right: auto;
+	left: -8px;
+}
+
 .sidebarCreateFileButton::after {
 	display: block;
 	content: '';
@@ -550,7 +580,7 @@
 	border: none;
 	position: relative;
 	outline: none;
-	margin-right: -10px;
+	margin-inline-end: -10px;
 	width: 36px;
 	height: 36px;
 	min-width: 0;

apps/dotcom/client/src/tla/components/dialogs/dialogs.module.css

@@ -50,6 +50,11 @@
 	animation-delay: 2s;
 }
 
+:global(.tl-container[dir='rtl']) .cookieConsent {
+	margin-right: 0;
+	margin-left: 4px;
+}
+
 @keyframes slideUp {
 	0% {
 		transform: translate(0px, 110%);
@@ -153,6 +158,11 @@
 	width: fit-content;
 }
 
+:global(.tl-container[dir='rtl']) .cookieConsentWrapper {
+	right: auto;
+	left: 0;
+}
+
 .noPadding {
 	padding: 0px;
 }

apps/dotcom/client/src/tla/layouts/TlaSidebarLayout/TlaSidebarLayout.tsx

@@ -80,9 +80,14 @@ export function TlaSidebarLayout({
 
 		if (rResizeState.current.name === 'resizing') {
 			const { startX, startWidth } = rResizeState.current
+			const direction = getComputedStyle(
+				rLayoutContainer.current ?? document.documentElement
+			).direction
+			const deltaX = moveEvent.clientX - startX
+			const widthDelta = direction === 'rtl' ? -deltaX : deltaX
 
 			const newWidth = Math.floor(
-				clamp(startWidth + (moveEvent.clientX - startX), MIN_SIDEBAR_WIDTH, MAX_SIDEBAR_WIDTH)
+				clamp(startWidth + widthDelta, MIN_SIDEBAR_WIDTH, MAX_SIDEBAR_WIDTH)
 			)
 
 			if (newWidth !== getLocalSessionStateUnsafe().sidebarWidth) {

apps/dotcom/client/src/tla/layouts/TlaSidebarLayout/sidebar-layout.module.css

@@ -9,6 +9,10 @@
 	transition: padding-left 0.16s ease-in-out;
 	background-color: var(--tl-color-background);
 }
+
+:global(.tl-container[dir='rtl']) .layout {
+	transition: padding-right 0.16s ease-in-out;
+}
 .layout[data-resizing='true'] {
 	pointer-events: none;
 	transition: none !important;
@@ -21,6 +25,12 @@
 	}
 }
 
+:global(.tl-container[dir='rtl']) .layout[data-sidebar='true'] {
+	padding-left: 0;
+	padding-right: var(--tla-sidebar-width);
+	transition: padding-right 0.22s ease-out;
+}
+
 .resizeHandle {
 	--indicator-width: 2px;
 	--hoverable-width: 6px;
@@ -36,6 +46,11 @@
 	display: none;
 }
 
+:global(.tl-container[dir='rtl']) .resizeHandle {
+	left: auto;
+	right: calc(var(--tla-sidebar-width) - var(--hoverable-width) + 1px);
+}
+
 /* make the handle bigger while mouse is down to avoid flickering */
 .resizeHandle:active {
 	left: calc(
@@ -45,6 +60,13 @@
 	display: flex;
 }
 
+:global(.tl-container[dir='rtl']) .resizeHandle:active {
+	left: auto;
+	right: calc(
+		var(--tla-sidebar-width) - (var(--active-width) / 2) - (var(--hoverable-width) / 2) + 1px
+	);
+}
+
 @media (min-width: 768px) {
 	.resizeHandle {
 		display: flex;
@@ -72,3 +94,8 @@
 	margin-left: 4px;
 	z-index: 1;
 }
+
+:global(.tl-container[dir='rtl']) .toggleContainer {
+	margin-left: 0;
+	margin-right: 4px;
+}

apps/dotcom/client/src/tla/providers/TlaRootProviders.tsx

@@ -10,6 +10,7 @@ import {
 	DefaultDialogs,
 	DefaultToasts,
 	EditorContext,
+	RTL_LANGUAGES,
 	TLUiEventHandler,
 	TldrawUiA11yProvider,
 	TldrawUiContextProvider,
@@ -45,6 +46,11 @@ import {
 
 const assetUrls = getAssetUrlsByImport()
 
+function getTextDirection(locale: string): 'ltr' | 'rtl' {
+	const [language] = locale.toLowerCase().split('-')
+	return RTL_LANGUAGES.has(language) ? 'rtl' : 'ltr'
+}
+
 // Override watermark URLs globally for all dotcom editors
 function WatermarkOverride() {
 	useEffect(() => {
@@ -100,10 +106,12 @@ export function Component() {
 	const [theme, setTheme] = useState<'light' | 'dark' | 'system'>(
 		() => getLocalSessionState().theme
 	)
+	const dir = getTextDirection(locale)
 	const handleThemeChange = (theme: 'light' | 'dark' | 'system') => setTheme(theme)
 	const handleLocaleChange = (locale: string) => {
 		setLocale(locale)
 		document.documentElement.lang = locale
+		document.documentElement.dir = getTextDirection(locale)
 	}
 	const isFocusMode = useValue(
 		'isFocusMode',
@@ -124,6 +132,7 @@ export function Component() {
 	return (
 		<div
 			ref={setContainer}
+			dir={dir}
 			className={classNames(`tla tl-container tla-theme-container`, {
 				'tla-theme__light tl-theme__light': theme === 'light',
 				'tla-theme__dark tl-theme__dark': theme !== 'light',

apps/dotcom/client/src/tla/styles/tla.css

@@ -243,6 +243,10 @@
 	overflow: hidden;
 }
 
+.tl-container[dir='rtl'] .tlui-layout__top__right > div:first-child {
+	margin-left: 4px;
+}
+
 .tlui-page-menu__trigger {
 	width: fit-content;
 	max-width: 128px;

packages/editor/src/lib/license/Watermark.tsx

@@ -191,6 +191,16 @@ To remove the watermark, please purchase a license at tldraw.dev.
 	height: 32px;
 }
 
+.tl-container[dir='rtl'] .${className} {
+	right: auto;
+	left: max(var(--tl-space-2), env(safe-area-inset-left));
+}
+
+.tl-container[dir='rtl'] .${className}[data-mobile='true'] {
+	border-radius: 0px 4px 4px 0px;
+	left: max(-2px, calc(env(safe-area-inset-left) - 2px));
+}
+
 .${className}[data-unlicensed='true'] > button {
 	font-size: 100px;
 	position: absolute;

packages/tldraw/api-report.api.md

@@ -2773,6 +2773,9 @@ export interface RichTextSVGProps {
 // @public (undocumented)
 export function RotateCWMenuItem(): JSX.Element;
 
+// @public (undocumented)
+export const RTL_LANGUAGES: Set<string>;
+
 // @public
 export function sanitizeSvg(svgText: string): string;
 
@@ -5566,6 +5569,9 @@ export function useDefaultHelpers(): {
 // @public (undocumented)
 export function useDialogs(): TLUiDialogsContextType;
 
+// @public
+export function useDirection(): "ltr" | "rtl";
+
 // @public (undocumented)
 export function useEditablePlainText(shapeId: TLShapeId, type: ExtractShapeByProps<{
     text: string;

packages/tldraw/src/index.ts

@@ -678,9 +678,10 @@ export {
 	type TLUiToolsProviderProps,
 } from './lib/ui/hooks/useTools'
 export { type TLUiTranslationKey } from './lib/ui/hooks/useTranslation/TLUiTranslationKey'
-export { type TLUiTranslation } from './lib/ui/hooks/useTranslation/translations'
+export { RTL_LANGUAGES, type TLUiTranslation } from './lib/ui/hooks/useTranslation/translations'
 export {
 	useCurrentTranslation,
+	useDirection,
 	useTranslation,
 	type TLUiTranslationContextType,
 	type TLUiTranslationProviderProps,