@tldraw/tldraw 4.2.2 → 4.2.3

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

package/package.json

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

package/tldraw.css

@@ -611,6 +611,7 @@ input,
 	pointer-events: all;
 	white-space: pre-wrap;
 	overflow-wrap: break-word;
+	text-shadow: var(--tl-text-outline);
 }
 
 .tl-text-wrapper[data-font='draw'] {
@@ -712,7 +713,7 @@ input,
 	resize: none;
 	border: none;
 	user-select: none;
-	contain: layout style paint;
+	contain: 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;
@@ -773,6 +774,7 @@ 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;
@@ -972,14 +974,6 @@ input,
 	display: block;
 }
 
-.tl-text__outline {
-	text-shadow: var(--tl-text-outline);
-}
-
-.tl-text__no-outline {
-	text-shadow: none;
-}
-
 /* --------------------- Loading -------------------- */
 
 .tl-loading {
@@ -1144,12 +1138,14 @@ input,
 	fill: none;
 }
 
-.tl-container[data-coarse='true'] .tl-handle__bg:active {
-	fill: var(--tl-color-selection-fill);
-}
+@media (pointer: coarse) {
+	.tl-handle__bg:active {
+		fill: var(--tl-color-selection-fill);
+	}
 
-.tl-container[data-coarse='true'] .tl-handle__create {
-	opacity: 1;
+	.tl-handle__create {
+		opacity: 1;
+	}
 }
 
 .tl-rotate-corner:not(:hover),
@@ -1225,6 +1221,7 @@ 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 {
@@ -1453,6 +1450,7 @@ input,
 }
 
 .tl-note__container > .tl-text-label {
+	text-shadow: none;
 	color: currentColor;
 }
 
@@ -2317,10 +2315,12 @@ 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/ */
-@supports (-webkit-touch-callout: none) {
-	/* CSS specific to iOS devices */
-	.tlui-input {
-		font-size: 16px;
+@media (max-width: 600px) {
+	@supports (-webkit-touch-callout: none) {
+		/* CSS specific to iOS devices */
+		.tlui-input {
+			font-size: 16px;
+		}
 	}
 }
 
@@ -2412,31 +2412,25 @@ it from receiving any pointer events or affecting the cursor. */
 
 /* Submenu triggers */
 
-.tlui-menu__submenu__trigger {
-	--gradient-angle: 90deg;
-}
-
-.tlui-menu__submenu__trigger[data-direction='left'] {
-	--gradient-angle: 270deg;
+.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[data-state='open']::after {
+.tlui-menu__submenu__trigger[data-direction='left'][data-state='open']::after {
 	opacity: 1;
-	background: linear-gradient(
-		var(--gradient-angle),
-		rgba(144, 144, 144, 0) 0%,
-		var(--tl-color-muted-2) 100%
-	);
+	background: linear-gradient(270deg, rgba(144, 144, 144, 0) 0%, var(--tl-color-muted-2) 100%);
 }
 
 @media (hover: hover) {
-	.tlui-menu__submenu__trigger:is(:hover, [data-state='open'])::after {
+	.tlui-menu__submenu__trigger[data-state='open']:not(:hover)::after {
 		opacity: 1;
-		background: linear-gradient(
-			var(--gradient-angle),
-			rgba(144, 144, 144, 0) 0%,
-			var(--tl-color-muted-2) 100%
-		);
+		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%);
 	}
 }
 
@@ -2715,8 +2709,10 @@ it from receiving any pointer events or affecting the cursor. */
 	}
 }
 
-.tl-container[data-coarse='true'] .tlui-page_menu__item__submenu > .tlui-button {
-	opacity: 1;
+@media (any-pointer: coarse) {
+	.tlui-page_menu__item__submenu > .tlui-button {
+		opacity: 1;
+	}
 }
 
 .tlui-button__icon {
@@ -2755,15 +2751,16 @@ it from receiving any pointer events or affecting the cursor. */
 
 .tlui-offline-indicator {
 	display: flex;
-	color: var(--tl-color-background);
-	background-color: var(--tl-color-text);
-	border: none;
-	width: 32px;
-	height: 32px;
+	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;
 	align-items: center;
 	justify-content: center;
 	border-radius: 99px;
-	cursor: default;
 	opacity: 0;
 	animation: tl-fade-in;
 	animation-duration: 0.12s;
@@ -3081,7 +3078,6 @@ 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 {