@tldraw/editor 4.3.0-canary.c5efe11c58e0 → 4.3.0-canary.cb6779b4f066

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

@@ -16,7 +16,7 @@ function getRotationSnapshot({
   const initialPageCenter = rotatedPageBounds.center.clone().rotWith(rotatedPageBounds.point, rotation);
   return {
     initialPageCenter,
-    initialCursorAngle: initialPageCenter.angle(editor.inputs.originPagePoint),
+    initialCursorAngle: initialPageCenter.angle(editor.inputs.getOriginPagePoint()),
     initialShapesRotation: rotation,
     shapeSnapshots: shapes.map((shape) => ({
       shape,

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/lib/utils/rotation.ts"],
-  "sourcesContent": ["import { isShapeId, TLShape, TLShapeId, TLShapePartial } from '@tldraw/tlschema'\nimport { compact } from '@tldraw/utils'\nimport { Editor } from '../editor/Editor'\nimport { Mat } from '../primitives/Mat'\nimport { canonicalizeRotation } from '../primitives/utils'\nimport { Vec, VecLike } from '../primitives/Vec'\n\n/** @internal */\nexport function getRotationSnapshot({\n\teditor,\n\tids,\n}: {\n\teditor: Editor\n\tids: TLShapeId[]\n}): TLRotationSnapshot | null {\n\tconst shapes = compact(ids.map((id) => editor.getShape(id)))\n\tconst rotation = editor.getShapesSharedRotation(ids)\n\tconst rotatedPageBounds = editor.getShapesRotatedPageBounds(ids)\n\n\t// todo: this assumes we're rotating the selected shapes\n\t// if we try to rotate shapes that aren't selected, this\n\t// will produce the wrong results\n\n\t// Return null if there are no selected shapes\n\tif (!rotatedPageBounds) {\n\t\treturn null\n\t}\n\n\tconst initialPageCenter = rotatedPageBounds.center\n\t\t.clone()\n\t\t.rotWith(rotatedPageBounds.point, rotation)\n\n\treturn {\n\t\tinitialPageCenter,\n\t\tinitialCursorAngle: initialPageCenter.angle(editor.inputs.originPagePoint),\n\t\tinitialShapesRotation: rotation,\n\t\tshapeSnapshots: shapes.map((shape) => ({\n\t\t\tshape,\n\t\t\tinitialPagePoint: editor.getShapePageTransform(shape.id)!.point(),\n\t\t})),\n\t}\n}\n\n/**\n * @internal\n **/\nexport interface TLRotationSnapshot {\n\tinitialPageCenter: Vec\n\tinitialCursorAngle: number\n\tinitialShapesRotation: number\n\tshapeSnapshots: {\n\t\tshape: TLShape\n\t\tinitialPagePoint: Vec\n\t}[]\n}\n\n/** @internal */\nexport function applyRotationToSnapshotShapes({\n\tdelta,\n\teditor,\n\tsnapshot,\n\tstage,\n\tcenterOverride,\n}: {\n\tdelta: number\n\tsnapshot: TLRotationSnapshot\n\teditor: Editor\n\tstage: 'start' | 'update' | 'end' | 'one-off'\n\tcenterOverride?: VecLike\n}) {\n\tconst { initialPageCenter, shapeSnapshots } = snapshot\n\n\teditor.updateShapes(\n\t\tshapeSnapshots.map(({ shape, initialPagePoint }) => {\n\t\t\t// We need to both rotate each shape individually and rotate the shapes\n\t\t\t// around the pivot point (the average center of all rotating shapes.)\n\n\t\t\tconst parentTransform = isShapeId(shape.parentId)\n\t\t\t\t? editor.getShapePageTransform(shape.parentId)!\n\t\t\t\t: Mat.Identity()\n\n\t\t\tconst newPagePoint = Vec.RotWith(initialPagePoint, centerOverride ?? initialPageCenter, delta)\n\n\t\t\tconst newLocalPoint = Mat.applyToPoint(\n\t\t\t\t// use the current parent transform in case it has moved/resized since the start\n\t\t\t\t// (e.g. if rotating a shape at the edge of a group)\n\t\t\t\tMat.Inverse(parentTransform),\n\t\t\t\tnewPagePoint\n\t\t\t)\n\t\t\tconst newRotation = canonicalizeRotation(shape.rotation + delta)\n\n\t\t\treturn {\n\t\t\t\tid: shape.id,\n\t\t\t\ttype: shape.type,\n\t\t\t\tx: newLocalPoint.x,\n\t\t\t\ty: newLocalPoint.y,\n\t\t\t\trotation: newRotation,\n\t\t\t}\n\t\t})\n\t)\n\n\t// Handle change\n\n\tconst changes: TLShapePartial[] = []\n\n\tshapeSnapshots.forEach(({ shape }) => {\n\t\tconst current = editor.getShape(shape.id)\n\t\tif (!current) return\n\t\tconst util = editor.getShapeUtil(shape)\n\n\t\tif (stage === 'start' || stage === 'one-off') {\n\t\t\tconst changeStart = util.onRotateStart?.(shape)\n\t\t\tif (changeStart) changes.push(changeStart)\n\t\t}\n\n\t\tconst changeUpdate = util.onRotate?.(shape, current)\n\t\tif (changeUpdate) changes.push(changeUpdate)\n\n\t\tif (stage === 'end' || stage === 'one-off') {\n\t\t\tconst changeEnd = util.onRotateEnd?.(shape, current)\n\t\t\tif (changeEnd) changes.push(changeEnd)\n\t\t}\n\t})\n\n\tif (changes.length > 0) {\n\t\teditor.updateShapes(changes)\n\t}\n}\n"],
-  "mappings": "AAAA,SAAS,iBAAqD;AAC9D,SAAS,eAAe;AAExB,SAAS,WAAW;AACpB,SAAS,4BAA4B;AACrC,SAAS,WAAoB;AAGtB,SAAS,oBAAoB;AAAA,EACnC;AAAA,EACA;AACD,GAG8B;AAC7B,QAAM,SAAS,QAAQ,IAAI,IAAI,CAAC,OAAO,OAAO,SAAS,EAAE,CAAC,CAAC;AAC3D,QAAM,WAAW,OAAO,wBAAwB,GAAG;AACnD,QAAM,oBAAoB,OAAO,2BAA2B,GAAG;AAO/D,MAAI,CAAC,mBAAmB;AACvB,WAAO;AAAA,EACR;AAEA,QAAM,oBAAoB,kBAAkB,OAC1C,MAAM,EACN,QAAQ,kBAAkB,OAAO,QAAQ;AAE3C,SAAO;AAAA,IACN;AAAA,IACA,oBAAoB,kBAAkB,MAAM,OAAO,OAAO,eAAe;AAAA,IACzE,uBAAuB;AAAA,IACvB,gBAAgB,OAAO,IAAI,CAAC,WAAW;AAAA,MACtC;AAAA,MACA,kBAAkB,OAAO,sBAAsB,MAAM,EAAE,EAAG,MAAM;AAAA,IACjE,EAAE;AAAA,EACH;AACD;AAgBO,SAAS,8BAA8B;AAAA,EAC7C;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD,GAMG;AACF,QAAM,EAAE,mBAAmB,eAAe,IAAI;AAE9C,SAAO;AAAA,IACN,eAAe,IAAI,CAAC,EAAE,OAAO,iBAAiB,MAAM;AAInD,YAAM,kBAAkB,UAAU,MAAM,QAAQ,IAC7C,OAAO,sBAAsB,MAAM,QAAQ,IAC3C,IAAI,SAAS;AAEhB,YAAM,eAAe,IAAI,QAAQ,kBAAkB,kBAAkB,mBAAmB,KAAK;AAE7F,YAAM,gBAAgB,IAAI;AAAA;AAAA;AAAA,QAGzB,IAAI,QAAQ,eAAe;AAAA,QAC3B;AAAA,MACD;AACA,YAAM,cAAc,qBAAqB,MAAM,WAAW,KAAK;AAE/D,aAAO;AAAA,QACN,IAAI,MAAM;AAAA,QACV,MAAM,MAAM;AAAA,QACZ,GAAG,cAAc;AAAA,QACjB,GAAG,cAAc;AAAA,QACjB,UAAU;AAAA,MACX;AAAA,IACD,CAAC;AAAA,EACF;AAIA,QAAM,UAA4B,CAAC;AAEnC,iBAAe,QAAQ,CAAC,EAAE,MAAM,MAAM;AACrC,UAAM,UAAU,OAAO,SAAS,MAAM,EAAE;AACxC,QAAI,CAAC,QAAS;AACd,UAAM,OAAO,OAAO,aAAa,KAAK;AAEtC,QAAI,UAAU,WAAW,UAAU,WAAW;AAC7C,YAAM,cAAc,KAAK,gBAAgB,KAAK;AAC9C,UAAI,YAAa,SAAQ,KAAK,WAAW;AAAA,IAC1C;AAEA,UAAM,eAAe,KAAK,WAAW,OAAO,OAAO;AACnD,QAAI,aAAc,SAAQ,KAAK,YAAY;AAE3C,QAAI,UAAU,SAAS,UAAU,WAAW;AAC3C,YAAM,YAAY,KAAK,cAAc,OAAO,OAAO;AACnD,UAAI,UAAW,SAAQ,KAAK,SAAS;AAAA,IACtC;AAAA,EACD,CAAC;AAED,MAAI,QAAQ,SAAS,GAAG;AACvB,WAAO,aAAa,OAAO;AAAA,EAC5B;AACD;",
+  "sourcesContent": ["import { isShapeId, TLShape, TLShapeId, TLShapePartial } from '@tldraw/tlschema'\nimport { compact } from '@tldraw/utils'\nimport { Editor } from '../editor/Editor'\nimport { Mat } from '../primitives/Mat'\nimport { canonicalizeRotation } from '../primitives/utils'\nimport { Vec, VecLike } from '../primitives/Vec'\n\n/** @internal */\nexport function getRotationSnapshot({\n\teditor,\n\tids,\n}: {\n\teditor: Editor\n\tids: TLShapeId[]\n}): TLRotationSnapshot | null {\n\tconst shapes = compact(ids.map((id) => editor.getShape(id)))\n\tconst rotation = editor.getShapesSharedRotation(ids)\n\tconst rotatedPageBounds = editor.getShapesRotatedPageBounds(ids)\n\n\t// todo: this assumes we're rotating the selected shapes\n\t// if we try to rotate shapes that aren't selected, this\n\t// will produce the wrong results\n\n\t// Return null if there are no selected shapes\n\tif (!rotatedPageBounds) {\n\t\treturn null\n\t}\n\n\tconst initialPageCenter = rotatedPageBounds.center\n\t\t.clone()\n\t\t.rotWith(rotatedPageBounds.point, rotation)\n\n\treturn {\n\t\tinitialPageCenter,\n\t\tinitialCursorAngle: initialPageCenter.angle(editor.inputs.getOriginPagePoint()),\n\t\tinitialShapesRotation: rotation,\n\t\tshapeSnapshots: shapes.map((shape) => ({\n\t\t\tshape,\n\t\t\tinitialPagePoint: editor.getShapePageTransform(shape.id)!.point(),\n\t\t})),\n\t}\n}\n\n/**\n * @internal\n **/\nexport interface TLRotationSnapshot {\n\tinitialPageCenter: Vec\n\tinitialCursorAngle: number\n\tinitialShapesRotation: number\n\tshapeSnapshots: {\n\t\tshape: TLShape\n\t\tinitialPagePoint: Vec\n\t}[]\n}\n\n/** @internal */\nexport function applyRotationToSnapshotShapes({\n\tdelta,\n\teditor,\n\tsnapshot,\n\tstage,\n\tcenterOverride,\n}: {\n\tdelta: number\n\tsnapshot: TLRotationSnapshot\n\teditor: Editor\n\tstage: 'start' | 'update' | 'end' | 'one-off'\n\tcenterOverride?: VecLike\n}) {\n\tconst { initialPageCenter, shapeSnapshots } = snapshot\n\n\teditor.updateShapes(\n\t\tshapeSnapshots.map(({ shape, initialPagePoint }) => {\n\t\t\t// We need to both rotate each shape individually and rotate the shapes\n\t\t\t// around the pivot point (the average center of all rotating shapes.)\n\n\t\t\tconst parentTransform = isShapeId(shape.parentId)\n\t\t\t\t? editor.getShapePageTransform(shape.parentId)!\n\t\t\t\t: Mat.Identity()\n\n\t\t\tconst newPagePoint = Vec.RotWith(initialPagePoint, centerOverride ?? initialPageCenter, delta)\n\n\t\t\tconst newLocalPoint = Mat.applyToPoint(\n\t\t\t\t// use the current parent transform in case it has moved/resized since the start\n\t\t\t\t// (e.g. if rotating a shape at the edge of a group)\n\t\t\t\tMat.Inverse(parentTransform),\n\t\t\t\tnewPagePoint\n\t\t\t)\n\t\t\tconst newRotation = canonicalizeRotation(shape.rotation + delta)\n\n\t\t\treturn {\n\t\t\t\tid: shape.id,\n\t\t\t\ttype: shape.type,\n\t\t\t\tx: newLocalPoint.x,\n\t\t\t\ty: newLocalPoint.y,\n\t\t\t\trotation: newRotation,\n\t\t\t}\n\t\t})\n\t)\n\n\t// Handle change\n\n\tconst changes: TLShapePartial[] = []\n\n\tshapeSnapshots.forEach(({ shape }) => {\n\t\tconst current = editor.getShape(shape.id)\n\t\tif (!current) return\n\t\tconst util = editor.getShapeUtil(shape)\n\n\t\tif (stage === 'start' || stage === 'one-off') {\n\t\t\tconst changeStart = util.onRotateStart?.(shape)\n\t\t\tif (changeStart) changes.push(changeStart)\n\t\t}\n\n\t\tconst changeUpdate = util.onRotate?.(shape, current)\n\t\tif (changeUpdate) changes.push(changeUpdate)\n\n\t\tif (stage === 'end' || stage === 'one-off') {\n\t\t\tconst changeEnd = util.onRotateEnd?.(shape, current)\n\t\t\tif (changeEnd) changes.push(changeEnd)\n\t\t}\n\t})\n\n\tif (changes.length > 0) {\n\t\teditor.updateShapes(changes)\n\t}\n}\n"],
+  "mappings": "AAAA,SAAS,iBAAqD;AAC9D,SAAS,eAAe;AAExB,SAAS,WAAW;AACpB,SAAS,4BAA4B;AACrC,SAAS,WAAoB;AAGtB,SAAS,oBAAoB;AAAA,EACnC;AAAA,EACA;AACD,GAG8B;AAC7B,QAAM,SAAS,QAAQ,IAAI,IAAI,CAAC,OAAO,OAAO,SAAS,EAAE,CAAC,CAAC;AAC3D,QAAM,WAAW,OAAO,wBAAwB,GAAG;AACnD,QAAM,oBAAoB,OAAO,2BAA2B,GAAG;AAO/D,MAAI,CAAC,mBAAmB;AACvB,WAAO;AAAA,EACR;AAEA,QAAM,oBAAoB,kBAAkB,OAC1C,MAAM,EACN,QAAQ,kBAAkB,OAAO,QAAQ;AAE3C,SAAO;AAAA,IACN;AAAA,IACA,oBAAoB,kBAAkB,MAAM,OAAO,OAAO,mBAAmB,CAAC;AAAA,IAC9E,uBAAuB;AAAA,IACvB,gBAAgB,OAAO,IAAI,CAAC,WAAW;AAAA,MACtC;AAAA,MACA,kBAAkB,OAAO,sBAAsB,MAAM,EAAE,EAAG,MAAM;AAAA,IACjE,EAAE;AAAA,EACH;AACD;AAgBO,SAAS,8BAA8B;AAAA,EAC7C;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD,GAMG;AACF,QAAM,EAAE,mBAAmB,eAAe,IAAI;AAE9C,SAAO;AAAA,IACN,eAAe,IAAI,CAAC,EAAE,OAAO,iBAAiB,MAAM;AAInD,YAAM,kBAAkB,UAAU,MAAM,QAAQ,IAC7C,OAAO,sBAAsB,MAAM,QAAQ,IAC3C,IAAI,SAAS;AAEhB,YAAM,eAAe,IAAI,QAAQ,kBAAkB,kBAAkB,mBAAmB,KAAK;AAE7F,YAAM,gBAAgB,IAAI;AAAA;AAAA;AAAA,QAGzB,IAAI,QAAQ,eAAe;AAAA,QAC3B;AAAA,MACD;AACA,YAAM,cAAc,qBAAqB,MAAM,WAAW,KAAK;AAE/D,aAAO;AAAA,QACN,IAAI,MAAM;AAAA,QACV,MAAM,MAAM;AAAA,QACZ,GAAG,cAAc;AAAA,QACjB,GAAG,cAAc;AAAA,QACjB,UAAU;AAAA,MACX;AAAA,IACD,CAAC;AAAA,EACF;AAIA,QAAM,UAA4B,CAAC;AAEnC,iBAAe,QAAQ,CAAC,EAAE,MAAM,MAAM;AACrC,UAAM,UAAU,OAAO,SAAS,MAAM,EAAE;AACxC,QAAI,CAAC,QAAS;AACd,UAAM,OAAO,OAAO,aAAa,KAAK;AAEtC,QAAI,UAAU,WAAW,UAAU,WAAW;AAC7C,YAAM,cAAc,KAAK,gBAAgB,KAAK;AAC9C,UAAI,YAAa,SAAQ,KAAK,WAAW;AAAA,IAC1C;AAEA,UAAM,eAAe,KAAK,WAAW,OAAO,OAAO;AACnD,QAAI,aAAc,SAAQ,KAAK,YAAY;AAE3C,QAAI,UAAU,SAAS,UAAU,WAAW;AAC3C,YAAM,YAAY,KAAK,cAAc,OAAO,OAAO;AACnD,UAAI,UAAW,SAAQ,KAAK,SAAS;AAAA,IACtC;AAAA,EACD,CAAC;AAED,MAAI,QAAQ,SAAS,GAAG;AACvB,WAAO,aAAa,OAAO;AAAA,EAC5B;AACD;",
   "names": []
 }

package/dist-esm/version.mjs

@@ -1,8 +1,8 @@
-const version = "4.3.0-canary.c5efe11c58e0";
+const version = "4.3.0-canary.cb6779b4f066";
 const publishDates = {
   major: "2025-09-18T14:39:22.803Z",
-  minor: "2025-11-28T08:48:30.162Z",
-  patch: "2025-11-28T08:48:30.162Z"
+  minor: "2026-01-18T00:37:30.564Z",
+  patch: "2026-01-18T00:37:30.564Z"
 };
 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 = '4.3.0-canary.c5efe11c58e0'\nexport const publishDates = {\n\tmajor: '2025-09-18T14:39:22.803Z',\n\tminor: '2025-11-28T08:48:30.162Z',\n\tpatch: '2025-11-28T08:48:30.162Z',\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 = '4.3.0-canary.cb6779b4f066'\nexport const publishDates = {\n\tmajor: '2025-09-18T14:39:22.803Z',\n\tminor: '2026-01-18T00:37:30.564Z',\n\tpatch: '2026-01-18T00:37:30.564Z',\n}\n"],
   "mappings": "AAGO,MAAM,UAAU;AAChB,MAAM,eAAe;AAAA,EAC3B,OAAO;AAAA,EACP,OAAO;AAAA,EACP,OAAO;AACR;",
   "names": []
 }

package/editor.css

@@ -607,7 +607,6 @@ input,
 	pointer-events: all;
 	white-space: pre-wrap;
 	overflow-wrap: break-word;
-	text-shadow: var(--tl-text-outline);
 }
 
 .tl-text-wrapper[data-font='draw'] {
@@ -709,7 +708,7 @@ input,
 	resize: none;
 	border: none;
 	user-select: none;
-	contain: style paint;
+	contain: layout style paint;
 	/* N.B. This property, while discouraged ("intended for Document Type Definition (DTD) designers") is necessary for ensuring correct mixed RTL/LTR behavior when exporting SVGs. */
 	unicode-bidi: plaintext;
 	-webkit-user-select: none;
@@ -770,7 +769,6 @@ input,
 	justify-content: center;
 	align-items: center;
 	color: var(--tl-color-text);
-	text-shadow: var(--tl-text-outline);
 	line-height: inherit;
 	position: absolute;
 	inset: 0px;
@@ -970,6 +968,14 @@ input,
 	display: block;
 }
 
+.tl-text__outline {
+	text-shadow: var(--tl-text-outline);
+}
+
+.tl-text__no-outline {
+	text-shadow: none;
+}
+
 /* --------------------- Loading -------------------- */
 
 .tl-loading {
@@ -1134,14 +1140,12 @@ input,
 	fill: none;
 }
 
-@media (pointer: coarse) {
-	.tl-handle__bg:active {
-		fill: var(--tl-color-selection-fill);
-	}
+.tl-container[data-coarse='true'] .tl-handle__bg:active {
+	fill: var(--tl-color-selection-fill);
+}
 
-	.tl-handle__create {
-		opacity: 1;
-	}
+.tl-container[data-coarse='true'] .tl-handle__create {
+	opacity: 1;
 }
 
 .tl-rotate-corner:not(:hover),
@@ -1217,7 +1221,6 @@ input,
 	align-items: center;
 	text-align: center;
 	color: var(--tl-color-text);
-	text-shadow: var(--tl-text-outline);
 }
 
 .tl-shape[data-shape-type='arrow'] .tl-text-label__inner {
@@ -1446,7 +1449,6 @@ input,
 }
 
 .tl-note__container > .tl-text-label {
-	text-shadow: none;
 	color: currentColor;
 }
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tldraw/editor",
   "description": "tldraw infinite canvas SDK (editor).",
-  "version": "4.3.0-canary.c5efe11c58e0",
+  "version": "4.3.0-canary.cb6779b4f066",
   "author": {
     "name": "tldraw Inc.",
     "email": "hello@tldraw.com"
@@ -47,38 +47,42 @@
     "context": "yarn run -T tsx ../../internal/scripts/context.ts"
   },
   "dependencies": {
-    "@tiptap/core": "^3.6.2",
-    "@tiptap/pm": "^3.6.2",
-    "@tiptap/react": "^3.6.2",
-    "@tldraw/state": "4.3.0-canary.c5efe11c58e0",
-    "@tldraw/state-react": "4.3.0-canary.c5efe11c58e0",
-    "@tldraw/store": "4.3.0-canary.c5efe11c58e0",
-    "@tldraw/tlschema": "4.3.0-canary.c5efe11c58e0",
-    "@tldraw/utils": "4.3.0-canary.c5efe11c58e0",
-    "@tldraw/validate": "4.3.0-canary.c5efe11c58e0",
+    "@tiptap/core": "^3.12.1",
+    "@tiptap/pm": "^3.12.1",
+    "@tiptap/react": "^3.12.1",
+    "@tldraw/state": "4.3.0-canary.cb6779b4f066",
+    "@tldraw/state-react": "4.3.0-canary.cb6779b4f066",
+    "@tldraw/store": "4.3.0-canary.cb6779b4f066",
+    "@tldraw/tlschema": "4.3.0-canary.cb6779b4f066",
+    "@tldraw/utils": "4.3.0-canary.cb6779b4f066",
+    "@tldraw/validate": "4.3.0-canary.cb6779b4f066",
     "@types/core-js": "^2.5.8",
     "@use-gesture/react": "^10.3.1",
     "classnames": "^2.5.1",
     "core-js": "^3.40.0",
     "eventemitter3": "^4.0.7",
     "idb": "^7.1.1",
-    "is-plain-object": "^5.0.0"
+    "is-plain-object": "^5.0.0",
+    "rbush": "^4.0.1"
   },
   "peerDependencies": {
-    "react": "^18.2.0 || ^19.0.0",
-    "react-dom": "^18.2.0 || ^19.0.0"
+    "react": "^18.2.0 || ^19.2.1",
+    "react-dom": "^18.2.0 || ^19.2.1"
   },
   "devDependencies": {
     "@peculiar/webcrypto": "^1.5.0",
-    "@testing-library/react": "^15.0.7",
+    "@testing-library/dom": "^10.0.0",
+    "@testing-library/react": "^16.0.0",
     "@types/benchmark": "^2.1.5",
-    "@types/react": "^18.3.18",
+    "@types/rbush": "^4.0.0",
+    "@types/react": "^19.2.7",
+    "@types/react-dom": "^19.2.3",
     "@types/wicg-file-system-access": "^2020.9.8",
     "benchmark": "^2.1.4",
     "fake-indexeddb": "^4.0.2",
     "lazyrepo": "0.0.0-alpha.27",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
+    "react": "^19.2.1",
+    "react-dom": "^19.2.1",
     "resize-observer-polyfill": "^1.5.1",
     "vitest": "^3.2.4"
   },

package/src/index.ts

@@ -146,6 +146,7 @@ export {
 	type TLFontFaceSource,
 } from './lib/editor/managers/FontManager/FontManager'
 export { HistoryManager } from './lib/editor/managers/HistoryManager/HistoryManager'
+export { InputsManager } from './lib/editor/managers/InputsManager/InputsManager'
 export {
 	ScribbleManager,
 	type ScribbleItem,
@@ -163,11 +164,13 @@ export {
 	type SnapData,
 	type SnapIndicator,
 } from './lib/editor/managers/SnapManager/SnapManager'
+export { SpatialIndexManager } from './lib/editor/managers/SpatialIndexManager/SpatialIndexManager'
 export {
 	TextManager,
 	type TLMeasureTextOpts,
 	type TLMeasureTextSpanOpts,
 } from './lib/editor/managers/TextManager/TextManager'
+export { TickManager } from './lib/editor/managers/TickManager/TickManager'
 export { UserPreferencesManager } from './lib/editor/managers/UserPreferencesManager/UserPreferencesManager'
 export { BaseBoxShapeUtil, type TLBaseBoxShape } from './lib/editor/shapes/BaseBoxShapeUtil'
 export { GroupShapeUtil } from './lib/editor/shapes/group/GroupShapeUtil'
@@ -178,6 +181,7 @@ export {
 	type TLDragShapesOutInfo,
 	type TLDragShapesOverInfo,
 	type TLDropShapesOverInfo,
+	type TLEditStartInfo,
 	type TLGeometryOpts,
 	type TLHandleDragInfo,
 	type TLResizeInfo,
@@ -282,7 +286,7 @@ export {
 	type SvgExportDef,
 } from './lib/editor/types/SvgExportContext'
 export { getSvgAsImage } from './lib/exports/getSvgAsImage'
-export { tlenv } from './lib/globals/environment'
+export { tlenv, tlenvReactive } from './lib/globals/environment'
 export { tlmenus } from './lib/globals/menus'
 export { tltime } from './lib/globals/time'
 export {

package/src/lib/components/ErrorBoundary.tsx

@@ -12,7 +12,7 @@ const initialState = { error: null }
 
 /** @public */
 export class ErrorBoundary extends React.Component<
-	React.PropsWithRef<React.PropsWithChildren<TLErrorBoundaryProps>>,
+	React.PropsWithChildren<TLErrorBoundaryProps>,
 	{ error: Error | null }
 > {
 	static getDerivedStateFromError(error: Error) {

package/src/lib/components/GeometryDebuggingView.tsx

@@ -1,23 +1,9 @@
 import { track } from '@tldraw/state-react'
 import { modulate } from '@tldraw/utils'
-import { useEffect, useState } from 'react'
 import { useEditor } from '../hooks/useEditor'
 import { Geometry2d } from '../primitives/geometry/Geometry2d'
 import { Group2d } from '../primitives/geometry/Group2d'
 
-function useTick(isEnabled = true) {
-	const [_, setTick] = useState(0)
-	const editor = useEditor()
-	useEffect(() => {
-		if (!isEnabled) return
-		const update = () => setTick((tick) => tick + 1)
-		editor.on('tick', update)
-		return () => {
-			editor.off('tick', update)
-		}
-	}, [editor, isEnabled])
-}
-
 export const GeometryDebuggingView = track(function GeometryDebuggingView({
 	showStroke = true,
 	showVertices = true,
@@ -29,13 +15,9 @@ export const GeometryDebuggingView = track(function GeometryDebuggingView({
 }) {
 	const editor = useEditor()
 
-	useTick(showClosestPointOnOutline)
-
 	const zoomLevel = editor.getZoomLevel()
 	const renderingShapes = editor.getRenderingShapes()
-	const {
-		inputs: { currentPagePoint },
-	} = editor
+	const currentPagePoint = editor.inputs.getCurrentPagePoint()
 
 	return (
 		<svg

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

@@ -86,6 +86,7 @@ export function DefaultCanvas({ className }: TLCanvasComponentProps) {
 			const transform = `scale(${toDomPrecision(z)}) translate(${toDomPrecision(
 				x + offset
 			)}px,${toDomPrecision(y + offset)}px)`
+
 			setStyleProperty(rHtmlLayer.current, 'transform', transform)
 			setStyleProperty(rHtmlLayer2.current, 'transform', transform)
 		},
@@ -209,7 +210,7 @@ function GridWrapper() {
 function ScribbleWrapper() {
 	const editor = useEditor()
 	const scribbles = useValue('scribbles', () => editor.getInstanceState().scribbles, [editor])
-	const zoomLevel = useValue('zoomLevel', () => editor.getZoomLevel(), [editor])
+	const zoomLevel = useValue('zoomLevel', () => editor.getEfficientZoomLevel(), [editor])
 	const { Scribble } = useEditorComponents()
 
 	if (!(Scribble && scribbles.length)) return null
@@ -242,7 +243,7 @@ function ZoomBrushWrapper() {
 function SnapIndicatorWrapper() {
 	const editor = useEditor()
 	const lines = useValue('snapLines', () => editor.snaps.getIndicators(), [editor])
-	const zoomLevel = useValue('zoomLevel', () => editor.getZoomLevel(), [editor])
+	const zoomLevel = useValue('zoomLevel', () => editor.getEfficientZoomLevel(), [editor])
 	const { SnapIndicator } = useEditorComponents()
 
 	if (!(SnapIndicator && lines.length > 0)) return null
@@ -283,7 +284,7 @@ function HandlesWrapperInner({ shapeId }: { shapeId: TLShapeId }) {
 	const editor = useEditor()
 	const { Handles } = useEditorComponents()
 
-	const zoomLevel = useValue('zoomLevel', () => editor.getZoomLevel(), [editor])
+	const zoomLevel = useValue('zoomLevel', () => editor.getEfficientZoomLevel(), [editor])
 
 	const isCoarse = useValue('coarse pointer', () => editor.getInstanceState().isCoarsePointer, [
 		editor,
@@ -411,11 +412,7 @@ function ReflowIfNeeded() {
 		'reflow for culled shapes',
 		() => {
 			const culledShapes = editor.getCulledShapes()
-			if (
-				culledShapesRef.current.size === culledShapes.size &&
-				[...culledShapes].every((id) => culledShapesRef.current.has(id))
-			)
-				return
+			if (culledShapesRef.current === culledShapes) return
 
 			culledShapesRef.current = culledShapes
 			const canvas = document.getElementsByClassName('tl-canvas')

package/src/lib/config/TLUserPreferences.test.ts

@@ -0,0 +1,40 @@
+import { describe, expect, it } from 'vitest'
+import { defaultUserPreferences, userTypeValidator } from './TLUserPreferences'
+
+describe('TLUserPreferences consistency', () => {
+	// When adding a new user preference, add it to this list AND update:
+	// 1. TLUserPreferences interface
+	// 2. userTypeValidator
+	// 3. defaultUserPreferences
+	// 4. Versions enum and migrateSnapshot()
+	const interfaceKeys = [
+		'name',
+		'color',
+		'locale',
+		'animationSpeed',
+		'areKeyboardShortcutsEnabled',
+		'edgeScrollSpeed',
+		'colorScheme',
+		'isSnapMode',
+		'isWrapMode',
+		'isDynamicSizeMode',
+		'isPasteAtCursorMode',
+		'enhancedA11yMode',
+		'inputMode',
+	] as const
+
+	it('defaultUserPreferences contains all TLUserPreferences keys (except id)', () => {
+		const defaultKeys = Object.keys(defaultUserPreferences).sort()
+		const expected = [...interfaceKeys].sort()
+
+		expect(defaultKeys).toEqual(expected)
+	})
+
+	it('userTypeValidator validates all TLUserPreferences keys', () => {
+		// Access the internal config property to check which keys the validator covers
+		const validatorKeys = Object.keys((userTypeValidator as any).config).sort()
+		const expected = ['id', ...interfaceKeys].sort()
+
+		expect(validatorKeys).toEqual(expected)
+	})
+})

package/src/lib/constants.ts

@@ -31,5 +31,3 @@ export const LEFT_MOUSE_BUTTON = 0
 export const RIGHT_MOUSE_BUTTON = 2
 export const MIDDLE_MOUSE_BUTTON = 1
 export const STYLUS_ERASER_BUTTON = 5
-
-export const ZOOM_TO_FIT_PADDING = 128

package/src/lib/editor/Editor.test.ts

@@ -925,6 +925,146 @@ describe('replaceExternalContent', () => {
 	})
 })
 
+describe('dispatch event emission', () => {
+	let testEditor: Editor
+
+	beforeEach(() => {
+		testEditor = new Editor({
+			shapeUtils: [CustomShape],
+			bindingUtils: [],
+			tools: [],
+			store: createTLStore({ shapeUtils: [CustomShape], bindingUtils: [] }),
+			getContainer: () => document.body,
+		})
+		// Ensure camera is unlocked so events are processed
+		testEditor.setCameraOptions({ isLocked: false })
+	})
+
+	it('emits wheel events through the event emitter', () => {
+		const eventHandler = vi.fn()
+		testEditor.on('event', eventHandler)
+
+		const wheelEvent = {
+			type: 'wheel' as const,
+			name: 'wheel' as const,
+			delta: { x: 0, y: 10, z: 0 },
+			point: { x: 100, y: 100, z: 1 },
+			shiftKey: false,
+			altKey: false,
+			ctrlKey: false,
+			metaKey: false,
+			accelKey: false,
+		}
+
+		testEditor.dispatch(wheelEvent)
+		// Wheel events are batched for the next tick, so emit a tick to flush them
+		testEditor.emit('tick', 16)
+
+		expect(eventHandler).toHaveBeenCalledWith(wheelEvent)
+	})
+
+	it('emits pinch_start events through the event emitter', () => {
+		const eventHandler = vi.fn()
+		testEditor.on('event', eventHandler)
+
+		const pinchStartEvent = {
+			type: 'pinch' as const,
+			name: 'pinch_start' as const,
+			point: { x: 100, y: 100, z: 1 },
+			delta: { x: 0, y: 0, z: 0 },
+			shiftKey: false,
+			altKey: false,
+			ctrlKey: false,
+			metaKey: false,
+			accelKey: false,
+		}
+
+		testEditor.dispatch(pinchStartEvent)
+		// Pinch events are batched for the next tick, so emit a tick to flush them
+		testEditor.emit('tick', 16)
+
+		expect(eventHandler).toHaveBeenCalledWith(pinchStartEvent)
+	})
+
+	it('emits pinch events through the event emitter', () => {
+		const eventHandler = vi.fn()
+		testEditor.on('event', eventHandler)
+
+		// First dispatch pinch_start to set isPinching
+		const pinchStartEvent = {
+			type: 'pinch' as const,
+			name: 'pinch_start' as const,
+			point: { x: 100, y: 100, z: 1 },
+			delta: { x: 0, y: 0, z: 0 },
+			shiftKey: false,
+			altKey: false,
+			ctrlKey: false,
+			metaKey: false,
+			accelKey: false,
+		}
+		testEditor.dispatch(pinchStartEvent)
+		testEditor.emit('tick', 16)
+
+		eventHandler.mockClear()
+
+		const pinchEvent = {
+			type: 'pinch' as const,
+			name: 'pinch' as const,
+			point: { x: 100, y: 100, z: 1.5 },
+			delta: { x: 10, y: 10, z: 0 },
+			shiftKey: false,
+			altKey: false,
+			ctrlKey: false,
+			metaKey: false,
+			accelKey: false,
+		}
+
+		testEditor.dispatch(pinchEvent)
+		testEditor.emit('tick', 16)
+
+		expect(eventHandler).toHaveBeenCalledWith(pinchEvent)
+	})
+
+	it('emits pinch_end events through the event emitter', () => {
+		const eventHandler = vi.fn()
+		testEditor.on('event', eventHandler)
+
+		// First dispatch pinch_start to set isPinching
+		const pinchStartEvent = {
+			type: 'pinch' as const,
+			name: 'pinch_start' as const,
+			point: { x: 100, y: 100, z: 1 },
+			delta: { x: 0, y: 0, z: 0 },
+			shiftKey: false,
+			altKey: false,
+			ctrlKey: false,
+			metaKey: false,
+			accelKey: false,
+		}
+		testEditor.dispatch(pinchStartEvent)
+		testEditor.emit('tick', 16)
+
+		eventHandler.mockClear()
+
+		const pinchEndEvent = {
+			type: 'pinch' as const,
+			name: 'pinch_end' as const,
+			point: { x: 100, y: 100, z: 1.5 },
+			delta: { x: 0, y: 0, z: 0 },
+			shiftKey: false,
+			altKey: false,
+			ctrlKey: false,
+			metaKey: false,
+			accelKey: false,
+		}
+
+		testEditor.dispatch(pinchEndEvent)
+		testEditor.emit('tick', 16)
+
+		expect(eventHandler).toHaveBeenCalledWith(pinchEndEvent)
+	})
+})
+
 describe('setTool', () => {
 	class CustomToolA extends StateNode {
 		static override id = 'custom-tool-a'