@tldraw/editor 5.4.0-canary.042da660fa66 → 5.4.0-canary.059d049864ed

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

@@ -1,6 +1,6 @@
 import { EMPTY_ARRAY, atom, computed } from '@tldraw/state'
 import type { TLInstancePresence } from '@tldraw/tlschema'
-import { areArraysShallowEqual, maxBy } from '@tldraw/utils'
+import { areArraysShallowEqual } from '@tldraw/utils'
 import type { Editor } from '../../Editor'
 
 /**
@@ -54,14 +54,14 @@ export class CollaboratorsManager {
 	getCollaborators(): TLInstancePresence[] {
 		const allPresenceRecords = this._getCollaboratorsQuery().get()
 		if (!allPresenceRecords.length) return EMPTY_ARRAY
-		const userIds = [...new Set(allPresenceRecords.map((c) => c.userId))].sort()
-		return userIds.map((id) => {
-			const latestPresence = maxBy(
-				allPresenceRecords.filter((c) => c.userId === id),
-				(p) => p.lastActivityTimestamp ?? 0
-			)
-			return latestPresence!
-		})
+		const latestByUserId = new Map<string, TLInstancePresence>()
+		for (const presence of allPresenceRecords) {
+			const latest = latestByUserId.get(presence.userId)
+			if (!latest || (presence.lastActivityTimestamp ?? 0) > (latest.lastActivityTimestamp ?? 0)) {
+				latestByUserId.set(presence.userId, presence)
+			}
+		}
+		return [...latestByUserId.keys()].sort().map((id) => latestByUserId.get(id)!)
 	}
 
 	/**

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

@@ -8,6 +8,7 @@ import {
 	mapObjectMapValues,
 	objectMapEntries,
 } from '@tldraw/utils'
+import { areShapesContentEqual } from '../../../utils/areShapesContentEqual'
 import type { Editor } from '../../Editor'
 
 interface FontState {
@@ -41,7 +42,7 @@ export class FontManager {
 			},
 			{
 				areResultsEqual: areArraysShallowEqual,
-				areRecordsEqual: (a, b) => a.props === b.props && a.meta === b.meta,
+				areRecordsEqual: areShapesContentEqual,
 			}
 		)
 

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

@@ -1,16 +1,39 @@
+import { InstancePresenceRecordType, TLPOINTER_ID, createUserId } from '@tldraw/tlschema'
+import { vi } from 'vitest'
 import { createTLStore } from '../../../config/createTLStore'
+import { TldrawOptions } from '../../../options'
 import { Editor } from '../../Editor'
+import { StateNode } from '../../tools/StateNode'
 
-function createTestEditor() {
+function createPresence(editor: Editor) {
+	return InstancePresenceRecordType.create({
+		id: InstancePresenceRecordType.createId('peer'),
+		userId: createUserId('peer'),
+		userName: 'Peer',
+		currentPageId: editor.getCurrentPageId(),
+	})
+}
+
+function createTestEditor(options?: Partial<TldrawOptions>) {
 	const store = createTLStore({})
 	store.ensureStoreIsUsable()
-	return new Editor({
+	// Attached to the document so that events dispatched on the container
+	// propagate to the window, where the activity listeners live.
+	const container = document.createElement('div')
+	document.body.appendChild(container)
+	const editor = new Editor({
 		store,
 		bindingUtils: [],
 		shapeUtils: [],
-		getContainer: () => document.createElement('div'),
+		getContainer: () => container,
 		tools: [],
+		options,
 	})
+	editor.disposables.add(() => container.remove())
+	// Input listeners only attach once the editor is mounted, which is normally
+	// emitted by `TldrawEditor` when the container is in the DOM.
+	editor.emit('mount')
+	return editor
 }
 
 describe('InputsManager', () => {
@@ -37,6 +60,179 @@ describe('InputsManager', () => {
 		expect(editor.inputs.getPointerVelocity().len()).toBeGreaterThan(0)
 	})
 
+	describe('markActivity', () => {
+		beforeEach(() => {
+			vi.useFakeTimers()
+		})
+
+		afterEach(() => {
+			vi.useRealTimers()
+		})
+
+		it('does nothing when there are no collaborators', () => {
+			editor.inputs.markActivity()
+
+			expect(editor.store.get(TLPOINTER_ID)!.lastActivityTimestamp).toBe(0)
+		})
+
+		it('stamps the pointer record, preserving its position', () => {
+			editor.store.put([createPresence(editor)])
+			editor.store.put([{ ...editor.store.get(TLPOINTER_ID)!, x: 5, y: 6 }])
+
+			editor.inputs.markActivity()
+
+			expect(editor.store.get(TLPOINTER_ID)!).toMatchObject({
+				x: 5,
+				y: 6,
+				lastActivityTimestamp: Date.now(),
+			})
+		})
+
+		it('throttles stamps on the leading edge', () => {
+			editor.store.put([createPresence(editor)])
+
+			editor.inputs.markActivity()
+			const firstStamp = editor.store.get(TLPOINTER_ID)!.lastActivityTimestamp
+
+			vi.advanceTimersByTime(500)
+			editor.inputs.markActivity()
+			expect(editor.store.get(TLPOINTER_ID)!.lastActivityTimestamp).toBe(firstStamp)
+
+			vi.advanceTimersByTime(600)
+			editor.inputs.markActivity()
+			expect(editor.store.get(TLPOINTER_ID)!.lastActivityTimestamp).toBe(firstStamp + 1100)
+		})
+
+		it('stamps on keyboard input in the container', () => {
+			editor.store.put([createPresence(editor)])
+
+			editor.getContainer().dispatchEvent(new KeyboardEvent('keydown', { key: 'a', code: 'KeyA' }))
+
+			expect(editor.store.get(TLPOINTER_ID)!.lastActivityTimestamp).toBe(Date.now())
+		})
+
+		it('stamps on pointer input in the container', () => {
+			editor.store.put([createPresence(editor)])
+
+			editor.getContainer().dispatchEvent(new Event('pointermove', { bubbles: true }))
+
+			expect(editor.store.get(TLPOINTER_ID)!.lastActivityTimestamp).toBe(Date.now())
+		})
+
+		it('stamps on text input that fires no keydown, e.g. IME and gesture typing', () => {
+			editor.store.put([createPresence(editor)])
+
+			editor.getContainer().dispatchEvent(new Event('beforeinput', { bubbles: true }))
+
+			expect(editor.store.get(TLPOINTER_ID)!.lastActivityTimestamp).toBe(Date.now())
+		})
+
+		it('stamps on input elsewhere in the tab, outside the container', () => {
+			editor.store.put([createPresence(editor)])
+
+			document.body.dispatchEvent(new KeyboardEvent('keydown', { key: 'a', code: 'KeyA' }))
+
+			expect(editor.store.get(TLPOINTER_ID)!.lastActivityTimestamp).toBe(Date.now())
+		})
+
+		it('keeps a minimum throttle window when the idle timeout is tiny', () => {
+			const tinyEditor = createTestEditor({ collaboratorIdleTimeoutMs: 0 })
+			try {
+				tinyEditor.store.put([createPresence(tinyEditor)])
+
+				tinyEditor.inputs.markActivity()
+				const stamp = tinyEditor.store.get(TLPOINTER_ID)!.lastActivityTimestamp
+
+				vi.advanceTimersByTime(50)
+				tinyEditor.inputs.markActivity()
+				expect(tinyEditor.store.get(TLPOINTER_ID)!.lastActivityTimestamp).toBe(stamp)
+			} finally {
+				tinyEditor.dispose()
+			}
+		})
+
+		it('attaches input listeners only while sharing with someone', () => {
+			const addEventListener = vi.spyOn(window, 'addEventListener')
+			const removeEventListener = vi.spyOn(window, 'removeEventListener')
+			const soloEditor = createTestEditor()
+			try {
+				expect(addEventListener).not.toHaveBeenCalled()
+
+				soloEditor.store.put([createPresence(soloEditor)])
+				expect(addEventListener).toHaveBeenCalledWith('pointermove', expect.anything(), {
+					capture: true,
+				})
+
+				soloEditor.store.remove([createPresence(soloEditor).id])
+				expect(removeEventListener).toHaveBeenCalledWith('pointermove', expect.anything(), {
+					capture: true,
+				})
+			} finally {
+				soloEditor.dispose()
+				addEventListener.mockRestore()
+				removeEventListener.mockRestore()
+			}
+		})
+
+		it('attaches no input listeners when construction fails before mount', () => {
+			class DuplicateTool extends StateNode {
+				static override id = 'duplicate-tool'
+			}
+
+			const addEventListener = vi.spyOn(window, 'addEventListener')
+			try {
+				const store = createTLStore({})
+				store.ensureStoreIsUsable()
+				expect(
+					() =>
+						new Editor({
+							store,
+							bindingUtils: [],
+							shapeUtils: [],
+							getContainer: () => document.createElement('div'),
+							// The duplicate id makes the constructor throw after the inputs
+							// manager is built, so the editor is never disposed.
+							tools: [DuplicateTool, DuplicateTool],
+						})
+				).toThrow()
+
+				expect(addEventListener).not.toHaveBeenCalled()
+			} finally {
+				addEventListener.mockRestore()
+			}
+		})
+
+		it('does not stamp on pointer moves with no DOM input, e.g. following a user', () => {
+			editor.store.put([createPresence(editor)])
+
+			editor.inputs.markActivity()
+			const stamp = editor.store.get(TLPOINTER_ID)!.lastActivityTimestamp
+
+			vi.advanceTimersByTime(5000)
+			editor.inputs.updateFromEvent({
+				type: 'pointer',
+				name: 'pointer_move',
+				point: { x: 100, y: 50 },
+				pointerId: 1,
+				button: 0,
+				isPen: false,
+				target: 'canvas',
+				shiftKey: false,
+				altKey: false,
+				ctrlKey: false,
+				metaKey: false,
+				accelKey: false,
+			})
+
+			// The pointer position updates, but the activity clock doesn't.
+			expect(editor.store.get(TLPOINTER_ID)!).toMatchObject({
+				x: 100,
+				y: 50,
+				lastActivityTimestamp: stamp,
+			})
+		})
+	})
+
 	it('stops updating pointer velocity after dispose', () => {
 		const point = editor.inputs.getCurrentScreenPoint()
 		point.x = 0

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

@@ -1,8 +1,7 @@
-import { atom, computed, unsafe__withoutCapture } from '@tldraw/state'
+import { atom, computed, react, unsafe__withoutCapture } from '@tldraw/state'
 import { AtomSet } from '@tldraw/store'
 import { TLINSTANCE_ID, TLPOINTER_ID } from '@tldraw/tlschema'
-import { bind } from '@tldraw/utils'
-import { INTERNAL_POINTER_IDS } from '../../../constants'
+import { bind, throttle } from '@tldraw/utils'
 import { Vec } from '../../../primitives/Vec'
 import { isAccelKey } from '../../../utils/keyboard'
 import type { Editor } from '../../Editor'
@@ -12,11 +11,85 @@ import { EditorManager } from '../EditorManager'
 const POINTER_VELOCITY_REFERENCE_INTERVAL_MS = 16
 const POINTER_VELOCITY_REFERENCE_SMOOTHING = 0.5
 
+// How often `markActivity` is allowed to stamp the activity timestamp. Each
+// stamp re-broadcasts presence, so this must be long enough to keep input
+// bursts (e.g. typing, held keys) from flooding the network. It must also stay
+// comfortably shorter than `collaboratorIdleTimeoutMs` so a continuously-active
+// peer never flickers to idle between stamps; the throttle window is capped
+// below that option when it's configured shorter than the default, but never
+// below the floor, so a degenerate idle timeout can't disable throttling.
+const ACTIVITY_TIMESTAMP_THROTTLE_MS = 1000
+const ACTIVITY_TIMESTAMP_THROTTLE_FLOOR_MS = 100
+
+// DOM events that count as presence activity. `beforeinput` covers IME and
+// mobile keyboards (e.g. gesture typing), which often don't fire per-character
+// keydown events. `gesturestart`/`gesturechange` are Safari's proprietary
+// trackpad-pinch events, which produce neither pointer nor wheel events.
+const ACTIVITY_EVENTS = [
+	'pointerdown',
+	'pointermove',
+	'pointerup',
+	'keydown',
+	'beforeinput',
+	'wheel',
+	'gesturestart',
+	'gesturechange',
+]
+
 /** @public */
 export class InputsManager extends EditorManager {
 	constructor(editor: Editor) {
 		super(editor)
 		this.addEditorEvent('frame', this._onFrame)
+
+		// Track input only while mounted and sharing with someone: a solo user
+		// pays for no listeners at all, and the window is resolved on attach
+		// rather than up front, when the container is guaranteed to exist.
+		//
+		// The mount check must come first. This runs eagerly during the editor's
+		// constructor, where `editor.collaborators` isn't assigned yet, so reading
+		// collaborators here would throw; a never-mounted editor short-circuits
+		// before that, and re-runs once mount flips the atom.
+		this.register(
+			react('presence activity listeners', () => {
+				if (this.editor.getIsMounted() && this._getHasCollaborators()) {
+					this._attachActivityListeners()
+				} else {
+					this._detachActivityListeners()
+				}
+			})
+		)
+		this.register(() => {
+			this._detachActivityListeners()
+			this._throttledActivityStamp.cancel()
+		})
+	}
+
+	private _detachActivityListenersFn: null | (() => void) = null
+
+	/**
+	 * User input anywhere in the editor's tab counts as activity for collaborator presence —
+	 * presence means "this person is here", whether or not the input lands on the editor itself
+	 * (e.g. typing in a sidebar next to the canvas). Listen in the capture phase so input that
+	 * other handlers swallow still counts.
+	 */
+	private _attachActivityListeners() {
+		if (this._detachActivityListenersFn) return
+
+		const win = this.editor.getContainerWindow()
+		for (const name of ACTIVITY_EVENTS) {
+			win.addEventListener(name, this.markActivity, { capture: true })
+		}
+		this._detachActivityListenersFn = () => {
+			for (const name of ACTIVITY_EVENTS) {
+				win.removeEventListener(name, this.markActivity, { capture: true })
+			}
+		}
+	}
+
+	private _detachActivityListeners() {
+		this._detachActivityListenersFn?.()
+		this._detachActivityListenersFn = null
 	}
 
 	@bind
@@ -462,6 +535,53 @@ export class InputsManager extends EditorManager {
 		return this.editor.getCollaborators().length > 0 // could we do this more efficiently?
 	}
 
+	private readonly _throttledActivityStamp = throttle(
+		() => {
+			const pointer = this.editor.store.unsafeGetWithoutCapture(TLPOINTER_ID)
+			if (!pointer) return
+
+			this.editor.run(
+				() => {
+					this.editor.store.put([{ ...pointer, lastActivityTimestamp: Date.now() }])
+				},
+				{ history: 'ignore' }
+			)
+		},
+		// Stay comfortably below the idle timeout so a continuously-active peer
+		// never flickers to idle between throttled stamps.
+		Math.max(
+			ACTIVITY_TIMESTAMP_THROTTLE_FLOOR_MS,
+			Math.min(ACTIVITY_TIMESTAMP_THROTTLE_MS, this.editor.options.collaboratorIdleTimeoutMs / 3)
+		),
+		{ trailing: false }
+	)
+
+	/**
+	 * Mark the current user as active for collaborator presence. User input anywhere in the
+	 * editor's tab counts as activity automatically; call this to make input that doesn't produce
+	 * DOM events count too, so peers don't classify this user as idle or inactive while they're
+	 * still interacting. Calls are throttled on the leading edge, so it's safe to call from
+	 * high-frequency input events.
+	 *
+	 * @example
+	 * ```ts
+	 * // Gamepads are polled rather than event-driven, so stamp activity from the poll
+	 * editor.timers.setInterval(() => {
+	 * 	const isPressed = navigator
+	 * 		.getGamepads()
+	 * 		.some((pad) => pad?.buttons.some((button) => button.pressed))
+	 * 	if (isPressed) editor.inputs.markActivity()
+	 * }, 50)
+	 * ```
+	 */
+	@bind
+	markActivity() {
+		// Check for collaborators before consuming the throttle window, so input
+		// while alone doesn't delay the first stamp after a peer joins.
+		if (!this._getHasCollaborators()) return
+		this._throttledActivityStamp()
+	}
+
 	/**
 	 * The previous point used for velocity calculation (updated each tick, not each pointer event).
 	 * @internal
@@ -553,13 +673,12 @@ export class InputsManager extends EditorManager {
 							typeName: 'pointer',
 							x: pagePoint.x,
 							y: pagePoint.y,
+							// The activity timestamp is stamped by the container's input
+							// listeners (see `markActivity`), not by pointer position updates:
+							// synthetic moves, like the camera following another user, don't
+							// count as activity.
 							lastActivityTimestamp:
-								// If our pointer moved only because we're following some other user, then don't
-								// update our last activity timestamp; otherwise, update it to the current timestamp.
-								info.type === 'pointer' && info.pointerId === INTERNAL_POINTER_IDS.CAMERA_MOVE
-									? (this.editor.store.unsafeGetWithoutCapture(TLPOINTER_ID)
-											?.lastActivityTimestamp ?? Date.now())
-									: Date.now(),
+								this.editor.store.unsafeGetWithoutCapture(TLPOINTER_ID)?.lastActivityTimestamp ?? 0,
 							meta: {},
 						},
 					])

package/src/lib/editor/managers/SnapManager/BoundsSnaps.ts

@@ -206,12 +206,10 @@ export class BoundsSnaps {
 		const { editor } = this
 		return editor.store.createComputedCache<BoundsSnapPoint[], TLShape>('snapPoints', (shape) => {
 			const pageTransform = editor.getShapePageTransform(shape.id)
-			if (!pageTransform) return undefined
 			const boundsSnapGeometry = editor.getShapeUtil(shape).getBoundsSnapGeometry(shape)
 			const snapPoints =
 				boundsSnapGeometry.points ?? editor.getShapeGeometry(shape).bounds.cornersAndCenter
 
-			if (!pageTransform || !snapPoints) return undefined
 			return snapPoints.map((point, i) => {
 				const { x, y } = Mat.applyToPoint(pageTransform, point)
 				return { x, y, id: `${shape.id}:${i}` }

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

@@ -10,6 +10,7 @@ export class UserPreferencesManager {
 	disposables = new Set<() => void>()
 	dispose() {
 		this.disposables.forEach((d) => d())
+		this.disposables.clear()
 	}
 	constructor(
 		private readonly user: TLCurrentUser,

package/src/lib/editor/overlays/OverlayManager.ts

@@ -1,4 +1,5 @@
 import { atom, computed } from '@tldraw/state'
+import { WeakCache } from '@tldraw/utils'
 import { Geometry2d } from '../../primitives/geometry/Geometry2d'
 import { VecLike } from '../../primitives/Vec'
 import type { Editor } from '../Editor'
@@ -119,7 +120,7 @@ export class OverlayManager {
 	// while getActiveOverlayEntries() keeps returning the same overlay
 	// instances; when its reactive deps change, getOverlays() emits fresh
 	// objects and stale entries fall out by GC.
-	private _geometryCache = new WeakMap<TLOverlay, Geometry2d | null>()
+	private _geometryCache = new WeakCache<TLOverlay, Geometry2d | null>()
 
 	/**
 	 * Get hit-test geometry for an overlay, cached by overlay identity. Lets
@@ -130,12 +131,7 @@ export class OverlayManager {
 	 * @public
 	 */
 	getOverlayGeometry(overlay: TLOverlay): Geometry2d | null {
-		const cached = this._geometryCache.get(overlay)
-		if (cached !== undefined) return cached
-		const util = this.getOverlayUtil(overlay)
-		const geometry = util.getGeometry(overlay)
-		this._geometryCache.set(overlay, geometry)
-		return geometry
+		return this._geometryCache.get(overlay, (o) => this.getOverlayUtil(o).getGeometry(o))
 	}
 
 	/**

package/src/lib/editor/overlays/strokeShapeIndicators.ts

@@ -40,7 +40,6 @@ export function strokeShapeIndicators(
 		if (!shape || shape.isLocked) continue
 
 		const pageTransform = editor.getShapePageTransform(shape)
-		if (!pageTransform) continue
 
 		const indicatorPath = indicatorPathCache.get(editor, shape.id)
 		if (!indicatorPath) continue

package/src/lib/editor/shapes/BaseFrameLikeShapeUtil.tsx

@@ -93,7 +93,11 @@ export abstract class BaseFrameLikeShapeUtil<
 			const currentChildren = compact(
 				editor.getSortedChildIdsForParent(shape).map((id) => editor.getShape(id))
 			)
-			if (previousChildren.every((s) => !currentChildren.find((c) => c.index === s.index))) {
+			if (
+				previousChildren.every(
+					(s) => !currentChildren.find((c) => c.index === initialIndices.get(s.id))
+				)
+			) {
 				canRestoreOriginalIndices = true
 			}
 		}

package/src/lib/editor/shapes/shared/getPerfectDashProps.ts

@@ -87,6 +87,9 @@ export function getPerfectDashProps(
 
 	dashCount = Math.floor(totalLength / dashLength / (2 * ratio))
 	dashCount -= dashCount % snap
+	// A path shorter than one dash period (or of zero length, where the count is NaN) would
+	// otherwise divide by zero below and produce an invalid dasharray; draw a single dash instead
+	if (!(dashCount >= 1)) dashCount = 1
 
 	if (dashCount < 3 && style === 'dashed') {
 		if (totalLength / strokeWidth < 4) {

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

@@ -75,7 +75,10 @@ export class Pointing extends StateNode {
 	}
 
 	override onComplete() {
-		this.complete()
+		// `complete` arrives mid-press from undo, menus opening, page changes, and focus loss,
+		// none of which is a release; committing here would drop a default-size shape the user
+		// never asked for. Match the text and arrow tools and leave nothing behind.
+		this.cancel()
 	}
 
 	override onInterrupt() {

package/src/lib/editor/tools/StateNode.test.ts

@@ -238,6 +238,70 @@ describe('StateNode.addChild', () => {
 	})
 })
 
+describe('StateNode.enter', () => {
+	let idleExits = 0
+
+	class Idle extends StateNode {
+		static override id = 'idle'
+		override onExit() {
+			idleExits++
+		}
+	}
+
+	class Pointing extends StateNode {
+		static override id = 'pointing'
+	}
+
+	class ToolWithEnterTransition extends StateNode {
+		static override id = 'enterTransition'
+		static override initial = 'idle'
+		static override children() {
+			return [Idle, Pointing]
+		}
+
+		override onEnter(info: { startPointing?: boolean }) {
+			if (info?.startPointing) this.transition('pointing', info)
+		}
+	}
+
+	class OtherTool extends StateNode {
+		static override id = 'other'
+	}
+
+	let editor: Editor
+
+	beforeEach(() => {
+		idleExits = 0
+		editor = new Editor({
+			initialState: 'other',
+			shapeUtils: [],
+			bindingUtils: [],
+			tools: [OtherTool, ToolWithEnterTransition],
+			store: createTLStore({ shapeUtils: [], bindingUtils: [] }),
+			getContainer: () => document.body,
+		})
+	})
+
+	it('enters the initial child when onEnter does not transition', () => {
+		editor.setCurrentTool('enterTransition')
+		expect(editor.root.getPath()).toBe('root.enterTransition.idle')
+		expect(editor.root.children!['enterTransition'].children!['idle'].getIsActive()).toBe(true)
+	})
+
+	it('does not enter the initial child on top of a child that onEnter transitioned to', () => {
+		editor.setCurrentTool('enterTransition', { startPointing: true })
+		const tool = editor.root.children!['enterTransition']
+		expect(editor.root.getPath()).toBe('root.enterTransition.pointing')
+		expect(tool.children!['pointing'].getIsActive()).toBe(true)
+		expect(tool.children!['idle'].getIsActive()).toBe(false)
+		// The stale (never re-entered) idle child must not get a spurious onExit
+		expect(idleExits).toBe(0)
+
+		editor.setCurrentTool('other')
+		expect(tool.children!['pointing'].getIsActive()).toBe(false)
+	})
+})
+
 describe('current tool id mask', () => {
 	// Tool mask test classes
 	class ToolA extends StateNode {

package/src/lib/editor/tools/StateNode.ts

@@ -152,7 +152,9 @@ export abstract class StateNode implements Partial<TLEventHandlers> {
 			}
 
 			if (prevChildState?.id !== nextChildState.id) {
-				prevChildState?.exit(info, id)
+				// The previous child is inactive when transitioning from a parent's onEnter (or from a
+				// node that was already exited); exiting it again would fire a spurious onExit
+				if (prevChildState?.getIsActive()) prevChildState.exit(info, id)
 				currState._current.set(nextChildState)
 				nextChildState.enter(info, prevChildState?.id || 'initial')
 				if (!nextChildState.getIsActive()) break
@@ -188,10 +190,18 @@ export abstract class StateNode implements Partial<TLEventHandlers> {
 			this.editor.performance._notifyInteractionStart(this.id, this.getPath())
 		}
 
+		const currentBeforeEnter = this.getCurrent()
 		this._isActive.set(true)
 		this.onEnter?.(info, from)
 
-		if (this.children && this.initial && this.getIsActive()) {
+		// If onEnter already transitioned to a child, entering the initial child on top of it would
+		// leave that child active but orphaned
+		if (
+			this.children &&
+			this.initial &&
+			this.getIsActive() &&
+			this.getCurrent() === currentBeforeEnter
+		) {
 			const initial = this.children[this.initial]
 			this._current.set(initial)
 			initial.enter(info, from)

package/src/lib/globals/menus.test.ts

@@ -0,0 +1,33 @@
+import { tlmenus } from './menus'
+
+describe('tlmenus', () => {
+	afterEach(() => {
+		tlmenus.clearOpenMenus()
+		tlmenus._hiddenMenus = []
+	})
+
+	it('reports whether a menu is open with and without a context', () => {
+		tlmenus.addOpenMenu('main')
+		tlmenus.addOpenMenu('main', 'editor-1')
+
+		expect(tlmenus.isMenuOpen('main')).toBe(true)
+		expect(tlmenus.isMenuOpen('main', 'editor-1')).toBe(true)
+		expect(tlmenus.isMenuOpen('main', 'editor-2')).toBe(false)
+		expect(tlmenus.isMenuOpen('other')).toBe(false)
+	})
+
+	it('hides and restores the open menus of a context', () => {
+		tlmenus.addOpenMenu('main', 'editor-1')
+		tlmenus.addOpenMenu('main', 'editor-2')
+
+		tlmenus.hideOpenMenus('editor-1')
+		expect(tlmenus.getOpenMenus()).toEqual(['main-editor-2'])
+
+		tlmenus.showOpenMenus('editor-1')
+		expect(tlmenus.getOpenMenus().sort()).toEqual(['main-editor-1', 'main-editor-2'])
+
+		// closing the real menu afterwards leaves nothing behind
+		tlmenus.deleteOpenMenu('main', 'editor-1')
+		expect(tlmenus.hasOpenMenus('editor-1')).toBe(false)
+	})
+})