@tldraw/tldraw 4.5.2 → 4.6.0-canary.00a8c03b5687

package/dist-cjs/index.js

@@ -19,7 +19,7 @@ var import_tldraw = require("tldraw");
 __reExport(index_exports, require("tldraw"), module.exports);
 (0, import_tldraw.registerTldrawLibraryVersion)(
   "@tldraw/tldraw",
-  "4.5.2",
+  "4.6.0-canary.00a8c03b5687",
   "cjs"
 );
 //# sourceMappingURL=index.js.map

package/dist-cjs/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../src/index.ts"],
-  "sourcesContent": ["import { registerTldrawLibraryVersion } from 'tldraw'\n// eslint-disable-next-line local/no-export-star\nexport * from 'tldraw'\n\nregisterTldrawLibraryVersion(\n\t(globalThis as any).TLDRAW_LIBRARY_NAME,\n\t(globalThis as any).TLDRAW_LIBRARY_VERSION,\n\t(globalThis as any).TLDRAW_LIBRARY_MODULES\n)\n"],
+  "sourcesContent": ["import { registerTldrawLibraryVersion } from 'tldraw'\n// eslint-disable-next-line tldraw/no-export-star\nexport * from 'tldraw'\n\nregisterTldrawLibraryVersion(\n\t(globalThis as any).TLDRAW_LIBRARY_NAME,\n\t(globalThis as any).TLDRAW_LIBRARY_VERSION,\n\t(globalThis as any).TLDRAW_LIBRARY_MODULES\n)\n"],
   "mappings": ";;;;;;;;;;;;;;;AAAA;AAAA;AAAA,oBAA6C;AAE7C,0BAAc,mBAFd;AAAA,IAIA;AAAA,EACE;AAAA,EACA;AAAA,EACA;AACF;",
   "names": []
 }

package/dist-esm/index.mjs

@@ -2,7 +2,7 @@ import { registerTldrawLibraryVersion } from "tldraw";
 export * from "tldraw";
 registerTldrawLibraryVersion(
   "@tldraw/tldraw",
-  "4.5.2",
+  "4.6.0-canary.00a8c03b5687",
   "esm"
 );
 //# sourceMappingURL=index.mjs.map

package/dist-esm/index.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../src/index.ts"],
-  "sourcesContent": ["import { registerTldrawLibraryVersion } from 'tldraw'\n// eslint-disable-next-line local/no-export-star\nexport * from 'tldraw'\n\nregisterTldrawLibraryVersion(\n\t(globalThis as any).TLDRAW_LIBRARY_NAME,\n\t(globalThis as any).TLDRAW_LIBRARY_VERSION,\n\t(globalThis as any).TLDRAW_LIBRARY_MODULES\n)\n"],
+  "sourcesContent": ["import { registerTldrawLibraryVersion } from 'tldraw'\n// eslint-disable-next-line tldraw/no-export-star\nexport * from 'tldraw'\n\nregisterTldrawLibraryVersion(\n\t(globalThis as any).TLDRAW_LIBRARY_NAME,\n\t(globalThis as any).TLDRAW_LIBRARY_VERSION,\n\t(globalThis as any).TLDRAW_LIBRARY_MODULES\n)\n"],
   "mappings": "AAAA,SAAS,oCAAoC;AAE7C,cAAc;AAEd;AAAA,EACE;AAAA,EACA;AAAA,EACA;AACF;",
   "names": []
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tldraw/tldraw",
   "description": "A tiny little drawing editor.",
-  "version": "4.5.2",
+  "version": "4.6.0-canary.00a8c03b5687",
   "author": {
     "name": "tldraw Inc.",
     "email": "hello@tldraw.com"
@@ -38,7 +38,7 @@
     "prepack": "yarn run -T tsx ../../internal/scripts/prepack.ts",
     "postpack": "../../internal/scripts/postpack.sh",
     "pack-tarball": "yarn pack",
-    "lint": "yarn run -T tsx ../../internal/scripts/lint.ts"
+    "lint": "cd ../.. && yarn run -T oxlint packages/namespaced-tldraw"
   },
   "files": [
     "tldraw.css",
@@ -47,7 +47,7 @@
     "src"
   ],
   "dependencies": {
-    "tldraw": "4.5.2"
+    "tldraw": "4.6.0-canary.00a8c03b5687"
   },
   "peerDependencies": {
     "react": "^18.2.0 || ^19.2.1",

package/src/index.ts

@@ -1,5 +1,5 @@
 import { registerTldrawLibraryVersion } from 'tldraw'
-// eslint-disable-next-line local/no-export-star
+// eslint-disable-next-line tldraw/no-export-star
 export * from 'tldraw'
 
 registerTldrawLibraryVersion(

package/tldraw.css

@@ -1892,7 +1892,7 @@ it from receiving any pointer events or affecting the cursor. */
 .tlui-button__label {
 	font-size: 12px;
 	flex-grow: 2;
-	text-align: left;
+	text-align: start;
 }
 
 /*
@@ -1955,7 +1955,7 @@ it from receiving any pointer events or affecting the cursor. */
 }
 
 .tlui-button__icon + .tlui-button__label {
-	margin-left: var(--tl-space-2);
+	margin-inline-start: var(--tl-space-2);
 }
 
 /* Low button  */
@@ -2014,7 +2014,7 @@ it from receiving any pointer events or affecting the cursor. */
 }
 
 .tlui-button__menu > .tlui-icon + .tlui-button__label {
-	margin-left: 0px;
+	margin-inline-start: 0px;
 }
 
 .tlui-button__menu:nth-child(1) {
@@ -2417,7 +2417,7 @@ it from receiving any pointer events or affecting the cursor. */
 	grid-auto-columns: minmax(1em, auto);
 	align-self: bottom;
 	color: currentColor;
-	margin-left: var(--tl-space-4);
+	margin-inline-start: var(--tl-space-4);
 }
 
 .tlui-kbd > span {
@@ -2430,11 +2430,11 @@ it from receiving any pointer events or affecting the cursor. */
 }
 
 .tlui-kbd > span:last-child {
-	padding-right: 0;
+	padding-inline-end: 0;
 }
 
 .tlui-kbd:not(:last-child) {
-	margin-right: var(--tl-space-2);
+	margin-inline-end: var(--tl-space-2);
 }
 
 /* Focus Mode Button */
@@ -2614,7 +2614,7 @@ it from receiving any pointer events or affecting the cursor. */
 	align-items: center;
 	width: 100%;
 	height: 40px;
-	padding-left: var(--tl-space-4);
+	padding-inline-start: var(--tl-space-4);
 	border-bottom: 1px solid var(--tl-color-divider);
 }
 
@@ -2630,7 +2630,7 @@ it from receiving any pointer events or affecting the cursor. */
 
 .tlui-page-menu__name {
 	flex-grow: 2;
-	text-align: left;
+	text-align: start;
 	overflow: hidden;
 	text-overflow: ellipsis;
 	white-space: nowrap;
@@ -2670,41 +2670,41 @@ it from receiving any pointer events or affecting the cursor. */
 
 .tlui-page-menu__item__button:not(:only-child) {
 	flex-grow: 2;
-	margin-right: -2px;
+	margin-inline-end: -2px;
 }
 
 .tlui-page-menu__item__button > span {
 	display: block;
 	flex-grow: 2;
-	text-align: left;
+	text-align: start;
 	overflow: hidden;
 	text-overflow: ellipsis;
 	white-space: nowrap;
 }
 
 .tlui-page-menu__item__button > span {
-	padding-right: calc(40px - 12px);
+	padding-inline-end: calc(40px - 12px);
 }
 
 @media (hover: hover) {
 	.tlui-page-menu__item__button > span {
-		padding-right: 0px;
+		padding-inline-end: 0px;
 	}
 
 	.tlui-page-menu__item:hover > .tlui-page-menu__item__button > span {
-		padding-right: calc(40px - 12px);
+		padding-inline-end: calc(40px - 12px);
 	}
 }
 
 .tlui-page-menu__item__button__checkbox {
-	padding-left: 35px;
+	padding-inline-start: 35px;
 }
 
 .tlui-page-menu__item__button__check {
 	position: absolute;
-	left: 0px;
+	inset-inline-start: 0px;
 	width: 24px;
-	padding-left: 10px;
+	padding-inline-start: 10px;
 	display: inline-flex;
 	align-items: center;
 	justify-content: center;
@@ -2714,7 +2714,7 @@ it from receiving any pointer events or affecting the cursor. */
 .tlui-page_menu__item__sortable {
 	position: absolute;
 	top: 0px;
-	left: 0px;
+	inset-inline-start: 0px;
 	width: 100%;
 	height: fit-content;
 	display: flex;
@@ -2744,7 +2744,7 @@ it from receiving any pointer events or affecting the cursor. */
 	cursor: grab;
 	color: var(--tl-color-text-3);
 	flex-shrink: 0;
-	margin-right: -9px;
+	margin-inline-end: -9px;
 }
 
 .tlui-page_menu__item__sortable__handle:active {
@@ -2752,7 +2752,7 @@ it from receiving any pointer events or affecting the cursor. */
 }
 
 .tlui-page-menu__item__input {
-	margin-left: 12px;
+	margin-inline-start: 12px;
 	height: 100%;
 }
 
@@ -2763,12 +2763,12 @@ it from receiving any pointer events or affecting the cursor. */
 .tlui-page_menu__item__submenu {
 	pointer-events: all;
 	position: absolute;
-	right: 0px;
+	inset-inline-end: 0px;
 	top: 0px;
 	height: 100%;
 	cursor: pointer;
 	margin: 0px;
-	margin-left: -2px;
+	margin-inline-start: -2px;
 	z-index: 10;
 }
 
@@ -2788,11 +2788,21 @@ it from receiving any pointer events or affecting the cursor. */
 	opacity: 1;
 }
 
+.tl-container[dir='rtl'] .tlui-page_menu__item__submenu > .tlui-button[data-state='open']::after {
+	background: linear-gradient(270deg, rgba(144, 144, 144, 0) 0%, var(--tl-color-muted-2) 100%);
+}
+
 @media (hover: hover) {
 	.tlui-page_menu__item__submenu > .tlui-button[data-state='open']:not(:hover)::after {
 		background: linear-gradient(90deg, rgba(144, 144, 144, 0) 0%, var(--tl-color-muted-2) 100%);
 		opacity: 1;
 	}
+
+	.tl-container[dir='rtl']
+		.tlui-page_menu__item__submenu
+		> .tlui-button[data-state='open']:not(:hover)::after {
+		background: linear-gradient(270deg, rgba(144, 144, 144, 0) 0%, var(--tl-color-muted-2) 100%);
+	}
 }
 
 .tl-container[data-coarse='true'] .tlui-page_menu__item__submenu > .tlui-button {
@@ -2804,7 +2814,7 @@ it from receiving any pointer events or affecting the cursor. */
 }
 
 .tlui-page-menu__item__button .tlui-button__icon {
-	margin-right: 4px;
+	margin-inline-end: 4px;
 }
 
 @media (hover: hover) {
@@ -3023,6 +3033,11 @@ tldraw? probably.
 	left: 0px;
 }
 
+.tl-container[dir='rtl'] .tlui-navigation-panel {
+	left: auto;
+	right: 0px;
+}
+
 .tlui-navigation-panel::before {
 	content: '';
 	display: block;
@@ -3036,6 +3051,14 @@ tldraw? probably.
 	background-color: var(--tl-color-low);
 }
 
+.tl-container[dir='rtl'] .tlui-navigation-panel::before {
+	inset: -2px 0px 0px -2px;
+	border-right: 0;
+	border-left: 2px solid var(--tl-color-background);
+	border-top-right-radius: 0;
+	border-top-left-radius: var(--tl-radius-4);
+}
+
 .tlui-navigation-panel[data-a11y='true']::before {
 	display: none;
 }
@@ -3270,7 +3293,7 @@ tldraw? probably.
 	align-items: center;
 	grid-template-columns: 1fr auto auto auto;
 	justify-content: space-between;
-	padding-left: var(--tl-space-4);
+	padding-inline-start: var(--tl-space-4);
 	border-top: 1px solid var(--tl-color-background);
 	font-size: 12px;
 	color: var(--tl-color-text-1);
@@ -3319,13 +3342,17 @@ tldraw? probably.
 	z-index: var(--tl-layer-toasts);
 }
 
+.tl-container[dir='rtl'] .tlui-toast__viewport {
+	padding: 0px 0px 64px var(--tl-space-3);
+}
+
 .tlui-toast__viewport > * {
 	pointer-events: all;
 }
 
 .tlui-toast__icon {
 	padding-top: 11px;
-	padding-left: var(--tl-space-4);
+	padding-inline-start: var(--tl-space-4);
 	color: var(--tl-color-text-1);
 }
 
@@ -3423,6 +3450,18 @@ tldraw? probably.
 	.tlui-toast__container[data-swipe='end'] {
 		animation: tlui-slide-out 100ms ease-out;
 	}
+
+	.tl-container[dir='rtl'] .tlui-toast__container[data-state='open'] {
+		animation: tlui-slide-in-rtl 200ms cubic-bezier(0.785, 0.135, 0.15, 0.86);
+	}
+
+	.tl-container[dir='rtl'] .tlui-toast__container[data-state='closed'] {
+		animation: tlui-fade-out 100ms ease-in;
+	}
+
+	.tl-container[dir='rtl'] .tlui-toast__container[data-swipe='end'] {
+		animation: tlui-slide-out-rtl 100ms ease-out;
+	}
 }
 
 /* ---------------- Dialog ---------------- */
@@ -3464,7 +3503,7 @@ tldraw? probably.
 	align-items: center;
 	flex: 0;
 	z-index: var(--tl-layer-header-footer);
-	padding-left: var(--tl-space-4);
+	padding-inline-start: var(--tl-space-4);
 	color: var(--tl-color-text);
 	height: 40px;
 }
@@ -3753,7 +3792,7 @@ tldraw? probably.
 }
 
 .tlui-people-menu__avatar:nth-of-type(n + 2) {
-	margin-left: -12px;
+	margin-inline-start: -12px;
 }
 
 .tlui-people-menu__avatars-button[data-state='open'] {
@@ -3818,7 +3857,7 @@ tldraw? probably.
 }
 
 .tlui-people-menu__user__name {
-	text-align: left;
+	text-align: start;
 	overflow: hidden;
 	text-overflow: ellipsis;
 	white-space: nowrap;
@@ -3830,7 +3869,7 @@ tldraw? probably.
 }
 
 .tlui-people-menu__user__label {
-	text-align: left;
+	text-align: start;
 	overflow: hidden;
 	text-overflow: ellipsis;
 	white-space: nowrap;
@@ -3838,7 +3877,7 @@ tldraw? probably.
 	color: var(--tl-color-text-3);
 	flex-grow: 100;
 	flex-shrink: 0;
-	margin-left: 4px;
+	margin-inline-start: 4px;
 }
 
 .tlui-people-menu__user__input {
@@ -3881,7 +3920,7 @@ tldraw? probably.
 }
 
 .tlui-people-menu__name {
-	text-align: left;
+	text-align: start;
 	white-space: nowrap;
 	overflow: hidden;
 	text-overflow: ellipsis;
@@ -3890,14 +3929,14 @@ tldraw? probably.
 .tlui-people-menu__item__follow {
 	position: absolute;
 	top: 0px;
-	right: 0px;
+	inset-inline-end: 0px;
 	max-width: 40px;
 	flex-shrink: 0;
 }
 
 .tlui-people-menu__item[data-follow='true'],
 .tlui-people-menu__item:has(.tlui-button:focus-visible) {
-	padding-right: 36px;
+	padding-inline-end: 36px;
 }
 
 .tlui-people-menu__item[data-follow='true'] .tlui-people-menu__item__follow,
@@ -4036,3 +4075,21 @@ tldraw? probably.
 	}
 }
 
+@keyframes tlui-slide-in-rtl {
+	from {
+		transform: translateX(calc(-100% - var(--tl-space-3)));
+	}
+	to {
+		transform: translateX(0px);
+	}
+}
+
+@keyframes tlui-slide-out-rtl {
+	from {
+		transform: translateX(var(--radix-toast-swipe-end-x));
+	}
+	to {
+		transform: translateX(calc(-100% - var(--tl-space-3)));
+	}
+}
+