@tldraw/editor 5.6.0-next.c4e9c54a816e → 5.6.0-next.f151f7f3ebd6

package/src/lib/components/default-components/DefaultErrorFallback.tsx

@@ -1,7 +1,13 @@
 import { useValue } from '@tldraw/state-react'
 import { noop } from '@tldraw/utils'
 import classNames from 'classnames'
-import { ComponentType, useEffect, useLayoutEffect, useRef, useState } from 'react'
+import { ComponentType, useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react'
+import {
+	defineMessages,
+	translateMessage,
+	type TLI18nMessage,
+	type TLI18nValues,
+} from '../../config/TLI18n'
 import { Editor } from '../../editor/Editor'
 import { getOwnerDocument } from '../../exports/domUtils'
 import { useEditorComponents } from '../../hooks/EditorComponentsContext'
@@ -12,6 +18,50 @@ import { ErrorBoundary } from '../ErrorBoundary'
 
 const BASE_ERROR_URL = 'https://github.com/tldraw/tldraw/issues/new'
 
+const messages = defineMessages({
+	confirmResetTitle: { id: 'error.confirm-reset.title', defaultMessage: 'Are you sure?' },
+	confirmResetDescription: {
+		id: 'error.confirm-reset.description',
+		defaultMessage: 'Resetting your data will delete your drawing and cannot be undone.',
+	},
+	cancel: { id: 'error.cancel', defaultMessage: 'Cancel' },
+	resetData: { id: 'error.reset-data', defaultMessage: 'Reset data' },
+	title: { id: 'error.title', defaultMessage: 'Something went wrong' },
+	refreshHint: { id: 'error.refresh-hint', defaultMessage: 'Please refresh your browser.' },
+	resetHint: {
+		id: 'error.reset-hint',
+		defaultMessage:
+			'If the issue continues after refreshing, you may need to reset the tldraw data stored on your device.',
+	},
+	noteLabel: { id: 'error.note-label', defaultMessage: 'Note:' },
+	resetNote: {
+		id: 'error.reset-note',
+		defaultMessage: 'Resetting will erase your current project and any unsaved work.',
+	},
+	messageLabel: { id: 'error.message-label', defaultMessage: 'Message:' },
+	stackTraceLabel: { id: 'error.stack-trace-label', defaultMessage: 'Stack trace:' },
+	copy: { id: 'error.copy', defaultMessage: 'Copy' },
+	copied: { id: 'error.copied', defaultMessage: 'Copied!' },
+	showDetails: { id: 'error.show-details', defaultMessage: 'Show details' },
+	hideDetails: { id: 'error.hide-details', defaultMessage: 'Hide details' },
+	refreshPage: { id: 'error.refresh-page', defaultMessage: 'Refresh page' },
+})
+
+// This renders because something already threw, so reading the editor is done defensively the way
+// the rest of this component reads it: English beats a second crash on the error screen.
+function useErrorMsg(editor: Editor | undefined) {
+	return useCallback(
+		(message: TLI18nMessage, values?: TLI18nValues) => {
+			try {
+				return translateMessage(editor?.i18n(), message, values)
+			} catch {
+				return message.defaultMessage
+			}
+		},
+		[editor]
+	)
+}
+
 /** @public */
 export interface TLErrorFallbackProps {
 	/** The error that was caught. */
@@ -28,6 +78,7 @@ export type TLErrorFallbackComponent = ComponentType<TLErrorFallbackProps>
 
 /** @public @react */
 export function DefaultErrorFallback({ error, editor }: TLErrorFallbackProps) {
+	const msg = useErrorMsg(editor)
 	const containerRef = useRef<HTMLDivElement>(null)
 	const [shouldShowError, setShouldShowError] = useState(process.env.NODE_ENV === 'development')
 	const [didCopy, setDidCopy] = useState(false)
@@ -168,27 +219,24 @@ My browser: ${navigator.userAgent}`
 			>
 				{shouldShowResetConfirmation ? (
 					<>
-						<h2>Are you sure?</h2>
-						<p>Resetting your data will delete your drawing and cannot be undone.</p>
+						<h2>{msg(messages.confirmResetTitle)}</h2>
+						<p>{msg(messages.confirmResetDescription)}</p>
 						<div className="tl-error-boundary__content__actions">
 							<button className="tlui-button" onClick={() => setShouldShowResetConfirmation(false)}>
-								Cancel
+								{msg(messages.cancel)}
 							</button>
 							<button className="tlui-button tl-error-boundary__reset" onClick={resetLocalState}>
-								Reset data
+								{msg(messages.resetData)}
 							</button>
 						</div>
 					</>
 				) : (
 					<>
-						<h2>Something went wrong</h2>
-						<p>Please refresh your browser.</p>
-						<p>
-							If the issue continues after refreshing, you may need to reset the tldraw data stored
-							on your device.
-						</p>
+						<h2>{msg(messages.title)}</h2>
+						<p>{msg(messages.refreshHint)}</p>
+						<p>{msg(messages.resetHint)}</p>
 						<p>
-							<strong>Note:</strong> Resetting will erase your current project and any unsaved work.
+							<strong>{msg(messages.noteLabel)}</strong> {msg(messages.resetNote)}
 						</p>
 						{process.env.NODE_ENV !== 'production' && (
 							<p>
@@ -201,34 +249,34 @@ My browser: ${navigator.userAgent}`
 						)}
 						{shouldShowError && (
 							<>
-								Message:
+								{msg(messages.messageLabel)}
 								<h4>
 									<code>{errorMessage}</code>
 								</h4>
-								Stack trace:
+								{msg(messages.stackTraceLabel)}
 								<div className="tl-error-boundary__content__error">
 									<pre>
 										<code>{errorStack ?? errorMessage}</code>
 									</pre>
 									<button className="tlui-button" onClick={copyError}>
-										{didCopy ? 'Copied!' : 'Copy'}
+										{didCopy ? msg(messages.copied) : msg(messages.copy)}
 									</button>
 								</div>
 							</>
 						)}
 						<div className="tl-error-boundary__content__actions">
 							<button className="tlui-button" onClick={() => setShouldShowError(!shouldShowError)}>
-								{shouldShowError ? 'Hide details' : 'Show details'}
+								{shouldShowError ? msg(messages.hideDetails) : msg(messages.showDetails)}
 							</button>
 							<div className="tl-error-boundary__content__actions__group">
 								<button
 									className="tlui-button tl-error-boundary__reset"
 									onClick={() => setShouldShowResetConfirmation(true)}
 								>
-									Reset data
+									{msg(messages.resetData)}
 								</button>
 								<button className="tlui-button tl-error-boundary__refresh" onClick={refresh}>
-									Refresh page
+									{msg(messages.refreshPage)}
 								</button>
 							</div>
 						</div>

package/src/lib/config/TLI18n.test.ts

@@ -0,0 +1,84 @@
+import { describe, expect, it } from 'vitest'
+import {
+	TLI18n,
+	defaultI18n,
+	defineMessages,
+	getDeclaredMessages,
+	translateMessage,
+} from './TLI18n'
+
+const messages = defineMessages({
+	somethingWentWrong: { id: 'error.title', defaultMessage: 'Something went wrong' },
+	shapesSelected: {
+		id: 'a11y.multiple-shapes',
+		defaultMessage: '{num, plural, one {# shape selected} other {# shapes selected}}',
+	},
+	// A plain placeholder, which the regex stub below can substitute. The plural above needs a
+	// real ICU formatter, so the adapter's own handling of it is covered in packages/tldraw.
+	addedFiles: { id: 'test.added-files', defaultMessage: 'Added {total} files' },
+})
+
+function i18nWith(catalog: Record<string, string>): TLI18n {
+	return {
+		locale: 'en',
+		dir: 'ltr',
+		// Mirrors the real adapter: a message the catalog doesn't have falls back to its own
+		// English, and either way the values are substituted.
+		translate: (message, values) => {
+			const text = catalog[message.id] ?? message.defaultMessage
+			return text.replace(/\{(\w+)[^}]*\}/g, (_, name) => String(values?.[name] ?? ''))
+		},
+	}
+}
+
+describe('translateMessage', () => {
+	it('uses the translation when the catalog has one', () => {
+		const i18n = i18nWith({ 'error.title': 'Etwas ist schiefgelaufen' })
+		expect(translateMessage(i18n, messages.somethingWentWrong)).toBe('Etwas ist schiefgelaufen')
+	})
+
+	// @tldraw/editor is usable with none of tldraw's UI, so there may be no i18n at all.
+	it('falls back to the English when there is no i18n', () => {
+		expect(translateMessage(null, messages.somethingWentWrong)).toBe('Something went wrong')
+		expect(translateMessage(undefined, messages.somethingWentWrong)).toBe('Something went wrong')
+	})
+
+	// A message that hasn't been through Lokalise yet is absent from every catalog. Showing the id
+	// to someone would be worse than English.
+	it('falls back to the English when the catalog has no entry', () => {
+		expect(translateMessage(i18nWith({}), messages.somethingWentWrong)).toBe('Something went wrong')
+		expect(translateMessage(defaultI18n(), messages.somethingWentWrong)).toBe(
+			'Something went wrong'
+		)
+	})
+
+	// The adapter gets the whole message, so it can substitute into the English too. Falling back
+	// to the raw source instead put a plural message's own ICU into an upload toast.
+	it('substitutes values into the English it falls back to', () => {
+		expect(translateMessage(i18nWith({}), messages.addedFiles, { total: 3 })).toBe('Added 3 files')
+	})
+
+	it('passes values through to the translation', () => {
+		const i18n = i18nWith({ 'a11y.multiple-shapes': '{num} Formen ausgewählt' })
+		expect(translateMessage(i18n, messages.shapesSelected, { num: 3 })).toBe('3 Formen ausgewählt')
+	})
+})
+
+describe('defineMessages', () => {
+	it('returns the messages unchanged', () => {
+		const declared = { a: { id: 'x', defaultMessage: 'X' } }
+		expect(defineMessages(declared)).toEqual(declared)
+	})
+
+	// The SDK bundles no separate English catalog; a key looked up by id resolves against this.
+	it('records the English of each message it declares', () => {
+		defineMessages({
+			a: { id: 'test.declared', defaultMessage: 'Declared' },
+			b: { defaultMessage: 'No id' },
+		})
+		expect(getDeclaredMessages()).toMatchObject({
+			'test.declared': 'Declared',
+			'No id': 'No id',
+		})
+	})
+})

package/src/lib/config/TLI18n.ts

@@ -0,0 +1,172 @@
+import { atom } from '@tldraw/state'
+
+/**
+ * Values substituted into a message's ICU placeholders.
+ *
+ * @public
+ */
+export type TLI18nValues = Record<
+	string,
+	string | number | bigint | boolean | Date | null | undefined
+>
+
+/**
+ * The editor's view of the host app's translations. Lets code with no access to React context —
+ * a {@link ShapeUtil}, say — translate a string in the user's locale.
+ *
+ * @public
+ */
+export interface TLI18n {
+	locale: string
+	dir: 'ltr' | 'rtl'
+	/**
+	 * Translate `message` in the current locale, substituting `values` into its ICU placeholders.
+	 *
+	 * Takes the whole message rather than its id so an implementation can fall back to the English
+	 * and still substitute into it. A message absent from the catalog — anything not yet through
+	 * Lokalise — would otherwise have to come back as its own source text, placeholders and all.
+	 */
+	translate(message: TLI18nMessage, values?: TLI18nValues): string
+}
+
+/**
+ * Supplies a {@link TLI18n}. Called on each use rather than held as a value, so the editor reads
+ * the current locale instead of pinning whichever one was active when it was constructed.
+ *
+ * @public
+ */
+export type TLI18nAdapter = () => TLI18n
+
+/**
+ * The i18n used when the host app supplies none: every message comes back as its own English.
+ *
+ * Placeholders are left as they are, because formatting ICU needs a formatter and this package
+ * deliberately has none — it is the floor for an editor running with no translations at all.
+ *
+ * @public
+ */
+export function defaultI18n(): TLI18n {
+	return {
+		locale: 'en',
+		dir: 'ltr',
+		translate(message: TLI18nMessage) {
+			return message.defaultMessage
+		},
+	}
+}
+
+/**
+ * One translatable message: a stable `id` naming it in the catalog, and the English it falls back
+ * to. `defaultMessage` is required, because this package's strings have to read correctly with no
+ * translations loaded at all — `@tldraw/editor` can be used without any of tldraw's UI.
+ *
+ * @public
+ */
+export interface TLI18nMessage {
+	id: string
+	defaultMessage: string
+	description?: string
+}
+
+/**
+ * A message as it's written. The id is optional because a bundler plugin may supply it:
+ * `@formatjs/unplugin` with an `idInterpolationPattern` derives one from the message's own text,
+ * which is how tldraw.com does it. Everywhere downstream takes a {@link TLI18nMessage}, whose id
+ * is required, because {@link defineMessages} fills one in.
+ *
+ * @public
+ */
+export type TLI18nMessageInput = Omit<TLI18nMessage, 'id'> & { id?: string }
+
+const declaredMessages: Record<string, string> = {}
+// Bumped per `defineMessages` call, so a reader re-renders when a chunk loaded after mount — a
+// dynamically imported @tldraw/commenting, say — declares messages its labels look up by id.
+const declaredVersion = atom('declaredMessagesVersion', 0)
+let snapshot: Readonly<Record<string, string>> = {}
+let snapshotVersion = -1
+
+/**
+ * Declares messages so the extractor can find them, next to the UI that shows them — the English
+ * then lives with the code rather than in a catalog edited by hand. Call it by this name:
+ * `formatjs extract` matches the call by name, wherever it was imported from, so a wrapper under
+ * another name extracts nothing.
+ *
+ * Write the id yourself, as the SDK's own messages do — an app overrides by id, so an id has to
+ * survive a reworded English string. Leave it out only where a bundler plugin injects one; with no
+ * plugin either the English stands in, so the message still renders as itself. An id missing from
+ * a real build is caught by `pnpm i18n-extract --check`.
+ *
+ * The type parameter is `const` so each written `id` keeps its literal type, which is what lets a
+ * declared id go where a `TLUiTranslationKey` is expected — a menu item's `label`, say — instead
+ * of widening to `string` and needing a cast.
+ *
+ * For a message rendered as an element, write it inline on the `<F>` instead; the extractor reads
+ * those props directly. This is for the ones that can't be: a label the UI takes as data, and
+ * anything translated as a string through `useTranslation`.
+ *
+ * @example
+ *
+ * ```ts
+ * const messages = defineMessages({
+ * 	copy: { id: 'action.copy', defaultMessage: 'Copy' },
+ * })
+ * ```
+ *
+ * @public
+ */
+export function defineMessages<const Messages extends Record<string, TLI18nMessageInput>>(
+	msgs: Messages
+): { [K in keyof Messages]: Messages[K] & TLI18nMessage } {
+	const withIds = {} as { [K in keyof Messages]: Messages[K] & TLI18nMessage }
+	for (const key in msgs) {
+		const message = msgs[key]
+		const withId = (
+			message.id ? message : { ...message, id: message.defaultMessage }
+		) as Messages[typeof key] & TLI18nMessage
+		withIds[key] = withId
+		declaredMessages[withId.id] = withId.defaultMessage
+	}
+	declaredVersion.update((v) => v + 1)
+	return withIds
+}
+
+/**
+ * The English of every message declared so far, by id. This is the English catalog: building it
+ * from the declarations means it isn't bundled a second time as a generated file. A key looked up
+ * by id alone — a menu label, or an app calling `msg('action.copy')` — resolves against it.
+ *
+ * Declarations run as their modules load, so this is complete once the package has been imported.
+ * Reactive: read it inside `useValue` or a `computed` to pick up a module that loads later. The
+ * returned object changes identity only when something new is declared.
+ *
+ * @internal
+ */
+export function getDeclaredMessages(): Readonly<Record<string, string>> {
+	const version = declaredVersion.get()
+	if (version !== snapshotVersion) {
+		snapshot = { ...declaredMessages }
+		snapshotVersion = version
+	}
+	return snapshot
+}
+
+/**
+ * Translates `message` through an editor's i18n, falling back to its English.
+ *
+ * Takes the editor's i18n rather than reading a context, so it works in the places this package
+ * has to keep working: a `ShapeUtil` with no hooks available, or an error fallback rendered
+ * outside the editor it's reporting on.
+ *
+ * With no i18n at all the English is returned unformatted, for the reason given on
+ * {@link defaultI18n}. Every other case goes through the adapter, which does substitute.
+ *
+ * @public
+ */
+export function translateMessage(
+	i18n: TLI18n | null | undefined,
+	message: TLI18nMessage,
+	values?: TLI18nValues
+): string {
+	if (!i18n) return message.defaultMessage
+	return i18n.translate(message, values)
+}

package/src/lib/editor/Editor.ts

@@ -107,6 +107,7 @@ import {
 	getSnapshot,
 	loadSnapshot,
 } from '../config/TLEditorSnapshot'
+import { TLI18nAdapter, defaultI18n } from '../config/TLI18n'
 import {
 	DEFAULT_ANIMATION_OPTIONS,
 	DEFAULT_CAMERA_OPTIONS,
@@ -266,6 +267,11 @@ export interface TLEditorOptions {
 	 * given, the body element will be used.
 	 */
 	getContainer(): HTMLElement
+
+	/**
+	 * An i18n adapter for translating strings.
+	 */
+	i18n?: TLI18nAdapter
 	/**
 	 * Provides a way to hide shapes.
 	 *
@@ -373,9 +379,11 @@ export class Editor extends EventEmitter<TLEventMap> {
 		fontAssetUrls,
 		themes,
 		initialTheme,
+		i18n,
 	}: TLEditorOptions) {
 		super()
 
+		this.i18n = i18n ?? defaultI18n
 		this._getShapeVisibility = getShapeVisibility
 
 		// Merge deprecated textOptions prop with options.text
@@ -1018,6 +1026,13 @@ export class Editor extends EventEmitter<TLEventMap> {
 
 	readonly contextId = uniqueId()
 
+	/**
+	 * The i18n adapter for translating strings.
+	 *
+	 * @public
+	 */
+	readonly i18n: TLI18nAdapter
+
 	/**
 	 * The editor's store
 	 *
@@ -2292,12 +2307,8 @@ export class Editor extends EventEmitter<TLEventMap> {
 			firstParentId &&
 			selectedShapeIds.every((shapeId) => this.getShape(shapeId)?.parentId === firstParentId) &&
 			!isPageId(firstParentId)
-		// 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 filteredShapes = this.getCurrentPageShapes().filter((shape) =>
+			isSelectedWithinContainer ? shape.parentId === firstParentId : isPageId(shape.parentId)
 		)
 		const readingOrderShapes = this._getShapesInReadingOrder(filteredShapes)
 		const currentShapeId: TLShapeId | undefined =
@@ -2308,8 +2319,8 @@ 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
+			// Every candidate can be filtered out (e.g. every util returns false from canTabTo);
+			// indexing an empty list would hand getShape undefined
 			if (shapeIds.length === 0) return
 
 			const currentIndex = currentShapeId ? shapeIds.indexOf(currentShapeId) : -1
@@ -2333,6 +2344,8 @@ export class Editor extends EventEmitter<TLEventMap> {
 	/**
 	 * Generates a reading order for shapes based on rows grouping.
 	 * Tries to keep a natural reading order (left-to-right, top-to-bottom).
+	 * Shapes whose util returns `false` from {@link ShapeUtil.canTabTo} are left out. Locked
+	 * shapes are included, so keyboard users can reach them to unlock them.
 	 *
 	 * @public
 	 */
@@ -2514,6 +2527,15 @@ export class Editor extends EventEmitter<TLEventMap> {
 	}
 
 	private _selectShapesAndZoom(ids: TLShapeId[]) {
+		// setSelectedShapes is a no-op for an unchanged selection (Tab with a single shape,
+		// Ctrl+arrow with no neighbour); marking anyway would leave an empty stopping point
+		// that makes undo available with nothing to undo
+		const selectedShapeIds = this.getSelectedShapeIds()
+		const isSelectionChanging =
+			ids.length !== selectedShapeIds.length || ids.some((id) => !selectedShapeIds.includes(id))
+		if (isSelectionChanging) {
+			this.markHistoryStoppingPoint('selecting adjacent shape')
+		}
 		this.setSelectedShapes(ids)
 		this.zoomToSelectionIfOffscreen(256, {
 			animation: {
@@ -8177,10 +8199,12 @@ export class Editor extends EventEmitter<TLEventMap> {
 
 		let workingShape: TLShape | null = null
 
+		const initialPagePoint = Mat.applyToPoint(pageTransform, new Vec())
+
 		if (util.onResize && util.canResize(initialShape)) {
 			// get the model changes from the shape util
 			const newPagePoint = this._scalePagePoint(
-				Mat.applyToPoint(pageTransform, new Vec(0, 0)),
+				initialPagePoint,
 				scaleOrigin,
 				scale,
 				scaleAxisRotation
@@ -8200,11 +8224,8 @@ export class Editor extends EventEmitter<TLEventMap> {
 			myScale.x = areWidthAndHeightAlignedWithCorrectAxis ? scale.x : scale.y
 			myScale.y = areWidthAndHeightAlignedWithCorrectAxis ? scale.y : scale.x
 
-			// adjust initial model for situations where the parent has moved during the resize
-			// e.g. groups
-			const initialPagePoint = Mat.applyToPoint(pageTransform, new Vec())
-
-			// need to adjust the shape's x and y points in case the parent has moved since start of resizing
+			// need to adjust the shape's x and y points in case the parent has moved since start of
+			// resizing, e.g. groups
 			const { x, y } = this.getPointInParentSpace(initialShape.id, initialPagePoint)
 
 			workingShape = initialShape
@@ -8261,29 +8282,32 @@ export class Editor extends EventEmitter<TLEventMap> {
 			scaleAxisRotation
 		)
 
-		const initialPageCenterInParentSpace = this.getPointInParentSpace(
+		// A parent-space delta added to the shape's initial x/y would double-count the parent's own
+		// move during the same gesture — a repositioned group carries its children with it (#10617).
+		const repositionedPagePoint = Vec.Add(
+			newPageCenter,
+			Vec.Sub(initialPagePoint, initialPageCenter)
+		)
+		const repositionedLocalPoint = this.getPointInParentSpace(
 			initialShape.id,
-			initialPageCenter
+			repositionedPagePoint
 		)
-		const newPageCenterInParentSpace = this.getPointInParentSpace(initialShape.id, newPageCenter)
-
-		const delta = Vec.Sub(newPageCenterInParentSpace, initialPageCenterInParentSpace)
 
 		if (workingShape) {
 			// the util's onResize ran but returned no change; keep the working update (which may
 			// include changes from onResizeStart / onResizeEnd) and reposition the shape
 			return {
 				...workingShape,
-				x: initialShape.x + delta.x,
-				y: initialShape.y + delta.y,
+				x: repositionedLocalPoint.x,
+				y: repositionedLocalPoint.y,
 			}
 		}
 
 		return {
 			id,
 			type: initialShape.type as any,
-			x: initialShape.x + delta.x,
-			y: initialShape.y + delta.y,
+			x: repositionedLocalPoint.x,
+			y: repositionedLocalPoint.y,
 		}
 	}
 
@@ -11551,7 +11575,11 @@ export class Editor extends EventEmitter<TLEventMap> {
 						break
 					}
 					case 'key_repeat': {
-						// noop
+						// A repeat is the only positive evidence that a key is still physically
+						// down, so it is also the only way one we lost track of can get back in.
+						// A key still held when Meta is released is dropped there on the
+						// assumption macOS ate its keyup; this is what corrects that.
+						inputs.keys.add(info.code)
 						break
 					}
 				}

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

@@ -68,16 +68,32 @@ export function deriveShapeIdsInCurrentPage(store: TLStore, getCurrentPageId: ()
 			prevValue
 		) as IncrementalSetConstructor<TLShapeId>
 
+		const addedIds = new Set<TLShapeId>()
+
 		for (const changes of diff) {
 			for (const record of Object.values(changes.added)) {
-				if (isShape(record) && isShapeInPage(store, currentPageId, record)) {
+				if (!isShape(record)) continue
+				addedIds.add(record.id)
+				if (isShapeInPage(store, currentPageId, record)) {
 					builder.add(record.id)
 				}
 			}
 
-			for (const [_from, to] of Object.values(changes.updated)) {
+			for (const [from, to] of Object.values(changes.updated)) {
 				if (isShape(to)) {
-					if (isShapeInPage(store, currentPageId, to)) {
+					const inPage = isShapeInPage(store, currentPageId, to)
+					// A reparent that moves a shape onto or off this page takes its descendants
+					// with it, but they are not in the diff; rebuild so they don't keep stale membership.
+					// A shape created in this diff has no pre-existing descendants, so it can't go stale.
+					if (
+						isShape(from) &&
+						from.parentId !== to.parentId &&
+						!addedIds.has(to.id) &&
+						inPage !== prevValue.has(to.id)
+					) {
+						return fromScratch()
+					}
+					if (inPage) {
 						builder.add(to.id)
 					} else {
 						builder.remove(to.id)

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

@@ -164,6 +164,23 @@ describe('EdgeScrollManager', () => {
 			edgeScrollManager.updateEdgeScrolling(150)
 			expect(editor.setCamera).toHaveBeenCalled()
 		})
+
+		it('should start easing after the edge scroll delay', () => {
+			mockInputs.setCurrentScreenPoint(new Vec(0, 300))
+
+			edgeScrollManager.updateEdgeScrolling(200)
+			expect(editor.setCamera).not.toHaveBeenCalled()
+
+			// 20ms into a 200ms cubic ease, the speed factor is 0.1³.
+			edgeScrollManager.updateEdgeScrolling(20)
+			expect((editor.setCamera.mock.calls[0][0] as Vec).x).toBeCloseTo(0.03)
+
+			editor.setCamera.mockClear()
+
+			// The ease reaches full speed 200ms after the delay.
+			edgeScrollManager.updateEdgeScrolling(180)
+			expect((editor.setCamera.mock.calls[0][0] as Vec).x).toBeCloseTo(270)
+		})
 	})
 
 	describe('edge proximity detection', () => {

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

@@ -47,8 +47,8 @@ export class EdgeScrollManager {
 						? EASINGS.easeInCubic(
 								Math.min(
 									1,
-									this._edgeScrollDuration /
-										(editor.options.edgeScrollDelay + editor.options.edgeScrollEaseDuration)
+									(this._edgeScrollDuration - editor.options.edgeScrollDelay) /
+										editor.options.edgeScrollEaseDuration
 								)
 							)
 						: 1

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

@@ -101,6 +101,7 @@ describe('FontManager', () => {
 			getCurrentPageShapeIds: vi.fn(() => new Set()),
 			getShape: vi.fn(),
 			getContainerDocument: vi.fn(() => document),
+			timers: { requestAnimationFrame: vi.fn() },
 			isDisposed: false,
 		} as any