@tldraw/tldraw 5.3.0-next.299378752aaf → 5.3.0-next.3c51ad27dbd8

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",
-  "5.3.0-next.299378752aaf",
+  "5.3.0-next.3c51ad27dbd8",
   "cjs"
 );
 //# sourceMappingURL=index.js.map

package/dist-esm/index.mjs

@@ -2,7 +2,7 @@ import { registerTldrawLibraryVersion } from "tldraw";
 export * from "tldraw";
 registerTldrawLibraryVersion(
   "@tldraw/tldraw",
-  "5.3.0-next.299378752aaf",
+  "5.3.0-next.3c51ad27dbd8",
   "esm"
 );
 //# sourceMappingURL=index.mjs.map

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tldraw/tldraw",
   "description": "A tiny little drawing editor.",
-  "version": "5.3.0-next.299378752aaf",
+  "version": "5.3.0-next.3c51ad27dbd8",
   "author": {
     "name": "tldraw Inc.",
     "email": "hello@tldraw.com"
@@ -47,7 +47,7 @@
     "src"
   ],
   "dependencies": {
-    "tldraw": "5.3.0-next.299378752aaf"
+    "tldraw": "5.3.0-next.3c51ad27dbd8"
   },
   "peerDependencies": {
     "react": "^18.2.0 || ^19.2.1",

package/tldraw.css

@@ -33,15 +33,20 @@
 	 * 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).
+	 * collaborators, 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.
+	 * the canvas and the UI; collaborator cursors sit above canvas content
+	 * (and layers that anchor to it, like comment pins) but below the
+	 * in-front content and the UI panels. The watermark (a licensing element)
+	 * sits above that content so it can't be occluded, but still below the
+	 * in-front content and the UI.
 	 */
 	--tl-layer-canvas-hidden: -999999;
 	--tl-layer-canvas-background: 100;
 	--tl-layer-canvas-grid: 150;
-	--tl-layer-watermark: 200;
+	--tl-layer-collaborators: 245;
+	--tl-layer-watermark: 248;
 	--tl-layer-canvas-in-front: 250;
 	--tl-layer-canvas-shapes: 300;
 	--tl-layer-canvas-overlays: 500;
@@ -90,6 +95,10 @@
 		url("data:image/svg+xml,<svg height='32' width='32' viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg' style='color: black;'><defs><filter id='shadow' y='-40%' x='-40%' width='180px' height='180%' color-interpolation-filters='sRGB'><feDropShadow dx='1' dy='1' stdDeviation='1.2' flood-opacity='.5'/></filter></defs><g fill='none' transform='rotate(0 16 16)' filter='url(%23shadow)'><path d='m25 16h-6.01v-6h-2.98v6h-6.01v3h6.01v6h2.98v-6h6.01z' fill='white'/><path d='m23.9902 17.0103h-6v-6.01h-.98v6.01h-6v.98h6v6.01h.98v-6.01h6z' fill='%23231f1f'/></g></svg>")
 			16 16,
 		crosshair;
+	--tl-cursor-comment:
+		url("data:image/svg+xml,<svg height='32' width='32' viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'><defs><filter id='shadow' y='-40%' x='-40%' width='180px' height='180%' color-interpolation-filters='sRGB'><feDropShadow dx='1' dy='1' stdDeviation='1.2' flood-opacity='.5'/></filter></defs><g filter='url(%23shadow)'><path d='M5 19.5 L5 11 A8 8 0 0 1 13 3 A8 8 0 0 1 21 11 A8 8 0 0 1 13 19 Z' fill='white' stroke='black' stroke-width='1' stroke-linejoin='round'/></g></svg>")
+			5 19,
+		crosshair;
 	--tl-cursor-move:
 		url("data:image/svg+xml,<svg height='32' width='32' viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg' style='color: black;'><defs><filter id='shadow' y='-40%' x='-40%' width='180px' height='180%' color-interpolation-filters='sRGB'><feDropShadow dx='1' dy='1' stdDeviation='1.2' flood-opacity='.5'/></filter></defs><g fill='none' transform='rotate(0 16 16)' filter='url(%23shadow)'><path d='m19 14h1v1h-1zm1 6h-1v-1h1zm-5-5h-1v-1h1zm0 5h-1v-1h1zm2-10.987-7.985 7.988 5.222 5.221 2.763 2.763 7.984-7.985z' fill='white'/><g fill='black'><path d='m23.5664 16.9971-2.557-2.809v1.829h-4.009-4.001v-1.829l-2.571 2.809 2.572 2.808-.001-1.808h4.001 4.009l-.001 1.808z'/><path d='m17.9873 17h.013v-4.001l1.807.001-2.807-2.571-2.809 2.57h1.809v4.001h.008v4.002l-1.828-.001 2.807 2.577 2.805-2.576h-1.805z'/></g></g></svg>")
 			16 16,
@@ -290,6 +299,12 @@
 	outline: 1px solid var(--tl-color-low);
 }
 
+/* The host for <EditorPortal>, last among the container's children. It's a position in the DOM
+   rather than a box: `display: contents` keeps what it holds positioned against the container. */
+.tl-portal-host {
+	display: contents;
+}
+
 input,
 *[contenteditable],
 *[contenteditable] * {
@@ -376,6 +391,30 @@ input,
 	contain: layout style size;
 }
 
+/* The collaborator cursor layer: a sibling of .tl-canvas, above all canvas content, below the
+   in-front layer (250) and the UI panels (300). Display-only — pointer events pass through. */
+.tl-collaborators {
+	position: absolute;
+	inset: 0px;
+	z-index: var(--tl-layer-collaborators);
+	pointer-events: none;
+	overflow: clip;
+	contain: layout style size;
+}
+
+.tl-collaborators__item {
+	position: absolute;
+	top: 0px;
+	left: 0px;
+	overflow: visible;
+	pointer-events: none;
+	transform-origin: top left;
+}
+
+.tl-cursor {
+	overflow: visible;
+}
+
 /* --------------- Overlay Stack --------------- */
 
 /* -------------- Selection foreground -------------- */
@@ -789,6 +828,16 @@ input,
 .tl-rich-text h6 {
 	margin-top: 5px;
 	margin-bottom: 10px;
+	/**
+	 * Headings render at a larger font-size than the body text (via the browser's
+	 * default h1–h6 sizing), so they can't inherit the container's resolved
+	 * whole-pixel line-height — that value is derived from the base font size and
+	 * would cram the taller lines together. Instead, scale line-height with each
+	 * heading's own font-size using tldraw's unitless line-height multiplier, which
+	 * the rich-text render/measure paths expose here. The 1.35 fallback mirrors the
+	 * default theme line-height (see defaultThemes.ts).
+	 */
+	line-height: var(--tl-rich-text-heading-line-height, 1.35);
 }
 
 .tl-rich-text a {
@@ -2113,6 +2162,14 @@ it from receiving any pointer events or affecting the cursor. */
 	flex-shrink: 0;
 }
 
+/* The label is a fixed bit of chrome next to the input; it should never be squeezed. Without this,
+   an inherited `overflow-wrap: anywhere` (e.g. from .tlui-dialog__body) drops its min-content width
+   to a single character and short labels wrap mid-word, e.g. "URL" breaking after "UR". */
+.tlui-input__wrapper > label {
+	flex-shrink: 0;
+	overflow-wrap: normal;
+}
+
 /* 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/ */
@@ -2334,6 +2391,16 @@ it from receiving any pointer events or affecting the cursor. */
 	-ms-overflow-style: none;
 }
 
+.tlui-hover-card__content {
+	position: relative;
+	margin: 0px;
+	border: none;
+	border-radius: var(--tl-radius-3);
+	background-color: var(--tl-color-panel);
+	box-shadow: var(--tl-shadow-3);
+	z-index: var(--tl-layer-menus);
+}
+
 /* -------------------- Menu Zone ------------------- */
 
 .tlui-menu-zone {
@@ -2804,6 +2871,7 @@ tldraw? probably.
 .tlui-layout__bottom {
 	grid-row: 2;
 	width: 100%;
+	min-width: 0px;
 }
 
 .tlui-layout__bottom__main {
@@ -3177,6 +3245,7 @@ tldraw? probably.
 .tlui-toast__main {
 	flex-grow: 2;
 	max-width: 280px;
+	min-width: 0;
 }
 
 .tlui-toast__content {
@@ -3185,6 +3254,7 @@ tldraw? probably.
 	line-height: 1.4;
 	flex-direction: column;
 	gap: var(--tl-space-3);
+	min-width: 0;
 }
 
 .tlui-toast__main[data-actions='true'] .tlui-toast__content {
@@ -3196,6 +3266,7 @@ tldraw? probably.
 	color: var(--tl-color-text-1);
 	/* this makes the default toast look better */
 	line-height: 16px;
+	overflow-wrap: anywhere;
 }
 
 .tlui-toast__description {
@@ -3203,6 +3274,7 @@ tldraw? probably.
 	padding: var(--tl-space-3);
 	margin: 0px;
 	padding: 0px;
+	overflow-wrap: anywhere;
 }
 
 .tlui-toast__icon + .tlui-toast__main > .tlui-toast__actions {
@@ -3329,6 +3401,7 @@ tldraw? probably.
 	color: var(--tl-color-text-1);
 	user-select: all;
 	-webkit-user-select: text;
+	overflow-wrap: anywhere;
 }
 .tlui-dialog__body a {
 	color: var(--tl-color-selected);