@tldraw/editor 5.5.0-next.f9308d324e1c → 5.5.0

package/src/lib/editor/Editor.ts

@@ -341,6 +341,11 @@ export interface TLRenderingShape {
 
 const RENDERING_SHAPES_SORT_CACHE_THRESHOLD = 100
 
+const AXIS = {
+	horizontal: { val: 'x', min: 'minX', max: 'maxX', dim: 'width' },
+	vertical: { val: 'y', min: 'minY', max: 'maxY', dim: 'height' },
+} as const
+
 /** @public */
 export class Editor extends EventEmitter<TLEventMap> {
 	readonly id = uniqueId()
@@ -753,7 +758,9 @@ export class Editor extends EventEmitter<TLEventMap> {
 						}
 
 						if (deleteBindingIds.length) {
-							this.deleteBindings(deleteBindingIds)
+							// straight to the store: this cleanup must run even when deleteBindings would
+							// refuse (readonly), e.g. for a deletion that arrived from a remote peer
+							this.store.remove(deleteBindingIds)
 						}
 					},
 				},
@@ -1970,6 +1977,7 @@ export class Editor extends EventEmitter<TLEventMap> {
 	 * @public
 	 **/
 	updateDocumentSettings(settings: Partial<TLDocument>): this {
+		if (this.getIsReadonly()) return this
 		this.run(
 			() => {
 				this.store.put([{ ...this.getDocumentSettings(), ...settings }])
@@ -2005,7 +2013,7 @@ export class Editor extends EventEmitter<TLEventMap> {
 		this._updateInstanceState(partial, { history: 'ignore', ...historyOptions })
 
 		if (partial.isChangingStyle !== undefined) {
-			clearTimeout(this._isChangingStyleTimeout)
+			this.timers.clearTimeout(this._isChangingStyleTimeout)
 			if (partial.isChangingStyle === true) {
 				// If we've set to true, set a new reset timeout to change the value back to false after 1 seconds
 				this._isChangingStyleTimeout = this.timers.setTimeout(() => {
@@ -2197,10 +2205,7 @@ export class Editor extends EventEmitter<TLEventMap> {
 	 * @public
 	 */
 	select(...shapes: TLShapeId[] | TLShape[]): this {
-		const ids =
-			typeof shapes[0] === 'string'
-				? (shapes as TLShapeId[])
-				: (shapes as TLShape[]).map((shape) => shape.id)
+		const ids = toShapeIds(shapes)
 		this.setSelectedShapes(ids)
 		return this
 	}
@@ -2216,10 +2221,7 @@ export class Editor extends EventEmitter<TLEventMap> {
 	 * @public
 	 */
 	deselect(...shapes: TLShapeId[] | TLShape[]): this {
-		const ids =
-			typeof shapes[0] === 'string'
-				? (shapes as TLShapeId[])
-				: (shapes as TLShape[]).map((shape) => shape.id)
+		const ids = toShapeIds(shapes)
 		const selectedShapeIds = this.getSelectedShapeIds()
 		if (selectedShapeIds.length > 0 && ids.length > 0) {
 			this.setSelectedShapes(selectedShapeIds.filter((id) => !ids.includes(id)))
@@ -2264,10 +2266,11 @@ export class Editor extends EventEmitter<TLEventMap> {
 			parentToSelectWithinId = this.getCurrentPageId()
 		}
 
-		// Select all the unlocked shapes within the parent
+		// Select all the unlocked shapes within the parent. Only the shape's own lock matters here:
+		// selecting inside a locked frame or group is allowed, mutating is not.
 		const ids = this.getSortedChildIdsForParent(parentToSelectWithinId)
 		if (ids.length <= 0) return this
-		this.setSelectedShapes(this._getUnlockedShapeIds(ids))
+		this.setSelectedShapes(ids.filter((id) => !this.getShape(id)?.isLocked))
 		return this
 	}
 
@@ -2288,12 +2291,14 @@ export class Editor extends EventEmitter<TLEventMap> {
 			firstParentId &&
 			selectedShapeIds.every((shapeId) => this.getShape(shapeId)?.parentId === firstParentId) &&
 			!isPageId(firstParentId)
-		const filteredShapes = isSelectedWithinContainer
-			? this.getCurrentPageShapes().filter((shape) => shape.parentId === firstParentId)
-			: this.getCurrentPageShapes().filter((shape) => isPageId(shape.parentId))
-		const readingOrderShapes = isSelectedWithinContainer
-			? this._getShapesInReadingOrder(filteredShapes)
-			: this.getCurrentPageShapesInReadingOrder()
+		// Locked shapes (and children of locked containers) can't be selected by clicking or
+		// select all, so traversal skips them too
+		const filteredShapes = this.getCurrentPageShapes().filter(
+			(shape) =>
+				!this.isShapeOrAncestorLocked(shape) &&
+				(isSelectedWithinContainer ? shape.parentId === firstParentId : isPageId(shape.parentId))
+		)
+		const readingOrderShapes = this._getShapesInReadingOrder(filteredShapes)
 		const currentShapeId: TLShapeId | undefined =
 			selectedShapeIds.length === 1
 				? selectedShapeIds[0]
@@ -2302,6 +2307,9 @@ export class Editor extends EventEmitter<TLEventMap> {
 		let adjacentShapeId: TLShapeId
 		if (direction === 'next' || direction === 'prev') {
 			const shapeIds = readingOrderShapes.map((shape) => shape.id)
+			// Every candidate can be filtered out (e.g. a locked shape is selected and nothing
+			// else is unlocked); indexing an empty list would hand getShape undefined
+			if (shapeIds.length === 0) return
 
 			const currentIndex = currentShapeId ? shapeIds.indexOf(currentShapeId) : -1
 			// With no current index, stepping from -1 makes 'prev' land one shape
@@ -2450,8 +2458,9 @@ export class Editor extends EventEmitter<TLEventMap> {
 
 		// Ok, now score that subset of shapes.
 		const lowestScoringShape = minBy(shapesInDirection, ({ center }) => {
-			// Distance is the primary weighting factor.
-			const distance = Vec.Dist2(currentCenter, center)
+			// Linear, not squared: the off-axis and diagonal penalties below are page units too, and
+			// squared distance swamps them, so a nearer diagonal shape beats an aligned one.
+			const distance = Vec.Dist(currentCenter, center)
 
 			// Distance along the primary axis.
 			const dirProp = ['left', 'right'].includes(direction) ? 'x' : 'y'
@@ -2461,9 +2470,11 @@ export class Editor extends EventEmitter<TLEventMap> {
 			const offProp = ['left', 'right'].includes(direction) ? 'y' : 'x'
 			const offAxisDeviation = Math.abs(center[offProp] - currentCenter[offProp])
 
-			// Angle in degrees
-			const angle = Math.abs(Vec.Angle(currentCenter, center) * (180 / Math.PI))
-			const angleDeviation = Math.abs(angle - directionToAngle[direction])
+			// atan2 gives -180..180, so 'up' is -90; normalize to 0..360 to match 270, and wrap the
+			// deviation so that 350 is 10 away from 'right' (0), not 350.
+			const angle = (Vec.Angle(currentCenter, center) * (180 / Math.PI) + 360) % 360
+			const rawAngleDeviation = Math.abs(angle - directionToAngle[direction])
+			const angleDeviation = Math.min(rawAngleDeviation, 360 - rawAngleDeviation)
 
 			// Calculate final score (lower is better).
 			// Weight factors to prioritize:
@@ -2968,10 +2979,7 @@ export class Editor extends EventEmitter<TLEventMap> {
 	 * @public
 	 */
 	setHintingShapes(shapes: TLShapeId[] | TLShape[]): this {
-		const ids =
-			typeof shapes[0] === 'string'
-				? (shapes as TLShapeId[])
-				: (shapes as TLShape[]).map((shape) => shape.id)
+		const ids = toShapeIds(shapes)
 		// always ephemeral
 		this.run(
 			() => {
@@ -3018,10 +3026,7 @@ export class Editor extends EventEmitter<TLEventMap> {
 	 */
 	setErasingShapes(shapes: TLShapeId[] | TLShape[]): this {
 		// copy before sorting: the caller may pass a store-owned (frozen) array
-		const ids =
-			typeof shapes[0] === 'string'
-				? (shapes as TLShapeId[]).slice()
-				: (shapes as TLShape[]).map((shape) => shape.id)
+		const ids = toShapeIds(shapes).slice()
 		ids.sort() // sort the incoming ids
 		const erasingShapeIds = this.getErasingShapeIds()
 		this.run(
@@ -3595,6 +3600,20 @@ export class Editor extends EventEmitter<TLEventMap> {
 		const { isLocked } = this._cameraOptions.__unsafe__getWithoutCapture()
 		if (isLocked && !opts?.force) return this
 
+		// Resolve the zoom before building the Vec: Vec.Cast would default a missing z to 1,
+		// and a missing z should keep the current zoom level instead
+		const _point = new Vec(point.x, point.y, point.z ?? this.getZoomLevel())
+
+		// Reject non-finite values before anything else, so the call is a no-op rather than a
+		// partial one. An animated move writes the camera from a 'tick' listener, and a listener
+		// that throws stops TickManager scheduling the next frame, which kills every frame-driven
+		// behavior for the rest of the session instead of surfacing the error to the caller.
+		if (!Number.isFinite(_point.x) || !Number.isFinite(_point.y) || !Number.isFinite(_point.z)) {
+			throw Error(
+				`Editor.setCamera: expected finite values, got (${_point.x}, ${_point.y}, ${_point.z}).`
+			)
+		}
+
 		// Stop any camera animations
 		this.stopCameraAnimation()
 
@@ -3603,12 +3622,6 @@ export class Editor extends EventEmitter<TLEventMap> {
 			this.stopFollowingUser()
 		}
 
-		const _point = Vec.Cast(point)
-
-		if (!Number.isFinite(_point.x)) _point.x = 0
-		if (!Number.isFinite(_point.y)) _point.y = 0
-		if (_point.z === undefined || !Number.isFinite(_point.z)) point.z = this.getZoomLevel()
-
 		const camera = this.getConstrainedCamera(_point, opts)
 
 		if (opts?.animation) {
@@ -3943,6 +3956,7 @@ export class Editor extends EventEmitter<TLEventMap> {
 		easing(t: number): number
 		start: Box
 		end: Box
+		opts: TLCameraMoveOptions
 	}
 
 	/** @internal */
@@ -3951,12 +3965,17 @@ export class Editor extends EventEmitter<TLEventMap> {
 
 		this._viewportAnimation.elapsed += ms
 
-		const { elapsed, easing, duration, start, end } = this._viewportAnimation
+		const { elapsed, easing, duration, start, end, opts } = this._viewportAnimation
 
 		if (elapsed > duration) {
 			this.off('tick', this._animateViewport)
 			this._viewportAnimation = null
-			this._setCamera(new Vec(-end.x, -end.y, this.getViewportScreenBounds().width / end.width))
+			// Forward the caller's options, otherwise a forced move to a position outside the
+			// constraints animates there and then snaps back on this last frame
+			this._setCamera(
+				new Vec(-end.x, -end.y, this.getViewportScreenBounds().width / end.width),
+				opts
+			)
 			return
 		}
 
@@ -4010,6 +4029,7 @@ export class Editor extends EventEmitter<TLEventMap> {
 			easing,
 			start: viewportPageBounds.clone(),
 			end: targetViewportPage.clone(),
+			opts: rest,
 		}
 
 		// If we ever get a "stop-camera-animation" event, we stop
@@ -4134,6 +4154,7 @@ export class Editor extends EventEmitter<TLEventMap> {
 			// If we're not on the same page, move to the page they're on
 			const isOnSamePage = presence.currentPageId === this.getCurrentPageId()
 			if (!isOnSamePage) {
+				this.markHistoryStoppingPoint('change-page')
 				this.setCurrentPage(presence.currentPageId)
 			}
 
@@ -5231,7 +5252,10 @@ export class Editor extends EventEmitter<TLEventMap> {
 
 		this.run(
 			() => {
-				this.store.props.assets.remove?.(ids)
+				// the asset store's remove is async; surface failures instead of leaving an unhandled rejection
+				Promise.resolve(this.store.props.assets.remove?.(ids)).catch((err) =>
+					console.error('Error while removing assets from the asset store:', err)
+				)
 				this.store.remove(ids)
 			},
 			{ history: 'ignore' }
@@ -5693,10 +5717,7 @@ export class Editor extends EventEmitter<TLEventMap> {
 			return
 		}
 
-		const ids =
-			typeof shapes[0] === 'string'
-				? (shapes as TLShapeId[])
-				: (shapes as TLShape[]).map((s) => s.id)
+		const ids = toShapeIds(shapes)
 		const freshShapes = compact(ids.map((id) => this.getShape(id)))
 
 		if (freshShapes.length === 1) {
@@ -5844,14 +5865,16 @@ export class Editor extends EventEmitter<TLEventMap> {
 	 */
 	getSelectedShapeAtPoint(point: VecLike): TLShape | undefined {
 		const selectedShapeIds = this.getSelectedShapeIds()
-		const margin = this.options.hitTestMargin / this.getZoomLevel()
+		if (selectedShapeIds.length === 0) return undefined
+		const selectedShapeIdSet = new Set(selectedShapeIds)
+		const margin = this.getHitTestMargin()
 		const sortedShapes = this.getCurrentPageShapesSorted()
 
 		// iterate from the top (highest z-index) to find the top-most matching shape
 		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 (!selectedShapeIdSet.has(shape.id)) continue
 			if (
 				this.getShapeGeometry(shape).hitTestPoint(
 					this.getPointInShapeSpace(shape, point),
@@ -6022,9 +6045,6 @@ export class Editor extends EventEmitter<TLEventMap> {
 						// other hits would be occluded by the shape.
 						return inMarginClosestToEdgeHit || shape
 					} else {
-						// If the shape is bigger than the viewport, then skip it.
-						if (this.getShapePageBounds(shape)!.contains(viewportPageBounds)) continue
-
 						// If we're close to the edge of the shape, and if it's the closest edge among
 						// all the edges that we've gotten close to so far, then we will want to hit the
 						// shape unless we hit something else or closer in later iterations.
@@ -6045,6 +6065,10 @@ export class Editor extends EventEmitter<TLEventMap> {
 								inMarginClosestToEdgeHit = shape
 							}
 						} else if (!inMarginClosestToEdgeHit) {
+							// If the shape is bigger than the viewport, then skip it. (Only here: its
+							// edges should still be hittable within the margin.)
+							if (this.getShapePageBounds(shape)!.contains(viewportPageBounds)) continue
+
 							// If we're not within margin distance to any edge, and if the
 							// shape is hollow, then we want to hit the shape with the
 							// smallest area. (There's a bug here with self-intersecting
@@ -6063,6 +6087,11 @@ export class Editor extends EventEmitter<TLEventMap> {
 				// If the distance is less than the margin, return the shape as the hit.
 				// Use the editor's configurable hit test margin.
 				if (distance < this.getHitTestMargin()) {
+					// An edge we already hit (above this shape) that is at least as close still wins,
+					// matching the closest-edge rule used for hollow shapes
+					if (inMarginClosestToEdgeHit && inMarginClosestToEdgeDistance <= distance) {
+						return inMarginClosestToEdgeHit
+					}
 					return shape
 				}
 			}
@@ -6427,8 +6456,7 @@ export class Editor extends EventEmitter<TLEventMap> {
 	 * @public
 	 */
 	reparentShapes(shapes: TLShapeId[] | TLShape[], parentId: TLParentId, insertIndex?: IndexKey) {
-		const ids =
-			typeof shapes[0] === 'string' ? (shapes as TLShapeId[]) : shapes.map((s) => (s as TLShape).id)
+		const ids = toShapeIds(shapes)
 		if (ids.length === 0) return this
 
 		const changes: TLShapePartial[] = []
@@ -6777,6 +6805,8 @@ export class Editor extends EventEmitter<TLEventMap> {
 	 * binding, but the `type`, `toId`, and `fromId` must all be provided.
 	 */
 	createBindings<B extends TLBinding = TLBinding>(partials: TLBindingCreate<B>[]) {
+		if (this.getIsReadonly()) return this
+
 		const bindings: TLBinding[] = []
 		for (const partial of partials) {
 			const fromShape = this.getShape(partial.fromId)
@@ -6816,6 +6846,8 @@ export class Editor extends EventEmitter<TLEventMap> {
 	 * binding is skipped. The changes from the partial are merged into the existing record.
 	 */
 	updateBindings(partials: (TLBindingUpdate | null | undefined)[]) {
+		if (this.getIsReadonly()) return this
+
 		const updated: TLBinding[] = []
 
 		for (const partial of partials) {
@@ -6853,6 +6885,17 @@ export class Editor extends EventEmitter<TLEventMap> {
 	 * Delete several bindings by their IDs. If a binding ID doesn't exist, it's ignored.
 	 */
 	deleteBindings(bindings: (TLBinding | TLBindingId)[], { isolateShapes = false } = {}) {
+		if (this.getIsReadonly()) return this
+		return this._deleteBindings(bindings, { isolateShapes })
+	}
+
+	/**
+	 * Unguarded so that withIsolatedShapes can transiently isolate shapes for copy and export in
+	 * readonly mode; the public deleteBindings is what readonly blocks.
+	 *
+	 * @internal
+	 */
+	_deleteBindings(bindings: (TLBinding | TLBindingId)[], { isolateShapes = false } = {}) {
 		const ids = bindings.map((binding) => (typeof binding === 'string' ? binding : binding.id))
 		if (isolateShapes) {
 			this.store.atomic(() => {
@@ -6927,10 +6970,7 @@ export class Editor extends EventEmitter<TLEventMap> {
 		delta: number,
 		opts?: { center?: VecLike }
 	): this {
-		const ids =
-			typeof shapes[0] === 'string'
-				? (shapes as TLShapeId[])
-				: (shapes as TLShape[]).map((s) => s.id)
+		const ids = toShapeIds(shapes)
 
 		if (ids.length <= 0) return this
 
@@ -6977,6 +7017,15 @@ export class Editor extends EventEmitter<TLEventMap> {
 		return workingShape
 	}
 
+	// Counter-rotates the page-space delta into the parent's space; without that a child of a rotated
+	// frame or group would move along its parent's axes instead of the page's.
+	// todo: a shape laid out together with its own parent moves twice, once with the parent and once
+	// on its own; the layout commands should skip shapes whose ancestors are also being laid out
+	private getChangesToTranslateShapeByPageDelta(shape: TLShape, pageDelta: VecLike): TLShape {
+		const localDelta = Vec.From(pageDelta).rot(-this.getShapeParentTransform(shape).rotation())
+		return this.getChangesToTranslateShape(shape, localDelta.add(shape))
+	}
+
 	/**
 	 * Move shapes by a delta.
 	 *
@@ -6989,20 +7038,14 @@ export class Editor extends EventEmitter<TLEventMap> {
 	 * @param offset - The offset to apply to the shapes.
 	 */
 	nudgeShapes(shapes: TLShapeId[] | TLShape[], offset: VecLike): this {
-		const ids =
-			typeof shapes[0] === 'string'
-				? (shapes as TLShapeId[])
-				: (shapes as TLShape[]).map((s) => s.id)
+		const ids = toShapeIds(shapes)
 
 		if (ids.length <= 0) return this
 		const changes: TLShapePartial[] = []
 
 		for (const id of ids) {
 			const shape = this.getShape(id)!
-			const localDelta = Vec.From(offset)
-			localDelta.rot(-this.getShapeParentTransform(shape).rotation())
-
-			changes.push(this.getChangesToTranslateShape(shape, localDelta.add(shape)))
+			changes.push(this.getChangesToTranslateShapeByPageDelta(shape, offset))
 		}
 
 		this.updateShapes(changes)
@@ -7026,10 +7069,7 @@ export class Editor extends EventEmitter<TLEventMap> {
 	 */
 	duplicateShapes(shapes: TLShapeId[] | TLShape[], offset?: VecLike): this {
 		this.run(() => {
-			const _ids =
-				typeof shapes[0] === 'string'
-					? (shapes as TLShapeId[])
-					: (shapes as TLShape[]).map((s) => s.id)
+			const _ids = toShapeIds(shapes)
 
 			const ids = this._shouldIgnoreShapeLock ? _ids : this._getUnlockedShapeIds(_ids)
 			if (ids.length <= 0) return this
@@ -7171,10 +7211,7 @@ export class Editor extends EventEmitter<TLEventMap> {
 	 * @public
 	 */
 	moveShapesToPage(shapes: TLShapeId[] | TLShape[], pageId: TLPageId): this {
-		const ids =
-			typeof shapes[0] === 'string'
-				? (shapes as TLShapeId[])
-				: (shapes as TLShape[]).map((s) => s.id)
+		const ids = toShapeIds(shapes)
 
 		if (ids.length === 0) return this
 		if (this.getIsReadonly()) return this
@@ -7235,10 +7272,7 @@ export class Editor extends EventEmitter<TLEventMap> {
 	 * @public
 	 */
 	toggleLock(shapes: TLShapeId[] | TLShape[]): this {
-		const ids =
-			typeof shapes[0] === 'string'
-				? (shapes as TLShapeId[])
-				: (shapes as TLShape[]).map((s) => s.id)
+		const ids = toShapeIds(shapes)
 
 		if (this.getIsReadonly() || ids.length === 0) return this
 
@@ -7281,11 +7315,8 @@ export class Editor extends EventEmitter<TLEventMap> {
 	 * @public
 	 */
 	sendToBack(shapes: TLShapeId[] | TLShape[]): this {
-		const ids =
-			typeof shapes[0] === 'string'
-				? (shapes as TLShapeId[])
-				: (shapes as TLShape[]).map((s) => s.id)
-		const changes = getReorderingShapesChanges(this, 'toBack', ids as TLShapeId[], {
+		const ids = toShapeIds(shapes)
+		const changes = getReorderingShapesChanges(this, 'toBack', ids, {
 			considerAllShapes: true,
 		})
 		if (changes) this.updateShapes(changes)
@@ -7315,11 +7346,8 @@ export class Editor extends EventEmitter<TLEventMap> {
 	 * @public
 	 */
 	sendBackward(shapes: TLShapeId[] | TLShape[], opts: { considerAllShapes?: boolean } = {}): this {
-		const ids =
-			typeof shapes[0] === 'string'
-				? (shapes as TLShapeId[])
-				: (shapes as TLShape[]).map((s) => s.id)
-		const changes = getReorderingShapesChanges(this, 'backward', ids as TLShapeId[], opts)
+		const ids = toShapeIds(shapes)
+		const changes = getReorderingShapesChanges(this, 'backward', ids, opts)
 		if (changes) this.updateShapes(changes)
 		return this
 	}
@@ -7347,11 +7375,8 @@ export class Editor extends EventEmitter<TLEventMap> {
 	 * @public
 	 */
 	bringForward(shapes: TLShapeId[] | TLShape[], opts: { considerAllShapes?: boolean } = {}): this {
-		const ids =
-			typeof shapes[0] === 'string'
-				? (shapes as TLShapeId[])
-				: (shapes as TLShape[]).map((s) => s.id)
-		const changes = getReorderingShapesChanges(this, 'forward', ids as TLShapeId[], opts)
+		const ids = toShapeIds(shapes)
+		const changes = getReorderingShapesChanges(this, 'forward', ids, opts)
 		if (changes) this.updateShapes(changes)
 		return this
 	}
@@ -7370,11 +7395,8 @@ export class Editor extends EventEmitter<TLEventMap> {
 	 * @public
 	 */
 	bringToFront(shapes: TLShapeId[] | TLShape[]): this {
-		const ids =
-			typeof shapes[0] === 'string'
-				? (shapes as TLShapeId[])
-				: (shapes as TLShape[]).map((s) => s.id)
-		const changes = getReorderingShapesChanges(this, 'toFront', ids as TLShapeId[])
+		const ids = toShapeIds(shapes)
+		const changes = getReorderingShapesChanges(this, 'toFront', ids)
 		if (changes) this.updateShapes(changes)
 		return this
 	}
@@ -7390,10 +7412,7 @@ export class Editor extends EventEmitter<TLEventMap> {
 		type: TLShapeUtilCanBeLaidOutOpts['type'],
 		opts?: { filterAxisAligned?: boolean }
 	): { clusters: { shapes: TLShape[]; pageBounds: Box }[]; allBounds: Box[] } {
-		const ids =
-			typeof shapes[0] === 'string'
-				? (shapes as TLShapeId[])
-				: (shapes as TLShape[]).map((s) => s.id)
+		const ids = toShapeIds(shapes)
 
 		// always fresh shapes
 		let freshShapes = compact(ids.map((id) => this.getShape(id)))
@@ -7431,8 +7450,10 @@ export class Editor extends EventEmitter<TLEventMap> {
 			const shapesMovingTogether = [shape]
 			const boundsOfShapesMovingTogether: Box[] = [shapePageBounds]
 
+			// Seed with bindings in both directions, otherwise an arrow visited before the shapes it
+			// binds ends up in a cluster of its own and the result depends on input order
 			this.collectShapesViaArrowBindings({
-				bindings: this.getBindingsToShape(shape.id, 'arrow'),
+				bindings: this.getBindingsInvolvingShape(shape.id, 'arrow'),
 				initialShapes: freshShapes,
 				resultShapes: shapesMovingTogether,
 				resultBounds: boundsOfShapesMovingTogether,
@@ -7501,10 +7522,7 @@ export class Editor extends EventEmitter<TLEventMap> {
 	flipShapes(shapes: TLShapeId[] | TLShape[], operation: 'horizontal' | 'vertical'): this {
 		if (this.getIsReadonly()) return this
 
-		const ids =
-			typeof shapes[0] === 'string'
-				? (shapes as TLShapeId[])
-				: (shapes as TLShape[]).map((s) => s.id)
+		const ids = toShapeIds(shapes)
 
 		// Collect a greedy list of shapes to flip
 		const shapesToFlipFirstPass = compact(ids.map((id) => this.getShape(id)))
@@ -7607,22 +7625,7 @@ export class Editor extends EventEmitter<TLEventMap> {
 		const len = shapeClustersToStack.length
 		if ((_gap === 0 && len < 3) || len < 2) return this
 
-		let val: 'x' | 'y'
-		let min: 'minX' | 'minY'
-		let max: 'maxX' | 'maxY'
-		let dim: 'width' | 'height'
-
-		if (operation === 'horizontal') {
-			val = 'x'
-			min = 'minX'
-			max = 'maxX'
-			dim = 'width'
-		} else {
-			val = 'y'
-			min = 'minY'
-			max = 'maxY'
-			dim = 'height'
-		}
+		const { val, min, max, dim } = AXIS[operation]
 
 		let shapeGap: number = 0
 
@@ -7680,17 +7683,7 @@ export class Editor extends EventEmitter<TLEventMap> {
 			delta[val] = v + shapeGap - pageBounds[val]
 
 			for (const shape of shapes) {
-				const shapeDelta = delta.clone()
-
-				// If the shape has another shape as its parent, and if the parent has a rotation, we need to rotate the counter-rotate delta
-				// todo: ensure that the parent isn't being aligned together with its children
-				const parent = this.getShapeParent(shape)
-				if (parent) {
-					shapeDelta.rot(-this.getShapePageTransform(parent).rotation())
-				}
-
-				shapeDelta.add(shape) // add the shape's x and y to the delta
-				changes.push(this.getChangesToTranslateShape(shape, shapeDelta))
+				changes.push(this.getChangesToTranslateShapeByPageDelta(shape, delta))
 			}
 
 			v += pageBounds[dim] + shapeGap
@@ -7806,15 +7799,7 @@ export class Editor extends EventEmitter<TLEventMap> {
 			const delta = Vec.Sub(nextPageBounds.point, pageBounds.point).add(centerDelta)
 
 			for (const shape of shapes) {
-				const shapeDelta = delta.clone()
-
-				const parent = this.getShapeParent(shape)
-				if (parent) {
-					shapeDelta.rot(-this.getShapeParentTransform(shape).rotation())
-				}
-
-				shapeDelta.add(shape)
-				changes.push(this.getChangesToTranslateShape(shape, shapeDelta))
+				changes.push(this.getChangesToTranslateShapeByPageDelta(shape, delta))
 			}
 		}
 
@@ -7894,17 +7879,7 @@ export class Editor extends EventEmitter<TLEventMap> {
 			}
 
 			for (const shape of shapes) {
-				const shapeDelta = delta.clone()
-
-				// If the shape has another shape as its parent, and if the parent has a rotation, we need to rotate the counter-rotate delta
-				// todo: ensure that the parent isn't being aligned together with its children
-				const parent = this.getShapeParent(shape)
-				if (parent) {
-					shapeDelta.rot(-this.getShapePageTransform(parent).rotation())
-				}
-
-				shapeDelta.add(shape) // add the shape's x and y to the delta
-				changes.push(this.getChangesToTranslateShape(shape, shapeDelta))
+				changes.push(this.getChangesToTranslateShapeByPageDelta(shape, delta))
 			}
 		})
 
@@ -7933,22 +7908,7 @@ export class Editor extends EventEmitter<TLEventMap> {
 
 		if (shapeClustersToDistribute.length < 3) return this
 
-		let val: 'x' | 'y'
-		let min: 'minX' | 'minY'
-		let max: 'maxX' | 'maxY'
-		let dim: 'width' | 'height'
-
-		if (operation === 'horizontal') {
-			val = 'x'
-			min = 'minX'
-			max = 'maxX'
-			dim = 'width'
-		} else {
-			val = 'y'
-			min = 'minY'
-			max = 'maxY'
-			dim = 'height'
-		}
+		const { val, min, max, dim } = AXIS[operation]
 		const changes: TLShapePartial[] = []
 
 		const first = shapeClustersToDistribute.sort((a, b) => a.pageBounds[min] - b.pageBounds[min])[0]
@@ -7957,10 +7917,7 @@ export class Editor extends EventEmitter<TLEventMap> {
 		// If the first shape group is also the last shape group, distribute without it
 		if (first === last) {
 			const excludedShapeIds = new Set(first.shapes.map((s) => s.id))
-			const ids =
-				typeof shapes[0] === 'string'
-					? (shapes as TLShapeId[])
-					: (shapes as TLShape[]).map((s) => s.id)
+			const ids = toShapeIds(shapes)
 			return this.distributeShapes(
 				ids.filter((id) => !excludedShapeIds.has(id)),
 				operation
@@ -7994,17 +7951,7 @@ export class Editor extends EventEmitter<TLEventMap> {
 			}
 
 			for (const shape of shapes) {
-				const shapeDelta = delta.clone()
-
-				// If the shape has another shape as its parent, and if the parent has a rotation, we need to rotate the counter-rotate delta
-				// todo: ensure that the parent isn't being aligned together with its children
-				const parent = this.getShapeParent(shape)
-				if (parent) {
-					shapeDelta.rot(-this.getShapePageTransform(parent).rotation())
-				}
-
-				shapeDelta.add(shape) // add the shape's x and y to the delta
-				changes.push(this.getChangesToTranslateShape(shape, shapeDelta))
+				changes.push(this.getChangesToTranslateShapeByPageDelta(shape, delta))
 			}
 
 			v += pageBounds[dim] + gap
@@ -8040,24 +7987,12 @@ export class Editor extends EventEmitter<TLEventMap> {
 		if (shapeClustersToStretch.length < 2) return this
 
 		const commonBounds = Box.Common(allBounds)
-		let val: 'x' | 'y'
-		let min: 'minX' | 'minY'
-		let dim: 'width' | 'height'
-
-		if (operation === 'horizontal') {
-			val = 'x'
-			min = 'minX'
-			dim = 'width'
-		} else {
-			val = 'y'
-			min = 'minY'
-			dim = 'height'
-		}
+		const { val, min, dim } = AXIS[operation]
 
 		this.run(() => {
 			shapeClustersToStretch.forEach(({ shapes, pageBounds }) => {
-				const localOffset = new Vec()
-				localOffset[val] = commonBounds[min] - pageBounds[min]
+				const pageOffset = new Vec()
+				pageOffset[val] = commonBounds[min] - pageBounds[min]
 
 				const scaleOrigin = pageBounds.center.clone()
 				scaleOrigin[val] = commonBounds[min]
@@ -8067,11 +8002,7 @@ export class Editor extends EventEmitter<TLEventMap> {
 
 				for (const shape of shapes) {
 					// First translate
-					const shapeLocalOffset = localOffset.clone()
-					shapeLocalOffset.rot(-this.getShapeParentTransform(shape).rotation())
-					shapeLocalOffset.add(shape)
-					const changes = this.getChangesToTranslateShape(shape, shapeLocalOffset)
-					this.updateShape(changes)
+					this.updateShape(this.getChangesToTranslateShapeByPageDelta(shape, pageOffset))
 
 					// Then resize
 					this.resizeShape(shape.id, scale, {
@@ -8124,7 +8055,7 @@ export class Editor extends EventEmitter<TLEventMap> {
 		const scale = new Vec(scaleX, scaleY)
 
 		shapeClusters.forEach(({ shapes, pageBounds }) => {
-			const localOffset = new Vec(
+			const pageOffset = new Vec(
 				targetBounds.minX -
 					commonBounds.minX +
 					(pageBounds.minX - commonBounds.minX) * (scaleX - 1),
@@ -8138,11 +8069,7 @@ export class Editor extends EventEmitter<TLEventMap> {
 
 			for (const shape of shapes) {
 				// First translate
-				const shapeLocalOffset = localOffset.clone()
-				shapeLocalOffset.rot(-this.getShapeParentTransform(shape).rotation())
-				shapeLocalOffset.add(shape)
-				const changes = this.getChangesToTranslateShape(shape, shapeLocalOffset)
-				this.updateShape(changes)
+				this.updateShape(this.getChangesToTranslateShapeByPageDelta(shape, pageOffset))
 
 				// Then resize
 				this.resizeShape(shape.id, scale, {
@@ -8787,6 +8714,11 @@ export class Editor extends EventEmitter<TLEventMap> {
 
 		const animations: ShapeAnimation[] = []
 
+		// Snapshot the lock override now: when this animation is started inside
+		// editor.run(..., { ignoreShapeLock: true }), run() restores the flag before any tick
+		// fires, so the final updateShapes below would refuse the locked shape and strand it
+		const ignoreShapeLock = this._shouldIgnoreShapeLock
+
 		let partial: TLShapePartial | null | undefined, result: ShapeAnimation
 		for (let i = 0, n = partials.length; i < n; i++) {
 			partial = partials[i]
@@ -8795,6 +8727,14 @@ export class Editor extends EventEmitter<TLEventMap> {
 			const shape = this.getShape(partial.id)!
 			if (!shape) continue
 
+			// Apply the same lock rule as updateShapes up front: the intermediate frames go through
+			// _updateShapes, which doesn't check locks, so a locked shape would otherwise be moved by
+			// every frame but the last and end up stranded at the penultimate one
+			const unlocks = shape.isLocked && Object.hasOwn(partial, 'isLocked') && !partial.isLocked
+			if (!ignoreShapeLock && !unlocks && this.isShapeOrAncestorLocked(shape)) {
+				continue
+			}
+
 			result = {
 				start: structuredClone(shape),
 				end: applyPartialToRecordWithProps(structuredClone(shape), partial),
@@ -8815,7 +8755,7 @@ export class Editor extends EventEmitter<TLEventMap> {
 				if (partialsToUpdate.length) {
 					// the regular update shapes also removes the shape from
 					// the animating shapes set
-					this.updateShapes(partialsToUpdate)
+					this.run(() => this.updateShapes(partialsToUpdate), { ignoreShapeLock })
 				}
 
 				this.off('tick', handleTick)
@@ -8882,18 +8822,16 @@ export class Editor extends EventEmitter<TLEventMap> {
 		}
 		if (this.getIsReadonly()) return this
 
-		const ids =
-			typeof shapes[0] === 'string'
-				? (shapes as TLShapeId[])
-				: (shapes.map((s) => (s as TLShape).id) as TLShapeId[])
-
-		if (ids.length <= 1) return this
+		const ids = toShapeIds(shapes)
 
 		const shapesToGroup = compact(
 			(this._shouldIgnoreShapeLock ? ids : this._getUnlockedShapeIds(ids)).map((id) =>
 				this.getShape(id)
 			)
 		)
+		// Re-check after the lock filter: Box.Common of nothing is not a valid box and would throw
+		if (shapesToGroup.length <= 1) return this
+
 		const sortedShapeIds = shapesToGroup.sort(sortByIndex).map((s) => s.id)
 		const childBounds = compact(shapesToGroup.map((shape) => this.getShapePageBounds(shape)))
 		const pageBounds = Box.Common(childBounds)
@@ -8906,11 +8844,15 @@ export class Editor extends EventEmitter<TLEventMap> {
 
 		const parentId = this.findCommonAncestor(shapesToGroup) ?? this.getCurrentPageId()
 
-		// Only group when the select tool is active
-		if (this.getCurrentToolId() !== 'select') return this
+		// createShapes bails out when the page is full, so check first; otherwise the shapes get
+		// reparented into a group that was never created and vanish from the page
+		if (!this.canCreateShapes([groupId])) {
+			alertMaxShapes(this)
+			return this
+		}
 
-		// If not already in idle, cancel the current interaction (get back to idle)
-		if (!this.isIn('select.idle')) {
+		// If the select tool is mid-interaction, cancel it (get back to idle) before grouping
+		if (this.isIn('select') && !this.isIn('select.idle')) {
 			this.cancel()
 		}
 
@@ -8964,10 +8906,7 @@ export class Editor extends EventEmitter<TLEventMap> {
 		if (this.getIsReadonly()) return this
 
 		const { select = true } = opts
-		const ids =
-			typeof shapes[0] === 'string'
-				? (shapes as TLShapeId[])
-				: (shapes as TLShape[]).map((s) => s.id)
+		const ids = toShapeIds(shapes)
 
 		const shapesToUngroup = compact(
 			(this._shouldIgnoreShapeLock ? ids : this._getUnlockedShapeIds(ids)).map((id) =>
@@ -8977,9 +8916,8 @@ export class Editor extends EventEmitter<TLEventMap> {
 
 		if (shapesToUngroup.length === 0) return this
 
-		// todo: the editor shouldn't know about the select tool, move to group / ungroup actions
-		if (this.getCurrentToolId() !== 'select') return this
-		if (!this.isIn('select.idle')) {
+		// If the select tool is mid-interaction, cancel it (get back to idle) before ungrouping
+		if (this.isIn('select') && !this.isIn('select.idle')) {
 			this.cancel()
 		}
 
@@ -9002,10 +8940,12 @@ export class Editor extends EventEmitter<TLEventMap> {
 		if (groups.length === 0) return this
 
 		this.run(() => {
-			let group: TLGroupShape
-
 			for (let i = 0, n = groups.length; i < n; i++) {
-				group = groups[i]
+				// Re-read the group: ungrouping an outer group earlier in this loop reparents the
+				// inner ones, and the stale parentId would send their children into a group that's
+				// about to be deleted
+				const group = this.getShape<TLGroupShape>(groups[i].id)
+				if (!group) continue
 				const childIds = this.getSortedChildIdsForParent(group.id)
 
 				for (let j = 0, n = childIds.length; j < n; j++) {
@@ -9132,7 +9072,9 @@ export class Editor extends EventEmitter<TLEventMap> {
 
 	/** @internal */
 	private _getUnlockedShapeIds(ids: TLShapeId[]): TLShapeId[] {
-		return ids.filter((id) => !this.getShape(id)?.isLocked)
+		// Match updateShapes, which also refuses shapes under a locked ancestor; otherwise a child
+		// of a locked frame can't be moved but can still be deleted or duplicated
+		return ids.filter((id) => !this.isShapeOrAncestorLocked(id))
 	}
 
 	/**
@@ -9156,8 +9098,7 @@ export class Editor extends EventEmitter<TLEventMap> {
 			throw Error('Editor.deleteShapes: must provide an array of shapes or shapeIds')
 		}
 
-		const shapeIds =
-			typeof _ids[0] === 'string' ? (_ids as TLShapeId[]) : (_ids as TLShape[]).map((s) => s.id)
+		const shapeIds = toShapeIds(_ids)
 
 		// Normally we don't want to delete locked shapes, but if the force option is set, we'll delete them anyway
 		const shapeIdsToDelete = this._shouldIgnoreShapeLock
@@ -9631,10 +9572,7 @@ export class Editor extends EventEmitter<TLEventMap> {
 	 */
 	getContentFromCurrentPage(shapes: TLShapeId[] | TLShape[]): TLContent | undefined {
 		// todo: make this work with any page, not just the current page
-		const ids =
-			typeof shapes[0] === 'string'
-				? (shapes as TLShapeId[])
-				: (shapes as TLShape[]).map((s) => s.id)
+		const ids = toShapeIds(shapes)
 
 		if (!ids) return
 		if (ids.length === 0) return
@@ -9721,21 +9659,34 @@ export class Editor extends EventEmitter<TLEventMap> {
 					!asset.props.src?.startsWith('data:video') &&
 					!asset.props.src?.startsWith('http')
 				) {
-					const assetWithDataUrl = structuredClone(asset as TLImageAsset | TLVideoAsset)
-					const objectUrl = await this.store.props.assets.resolve(asset, {
-						screenScale: 1,
-						steppedScreenScale: 1,
-						dpr: 1,
-						networkEffectiveType: null,
-						shouldResolveToOriginal: true,
-					})
-					assetWithDataUrl.props.src = await FileHelpers.blobToDataUrl(
-						await fetch(objectUrl!).then((r) => r.blob())
-					)
-					assets.push(assetWithDataUrl)
-				} else {
-					assets.push(asset)
+					// If the asset can't be inlined (unresolvable src, fetch failure), fall through and
+					// keep the original record; dropping it leaves the pasted shapes pointing at an
+					// asset that doesn't exist
+					try {
+						const objectUrl = await this.store.props.assets.resolve(asset, {
+							screenScale: 1,
+							steppedScreenScale: 1,
+							dpr: 1,
+							networkEffectiveType: null,
+							shouldResolveToOriginal: true,
+						})
+						if (objectUrl) {
+							// fetch resolves on 4xx/5xx, so without this check a 404 error page would be
+							// inlined as a data:text/html src
+							const response = await fetch(objectUrl)
+							if (response.ok) {
+								const assetWithDataUrl = structuredClone(asset as TLImageAsset | TLVideoAsset)
+								assetWithDataUrl.props.src = await FileHelpers.blobToDataUrl(await response.blob())
+								assets.push(assetWithDataUrl)
+								return
+							}
+							console.warn(`Could not inline asset ${asset.id}: fetch returned ${response.status}`)
+						}
+					} catch (err) {
+						console.warn(`Could not inline asset ${asset.id}`, err)
+					}
 				}
+				assets.push(asset)
 			})
 		)
 		content.assets = assets
@@ -10157,12 +10108,7 @@ export class Editor extends EventEmitter<TLEventMap> {
 	 * @public
 	 */
 	async getSvgElement(shapes: TLShapeId[] | TLShape[], opts: TLSvgExportOptions = {}) {
-		const ids =
-			shapes.length === 0
-				? this.getCurrentPageShapeIdsSorted()
-				: typeof shapes[0] === 'string'
-					? (shapes as TLShapeId[])
-					: (shapes as TLShape[]).map((s) => s.id)
+		const ids = shapes.length === 0 ? this.getCurrentPageShapeIdsSorted() : toShapeIds(shapes)
 
 		if (ids.length === 0) return undefined
 
@@ -10851,22 +10797,22 @@ export class Editor extends EventEmitter<TLEventMap> {
 		const releaseMeta = this._metaKeyTimeout !== -1
 
 		if (releaseShift) {
-			clearTimeout(this._shiftKeyTimeout)
+			this.timers.clearTimeout(this._shiftKeyTimeout)
 			this._shiftKeyTimeout = -1
 			this.inputs.setShiftKey(false)
 		}
 		if (releaseAlt) {
-			clearTimeout(this._altKeyTimeout)
+			this.timers.clearTimeout(this._altKeyTimeout)
 			this._altKeyTimeout = -1
 			this.inputs.setAltKey(false)
 		}
 		if (releaseCtrl) {
-			clearTimeout(this._ctrlKeyTimeout)
+			this.timers.clearTimeout(this._ctrlKeyTimeout)
 			this._ctrlKeyTimeout = -1
 			this.inputs.setCtrlKey(false)
 		}
 		if (releaseMeta) {
-			clearTimeout(this._metaKeyTimeout)
+			this.timers.clearTimeout(this._metaKeyTimeout)
 			this._metaKeyTimeout = -1
 			this.inputs.setMetaKey(false)
 		}
@@ -11016,7 +10962,7 @@ export class Editor extends EventEmitter<TLEventMap> {
 		}
 
 		if (info.shiftKey) {
-			clearTimeout(this._shiftKeyTimeout)
+			this.timers.clearTimeout(this._shiftKeyTimeout)
 			this._shiftKeyTimeout = -1
 			inputs.setShiftKey(true)
 		} else if (!info.shiftKey && inputs.getShiftKey() && this._shiftKeyTimeout === -1) {
@@ -11024,7 +10970,7 @@ export class Editor extends EventEmitter<TLEventMap> {
 		}
 
 		if (info.altKey) {
-			clearTimeout(this._altKeyTimeout)
+			this.timers.clearTimeout(this._altKeyTimeout)
 			this._altKeyTimeout = -1
 			inputs.setAltKey(true)
 		} else if (!info.altKey && inputs.getAltKey() && this._altKeyTimeout === -1) {
@@ -11032,7 +10978,7 @@ export class Editor extends EventEmitter<TLEventMap> {
 		}
 
 		if (info.ctrlKey) {
-			clearTimeout(this._ctrlKeyTimeout)
+			this.timers.clearTimeout(this._ctrlKeyTimeout)
 			this._ctrlKeyTimeout = -1
 			inputs.setCtrlKey(true)
 		} else if (!info.ctrlKey && inputs.getCtrlKey() && this._ctrlKeyTimeout === -1) {
@@ -11042,7 +10988,7 @@ export class Editor extends EventEmitter<TLEventMap> {
 		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.timers.clearTimeout(this._metaKeyTimeout)
 			this._metaKeyTimeout = -1
 			inputs.setMetaKey(true)
 		} else if (!info.metaKey && inputs.getMetaKey() && this._metaKeyTimeout === -1) {
@@ -11059,8 +11005,7 @@ export class Editor extends EventEmitter<TLEventMap> {
 
 		switch (type) {
 			case 'pinch': {
-				if (cameraOptions.isLocked) return
-				clearTimeout(this._longPressTimeout)
+				this.timers.clearTimeout(this._longPressTimeout)
 				this.inputs.updateFromEvent(info)
 
 				switch (info.name) {
@@ -11097,6 +11042,9 @@ export class Editor extends EventEmitter<TLEventMap> {
 					}
 					case 'pinch': {
 						if (!inputs.getIsPinching()) return
+						// Lock the zoom, not the gesture: skipping pinch_start would send the fingers'
+						// pointer events to the tool, and skipping pinch_end would leave isPinching stuck.
+						if (cameraOptions.isLocked) return
 
 						const {
 							point: { z = 1 },
@@ -11170,8 +11118,9 @@ export class Editor extends EventEmitter<TLEventMap> {
 				let wheelBehavior = cameraOptions.wheelBehavior
 				const inputMode = this.user.getUserPreferences().inputMode
 
-				// If the user has set their input mode preference, then use that to determine the wheel behavior
-				if (inputMode !== null) {
+				// The user's input mode preference picks between pan and zoom, but it must not
+				// re-enable a wheel the app disabled with `wheelBehavior: 'none'`.
+				if (inputMode !== null && wheelBehavior !== 'none') {
 					wheelBehavior = inputMode === 'trackpad' ? 'pan' : 'zoom'
 				}
 
@@ -11245,15 +11194,18 @@ export class Editor extends EventEmitter<TLEventMap> {
 				// Ignore pointer events while we're pinching
 				if (inputs.getIsPinching()) return
 
-				this.inputs.updateFromEvent(info)
 				const { isPen } = info
 				const { isPenMode } = instanceState
 
+				// In pen mode, reject non-pen input (a resting palm) before it touches any
+				// state: otherwise updateFromEvent moves the origin point out from under the
+				// pen's drag, and a palm pointer_up clears the pen's isPointing/isDragging.
+				if (isPenMode && !isPen) return
+
+				this.inputs.updateFromEvent(info)
+
 				switch (info.name) {
 					case 'pointer_down': {
-						// If we're in pen mode and the input is not a pen type, then stop here
-						if (isPenMode && !isPen) return
-
 						// A pointer down starts a new interaction, so flush any modifier that's
 						// still lingering in its release-debounce window: treat it as released now.
 						this._releaseDebouncedModifiers()
@@ -11295,6 +11247,10 @@ export class Editor extends EventEmitter<TLEventMap> {
 						inputs.setIsPointing(true)
 						inputs.setIsDragging(false)
 
+						// A camera still animating under a held pointer would shift the page
+						// point past the drag threshold and turn a click into a drag (#10706)
+						this.stopCameraAnimation()
+
 						// If pen mode is off, turn it on for direct-display pen input only (e.g. Apple
 						// Pencil on an iPad or a Surface Pen on a touchscreen). Indirect desktop tablet
 						// styluses still draw as pens, but should not auto-enable pen mode.
@@ -11305,8 +11261,10 @@ export class Editor extends EventEmitter<TLEventMap> {
 							this.interrupt()
 						}
 
-						// On devices with erasers (like the Surface Pen or Wacom Pen), button 5 is the eraser
-						if (info.button === STYLUS_ERASER_BUTTON) {
+						// On devices with erasers (like the Surface Pen or Wacom Pen), button 5 is the eraser.
+						// Guarded on the eraser tool existing: the bare editor can be configured without
+						// it, and an unguarded transition would throw and crash the editor.
+						if (info.button === STYLUS_ERASER_BUTTON && this.getStateDescendant('eraser')) {
 							this._restoreToolId = this.getCurrentToolId()
 							this.complete()
 							this.setCurrentTool('eraser')
@@ -11316,10 +11274,10 @@ export class Editor extends EventEmitter<TLEventMap> {
 								this._prevCursor = this.getInstanceState().cursor.type
 							}
 							this.inputs.setIsPanning(true)
-							clearTimeout(this._longPressTimeout)
+							this.timers.clearTimeout(this._longPressTimeout)
 						} else if (info.button === RIGHT_MOUSE_BUTTON && this.options.rightClickPanning) {
 							this.inputs.setIsRightPointing(true)
-							clearTimeout(this._longPressTimeout)
+							this.timers.clearTimeout(this._longPressTimeout)
 							return this
 						}
 
@@ -11334,9 +11292,6 @@ export class Editor extends EventEmitter<TLEventMap> {
 						break
 					}
 					case 'pointer_move': {
-						// If the user is in pen mode, but the pointer is not a pen, stop here.
-						if (!isPen && isPenMode) return
-
 						const { x: cx, y: cy, z: cz } = unsafe__withoutCapture(() => this.getCamera())
 
 						// Right-click pointing: waiting to see if this becomes a drag
@@ -11387,7 +11342,7 @@ export class Editor extends EventEmitter<TLEventMap> {
 						) {
 							// Start dragging
 							inputs.setIsDragging(true)
-							clearTimeout(this._longPressTimeout)
+							this.timers.clearTimeout(this._longPressTimeout)
 						}
 						break
 					}
@@ -11395,13 +11350,10 @@ export class Editor extends EventEmitter<TLEventMap> {
 						// Stop dragging / pointing
 						inputs.setIsDragging(false)
 						inputs.setIsPointing(false)
-						clearTimeout(this._longPressTimeout)
+						this.timers.clearTimeout(this._longPressTimeout)
 						// Remove the button from the buttons set
 						inputs.buttons.delete(info.button)
 
-						// If we're in pen mode and we're not using a pen, stop here
-						if (instanceState.isPenMode && !isPen) return
-
 						// Right-click pointing ended without dragging—this is a static
 						// right-click, so let it through to the state chart as right_click.
 						// Check isPanning first: if we transitioned to panning, isRightPointing
@@ -11471,7 +11423,7 @@ export class Editor extends EventEmitter<TLEventMap> {
 								})
 							}
 						} else {
-							if (info.button === STYLUS_ERASER_BUTTON) {
+							if (info.button === STYLUS_ERASER_BUTTON && this.getStateDescendant('eraser')) {
 								// If we were erasing with a stylus button, restore the tool we were using before we started erasing
 								this.complete()
 								this.setCurrentTool(this._restoreToolId)
@@ -11489,9 +11441,11 @@ export class Editor extends EventEmitter<TLEventMap> {
 				break
 			}
 			case 'keyboard': {
-				// please, please
-				if (info.key === 'ShiftRight') info.key = 'ShiftLeft'
-				if (info.key === 'AltRight') info.key = 'AltLeft'
+				// Left and right modifier keys are the same key to us. `inputs.keys` stores
+				// `code`, so normalize that: a `ShiftRight` left as-is would never match the
+				// `ShiftLeft` that nudging checks or that `_releaseShiftKey` clears.
+				if (info.code === 'ShiftRight') info.code = 'ShiftLeft'
+				if (info.code === 'AltRight') info.code = 'AltLeft'
 				if (info.code === 'ControlRight') info.code = 'ControlLeft'
 				if (info.code === 'MetaRight') info.code = 'MetaLeft'
 
@@ -11509,7 +11463,7 @@ export class Editor extends EventEmitter<TLEventMap> {
 
 								this.inputs.setIsPanning(true)
 								this.inputs.setIsSpacebarPanning(true)
-								clearTimeout(this._longPressTimeout)
+								this.timers.clearTimeout(this._longPressTimeout)
 								this.setCursor({
 									type: this.inputs.getIsPointing() ? 'grabbing' : 'grab',
 									rotation: 0,
@@ -11537,7 +11491,8 @@ export class Editor extends EventEmitter<TLEventMap> {
 									}
 								}
 
-								if (offset) {
+								// `_animateToViewport` bypasses `setCamera`, so honor the lock here.
+								if (offset && !cameraOptions.isLocked) {
 									const bounds = this.getViewportPageBounds()
 									const next = bounds.clone().translate(offset.mulV({ x: bounds.w, y: bounds.h }))
 									this._animateToViewport(next, { animation: { duration: 320 } })
@@ -11599,9 +11554,11 @@ export class Editor extends EventEmitter<TLEventMap> {
 				this.setCurrentTool('select')
 			}
 
-			// If a left click pointer event, send the event to the click manager.
+			// Send the event to the click manager. In pen mode only pen clicks count; otherwise
+			// every pointer does, including an indirect tablet stylus (a pen that never enables
+			// pen mode), which would otherwise never produce double-click events.
 			const { isPenMode } = this.store.unsafeGetWithoutCapture(TLINSTANCE_ID)!
-			if (info.isPen === isPenMode) {
+			if (!isPenMode || info.isPen) {
 				// The click manager may return a new event, i.e. a double click event
 				// depending on the event coming in and its own state. If the event has
 				// changed then hand both events to the statechart
@@ -11633,7 +11590,7 @@ export class Editor extends EventEmitter<TLEventMap> {
 	private maybeTrackPerformance(name: string) {
 		if (debugFlags.measurePerformance.get()) {
 			if (this.performanceTracker.isStarted()) {
-				clearTimeout(this.performanceTrackerTimeout)
+				this.timers.clearTimeout(this.performanceTrackerTimeout)
 			} else {
 				this.performanceTracker.start(name)
 			}
@@ -11697,6 +11654,16 @@ function pushShapeWithDescendants(editor: Editor, id: TLShapeId, result: TLShape
 	}
 }
 
+/**
+ * When `shapes` already holds ids this returns that same array, not a copy, so a caller that
+ * mutates the result (for example to sort it) must copy it first.
+ */
+function toShapeIds(shapes: TLShapeId[] | TLShape[]): TLShapeId[] {
+	return typeof shapes[0] === 'string'
+		? (shapes as TLShapeId[])
+		: (shapes as TLShape[]).map((shape) => shape.id)
+}
+
 /**
  * Run `callback` in a world where all bindings from the shapes in `shapeIds` to shapes not in
  * `shapeIds` are removed. This is useful when you want to duplicate/copy shapes without worrying
@@ -11734,7 +11701,7 @@ function withIsolatedShapes<T>(
 					}
 				}
 
-				editor.deleteBindings([...bindingsToRemove], { isolateShapes: true })
+				editor._deleteBindings([...bindingsToRemove], { isolateShapes: true })
 
 				try {
 					result = Result.ok(callback(bindingsWithBoth))