@tldraw/tldraw 4.2.0 → 4.2.2

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.2.0",
+  "4.2.2",
   "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.2.0",
+  "4.2.2",
   "esm"
 );
 //# sourceMappingURL=index.mjs.map

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tldraw/tldraw",
   "description": "A tiny little drawing editor.",
-  "version": "4.2.0",
+  "version": "4.2.2",
   "author": {
     "name": "tldraw Inc.",
     "email": "hello@tldraw.com"
@@ -48,18 +48,19 @@
     "src"
   ],
   "dependencies": {
-    "tldraw": "4.2.0"
+    "tldraw": "4.2.2"
   },
   "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;
 }
 
@@ -2315,12 +2317,10 @@ it from receiving any pointer events or affecting the cursor. */
 /* If mobile use 16px as font size */
 /* On iOS, font size under 16px in an input will make the page zoom into the input 🤦‍♂️ */
 /* https://css-tricks.com/16px-or-larger-text-prevents-ios-form-zoom/ */
-@media (max-width: 600px) {
-	@supports (-webkit-touch-callout: none) {
-		/* CSS specific to iOS devices */
-		.tlui-input {
-			font-size: 16px;
-		}
+@supports (-webkit-touch-callout: none) {
+	/* CSS specific to iOS devices */
+	.tlui-input {
+		font-size: 16px;
 	}
 }
 
@@ -2412,25 +2412,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'][data-state='open']::after {
+.tlui-menu__submenu__trigger[data-direction='left'] {
+	--gradient-angle: 270deg;
+}
+
+.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%
+		);
 	}
 }
 
@@ -2709,10 +2715,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 {
@@ -2751,16 +2755,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;
@@ -3078,6 +3081,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 {