@tldraw/tldraw 4.6.0-next.5a871ec02ff3 → 4.6.0-next.6594d48ace27

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.6.0-next.5a871ec02ff3",
+  "4.6.0-next.6594d48ace27",
   "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.6.0-next.5a871ec02ff3",
+  "4.6.0-next.6594d48ace27",
   "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.6.0-next.5a871ec02ff3",
+  "version": "4.6.0-next.6594d48ace27",
   "author": {
     "name": "tldraw Inc.",
     "email": "hello@tldraw.com"
@@ -47,7 +47,7 @@
     "src"
   ],
   "dependencies": {
-    "tldraw": "4.6.0-next.5a871ec02ff3"
+    "tldraw": "4.6.0-next.6594d48ace27"
   },
   "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

@@ -58,7 +58,6 @@
 	/* User handles need to be above selection edges / corners, matters for sticky note clone handles */
 	--tl-layer-overlays-user-handles: 105;
 	--tl-layer-overlays-user-indicator-hint: 110;
-	--tl-layer-overlays-custom: 115;
 	--tl-layer-overlays-collaborator-cursor-hint: 120;
 	--tl-layer-overlays-collaborator-cursor: 130;
 
@@ -158,19 +157,15 @@
 
 .tl-theme__light {
 	/* Canvas */
-	--tl-color-snap: hsl(0, 76%, 60%);
 	--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%);
 	/* UI */
 	--tl-color-low: hsl(204, 16%, 94%);
 	--tl-color-low-border: hsl(204, 16%, 92%);
-	--tl-color-culled: hsl(204, 14%, 93%);
 	--tl-color-muted-none: hsl(0, 0%, 0%, 0%);
 	--tl-color-muted-0: hsl(0, 0%, 0%, 2%);
 	--tl-color-muted-1: hsl(0, 0%, 0%, 10%);
@@ -200,7 +195,7 @@
 	--tl-color-info: hsl(201, 98%, 41%);
 	--tl-color-warning: hsl(27, 98%, 47%);
 	--tl-color-danger: hsl(0, 90%, 43%);
-	--tl-color-laser: hsl(0, 100%, 50%);
+
 	/* Shadows */
 	--tl-shadow-1: 0px 1px 2px hsl(0, 0%, 0%, 25%), 0px 1px 3px hsl(0, 0%, 0%, 9%);
 	--tl-shadow-2:
@@ -216,19 +211,15 @@
 
 .tl-theme__dark {
 	/* Canvas */
-	--tl-color-snap: hsl(0, 76%, 60%);
 	--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%);
 	/* UI */
 	--tl-color-low: hsl(260, 4.5%, 10.5%);
 	--tl-color-low-border: hsl(207, 10%, 10%);
-	--tl-color-culled: hsl(210, 11%, 19%);
 	--tl-color-muted-none: hsl(0, 0%, 100%, 0%);
 	--tl-color-muted-0: hsl(0, 0%, 100%, 2%);
 	--tl-color-muted-1: hsl(0, 0%, 100%, 10%);
@@ -258,7 +249,7 @@
 	--tl-color-info: hsl(199, 92%, 56%);
 	--tl-color-warning: hsl(36, 100%, 57%);
 	--tl-color-danger: hsl(0, 82%, 66%);
-	--tl-color-laser: hsl(0, 100%, 50%);
+
 	/* Shadows */
 	--tl-shadow-1:
 		0px 1px 2px hsl(0, 0%, 0%, 16.1%), 0px 1px 3px hsl(0, 0%, 0%, 22%),
@@ -405,62 +396,6 @@ input,
 
 /* --------------- Overlay Stack --------------- */
 
-/* back of the stack, behind user's stuff */
-.tl-collaborator__scribble {
-	z-index: var(--tl-layer-overlays-collaborator-scribble);
-}
-
-.tl-collaborator__brush {
-	z-index: var(--tl-layer-overlays-collaborator-brush);
-}
-
-.tl-collaborator__shape-indicator {
-	z-index: var(--tl-layer-overlays-collaborator-shape-indicator);
-}
-
-.tl-user-scribble {
-	z-index: var(--tl-layer-overlays-user-scribble);
-}
-
-.tl-user-brush {
-	z-index: var(--tl-layer-overlays-user-brush);
-}
-
-.tl-user-handles {
-	z-index: var(--tl-layer-overlays-user-handles);
-}
-
-.tl-user-snapline {
-	z-index: var(--tl-layer-overlays-user-snapline);
-}
-
-.tl-selection__fg {
-	pointer-events: none;
-	z-index: var(--tl-layer-overlays-selection-fg);
-}
-
-.tl-user-indicator__hint {
-	z-index: var(--tl-layer-overlays-user-indicator-hint);
-	stroke-width: calc(2.5px * var(--tl-scale));
-}
-
-.tl-custom-overlays {
-	z-index: var(--tl-layer-overlays-custom);
-}
-
-/* behind collaborator cursor */
-.tl-collaborator__cursor-hint {
-	z-index: var(--tl-layer-overlays-collaborator-cursor-hint);
-}
-
-.tl-collaborator__cursor {
-	z-index: var(--tl-layer-overlays-collaborator-cursor);
-}
-
-.tl-cursor {
-	overflow: visible;
-}
-
 /* -------------- Selection foreground -------------- */
 
 .tl-selection__bg {
@@ -472,49 +407,6 @@ input,
 	pointer-events: all;
 }
 
-.tl-selection__fg__outline {
-	fill: none;
-	pointer-events: none;
-	stroke: var(--tl-color-selection-stroke);
-	stroke-width: calc(1.5px * var(--tl-scale));
-}
-
-.tl-corner-handle {
-	pointer-events: none;
-	stroke: var(--tl-color-selection-stroke);
-	fill: var(--tl-color-background);
-	stroke-width: calc(1.5px * var(--tl-scale));
-}
-
-.tl-text-handle {
-	pointer-events: none;
-	fill: var(--tl-color-selection-stroke);
-}
-
-.tl-corner-crop-handle {
-	pointer-events: none;
-	fill: none;
-	stroke: var(--tl-color-selection-stroke);
-}
-
-.tl-corner-crop-edge-handle {
-	pointer-events: none;
-	fill: none;
-	stroke: var(--tl-color-selection-stroke);
-}
-
-.tl-mobile-rotate__bg {
-	pointer-events: all;
-	cursor: var(--tl-cursor-grab);
-}
-
-.tl-mobile-rotate__fg {
-	pointer-events: none;
-	stroke: var(--tl-color-selection-stroke);
-	fill: var(--tl-color-background);
-	stroke-width: calc(1.5px * var(--tl-scale));
-}
-
 .tl-transparent {
 	fill: transparent;
 	stroke: transparent;
@@ -540,7 +432,6 @@ input,
 	overflow: hidden;
 	text-overflow: ellipsis;
 	font-size: 12px;
-	font-family: var(--font-body);
 	border-radius: var(--tl-radius-2);
 	color: var(--tl-color-selected-contrast);
 }
@@ -558,7 +449,6 @@ input,
 	overflow: hidden;
 	text-overflow: ellipsis;
 	font-size: 12px;
-	font-family: var(--font-body);
 	text-shadow: var(--tl-text-outline);
 	color: var(--tl-color-selected-contrast);
 }
@@ -574,7 +464,6 @@ input,
 	position: absolute;
 	padding: 3px 6px;
 	font-size: 12px;
-	font-family: var(--font-body);
 	opacity: 1;
 	border-radius: var(--tl-radius-2);
 }
@@ -585,7 +474,6 @@ input,
 	white-space: nowrap;
 	padding: 3px 6px;
 	font-size: 12px;
-	font-family: var(--font-body);
 	pointer-events: none;
 	z-index: var(--tl-layer-cursor);
 	margin-top: 16px;
@@ -629,37 +517,6 @@ input,
 	overflow-wrap: break-word;
 }
 
-.tl-text-wrapper[data-font='draw'] {
-	font-family: var(--tl-font-draw);
-}
-
-.tl-text-wrapper[data-font='sans'] {
-	font-family: var(--tl-font-sans);
-}
-
-.tl-text-wrapper[data-font='serif'] {
-	font-family: var(--tl-font-serif);
-}
-
-.tl-text-wrapper[data-font='mono'] {
-	font-family: var(--tl-font-mono);
-}
-
-.tl-text-wrapper[data-align='start'],
-.tl-text-wrapper[data-align='start-legacy'] {
-	text-align: left;
-}
-
-.tl-text-wrapper[data-align='middle'],
-.tl-text-wrapper[data-align='middle-legacy'] {
-	text-align: center;
-}
-
-.tl-text-wrapper[data-align='end'],
-.tl-text-wrapper[data-align='end-legacy'] {
-	text-align: right;
-}
-
 .tl-plain-text-wrapper[data-isediting='true'] .tl-text-content {
 	opacity: 0;
 }
@@ -1044,41 +901,6 @@ input,
 	}
 }
 
-/* ---------------------- Brush --------------------- */
-
-.tl-brush {
-	stroke-width: calc(var(--tl-scale) * 1px);
-	contain: size layout;
-}
-
-.tl-brush__default {
-	stroke: var(--tl-color-brush-stroke);
-	fill: var(--tl-color-brush-fill);
-}
-
-/* -------------------- Scribble -------------------- */
-
-.tl-scribble {
-	stroke-linejoin: round;
-	stroke-linecap: round;
-	pointer-events: none;
-	contain: size layout;
-}
-
-/* ---------------------- Snaps --------------------- */
-
-.tl-snap-indicator {
-	stroke: var(--tl-color-snap);
-	stroke-width: calc(1px * var(--tl-scale));
-	fill: none;
-}
-
-.tl-snap-point {
-	stroke: var(--tl-color-snap);
-	stroke-width: calc(1px * var(--tl-scale));
-	fill: none;
-}
-
 /* ---------------- Hyperlink Button ---------------- */
 
 .tl-hyperlink-button {
@@ -1132,51 +954,6 @@ input,
 	display: none;
 }
 
-/* --------------------- Handles -------------------- */
-
-.tl-handle {
-	pointer-events: all;
-}
-
-.tl-handle__bg {
-	fill: transparent;
-	stroke: transparent;
-	pointer-events: all;
-}
-
-.tl-handle__fg {
-	fill: var(--tl-color-selected-contrast);
-	stroke: var(--tl-color-selection-stroke);
-	stroke-width: calc(1.5px * var(--tl-scale));
-	pointer-events: none;
-}
-
-.tl-handle__create {
-	opacity: 0;
-}
-
-.tl-handle__clone > .tl-handle__fg {
-	fill: var(--tl-color-selection-stroke);
-	stroke: none;
-}
-
-.tl-handle__bg:active {
-	fill: none;
-}
-
-.tl-container[data-coarse='true'] .tl-handle__bg:active {
-	fill: var(--tl-color-selection-fill);
-}
-
-.tl-container[data-coarse='true'] .tl-handle__create {
-	opacity: 1;
-}
-
-.tl-rotate-corner:not(:hover),
-.tl-resize-handle:not(:hover) {
-	cursor: none;
-}
-
 /* ----------------- Shape indicator ---------------- */
 
 .tl-shape-indicator {
@@ -1186,7 +963,7 @@ input,
 	contain: size layout;
 }
 
-.tl-canvas-indicators {
+.tl-canvas-overlays {
 	position: absolute;
 	inset: 0;
 	pointer-events: none;
@@ -1264,36 +1041,6 @@ input,
 	height: max-content;
 }
 
-.tl-arrow-hint {
-	stroke: var(--tl-color-text-1);
-	fill: none;
-	stroke-linecap: round;
-	overflow: visible;
-}
-
-.tl-arrow-hint-handle {
-	fill: var(--tl-color-selected-contrast);
-	stroke: var(--tl-color-selection-stroke);
-	stroke-width: calc(1.5px * var(--tl-scale));
-	r: calc(4px * var(--tl-scale));
-}
-
-.tl-arrow-hint-snap {
-	stroke: transparent;
-	fill: var(--tl-color-selection-fill);
-	r: calc(12px * var(--tl-scale));
-}
-
-.tl-arrow-hint-snap__none,
-.tl-arrow-hint-snap__center,
-.tl-arrow-hint-snap__axis {
-	display: none;
-}
-
-.tl-arrow-hint-snap__edge {
-	r: calc(8px * var(--tl-scale));
-}
-
 /* ------------------- Bookmark shape ------------------- */
 
 .tl-bookmark__container {
@@ -1482,6 +1229,19 @@ input,
 	color: currentColor;
 }
 
+.tl-note__attribution {
+	position: absolute;
+	bottom: calc(4px * var(--note-attribution-scale, 1));
+	right: calc(8px * var(--note-attribution-scale, 1));
+	font-family: var(--tl-font-sans);
+	pointer-events: auto;
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	max-width: 60%;
+	z-index: 1;
+}
+
 /* ------------------- Frame shape ------------------- */
 
 .tl-frame__body {
@@ -2841,6 +2601,14 @@ it from receiving any pointer events or affecting the cursor. */
 	left: 8px;
 }
 
+/* 
+ * focusing skip-to-main-content hide top ui buttons to make sure we avoid
+ * z-index clashes on hover (see issue #8328)
+ */
+.tl-skip-to-main-content:focus + .tlui-layout__top .tlui-helper-buttons {
+	display: none;
+}
+
 /* ---------------- Offline indicator --------------- */
 
 .tlui-offline-indicator {