tldraw 5.3.2 → 5.4.0-canary.042da660fa66

package/dist-esm/lib/ui/kbd-utils.mjs

@@ -1,10 +1,17 @@
 import { tlenv } from "@tldraw/editor";
+/*!
+ * `splitKbd` is adapted from hotkeys-js.
+ *
+ * MIT License: https://github.com/jaywcjlove/hotkeys-js/blob/master/LICENSE
+ * Copyright (c) 2015-present, Kenny Wong
+ * Copyright (c) 2011-2013 Thomas Fuchs (https://github.com/madrobby/keymaster)
+ * Source: https://github.com/jaywcjlove/hotkeys-js
+ */
 const cmdKey = tlenv.isDarwin ? "\u2318" : "__CTRL__";
 const ctrlKey = tlenv.isDarwin ? "\u2303" : "__CTRL__";
 const altKey = tlenv.isDarwin ? "\u2325" : "__ALT__";
 function kbd(str) {
-  if (str === ",") return [","];
-  return str.split(",")[0].split(/(\[\[[^\]]+\]\])/g).map(
+  return (splitKbd(str)[0] ?? "").split(/(\[\[[^\]]+\]\])/g).map(
     (s) => s.startsWith("[[") ? s.replace(/[[\]]/g, "") : s.replace(/cmd\+/g, cmdKey).replace(/ctrl\+/g, ctrlKey).replace(/alt\+/g, altKey).replace(/shift\+/g, "\u21E7").replace(/\$/g, cmdKey).replace(/\?/g, altKey).replace(/!/g, "\u21E7").match(/__CTRL__|__ALT__|./g) || []
   ).flat().map((sub, index) => {
     if (sub[0] === "+") return [];
@@ -19,11 +26,23 @@ function kbd(str) {
     return tlenv.isDarwin || !index ? modifiedKey : ["+", modifiedKey];
   }).flat();
 }
+function splitKbd(key) {
+  if (!key) return [];
+  const keys = key.split(",");
+  let index = keys.lastIndexOf("");
+  for (; index >= 0; ) {
+    keys[index - 1] += ",";
+    keys.splice(index, 1);
+    index = keys.lastIndexOf("");
+  }
+  return keys;
+}
 function kbdStr(str) {
   return "\u2014 " + kbd(str).join("\u2009");
 }
 export {
   kbd,
-  kbdStr
+  kbdStr,
+  splitKbd
 };
 //# sourceMappingURL=kbd-utils.mjs.map

package/dist-esm/lib/ui/kbd-utils.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/lib/ui/kbd-utils.ts"],
-  "sourcesContent": ["import { tlenv } from '@tldraw/editor'\n\n// N.B. We rework these Windows placeholders down below.\nconst cmdKey = tlenv.isDarwin ? '\u2318' : '__CTRL__'\nconst ctrlKey = tlenv.isDarwin ? '\u2303' : '__CTRL__'\nconst altKey = tlenv.isDarwin ? '\u2325' : '__ALT__'\n\n/** @public */\nexport function kbd(str: string) {\n\tif (str === ',') return [',']\n\n\treturn (\n\t\tstr\n\t\t\t.split(',')[0]\n\t\t\t// If the string contains [[Tab]], we don't split these up\n\t\t\t// as they're meant to be atomic.\n\t\t\t.split(/(\\[\\[[^\\]]+\\]\\])/g)\n\t\t\t.map((s) =>\n\t\t\t\ts.startsWith('[[')\n\t\t\t\t\t? s.replace(/[[\\]]/g, '')\n\t\t\t\t\t: s\n\t\t\t\t\t\t\t.replace(/cmd\\+/g, cmdKey)\n\t\t\t\t\t\t\t.replace(/ctrl\\+/g, ctrlKey)\n\t\t\t\t\t\t\t.replace(/alt\\+/g, altKey)\n\t\t\t\t\t\t\t.replace(/shift\\+/g, '\u21E7')\n\t\t\t\t\t\t\t// Backwards compatibility with the old system.\n\t\t\t\t\t\t\t.replace(/\\$/g, cmdKey)\n\t\t\t\t\t\t\t.replace(/\\?/g, altKey)\n\t\t\t\t\t\t\t.replace(/!/g, '\u21E7')\n\t\t\t\t\t\t\t.match(/__CTRL__|__ALT__|./g) || []\n\t\t\t)\n\t\t\t.flat()\n\t\t\t.map((sub, index) => {\n\t\t\t\tif (sub[0] === '+') return []\n\n\t\t\t\tlet modifiedKey\n\t\t\t\tif (sub === '__CTRL__') {\n\t\t\t\t\tmodifiedKey = 'Ctrl'\n\t\t\t\t} else if (sub === '__ALT__') {\n\t\t\t\t\tmodifiedKey = 'Alt'\n\t\t\t\t} else {\n\t\t\t\t\tmodifiedKey = sub[0].toUpperCase() + sub.slice(1)\n\t\t\t\t}\n\t\t\t\treturn tlenv.isDarwin || !index ? modifiedKey : ['+', modifiedKey]\n\t\t\t})\n\t\t\t.flat()\n\t)\n}\n\n/** @public */\nexport function kbdStr(str: string) {\n\treturn '\u2014 ' + kbd(str).join('\u2009')\n}\n"],
-  "mappings": "AAAA,SAAS,aAAa;AAGtB,MAAM,SAAS,MAAM,WAAW,WAAM;AACtC,MAAM,UAAU,MAAM,WAAW,WAAM;AACvC,MAAM,SAAS,MAAM,WAAW,WAAM;AAG/B,SAAS,IAAI,KAAa;AAChC,MAAI,QAAQ,IAAK,QAAO,CAAC,GAAG;AAE5B,SACC,IACE,MAAM,GAAG,EAAE,CAAC,EAGZ,MAAM,mBAAmB,EACzB;AAAA,IAAI,CAAC,MACL,EAAE,WAAW,IAAI,IACd,EAAE,QAAQ,UAAU,EAAE,IACtB,EACC,QAAQ,UAAU,MAAM,EACxB,QAAQ,WAAW,OAAO,EAC1B,QAAQ,UAAU,MAAM,EACxB,QAAQ,YAAY,QAAG,EAEvB,QAAQ,OAAO,MAAM,EACrB,QAAQ,OAAO,MAAM,EACrB,QAAQ,MAAM,QAAG,EACjB,MAAM,qBAAqB,KAAK,CAAC;AAAA,EACtC,EACC,KAAK,EACL,IAAI,CAAC,KAAK,UAAU;AACpB,QAAI,IAAI,CAAC,MAAM,IAAK,QAAO,CAAC;AAE5B,QAAI;AACJ,QAAI,QAAQ,YAAY;AACvB,oBAAc;AAAA,IACf,WAAW,QAAQ,WAAW;AAC7B,oBAAc;AAAA,IACf,OAAO;AACN,oBAAc,IAAI,CAAC,EAAE,YAAY,IAAI,IAAI,MAAM,CAAC;AAAA,IACjD;AACA,WAAO,MAAM,YAAY,CAAC,QAAQ,cAAc,CAAC,KAAK,WAAW;AAAA,EAClE,CAAC,EACA,KAAK;AAET;AAGO,SAAS,OAAO,KAAa;AACnC,SAAO,YAAO,IAAI,GAAG,EAAE,KAAK,QAAG;AAChC;",
+  "sourcesContent": ["import { tlenv } from '@tldraw/editor'\n\n/*!\n * `splitKbd` is adapted from hotkeys-js.\n *\n * MIT License: https://github.com/jaywcjlove/hotkeys-js/blob/master/LICENSE\n * Copyright (c) 2015-present, Kenny Wong\n * Copyright (c) 2011-2013 Thomas Fuchs (https://github.com/madrobby/keymaster)\n * Source: https://github.com/jaywcjlove/hotkeys-js\n */\n\n// N.B. We rework these Windows placeholders down below.\nconst cmdKey = tlenv.isDarwin ? '\u2318' : '__CTRL__'\nconst ctrlKey = tlenv.isDarwin ? '\u2303' : '__CTRL__'\nconst altKey = tlenv.isDarwin ? '\u2325' : '__ALT__'\n\n/** @public */\nexport function kbd(str: string) {\n\treturn (\n\t\t(splitKbd(str)[0] ?? '')\n\t\t\t// If the string contains [[Tab]], we don't split these up\n\t\t\t// as they're meant to be atomic.\n\t\t\t.split(/(\\[\\[[^\\]]+\\]\\])/g)\n\t\t\t.map((s) =>\n\t\t\t\ts.startsWith('[[')\n\t\t\t\t\t? s.replace(/[[\\]]/g, '')\n\t\t\t\t\t: s\n\t\t\t\t\t\t\t.replace(/cmd\\+/g, cmdKey)\n\t\t\t\t\t\t\t.replace(/ctrl\\+/g, ctrlKey)\n\t\t\t\t\t\t\t.replace(/alt\\+/g, altKey)\n\t\t\t\t\t\t\t.replace(/shift\\+/g, '\u21E7')\n\t\t\t\t\t\t\t// Backwards compatibility with the old system.\n\t\t\t\t\t\t\t.replace(/\\$/g, cmdKey)\n\t\t\t\t\t\t\t.replace(/\\?/g, altKey)\n\t\t\t\t\t\t\t.replace(/!/g, '\u21E7')\n\t\t\t\t\t\t\t.match(/__CTRL__|__ALT__|./g) || []\n\t\t\t)\n\t\t\t.flat()\n\t\t\t.map((sub, index) => {\n\t\t\t\tif (sub[0] === '+') return []\n\n\t\t\t\tlet modifiedKey\n\t\t\t\tif (sub === '__CTRL__') {\n\t\t\t\t\tmodifiedKey = 'Ctrl'\n\t\t\t\t} else if (sub === '__ALT__') {\n\t\t\t\t\tmodifiedKey = 'Alt'\n\t\t\t\t} else {\n\t\t\t\t\tmodifiedKey = sub[0].toUpperCase() + sub.slice(1)\n\t\t\t\t}\n\t\t\t\treturn tlenv.isDarwin || !index ? modifiedKey : ['+', modifiedKey]\n\t\t\t})\n\t\t\t.flat()\n\t)\n}\n\n// Split a kbd string on commas, treating an empty entry produced by \"x,,\" as a literal\n// trailing comma on the previous entry.\n/** @internal */\nexport function splitKbd(key: string) {\n\tif (!key) return []\n\tconst keys = key.split(',')\n\tlet index = keys.lastIndexOf('')\n\n\tfor (; index >= 0; ) {\n\t\tkeys[index - 1] += ','\n\t\tkeys.splice(index, 1)\n\t\tindex = keys.lastIndexOf('')\n\t}\n\n\treturn keys\n}\n\n/** @public */\nexport function kbdStr(str: string) {\n\treturn '\u2014 ' + kbd(str).join('\u2009')\n}\n"],
+  "mappings": "AAAA,SAAS,aAAa;AAEtB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAUA,MAAM,SAAS,MAAM,WAAW,WAAM;AACtC,MAAM,UAAU,MAAM,WAAW,WAAM;AACvC,MAAM,SAAS,MAAM,WAAW,WAAM;AAG/B,SAAS,IAAI,KAAa;AAChC,UACE,SAAS,GAAG,EAAE,CAAC,KAAK,IAGnB,MAAM,mBAAmB,EACzB;AAAA,IAAI,CAAC,MACL,EAAE,WAAW,IAAI,IACd,EAAE,QAAQ,UAAU,EAAE,IACtB,EACC,QAAQ,UAAU,MAAM,EACxB,QAAQ,WAAW,OAAO,EAC1B,QAAQ,UAAU,MAAM,EACxB,QAAQ,YAAY,QAAG,EAEvB,QAAQ,OAAO,MAAM,EACrB,QAAQ,OAAO,MAAM,EACrB,QAAQ,MAAM,QAAG,EACjB,MAAM,qBAAqB,KAAK,CAAC;AAAA,EACtC,EACC,KAAK,EACL,IAAI,CAAC,KAAK,UAAU;AACpB,QAAI,IAAI,CAAC,MAAM,IAAK,QAAO,CAAC;AAE5B,QAAI;AACJ,QAAI,QAAQ,YAAY;AACvB,oBAAc;AAAA,IACf,WAAW,QAAQ,WAAW;AAC7B,oBAAc;AAAA,IACf,OAAO;AACN,oBAAc,IAAI,CAAC,EAAE,YAAY,IAAI,IAAI,MAAM,CAAC;AAAA,IACjD;AACA,WAAO,MAAM,YAAY,CAAC,QAAQ,cAAc,CAAC,KAAK,WAAW;AAAA,EAClE,CAAC,EACA,KAAK;AAET;AAKO,SAAS,SAAS,KAAa;AACrC,MAAI,CAAC,IAAK,QAAO,CAAC;AAClB,QAAM,OAAO,IAAI,MAAM,GAAG;AAC1B,MAAI,QAAQ,KAAK,YAAY,EAAE;AAE/B,SAAO,SAAS,KAAK;AACpB,SAAK,QAAQ,CAAC,KAAK;AACnB,SAAK,OAAO,OAAO,CAAC;AACpB,YAAQ,KAAK,YAAY,EAAE;AAAA,EAC5B;AAEA,SAAO;AACR;AAGO,SAAS,OAAO,KAAa;AACnC,SAAO,YAAO,IAAI,GAAG,EAAE,KAAK,QAAG;AAChC;",
   "names": []
 }

package/dist-esm/lib/ui/version.mjs

@@ -1,8 +1,8 @@
-const version = "5.3.2";
+const version = "5.4.0-canary.042da660fa66";
 const publishDates = {
   major: "2026-05-06T16:28:18.473Z",
-  minor: "2026-08-05T11:39:54.978Z",
-  patch: "2026-08-18T09:59:40.172Z"
+  minor: "2026-08-19T12:47:12.111Z",
+  patch: "2026-08-19T12:47:12.111Z"
 };
 export {
   publishDates,

package/dist-esm/lib/ui/version.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/lib/ui/version.ts"],
-  "sourcesContent": ["// This file is automatically generated by internal/scripts/refresh-assets.ts.\n// Do not edit manually. Or do, I'm a comment, not a cop.\n\nexport const version = '5.3.2'\nexport const publishDates = {\n\tmajor: '2026-05-06T16:28:18.473Z',\n\tminor: '2026-08-05T11:39:54.978Z',\n\tpatch: '2026-08-18T09:59:40.172Z',\n}\n"],
+  "sourcesContent": ["// This file is automatically generated by internal/scripts/refresh-assets.ts.\n// Do not edit manually. Or do, I'm a comment, not a cop.\n\nexport const version = '5.4.0-canary.042da660fa66'\nexport const publishDates = {\n\tmajor: '2026-05-06T16:28:18.473Z',\n\tminor: '2026-08-19T12:47:12.111Z',\n\tpatch: '2026-08-19T12:47:12.111Z',\n}\n"],
   "mappings": "AAGO,MAAM,UAAU;AAChB,MAAM,eAAe;AAAA,EAC3B,OAAO;AAAA,EACP,OAAO;AAAA,EACP,OAAO;AACR;",
   "names": []
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "tldraw",
   "description": "A tiny little drawing editor.",
-  "version": "5.3.2",
+  "version": "5.4.0-canary.042da660fa66",
   "author": {
     "name": "tldraw Inc.",
     "email": "hello@tldraw.com"
@@ -69,11 +69,11 @@
     "@tiptap/pm": "^3.12.1",
     "@tiptap/react": "^3.12.1",
     "@tiptap/starter-kit": "^3.12.1",
-    "@tldraw/driver": "5.3.2",
-    "@tldraw/editor": "5.3.2",
-    "@tldraw/state": "5.3.2",
-    "@tldraw/store": "5.3.2",
-    "@tldraw/tlschema": "5.3.2",
+    "@tldraw/driver": "5.4.0-canary.042da660fa66",
+    "@tldraw/editor": "5.4.0-canary.042da660fa66",
+    "@tldraw/state": "5.4.0-canary.042da660fa66",
+    "@tldraw/store": "5.4.0-canary.042da660fa66",
+    "@tldraw/tlschema": "5.4.0-canary.042da660fa66",
     "classnames": "^2.5.1",
     "idb": "^7.1.1",
     "lz-string": "^1.5.0",

package/src/lib/defaultExternalContentHandlers.ts

@@ -278,10 +278,10 @@ export async function defaultHandleExternalUrlAsset(
 			description:
 				doc.head.querySelector('meta[property="og:description"]')?.getAttribute('content') ?? '',
 		}
-		if (!meta.image.startsWith('http')) {
+		if (meta.image && !meta.image.startsWith('http')) {
 			meta.image = new URL(meta.image, url).href
 		}
-		if (!meta.favicon.startsWith('http')) {
+		if (meta.favicon && !meta.favicon.startsWith('http')) {
 			meta.favicon = new URL(meta.favicon, url).href
 		}
 	} catch (error) {

package/src/lib/shapes/draw/DrawShapeTool.test.ts

@@ -109,6 +109,25 @@ describe('Close threshold with zoom', () => {
 		expect(shape.props.isClosed).toBe(true)
 	})
 
+	it('Closes a small shape with densely sampled points', () => {
+		// Match the point density of the reported shape that exposed the length calculation bug.
+		const samples = 476
+		const radius = 20
+		const center = { x: 100, y: 100 }
+
+		editor.setCurrentTool('draw')
+		editor.pointerDown(center.x + radius, center.y)
+		for (let i = 1; i <= samples; i++) {
+			const angle = (i / samples) * Math.PI * 2
+			editor.pointerMove(center.x + Math.cos(angle) * radius, center.y + Math.sin(angle) * radius)
+		}
+		editor.pointerUp()
+
+		const shapes = editor.getCurrentPageShapes() as TLDrawShape[]
+		expect(shapes).toHaveLength(1)
+		expect(shapes[0].props.isClosed).toBe(true)
+	})
+
 	it('Does not close a shape when the endpoint is far from the start', () => {
 		const shape = drawNearlyClosedShape(50)
 		expect(shape.props.isClosed).toBe(false)

package/src/lib/shapes/draw/toolStates/Drawing.ts

@@ -733,11 +733,11 @@ export class Drawing extends StateNode {
 		for (let j = 0; j < segments.length; j++) {
 			const points = b64Vecs.decodePoints(segments[j].path, segments[j].dim)
 			for (let i = 0; i < points.length - 1; i++) {
-				length += Vec.Dist2(points[i], points[i + 1])
+				length += Vec.Dist(points[i], points[i + 1])
 			}
 		}
 
-		return Math.sqrt(length)
+		return length
 	}
 
 	override onPointerUp() {

package/src/lib/shapes/frame/frameHelpers.ts

@@ -54,7 +54,16 @@ export function getFrameHeadingSize(
 		const frameTitle = defaultEmptyAs(shape.props.name, 'Frame') + String.fromCharCode(8203)
 		const spans = editor.textMeasure.measureTextSpans(frameTitle, opts)
 		const firstSpan = spans[0]
-		const lastSpan = last(spans)!
+		const lastSpan = last(spans)
+
+		if (!firstSpan || !lastSpan) {
+			// measureTextSpans can return no spans when the text can't be laid
+			// out yet — e.g. the measurement element isn't attached/visible
+			// during the initial editor mount, or every grapheme lacks a layout
+			// rect. Fall back to a zero-width heading and don't cache it, so the
+			// heading is remeasured once measurement is possible.
+			return new Box(0, -opts.height, 0, opts.height)
+		}
 
 		width = lastSpan.box.w + lastSpan.box.x - firstSpan.box.x
 		measurementWeakmap.set(shape.props, width)

package/src/lib/shapes/video/VideoShapeUtil.tsx

@@ -175,14 +175,16 @@ const VideoShape = memo(function VideoShape({ shape }: { shape: TLVideoShape })
 		}
 	}, [isEditing, isLoaded])
 
+	const hasVideo = !!asset?.props.src && !!url && isLoaded
+
 	return (
 		<>
 			<HTMLContainer
 				id={shape.id}
 				style={{
 					color: 'var(--tl-color-text-3)',
-					backgroundColor: asset ? 'transparent' : 'var(--tl-color-low)',
-					border: asset ? 'none' : '1px solid var(--tl-color-low-border)',
+					backgroundColor: hasVideo ? 'transparent' : 'var(--tl-color-low)',
+					border: hasVideo ? 'none' : '1px solid var(--tl-color-low-border)',
 				}}
 			>
 				<div className="tl-counter-scaled">

package/src/lib/ui/TldrawUi.tsx

@@ -75,7 +75,6 @@ interface TldrawUiContentProps {
 const TldrawUiInner = React.memo(function TldrawUiInner({
 	children,
 	hideUi,
-	...rest
 }: TldrawUiContentProps & { children: ReactNode }) {
 	// The hideUi prop should prevent the UI from mounting.
 	// If we ever need want the UI to mount and preserve state, then
@@ -89,7 +88,7 @@ const TldrawUiInner = React.memo(function TldrawUiInner({
 	return (
 		<>
 			{children}
-			{hideUi ? null : <TldrawUiContent {...rest} />}
+			{hideUi ? null : <TldrawUiContent />}
 		</>
 	)
 })

package/src/lib/ui/components/ActionsMenu/DefaultActionsMenu.tsx

@@ -1,5 +1,5 @@
-import { useEditor, usePassThroughWheelEvents, useValue } from '@tldraw/editor'
-import { ReactNode, memo, useRef } from 'react'
+import { useEditor, useValue } from '@tldraw/editor'
+import { ReactNode, memo } from 'react'
 import { PORTRAIT_BREAKPOINT } from '../../constants'
 import { useBreakpoint } from '../../context/breakpoints'
 import { useReadonly } from '../../hooks/useReadonly'
@@ -29,9 +29,6 @@ export const DefaultActionsMenu = memo(function DefaultActionsMenu({
 	const isReadonlyMode = useReadonly()
 	const { orientation } = useTldrawUiOrientation()
 
-	const ref = useRef<HTMLDivElement>(null)
-	usePassThroughWheelEvents(ref)
-
 	const editor = useEditor()
 	const isInAcceptableReadonlyState = useValue(
 		'should display quick actions when in readonly',
@@ -71,7 +68,6 @@ export const DefaultActionsMenu = memo(function DefaultActionsMenu({
 				sideOffset={6}
 			>
 				<TldrawUiToolbar
-					ref={ref}
 					label={msg('actions-menu.title')}
 					className="tlui-actions-menu"
 					data-testid="actions-menu.content"

package/src/lib/ui/components/ContextMenu/DefaultContextMenuContent.tsx

@@ -29,7 +29,11 @@ export function DefaultContextMenuContent() {
 
 	return (
 		<>
-			{showCollaborationUi && <CursorChatItem />}
+			{showCollaborationUi && (
+				<TldrawUiMenuGroup id="cursor-chat">
+					<CursorChatItem />
+				</TldrawUiMenuGroup>
+			)}
 			<TldrawUiMenuGroup id="modify">
 				<EditMenuSubmenu />
 				<ArrangeMenuSubmenu />

package/src/lib/ui/components/Dialogs.tsx

@@ -1,6 +1,6 @@
 import { useContainer, useValue } from '@tldraw/editor'
 import { Dialog as _Dialog } from 'radix-ui'
-import { memo, useCallback } from 'react'
+import { memo, useCallback, useRef } from 'react'
 import { TLUiDialog, useDialogs } from '../context/dialogs'
 import { useDirection } from '../hooks/useTranslation/useTranslation'
 
@@ -10,6 +10,7 @@ const TldrawUiDialog = ({ id, component: ModalContent, preventBackgroundClose }:
 
 	const container = useContainer()
 	const dir = useDirection()
+	const contentRef = useRef<HTMLDivElement>(null)
 
 	const handleOpenChange = useCallback(
 		(isOpen: boolean) => {
@@ -29,6 +30,7 @@ const TldrawUiDialog = ({ id, component: ModalContent, preventBackgroundClose }:
 				<_Dialog.Overlay dir={dir} className="tlui-dialog__overlay" />
 				<div dir={dir} className="tlui-dialog__positioner">
 					<_Dialog.Content
+						ref={contentRef}
 						dir={dir}
 						className="tlui-dialog__content"
 						aria-describedby={undefined}
@@ -39,6 +41,20 @@ const TldrawUiDialog = ({ id, component: ModalContent, preventBackgroundClose }:
 							// both a pointer press and a focus shift outside the dialog; opt out of both
 							// when the dialog asks to stay open on background interactions (escape still
 							// closes it).
+
+							// A touch press is checked against the layers at the following click rather
+							// than at the press itself, so a press that closes a dialog stacked on top of
+							// this one arrives here once this one is topmost, and reads as a press
+							// outside it. A press inside another dialog is never outside this one, and
+							// stays so after that dialog unmounts and takes the press's target with it.
+							const target = e.detail.originalEvent.target
+							const pressedDialog =
+								target instanceof Element ? target.closest('.tlui-dialog__content') : null
+							if (pressedDialog && pressedDialog !== contentRef.current) {
+								e.preventDefault()
+								return
+							}
+
 							if (preventBackgroundClose) {
 								e.preventDefault()
 							}

package/src/lib/ui/components/SharePanel/DefaultPeopleMenuItem.tsx

@@ -4,7 +4,6 @@ import { useUiEvents } from '../../context/events'
 import { useTranslation } from '../../hooks/useTranslation/useTranslation'
 import { TldrawUiButton } from '../primitives/Button/TldrawUiButton'
 import { TldrawUiButtonIcon } from '../primitives/Button/TldrawUiButtonIcon'
-import { TldrawUiRow } from '../primitives/layout'
 import { TldrawUiIcon } from '../primitives/TldrawUiIcon'
 
 /** @public */
@@ -38,7 +37,7 @@ export const DefaultPeopleMenuItem = track(function DefaultPeopleMenuItem({
 	if (!presence) return null
 
 	return (
-		<TldrawUiRow
+		<div
 			className="tlui-people-menu__item"
 			data-follow={youAreFollowingThem || theyAreFollowingYou}
 		>
@@ -70,6 +69,6 @@ export const DefaultPeopleMenuItem = track(function DefaultPeopleMenuItem({
 					icon={theyAreFollowingYou ? 'leading' : youAreFollowingThem ? 'following' : 'follow'}
 				/>
 			</TldrawUiButton>
-		</TldrawUiRow>
+		</div>
 	)
 })

package/src/lib/ui/context/actions.tsx

@@ -1031,7 +1031,6 @@ export function ActionsProvider({ overrides, children }: ActionsProviderProps) {
 					if (!canApplySelectionAction()) return
 					if (mustGoBackToSelectToolFirst()) return
 
-					editor.markHistoryStoppingPoint('cut')
 					helpers.cut(source)
 				},
 			},

package/src/lib/ui/hooks/useClipboardEvents.ts

@@ -803,6 +803,7 @@ export function useMenuClipboardEvents() {
 
 			const didCopy = await handleNativeOrMenuCopy(editor, { operation: 'cut', source: 'menu' })
 			if (didCopy) {
+				editor.markHistoryStoppingPoint('cut')
 				editor.deleteShapes(editor.getSelectedShapeIds())
 				trackEvent('cut', { source })
 			}
@@ -900,6 +901,7 @@ export function useNativeClipboardEvents() {
 
 			const didCopy = await handleNativeOrMenuCopy(editor, { operation: 'cut', source: 'native' })
 			if (didCopy) {
+				editor.markHistoryStoppingPoint('cut')
 				editor.deleteShapes(editor.getSelectedShapeIds())
 				trackEvent('cut', { source: 'kbd' })
 			}

package/src/lib/ui/hooks/useFlatten.ts

@@ -49,34 +49,70 @@ export async function flattenShapesToImages(
 			}
 		})
 
-		for (let i = 0; i < expandedBounds.length; i++) {
-			const item = expandedBounds[i]
-			if (i === 0) {
-				groups[0] = {
-					shapes: [item.shape],
-					bounds: item.bounds,
-				}
-				continue
+		// Cluster shapes by connected components: any two shapes whose expanded
+		// bounds intersect end up in the same group. Using union-find here
+		// instead of a greedy first-fit pass means the result is independent of
+		// the order shapes appear in `shapeIds`, and a shape that bridges two
+		// otherwise-disjoint clusters merges them in one pass.
+		const parents = expandedBounds.map((_, i) => i)
+		const find = (i: number): number => {
+			let root = i
+			while (parents[root] !== root) root = parents[root]
+			while (parents[i] !== root) {
+				const next = parents[i]
+				parents[i] = root
+				i = next
 			}
+			return root
+		}
+		const union = (i: number, j: number) => {
+			const ri = find(i)
+			const rj = find(j)
+			if (ri !== rj) parents[ri] = rj
+		}
 
-			let didLand = false
+		// Broad-phase sweep: sort by minX and, for each box, only compare against
+		// later boxes until one starts past the current box's maxX. Boxes that
+		// don't overlap on the x-axis can't intersect, so this skips the bulk of
+		// the pairwise checks for spread-out selections while still finding every
+		// intersecting pair (Box.includes is symmetric, so each pair is tested once).
+		const order = expandedBounds
+			.map((_, i) => i)
+			.sort((a, b) => {
+				return expandedBounds[a].bounds.minX - expandedBounds[b].bounds.minX
+			})
 
-			for (const group of groups) {
-				if (group.bounds.includes(item.bounds)) {
-					group.shapes.push(item.shape)
-					group.bounds.expand(item.bounds)
-					didLand = true
-					break
+		for (let a = 0; a < order.length; a++) {
+			const i = order[a]
+			const boundsI = expandedBounds[i].bounds
+			for (let b = a + 1; b < order.length; b++) {
+				const j = order[b]
+				// sorted by minX, so once a box starts past i's maxX no later box can overlap i
+				if (expandedBounds[j].bounds.minX > boundsI.maxX) break
+				if (find(i) === find(j)) continue
+				if (boundsI.includes(expandedBounds[j].bounds)) {
+					union(i, j)
 				}
 			}
+		}
 
-			if (!didLand) {
-				groups.push({
+		const groupsByRoot = new Map<number, { shapes: TLShape[]; bounds: Box }>()
+		for (let i = 0; i < expandedBounds.length; i++) {
+			const root = find(i)
+			const item = expandedBounds[i]
+			const existing = groupsByRoot.get(root)
+			if (existing) {
+				existing.shapes.push(item.shape)
+				existing.bounds.expand(item.bounds)
+			} else {
+				groupsByRoot.set(root, {
 					shapes: [item.shape],
-					bounds: item.bounds,
+					bounds: item.bounds.clone(),
 				})
 			}
 		}
+
+		groups.push(...groupsByRoot.values())
 	} else {
 		const bounds = Box.Common(shapes.map((shape) => editor.getShapeMaskedPageBounds(shape)!))
 		groups.push({
@@ -123,11 +159,8 @@ export async function flattenShapesToImages(
 
 			let index: IndexKey = 'a1' as IndexKey
 			for (const shape of shapes) {
-				if (shape.parentId === commonAncestorId) {
-					if (shape.index > index) {
-						index = shape.index
-					}
-					break
+				if (shape.parentId === commonAncestorId && shape.index > index) {
+					index = shape.index
 				}
 			}
 

package/src/lib/ui/hooks/useKeyboardShortcuts.ts

@@ -1,7 +1,6 @@
 /*!
- * The kbd-string splitter (`getKeys`) and the form-input filter pattern in `shouldSkipEvent`
- * (including its list of non-text INPUT types) are adapted from hotkeys-js, which this hook
- * previously depended on.
+ * The form-input filter pattern in `shouldSkipEvent` (including its list of non-text INPUT
+ * types) is adapted from hotkeys-js, which this hook previously depended on.
  *
  * MIT License: https://github.com/jaywcjlove/hotkeys-js/blob/master/LICENSE
  * Copyright (c) 2015-present, Kenny Wong
@@ -19,6 +18,7 @@ import {
 } from '@tldraw/editor'
 import { useEffect } from 'react'
 import { useActions } from '../context/actions'
+import { splitKbd } from '../kbd-utils'
 import { useCommentingEnabled } from './useCommentingEnabled'
 import { useReadonly } from './useReadonly'
 import { useTools } from './useTools'
@@ -360,7 +360,7 @@ const PHYSICAL_KEY_MAP: Record<string, string> = {
  */
 export function parseKbd(kbd: string): ParsedKbd[] {
 	const out: ParsedKbd[] = []
-	for (const shortcut of getKeys(kbd)) {
+	for (const shortcut of splitKbd(kbd.replace(/\s/g, ''))) {
 		const parsed = parseShortcut(shortcut)
 		if (parsed) out.push(parsed)
 	}
@@ -472,7 +472,7 @@ function shouldSkipEvent(e: KeyboardEvent): boolean {
  * @internal
  */
 export function getHotkeysStringFromKbd(kbd: string) {
-	return getKeys(kbd)
+	return splitKbd(kbd.replace(/\s/g, ''))
 		.map((kbd) => {
 			let str = ''
 
@@ -505,21 +505,3 @@ export function getHotkeysStringFromKbd(kbd: string) {
 		})
 		.join(',')
 }
-
-// Split a kbd string on commas, treating an empty entry produced by "x,," as a literal
-// trailing comma on the previous entry. Verbatim port of the splitter from hotkeys-js
-// (MIT, see top-of-file attribution).
-function getKeys(key: string) {
-	if (typeof key !== 'string') key = ''
-	key = key.replace(/\s/g, '')
-	const keys = key.split(',')
-	let index = keys.lastIndexOf('')
-
-	for (; index >= 0; ) {
-		keys[index - 1] += ','
-		keys.splice(index, 1)
-		index = keys.lastIndexOf('')
-	}
-
-	return keys
-}

package/src/lib/ui/kbd-utils.test.ts

@@ -0,0 +1,11 @@
+import { kbd } from './kbd-utils'
+
+describe('kbd', () => {
+	it('displays a comma key with modifiers', () => {
+		expect(kbd('shift+,,shift+alt+,')).toEqual([...kbd('shift+.').slice(0, -1), ','])
+	})
+
+	it('preserves spaces in atomic key labels', () => {
+		expect(kbd('[[Page Up]]')).toEqual(['Page Up'])
+	})
+})

package/src/lib/ui/kbd-utils.ts

@@ -1,5 +1,14 @@
 import { tlenv } from '@tldraw/editor'
 
+/*!
+ * `splitKbd` is adapted from hotkeys-js.
+ *
+ * MIT License: https://github.com/jaywcjlove/hotkeys-js/blob/master/LICENSE
+ * Copyright (c) 2015-present, Kenny Wong
+ * Copyright (c) 2011-2013 Thomas Fuchs (https://github.com/madrobby/keymaster)
+ * Source: https://github.com/jaywcjlove/hotkeys-js
+ */
+
 // N.B. We rework these Windows placeholders down below.
 const cmdKey = tlenv.isDarwin ? '⌘' : '__CTRL__'
 const ctrlKey = tlenv.isDarwin ? '⌃' : '__CTRL__'
@@ -7,11 +16,8 @@ const altKey = tlenv.isDarwin ? '⌥' : '__ALT__'
 
 /** @public */
 export function kbd(str: string) {
-	if (str === ',') return [',']
-
 	return (
-		str
-			.split(',')[0]
+		(splitKbd(str)[0] ?? '')
 			// If the string contains [[Tab]], we don't split these up
 			// as they're meant to be atomic.
 			.split(/(\[\[[^\]]+\]\])/g)
@@ -47,6 +53,23 @@ export function kbd(str: string) {
 	)
 }
 
+// Split a kbd string on commas, treating an empty entry produced by "x,," as a literal
+// trailing comma on the previous entry.
+/** @internal */
+export function splitKbd(key: string) {
+	if (!key) return []
+	const keys = key.split(',')
+	let index = keys.lastIndexOf('')
+
+	for (; index >= 0; ) {
+		keys[index - 1] += ','
+		keys.splice(index, 1)
+		index = keys.lastIndexOf('')
+	}
+
+	return keys
+}
+
 /** @public */
 export function kbdStr(str: string) {
 	return '— ' + kbd(str).join(' ')

package/src/lib/ui/version.ts

@@ -1,9 +1,9 @@
 // This file is automatically generated by internal/scripts/refresh-assets.ts.
 // Do not edit manually. Or do, I'm a comment, not a cop.
 
-export const version = '5.3.2'
+export const version = '5.4.0-canary.042da660fa66'
 export const publishDates = {
 	major: '2026-05-06T16:28:18.473Z',
-	minor: '2026-08-05T11:39:54.978Z',
-	patch: '2026-08-18T09:59:40.172Z',
+	minor: '2026-08-19T12:47:12.111Z',
+	patch: '2026-08-19T12:47:12.111Z',
 }