@tldraw/editor 5.2.1 → 5.3.0-canary.01c51090a365

package/dist-esm/lib/editor/tools/BaseBoxShapeTool/children/Pointing.mjs

@@ -1,7 +1,6 @@
 import { createShapeId } from "@tldraw/tlschema";
 import { structuredClone } from "@tldraw/utils";
 import { Vec } from "../../../../primitives/Vec.mjs";
-import { cancelShapeCreationOnLongPress } from "../../cancelShapeCreationOnLongPress.mjs";
 import { StateNode } from "../../StateNode.mjs";
 class Pointing extends StateNode {
   static id = "pointing";
@@ -52,7 +51,7 @@ class Pointing extends StateNode {
     this.complete();
   }
   onLongPress() {
-    cancelShapeCreationOnLongPress(this.editor, () => this.cancel());
+    if (this.editor.getInstanceState().isCoarsePointer) this.cancel();
   }
   onCancel() {
     this.cancel();

package/dist-esm/lib/editor/tools/BaseBoxShapeTool/children/Pointing.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/lib/editor/tools/BaseBoxShapeTool/children/Pointing.ts"],
-  "sourcesContent": ["import { TLShape, createShapeId } from '@tldraw/tlschema'\nimport { structuredClone } from '@tldraw/utils'\nimport { Vec } from '../../../../primitives/Vec'\nimport type { Editor } from '../../../Editor'\nimport { TLBaseBoxShape } from '../../../shapes/BaseBoxShapeUtil'\nimport { TLPointerEventInfo } from '../../../types/event-types'\nimport { cancelShapeCreationOnLongPress } from '../../cancelShapeCreationOnLongPress'\nimport { StateNode } from '../../StateNode'\nimport type { BaseBoxShapeTool } from '../BaseBoxShapeTool'\n\nexport class Pointing extends StateNode {\n\tstatic override id = 'pointing'\n\n\toverride onPointerMove(info: TLPointerEventInfo) {\n\t\tconst { editor } = this\n\t\tif (editor.inputs.getIsDragging()) {\n\t\t\tconst originPagePoint = editor.inputs.getOriginPagePoint()\n\n\t\t\tconst shapeType = (this.parent as BaseBoxShapeTool)!.shapeType\n\n\t\t\tconst id = createShapeId()\n\n\t\t\tconst creatingMarkId = editor.markHistoryStoppingPoint(`creating_box:${id}`)\n\t\t\tconst newPoint = maybeSnapToGrid(originPagePoint, editor)\n\n\t\t\t// Allow this to trigger the max shapes reached alert\n\t\t\tthis.editor.createShapes([\n\t\t\t\t{\n\t\t\t\t\tid,\n\t\t\t\t\ttype: shapeType,\n\t\t\t\t\tx: newPoint.x,\n\t\t\t\t\ty: newPoint.y,\n\t\t\t\t\tprops: {\n\t\t\t\t\t\tw: 1,\n\t\t\t\t\t\th: 1,\n\t\t\t\t\t},\n\t\t\t\t},\n\t\t\t])\n\t\t\tconst shape = editor.getShape(id)\n\t\t\tif (!shape) {\n\t\t\t\tthis.cancel()\n\t\t\t\treturn\n\t\t\t}\n\t\t\teditor.select(id)\n\n\t\t\tconst parent = this.parent as BaseBoxShapeTool\n\t\t\tthis.editor.setCurrentTool(\n\t\t\t\t'select.resizing',\n\t\t\t\t{\n\t\t\t\t\t...info,\n\t\t\t\t\ttarget: 'selection',\n\t\t\t\t\thandle: 'bottom_right',\n\t\t\t\t\tisCreating: true,\n\t\t\t\t\tcreatingMarkId,\n\t\t\t\t\tcreationCursorOffset: { x: 1, y: 1 },\n\t\t\t\t\tonInteractionEnd: this.parent.id,\n\t\t\t\t\tonCreate: parent.onCreate\n\t\t\t\t\t\t? (shape: TLShape | null) => parent.onCreate?.(shape)\n\t\t\t\t\t\t: undefined,\n\t\t\t\t} /** satisfies ResizingInfo, defined in main tldraw package \uD83D\uDE27 */\n\t\t\t)\n\t\t}\n\t}\n\n\toverride onPointerUp() {\n\t\tthis.complete()\n\t}\n\n\toverride onLongPress() {\n\t\tcancelShapeCreationOnLongPress(this.editor, () => this.cancel())\n\t}\n\n\toverride onCancel() {\n\t\tthis.cancel()\n\t}\n\n\toverride onComplete() {\n\t\tthis.complete()\n\t}\n\n\toverride onInterrupt() {\n\t\tthis.cancel()\n\t}\n\n\tcomplete() {\n\t\tconst originPagePoint = this.editor.inputs.getOriginPagePoint()\n\n\t\tconst shapeType = (this.parent as BaseBoxShapeTool)!.shapeType as TLBaseBoxShape['type']\n\n\t\tconst id = createShapeId()\n\n\t\tthis.editor.markHistoryStoppingPoint(`creating_box:${id}`)\n\n\t\t// Allow this to trigger the max shapes reached alert\n\t\t// todo: add scale here when dynamic size is enabled (is this still needed?)\n\t\tthis.editor.createShapes([\n\t\t\t{\n\t\t\t\tid,\n\t\t\t\ttype: shapeType,\n\t\t\t\tx: originPagePoint.x,\n\t\t\t\ty: originPagePoint.y,\n\t\t\t},\n\t\t])\n\n\t\tconst shape = this.editor.getShape<TLBaseBoxShape>(id)!\n\t\tif (!shape) {\n\t\t\tthis.cancel()\n\t\t\treturn\n\t\t}\n\n\t\tlet { w, h } = shape.props\n\t\tconst delta = new Vec(w / 2, h / 2)\n\t\tconst parentTransform = this.editor.getShapeParentTransform(shape)\n\t\tif (parentTransform) delta.rot(-parentTransform.rotation())\n\t\tconst scale = this.editor.getResizeScaleFactor()\n\n\t\t// A scale factor of 1 means dynamic sizing is not affecting this shape.\n\t\tif (scale !== 1) {\n\t\t\tw *= scale\n\t\t\th *= scale\n\t\t\tdelta.mul(scale)\n\t\t}\n\n\t\tconst next = structuredClone(shape)\n\t\tconst newPoint = maybeSnapToGrid(new Vec(shape.x - delta.x, shape.y - delta.y), this.editor)\n\t\tnext.x = newPoint.x\n\t\tnext.y = newPoint.y\n\t\tnext.props.w = w\n\t\tnext.props.h = h\n\n\t\tif ('scale' in shape.props) {\n\t\t\t;(next as TLBaseBoxShape & { props: { scale: number } }).props.scale = scale\n\t\t}\n\n\t\tthis.editor.updateShape(next)\n\n\t\tthis.editor.setSelectedShapes([id])\n\n\t\tif (this.editor.getInstanceState().isToolLocked) {\n\t\t\tthis.parent.transition('idle')\n\t\t} else {\n\t\t\tthis.editor.setCurrentTool('select.idle')\n\t\t}\n\t}\n\n\tcancel() {\n\t\tthis.parent.transition('idle')\n\t}\n}\n\n/**\n * Checks if grid mode is enabled and snaps a point to the grid if so\n *\n * @public\n */\nexport function maybeSnapToGrid(point: Vec, editor: Editor): Vec {\n\tconst isGridMode = editor.getInstanceState().isGridMode\n\tconst gridSize = editor.getDocumentSettings().gridSize\n\tif (isGridMode) return point.clone().snapToGrid(gridSize)\n\treturn point.clone()\n}\n"],
-  "mappings": "AAAA,SAAkB,qBAAqB;AACvC,SAAS,uBAAuB;AAChC,SAAS,WAAW;AAIpB,SAAS,sCAAsC;AAC/C,SAAS,iBAAiB;AAGnB,MAAM,iBAAiB,UAAU;AAAA,EACvC,OAAgB,KAAK;AAAA,EAEZ,cAAc,MAA0B;AAChD,UAAM,EAAE,OAAO,IAAI;AACnB,QAAI,OAAO,OAAO,cAAc,GAAG;AAClC,YAAM,kBAAkB,OAAO,OAAO,mBAAmB;AAEzD,YAAM,YAAa,KAAK,OAA6B;AAErD,YAAM,KAAK,cAAc;AAEzB,YAAM,iBAAiB,OAAO,yBAAyB,gBAAgB,EAAE,EAAE;AAC3E,YAAM,WAAW,gBAAgB,iBAAiB,MAAM;AAGxD,WAAK,OAAO,aAAa;AAAA,QACxB;AAAA,UACC;AAAA,UACA,MAAM;AAAA,UACN,GAAG,SAAS;AAAA,UACZ,GAAG,SAAS;AAAA,UACZ,OAAO;AAAA,YACN,GAAG;AAAA,YACH,GAAG;AAAA,UACJ;AAAA,QACD;AAAA,MACD,CAAC;AACD,YAAM,QAAQ,OAAO,SAAS,EAAE;AAChC,UAAI,CAAC,OAAO;AACX,aAAK,OAAO;AACZ;AAAA,MACD;AACA,aAAO,OAAO,EAAE;AAEhB,YAAM,SAAS,KAAK;AACpB,WAAK,OAAO;AAAA,QACX;AAAA,QACA;AAAA,UACC,GAAG;AAAA,UACH,QAAQ;AAAA,UACR,QAAQ;AAAA,UACR,YAAY;AAAA,UACZ;AAAA,UACA,sBAAsB,EAAE,GAAG,GAAG,GAAG,EAAE;AAAA,UACnC,kBAAkB,KAAK,OAAO;AAAA,UAC9B,UAAU,OAAO,WACd,CAACA,WAA0B,OAAO,WAAWA,MAAK,IAClD;AAAA,QACJ;AAAA;AAAA,MACD;AAAA,IACD;AAAA,EACD;AAAA,EAES,cAAc;AACtB,SAAK,SAAS;AAAA,EACf;AAAA,EAES,cAAc;AACtB,mCAA+B,KAAK,QAAQ,MAAM,KAAK,OAAO,CAAC;AAAA,EAChE;AAAA,EAES,WAAW;AACnB,SAAK,OAAO;AAAA,EACb;AAAA,EAES,aAAa;AACrB,SAAK,SAAS;AAAA,EACf;AAAA,EAES,cAAc;AACtB,SAAK,OAAO;AAAA,EACb;AAAA,EAEA,WAAW;AACV,UAAM,kBAAkB,KAAK,OAAO,OAAO,mBAAmB;AAE9D,UAAM,YAAa,KAAK,OAA6B;AAErD,UAAM,KAAK,cAAc;AAEzB,SAAK,OAAO,yBAAyB,gBAAgB,EAAE,EAAE;AAIzD,SAAK,OAAO,aAAa;AAAA,MACxB;AAAA,QACC;AAAA,QACA,MAAM;AAAA,QACN,GAAG,gBAAgB;AAAA,QACnB,GAAG,gBAAgB;AAAA,MACpB;AAAA,IACD,CAAC;AAED,UAAM,QAAQ,KAAK,OAAO,SAAyB,EAAE;AACrD,QAAI,CAAC,OAAO;AACX,WAAK,OAAO;AACZ;AAAA,IACD;AAEA,QAAI,EAAE,GAAG,EAAE,IAAI,MAAM;AACrB,UAAM,QAAQ,IAAI,IAAI,IAAI,GAAG,IAAI,CAAC;AAClC,UAAM,kBAAkB,KAAK,OAAO,wBAAwB,KAAK;AACjE,QAAI,gBAAiB,OAAM,IAAI,CAAC,gBAAgB,SAAS,CAAC;AAC1D,UAAM,QAAQ,KAAK,OAAO,qBAAqB;AAG/C,QAAI,UAAU,GAAG;AAChB,WAAK;AACL,WAAK;AACL,YAAM,IAAI,KAAK;AAAA,IAChB;AAEA,UAAM,OAAO,gBAAgB,KAAK;AAClC,UAAM,WAAW,gBAAgB,IAAI,IAAI,MAAM,IAAI,MAAM,GAAG,MAAM,IAAI,MAAM,CAAC,GAAG,KAAK,MAAM;AAC3F,SAAK,IAAI,SAAS;AAClB,SAAK,IAAI,SAAS;AAClB,SAAK,MAAM,IAAI;AACf,SAAK,MAAM,IAAI;AAEf,QAAI,WAAW,MAAM,OAAO;AAC3B;AAAC,MAAC,KAAuD,MAAM,QAAQ;AAAA,IACxE;AAEA,SAAK,OAAO,YAAY,IAAI;AAE5B,SAAK,OAAO,kBAAkB,CAAC,EAAE,CAAC;AAElC,QAAI,KAAK,OAAO,iBAAiB,EAAE,cAAc;AAChD,WAAK,OAAO,WAAW,MAAM;AAAA,IAC9B,OAAO;AACN,WAAK,OAAO,eAAe,aAAa;AAAA,IACzC;AAAA,EACD;AAAA,EAEA,SAAS;AACR,SAAK,OAAO,WAAW,MAAM;AAAA,EAC9B;AACD;AAOO,SAAS,gBAAgB,OAAY,QAAqB;AAChE,QAAM,aAAa,OAAO,iBAAiB,EAAE;AAC7C,QAAM,WAAW,OAAO,oBAAoB,EAAE;AAC9C,MAAI,WAAY,QAAO,MAAM,MAAM,EAAE,WAAW,QAAQ;AACxD,SAAO,MAAM,MAAM;AACpB;",
+  "sourcesContent": ["import { TLShape, createShapeId } from '@tldraw/tlschema'\nimport { structuredClone } from '@tldraw/utils'\nimport { Vec } from '../../../../primitives/Vec'\nimport type { Editor } from '../../../Editor'\nimport { TLBaseBoxShape } from '../../../shapes/BaseBoxShapeUtil'\nimport { TLPointerEventInfo } from '../../../types/event-types'\nimport { StateNode } from '../../StateNode'\nimport type { BaseBoxShapeTool } from '../BaseBoxShapeTool'\n\nexport class Pointing extends StateNode {\n\tstatic override id = 'pointing'\n\n\toverride onPointerMove(info: TLPointerEventInfo) {\n\t\tconst { editor } = this\n\t\tif (editor.inputs.getIsDragging()) {\n\t\t\tconst originPagePoint = editor.inputs.getOriginPagePoint()\n\n\t\t\tconst shapeType = (this.parent as BaseBoxShapeTool)!.shapeType\n\n\t\t\tconst id = createShapeId()\n\n\t\t\tconst creatingMarkId = editor.markHistoryStoppingPoint(`creating_box:${id}`)\n\t\t\tconst newPoint = maybeSnapToGrid(originPagePoint, editor)\n\n\t\t\t// Allow this to trigger the max shapes reached alert\n\t\t\tthis.editor.createShapes([\n\t\t\t\t{\n\t\t\t\t\tid,\n\t\t\t\t\ttype: shapeType,\n\t\t\t\t\tx: newPoint.x,\n\t\t\t\t\ty: newPoint.y,\n\t\t\t\t\tprops: {\n\t\t\t\t\t\tw: 1,\n\t\t\t\t\t\th: 1,\n\t\t\t\t\t},\n\t\t\t\t},\n\t\t\t])\n\t\t\tconst shape = editor.getShape(id)\n\t\t\tif (!shape) {\n\t\t\t\tthis.cancel()\n\t\t\t\treturn\n\t\t\t}\n\t\t\teditor.select(id)\n\n\t\t\tconst parent = this.parent as BaseBoxShapeTool\n\t\t\tthis.editor.setCurrentTool(\n\t\t\t\t'select.resizing',\n\t\t\t\t{\n\t\t\t\t\t...info,\n\t\t\t\t\ttarget: 'selection',\n\t\t\t\t\thandle: 'bottom_right',\n\t\t\t\t\tisCreating: true,\n\t\t\t\t\tcreatingMarkId,\n\t\t\t\t\tcreationCursorOffset: { x: 1, y: 1 },\n\t\t\t\t\tonInteractionEnd: this.parent.id,\n\t\t\t\t\tonCreate: parent.onCreate\n\t\t\t\t\t\t? (shape: TLShape | null) => parent.onCreate?.(shape)\n\t\t\t\t\t\t: undefined,\n\t\t\t\t} /** satisfies ResizingInfo, defined in main tldraw package \uD83D\uDE27 */\n\t\t\t)\n\t\t}\n\t}\n\n\toverride onPointerUp() {\n\t\tthis.complete()\n\t}\n\n\toverride onLongPress() {\n\t\t// On a touch (coarse pointer) long-press, cancel the pending shape so it leaves nothing behind.\n\t\tif (this.editor.getInstanceState().isCoarsePointer) this.cancel()\n\t}\n\n\toverride onCancel() {\n\t\tthis.cancel()\n\t}\n\n\toverride onComplete() {\n\t\tthis.complete()\n\t}\n\n\toverride onInterrupt() {\n\t\tthis.cancel()\n\t}\n\n\tcomplete() {\n\t\tconst originPagePoint = this.editor.inputs.getOriginPagePoint()\n\n\t\tconst shapeType = (this.parent as BaseBoxShapeTool)!.shapeType as TLBaseBoxShape['type']\n\n\t\tconst id = createShapeId()\n\n\t\tthis.editor.markHistoryStoppingPoint(`creating_box:${id}`)\n\n\t\t// Allow this to trigger the max shapes reached alert\n\t\t// todo: add scale here when dynamic size is enabled (is this still needed?)\n\t\tthis.editor.createShapes([\n\t\t\t{\n\t\t\t\tid,\n\t\t\t\ttype: shapeType,\n\t\t\t\tx: originPagePoint.x,\n\t\t\t\ty: originPagePoint.y,\n\t\t\t},\n\t\t])\n\n\t\tconst shape = this.editor.getShape<TLBaseBoxShape>(id)!\n\t\tif (!shape) {\n\t\t\tthis.cancel()\n\t\t\treturn\n\t\t}\n\n\t\tlet { w, h } = shape.props\n\t\tconst delta = new Vec(w / 2, h / 2)\n\t\tconst parentTransform = this.editor.getShapeParentTransform(shape)\n\t\tif (parentTransform) delta.rot(-parentTransform.rotation())\n\t\tconst scale = this.editor.getResizeScaleFactor()\n\n\t\t// A scale factor of 1 means dynamic sizing is not affecting this shape.\n\t\tif (scale !== 1) {\n\t\t\tw *= scale\n\t\t\th *= scale\n\t\t\tdelta.mul(scale)\n\t\t}\n\n\t\tconst next = structuredClone(shape)\n\t\tconst newPoint = maybeSnapToGrid(new Vec(shape.x - delta.x, shape.y - delta.y), this.editor)\n\t\tnext.x = newPoint.x\n\t\tnext.y = newPoint.y\n\t\tnext.props.w = w\n\t\tnext.props.h = h\n\n\t\tif ('scale' in shape.props) {\n\t\t\t;(next as TLBaseBoxShape & { props: { scale: number } }).props.scale = scale\n\t\t}\n\n\t\tthis.editor.updateShape(next)\n\n\t\tthis.editor.setSelectedShapes([id])\n\n\t\tif (this.editor.getInstanceState().isToolLocked) {\n\t\t\tthis.parent.transition('idle')\n\t\t} else {\n\t\t\tthis.editor.setCurrentTool('select.idle')\n\t\t}\n\t}\n\n\tcancel() {\n\t\tthis.parent.transition('idle')\n\t}\n}\n\n/**\n * Checks if grid mode is enabled and snaps a point to the grid if so\n *\n * @public\n */\nexport function maybeSnapToGrid(point: Vec, editor: Editor): Vec {\n\tconst isGridMode = editor.getInstanceState().isGridMode\n\tconst gridSize = editor.getDocumentSettings().gridSize\n\tif (isGridMode) return point.clone().snapToGrid(gridSize)\n\treturn point.clone()\n}\n"],
+  "mappings": "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",
   "names": ["shape"]
 }

package/dist-esm/version.mjs

@@ -1,8 +1,8 @@
-const version = "5.2.1";
+const version = "5.3.0-canary.01c51090a365";
 const publishDates = {
   major: "2026-05-06T16:28:18.473Z",
-  minor: "2026-07-01T09:20:01.735Z",
-  patch: "2026-07-01T10:28:54.350Z"
+  minor: "2026-07-05T10:25:13.929Z",
+  patch: "2026-07-05T10:25:13.929Z"
 };
 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.2.1'\nexport const publishDates = {\n\tmajor: '2026-05-06T16:28:18.473Z',\n\tminor: '2026-07-01T09:20:01.735Z',\n\tpatch: '2026-07-01T10:28:54.350Z',\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.3.0-canary.01c51090a365'\nexport const publishDates = {\n\tmajor: '2026-05-06T16:28:18.473Z',\n\tminor: '2026-07-05T10:25:13.929Z',\n\tpatch: '2026-07-05T10:25:13.929Z',\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.2.1",
+  "version": "5.3.0-canary.01c51090a365",
   "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.2.1",
-    "@tldraw/state-react": "5.2.1",
-    "@tldraw/store": "5.2.1",
-    "@tldraw/tlschema": "5.2.1",
-    "@tldraw/utils": "5.2.1",
-    "@tldraw/validate": "5.2.1",
+    "@tldraw/state": "5.3.0-canary.01c51090a365",
+    "@tldraw/state-react": "5.3.0-canary.01c51090a365",
+    "@tldraw/store": "5.3.0-canary.01c51090a365",
+    "@tldraw/tlschema": "5.3.0-canary.01c51090a365",
+    "@tldraw/utils": "5.3.0-canary.01c51090a365",
+    "@tldraw/validate": "5.3.0-canary.01c51090a365",
     "classnames": "^2.5.1",
     "eventemitter3": "^4.0.7",
     "idb": "^7.1.1",

package/src/index.ts

@@ -102,6 +102,7 @@ export { ClickManager, type TLClickState } from './lib/editor/managers/ClickMana
 export { EdgeScrollManager } from './lib/editor/managers/EdgeScrollManager/EdgeScrollManager'
 export { FontManager } from './lib/editor/managers/FontManager/FontManager'
 export { HistoryManager } from './lib/editor/managers/HistoryManager/HistoryManager'
+export { EditorManager } from './lib/editor/managers/EditorManager'
 export { InputsManager } from './lib/editor/managers/InputsManager/InputsManager'
 export {
 	ScribbleManager,
@@ -191,7 +192,6 @@ export { resizeBox, type ResizeBoxOptions } from './lib/editor/shapes/shared/res
 export { resizeScaled } from './lib/editor/shapes/shared/resizeScaled'
 export { BaseBoxShapeTool } from './lib/editor/tools/BaseBoxShapeTool/BaseBoxShapeTool'
 export { maybeSnapToGrid } from './lib/editor/tools/BaseBoxShapeTool/children/Pointing'
-export { cancelShapeCreationOnLongPress } from './lib/editor/tools/cancelShapeCreationOnLongPress'
 export { StateNode, type TLStateNodeConstructor } from './lib/editor/tools/StateNode'
 export { type TLContent } from './lib/editor/types/clipboard-types'
 export { type TLEventMap, type TLEventMapHandler } from './lib/editor/types/emit-types'

package/src/lib/editor/Editor.ts

@@ -563,16 +563,34 @@ export class Editor extends EventEmitter<TLEventMap> {
 		let deletedBindings = new Map<TLBindingId, BindingOnDeleteOptions<any>>()
 		const deletedShapeIds = new Set<TLShapeId>()
 		const invalidParents = new Set<TLShapeId>()
+		const createdShapes = new Set<TLShapeId>()
 		let invalidBindingTypes = new Set<TLBinding['type']>()
 
 		this.disposables.add(
 			this.sideEffects.registerOperationCompleteHandler(() => {
 				// this needs to be cleared here because further effects may delete more shapes
 				// and we want the next invocation of this handler to handle those separately
+				const deletedIds = deletedShapeIds.size ? new Set(deletedShapeIds) : null
 				deletedShapeIds.clear()
 
+				if (deletedIds) {
+					const updates = compact(
+						this.getPageStates().map((pageState) => {
+							return cleanupInstancePageState(pageState, deletedIds)
+						})
+					)
+
+					if (updates.length) {
+						this.store.put(updates)
+					}
+				}
+
+				const justCreatedShapeIds = new Set(createdShapes)
+				createdShapes.clear()
+
 				for (const parentId of invalidParents) {
 					invalidParents.delete(parentId)
+					if (justCreatedShapeIds.has(parentId)) continue
 					const parent = this.getShape(parentId)
 					if (!parent) continue
 
@@ -608,6 +626,12 @@ export class Editor extends EventEmitter<TLEventMap> {
 		this.disposables.add(
 			this.sideEffects.register({
 				shape: {
+					afterCreate: (shape) => {
+						createdShapes.add(shape.id)
+						if (shape.parentId && isShapeId(shape.parentId)) {
+							invalidParents.add(shape.parentId)
+						}
+					},
 					afterChange: (shapeBefore, shapeAfter) => {
 						for (const binding of this.getBindingsInvolvingShape(shapeAfter)) {
 							invalidBindingTypes.add(binding.type)
@@ -712,17 +736,6 @@ export class Editor extends EventEmitter<TLEventMap> {
 						if (deleteBindingIds.length) {
 							this.deleteBindings(deleteBindingIds)
 						}
-
-						const deletedIds = new Set([shape.id])
-						const updates = compact(
-							this.getPageStates().map((pageState) => {
-								return cleanupInstancePageState(pageState, deletedIds)
-							})
-						)
-
-						if (updates.length) {
-							this.store.put(updates)
-						}
 					},
 				},
 				binding: {
@@ -809,6 +822,10 @@ export class Editor extends EventEmitter<TLEventMap> {
 				},
 				instance_page_state: {
 					afterChange: (prev, next) => {
+						if (prev?.focusedGroupId !== next?.focusedGroupId) {
+							this.cancelDoubleClick()
+						}
+
 						if (prev?.selectedShapeIds !== next?.selectedShapeIds) {
 							// ensure that descendants and ancestors are not selected at the same time
 							const filtered = next.selectedShapeIds.filter((id) => {
@@ -891,7 +908,7 @@ export class Editor extends EventEmitter<TLEventMap> {
 
 		this.edgeScrollManager = new EdgeScrollManager(this)
 		this.focusManager = new FocusManager(this, autoFocus)
-		this.disposables.add(this.focusManager.dispose.bind(this.focusManager))
+		this.disposables.add(() => this.focusManager.dispose())
 
 		if (this.getInstanceState().followingUserId) {
 			this.stopFollowingUser()
@@ -899,6 +916,10 @@ export class Editor extends EventEmitter<TLEventMap> {
 
 		this.on('tick', this._flushEventsForTick)
 
+		this.once('mount', () => {
+			this.isMounted = true
+		})
+
 		this.timers.requestAnimationFrame(() => {
 			this._tickManager.start()
 		})
@@ -1011,6 +1032,13 @@ export class Editor extends EventEmitter<TLEventMap> {
 	 */
 	isDisposed = false
 
+	/**
+	 * Whether the editor is mounted.
+	 *
+	 * @public
+	 */
+	isMounted = false
+
 	/**
 	 * A manager for the editor's tick events.
 	 *
@@ -5794,10 +5822,25 @@ export class Editor extends EventEmitter<TLEventMap> {
 	 */
 	getSelectedShapeAtPoint(point: VecLike): TLShape | undefined {
 		const selectedShapeIds = this.getSelectedShapeIds()
-		return this.getCurrentPageShapesSorted()
-			.filter((shape) => shape.type !== 'group' && selectedShapeIds.includes(shape.id))
-			.reverse() // find last
-			.find((shape) => this.isPointInShape(shape, point, { hitInside: true, margin: 0 }))
+		const margin = this.options.hitTestMargin / this.getZoomLevel()
+		const sortedShapes = this.getCurrentPageShapesSorted()
+
+		for (let i = sortedShapes.length - 1; i >= 0; i--) {
+			const shape = sortedShapes[i]
+			if (shape.type === 'group') continue
+			if (!selectedShapeIds.includes(shape.id)) continue
+			if (
+				this.getShapeGeometry(shape).hitTestPoint(
+					this.getPointInShapeSpace(shape, point),
+					margin,
+					true
+				)
+			) {
+				return shape
+			}
+		}
+
+		return undefined
 	}
 
 	/**
@@ -10983,7 +11026,9 @@ export class Editor extends EventEmitter<TLEventMap> {
 			this._ctrlKeyTimeout = this.timers.setTimeout(this._setCtrlKeyTimeout, 150)
 		}
 
-		if (info.metaKey) {
+		if (info.metaKey && info.name !== 'key_up') {
+			// Unlike the other modifiers, the native metaKey property is still true on keyup.
+			// If we don't have this guard, then the metakey will be left true without the timeout.
 			clearTimeout(this._metaKeyTimeout)
 			this._metaKeyTimeout = -1
 			inputs.setMetaKey(true)

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

@@ -0,0 +1,51 @@
+import { vi } from 'vitest'
+import type { Editor } from '../Editor'
+import { EditorManager } from './EditorManager'
+
+class TestManager extends EditorManager {
+	onTestEvent = vi.fn()
+
+	constructor(editor: Editor) {
+		super(editor)
+		this.addEditorEvent('frame', this.onTestEvent)
+	}
+
+	cancelRaf = vi.fn()
+	startRaf() {
+		this.register(this.cancelRaf)
+	}
+}
+
+describe('EditorManager', () => {
+	let on: ReturnType<typeof vi.fn>
+	let off: ReturnType<typeof vi.fn>
+	let editor: Editor
+	let manager: TestManager
+
+	beforeEach(() => {
+		on = vi.fn()
+		off = vi.fn()
+		editor = { on, off } as unknown as Editor
+		manager = new TestManager(editor)
+	})
+
+	it('addEditorEvent registers a listener on the editor', () => {
+		expect(on).toHaveBeenCalledWith('frame', manager.onTestEvent)
+	})
+
+	it('dispose removes registered editor listeners', () => {
+		manager.dispose()
+		expect(off).toHaveBeenCalledWith('frame', manager.onTestEvent)
+	})
+
+	it('register runs custom disposables on dispose', () => {
+		manager.startRaf()
+		manager.dispose()
+		expect(manager.cancelRaf).toHaveBeenCalled()
+	})
+
+	it('dispose is safe to call twice', () => {
+		manager.dispose()
+		expect(() => manager.dispose()).not.toThrow()
+	})
+})

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

@@ -0,0 +1,60 @@
+import type { Editor } from '../Editor'
+import type { TLEventMap } from '../types/emit-types'
+
+/**
+ * Base class for editor-attached managers that need to clean up after themselves.
+ *
+ * Extending `EditorManager` gives a manager one consistent teardown contract: register
+ * anything that needs undoing, and it runs automatically on `dispose()`. This keeps
+ * subscription lifecycle symmetric — whatever sets a thing up is what tears it down — so
+ * it can't be forgotten (the failure mode behind the strict-mode camera bug, #8892).
+ *
+ * Register cleanup by what you're creating:
+ *
+ * - Editor bus event (`tick`, `frame`, `change`, …): {@link EditorManager.addEditorEvent}
+ * - Store side effect (`editor.sideEffects.register…`): `this.register(disposer)`
+ * - Reaction (`react(...)` from `@tldraw/state`): `this.register(react(...))`
+ * - DOM listener: `this.register(() => el.removeEventListener(...))`
+ * - Other resource (cache, index, child manager): `this.register(() => x.dispose())`
+ *
+ * For timeouts, intervals, and animation frames prefer `editor.timers` (context-grouped
+ * and auto-disposed) over raw `setTimeout`. For cleanup on the editor itself rather than a
+ * manager, use `editor.disposables`.
+ *
+ * If a manager needs ordered teardown (e.g. pause a loop before cancelling it), override
+ * `dispose()` and call `super.dispose()` last — see `TickManager`.
+ *
+ * @public
+ */
+export abstract class EditorManager {
+	protected readonly disposables = new Set<() => void>()
+
+	constructor(protected readonly editor: Editor) {}
+
+	/**
+	 * Register a teardown function to run on `dispose()`. The universal way for a manager to
+	 * make a resource "see itself out". Returns the same function for convenience.
+	 */
+	protected register(dispose: () => void): () => void {
+		this.disposables.add(dispose)
+		return dispose
+	}
+
+	/**
+	 * Subscribe to an editor bus event and register the matching unsubscribe, so the listener
+	 * is removed automatically on `dispose()`.
+	 */
+	protected addEditorEvent<E extends keyof TLEventMap>(
+		event: E,
+		fn: (...args: TLEventMap[E]) => void
+	): void {
+		this.editor.on(event, fn as any)
+		this.register(() => this.editor.off(event, fn as any))
+	}
+
+	/** @internal */
+	dispose(): void {
+		this.disposables.forEach((d) => d())
+		this.disposables.clear()
+	}
+}

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

@@ -73,7 +73,8 @@ describe('FocusManager', () => {
 	describe('constructor', () => {
 		it('should initialize with editor reference', () => {
 			focusManager = new FocusManager(editor)
-			expect(focusManager.editor).toBe(editor)
+			expect(focusManager).toBeInstanceOf(FocusManager)
+			expect(editor.sideEffects.registerAfterChangeHandler).toHaveBeenCalled()
 		})
 
 		it('should register side effect listener for instance state changes', () => {

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

@@ -1,5 +1,6 @@
 import { bind } from '@tldraw/utils'
 import type { Editor } from '../../Editor'
+import { EditorManager } from '../EditorManager'
 
 /**
  * A manager for ensuring correct focus across the editor.
@@ -10,14 +11,11 @@ import type { Editor } from '../../Editor'
  *
  * @internal
  */
-export class FocusManager {
-	private disposeSideEffectListener?: () => void
+export class FocusManager extends EditorManager {
+	constructor(editor: Editor, autoFocus?: boolean) {
+		super(editor)
 
-	constructor(
-		public editor: Editor,
-		autoFocus?: boolean
-	) {
-		this.disposeSideEffectListener = editor.sideEffects.registerAfterChangeHandler(
+		const disposeSideEffectListener = editor.sideEffects.registerAfterChangeHandler(
 			'instance',
 			(prev, next) => {
 				if (prev.isFocused !== next.isFocused) {
@@ -25,6 +23,7 @@ export class FocusManager {
 				}
 			}
 		)
+		this.register(() => disposeSideEffectListener?.())
 
 		const currentFocusState = editor.getInstanceState().isFocused
 		if (autoFocus !== currentFocusState) {
@@ -35,6 +34,10 @@ export class FocusManager {
 		const body = editor.getContainerDocument().body
 		body.addEventListener('keydown', this.handleKeyDown)
 		body.addEventListener('mousedown', this.handleMouseDown)
+		this.register(() => {
+			body.removeEventListener('keydown', this.handleKeyDown)
+			body.removeEventListener('mousedown', this.handleMouseDown)
+		})
 	}
 
 	/**
@@ -83,11 +86,4 @@ export class FocusManager {
 		this.editor.complete() // stop any interaction
 		if (blurContainer) this.editor.getContainer().blur() // blur the container
 	}
-
-	dispose() {
-		const body = this.editor.getContainerDocument().body
-		body.removeEventListener('keydown', this.handleKeyDown)
-		body.removeEventListener('mousedown', this.handleMouseDown)
-		this.disposeSideEffectListener?.()
-	}
 }

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

@@ -7,19 +7,16 @@ import { Vec } from '../../../primitives/Vec'
 import { isAccelKey } from '../../../utils/keyboard'
 import type { Editor } from '../../Editor'
 import { TLPinchEventInfo, TLPointerEventInfo, TLWheelEventInfo } from '../../types/event-types'
+import { EditorManager } from '../EditorManager'
 
 const POINTER_VELOCITY_REFERENCE_INTERVAL_MS = 16
 const POINTER_VELOCITY_REFERENCE_SMOOTHING = 0.5
 
 /** @public */
-export class InputsManager {
-	constructor(private readonly editor: Editor) {
-		this.editor.on('frame', this._onFrame)
-	}
-
-	/** @internal */
-	dispose() {
-		this.editor.off('frame', this._onFrame)
+export class InputsManager extends EditorManager {
+	constructor(editor: Editor) {
+		super(editor)
+		this.addEditorEvent('frame', this._onFrame)
 	}
 
 	@bind
@@ -472,7 +469,7 @@ export class InputsManager {
 	private _velocityPrevPoint = new Vec()
 
 	/**
-	 * Update the pointer velocity based on elapsed time. Called each frame.
+	 * Update the pointer velocity based on elapsed time. Called by the tick manager.
 	 * @param elapsed - The time elapsed since the last tick in milliseconds.
 	 * @internal
 	 */

package/src/lib/editor/managers/SpatialIndexManager/RBushIndex.ts

@@ -46,28 +46,6 @@ export class RBushIndex {
 		return new Set(results.map((e: SpatialElement) => e.id))
 	}
 
-	/**
-	 * Insert or update a shape in the spatial index.
-	 * If the shape already exists, it will be removed first to prevent duplicates.
-	 */
-	upsert(id: TLShapeId, bounds: Box): void {
-		// Remove existing entry to prevent map-tree desync
-		const existing = this.elementsInTree.get(id)
-		if (existing) {
-			this.rBush.remove(existing)
-		}
-
-		const element: SpatialElement = {
-			minX: bounds.minX,
-			minY: bounds.minY,
-			maxX: bounds.maxX,
-			maxY: bounds.maxY,
-			id,
-		}
-		this.rBush.insert(element)
-		this.elementsInTree.set(id, element)
-	}
-
 	/**
 	 * Remove a shape from the spatial index.
 	 */
@@ -79,6 +57,25 @@ export class RBushIndex {
 		}
 	}
 
+	/**
+	 * Apply the removals and upserts collected during one incremental update.
+	 * Mutations are applied per item: bulk-rebuilding the whole tree instead
+	 * was measured slower even with ~10% of the index in the batch.
+	 */
+	applyBatch(removes: Set<TLShapeId>, upserts: SpatialElement[]): void {
+		for (const id of removes) {
+			this.remove(id)
+		}
+		for (const element of upserts) {
+			const existing = this.elementsInTree.get(element.id)
+			if (existing) {
+				this.rBush.remove(existing)
+			}
+			this.rBush.insert(element)
+			this.elementsInTree.set(element.id, element)
+		}
+	}
+
 	/**
 	 * Bulk load elements into the spatial index.
 	 * More efficient than individual inserts for initial loading.
@@ -122,17 +119,6 @@ export class RBushIndex {
 		return this.elementsInTree.get(id)
 	}
 
-	/**
-	 * Iterate the entries currently in the index. Callers may upsert existing
-	 * keys or remove keys during iteration; current callers do not insert new
-	 * keys.
-	 *
-	 * @internal
-	 */
-	entries(): IterableIterator<[TLShapeId, SpatialElement]> {
-		return this.elementsInTree.entries()
-	}
-
 	/**
 	 * Dispose of the spatial index.
 	 * Clears all data structures to prevent memory leaks.