@tldraw/tldraw 4.4.0-next.84d68f44c848 → 4.4.0-next.bde73a32273d

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.4.0-next.84d68f44c848",
+  "4.4.0-next.bde73a32273d",
   "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.4.0-next.84d68f44c848",
+  "4.4.0-next.bde73a32273d",
   "esm"
 );
 //# sourceMappingURL=index.mjs.map

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tldraw/tldraw",
   "description": "A tiny little drawing editor.",
-  "version": "4.4.0-next.84d68f44c848",
+  "version": "4.4.0-next.bde73a32273d",
   "author": {
     "name": "tldraw Inc.",
     "email": "hello@tldraw.com"
@@ -38,8 +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",
-    "context": "yarn run -T tsx ../../internal/scripts/context.ts"
+    "lint": "yarn run -T tsx ../../internal/scripts/lint.ts"
   },
   "files": [
     "tldraw.css",
@@ -48,7 +47,7 @@
     "src"
   ],
   "dependencies": {
-    "tldraw": "4.4.0-next.84d68f44c848"
+    "tldraw": "4.4.0-next.bde73a32273d"
   },
   "peerDependencies": {
     "react": "^18.2.0 || ^19.2.1",

package/tldraw.css

@@ -26,14 +26,25 @@
 	--tl-radius-3: 9px;
 	--tl-radius-4: 11px;
 
-	/* Canvas z-index */
+	/*
+	 * Canvas z-index
+	 *
+	 * .tl-canvas has `contain: strict` which creates its own stacking context.
+	 * background, grid, shapes, overlays, and blocker are all children of .tl-canvas,
+	 * so their z-indices are relative to the canvas, not the container.
+	 *
+	 * watermark and canvas-in-front are siblings of .tl-canvas (outside it),
+	 * so they compete with the UI layer (.tlui-layout at z-index 300).
+	 * canvas-in-front must be below the UI layer (300) to sit between
+	 * the canvas and the UI.
+	 */
 	--tl-layer-canvas-hidden: -999999;
 	--tl-layer-canvas-background: 100;
 	--tl-layer-canvas-grid: 150;
 	--tl-layer-watermark: 200;
+	--tl-layer-canvas-in-front: 250;
 	--tl-layer-canvas-shapes: 300;
 	--tl-layer-canvas-overlays: 500;
-	--tl-layer-canvas-in-front: 600;
 	--tl-layer-canvas-blocker: 10000;
 
 	/* Canvas overlays z-index */
@@ -64,6 +75,7 @@
 
 	/* Misc */
 	--tl-zoom: 1;
+	--tl-tab-size: 2;
 
 	/* Cursor SVGs */
 	--tl-cursor-none: none;
@@ -150,6 +162,8 @@
 	--tl-color-selection-fill: hsl(210, 100%, 56%, 24%);
 	--tl-color-selection-stroke: hsl(214, 84%, 56%);
 	--tl-color-background: hsl(210, 20%, 98%);
+	/* if you ever update --tl-color-background, update the hardcoded values in theme-init.js and globals.css
+	they're there to make sure the background color matches the user's preference before the actual app loads*/
 	--tl-color-brush-fill: hsl(0, 0%, 56%, 10.2%);
 	--tl-color-brush-stroke: hsl(0, 0%, 56%, 25.1%);
 	--tl-color-grid: hsl(0, 0%, 43%);
@@ -206,6 +220,8 @@
 	--tl-color-selection-fill: hsl(209, 100%, 57%, 20%);
 	--tl-color-selection-stroke: hsl(214, 84%, 56%);
 	--tl-color-background: hsl(240, 5%, 6.5%);
+	/* if you ever update --tl-color-background, update the hardcoded values in theme-init.js and globals.css
+	they're there to make sure the background color matches the user's preference before the actual app loads*/
 	--tl-color-brush-fill: hsl(0, 0%, 71%, 5.1%);
 	--tl-color-brush-stroke: hsl(0, 0%, 71%, 25.1%);
 	--tl-color-grid: hsl(0, 0%, 40%);
@@ -899,6 +915,10 @@ input,
 	/* white-space: break-spaces; */
 }
 
+.tl-rich-text {
+	tab-size: var(--tl-tab-size, 2);
+}
+
 .tl-rich-text p {
 	margin: 0;
 	/* Depending on the extensions, <p> tags can be empty, without a <br />. */
@@ -1166,6 +1186,12 @@ input,
 	contain: size layout;
 }
 
+.tl-canvas-indicators {
+	position: absolute;
+	inset: 0;
+	pointer-events: none;
+}
+
 /* ---------------------- Shape --------------------- */
 
 .tl-shape {
@@ -1540,15 +1566,6 @@ input,
 	cursor: var(--tl-cursor-text);
 }
 
-/* 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) {
-	.tl-frame-heading {
-		font-size: 16px;
-	}
-}
-
 /* ------------------- Embed Shape ------------------ */
 
 .tl-embed {
@@ -1804,6 +1821,21 @@ it from receiving any pointer events or affecting the cursor. */
 /* @tldraw/ui */
 
 .tl-container {
+	/*
+	 * UI z-index layers
+	 *
+	 * menu-click-capture and panels (.tlui-layout) participate in the
+	 * container-level stacking context alongside the canvas layers:
+	 *   watermark (200) < canvas-in-front (250) < menu-click-capture (250) < panels (300)
+	 *
+	 * menus, toasts, header-footer, etc. are children of .tlui-layout
+	 * (which creates its own stacking context at z-index 300), so their
+	 * z-indices are relative to the layout, not the container.
+	 *
+	 * cursor and following-indicator are rendered inside canvas-in-front
+	 * (stacking context at z-index 250), so their z-indices are relative
+	 * to that context.
+	 */
 	--tl-layer-above: 1;
 	--tl-layer-focused-input: 10;
 	--tl-layer-menu-click-capture: 250;
@@ -1840,13 +1872,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);
 }
 
@@ -1895,7 +1929,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;
 }
@@ -1911,11 +1945,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;
 	}
 }
@@ -1954,11 +1988,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;
 	}
@@ -2046,11 +2080,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;
 }
@@ -2324,6 +2358,52 @@ it from receiving any pointer events or affecting the cursor. */
 	}
 }
 
+/* --------------------- Select --------------------- */
+
+/* Trigger extends .tlui-button with space-between layout */
+.tlui-select__trigger {
+	justify-content: space-between;
+	gap: var(--tl-space-3);
+}
+
+.tlui-select__trigger[data-state='open']::after {
+	opacity: 1;
+}
+
+.tlui-select__value {
+	display: flex;
+	align-items: center;
+	gap: var(--tl-space-2);
+}
+
+.tlui-select__chevron {
+	flex-shrink: 0;
+	color: var(--tl-color-text-2);
+}
+
+/* Content extends .tlui-menu with Radix-aware sizing */
+.tlui-select__content {
+	min-width: var(--radix-select-trigger-width);
+	max-height: var(--radix-select-content-available-height);
+}
+
+.tlui-select__viewport {
+	padding: 4px 0;
+}
+
+/* Item extends .tlui-button__checkbox with left-aligned text */
+.tlui-select__item {
+	justify-content: flex-start;
+}
+
+.tlui-select__item-indicator {
+	visibility: hidden;
+}
+
+.tlui-select__item[data-state='checked'] .tlui-select__item-indicator {
+	visibility: visible;
+}
+
 /* ----------------------- Kbd ---------------------- */
 
 .tlui-kbd {
@@ -3529,6 +3609,12 @@ tldraw? probably.
 
 	/* Terrible fix to allow firefox users to scroll the dialog */
 	overflow-x: auto;
+
+	scrollbar-width: none;
+}
+
+.tlui-shortcuts-dialog__body::-webkit-scrollbar {
+	display: none;
 }
 
 .tlui-shortcuts-dialog__body__tablet {