@tldraw/editor 5.3.0 → 5.4.0-canary.0714aa9af9a0

package/dist-esm/version.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../src/version.ts"],
-  "sourcesContent": ["// This file is automatically generated by internal/scripts/refresh-assets.ts.\n// Do not edit manually. Or do, I'm a comment, not a cop.\n\nexport const version = '5.3.0'\nexport const publishDates = {\n\tmajor: '2026-05-06T16:28:18.473Z',\n\tminor: '2026-08-05T11:39:54.978Z',\n\tpatch: '2026-08-05T11:39:54.978Z',\n}\n"],
+  "sourcesContent": ["// This file is automatically generated by internal/scripts/refresh-assets.ts.\n// Do not edit manually. Or do, I'm a comment, not a cop.\n\nexport const version = '5.4.0-canary.0714aa9af9a0'\nexport const publishDates = {\n\tmajor: '2026-05-06T16:28:18.473Z',\n\tminor: '2026-08-15T20:16:10.391Z',\n\tpatch: '2026-08-15T20:16:10.391Z',\n}\n"],
   "mappings": "AAGO,MAAM,UAAU;AAChB,MAAM,eAAe;AAAA,EAC3B,OAAO;AAAA,EACP,OAAO;AAAA,EACP,OAAO;AACR;",
   "names": []
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tldraw/editor",
   "description": "tldraw infinite canvas SDK (editor).",
-  "version": "5.3.0",
+  "version": "5.4.0-canary.0714aa9af9a0",
   "author": {
     "name": "tldraw Inc.",
     "email": "hello@tldraw.com"
@@ -49,12 +49,12 @@
     "@tiptap/core": "^3.12.1",
     "@tiptap/pm": "^3.12.1",
     "@tiptap/react": "^3.12.1",
-    "@tldraw/state": "5.3.0",
-    "@tldraw/state-react": "5.3.0",
-    "@tldraw/store": "5.3.0",
-    "@tldraw/tlschema": "5.3.0",
-    "@tldraw/utils": "5.3.0",
-    "@tldraw/validate": "5.3.0",
+    "@tldraw/state": "5.4.0-canary.0714aa9af9a0",
+    "@tldraw/state-react": "5.4.0-canary.0714aa9af9a0",
+    "@tldraw/store": "5.4.0-canary.0714aa9af9a0",
+    "@tldraw/tlschema": "5.4.0-canary.0714aa9af9a0",
+    "@tldraw/utils": "5.4.0-canary.0714aa9af9a0",
+    "@tldraw/validate": "5.4.0-canary.0714aa9af9a0",
     "classnames": "^2.5.1",
     "eventemitter3": "^4.0.7",
     "idb": "^7.1.1",

package/src/index.ts

@@ -329,6 +329,7 @@ export {
 export { useTransform } from './lib/hooks/useTransform'
 export { isCursorInViewport } from './lib/utils/collaborators'
 export { useTLSchemaFromUtils, useTLStore } from './lib/hooks/useTLStore'
+// oxlint-disable-next-line typescript/no-deprecated
 export { useViewportHeight } from './lib/hooks/useViewportHeight'
 export {
 	LicenseManager,

package/src/lib/editor/Editor.ts

@@ -5862,6 +5862,7 @@ export class Editor extends EventEmitter<TLEventMap> {
 		const margin = this.options.hitTestMargin / this.getZoomLevel()
 		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
@@ -5911,28 +5912,25 @@ export class Editor extends EventEmitter<TLEventMap> {
 		const searchMargin = Math.max(innerMargin, outerMargin, this.getHitTestMargin())
 		const candidateIds = this._spatialIndex.getShapeIdsAtPoint(point, searchMargin)
 
-		const shapesToCheck = (
-			opts.renderingOnly
-				? this.getCurrentPageRenderingShapesSorted()
-				: this.getCurrentPageShapesSorted()
-		).filter((shape) => {
-			// Frame-like shapes have labels positioned above the shape (outside bounds), so always include them
-			if (!candidateIds.has(shape.id) && !this.isShapeFrameLike(shape)) return false
+		const shapesToCheck = opts.renderingOnly
+			? this.getCurrentPageRenderingShapesSorted()
+			: this.getCurrentPageShapesSorted()
 
+		for (let i = shapesToCheck.length - 1; i >= 0; i--) {
+			const shape = shapesToCheck[i]
+			// Frame-like shapes have labels positioned above the shape (outside bounds), so always include them
+			if (!candidateIds.has(shape.id) && !this.isShapeFrameLike(shape)) continue
 			if (
 				(shape.isLocked && !hitLocked) ||
 				this.isShapeHidden(shape) ||
 				this.isShapeOfType(shape, 'group')
-			)
-				return false
+			) {
+				continue
+			}
 			const pageMask = this.getShapeMask(shape)
-			if (pageMask && !pointInPolygon(point, pageMask)) return false
-			if (filter && !filter(shape)) return false
-			return true
-		})
+			if (pageMask && !pointInPolygon(point, pageMask)) continue
+			if (filter && !filter(shape)) continue
 
-		for (let i = shapesToCheck.length - 1; i >= 0; i--) {
-			const shape = shapesToCheck[i]
 			const geometry = this.getShapeGeometry(shape)
 			const isGroup = geometry instanceof Group2d
 
@@ -6114,15 +6112,18 @@ export class Editor extends EventEmitter<TLEventMap> {
 		const margin = opts.margin ?? 0
 		const candidateIds = this._spatialIndex.getShapeIdsAtPoint(point, margin)
 
-		// Get all page shapes in z-index order and filter to candidates that pass isPointInShape
-		// Frame-like shapes are always checked because their labels can be outside their bounds
-		return this.getCurrentPageShapesSorted()
-			.filter((shape) => {
-				if (this.isShapeHidden(shape)) return false
-				if (!candidateIds.has(shape.id) && !this.isShapeFrameLike(shape)) return false
-				return this.isPointInShape(shape, point, opts)
-			})
-			.reverse()
+		// Get all page shapes in z-index order and filter to candidates that pass isPointInShape.
+		// Frame-like shapes are always checked because their labels can be outside their bounds.
+		// Iterate backwards so the result is pre-sorted in reverse z-index order (top-most first).
+		const sorted = this.getCurrentPageShapesSorted()
+		const result: TLShape[] = []
+		for (let i = sorted.length - 1; i >= 0; i--) {
+			const shape = sorted[i]
+			if (this.isShapeHidden(shape)) continue
+			if (!candidateIds.has(shape.id) && !this.isShapeFrameLike(shape)) continue
+			if (this.isPointInShape(shape, point, opts)) result.push(shape)
+		}
+		return result
 	}
 
 	/**
@@ -7877,9 +7878,19 @@ export class Editor extends EventEmitter<TLEventMap> {
 	 */
 	alignShapes(
 		shapes: TLShapeId[] | TLShape[],
-		operation: 'left' | 'center-horizontal' | 'right' | 'top' | 'center-vertical' | 'bottom'
+		operation:
+			| 'left'
+			| 'center-horizontal'
+			| 'right'
+			| 'top'
+			| 'center-vertical'
+			| 'bottom'
+			| 'center'
 	): this {
 		if (this.getIsReadonly()) return this
+		if (operation === 'center') {
+			return this.alignShapes(shapes, 'center-horizontal').alignShapes(shapes, 'center-vertical')
+		}
 
 		const { clusters: shapeClustersToAlign, allBounds } = this.getShapeClusters(shapes, 'align')
 
@@ -10840,9 +10851,15 @@ export class Editor extends EventEmitter<TLEventMap> {
 	/** @internal */
 	private _shiftKeyTimeout = -1 as any
 
-	/** @internal */
+	/**
+	 * Release the shift modifier: clear its debounce timer id, drop the atom, and
+	 * dispatch a synthetic `key_up` so `inputs.keys` and tool `onKeyUp` handlers update.
+	 * Runs both as the 150ms debounce timer callback and when a pointer down flushes it.
+	 * @internal
+	 */
 	@bind
-	_setShiftKeyTimeout() {
+	_releaseShiftKey() {
+		this._shiftKeyTimeout = -1
 		this.inputs.setShiftKey(false)
 		this.dispatch({
 			type: 'keyboard',
@@ -10860,9 +10877,13 @@ export class Editor extends EventEmitter<TLEventMap> {
 	/** @internal */
 	private _altKeyTimeout = -1 as any
 
-	/** @internal */
+	/**
+	 * Release the alt modifier. See {@link Editor._releaseShiftKey}.
+	 * @internal
+	 */
 	@bind
-	_setAltKeyTimeout() {
+	_releaseAltKey() {
+		this._altKeyTimeout = -1
 		this.inputs.setAltKey(false)
 		this.dispatch({
 			type: 'keyboard',
@@ -10880,9 +10901,13 @@ export class Editor extends EventEmitter<TLEventMap> {
 	/** @internal */
 	private _ctrlKeyTimeout = -1 as any
 
-	/** @internal */
+	/**
+	 * Release the ctrl modifier. See {@link Editor._releaseShiftKey}.
+	 * @internal
+	 */
 	@bind
-	_setCtrlKeyTimeout() {
+	_releaseCtrlKey() {
+		this._ctrlKeyTimeout = -1
 		this.inputs.setCtrlKey(false)
 		this.dispatch({
 			type: 'keyboard',
@@ -10900,9 +10925,13 @@ export class Editor extends EventEmitter<TLEventMap> {
 	/** @internal */
 	private _metaKeyTimeout = -1 as any
 
-	/** @internal */
+	/**
+	 * Release the meta modifier. See {@link Editor._releaseShiftKey}.
+	 * @internal
+	 */
 	@bind
-	_setMetaKeyTimeout() {
+	_releaseMetaKey() {
+		this._metaKeyTimeout = -1
 		this.inputs.setMetaKey(false)
 		this.dispatch({
 			type: 'keyboard',
@@ -10917,6 +10946,56 @@ export class Editor extends EventEmitter<TLEventMap> {
 		})
 	}
 
+	/**
+	 * Flush any modifier still sitting in its 150ms release-debounce window, so a new
+	 * interaction (a pointer down) starts with correct modifier state instead of a
+	 * just-released key still being counted as held. A pending timer is exactly
+	 * "released but still counted as held"; a genuinely-held modifier has no timer
+	 * (-1) and is left alone.
+	 *
+	 * Each modifier is released through the same path its timer would have taken
+	 * (`_releaseShiftKey` and friends), which dispatches the synthetic `key_up` so
+	 * stale codes (e.g. `ShiftLeft`) leave `inputs.keys` and tool `onKeyUp` handlers run.
+	 * We clear every pending modifier atom and timer *first*, then dispatch: a synthetic
+	 * `key_up` reports all currently-held modifiers, so releasing them one at a time
+	 * would make each event re-confirm the not-yet-released ones and cancel their flush.
+	 * @internal
+	 */
+	private _releaseDebouncedModifiers() {
+		const releaseShift = this._shiftKeyTimeout !== -1
+		const releaseAlt = this._altKeyTimeout !== -1
+		const releaseCtrl = this._ctrlKeyTimeout !== -1
+		const releaseMeta = this._metaKeyTimeout !== -1
+
+		if (releaseShift) {
+			clearTimeout(this._shiftKeyTimeout)
+			this._shiftKeyTimeout = -1
+			this.inputs.setShiftKey(false)
+		}
+		if (releaseAlt) {
+			clearTimeout(this._altKeyTimeout)
+			this._altKeyTimeout = -1
+			this.inputs.setAltKey(false)
+		}
+		if (releaseCtrl) {
+			clearTimeout(this._ctrlKeyTimeout)
+			this._ctrlKeyTimeout = -1
+			this.inputs.setCtrlKey(false)
+		}
+		if (releaseMeta) {
+			clearTimeout(this._metaKeyTimeout)
+			this._metaKeyTimeout = -1
+			this.inputs.setMetaKey(false)
+		}
+
+		// Dispatch the synthetic key_up for each flushed modifier (same path its 150ms
+		// timer would run): clears stale codes from inputs.keys and fires tool onKeyUp.
+		if (releaseShift) this._releaseShiftKey()
+		if (releaseAlt) this._releaseAltKey()
+		if (releaseCtrl) this._releaseCtrlKey()
+		if (releaseMeta) this._releaseMetaKey()
+	}
+
 	/** @internal */
 	private _restoreToolId = 'select'
 
@@ -11055,7 +11134,7 @@ export class Editor extends EventEmitter<TLEventMap> {
 			this._shiftKeyTimeout = -1
 			inputs.setShiftKey(true)
 		} else if (!info.shiftKey && inputs.getShiftKey() && this._shiftKeyTimeout === -1) {
-			this._shiftKeyTimeout = this.timers.setTimeout(this._setShiftKeyTimeout, 150)
+			this._shiftKeyTimeout = this.timers.setTimeout(this._releaseShiftKey, 150)
 		}
 
 		if (info.altKey) {
@@ -11063,7 +11142,7 @@ export class Editor extends EventEmitter<TLEventMap> {
 			this._altKeyTimeout = -1
 			inputs.setAltKey(true)
 		} else if (!info.altKey && inputs.getAltKey() && this._altKeyTimeout === -1) {
-			this._altKeyTimeout = this.timers.setTimeout(this._setAltKeyTimeout, 150)
+			this._altKeyTimeout = this.timers.setTimeout(this._releaseAltKey, 150)
 		}
 
 		if (info.ctrlKey) {
@@ -11071,7 +11150,7 @@ export class Editor extends EventEmitter<TLEventMap> {
 			this._ctrlKeyTimeout = -1
 			inputs.setCtrlKey(true)
 		} else if (!info.ctrlKey && inputs.getCtrlKey() && this._ctrlKeyTimeout === -1) {
-			this._ctrlKeyTimeout = this.timers.setTimeout(this._setCtrlKeyTimeout, 150)
+			this._ctrlKeyTimeout = this.timers.setTimeout(this._releaseCtrlKey, 150)
 		}
 
 		if (info.metaKey && info.name !== 'key_up') {
@@ -11081,7 +11160,7 @@ export class Editor extends EventEmitter<TLEventMap> {
 			this._metaKeyTimeout = -1
 			inputs.setMetaKey(true)
 		} else if (!info.metaKey && inputs.getMetaKey() && this._metaKeyTimeout === -1) {
-			this._metaKeyTimeout = this.timers.setTimeout(this._setMetaKeyTimeout, 150)
+			this._metaKeyTimeout = this.timers.setTimeout(this._releaseMetaKey, 150)
 		}
 
 		if (!inputs.getIsPointing()) {
@@ -11289,6 +11368,10 @@ export class Editor extends EventEmitter<TLEventMap> {
 						// 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()
+
 						if (!this.inputs.getIsPanning()) {
 							// Start a long press timeout
 							this._longPressTimeout = this.timers.setTimeout(() => {

package/src/lib/editor/derivations/shapeIdsInCurrentPage.ts

@@ -39,9 +39,13 @@ export function deriveShapeIdsInCurrentPage(store: TLStore, getCurrentPageId: ()
 	function fromScratch() {
 		const currentPageId = getCurrentPageId()
 		lastPageId = currentPageId
-		return new Set(
-			[...shapesIndex.get()].filter((id) => isShapeInPage(store, currentPageId, store.get(id)!))
-		)
+		const result = new Set<TLShapeId>()
+		for (const id of shapesIndex.get()) {
+			if (isShapeInPage(store, currentPageId, store.get(id)!)) {
+				result.add(id)
+			}
+		}
+		return result
 	}
 	return computed<Set<TLShapeId>>('_shapeIdsInCurrentPage', (prevValue, lastComputedEpoch) => {
 		if (isUninitialized(prevValue)) {

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

@@ -420,6 +420,48 @@ describe('TextManager', () => {
 			expect(Array.isArray(result)).toBe(true)
 		})
 
+		it('should not throw when the truncated remeasure yields no spans', () => {
+			// The text truncates on the first pass, but once we narrow the width
+			// to make room for the ellipsis, nothing measurable remains (e.g. the
+			// measurement element can't be laid out). This must not crash.
+			vi.spyOn(textManager, 'measureElementTextNodeSpans')
+				.mockReturnValueOnce({
+					spans: [{ text: 'Hello Wo', box: { x: 0, y: 0, w: 80, h: 16 } }],
+					didTruncate: true,
+				})
+				.mockReturnValueOnce({
+					spans: [{ text: '…', box: { x: 0, y: 0, w: 10, h: 16 } }],
+					didTruncate: false,
+				})
+				.mockReturnValueOnce({
+					spans: [],
+					didTruncate: false,
+				})
+
+			const opts = { ...defaultOpts, overflow: 'truncate-ellipsis' as const }
+			let result: ReturnType<typeof textManager.measureTextSpans> | undefined
+			expect(() => (result = textManager.measureTextSpans('Hello World', opts))).not.toThrow()
+			expect(result).toEqual([])
+		})
+
+		it('should not throw when the ellipsis itself cannot be measured', () => {
+			// If measuring the ellipsis returns no spans, fall back to a zero width
+			// rather than dereferencing a missing span.
+			vi.spyOn(textManager, 'measureElementTextNodeSpans')
+				.mockReturnValueOnce({
+					spans: [{ text: 'Hello Wo', box: { x: 0, y: 0, w: 80, h: 16 } }],
+					didTruncate: true,
+				})
+				.mockReturnValueOnce({ spans: [], didTruncate: false })
+				.mockReturnValueOnce({
+					spans: [{ text: 'Hello Wo', box: { x: 0, y: 0, w: 80, h: 16 } }],
+					didTruncate: false,
+				})
+
+			const opts = { ...defaultOpts, overflow: 'truncate-ellipsis' as const }
+			expect(() => textManager.measureTextSpans('Hello World', opts)).not.toThrow()
+		})
+
 		it('should handle truncate-clip overflow', () => {
 			vi.spyOn(textManager, 'measureElementTextNodeSpans').mockReturnValue({
 				spans: [

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

@@ -1,5 +1,5 @@
 import { BoxModel, TLDefaultHorizontalAlignStyle } from '@tldraw/tlschema'
-import { objectMapKeys } from '@tldraw/utils'
+import { iterateGraphemes, objectMapKeys } from '@tldraw/utils'
 import type { Editor } from '../../Editor'
 import { EditorManager } from '../EditorManager'
 
@@ -94,10 +94,6 @@ export interface TLMeasureTextSpanOpts {
 
 const spaceCharacterRegex = /\s/
 
-// Iterate by grapheme cluster (e.g. emoji sequences, flags, accented letters)
-// rather than by code point, so a single glyph is measured as one unit.
-const graphemeSegmenter = new Intl.Segmenter(undefined, { granularity: 'grapheme' })
-
 const initialDefaultStyles = Object.freeze({
 	'overflow-wrap': 'break-word',
 	'word-break': 'auto',
@@ -309,7 +305,7 @@ export class TextManager extends EditorManager {
 		for (const childNode of element.childNodes) {
 			if (childNode.nodeType !== Node.TEXT_NODE) continue
 
-			for (const { segment } of graphemeSegmenter.segment(childNode.textContent ?? '')) {
+			for (const segment of iterateGraphemes(childNode.textContent ?? '')) {
 				// place the range around the grapheme we're interested in
 				range.setStart(textNode, idx)
 				range.setEnd(textNode, idx + segment.length)
@@ -438,7 +434,8 @@ export class TextManager extends EditorManager {
 			if (opts.overflow === 'truncate-ellipsis' && didTruncate) {
 				// we need to measure the ellipsis to know how much space it takes up
 				elm.textContent = '…'
-				const ellipsisWidth = Math.ceil(this.measureElementTextNodeSpans(elm).spans[0].box.w)
+				const ellipsisSpan = this.measureElementTextNodeSpans(elm).spans[0]
+				const ellipsisWidth = ellipsisSpan ? Math.ceil(ellipsisSpan.box.w) : 0
 
 				// then, we need to subtract that space from the width we have and measure again:
 				elm.style.setProperty('width', `${elementWidth - ellipsisWidth}px`)
@@ -451,7 +448,12 @@ export class TextManager extends EditorManager {
 				// have to do this after measuring, not before, because adding the
 				// ellipsis changes how whitespace might be getting collapsed by the
 				// browser.
-				const lastSpan = truncatedSpans[truncatedSpans.length - 1]!
+				const lastSpan = truncatedSpans[truncatedSpans.length - 1]
+				// If nothing measurable remained, return the (possibly empty)
+				// spans as-is rather than dereferencing a missing last span.
+				if (!lastSpan) {
+					return truncatedSpans
+				}
 				truncatedSpans.push({
 					text: '…',
 					box: {

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

@@ -142,6 +142,19 @@ describe('TickManager', () => {
 			expect(mockEmit).toHaveBeenCalledWith('frame', 0)
 			expect(mockEmit).toHaveBeenCalledWith('tick', 0)
 		})
+
+		it('should schedule the next frame even when a listener throws', () => {
+			const staleCancel = vi.fn()
+			tickManager.cancelRaf = staleCancel
+			mockEmit.mockImplementation(() => {
+				throw new Error('listener blew up')
+			})
+
+			// the error still reaches the caller, but the loop lives on
+			expect(() => tickManager.tick()).toThrow('listener blew up')
+			expect(mockRequestAnimationFrame).toHaveBeenCalled()
+			expect(tickManager.cancelRaf).not.toBe(staleCancel)
+		})
 	})
 
 	describe('dispose method', () => {

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

@@ -41,9 +41,15 @@ export class TickManager extends EditorManager {
 		const elapsed = now - this.now
 		this.now = now
 
-		this.editor.emit('frame', elapsed)
-		this.editor.emit('tick', elapsed)
-		this.cancelRaf = throttleToNextFrame(this.tick)
+		// Schedule the next frame even if a listener throws. Otherwise a single throwing listener
+		// ends the loop for good, which silently stops every frame-driven behavior — camera
+		// animations, edge scrolling, pointer velocity, following — instead of failing once.
+		try {
+			this.editor.emit('frame', elapsed)
+			this.editor.emit('tick', elapsed)
+		} finally {
+			this.cancelRaf = throttleToNextFrame(this.tick)
+		}
 	}
 
 	dispose() {

package/src/lib/hooks/useDocumentEvents.ts

@@ -240,19 +240,20 @@ export function useDocumentEvents() {
 
 		function handleTouchStart(e: TouchEvent) {
 			if (container.contains(e.target as Node)) {
-				// Center point of the touch area
-				const touchXPosition = e.touches[0].pageX
+				// Center point of the touch area, measured from the edge of the window the touch
+				// has to reach to trigger the navigation
+				const touchXPosition = e.touches[0].clientX
 				// Size of the touch area
 				const touchXRadius = e.touches[0].radiusX || 0
 
-				// We set a threshold (10px) on both sizes of the screen,
-				// if the touch area overlaps with the screen edges
-				// it's likely to trigger the navigation. We prevent the
-				// touchstart event in that case.
-				// todo: make this relative to the actual window, not the editor's screen bounds
+				// If the touch area overlaps with the screen edges it's likely to trigger the
+				// navigation. We prevent the touchstart event in that case. The gesture belongs to
+				// the window, so an editor inset from the window's edges — beside a sidebar, say —
+				// is not near an edge the system reacts to.
+				const windowWidth = editor.getContainerWindow().innerWidth
 				if (
 					touchXPosition - touchXRadius < 10 ||
-					touchXPosition + touchXRadius > editor.getViewportScreenBounds().width - 10
+					touchXPosition + touchXRadius > windowWidth - 10
 				) {
 					if ((e.target as HTMLElement)?.tagName === 'BUTTON') {
 						// Force a click before bailing

package/src/lib/hooks/useViewportHeight.ts

@@ -11,7 +11,15 @@ import { useMaybeEditor } from './useEditor'
  * N.B. On iOS, you have to take into account the offsetTop as well so that you get an accurate position
  * while using the virtual keyboard.
  */
-/** @public */
+/**
+ * The height of the visible viewport, including the visual viewport's own offset.
+ *
+ * @deprecated Read `window.visualViewport` directly: this flattens the visible rectangle to a
+ * single scalar, and keeping UI clear of the software keyboard usually needs the other edges too.
+ * Unused since v3.14; will be removed in a future release.
+ *
+ * @public
+ */
 export function useViewportHeight(): number {
 	const editor = useMaybeEditor()
 	const win = editor?.getContainerWindow() ?? window

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

@@ -1,4 +1,3 @@
-import { EMPTY_ARRAY } from '@tldraw/state'
 import { assert, invLerp, lerp } from '@tldraw/utils'
 import { Box } from '../Box'
 import { Mat } from '../Mat'
@@ -36,9 +35,15 @@ export class Group2d extends Geometry2d {
 
 	override getVertices(filters: Geometry2dFilters): Vec[] {
 		if (this.isExcludedByFilter(filters)) return []
-		return this.children
-			.filter((c) => !c.isExcludedByFilter(filters))
-			.flatMap((c) => c.getVertices(filters))
+		const vertices: Vec[] = []
+		for (const child of this.children) {
+			if (child.isExcludedByFilter(filters)) continue
+			const childVertices = child.getVertices(filters)
+			for (let i = 0, n = childVertices.length; i < n; i++) {
+				vertices.push(childVertices[i])
+			}
+		}
+		return vertices
 	}
 
 	override nearestPoint(point: VecLike, filters?: Geometry2dFilters): Vec {
@@ -84,9 +89,11 @@ export class Group2d extends Geometry2d {
 		hitInside: boolean,
 		filters = Geometry2dFilters.EXCLUDE_LABELS
 	): boolean {
-		return !!this.children
-			.filter((c) => !c.isExcludedByFilter(filters))
-			.find((c) => c.hitTestPoint(point, margin, hitInside))
+		for (const child of this.children) {
+			if (child.isExcludedByFilter(filters)) continue
+			if (child.hitTestPoint(point, margin, hitInside)) return true
+		}
+		return false
 	}
 
 	override hitTestLineSegment(
@@ -95,42 +102,71 @@ export class Group2d extends Geometry2d {
 		zoom: number,
 		filters = Geometry2dFilters.EXCLUDE_LABELS
 	): boolean {
-		return !!this.children
-			.filter((c) => !c.isExcludedByFilter(filters))
-			.find((c) => c.hitTestLineSegment(A, B, zoom))
+		for (const child of this.children) {
+			if (child.isExcludedByFilter(filters)) continue
+			if (child.hitTestLineSegment(A, B, zoom)) return true
+		}
+		return false
 	}
 
 	override intersectLineSegment(A: VecLike, B: VecLike, filters?: Geometry2dFilters) {
-		return this.children.flatMap((child) => {
-			if (child.isExcludedByFilter(filters)) return EMPTY_ARRAY
-			return child.intersectLineSegment(A, B, filters)
-		})
+		const result: VecLike[] = []
+		for (const child of this.children) {
+			if (child.isExcludedByFilter(filters)) continue
+			const hits = child.intersectLineSegment(A, B, filters)
+			for (let i = 0, n = hits.length; i < n; i++) {
+				result.push(hits[i])
+			}
+		}
+		return result
 	}
 
 	override intersectCircle(center: VecLike, radius: number, filters?: Geometry2dFilters) {
-		return this.children.flatMap((child) => {
-			if (child.isExcludedByFilter(filters)) return EMPTY_ARRAY
-			return child.intersectCircle(center, radius, filters)
-		})
+		const result: VecLike[] = []
+		for (const child of this.children) {
+			if (child.isExcludedByFilter(filters)) continue
+			const hits = child.intersectCircle(center, radius, filters)
+			for (let i = 0, n = hits.length; i < n; i++) {
+				result.push(hits[i])
+			}
+		}
+		return result
 	}
 
 	override getBoundsVertices(): Vec[] {
 		if (this.excludeFromShapeBounds) return []
-		return this.children.flatMap((child) => child.getBoundsVertices())
+		const vertices: Vec[] = []
+		for (const child of this.children) {
+			const childVertices = child.getBoundsVertices()
+			for (let i = 0, n = childVertices.length; i < n; i++) {
+				vertices.push(childVertices[i])
+			}
+		}
+		return vertices
 	}
 
 	override intersectPolygon(polygon: VecLike[], filters?: Geometry2dFilters) {
-		return this.children.flatMap((child) => {
-			if (child.isExcludedByFilter(filters)) return EMPTY_ARRAY
-			return child.intersectPolygon(polygon, filters)
-		})
+		const result: VecLike[] = []
+		for (const child of this.children) {
+			if (child.isExcludedByFilter(filters)) continue
+			const hits = child.intersectPolygon(polygon, filters)
+			for (let i = 0, n = hits.length; i < n; i++) {
+				result.push(hits[i])
+			}
+		}
+		return result
 	}
 
 	override intersectPolyline(polyline: VecLike[], filters?: Geometry2dFilters) {
-		return this.children.flatMap((child) => {
-			if (child.isExcludedByFilter(filters)) return EMPTY_ARRAY
-			return child.intersectPolyline(polyline, filters)
-		})
+		const result: VecLike[] = []
+		for (const child of this.children) {
+			if (child.isExcludedByFilter(filters)) continue
+			const hits = child.intersectPolyline(polyline, filters)
+			for (let i = 0, n = hits.length; i < n; i++) {
+				result.push(hits[i])
+			}
+		}
+		return result
 	}
 
 	override interpolateAlongEdge(t: number, filters?: Geometry2dFilters): Vec {