@tldraw/editor 3.14.0-canary.d15c939851b6 → 3.14.0-canary.d1b8a584b27c

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/lib/utils/dom.ts"],
-  "sourcesContent": ["/*\nThis is used to facilitate double clicking and pointer capture on elements.\n\nThe events in this file are possibly set on individual SVG elements, \nsuch as handles or corner handles, rather than on HTML elements or \nSVGSVGElements. Raw SVG elemnets 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 React from 'react'\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 * Beacuase 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 unfortuantly 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\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/** @public */\nexport const stopEventPropagation = (e: any) => e.stopPropagation()\n\n/** @internal */\nexport const setStyleProperty = (\n\telm: HTMLElement | null,\n\tproperty: string,\n\tvalue: string | number\n) => {\n\tif (!elm) return\n\telm.style.setProperty(property, value as string)\n}\n\n/** @internal */\nexport function activeElementShouldCaptureKeys(allowButtons = false) {\n\tconst { activeElement } = document\n\tconst elements = allowButtons ? ['input', 'textarea'] : ['input', 'select', 'button', 'textarea']\n\treturn !!(\n\t\tactiveElement &&\n\t\t((activeElement as HTMLElement).isContentEditable ||\n\t\t\telements.indexOf(activeElement.tagName.toLowerCase()) > -1 ||\n\t\t\tactiveElement.classList.contains('tlui-slider__thumb'))\n\t)\n}\n"],
-  "mappings": "AAgBA,SAAS,YAAY,oCAAoC;AAGlD,SAAS,kBAAkB,KAA2B;AAC5D,MAAI,IAAI,aAAa,KAAK,aAAc,QAAO;AAC/C,MAAI,IAAI,cAAe,QAAO,kBAAkB,IAAI,aAAa;AAAA,MAC5D,OAAM,MAAM,kDAAkD;AACpE;AAcO,SAAS,eAAe,OAAyC;AACvE,QAAM,eAAe;AACrB,MAAI,WAAW,mBAAmB,IAAI,GAAG;AACxC,YAAQ,KAAK,mCAAmC,KAAK;AAAA,EACtD;AACD;AAGO,SAAS,kBACf,SACA,OACC;AACD,UAAQ,kBAAkB,MAAM,SAAS;AACzC,MAAI,WAAW,mBAAmB,IAAI,GAAG;AACxC,UAAM,cAAc,6BAA6B,IAAI;AACrD,gBAAY,IAAI,UAAU,YAAY,IAAI,OAAO,KAAK,KAAK,CAAC;AAC5D,YAAQ,KAAK,wCAAwC,SAAS,KAAK;AAAA,EACpE;AACD;AAGO,SAAS,sBACf,SACA,OACC;AACD,MAAI,CAAC,QAAQ,kBAAkB,MAAM,SAAS,GAAG;AAChD;AAAA,EACD;AAEA,UAAQ,sBAAsB,MAAM,SAAS;AAC7C,MAAI,WAAW,mBAAmB,IAAI,GAAG;AACxC,UAAM,cAAc,6BAA6B,IAAI;AACrD,QAAI,YAAY,IAAI,OAAO,MAAM,GAAG;AACnC,kBAAY,OAAO,OAAO;AAAA,IAC3B,WAAW,YAAY,IAAI,OAAO,GAAG;AACpC,kBAAY,IAAI,SAAS,YAAY,IAAI,OAAO,IAAK,CAAC;AAAA,IACvD,OAAO;AACN,cAAQ,KAAK,yBAAyB;AAAA,IACvC;AACA,YAAQ,KAAK,4CAA4C,SAAS,KAAK;AAAA,EACxE;AACD;AAGO,MAAM,uBAAuB,CAAC,MAAW,EAAE,gBAAgB;AAG3D,MAAM,mBAAmB,CAC/B,KACA,UACA,UACI;AACJ,MAAI,CAAC,IAAK;AACV,MAAI,MAAM,YAAY,UAAU,KAAe;AAChD;AAGO,SAAS,+BAA+B,eAAe,OAAO;AACpE,QAAM,EAAE,cAAc,IAAI;AAC1B,QAAM,WAAW,eAAe,CAAC,SAAS,UAAU,IAAI,CAAC,SAAS,UAAU,UAAU,UAAU;AAChG,SAAO,CAAC,EACP,kBACE,cAA8B,qBAC/B,SAAS,QAAQ,cAAc,QAAQ,YAAY,CAAC,IAAI,MACxD,cAAc,UAAU,SAAS,oBAAoB;AAExD;",
+  "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 elemnets 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 React from 'react'\nimport { debugFlags, pointerCaptureTrackingObject } from './debug-flags'\n\n/** @public */\nexport function loopToHtmlElement(elm: Element): HTMLElement {\n\tif (elm instanceof HTMLElement) return elm\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 * Beacuase 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 unfortuantly 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\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/** @public */\nexport const stopEventPropagation = (e: any) => e.stopPropagation()\n\n/** @internal */\nexport const setStyleProperty = (\n\telm: HTMLElement | null,\n\tproperty: string,\n\tvalue: string | number\n) => {\n\tif (!elm) return\n\telm.style.setProperty(property, value as string)\n}\n\n/** @internal */\nexport function activeElementShouldCaptureKeys(allowButtons = false) {\n\tconst { activeElement } = document\n\tconst elements = allowButtons ? ['input', 'textarea'] : ['input', 'select', 'button', 'textarea']\n\treturn !!(\n\t\tactiveElement &&\n\t\t((activeElement as HTMLElement).isContentEditable ||\n\t\t\telements.indexOf(activeElement.tagName.toLowerCase()) > -1 ||\n\t\t\tactiveElement.classList.contains('tlui-slider__thumb'))\n\t)\n}\n"],
+  "mappings": "AAgBA,SAAS,YAAY,oCAAoC;AAGlD,SAAS,kBAAkB,KAA2B;AAC5D,MAAI,eAAe,YAAa,QAAO;AACvC,MAAI,IAAI,cAAe,QAAO,kBAAkB,IAAI,aAAa;AAAA,MAC5D,OAAM,MAAM,kDAAkD;AACpE;AAcO,SAAS,eAAe,OAAyC;AACvE,QAAM,eAAe;AACrB,MAAI,WAAW,mBAAmB,IAAI,GAAG;AACxC,YAAQ,KAAK,mCAAmC,KAAK;AAAA,EACtD;AACD;AAGO,SAAS,kBACf,SACA,OACC;AACD,UAAQ,kBAAkB,MAAM,SAAS;AACzC,MAAI,WAAW,mBAAmB,IAAI,GAAG;AACxC,UAAM,cAAc,6BAA6B,IAAI;AACrD,gBAAY,IAAI,UAAU,YAAY,IAAI,OAAO,KAAK,KAAK,CAAC;AAC5D,YAAQ,KAAK,wCAAwC,SAAS,KAAK;AAAA,EACpE;AACD;AAGO,SAAS,sBACf,SACA,OACC;AACD,MAAI,CAAC,QAAQ,kBAAkB,MAAM,SAAS,GAAG;AAChD;AAAA,EACD;AAEA,UAAQ,sBAAsB,MAAM,SAAS;AAC7C,MAAI,WAAW,mBAAmB,IAAI,GAAG;AACxC,UAAM,cAAc,6BAA6B,IAAI;AACrD,QAAI,YAAY,IAAI,OAAO,MAAM,GAAG;AACnC,kBAAY,OAAO,OAAO;AAAA,IAC3B,WAAW,YAAY,IAAI,OAAO,GAAG;AACpC,kBAAY,IAAI,SAAS,YAAY,IAAI,OAAO,IAAK,CAAC;AAAA,IACvD,OAAO;AACN,cAAQ,KAAK,yBAAyB;AAAA,IACvC;AACA,YAAQ,KAAK,4CAA4C,SAAS,KAAK;AAAA,EACxE;AACD;AAGO,MAAM,uBAAuB,CAAC,MAAW,EAAE,gBAAgB;AAG3D,MAAM,mBAAmB,CAC/B,KACA,UACA,UACI;AACJ,MAAI,CAAC,IAAK;AACV,MAAI,MAAM,YAAY,UAAU,KAAe;AAChD;AAGO,SAAS,+BAA+B,eAAe,OAAO;AACpE,QAAM,EAAE,cAAc,IAAI;AAC1B,QAAM,WAAW,eAAe,CAAC,SAAS,UAAU,IAAI,CAAC,SAAS,UAAU,UAAU,UAAU;AAChG,SAAO,CAAC,EACP,kBACE,cAA8B,qBAC/B,SAAS,QAAQ,cAAc,QAAQ,YAAY,CAAC,IAAI,MACxD,cAAc,UAAU,SAAS,oBAAoB;AAExD;",
   "names": []
 }

package/dist-esm/version.mjs

@@ -1,8 +1,8 @@
-const version = "3.14.0-canary.d15c939851b6";
+const version = "3.14.0-canary.d1b8a584b27c";
 const publishDates = {
   major: "2024-09-13T14:36:29.063Z",
-  minor: "2025-07-01T13:15:12.958Z",
-  patch: "2025-07-01T13:15:12.958Z"
+  minor: "2025-06-23T14:58:35.827Z",
+  patch: "2025-06-23T14:58:35.827Z"
 };
 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 = '3.14.0-canary.d15c939851b6'\nexport const publishDates = {\n\tmajor: '2024-09-13T14:36:29.063Z',\n\tminor: '2025-07-01T13:15:12.958Z',\n\tpatch: '2025-07-01T13:15:12.958Z',\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 = '3.14.0-canary.d1b8a584b27c'\nexport const publishDates = {\n\tmajor: '2024-09-13T14:36:29.063Z',\n\tminor: '2025-06-23T14:58:35.827Z',\n\tpatch: '2025-06-23T14:58:35.827Z',\n}\n"],
   "mappings": "AAGO,MAAM,UAAU;AAChB,MAAM,eAAe;AAAA,EAC3B,OAAO;AAAA,EACP,OAAO;AAAA,EACP,OAAO;AACR;",
   "names": []
 }

package/editor.css

@@ -176,7 +176,8 @@
 	--color-success: hsl(123, 46%, 34%);
 	--color-info: hsl(201, 98%, 41%);
 	--color-warning: hsl(27, 98%, 47%);
-	--color-danger: hsl(0, 90%, 43%);
+	--color-error: hsl(0, 65%, 51%);
+	--color-warn: hsl(0, 90%, 43%);
 	--color-laser: hsl(0, 100%, 50%);
 	/* Shadows */
 	--shadow-1: 0px 1px 2px hsl(0, 0%, 0%, 25%), 0px 1px 3px hsl(0, 0%, 0%, 9%);
@@ -231,7 +232,8 @@
 	--color-success: hsl(123, 38%, 57%);
 	--color-info: hsl(199, 92%, 56%);
 	--color-warning: hsl(36, 100%, 57%);
-	--color-danger: hsl(0, 82%, 66%);
+	--color-error: hsl(4, 90%, 58%);
+	--color-warn: hsl(0, 81%, 66%);
 	--color-laser: hsl(0, 100%, 50%);
 	/* Shadows */
 	--shadow-1:
@@ -245,13 +247,6 @@
 		inset 0px 0px 0px 1px var(--color-panel-contrast);
 }
 
-.tl-counter-scaled {
-	transform: scale(var(--tl-scale));
-	transform-origin: top left;
-	width: calc(100% * var(--tl-zoom));
-	height: calc(100% * var(--tl-zoom));
-}
-
 .tl-container,
 .tl-container * {
 	-webkit-touch-callout: none;
@@ -1062,8 +1057,8 @@ input,
 }
 
 .tl-hyperlink__icon {
-	width: 15px;
-	height: 15px;
+	width: 16px;
+	height: 16px;
 	background-color: currentColor;
 	pointer-events: none;
 }
@@ -1162,7 +1157,7 @@ input,
 	stroke-linejoin: round;
 	/* content-visibility: auto; */
 	transform-origin: top left;
-	color: var(--color-text-1);
+	color: inherit;
 }
 
 /* -------------------- Group shape ------------------ */
@@ -1277,7 +1272,6 @@ input,
 	display: flex;
 	justify-content: flex-end;
 	align-items: flex-start;
-	box-shadow: inset 0px 0px 0px 1px var(--color-divider);
 }
 
 .tl-bookmark__image_container > .tl-hyperlink-button::after {
@@ -1300,7 +1294,7 @@ input,
 }
 
 .tl-bookmark__copy_container {
-	background-color: var(--color-muted-0);
+	background-color: var(--color-muted);
 	padding: var(--space-4);
 	pointer-events: all;
 	display: flex;
@@ -1319,11 +1313,11 @@ input,
 
 .tl-bookmark__heading {
 	font-size: 16px;
-	line-height: 1.6;
+	line-height: 1.5;
 	font-weight: bold;
 	padding-bottom: var(--space-2);
 	overflow: hidden;
-	max-height: calc((16px * 1.6) * 2);
+	max-height: calc((16px * 1.5) * 2);
 	-webkit-box-orient: vertical;
 	-webkit-line-clamp: 2;
 	line-clamp: 2;
@@ -1712,7 +1706,7 @@ it from receiving any pointer events or affecting the cursor. */
 	gap: var(--space-4);
 }
 .tl-error-boundary__content .tl-error-boundary__reset {
-	color: var(--color-danger);
+	color: var(--color-warn);
 }
 .tl-error-boundary__content .tl-error-boundary__refresh {
 	background-color: var(--color-primary);

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tldraw/editor",
   "description": "A tiny little drawing app (editor).",
-  "version": "3.14.0-canary.d15c939851b6",
+  "version": "3.14.0-canary.d1b8a584b27c",
   "author": {
     "name": "tldraw Inc.",
     "email": "hello@tldraw.com"
@@ -48,12 +48,12 @@
     "@tiptap/core": "^2.9.1",
     "@tiptap/pm": "^2.9.1",
     "@tiptap/react": "^2.9.1",
-    "@tldraw/state": "3.14.0-canary.d15c939851b6",
-    "@tldraw/state-react": "3.14.0-canary.d15c939851b6",
-    "@tldraw/store": "3.14.0-canary.d15c939851b6",
-    "@tldraw/tlschema": "3.14.0-canary.d15c939851b6",
-    "@tldraw/utils": "3.14.0-canary.d15c939851b6",
-    "@tldraw/validate": "3.14.0-canary.d15c939851b6",
+    "@tldraw/state": "3.14.0-canary.d1b8a584b27c",
+    "@tldraw/state-react": "3.14.0-canary.d1b8a584b27c",
+    "@tldraw/store": "3.14.0-canary.d1b8a584b27c",
+    "@tldraw/tlschema": "3.14.0-canary.d1b8a584b27c",
+    "@tldraw/utils": "3.14.0-canary.d1b8a584b27c",
+    "@tldraw/validate": "3.14.0-canary.d1b8a584b27c",
     "@types/core-js": "^2.5.8",
     "@use-gesture/react": "^10.3.1",
     "classnames": "^2.5.1",

package/src/index.ts

@@ -182,10 +182,6 @@ export { BaseBoxShapeUtil, type TLBaseBoxShape } from './lib/editor/shapes/BaseB
 export {
 	ShapeUtil,
 	type TLCropInfo,
-	type TLDragShapesInInfo,
-	type TLDragShapesOutInfo,
-	type TLDragShapesOverInfo,
-	type TLDropShapesOverInfo,
 	type TLGeometryOpts,
 	type TLHandleDragInfo,
 	type TLResizeInfo,
@@ -450,7 +446,6 @@ export { hardResetEditor } from './lib/utils/hardResetEditor'
 export { isAccelKey } from './lib/utils/keyboard'
 export { normalizeWheel } from './lib/utils/normalizeWheel'
 export { refreshPage } from './lib/utils/refreshPage'
-export { getDroppedShapesToNewParents, kickoutOccludedShapes } from './lib/utils/reparenting'
 export {
 	getFontsFromRichText,
 	type RichTextFontVisitor,

package/src/lib/editor/Editor.ts

@@ -3662,7 +3662,7 @@ export class Editor extends EventEmitter<TLEventMap> {
 	 * @public
 	 */
 	updateViewportScreenBounds(screenBounds: Box | HTMLElement, center = false): this {
-		if (!(screenBounds instanceof Box)) {
+		if (screenBounds instanceof HTMLElement) {
 			const rect = screenBounds.getBoundingClientRect()
 			screenBounds = new Box(
 				rect.left || rect.x,
@@ -5528,7 +5528,7 @@ export class Editor extends EventEmitter<TLEventMap> {
 		if (!id) return undefined
 		const freshShape = this.getShape(id)
 		if (freshShape === undefined || !isShapeId(freshShape.parentId)) return undefined
-		return this.getShape(freshShape.parentId)
+		return this.store.get(freshShape.parentId)
 	}
 
 	/**
@@ -5711,10 +5711,6 @@ export class Editor extends EventEmitter<TLEventMap> {
 					const newPoint = invertedParentTransform.applyToPoint(pagePoint)
 					const newRotation = pageTransform.rotation() - parentPageRotation
 
-					if (shape.id === parentId) {
-						throw Error('Attempted to reparent a shape to itself!')
-					}
-
 					changes.push({
 						id: shape.id,
 						type: shape.type,
@@ -5818,11 +5814,6 @@ export class Editor extends EventEmitter<TLEventMap> {
 		return shapeIds
 	}
 
-	/** @deprecated Use {@link Editor.getDraggingOverShape} instead */
-	getDroppingOverShape(point: Vec, droppingShapes: TLShape[]): TLShape | undefined {
-		return this.getDraggingOverShape(point, droppingShapes)
-	}
-
 	/**
 	 * Get the shape that some shapes should be dropped on at a given point.
 	 *
@@ -5833,33 +5824,35 @@ export class Editor extends EventEmitter<TLEventMap> {
 	 *
 	 * @public
 	 */
-	getDraggingOverShape(point: Vec, droppingShapes: TLShape[]): TLShape | undefined {
-		// get fresh moving shapes
-		const draggingShapes = compact(droppingShapes.map((s) => this.getShape(s))).filter(
-			(s) => !s.isLocked && !this.isShapeHidden(s)
-		)
+	getDroppingOverShape(point: VecLike, droppingShapes: TLShape[] = []) {
+		// starting from the top...
+		const currentPageShapesSorted = this.getCurrentPageShapesSorted()
+		for (let i = currentPageShapesSorted.length - 1; i >= 0; i--) {
+			const shape = currentPageShapesSorted[i]
 
-		const maybeDraggingOverShapes = this.getShapesAtPoint(point, {
-			hitInside: true,
-			margin: 0,
-		}).filter(
-			(s) =>
-				!droppingShapes.includes(s) &&
-				!s.isLocked &&
-				!this.isShapeHidden(s) &&
-				!draggingShapes.includes(s)
-		)
+			if (
+				// ignore hidden shapes
+				this.isShapeHidden(shape) ||
+				// don't allow dropping on selected shapes
+				this.getSelectedShapeIds().includes(shape.id) ||
+				// only allow shapes that can receive children
+				!this.getShapeUtil(shape).canDropShapes(shape, droppingShapes) ||
+				// don't allow dropping a shape on itself or one of it's children
+				droppingShapes.find((s) => s.id === shape.id || this.hasAncestor(shape, s.id))
+			) {
+				continue
+			}
+
+			// Only allow dropping into the masked page bounds of the shape, e.g. when a frame is
+			// partially clipped by its own parent frame
+			const maskedPageBounds = this.getShapeMaskedPageBounds(shape.id)
 
-		for (const maybeDraggingOverShape of maybeDraggingOverShapes) {
-			const shapeUtil = this.getShapeUtil(maybeDraggingOverShape)
-			// Any shape that can handle any dragging interactions is a valid target
 			if (
-				shapeUtil.onDragShapesOver ||
-				shapeUtil.onDragShapesIn ||
-				shapeUtil.onDragShapesOut ||
-				shapeUtil.onDropShapesOver
+				maskedPageBounds &&
+				maskedPageBounds.containsPoint(point) &&
+				this.getShapeGeometry(shape).hitTestPoint(this.getPointInShapeSpace(shape, point), 0, true)
 			) {
-				return maybeDraggingOverShape
+				return shape
 			}
 		}
 	}
@@ -6303,7 +6296,10 @@ export class Editor extends EventEmitter<TLEventMap> {
 			})
 			const shapesToCreate = shapesToCreateWithOriginals.map(({ shape }) => shape)
 
-			if (!this.canCreateShapes(shapesToCreate)) {
+			const maxShapesReached =
+				shapesToCreate.length + this.getCurrentPageShapeIds().size > this.options.maxShapesPerPage
+
+			if (maxShapesReached) {
 				alertMaxShapes(this)
 				return
 			}
@@ -7732,32 +7728,6 @@ export class Editor extends EventEmitter<TLEventMap> {
 		return {}
 	}
 
-	/**
-	 * Get whether the provided shape can be created.
-	 *
-	 * @param shape - The shape or shape IDs to check.
-	 *
-	 * @public
-	 */
-	canCreateShape<T extends TLUnknownShape>(
-		shape: OptionalKeys<TLShapePartial<T>, 'id'> | T['id']
-	): boolean {
-		return this.canCreateShapes([shape])
-	}
-
-	/**
-	 * Get whether the provided shapes can be created.
-	 *
-	 * @param shapes - The shapes or shape IDs to create.
-	 *
-	 * @public
-	 */
-	canCreateShapes<T extends TLUnknownShape>(
-		shapes: (T['id'] | OptionalKeys<TLShapePartial<T>, 'id'>)[]
-	): boolean {
-		return shapes.length + this.getCurrentPageShapeIds().size <= this.options.maxShapesPerPage
-	}
-
 	/**
 	 * Create a single shape.
 	 *
@@ -7804,7 +7774,6 @@ export class Editor extends EventEmitter<TLEventMap> {
 		if (maxShapesReached) {
 			// can't create more shapes than fit on the page
 			alertMaxShapes(this)
-			// todo: throw an error here? Otherwise we'll need to check every time whether the shapes were actually created
 			return this
 		}
 
@@ -7837,10 +7806,9 @@ export class Editor extends EventEmitter<TLEventMap> {
 
 					for (let i = currentPageShapesSorted.length - 1; i >= 0; i--) {
 						const parent = currentPageShapesSorted[i]
-						const util = this.getShapeUtil(parent)
 						if (
-							util.canReceiveNewChildrenOfType(parent, partial.type) &&
 							!this.isShapeHidden(parent) &&
+							this.getShapeUtil(parent).canReceiveNewChildrenOfType(parent, partial.type) &&
 							this.isPointInShape(
 								parent,
 								// If no parent is provided, then we can treat the
@@ -7859,7 +7827,7 @@ export class Editor extends EventEmitter<TLEventMap> {
 
 					const prevParentId = partial.parentId
 
-					// a shape cannot be its own parent. This was a rare issue with frames/groups in the syncFuzz tests.
+					// a shape cannot be it's own parent. This was a rare issue with frames/groups in the syncFuzz tests.
 					if (parentId === partial.id) {
 						parentId = focusedGroupId
 					}
@@ -7969,8 +7937,6 @@ export class Editor extends EventEmitter<TLEventMap> {
 				}
 			})
 
-			this.emit('created-shapes', shapeRecordsToCreate)
-			this.emit('edit')
 			this.store.put(shapeRecordsToCreate)
 		})
 
@@ -8365,8 +8331,6 @@ export class Editor extends EventEmitter<TLEventMap> {
 				updates.push(updated)
 			}
 
-			this.emit('edited-shapes', updates)
-			this.emit('edit')
 			this.store.put(updates)
 		})
 	}
@@ -8416,8 +8380,6 @@ export class Editor extends EventEmitter<TLEventMap> {
 			})
 		}
 
-		this.emit('deleted-shapes', [...allShapeIdsToDelete])
-		this.emit('edit')
 		return this.run(() => this.store.remove([...allShapeIdsToDelete]))
 	}
 
@@ -9544,8 +9506,6 @@ export class Editor extends EventEmitter<TLEventMap> {
 			previousPagePoint,
 			currentScreenPoint,
 			currentPagePoint,
-			originScreenPoint,
-			originPagePoint,
 		} = this.inputs
 
 		const { screenBounds } = this.store.unsafeGetWithoutCapture(TLINSTANCE_ID)!
@@ -9574,8 +9534,8 @@ export class Editor extends EventEmitter<TLEventMap> {
 		// Reset velocity on pointer down, or when a pinch starts or ends
 		if (info.name === 'pointer_down' || this.inputs.isPinching) {
 			pointerVelocity.set(0, 0)
-			originScreenPoint.setTo(currentScreenPoint)
-			originPagePoint.setTo(currentPagePoint)
+			this.inputs.originScreenPoint.setTo(currentScreenPoint)
+			this.inputs.originPagePoint.setTo(currentPagePoint)
 		}
 
 		// todo: We only have to do this if there are multiple users in the document

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

@@ -241,9 +241,7 @@ export class HistoryManager<R extends UnknownRecord> {
 	}
 
 	bailToMark(id: string) {
-		if (id) {
-			this._undo({ pushToRedoStack: false, toMark: id })
-		}
+		this._undo({ pushToRedoStack: false, toMark: id })
 
 		return this
 	}

package/src/lib/editor/shapes/ShapeUtil.ts

@@ -4,15 +4,12 @@ import { LegacyMigrations, MigrationSequence } from '@tldraw/store'
 import {
 	RecordProps,
 	TLHandle,
-	TLParentId,
 	TLPropsMigrations,
 	TLShape,
 	TLShapeCrop,
-	TLShapeId,
 	TLShapePartial,
 	TLUnknownShape,
 } from '@tldraw/tlschema'
-import { IndexKey } from '@tldraw/utils'
 import { ReactElement } from 'react'
 import { Box, SelectionHandle } from '../../primitives/Box'
 import { Vec } from '../../primitives/Vec'
@@ -390,6 +387,17 @@ export abstract class ShapeUtil<Shape extends TLUnknownShape = TLUnknownShape> {
 		return false
 	}
 
+	/**
+	 * Get whether the shape can receive children of a given type.
+	 *
+	 * @param shape - The shape type.
+	 * @param shapes - The shapes that are being dropped.
+	 * @public
+	 */
+	canDropShapes(_shape: Shape, _shapes: TLShape[]) {
+		return false
+	}
+
 	/**
 	 * Get the shape as an SVG object.
 	 *
@@ -509,16 +517,7 @@ export abstract class ShapeUtil<Shape extends TLUnknownShape = TLUnknownShape> {
 	): Omit<TLShapePartial<Shape>, 'id' | 'type'> | undefined | void
 
 	/**
-	 * A callback called when some other shapes are dragged into this one. This fires when the shapes are dragged over the shape for the first time.
-	 *
-	 * @param shape - The shape.
-	 * @param shapes - The shapes that are being dragged in.
-	 * @public
-	 */
-	onDragShapesIn?(shape: Shape, shapes: TLShape[], info: TLDragShapesInInfo): void
-
-	/**
-	 * A callback called when some other shapes are dragged over this one. This fires when the shapes are dragged over the shape for the first time (after the onDragShapesIn callback), and again on every update while the shapes are being dragged.
+	 * A callback called when some other shapes are dragged over this one.
 	 *
 	 * @example
 	 *
@@ -532,7 +531,7 @@ export abstract class ShapeUtil<Shape extends TLUnknownShape = TLUnknownShape> {
 	 * @param shapes - The shapes that are being dragged over this one.
 	 * @public
 	 */
-	onDragShapesOver?(shape: Shape, shapes: TLShape[], info: TLDragShapesOverInfo): void
+	onDragShapesOver?(shape: Shape, shapes: TLShape[]): void
 
 	/**
 	 * A callback called when some other shapes are dragged out of this one.
@@ -541,7 +540,7 @@ export abstract class ShapeUtil<Shape extends TLUnknownShape = TLUnknownShape> {
 	 * @param shapes - The shapes that are being dragged out.
 	 * @public
 	 */
-	onDragShapesOut?(shape: Shape, shapes: TLShape[], info: TLDragShapesOutInfo): void
+	onDragShapesOut?(shape: Shape, shapes: TLShape[]): void
 
 	/**
 	 * A callback called when some other shapes are dropped over this one.
@@ -550,7 +549,7 @@ export abstract class ShapeUtil<Shape extends TLUnknownShape = TLUnknownShape> {
 	 * @param shapes - The shapes that are being dropped over this one.
 	 * @public
 	 */
-	onDropShapesOver?(shape: Shape, shapes: TLShape[], info: TLDropShapesOverInfo): void
+	onDropShapesOver?(shape: Shape, shapes: TLShape[]): void
 
 	/**
 	 * A callback called when a shape starts being resized.
@@ -749,36 +748,6 @@ export interface TLCropInfo<T extends TLShape> {
 	aspectRatioLocked?: boolean
 }
 
-/** @public */
-export interface TLDragShapesInInfo {
-	initialDraggingOverShapeId: TLShapeId | null
-	prevDraggingOverShapeId: TLShapeId | null
-	initialParentIds: Map<TLShapeId, TLParentId>
-	initialIndices: Map<TLShapeId, IndexKey>
-}
-
-/** @public */
-export interface TLDragShapesOverInfo {
-	initialDraggingOverShapeId: TLShapeId | null
-	initialParentIds: Map<TLShapeId, TLParentId>
-	initialIndices: Map<TLShapeId, IndexKey>
-}
-
-/** @public */
-export interface TLDragShapesOutInfo {
-	nextDraggingOverShapeId: TLShapeId | null
-	initialDraggingOverShapeId: TLShapeId | null
-	initialParentIds: Map<TLShapeId, TLParentId>
-	initialIndices: Map<TLShapeId, IndexKey>
-}
-
-/** @public */
-export interface TLDropShapesOverInfo {
-	initialDraggingOverShapeId: TLShapeId | null
-	initialParentIds: Map<TLShapeId, TLParentId>
-	initialIndices: Map<TLShapeId, IndexKey>
-}
-
 /**
  * The type of resize.
  *

package/src/lib/editor/tools/BaseBoxShapeTool/children/Pointing.ts

@@ -11,36 +11,29 @@ export class Pointing extends StateNode {
 	static override id = 'pointing'
 
 	override onPointerMove(info: TLPointerEventInfo) {
-		const { editor } = this
-		if (editor.inputs.isDragging) {
-			const { originPagePoint } = editor.inputs
+		if (this.editor.inputs.isDragging) {
+			const { originPagePoint } = this.editor.inputs
 
 			const shapeType = (this.parent as BaseBoxShapeTool)!.shapeType
 
 			const id = createShapeId()
 
-			const creatingMarkId = editor.markHistoryStoppingPoint(`creating_box:${id}`)
-			const newPoint = maybeSnapToGrid(originPagePoint, editor)
-
-			// Allow this to trigger the max shapes reached alert
-			this.editor.createShapes<TLBaseBoxShape>([
-				{
-					id,
-					type: shapeType,
-					x: newPoint.x,
-					y: newPoint.y,
-					props: {
-						w: 1,
-						h: 1,
+			const creatingMarkId = this.editor.markHistoryStoppingPoint(`creating_box:${id}`)
+			const newPoint = maybeSnapToGrid(originPagePoint, this.editor)
+			this.editor
+				.createShapes<TLBaseBoxShape>([
+					{
+						id,
+						type: shapeType,
+						x: newPoint.x,
+						y: newPoint.y,
+						props: {
+							w: 1,
+							h: 1,
+						},
 					},
-				},
-			])
-			const shape = editor.getShape(id)
-			if (!shape) {
-				this.cancel()
-				return
-			}
-			editor.select(id)
+				])
+				.select(id)
 
 			const parent = this.parent as BaseBoxShapeTool
 			this.editor.setCurrentTool(
@@ -86,7 +79,6 @@ export class Pointing extends StateNode {
 
 		this.editor.markHistoryStoppingPoint(`creating_box:${id}`)
 
-		// Allow this to trigger the max shapes reached alert
 		// todo: add scale here when dynamic size is enabled (is this still needed?)
 		this.editor.createShapes<TLBaseBoxShape>([
 			{

package/src/lib/editor/types/emit-types.ts

@@ -18,10 +18,6 @@ export interface TLEventMap {
 	frame: [number]
 	'select-all-text': [{ shapeId: TLShapeId }]
 	'place-caret': [{ shapeId: TLShapeId; point: { x: number; y: number } }]
-	'created-shapes': [TLRecord[]]
-	'edited-shapes': [TLRecord[]]
-	'deleted-shapes': [TLShapeId[]]
-	edit: []
 }
 
 /** @public */

package/src/lib/primitives/geometry/Geometry2d.ts

@@ -44,7 +44,6 @@ export const Geometry2dFilters: {
 /** @public */
 export interface TransformedGeometry2dOptions {
 	isLabel?: boolean
-	isEmptyLabel?: boolean
 	isInternal?: boolean
 	debugColor?: string
 	ignore?: boolean
@@ -58,24 +57,20 @@ export interface Geometry2dOptions extends TransformedGeometry2dOptions {
 
 /** @public */
 export abstract class Geometry2d {
-	// todo: consider making accessors for these too, so that they can be overridden in subclasses by geometries with more complex logic
 	isFilled = false
 	isClosed = true
 	isLabel = false
-	isEmptyLabel = false
 	isInternal = false
 	debugColor?: string
 	ignore?: boolean
 
 	constructor(opts: Geometry2dOptions) {
-		const { isLabel = false, isEmptyLabel = false, isInternal = false } = opts
 		this.isFilled = opts.isFilled
 		this.isClosed = opts.isClosed
+		this.isLabel = opts.isLabel ?? false
+		this.isInternal = opts.isInternal ?? false
 		this.debugColor = opts.debugColor
 		this.ignore = opts.ignore
-		this.isLabel = isLabel
-		this.isEmptyLabel = isEmptyLabel
-		this.isInternal = isInternal
 	}
 
 	isExcludedByFilter(filters?: Geometry2dFilters) {