@tldraw/tldraw 4.3.0-next.f4772c19540d → 4.4.0-canary.15cff7ea86f8

package/README.md

@@ -6,7 +6,7 @@ This package is kept around for legacy purposes. It just tracks the normal `tldr
 
 This project is part of the tldraw SDK. It is provided under the [tldraw SDK license](https://github.com/tldraw/tldraw/blob/main/LICENSE.md).
 
-You can use the tldraw SDK in commercial or non-commercial projects so long as you preserve the "Made with tldraw" watermark on the canvas. To remove the watermark, you can purchase a [business license](https://tldraw.dev#pricing). Visit [tldraw.dev](https://tldraw.dev) to learn more.
+You can use the tldraw SDK in commercial or non-commercial projects so long as you preserve the "Made with tldraw" watermark on the canvas. To remove the watermark, you can purchase a [business license](https://tldraw.dev/pricing). Visit [tldraw.dev](https://tldraw.dev) to learn more.
 
 ## Trademarks
 

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.3.0-next.f4772c19540d",
+  "4.4.0-canary.15cff7ea86f8",
   "cjs"
 );
 //# sourceMappingURL=index.js.map

package/dist-esm/index.mjs

@@ -2,7 +2,7 @@ import { registerTldrawLibraryVersion } from "tldraw";
 export * from "tldraw";
 registerTldrawLibraryVersion(
   "@tldraw/tldraw",
-  "4.3.0-next.f4772c19540d",
+  "4.4.0-canary.15cff7ea86f8",
   "esm"
 );
 //# sourceMappingURL=index.mjs.map

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tldraw/tldraw",
   "description": "A tiny little drawing editor.",
-  "version": "4.3.0-next.f4772c19540d",
+  "version": "4.4.0-canary.15cff7ea86f8",
   "author": {
     "name": "tldraw Inc.",
     "email": "hello@tldraw.com"
@@ -48,18 +48,19 @@
     "src"
   ],
   "dependencies": {
-    "tldraw": "4.3.0-next.f4772c19540d"
+    "tldraw": "4.4.0-canary.15cff7ea86f8"
   },
   "peerDependencies": {
-    "react": "^18.2.0 || ^19.0.0",
-    "react-dom": "^18.2.0 || ^19.0.0"
+    "react": "^18.2.0 || ^19.2.1",
+    "react-dom": "^18.2.0 || ^19.2.1"
   },
   "devDependencies": {
-    "@types/react": "^18.3.18",
+    "@types/react": "^19.2.7",
+    "@types/react-dom": "^19.2.3",
     "chokidar-cli": "^3.0.0",
     "lazyrepo": "0.0.0-alpha.27",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1"
+    "react": "^19.2.1",
+    "react-dom": "^19.2.1"
   },
   "module": "dist-esm/index.mjs",
   "source": "src/index.ts",

package/tldraw.css

@@ -611,7 +611,6 @@ input,
 	pointer-events: all;
 	white-space: pre-wrap;
 	overflow-wrap: break-word;
-	text-shadow: var(--tl-text-outline);
 }
 
 .tl-text-wrapper[data-font='draw'] {
@@ -713,7 +712,7 @@ input,
 	resize: none;
 	border: none;
 	user-select: none;
-	contain: style paint;
+	contain: layout style paint;
 	/* N.B. This property, while discouraged ("intended for Document Type Definition (DTD) designers") is necessary for ensuring correct mixed RTL/LTR behavior when exporting SVGs. */
 	unicode-bidi: plaintext;
 	-webkit-user-select: none;
@@ -774,7 +773,6 @@ input,
 	justify-content: center;
 	align-items: center;
 	color: var(--tl-color-text);
-	text-shadow: var(--tl-text-outline);
 	line-height: inherit;
 	position: absolute;
 	inset: 0px;
@@ -974,6 +972,14 @@ input,
 	display: block;
 }
 
+.tl-text__outline {
+	text-shadow: var(--tl-text-outline);
+}
+
+.tl-text__no-outline {
+	text-shadow: none;
+}
+
 /* --------------------- Loading -------------------- */
 
 .tl-loading {
@@ -1138,14 +1144,12 @@ input,
 	fill: none;
 }
 
-@media (pointer: coarse) {
-	.tl-handle__bg:active {
-		fill: var(--tl-color-selection-fill);
-	}
+.tl-container[data-coarse='true'] .tl-handle__bg:active {
+	fill: var(--tl-color-selection-fill);
+}
 
-	.tl-handle__create {
-		opacity: 1;
-	}
+.tl-container[data-coarse='true'] .tl-handle__create {
+	opacity: 1;
 }
 
 .tl-rotate-corner:not(:hover),
@@ -1221,7 +1225,6 @@ input,
 	align-items: center;
 	text-align: center;
 	color: var(--tl-color-text);
-	text-shadow: var(--tl-text-outline);
 }
 
 .tl-shape[data-shape-type='arrow'] .tl-text-label__inner {
@@ -1450,7 +1453,6 @@ input,
 }
 
 .tl-note__container > .tl-text-label {
-	text-shadow: none;
 	color: currentColor;
 }
 
@@ -1838,13 +1840,15 @@ it from receiving any pointer events or affecting the cursor. */
 	z-index: 0;
 }
 
-.tlui-button:disabled {
+.tlui-button:disabled,
+.tlui-button[data-disabled] {
 	color: var(--tl-color-text-3);
 	text-shadow: none;
 	cursor: default;
 }
 
-.tlui-button:disabled .tlui-kbd {
+.tlui-button:disabled .tlui-kbd,
+.tlui-button[data-disabled] .tlui-kbd {
 	color: var(--tl-color-text-3);
 }
 
@@ -1893,7 +1897,7 @@ it from receiving any pointer events or affecting the cursor. */
 }
 
 .tlui-button[data-isactive='true']::after,
-.tlui-button[data-isactive='true']:not(:disabled, :focus-visible):active:after {
+.tlui-button[data-isactive='true']:not(:disabled, [data-disabled], :focus-visible):active:after {
 	background: var(--tl-color-hint);
 	opacity: 1;
 }
@@ -1909,11 +1913,11 @@ it from receiving any pointer events or affecting the cursor. */
 		opacity: 1;
 	}
 
-	.tlui-button:not(:disabled):hover {
+	.tlui-button:not(:disabled, [data-disabled]):hover {
 		z-index: 1;
 	}
 
-	.tlui-button:not(:disabled):hover::after {
+	.tlui-button:not(:disabled, [data-disabled]):hover::after {
 		opacity: 1;
 	}
 }
@@ -1952,11 +1956,11 @@ it from receiving any pointer events or affecting the cursor. */
 }
 
 @media (hover: hover) {
-	.tlui-button__primary:not(:disabled, :focus-visible):hover {
+	.tlui-button__primary:not(:disabled, [data-disabled], :focus-visible):hover {
 		color: var(--tl-color-primary);
 	}
 
-	.tlui-button__danger:not(:disabled, :focus-visible):hover {
+	.tlui-button__danger:not(:disabled, [data-disabled], :focus-visible):hover {
 		color: var(--tl-color-danger);
 		text-shadow: none;
 	}
@@ -2044,11 +2048,11 @@ it from receiving any pointer events or affecting the cursor. */
 	color: var(--tl-color-selected-contrast);
 }
 
-.tlui-button__tool[aria-pressed='true']:not(:disabled, :focus-visible):active {
+.tlui-button__tool[aria-pressed='true']:not(:disabled, [data-disabled], :focus-visible):active {
 	color: var(--tl-color-selected-contrast);
 }
 
-.tlui-button__tool[aria-pressed='true']:not(:disabled)::after {
+.tlui-button__tool[aria-pressed='true']:not(:disabled, [data-disabled])::after {
 	background: var(--tl-color-selected);
 	opacity: 1;
 }
@@ -2410,25 +2414,31 @@ it from receiving any pointer events or affecting the cursor. */
 
 /* Submenu triggers */
 
-.tlui-menu__submenu__trigger[data-state='open']::after {
-	opacity: 1;
-	background: linear-gradient(90deg, rgba(144, 144, 144, 0) 0%, var(--tl-color-muted-2) 100%);
+.tlui-menu__submenu__trigger {
+	--gradient-angle: 90deg;
+}
+
+.tlui-menu__submenu__trigger[data-direction='left'] {
+	--gradient-angle: 270deg;
 }
 
-.tlui-menu__submenu__trigger[data-direction='left'][data-state='open']::after {
+.tlui-menu__submenu__trigger[data-state='open']::after {
 	opacity: 1;
-	background: linear-gradient(270deg, rgba(144, 144, 144, 0) 0%, var(--tl-color-muted-2) 100%);
+	background: linear-gradient(
+		var(--gradient-angle),
+		rgba(144, 144, 144, 0) 0%,
+		var(--tl-color-muted-2) 100%
+	);
 }
 
 @media (hover: hover) {
-	.tlui-menu__submenu__trigger[data-state='open']:not(:hover)::after {
+	.tlui-menu__submenu__trigger:is(:hover, [data-state='open'])::after {
 		opacity: 1;
-		background: linear-gradient(90deg, rgba(144, 144, 144, 0) 0%, var(--tl-color-muted-2) 100%);
-	}
-
-	.tlui-menu__submenu__trigger[data-direction='left'][data-state='open']:not(:hover)::after {
-		opacity: 1;
-		background: linear-gradient(270deg, rgba(144, 144, 144, 0) 0%, var(--tl-color-muted-2) 100%);
+		background: linear-gradient(
+			var(--gradient-angle),
+			rgba(144, 144, 144, 0) 0%,
+			var(--tl-color-muted-2) 100%
+		);
 	}
 }
 
@@ -2707,10 +2717,8 @@ it from receiving any pointer events or affecting the cursor. */
 	}
 }
 
-@media (any-pointer: coarse) {
-	.tlui-page_menu__item__submenu > .tlui-button {
-		opacity: 1;
-	}
+.tl-container[data-coarse='true'] .tlui-page_menu__item__submenu > .tlui-button {
+	opacity: 1;
 }
 
 .tlui-button__icon {
@@ -2749,16 +2757,15 @@ it from receiving any pointer events or affecting the cursor. */
 
 .tlui-offline-indicator {
 	display: flex;
-	flex-direction: row;
-	gap: var(--tl-space-3);
-	color: var(--tl-color-text);
-	background-color: var(--tl-color-low);
-	border: 3px solid var(--tl-color-background);
-	padding: 0px var(--tl-space-5);
-	height: 42px;
+	color: var(--tl-color-background);
+	background-color: var(--tl-color-text);
+	border: none;
+	width: 32px;
+	height: 32px;
 	align-items: center;
 	justify-content: center;
 	border-radius: 99px;
+	cursor: default;
 	opacity: 0;
 	animation: tl-fade-in;
 	animation-duration: 0.12s;
@@ -3076,6 +3083,7 @@ tldraw? probably.
 	position: relative;
 	background: var(--tl-color-panel);
 	box-shadow: var(--tl-shadow-2);
+	contain: layout style paint;
 }
 
 .tlui-main-toolbar--horizontal .tlui-main-toolbar__mobile-style-panel {