@tldraw/editor 5.2.0-next.ee0fa4d6244f → 5.2.0

package/dist-cjs/lib/utils/dom.js.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 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": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAeA,yBAAyD;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,8BAAW,mBAAmB,IAAI,GAAG;AACxC,YAAQ,KAAK,mCAAmC,KAAK;AAAA,EACtD;AACD;AAGO,SAAS,kBACf,SACA,OACC;AACD,UAAQ,kBAAkB,MAAM,SAAS;AACzC,MAAI,8BAAW,mBAAmB,IAAI,GAAG;AACxC,UAAM,cAAc,gDAA6B,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,8BAAW,mBAAmB,IAAI,GAAG;AACxC,UAAM,cAAc,gDAA6B,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;",
+  "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/**\n * Move an element into a new parent, preserving its state where the platform allows it.\n *\n * Uses `Node.moveBefore` (Chromium 133+, Firefox 144+) when both the element and parent are\n * connected to the same document \u2014 this moves the element without resetting its state, so\n * iframes don't reload and media keeps playing. Otherwise (older browsers, disconnected nodes,\n * or a cross-document move) it falls back to `appendChild`, which moves the element but resets\n * its state like an iframe reload.\n *\n * This is the primitive tldraw uses to adopt `ShapeUtil.getAppOwnedElement` elements, exposed so\n * apps can perform symmetric state-preserving moves from `ShapeUtil.onReleaseAppOwnedElement` \u2014\n * for example moving an element to an off-canvas parking lot between editor sessions.\n *\n * @param parent - The element to move `element` into, as its last child.\n * @param element - The element to move.\n * @public\n */\nexport function moveElementInto(parent: HTMLElement, element: HTMLElement) {\n\tif (\n\t\telement.isConnected &&\n\t\tparent.isConnected &&\n\t\ttypeof (parent as any).moveBefore === 'function' &&\n\t\telement.ownerDocument === parent.ownerDocument\n\t) {\n\t\ttry {\n\t\t\t;(parent as any).moveBefore(element, null)\n\t\t\treturn\n\t\t} catch {\n\t\t\t// fall through to appendChild\n\t\t}\n\t}\n\tparent.appendChild(element)\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": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAeA,yBAAyD;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,8BAAW,mBAAmB,IAAI,GAAG;AACxC,YAAQ,KAAK,mCAAmC,KAAK;AAAA,EACtD;AACD;AAGO,SAAS,kBACf,SACA,OACC;AACD,UAAQ,kBAAkB,MAAM,SAAS;AACzC,MAAI,8BAAW,mBAAmB,IAAI,GAAG;AACxC,UAAM,cAAc,gDAA6B,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,8BAAW,mBAAmB,IAAI,GAAG;AACxC,UAAM,cAAc,gDAA6B,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;AAmBO,SAAS,gBAAgB,QAAqB,SAAsB;AAC1E,MACC,QAAQ,eACR,OAAO,eACP,OAAQ,OAAe,eAAe,cACtC,QAAQ,kBAAkB,OAAO,eAChC;AACD,QAAI;AACH;AAAC,MAAC,OAAe,WAAW,SAAS,IAAI;AACzC;AAAA,IACD,QAAQ;AAAA,IAER;AAAA,EACD;AACA,SAAO,YAAY,OAAO;AAC3B;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-cjs/lib/utils/getPointerInfo.js

@@ -22,6 +22,7 @@ __export(getPointerInfo_exports, {
 });
 module.exports = __toCommonJS(getPointerInfo_exports);
 var import_keyboard = require("./keyboard");
+var import_pointer = require("./pointer");
 function getPointerInfo(editor, e) {
   editor.markEventAsHandled(e);
   return {
@@ -36,7 +37,7 @@ function getPointerInfo(editor, e) {
     metaKey: e.metaKey,
     accelKey: (0, import_keyboard.isAccelKey)(e),
     pointerId: e.pointerId,
-    button: e.button,
+    button: (0, import_pointer.getPointerEventButton)(e),
     isPen: e.pointerType === "pen"
   };
 }

package/dist-cjs/lib/utils/getPointerInfo.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/lib/utils/getPointerInfo.ts"],
-  "sourcesContent": ["import type React from 'react'\nimport { Editor } from '../editor/Editor'\nimport { isAccelKey } from './keyboard'\n\n/** @public */\nexport function getPointerInfo(editor: Editor, e: React.PointerEvent | PointerEvent) {\n\teditor.markEventAsHandled(e)\n\n\treturn {\n\t\tpoint: {\n\t\t\tx: e.clientX,\n\t\t\ty: e.clientY,\n\t\t\tz: e.pressure,\n\t\t},\n\t\tshiftKey: e.shiftKey,\n\t\taltKey: e.altKey,\n\t\tctrlKey: e.metaKey || e.ctrlKey,\n\t\tmetaKey: e.metaKey,\n\t\taccelKey: isAccelKey(e),\n\t\tpointerId: e.pointerId,\n\t\tbutton: e.button,\n\t\tisPen: e.pointerType === 'pen',\n\t}\n}\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,sBAA2B;AAGpB,SAAS,eAAe,QAAgB,GAAsC;AACpF,SAAO,mBAAmB,CAAC;AAE3B,SAAO;AAAA,IACN,OAAO;AAAA,MACN,GAAG,EAAE;AAAA,MACL,GAAG,EAAE;AAAA,MACL,GAAG,EAAE;AAAA,IACN;AAAA,IACA,UAAU,EAAE;AAAA,IACZ,QAAQ,EAAE;AAAA,IACV,SAAS,EAAE,WAAW,EAAE;AAAA,IACxB,SAAS,EAAE;AAAA,IACX,cAAU,4BAAW,CAAC;AAAA,IACtB,WAAW,EAAE;AAAA,IACb,QAAQ,EAAE;AAAA,IACV,OAAO,EAAE,gBAAgB;AAAA,EAC1B;AACD;",
+  "sourcesContent": ["import type React from 'react'\nimport { Editor } from '../editor/Editor'\nimport { isAccelKey } from './keyboard'\nimport { getPointerEventButton } from './pointer'\n\n/** @public */\nexport function getPointerInfo(editor: Editor, e: React.PointerEvent | PointerEvent) {\n\teditor.markEventAsHandled(e)\n\n\treturn {\n\t\tpoint: {\n\t\t\tx: e.clientX,\n\t\t\ty: e.clientY,\n\t\t\tz: e.pressure,\n\t\t},\n\t\tshiftKey: e.shiftKey,\n\t\taltKey: e.altKey,\n\t\tctrlKey: e.metaKey || e.ctrlKey,\n\t\tmetaKey: e.metaKey,\n\t\taccelKey: isAccelKey(e),\n\t\tpointerId: e.pointerId,\n\t\tbutton: getPointerEventButton(e),\n\t\tisPen: e.pointerType === 'pen',\n\t}\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,sBAA2B;AAC3B,qBAAsC;AAG/B,SAAS,eAAe,QAAgB,GAAsC;AACpF,SAAO,mBAAmB,CAAC;AAE3B,SAAO;AAAA,IACN,OAAO;AAAA,MACN,GAAG,EAAE;AAAA,MACL,GAAG,EAAE;AAAA,MACL,GAAG,EAAE;AAAA,IACN;AAAA,IACA,UAAU,EAAE;AAAA,IACZ,QAAQ,EAAE;AAAA,IACV,SAAS,EAAE,WAAW,EAAE;AAAA,IACxB,SAAS,EAAE;AAAA,IACX,cAAU,4BAAW,CAAC;AAAA,IACtB,WAAW,EAAE;AAAA,IACb,YAAQ,sCAAsB,CAAC;AAAA,IAC/B,OAAO,EAAE,gBAAgB;AAAA,EAC1B;AACD;",
   "names": []
 }

package/dist-cjs/lib/utils/pointer.js

@@ -0,0 +1,37 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var pointer_exports = {};
+__export(pointer_exports, {
+  getPointerEventButton: () => getPointerEventButton,
+  isDirectDisplayPen: () => isDirectDisplayPen,
+  isSecondaryClickEvent: () => isSecondaryClickEvent
+});
+module.exports = __toCommonJS(pointer_exports);
+var import_environment = require("../globals/environment");
+function isDirectDisplayPen(e) {
+  if (e.pointerType !== "pen") return false;
+  return import_environment.tlenv.isTouchDevice;
+}
+function isSecondaryClickEvent(e) {
+  return e.button === 2 || import_environment.tlenv.isDarwin && e.button === 0 && e.ctrlKey && !e.metaKey;
+}
+function getPointerEventButton(e) {
+  return isSecondaryClickEvent(e) ? 2 : e.button;
+}
+//# sourceMappingURL=pointer.js.map

package/dist-cjs/lib/utils/pointer.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/lib/utils/pointer.ts"],
+  "sourcesContent": ["import type React from 'react'\nimport { tlenv } from '../globals/environment'\n\n/**\n * Decide whether a pen pointer event looks like direct manipulation on the display (e.g. Apple\n * Pencil on an iPad or a Surface Pen on a touchscreen) rather than indirect input from a desktop\n * graphics tablet (e.g. a Wacom Intuos).\n *\n * We can't tell the two apart from the pointer event itself: both report `pointerType: 'pen'`, and\n * implicit pointer capture \u2014 which in theory distinguishes direct-manipulation pointers \u2014 isn't\n * reliably observable across browsers (notably WebKit/iPad). Instead we key off the device: a\n * direct-display pen draws on a touch-capable screen, while an indirect graphics tablet is used on\n * a non-touch desktop alongside a mouse. A device with no touch input therefore can't host a\n * direct-display pen.\n *\n * Note this uses {@link tlenv.isTouchDevice} \u2014 the device's fixed touch capability \u2014 not the\n * editor's dynamic `isCoarsePointer` state, which a pen `pointerdown` flips to coarse regardless\n * of device.\n *\n * @internal\n */\nexport function isDirectDisplayPen(e: React.PointerEvent | PointerEvent): boolean {\n\tif (e.pointerType !== 'pen') return false\n\treturn tlenv.isTouchDevice\n}\n\n/** @internal */\ninterface PointerLike {\n\tbutton: number\n\tctrlKey: boolean\n\tmetaKey: boolean\n}\n\n/** @internal */\nexport function isSecondaryClickEvent(e: PointerLike) {\n\treturn e.button === 2 || (tlenv.isDarwin && e.button === 0 && e.ctrlKey && !e.metaKey)\n}\n\n/** @internal */\nexport function getPointerEventButton(e: PointerLike) {\n\treturn isSecondaryClickEvent(e) ? 2 : e.button\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,yBAAsB;AAoBf,SAAS,mBAAmB,GAA+C;AACjF,MAAI,EAAE,gBAAgB,MAAO,QAAO;AACpC,SAAO,yBAAM;AACd;AAUO,SAAS,sBAAsB,GAAgB;AACrD,SAAO,EAAE,WAAW,KAAM,yBAAM,YAAY,EAAE,WAAW,KAAK,EAAE,WAAW,CAAC,EAAE;AAC/E;AAGO,SAAS,sBAAsB,GAAgB;AACrD,SAAO,sBAAsB,CAAC,IAAI,IAAI,EAAE;AACzC;",
+  "names": []
+}

package/dist-cjs/version.js

@@ -22,10 +22,10 @@ __export(version_exports, {
   version: () => version
 });
 module.exports = __toCommonJS(version_exports);
-const version = "5.2.0-next.ee0fa4d6244f";
+const version = "5.2.0";
 const publishDates = {
   major: "2026-05-06T16:28:18.473Z",
-  minor: "2026-06-04T16:42:40.803Z",
-  patch: "2026-06-04T16:42:40.803Z"
+  minor: "2026-07-01T09:20:01.735Z",
+  patch: "2026-07-01T09:20:01.735Z"
 };
 //# sourceMappingURL=version.js.map

package/dist-cjs/version.js.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.2.0-next.ee0fa4d6244f'\nexport const publishDates = {\n\tmajor: '2026-05-06T16:28:18.473Z',\n\tminor: '2026-06-04T16:42:40.803Z',\n\tpatch: '2026-06-04T16:42:40.803Z',\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'\nexport const publishDates = {\n\tmajor: '2026-05-06T16:28:18.473Z',\n\tminor: '2026-07-01T09:20:01.735Z',\n\tpatch: '2026-07-01T09:20:01.735Z',\n}\n"],
   "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAGO,MAAM,UAAU;AAChB,MAAM,eAAe;AAAA,EAC3B,OAAO;AAAA,EACP,OAAO;AAAA,EACP,OAAO;AACR;",
   "names": []
 }

package/dist-esm/index.d.mts

@@ -89,6 +89,7 @@ import { TLUnknownAsset } from '@tldraw/tlschema';
 import { TLUnknownBinding } from '@tldraw/tlschema';
 import { TLUnknownShape } from '@tldraw/tlschema';
 import { TLUser } from '@tldraw/tlschema';
+import { TLUserId } from '@tldraw/tlschema';
 import { TLUserStore } from '@tldraw/tlschema';
 import { TLVideoAsset } from '@tldraw/tlschema';
 import { UnknownRecord } from '@tldraw/store';
@@ -646,6 +647,8 @@ export declare class Box {
 /** @public */
 export declare type BoxLike = Box | BoxModel;
 
+/* Excluded from this release type: cancelShapeCreationOnLongPress */
+
 /**
  * @param a - Any angle in radians
  * @returns A number between 0 and 2 * PI
@@ -746,6 +749,7 @@ export declare class ClickManager {
     private _clickTimeout?;
     private _clickScreenPoint?;
     private _previousScreenPoint?;
+    private _isPressingWhilePending;
     _getClickTimeout(state: TLClickState, id?: string): void;
     /* Excluded from this release type: _clickState */
     /**
@@ -984,9 +988,6 @@ export declare const DefaultErrorFallback: TLErrorFallbackComponent;
 /** @public @react */
 export declare function DefaultGrid({ x, y, z, size }: TLGridProps): JSX.Element;
 
-/** @public @react */
-export declare function DefaultSelectionBackground({ bounds, rotation }: TLSelectionBackgroundProps): JSX.Element;
-
 /** @public @react */
 export declare const DefaultShapeWrapper: ForwardRefExoticComponent<TLShapeWrapperProps & RefAttributes<HTMLDivElement>>;
 
@@ -1575,6 +1576,7 @@ export declare class Editor extends EventEmitter<TLEventMap> {
      */
     markHistoryStoppingPoint(name?: string): string;
     /* Excluded from this release type: getMarkIdMatching */
+    /* Excluded from this release type: isReplayingHistory */
     /**
      * Coalesces all changes since the given mark into a single change, removing any intermediate marks.
      *
@@ -2455,7 +2457,7 @@ export declare class Editor extends EventEmitter<TLEventMap> {
      * @param opts - The camera move options.
      * @public
      */
-    zoomToUser(userId: string, opts?: TLCameraMoveOptions): this;
+    zoomToUser(userId: TLUserId, opts?: TLCameraMoveOptions): this;
     /* Excluded from this release type: _willSetInitialBounds */
     /**
      * Update the viewport. The viewport will measure the size and screen position of its container
@@ -2608,7 +2610,7 @@ export declare class Editor extends EventEmitter<TLEventMap> {
      *
      * @public
      */
-    startFollowingUser(userId: string): this;
+    startFollowingUser(userId: TLUserId): this;
     /**
      * Stop viewport-following a user.
      *
@@ -3719,6 +3721,7 @@ export declare class Editor extends EventEmitter<TLEventMap> {
      * @public
      */
     resizeShape(shape: TLShape | TLShapeId, scale: VecLike, opts?: TLResizeShapeOptions): this;
+    /* Excluded from this release type: getResizeShapePartial */
     /* Excluded from this release type: _scalePagePoint */
     /* Excluded from this release type: _resizeUnalignedShape */
     /**
@@ -4444,6 +4447,7 @@ export declare class Editor extends EventEmitter<TLEventMap> {
     /* Excluded from this release type: _restoreToolId */
     /* Excluded from this release type: _didPinch */
     /* Excluded from this release type: _selectedShapeIdsAtPointerDown */
+    /* Excluded from this release type: _didCaptureSelectionAtPointerDown */
     /* Excluded from this release type: _longPressTimeout */
     /* Excluded from this release type: capturedPointerId */
     /* Excluded from this release type: performanceTracker */
@@ -5007,6 +5011,8 @@ export declare class HistoryManager<R extends UnknownRecord> {
     private flushPendingDiff;
     getNumUndos(): number;
     getNumRedos(): number;
+    /* Excluded from this release type: _isReplaying */
+    /* Excluded from this release type: isReplaying */
     /* Excluded from this release type: _isInBatch */
     batch(fn: () => void, opts?: TLHistoryBatchOptions): this;
     _undo({ pushToRedoStack, toMark }: {
@@ -5037,6 +5043,8 @@ export declare const inlineBase64AssetStore: TLAssetStore;
 export declare class InputsManager {
     private readonly editor;
     constructor(editor: Editor);
+    /* Excluded from this release type: dispose */
+    private _onFrame;
     private _originPagePoint;
     /**
      * The most recent pointer down's position in the current page space.
@@ -5529,6 +5537,25 @@ export declare function maybeSnapToGrid(point: Vec, editor: Editor): Vec;
  */
 export declare function MenuClickCapture(): false | JSX.Element;
 
+/**
+ * Move an element into a new parent, preserving its state where the platform allows it.
+ *
+ * Uses `Node.moveBefore` (Chromium 133+, Firefox 144+) when both the element and parent are
+ * connected to the same document — this moves the element without resetting its state, so
+ * iframes don't reload and media keeps playing. Otherwise (older browsers, disconnected nodes,
+ * or a cross-document move) it falls back to `appendChild`, which moves the element but resets
+ * its state like an iframe reload.
+ *
+ * This is the primitive tldraw uses to adopt `ShapeUtil.getAppOwnedElement` elements, exposed so
+ * apps can perform symmetric state-preserving moves from `ShapeUtil.onReleaseAppOwnedElement` —
+ * for example moving an element to an off-canvas parking lot between editor sessions.
+ *
+ * @param parent - The element to move `element` into, as its last child.
+ * @param element - The element to move.
+ * @public
+ */
+export declare function moveElementInto(parent: HTMLElement, element: HTMLElement): void;
+
 /* Excluded from this release type: normalizeWheel */
 
 /**
@@ -6028,6 +6055,19 @@ export declare function resizeScaled(shape: TLBaseShape<any, {
     y: number;
 };
 
+/**
+ * The whole-pixel line-height for a given font size and tldraw's unitless line-height
+ * multiplier. tldraw's theme stores line-height as a multiplier (e.g. 1.35); resolving it
+ * to a whole pixel keeps line spacing identical across rendering engines, which otherwise
+ * disagree on fractional line boxes (WebKit snaps them to whole pixels, Blink keeps the
+ * fraction) and let multi-line text drift apart. Apply it everywhere line-height is used —
+ * measurement, on-canvas render, and export — so geometry and rendering agree.
+ * See https://github.com/tldraw/tldraw/issues/8970.
+ *
+ * @public
+ */
+export declare function resolveLineHeightPx(fontSize: number, lineHeight: number): number;
+
 /**
  * Resolve a partial set of user-provided themes into a complete `TLThemes`
  * record by merging with `DEFAULT_THEME`. The result is suitable for passing to
@@ -6265,32 +6305,6 @@ export declare function setRuntimeOverrides(input: Partial<typeof runtime>): voi
 /** @public */
 export declare function setUserPreferences(user: TLUserPreferences): void;
 
-/**
- * Overlay util for shape indicators — the selection / hover / hint outlines drawn
- * under the selection foreground. Paints local indicators in the theme's
- * selection color.
- *
- * Remote collaborator selection indicators are drawn by a separate overlay util
- * (e.g. `CollaboratorShapeIndicatorOverlayUtil` from `tldraw`) that runs at a
- * lower z-index so peer selections appear under the local indicators.
- *
- * Non-interactive: contributes no hit-test geometry.
- *
- * @public
- */
-export declare class ShapeIndicatorOverlayUtil extends OverlayUtil<TLShapeIndicatorOverlay> {
-    static type: string;
-    options: {
-        hintedLineWidth: number;
-        lineWidth: number;
-        zIndex: number;
-    };
-    private _instanceFlags$;
-    isActive(): boolean;
-    getOverlays(): TLShapeIndicatorOverlay[];
-    render(ctx: CanvasRenderingContext2D, overlays: TLShapeIndicatorOverlay[]): void;
-}
-
 /** @public */
 export declare abstract class ShapeUtil<Shape extends TLShape = TLShape> {
     editor: Editor;
@@ -6986,6 +7000,45 @@ export declare abstract class ShapeUtil<Shape extends TLShape = TLShape> {
      * @public
      */
     onEditEnd?(shape: Shape): void;
+    /**
+     * Provide an app-owned element to be rendered inside the shape, alongside the output of
+     * {@link ShapeUtil.component}. While the shape remains mounted, tldraw guarantees the
+     * element keeps the same DOM position: it is never unmounted, recreated, or relocated by
+     * reordering, reparenting, culling, or re-renders. When adopting the element, tldraw uses
+     * `Node.moveBefore` where available so stateful content like cross-origin iframes keeps
+     * its state across the move, falling back to `appendChild` elsewhere.
+     *
+     * Pair this with {@link ShapeUtil.onReleaseAppOwnedElement} to reclaim the element before
+     * the shape or editor unmounts.
+     *
+     * This is called once per shape mount, not on every prop change, so the adopted element is
+     * not refreshed when the shape's props change. If the element's content depends on props,
+     * return a stable element and mutate it in place (for example from {@link ShapeUtil.component}
+     * or an effect) rather than returning a different element.
+     *
+     * @param shape - The shape.
+     * @returns The element to adopt, or null to render nothing.
+     * @public
+     */
+    getAppOwnedElement?(shape: Shape): HTMLElement | null;
+    /**
+     * A callback called before the shape's app-owned element slot is destroyed: when the shape
+     * unmounts (for example when it is deleted or the current page changes) or when the whole
+     * editor unmounts, including error teardown. The slot is still connected to the document
+     * when this is called, so the app can move the element to another connected parent with
+     * `Node.moveBefore` to preserve its state. An element left in the slot is destroyed along
+     * with it.
+     *
+     * This is not only a "shape deleted" signal: it also fires on page changes, editor unmount,
+     * and (in dev under React StrictMode) on the throwaway mount/unmount cycle while the shape
+     * still exists. Make it safe to call when the shape is still present, and check the store
+     * (`this.editor.getShape(shape.id)`) if you need to distinguish deletion from a remount.
+     *
+     * @param shape - The shape.
+     * @param element - The element returned by {@link ShapeUtil.getAppOwnedElement}.
+     * @public
+     */
+    onReleaseAppOwnedElement?(shape: Shape, element: HTMLElement): void;
 }
 
 /**
@@ -7165,8 +7218,6 @@ export declare abstract class StateNode implements Partial<TLEventHandlers> {
     onLongPress?(info: TLPointerEventInfo): void;
     onPointerUp?(info: TLPointerEventInfo): void;
     onDoubleClick?(info: TLClickEventInfo): void;
-    onTripleClick?(info: TLClickEventInfo): void;
-    onQuadrupleClick?(info: TLClickEventInfo): void;
     onRightClick?(info: TLPointerEventInfo): void;
     onMiddleClick?(info: TLPointerEventInfo): void;
     onKeyDown?(info: TLKeyboardEventInfo): void;
@@ -7198,8 +7249,8 @@ export declare function stopEventPropagation(e: any): any;
  * arrows with labels or complex arrowheads) can't be batched — they still
  * stroke individually inside a save/restore with `ctx.clip` applied.
  *
- * Shared by {@link ShapeIndicatorOverlayUtil} and any overlay util that paints
- * shape indicators (e.g. collaborator selections).
+ * Shared by any overlay util that paints shape indicators (e.g. collaborator
+ * selections).
  *
  * @public
  */
@@ -7566,17 +7617,17 @@ export declare type TLClickEvent = (info: TLClickEventInfo) => void;
 export declare type TLClickEventInfo = TLBaseEventInfo & {
     button: number;
     name: TLCLickEventName;
-    phase: 'down' | 'settle' | 'up';
+    phase: 'down' | 'settle-down' | 'settle-up' | 'up';
     point: VecLike;
     pointerId: number;
     type: 'click';
 } & TLPointerEventTarget;
 
 /** @public */
-export declare type TLCLickEventName = 'double_click' | 'quadruple_click' | 'triple_click';
+export declare type TLCLickEventName = 'double_click';
 
 /** @public */
-export declare type TLClickState = 'idle' | 'overflow' | 'pendingDouble' | 'pendingOverflow' | 'pendingQuadruple' | 'pendingTriple';
+export declare type TLClickState = 'idle' | 'overflow' | 'pendingDouble' | 'pendingOverflow';
 
 /**
  * Raw clipboard paste payload, before tldraw parses clipboard contents into {@link TLExternalContent}.
@@ -8161,7 +8212,6 @@ export declare interface TLEditorComponents {
     InFrontOfTheCanvas?: ComponentType | null;
     LoadingScreen?: ComponentType | null;
     OnTheCanvas?: ComponentType | null;
-    SelectionBackground?: ComponentType<TLSelectionBackgroundProps> | null;
     ShapeWrapper?: ComponentType<TLShapeWrapperProps & RefAttributes<HTMLDivElement>> | null;
     Spinner?: ComponentType<React.SVGProps<SVGSVGElement>> | null;
     SvgDefs?: ComponentType | null;
@@ -8314,6 +8364,7 @@ export declare const tlenv: {
     isFirefox: boolean;
     isIos: boolean;
     isSafari: boolean;
+    isTouchDevice: boolean;
     isWebview: boolean;
 };
 
@@ -8356,8 +8407,6 @@ export declare interface TLEventHandlers {
     onLongPress: TLPointerEvent;
     onRightClick: TLPointerEvent;
     onDoubleClick: TLClickEvent;
-    onTripleClick: TLClickEvent;
-    onQuadrupleClick: TLClickEvent;
     onMiddleClick: TLPointerEvent;
     onPointerUp: TLPointerEvent;
     onKeyDown: TLKeyboardEvent;
@@ -9031,6 +9080,13 @@ export declare type TLPointerEvent = (info: TLPointerEventInfo) => void;
 
 /** @public */
 export declare type TLPointerEventInfo = TLBaseEventInfo & {
+    /**
+     * Whether this pen event appears to be direct manipulation on the display (e.g. Apple Pencil on
+     * an iPad or a Surface Pen on a touchscreen) rather than indirect input from a desktop graphics
+     * tablet (e.g. a Wacom Intuos). Only direct-display pens should auto-enable pen mode. Drawing and
+     * pressure behavior is driven by `isPen` and applies to all pens regardless of this flag.
+     */
+    isPenDirect?: boolean;
     button: number;
     isPen: boolean;
     name: TLPointerEventName;
@@ -9125,12 +9181,6 @@ export declare type TLResizeShapeOptions = Partial<{
 
 /* Excluded from this release type: TLRotationSnapshot */
 
-/** @public */
-export declare interface TLSelectionBackgroundProps {
-    bounds: Box;
-    rotation: number;
-}
-
 /** @public */
 export declare type TLSelectionHandle = RotateCorner | SelectionCorner | SelectionEdge;
 
@@ -9164,14 +9214,6 @@ export declare type TLShapeErrorFallbackComponent = ComponentType<{
     error: any;
 }>;
 
-/** @public */
-export declare interface TLShapeIndicatorOverlay extends TLOverlay {
-    props: {
-        hintingShapeIds: TLShapeId[];
-        idsToDisplay: TLShapeId[];
-    };
-}
-
 /**
  * Emitted when shapes are created, updated, or deleted.
  * @public
@@ -9653,13 +9695,13 @@ export declare function usePassThroughWheelEvents(ref: RefObject<HTMLElement | n
  * @returns The list of peer UserIDs
  * @public
  */
-export declare function usePeerIds(): string[];
+export declare function usePeerIds(): TLUserId[];
 
 /**
  * @returns The latest presence of the user matching userId
  * @public
  */
-export declare function usePresence(userId: string): null | TLInstancePresence;
+export declare function usePresence(userId: TLUserId): null | TLInstancePresence;
 
 /* Excluded from this release type: USER_COLORS */
 
@@ -9699,7 +9741,25 @@ export declare class UserPreferencesManager {
     getEdgeScrollSpeed(): number;
     getAnimationSpeed(): number;
     getAreKeyboardShortcutsEnabled(): boolean;
+    /**
+     * The current user's raw, app-provided id — the value set in the user's
+     * {@link @tldraw/editor#TLUserPreferences}. Use this when you need the id your application
+     * assigned to the user. To compare against or look up store records, use
+     * {@link UserPreferencesManager.getRecordId} instead.
+     */
+    getExternalId(): string;
+    /**
+     * @deprecated Use {@link UserPreferencesManager.getExternalId} for the raw app-provided id, or
+     * {@link UserPreferencesManager.getRecordId} for the prefixed `TLUserId` record id.
+     */
     getId(): string;
+    /**
+     * The current user's id as a tldraw {@link @tldraw/tlschema#TLUserId} record id (prefixed
+     * with `user:`). Use this when comparing against or looking up store records, such as a
+     * presence record's `userId` or `followingUserId`. For the raw, app-provided id, use
+     * {@link UserPreferencesManager.getExternalId}.
+     */
+    getRecordId(): TLUserId;
     getName(): string;
     getLocale(): string;
     getColor(): string;
@@ -9749,9 +9809,6 @@ export declare function useTLSchemaFromUtils(opts: TLStoreSchemaOptions): StoreS
 /** @public */
 export declare function useTLStore(opts: TLStoreOptions): TLStore;
 
-/** @public */
-export declare function useTransform(ref: React.RefObject<HTMLElement | null | SVGElement>, x?: number, y?: number, scale?: number, rotate?: number, additionalOffset?: VecLike): void;
-
 /**
  * React's useId hook returns a unique id for the component. However, it uses a colon in the id,
  * which is not valid for CSS selectors. This hook replaces the colon with an underscore.

package/dist-esm/index.mjs

@@ -13,9 +13,6 @@ import {
   DefaultErrorFallback
 } from "./lib/components/default-components/DefaultErrorFallback.mjs";
 import { DefaultGrid } from "./lib/components/default-components/DefaultGrid.mjs";
-import {
-  DefaultSelectionBackground
-} from "./lib/components/default-components/DefaultSelectionBackground.mjs";
 import {
   DefaultShapeWrapper
 } from "./lib/components/default-components/DefaultShapeWrapper.mjs";
@@ -82,7 +79,8 @@ import {
 } from "./lib/editor/managers/SnapManager/SnapManager.mjs";
 import { SpatialIndexManager } from "./lib/editor/managers/SpatialIndexManager/SpatialIndexManager.mjs";
 import {
-  TextManager
+  TextManager,
+  resolveLineHeightPx
 } from "./lib/editor/managers/TextManager/TextManager.mjs";
 import { DEFAULT_THEME } from "./lib/editor/managers/ThemeManager/defaultThemes.mjs";
 import { ThemeManager, resolveThemes } from "./lib/editor/managers/ThemeManager/ThemeManager.mjs";
@@ -104,10 +102,7 @@ import { OverlayManager } from "./lib/editor/overlays/OverlayManager.mjs";
 import {
   OverlayUtil
 } from "./lib/editor/overlays/OverlayUtil.mjs";
-import {
-  ShapeIndicatorOverlayUtil,
-  strokeShapeIndicators
-} from "./lib/editor/overlays/ShapeIndicatorOverlayUtil.mjs";
+import { strokeShapeIndicators } from "./lib/editor/overlays/strokeShapeIndicators.mjs";
 import {
   getPerfectDashProps
 } from "./lib/editor/shapes/shared/getPerfectDashProps.mjs";
@@ -115,6 +110,7 @@ import { resizeBox } from "./lib/editor/shapes/shared/resizeBox.mjs";
 import { resizeScaled } from "./lib/editor/shapes/shared/resizeScaled.mjs";
 import { BaseBoxShapeTool } from "./lib/editor/tools/BaseBoxShapeTool/BaseBoxShapeTool.mjs";
 import { maybeSnapToGrid } from "./lib/editor/tools/BaseBoxShapeTool/children/Pointing.mjs";
+import { cancelShapeCreationOnLongPress } from "./lib/editor/tools/cancelShapeCreationOnLongPress.mjs";
 import { StateNode } from "./lib/editor/tools/StateNode.mjs";
 import {
   EVENT_NAME_MAP
@@ -160,7 +156,6 @@ import {
   useUniqueSafeId
 } from "./lib/hooks/useSafeId.mjs";
 import { useTLSchemaFromUtils, useTLStore } from "./lib/hooks/useTLStore.mjs";
-import { useTransform } from "./lib/hooks/useTransform.mjs";
 import { useViewportHeight } from "./lib/hooks/useViewportHeight.mjs";
 import {
   LicenseManager
@@ -265,6 +260,7 @@ import {
   getGlobalDocument,
   getGlobalWindow,
   loopToHtmlElement,
+  moveElementInto,
   preventDefault,
   releasePointerCapture,
   setPointerCapture,
@@ -300,7 +296,7 @@ import { LocalIndexedDb, Table } from "./lib/utils/sync/LocalIndexedDb.mjs";
 import { uniq } from "./lib/utils/uniq.mjs";
 registerTldrawLibraryVersion(
   "@tldraw/editor",
-  "5.2.0-next.ee0fa4d6244f",
+  "5.2.0",
   "esm"
 );
 import { getColorValue } from "./lib/editor/managers/ThemeManager/defaultThemes.mjs";
@@ -326,7 +322,6 @@ export {
   DefaultCanvas,
   DefaultErrorFallback,
   DefaultGrid,
-  DefaultSelectionBackground,
   DefaultShapeWrapper,
   DefaultSpinner,
   DefaultSvgDefs,
@@ -374,7 +369,6 @@ export {
   SIN,
   SVGContainer,
   ScribbleManager,
-  ShapeIndicatorOverlayUtil,
   ShapeUtil,
   SharedStyleMap,
   SnapManager,
@@ -397,6 +391,7 @@ export {
   approximately,
   areAnglesCompatible,
   average,
+  cancelShapeCreationOnLongPress,
   canonicalizeRotation,
   centerOfCircleFromThreePoints,
   clamp,
@@ -465,6 +460,7 @@ export {
   loadSnapshot,
   loopToHtmlElement,
   maybeSnapToGrid,
+  moveElementInto,
   normalizeWheel,
   openWindow,
   parseDeepLinkString,
@@ -480,6 +476,7 @@ export {
   releasePointerCapture,
   resizeBox,
   resizeScaled,
+  resolveLineHeightPx,
   resolveThemes,
   rotateSelectionHandle,
   runtime,
@@ -526,7 +523,6 @@ export {
   useTLSchemaFromUtils,
   useTLStore,
   useTldrawCurrentUser,
-  useTransform,
   useUniqueSafeId,
   useViewportHeight,
   userTypeValidator