[pull] main from tldraw:main

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,