@tldraw/editor 5.1.0 → 5.2.0-canary.4a316fdfb2bb

package/dist-esm/lib/utils/dom.mjs

@@ -36,11 +36,13 @@ function releasePointerCapture(element, event) {
     console.warn("releasePointerCapture called on element:", element, event);
   }
 }
-const stopEventPropagation = (e) => e.stopPropagation();
-const setStyleProperty = (elm, property, value) => {
+function stopEventPropagation(e) {
+  return e.stopPropagation();
+}
+function setStyleProperty(elm, property, value) {
   if (!elm) return;
   elm.style.setProperty(property, String(value));
-};
+}
 function elementShouldCaptureKeys(el, includeButtonsAndMenus = true) {
   if (!el) return false;
   const tagName = el.tagName.toLowerCase();

package/dist-esm/lib/utils/dom.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/lib/utils/dom.ts"],
-  "sourcesContent": ["/*\nThis is used to facilitate double clicking and pointer capture on elements.\n\nThe events in this file are possibly set on individual SVG elements, \nsuch as handles or corner handles, rather than on HTML elements or \nSVGSVGElements. Raw SVG elements do not support pointerCapture in\nmost cases, meaning that in order for pointer capture to work, we \nneed to crawl up the DOM tree to find the nearest HTML element. Then,\nin order for that element to also call the `onPointerUp` event from\nthis file, we need to manually set that event on that element and\nlater remove it when the pointerup occurs. This is a potential leak\nif the user clicks on a handle but the pointerup does not fire for\nwhatever reason.\n*/\n\nimport { debugFlags, pointerCaptureTrackingObject } from './debug-flags'\n\n/** @public */\nexport function loopToHtmlElement(elm: Element): HTMLElement {\n\tif (elm.nodeType === Node.ELEMENT_NODE) return elm as HTMLElement\n\tif (elm.parentElement) return loopToHtmlElement(elm.parentElement)\n\telse throw Error('Could not find a parent element of an HTML type!')\n}\n\n/**\n * This function calls `event.preventDefault()` for you. Why is that useful?\n *\n * Because if you enable `window.preventDefaultLogging = true` it'll log out a message when it\n * happens. Because we use console.warn rather than (log) you'll get a stack trace in the inspector\n * telling you exactly where it happened. This is important because `e.preventDefault()` is the\n * source of many bugs, but unfortunately it can't be avoided because it also stops a lot of default\n * behaviour which doesn't make sense in our UI\n *\n * @param event - To prevent default on\n * @public\n */\nexport function preventDefault(event: React.BaseSyntheticEvent | Event) {\n\tif ('cancelable' in event && !event.cancelable) return\n\tevent.preventDefault()\n\tif (debugFlags.logPreventDefaults.get()) {\n\t\tconsole.warn('preventDefault called on event:', event)\n\t}\n}\n\n/** @public */\nexport function setPointerCapture(\n\telement: Element,\n\tevent: React.PointerEvent<Element> | PointerEvent\n) {\n\telement.setPointerCapture(event.pointerId)\n\tif (debugFlags.logPointerCaptures.get()) {\n\t\tconst trackingObj = pointerCaptureTrackingObject.get()\n\t\ttrackingObj.set(element, (trackingObj.get(element) ?? 0) + 1)\n\t\tconsole.warn('setPointerCapture called on element:', element, event)\n\t}\n}\n\n/** @public */\nexport function releasePointerCapture(\n\telement: Element,\n\tevent: React.PointerEvent<Element> | PointerEvent\n) {\n\tif (!element.hasPointerCapture(event.pointerId)) {\n\t\treturn\n\t}\n\n\telement.releasePointerCapture(event.pointerId)\n\tif (debugFlags.logPointerCaptures.get()) {\n\t\tconst trackingObj = pointerCaptureTrackingObject.get()\n\t\tif (trackingObj.get(element) === 1) {\n\t\t\ttrackingObj.delete(element)\n\t\t} else if (trackingObj.has(element)) {\n\t\t\ttrackingObj.set(element, trackingObj.get(element)! - 1)\n\t\t} else {\n\t\t\tconsole.warn('Release without capture')\n\t\t}\n\t\tconsole.warn('releasePointerCapture called on element:', element, event)\n\t}\n}\n\n/**\n * Calls `event.stopPropagation()`.\n *\n * @deprecated Use {@link Editor.markEventAsHandled} instead, or manually call `event.stopPropagation()` if\n * that's what you really want.\n *\n * @public\n */\nexport const stopEventPropagation = (e: any) => e.stopPropagation()\n\n/** @internal */\nexport const setStyleProperty = (\n\telm: HTMLElement | null,\n\tproperty: string,\n\tvalue: string | number\n) => {\n\tif (!elm) return\n\telm.style.setProperty(property, String(value))\n}\n\n/** @internal */\nexport function elementShouldCaptureKeys(el: Element | null, includeButtonsAndMenus = true) {\n\tif (!el) return false\n\n\tconst tagName = el.tagName.toLowerCase()\n\treturn (\n\t\t(el as HTMLElement).isContentEditable ||\n\t\ttagName === 'input' ||\n\t\ttagName === 'textarea' ||\n\t\t(includeButtonsAndMenus && tagName === 'select') ||\n\t\t(includeButtonsAndMenus && tagName === 'button') ||\n\t\tel.classList.contains('tlui-slider__thumb')\n\t)\n}\n\n/**\n * Returns the global `document`. Use this instead of bare `document` to satisfy lint rules.\n *\n * When you have a DOM node or editor instance, prefer the scoped versions instead:\n * - `getOwnerDocument(node)` \u2013 the document that owns a specific DOM node\n * - `editor.getContainerDocument()` \u2013 the document where the editor is mounted\n *\n * @internal\n */\nexport function getGlobalDocument(): Document {\n\t// eslint-disable-next-line no-restricted-globals\n\tif (typeof document !== 'undefined') return document\n\treturn globalThis.document\n}\n\n/**\n * Returns the global `window`. Use this instead of bare `window` to satisfy lint rules.\n *\n * When you have a DOM node or editor instance, prefer the scoped versions instead:\n * - `getOwnerWindow(node)` \u2013 the window that owns a specific DOM node\n * - `editor.getContainerWindow()` \u2013 the window where the editor is mounted\n *\n * @internal\n */\nexport function getGlobalWindow(): Window & typeof globalThis {\n\tif (typeof window !== 'undefined') return window as Window & typeof globalThis\n\treturn globalThis as Window & typeof globalThis\n}\n\n/** @internal */\nexport function activeElementShouldCaptureKeys(includeButtonsAndMenus = true, doc?: Document) {\n\treturn elementShouldCaptureKeys(\n\t\t(doc ?? getGlobalDocument()).activeElement,\n\t\tincludeButtonsAndMenus\n\t)\n}\n"],
-  "mappings": "AAeA,SAAS,YAAY,oCAAoC;AAGlD,SAAS,kBAAkB,KAA2B;AAC5D,MAAI,IAAI,aAAa,KAAK,aAAc,QAAO;AAC/C,MAAI,IAAI,cAAe,QAAO,kBAAkB,IAAI,aAAa;AAAA,MAC5D,OAAM,MAAM,kDAAkD;AACpE;AAcO,SAAS,eAAe,OAAyC;AACvE,MAAI,gBAAgB,SAAS,CAAC,MAAM,WAAY;AAChD,QAAM,eAAe;AACrB,MAAI,WAAW,mBAAmB,IAAI,GAAG;AACxC,YAAQ,KAAK,mCAAmC,KAAK;AAAA,EACtD;AACD;AAGO,SAAS,kBACf,SACA,OACC;AACD,UAAQ,kBAAkB,MAAM,SAAS;AACzC,MAAI,WAAW,mBAAmB,IAAI,GAAG;AACxC,UAAM,cAAc,6BAA6B,IAAI;AACrD,gBAAY,IAAI,UAAU,YAAY,IAAI,OAAO,KAAK,KAAK,CAAC;AAC5D,YAAQ,KAAK,wCAAwC,SAAS,KAAK;AAAA,EACpE;AACD;AAGO,SAAS,sBACf,SACA,OACC;AACD,MAAI,CAAC,QAAQ,kBAAkB,MAAM,SAAS,GAAG;AAChD;AAAA,EACD;AAEA,UAAQ,sBAAsB,MAAM,SAAS;AAC7C,MAAI,WAAW,mBAAmB,IAAI,GAAG;AACxC,UAAM,cAAc,6BAA6B,IAAI;AACrD,QAAI,YAAY,IAAI,OAAO,MAAM,GAAG;AACnC,kBAAY,OAAO,OAAO;AAAA,IAC3B,WAAW,YAAY,IAAI,OAAO,GAAG;AACpC,kBAAY,IAAI,SAAS,YAAY,IAAI,OAAO,IAAK,CAAC;AAAA,IACvD,OAAO;AACN,cAAQ,KAAK,yBAAyB;AAAA,IACvC;AACA,YAAQ,KAAK,4CAA4C,SAAS,KAAK;AAAA,EACxE;AACD;AAUO,MAAM,uBAAuB,CAAC,MAAW,EAAE,gBAAgB;AAG3D,MAAM,mBAAmB,CAC/B,KACA,UACA,UACI;AACJ,MAAI,CAAC,IAAK;AACV,MAAI,MAAM,YAAY,UAAU,OAAO,KAAK,CAAC;AAC9C;AAGO,SAAS,yBAAyB,IAAoB,yBAAyB,MAAM;AAC3F,MAAI,CAAC,GAAI,QAAO;AAEhB,QAAM,UAAU,GAAG,QAAQ,YAAY;AACvC,SACE,GAAmB,qBACpB,YAAY,WACZ,YAAY,cACX,0BAA0B,YAAY,YACtC,0BAA0B,YAAY,YACvC,GAAG,UAAU,SAAS,oBAAoB;AAE5C;AAWO,SAAS,oBAA8B;AAE7C,MAAI,OAAO,aAAa,YAAa,QAAO;AAC5C,SAAO,WAAW;AACnB;AAWO,SAAS,kBAA8C;AAC7D,MAAI,OAAO,WAAW,YAAa,QAAO;AAC1C,SAAO;AACR;AAGO,SAAS,+BAA+B,yBAAyB,MAAM,KAAgB;AAC7F,SAAO;AAAA,KACL,OAAO,kBAAkB,GAAG;AAAA,IAC7B;AAAA,EACD;AACD;",
+  "sourcesContent": ["/*\nThis is used to facilitate double clicking and pointer capture on elements.\n\nThe events in this file are possibly set on individual SVG elements, \nsuch as handles or corner handles, rather than on HTML elements or \nSVGSVGElements. Raw SVG elements do not support pointerCapture in\nmost cases, meaning that in order for pointer capture to work, we \nneed to crawl up the DOM tree to find the nearest HTML element. Then,\nin order for that element to also call the `onPointerUp` event from\nthis file, we need to manually set that event on that element and\nlater remove it when the pointerup occurs. This is a potential leak\nif the user clicks on a handle but the pointerup does not fire for\nwhatever reason.\n*/\n\nimport { debugFlags, pointerCaptureTrackingObject } from './debug-flags'\n\n/** @public */\nexport function loopToHtmlElement(elm: Element): HTMLElement {\n\tif (elm.nodeType === Node.ELEMENT_NODE) return elm as HTMLElement\n\tif (elm.parentElement) return loopToHtmlElement(elm.parentElement)\n\telse throw Error('Could not find a parent element of an HTML type!')\n}\n\n/**\n * This function calls `event.preventDefault()` for you. Why is that useful?\n *\n * Because if you enable `window.preventDefaultLogging = true` it'll log out a message when it\n * happens. Because we use console.warn rather than (log) you'll get a stack trace in the inspector\n * telling you exactly where it happened. This is important because `e.preventDefault()` is the\n * source of many bugs, but unfortunately it can't be avoided because it also stops a lot of default\n * behaviour which doesn't make sense in our UI\n *\n * @param event - To prevent default on\n * @public\n */\nexport function preventDefault(event: React.BaseSyntheticEvent | Event) {\n\tif ('cancelable' in event && !event.cancelable) return\n\tevent.preventDefault()\n\tif (debugFlags.logPreventDefaults.get()) {\n\t\tconsole.warn('preventDefault called on event:', event)\n\t}\n}\n\n/** @public */\nexport function setPointerCapture(\n\telement: Element,\n\tevent: React.PointerEvent<Element> | PointerEvent\n) {\n\telement.setPointerCapture(event.pointerId)\n\tif (debugFlags.logPointerCaptures.get()) {\n\t\tconst trackingObj = pointerCaptureTrackingObject.get()\n\t\ttrackingObj.set(element, (trackingObj.get(element) ?? 0) + 1)\n\t\tconsole.warn('setPointerCapture called on element:', element, event)\n\t}\n}\n\n/** @public */\nexport function releasePointerCapture(\n\telement: Element,\n\tevent: React.PointerEvent<Element> | PointerEvent\n) {\n\tif (!element.hasPointerCapture(event.pointerId)) {\n\t\treturn\n\t}\n\n\telement.releasePointerCapture(event.pointerId)\n\tif (debugFlags.logPointerCaptures.get()) {\n\t\tconst trackingObj = pointerCaptureTrackingObject.get()\n\t\tif (trackingObj.get(element) === 1) {\n\t\t\ttrackingObj.delete(element)\n\t\t} else if (trackingObj.has(element)) {\n\t\t\ttrackingObj.set(element, trackingObj.get(element)! - 1)\n\t\t} else {\n\t\t\tconsole.warn('Release without capture')\n\t\t}\n\t\tconsole.warn('releasePointerCapture called on element:', element, event)\n\t}\n}\n\n/**\n * Calls `event.stopPropagation()`.\n *\n * @deprecated Use {@link Editor.markEventAsHandled} instead, or manually call `event.stopPropagation()` if\n * that's what you really want.\n *\n * @public\n */\nexport function stopEventPropagation(e: any) {\n\treturn e.stopPropagation()\n}\n\n/** @internal */\nexport function setStyleProperty(\n\telm: HTMLElement | null,\n\tproperty: string,\n\tvalue: string | number\n) {\n\tif (!elm) return\n\telm.style.setProperty(property, String(value))\n}\n\n/** @internal */\nexport function elementShouldCaptureKeys(el: Element | null, includeButtonsAndMenus = true) {\n\tif (!el) return false\n\n\tconst tagName = el.tagName.toLowerCase()\n\treturn (\n\t\t(el as HTMLElement).isContentEditable ||\n\t\ttagName === 'input' ||\n\t\ttagName === 'textarea' ||\n\t\t(includeButtonsAndMenus && tagName === 'select') ||\n\t\t(includeButtonsAndMenus && tagName === 'button') ||\n\t\tel.classList.contains('tlui-slider__thumb')\n\t)\n}\n\n/**\n * Returns the global `document`. Use this instead of bare `document` to satisfy lint rules.\n *\n * When you have a DOM node or editor instance, prefer the scoped versions instead:\n * - `getOwnerDocument(node)` \u2013 the document that owns a specific DOM node\n * - `editor.getContainerDocument()` \u2013 the document where the editor is mounted\n *\n * @internal\n */\nexport function getGlobalDocument(): Document {\n\t// eslint-disable-next-line no-restricted-globals\n\tif (typeof document !== 'undefined') return document\n\treturn globalThis.document\n}\n\n/**\n * Returns the global `window`. Use this instead of bare `window` to satisfy lint rules.\n *\n * When you have a DOM node or editor instance, prefer the scoped versions instead:\n * - `getOwnerWindow(node)` \u2013 the window that owns a specific DOM node\n * - `editor.getContainerWindow()` \u2013 the window where the editor is mounted\n *\n * @internal\n */\nexport function getGlobalWindow(): Window & typeof globalThis {\n\tif (typeof window !== 'undefined') return window as Window & typeof globalThis\n\treturn globalThis as Window & typeof globalThis\n}\n\n/** @internal */\nexport function activeElementShouldCaptureKeys(includeButtonsAndMenus = true, doc?: Document) {\n\treturn elementShouldCaptureKeys(\n\t\t(doc ?? getGlobalDocument()).activeElement,\n\t\tincludeButtonsAndMenus\n\t)\n}\n"],
+  "mappings": "AAeA,SAAS,YAAY,oCAAoC;AAGlD,SAAS,kBAAkB,KAA2B;AAC5D,MAAI,IAAI,aAAa,KAAK,aAAc,QAAO;AAC/C,MAAI,IAAI,cAAe,QAAO,kBAAkB,IAAI,aAAa;AAAA,MAC5D,OAAM,MAAM,kDAAkD;AACpE;AAcO,SAAS,eAAe,OAAyC;AACvE,MAAI,gBAAgB,SAAS,CAAC,MAAM,WAAY;AAChD,QAAM,eAAe;AACrB,MAAI,WAAW,mBAAmB,IAAI,GAAG;AACxC,YAAQ,KAAK,mCAAmC,KAAK;AAAA,EACtD;AACD;AAGO,SAAS,kBACf,SACA,OACC;AACD,UAAQ,kBAAkB,MAAM,SAAS;AACzC,MAAI,WAAW,mBAAmB,IAAI,GAAG;AACxC,UAAM,cAAc,6BAA6B,IAAI;AACrD,gBAAY,IAAI,UAAU,YAAY,IAAI,OAAO,KAAK,KAAK,CAAC;AAC5D,YAAQ,KAAK,wCAAwC,SAAS,KAAK;AAAA,EACpE;AACD;AAGO,SAAS,sBACf,SACA,OACC;AACD,MAAI,CAAC,QAAQ,kBAAkB,MAAM,SAAS,GAAG;AAChD;AAAA,EACD;AAEA,UAAQ,sBAAsB,MAAM,SAAS;AAC7C,MAAI,WAAW,mBAAmB,IAAI,GAAG;AACxC,UAAM,cAAc,6BAA6B,IAAI;AACrD,QAAI,YAAY,IAAI,OAAO,MAAM,GAAG;AACnC,kBAAY,OAAO,OAAO;AAAA,IAC3B,WAAW,YAAY,IAAI,OAAO,GAAG;AACpC,kBAAY,IAAI,SAAS,YAAY,IAAI,OAAO,IAAK,CAAC;AAAA,IACvD,OAAO;AACN,cAAQ,KAAK,yBAAyB;AAAA,IACvC;AACA,YAAQ,KAAK,4CAA4C,SAAS,KAAK;AAAA,EACxE;AACD;AAUO,SAAS,qBAAqB,GAAQ;AAC5C,SAAO,EAAE,gBAAgB;AAC1B;AAGO,SAAS,iBACf,KACA,UACA,OACC;AACD,MAAI,CAAC,IAAK;AACV,MAAI,MAAM,YAAY,UAAU,OAAO,KAAK,CAAC;AAC9C;AAGO,SAAS,yBAAyB,IAAoB,yBAAyB,MAAM;AAC3F,MAAI,CAAC,GAAI,QAAO;AAEhB,QAAM,UAAU,GAAG,QAAQ,YAAY;AACvC,SACE,GAAmB,qBACpB,YAAY,WACZ,YAAY,cACX,0BAA0B,YAAY,YACtC,0BAA0B,YAAY,YACvC,GAAG,UAAU,SAAS,oBAAoB;AAE5C;AAWO,SAAS,oBAA8B;AAE7C,MAAI,OAAO,aAAa,YAAa,QAAO;AAC5C,SAAO,WAAW;AACnB;AAWO,SAAS,kBAA8C;AAC7D,MAAI,OAAO,WAAW,YAAa,QAAO;AAC1C,SAAO;AACR;AAGO,SAAS,+BAA+B,yBAAyB,MAAM,KAAgB;AAC7F,SAAO;AAAA,KACL,OAAO,kBAAkB,GAAG;AAAA,IAC7B;AAAA,EACD;AACD;",
   "names": []
 }

package/dist-esm/version.mjs

@@ -1,8 +1,8 @@
-const version = "5.1.0";
+const version = "5.2.0-canary.4a316fdfb2bb";
 const publishDates = {
   major: "2026-05-06T16:28:18.473Z",
-  minor: "2026-06-03T10:26:13.606Z",
-  patch: "2026-06-03T10:26:13.606Z"
+  minor: "2026-06-05T11:56:57.032Z",
+  patch: "2026-06-05T11:56:57.032Z"
 };
 export {
   publishDates,

package/dist-esm/version.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../src/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.1.0'\nexport const publishDates = {\n\tmajor: '2026-05-06T16:28:18.473Z',\n\tminor: '2026-06-03T10:26:13.606Z',\n\tpatch: '2026-06-03T10:26:13.606Z',\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.2.0-canary.4a316fdfb2bb'\nexport const publishDates = {\n\tmajor: '2026-05-06T16:28:18.473Z',\n\tminor: '2026-06-05T11:56:57.032Z',\n\tpatch: '2026-06-05T11:56:57.032Z',\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/editor",
   "description": "tldraw infinite canvas SDK (editor).",
-  "version": "5.1.0",
+  "version": "5.2.0-canary.4a316fdfb2bb",
   "author": {
     "name": "tldraw Inc.",
     "email": "hello@tldraw.com"
@@ -49,12 +49,12 @@
     "@tiptap/core": "^3.12.1",
     "@tiptap/pm": "^3.12.1",
     "@tiptap/react": "^3.12.1",
-    "@tldraw/state": "5.1.0",
-    "@tldraw/state-react": "5.1.0",
-    "@tldraw/store": "5.1.0",
-    "@tldraw/tlschema": "5.1.0",
-    "@tldraw/utils": "5.1.0",
-    "@tldraw/validate": "5.1.0",
+    "@tldraw/state": "5.2.0-canary.4a316fdfb2bb",
+    "@tldraw/state-react": "5.2.0-canary.4a316fdfb2bb",
+    "@tldraw/store": "5.2.0-canary.4a316fdfb2bb",
+    "@tldraw/tlschema": "5.2.0-canary.4a316fdfb2bb",
+    "@tldraw/utils": "5.2.0-canary.4a316fdfb2bb",
+    "@tldraw/validate": "5.2.0-canary.4a316fdfb2bb",
     "classnames": "^2.5.1",
     "eventemitter3": "^4.0.7",
     "idb": "^7.1.1",

package/src/lib/components/default-components/DefaultErrorFallback.tsx

@@ -16,7 +16,10 @@ const BASE_ERROR_URL = 'https://github.com/tldraw/tldraw/issues/new'
 export type TLErrorFallbackComponent = ComponentType<{ error: unknown; editor?: Editor }>
 
 /** @public @react */
-export const DefaultErrorFallback: TLErrorFallbackComponent = ({ error, editor }) => {
+export const DefaultErrorFallback: TLErrorFallbackComponent = function DefaultErrorFallback({
+	error,
+	editor,
+}) {
 	const containerRef = useRef<HTMLDivElement>(null)
 	const [shouldShowError, setShouldShowError] = useState(process.env.NODE_ENV === 'development')
 	const [didCopy, setDidCopy] = useState(false)

package/src/lib/components/default-components/DefaultLoadingScreen.tsx

@@ -1,7 +1,7 @@
 import { useEditorComponents } from '../../hooks/EditorComponentsContext'
 
 /** @public @react */
-export const DefaultLoadingScreen = () => {
+export function DefaultLoadingScreen() {
 	const { Spinner } = useEditorComponents()
 	return (
 		<div className="tl-loading" aria-busy="true" tabIndex={0}>

package/src/lib/components/default-components/DefaultShapeErrorFallback.tsx

@@ -4,6 +4,7 @@ import { ComponentType } from 'react'
 export type TLShapeErrorFallbackComponent = ComponentType<{ error: any }>
 
 /** @internal */
-export const DefaultShapeErrorFallback: TLShapeErrorFallbackComponent = () => {
-	return <div className="tl-shape-error-boundary" />
-}
+export const DefaultShapeErrorFallback: TLShapeErrorFallbackComponent =
+	function DefaultShapeErrorFallback() {
+		return <div className="tl-shape-error-boundary" />
+	}

package/src/lib/components/default-components/DefaultSvgDefs.tsx

@@ -1,4 +1,4 @@
 /** @public @react */
-export const DefaultSvgDefs = () => {
+export function DefaultSvgDefs() {
 	return null
 }

package/src/lib/editor/Editor.ts

@@ -10768,6 +10768,16 @@ export class Editor extends EventEmitter<TLEventMap> {
 	/** @internal */
 	private _selectedShapeIdsAtPointerDown: TLShapeId[] = []
 
+	/**
+	 * Whether `_selectedShapeIdsAtPointerDown` holds a pre-gesture selection
+	 * captured by a `pointer_down` (the touch path) that a following pinch
+	 * should restore. False when no pointer_down preceded the pinch (the
+	 * Safari trackpad path uses gesture events), in which case `pinch_start`
+	 * captures the live selection instead.
+	 * @internal
+	 */
+	private _didCaptureSelectionAtPointerDown = false
+
 	/** @internal */
 	private _longPressTimeout = -1 as any
 
@@ -10933,16 +10943,28 @@ export class Editor extends EventEmitter<TLEventMap> {
 						if (inputs.getIsPinching()) return
 
 						if (!inputs.getIsEditing()) {
-							// Always capture the current selection when pinch starts.
-							// This ensures Safari (which uses gesture events instead of wheel)
-							// doesn't restore a stale selection from an earlier pointer_down.
-							this._selectedShapeIdsAtPointerDown = [...pageState.selectedShapeIds]
+							// If a pointer_down already captured the pre-gesture selection,
+							// keep it: on touch, the first finger's pointer_down can change
+							// the selection before the second finger starts the pinch, and we
+							// want to restore the selection from before that change. When no
+							// pointer_down preceded the pinch (Safari delivers trackpad pinches
+							// as gesture events), capture the live selection now.
+							if (!this._didCaptureSelectionAtPointerDown) {
+								this._selectedShapeIdsAtPointerDown = [...pageState.selectedShapeIds]
+							}
 
 							this._didPinch = true
 
 							inputs.setIsPinching(true)
 
 							this.interrupt()
+
+							// If the first finger changed the selection, roll it back now rather
+							// than waiting for the pinch to end, so the pre-gesture selection is
+							// what's shown during the pinch.
+							if (this._didCaptureSelectionAtPointerDown) {
+								this.setSelectedShapes(this._selectedShapeIdsAtPointerDown)
+							}
 						}
 
 						this.emit('event', info)
@@ -10994,6 +11016,7 @@ export class Editor extends EventEmitter<TLEventMap> {
 						const { _selectedShapeIdsAtPointerDown: shapesToReselect } = this
 						this.setSelectedShapes(this._selectedShapeIdsAtPointerDown)
 						this._selectedShapeIdsAtPointerDown = []
+						this._didCaptureSelectionAtPointerDown = false
 
 						if (this._didPinch) {
 							this._didPinch = false
@@ -11122,8 +11145,15 @@ export class Editor extends EventEmitter<TLEventMap> {
 							}, this.options.longPressDurationMs)
 						}
 
-						// Save the selected ids at pointer down
-						this._selectedShapeIdsAtPointerDown = this.getSelectedShapeIds()
+						// Save the selected ids at the start of an interaction so a pinch can
+						// restore the pre-gesture selection. Only capture on the first pointer:
+						// on touch, the second finger's pointer_down arrives after the first
+						// has already changed the selection, and we want the earlier snapshot.
+						// Cleared on pointer_up / pinch_end.
+						if (!this._didCaptureSelectionAtPointerDown) {
+							this._selectedShapeIdsAtPointerDown = this.getSelectedShapeIds()
+							this._didCaptureSelectionAtPointerDown = true
+						}
 
 						// Firefox bug fix...
 						// If it's a left-mouse-click, we store the pointer id for later user
@@ -11243,6 +11273,7 @@ export class Editor extends EventEmitter<TLEventMap> {
 						if (this.inputs.getIsRightPointing() && !this.inputs.getIsPanning()) {
 							this.inputs.setIsRightPointing(false)
 							this._selectedShapeIdsAtPointerDown = []
+							this._didCaptureSelectionAtPointerDown = false
 							break // fall through to state chart dispatch as right_click
 						}
 
@@ -11289,6 +11320,7 @@ export class Editor extends EventEmitter<TLEventMap> {
 										this.slideCamera({ speed: slideSpeed, direction: slideDirection })
 									}
 									this._selectedShapeIdsAtPointerDown = []
+									this._didCaptureSelectionAtPointerDown = false
 									return this
 								}
 							}
@@ -11307,6 +11339,7 @@ export class Editor extends EventEmitter<TLEventMap> {
 						// Clear the stashed selection so the next pinch captures fresh state.
 						// This fixes Safari pinch zoom restoring outdated selections.
 						this._selectedShapeIdsAtPointerDown = []
+						this._didCaptureSelectionAtPointerDown = false
 
 						break
 					}

package/src/lib/editor/derivations/bindingsIndex.ts

@@ -29,7 +29,7 @@ function fromScratch(bindingsQuery: Computed<TLBinding[], unknown>) {
 	return shapesToBindings
 }
 
-export const bindingsIndex = (editor: Editor): Computed<TLBindingsIndex> => {
+export function bindingsIndex(editor: Editor): Computed<TLBindingsIndex> {
 	const { store } = editor
 	const bindingsHistory = store.query.filterHistory('binding')
 	const bindingsQuery = store.query.records('binding')

package/src/lib/editor/derivations/parentsToChildren.ts

@@ -22,7 +22,7 @@ function fromScratch(
 	return result
 }
 
-export const parentsToChildren = (store: TLStore) => {
+export function parentsToChildren(store: TLStore) {
 	const shapeIdsQuery = store.query.ids<'shape'>('shape')
 	const shapeHistory = store.query.filterHistory('shape')
 

package/src/lib/editor/derivations/shapeIdsInCurrentPage.ts

@@ -33,7 +33,7 @@ const isShapeInPage = (store: TLStore, pageId: TLPageId, shape: TLShape): boolea
  * @param store - The tldraw store.
  * @param getCurrentPageId - A function that returns the current page id.
  */
-export const deriveShapeIdsInCurrentPage = (store: TLStore, getCurrentPageId: () => TLPageId) => {
+export function deriveShapeIdsInCurrentPage(store: TLStore, getCurrentPageId: () => TLPageId) {
 	const shapesIndex = store.query.ids('shape')
 	let lastPageId: null | TLPageId = null
 	function fromScratch() {

package/src/lib/editor/managers/ClickManager/ClickManager.test.ts

@@ -122,7 +122,7 @@ describe('ClickManager', () => {
 			expect(result.type).toBe('click')
 			expect(result.name).toBe('double_click')
 			expect(result.phase).toBe('down')
-			expect(clickManager.clickState).toBe('pendingTriple')
+			expect(clickManager.clickState).toBe('pendingOverflow')
 		})
 
 		it('should generate double_click up event on pointer_up after double_click down', () => {
@@ -139,12 +139,34 @@ describe('ClickManager', () => {
 			expect(result.phase).toBe('up')
 		})
 
-		it('should dispatch double_click settle event after timeout in pendingTriple', () => {
+		it('should dispatch double_click settle-down event after timeout in pendingOverflow (pointer held)', () => {
 			const firstDown = createPointerEvent('pointer_down', { x: 100, y: 100 })
 			const secondDown = createPointerEvent('pointer_down', { x: 100, y: 100 })
 
 			clickManager.handlePointerEvent(firstDown)
 			clickManager.handlePointerEvent(secondDown)
+			// no pointer_up between or after — pointer is still down at settle time
+
+			vi.advanceTimersByTime(350)
+
+			expect(editor.dispatch).toHaveBeenCalledWith(
+				expect.objectContaining({
+					type: 'click',
+					name: 'double_click',
+					phase: 'settle-down',
+				})
+			)
+			expect(clickManager.clickState).toBe('idle')
+		})
+
+		it('should dispatch double_click settle-up event after timeout in pendingOverflow (pointer released)', () => {
+			const down = createPointerEvent('pointer_down', { x: 100, y: 100 })
+			const up = createPointerEvent('pointer_up', { x: 100, y: 100 })
+
+			clickManager.handlePointerEvent(down)
+			clickManager.handlePointerEvent(up)
+			clickManager.handlePointerEvent(down)
+			clickManager.handlePointerEvent(up)
 
 			vi.advanceTimersByTime(350)
 
@@ -152,124 +174,84 @@ describe('ClickManager', () => {
 				expect.objectContaining({
 					type: 'click',
 					name: 'double_click',
-					phase: 'settle',
+					phase: 'settle-up',
 				})
 			)
 			expect(clickManager.clickState).toBe('idle')
 		})
 	})
 
-	describe('triple and quadruple click detection', () => {
-		it('should detect triple click on third pointer_down', () => {
+	describe('overflow click handling', () => {
+		it('should enter overflow on the third pointer_down without emitting another click', () => {
 			const firstDown = createPointerEvent('pointer_down', { x: 100, y: 100 })
 			const secondDown = createPointerEvent('pointer_down', { x: 100, y: 100 })
 			const thirdDown = createPointerEvent('pointer_down', { x: 100, y: 100 })
 
 			clickManager.handlePointerEvent(firstDown)
 			clickManager.handlePointerEvent(secondDown)
-			const result = clickManager.handlePointerEvent(thirdDown) as TLClickEventInfo
+			const result = clickManager.handlePointerEvent(thirdDown)
 
-			expect(result.type).toBe('click')
-			expect(result.name).toBe('triple_click')
-			expect(result.phase).toBe('down')
-			expect(clickManager.clickState).toBe('pendingQuadruple')
+			expect(result).toBe(thirdDown)
+			expect(clickManager.clickState).toBe('overflow')
 		})
 
-		it('should detect quadruple click on fourth pointer_down', () => {
+		it('should keep overflow active on further clicks', () => {
 			const pointerDown = createPointerEvent('pointer_down', { x: 100, y: 100 })
 
 			clickManager.handlePointerEvent(pointerDown) // first
 			clickManager.handlePointerEvent(pointerDown) // second (double_click)
-			clickManager.handlePointerEvent(pointerDown) // third (triple_click)
-			const result = clickManager.handlePointerEvent(pointerDown) as TLClickEventInfo // fourth
-
-			expect(result.type).toBe('click')
-			expect(result.name).toBe('quadruple_click')
-			expect(result.phase).toBe('down')
-			expect(clickManager.clickState).toBe('pendingOverflow')
-		})
-
-		it('should handle overflow state after quadruple click', () => {
-			const pointerDown = createPointerEvent('pointer_down', { x: 100, y: 100 })
-
-			clickManager.handlePointerEvent(pointerDown) // first
-			clickManager.handlePointerEvent(pointerDown) // second
-			clickManager.handlePointerEvent(pointerDown) // third
-			clickManager.handlePointerEvent(pointerDown) // fourth
-			const result = clickManager.handlePointerEvent(pointerDown) // fifth
+			clickManager.handlePointerEvent(pointerDown) // third (overflow)
+			const result = clickManager.handlePointerEvent(pointerDown) // fourth
 
 			expect(result).toBe(pointerDown)
 			expect(clickManager.clickState).toBe('overflow')
 		})
 
-		it('should generate triple_click up event on pointer_up after triple_click down', () => {
-			const pointerDown = createPointerEvent('pointer_down', { x: 100, y: 100 })
-			const pointerUp = createPointerEvent('pointer_up', { x: 100, y: 100 })
-
-			clickManager.handlePointerEvent(pointerDown) // first
-			clickManager.handlePointerEvent(pointerDown) // second
-			clickManager.handlePointerEvent(pointerDown) // third
-			const result = clickManager.handlePointerEvent(pointerUp) as TLClickEventInfo
-
-			expect(result.type).toBe('click')
-			expect(result.name).toBe('triple_click')
-			expect(result.phase).toBe('up')
-		})
-
-		it('should generate quadruple_click up event on pointer_up after quadruple_click down', () => {
+		it('should not emit double_click up events while in overflow', () => {
 			const pointerDown = createPointerEvent('pointer_down', { x: 100, y: 100 })
 			const pointerUp = createPointerEvent('pointer_up', { x: 100, y: 100 })
 
 			clickManager.handlePointerEvent(pointerDown) // first
 			clickManager.handlePointerEvent(pointerDown) // second
 			clickManager.handlePointerEvent(pointerDown) // third
-			clickManager.handlePointerEvent(pointerDown) // fourth
-			const result = clickManager.handlePointerEvent(pointerUp) as TLClickEventInfo
+			const result = clickManager.handlePointerEvent(pointerUp)
 
-			expect(result.type).toBe('click')
-			expect(result.name).toBe('quadruple_click')
-			expect(result.phase).toBe('up')
+			expect(result).toBe(pointerUp)
+			expect(clickManager.clickState).toBe('overflow')
 		})
-	})
 
-	describe('timeout behavior and settle events', () => {
-		it('should dispatch triple_click settle event after timeout in pendingQuadruple', () => {
+		it('should return to idle after overflow timeout without dispatching a settle event', () => {
 			const pointerDown = createPointerEvent('pointer_down', { x: 100, y: 100 })
 
 			clickManager.handlePointerEvent(pointerDown) // first
 			clickManager.handlePointerEvent(pointerDown) // second
-			clickManager.handlePointerEvent(pointerDown) // third
+			clickManager.handlePointerEvent(pointerDown) // third -> overflow
 
 			vi.advanceTimersByTime(350)
 
-			expect(editor.dispatch).toHaveBeenCalledWith(
-				expect.objectContaining({
-					type: 'click',
-					name: 'triple_click',
-					phase: 'settle',
-				})
-			)
+			expect(editor.dispatch).not.toHaveBeenCalled()
 			expect(clickManager.clickState).toBe('idle')
 		})
+	})
 
-		it('should dispatch quadruple_click settle event after timeout in pendingOverflow', () => {
-			const pointerDown = createPointerEvent('pointer_down', { x: 100, y: 100 })
+	describe('timeout behavior and settle events', () => {
+		it('should track press/release state across the pending window (settle-down then release → settle-up)', () => {
+			const down = createPointerEvent('pointer_down', { x: 100, y: 100 })
+			const up = createPointerEvent('pointer_up', { x: 100, y: 100 })
 
-			clickManager.handlePointerEvent(pointerDown) // first
-			clickManager.handlePointerEvent(pointerDown) // second
-			clickManager.handlePointerEvent(pointerDown) // third
-			clickManager.handlePointerEvent(pointerDown) // fourth
+			clickManager.handlePointerEvent(down)
+			clickManager.handlePointerEvent(up)
+			clickManager.handlePointerEvent(down) // second press — pointer is down...
+			clickManager.handlePointerEvent(up) // ...but released before timeout
 
 			vi.advanceTimersByTime(350)
 
 			expect(editor.dispatch).toHaveBeenCalledWith(
 				expect.objectContaining({
-					type: 'click',
-					name: 'quadruple_click',
-					phase: 'settle',
+					name: 'double_click',
+					phase: 'settle-up',
 				})
 			)
-			expect(clickManager.clickState).toBe('idle')
 		})
 
 		it('should use different timeout durations for different states', () => {
@@ -316,7 +298,7 @@ describe('ClickManager', () => {
 
 			expect(result.type).toBe('click')
 			expect(result.name).toBe('double_click')
-			expect(clickManager.clickState).toBe('pendingTriple')
+			expect(clickManager.clickState).toBe('pendingOverflow')
 		})
 	})
 
@@ -396,7 +378,7 @@ describe('ClickManager', () => {
 
 			clickManager.handlePointerEvent(pointerDown)
 			clickManager.handlePointerEvent(pointerDown) // double click
-			expect(clickManager.clickState).toBe('pendingTriple')
+			expect(clickManager.clickState).toBe('pendingOverflow')
 
 			clickManager.cancelDoubleClickTimeout()
 
@@ -416,9 +398,7 @@ describe('ClickManager', () => {
 			// Get to overflow state
 			clickManager.handlePointerEvent(pointerDown) // 1
 			clickManager.handlePointerEvent(pointerDown) // 2
-			clickManager.handlePointerEvent(pointerDown) // 3
-			clickManager.handlePointerEvent(pointerDown) // 4
-			clickManager.handlePointerEvent(pointerDown) // 5 -> overflow
+			clickManager.handlePointerEvent(pointerDown) // 3 -> overflow
 
 			expect(clickManager.clickState).toBe('overflow')
 

package/src/lib/editor/managers/ClickManager/ClickManager.ts

@@ -4,13 +4,7 @@ import type { Editor } from '../../Editor'
 import { TLClickEventInfo, TLPointerEventInfo } from '../../types/event-types'
 
 /** @public */
-export type TLClickState =
-	| 'idle'
-	| 'pendingDouble'
-	| 'pendingTriple'
-	| 'pendingQuadruple'
-	| 'pendingOverflow'
-	| 'overflow'
+export type TLClickState = 'idle' | 'pendingDouble' | 'pendingOverflow' | 'overflow'
 
 const MAX_CLICK_DISTANCE = 40
 
@@ -26,6 +20,8 @@ export class ClickManager {
 
 	private _previousScreenPoint?: Vec
 
+	private _isPressingWhilePending = false
+
 	@bind
 	_getClickTimeout(state: TLClickState, id = uniqueId()) {
 		this._clickId = id
@@ -34,30 +30,12 @@ export class ClickManager {
 			() => {
 				if (this._clickState === state && this._clickId === id) {
 					switch (this._clickState) {
-						case 'pendingTriple': {
-							this.editor.dispatch({
-								...this.lastPointerInfo,
-								type: 'click',
-								name: 'double_click',
-								phase: 'settle',
-							})
-							break
-						}
-						case 'pendingQuadruple': {
-							this.editor.dispatch({
-								...this.lastPointerInfo,
-								type: 'click',
-								name: 'triple_click',
-								phase: 'settle',
-							})
-							break
-						}
 						case 'pendingOverflow': {
 							this.editor.dispatch({
 								...this.lastPointerInfo,
 								type: 'click',
-								name: 'quadruple_click',
-								phase: 'settle',
+								name: 'double_click',
+								phase: this._isPressingWhilePending ? 'settle-down' : 'settle-up',
 							})
 							break
 						}
@@ -100,6 +78,8 @@ export class ClickManager {
 				if (!this._clickState) return info
 				this._clickScreenPoint = Vec.From(info.point)
 
+				this._isPressingWhilePending = true
+
 				if (
 					this._previousScreenPoint &&
 					Vec.Dist2(this._previousScreenPoint, this._clickScreenPoint) > MAX_CLICK_DISTANCE ** 2
@@ -113,32 +93,12 @@ export class ClickManager {
 
 				switch (this._clickState) {
 					case 'pendingDouble': {
-						this._clickState = 'pendingTriple'
-						this._clickTimeout = this._getClickTimeout(this._clickState)
-						return {
-							...info,
-							type: 'click',
-							name: 'double_click',
-							phase: 'down',
-						}
-					}
-					case 'pendingTriple': {
-						this._clickState = 'pendingQuadruple'
-						this._clickTimeout = this._getClickTimeout(this._clickState)
-						return {
-							...info,
-							type: 'click',
-							name: 'triple_click',
-							phase: 'down',
-						}
-					}
-					case 'pendingQuadruple': {
 						this._clickState = 'pendingOverflow'
 						this._clickTimeout = this._getClickTimeout(this._clickState)
 						return {
 							...info,
 							type: 'click',
-							name: 'quadruple_click',
+							name: 'double_click',
 							phase: 'down',
 						}
 					}
@@ -159,30 +119,17 @@ export class ClickManager {
 			}
 			case 'pointer_up': {
 				if (!this._clickState) return info
+
 				this._clickScreenPoint = Vec.From(info.point)
 
+				this._isPressingWhilePending = false
+
 				switch (this._clickState) {
-					case 'pendingTriple': {
-						return {
-							...this.lastPointerInfo,
-							type: 'click',
-							name: 'double_click',
-							phase: 'up',
-						}
-					}
-					case 'pendingQuadruple': {
-						return {
-							...this.lastPointerInfo,
-							type: 'click',
-							name: 'triple_click',
-							phase: 'up',
-						}
-					}
 					case 'pendingOverflow': {
 						return {
 							...this.lastPointerInfo,
 							type: 'click',
-							name: 'quadruple_click',
+							name: 'double_click',
 							phase: 'up',
 						}
 					}
@@ -219,5 +166,8 @@ export class ClickManager {
 	cancelDoubleClickTimeout() {
 		this._clickTimeout = clearTimeout(this._clickTimeout)
 		this._clickState = 'idle'
+		// when a double click is cancelled, we are no longer pending any further
+		// clicks, so we set this to false even if the user is still pressing
+		this._isPressingWhilePending = false
 	}
 }