@tldraw/editor 5.4.1 → 5.5.0-canary.003bf5951274

package/src/lib/editor/Editor.ts

@@ -110,6 +110,7 @@ import {
 import {
 	DEFAULT_ANIMATION_OPTIONS,
 	DEFAULT_CAMERA_OPTIONS,
+	FRAME_MS_60HZ,
 	INTERNAL_POINTER_IDS,
 	LEFT_MOUSE_BUTTON,
 	MIDDLE_MOUSE_BUTTON,
@@ -340,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()
@@ -752,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)
 						}
 					},
 				},
@@ -1969,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 }])
@@ -2196,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
 	}
@@ -2215,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)))
@@ -2263,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
 	}
 
@@ -2287,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]
@@ -2301,10 +2307,16 @@ 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
+			// before the last; seed it from 0 so it wraps to the last shape. See #10559.
+			const startIndex = currentIndex === -1 && direction === 'prev' ? 0 : currentIndex
 			const adjacentIndex =
-				(currentIndex + (direction === 'next' ? 1 : -1) + shapeIds.length) % shapeIds.length
+				(startIndex + (direction === 'next' ? 1 : -1) + shapeIds.length) % shapeIds.length
 			adjacentShapeId = shapeIds[adjacentIndex]
 		} else {
 			if (!currentShapeId) return
@@ -2446,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'
@@ -2457,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:
@@ -2964,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(
 			() => {
@@ -3014,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(
@@ -3591,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()
 
@@ -3599,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) {
@@ -3939,6 +3956,7 @@ export class Editor extends EventEmitter<TLEventMap> {
 		easing(t: number): number
 		start: Box
 		end: Box
+		opts: TLCameraMoveOptions
 	}
 
 	/** @internal */
@@ -3947,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
 		}
 
@@ -4006,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
@@ -4086,8 +4110,8 @@ export class Editor extends EventEmitter<TLEventMap> {
 				newCy += center.y / newCz - center.y / cz
 			}
 
-			// Apply friction
-			currentSpeed *= 1 - friction
+			// Apply friction per unit of elapsed time, not per tick, or a 120 Hz display decays twice as fast
+			currentSpeed *= (1 - friction) ** (elapsed / FRAME_MS_60HZ)
 			if (currentSpeed < speedThreshold) {
 				cancel()
 			} else {
@@ -4130,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)
 			}
 
@@ -5227,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' }
@@ -5689,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) {
@@ -5840,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),
@@ -6018,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.
@@ -6041,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
@@ -6059,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
 				}
 			}
@@ -6423,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[] = []
@@ -6773,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)
@@ -6812,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) {
@@ -6849,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(() => {
@@ -6923,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
 
@@ -6973,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.
 	 *
@@ -6985,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)
@@ -7022,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
@@ -7167,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
@@ -7231,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
 
@@ -7277,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)
@@ -7311,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
 	}
@@ -7343,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
 	}
@@ -7366,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
 	}
@@ -7386,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)))
@@ -7427,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,
@@ -7497,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)))
@@ -7603,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
 
@@ -7676,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
@@ -7802,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))
 			}
 		}
 
@@ -7890,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))
 			}
 		})
 
@@ -7929,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]
@@ -7953,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
@@ -7990,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
@@ -8036,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]
@@ -8063,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, {
@@ -8120,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),
@@ -8134,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, {
@@ -8783,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]
@@ -8791,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),
@@ -8811,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)
@@ -8878,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)
@@ -8902,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()
 		}
 
@@ -8960,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) =>
@@ -8973,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()
 		}
 
@@ -8998,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++) {
@@ -9128,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))
 	}
 
 	/**
@@ -9152,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
@@ -9627,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
@@ -9717,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
@@ -10153,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
 
@@ -11291,6 +11241,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.
@@ -11485,9 +11439,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'
 
@@ -11693,6 +11649,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
@@ -11730,7 +11696,7 @@ function withIsolatedShapes<T>(
 					}
 				}
 
-				editor.deleteBindings([...bindingsToRemove], { isolateShapes: true })
+				editor._deleteBindings([...bindingsToRemove], { isolateShapes: true })
 
 				try {
 					result = Result.ok(callback(bindingsWithBoth))