@tldraw/editor 5.5.2 → 5.6.0-canary.035b741dc331

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tldraw/editor",
   "description": "tldraw infinite canvas SDK (editor).",
-  "version": "5.5.2",
+  "version": "5.6.0-canary.035b741dc331",
   "author": {
     "name": "tldraw Inc.",
     "email": "hello@tldraw.com"
@@ -39,27 +39,16 @@
     "dist-cjs",
     "src"
   ],
-  "scripts": {
-    "test-ci": "yarn run -T vitest run --passWithNoTests",
-    "test": "yarn run -T vitest --passWithNoTests",
-    "test-coverage": "yarn run -T vitest run --coverage --passWithNoTests",
-    "build": "yarn run -T tsx ../../internal/scripts/build-package.ts",
-    "build-api": "yarn run -T tsx ../../internal/scripts/build-api.ts",
-    "prepack": "yarn run -T tsx ../../internal/scripts/prepack.ts",
-    "postpack": "../../internal/scripts/postpack.sh",
-    "pack-tarball": "yarn pack",
-    "lint": "yarn run -T tsx ../../internal/scripts/lint.ts"
-  },
   "dependencies": {
     "@tiptap/core": "^3.12.1",
     "@tiptap/pm": "^3.12.1",
     "@tiptap/react": "^3.12.1",
-    "@tldraw/state": "5.5.2",
-    "@tldraw/state-react": "5.5.2",
-    "@tldraw/store": "5.5.2",
-    "@tldraw/tlschema": "5.5.2",
-    "@tldraw/utils": "5.5.2",
-    "@tldraw/validate": "5.5.2",
+    "@tldraw/state": "5.6.0-canary.035b741dc331",
+    "@tldraw/state-react": "5.6.0-canary.035b741dc331",
+    "@tldraw/store": "5.6.0-canary.035b741dc331",
+    "@tldraw/tlschema": "5.6.0-canary.035b741dc331",
+    "@tldraw/utils": "5.6.0-canary.035b741dc331",
+    "@tldraw/validate": "5.6.0-canary.035b741dc331",
     "classnames": "^2.5.1",
     "eventemitter3": "^4.0.7",
     "idb": "^7.1.1",
@@ -79,7 +68,6 @@
     "@types/react-dom": "^19.2.3",
     "@types/wicg-file-system-access": "^2020.9.8",
     "fake-indexeddb": "^4.0.2",
-    "lazyrepo": "0.0.0-alpha.27",
     "react": "^19.2.1",
     "react-dom": "^19.2.1",
     "resize-observer-polyfill": "^1.5.1",
@@ -96,5 +84,15 @@
       "require": "./dist-cjs/index.js"
     },
     "./editor.css": "./editor.css"
+  },
+  "scripts": {
+    "test-ci": "pnpm exec vitest run --passWithNoTests",
+    "test": "pnpm exec vitest --passWithNoTests",
+    "test-coverage": "pnpm exec vitest run --coverage --passWithNoTests",
+    "build": "pnpm exec tsx ../../internal/scripts/build-package.ts",
+    "build-api": "pnpm exec tsx ../../internal/scripts/build-api.ts",
+    "pack-tarball": "pnpm pack",
+    "lint": "pnpm exec tsx ../../internal/scripts/lint.ts",
+    "build-types": "tsc --build"
   }
 }

package/src/lib/editor/Editor.ts

@@ -137,6 +137,7 @@ import {
 	areAnglesCompatible,
 	clamp,
 	pointInPolygon,
+	shortAngleDist,
 } from '../primitives/utils'
 import { Vec, VecLike } from '../primitives/Vec'
 import { areShapesContentEqual } from '../utils/areShapesContentEqual'
@@ -5122,7 +5123,11 @@ export class Editor extends EventEmitter<TLEventMap> {
 		const freshPage = this.getPage(id) // get the most recent version of the page anyway
 		if (!freshPage) return this
 
-		const prevCamera = { ...this.getCamera() }
+		// Read the source page's own camera rather than getCamera(), which is the
+		// current page's and is wrong when duplicating a page that isn't being viewed
+		const prevCamera = {
+			...(this.store.get(CameraRecordType.createId(freshPage.id)) ?? this.getCamera()),
+		}
 		const content = this.getContentFromCurrentPage(this.getSortedChildIdsForParent(freshPage.id))
 
 		this.run(() => {
@@ -5137,8 +5142,9 @@ export class Editor extends EventEmitter<TLEventMap> {
 			this.setCamera(prevCamera)
 
 			if (content) {
-				// If we had content on the previous page, put it on the new page
-				return this.putContentOntoCurrentPage(content)
+				// Without preservePosition the paste rule recenters off-screen content
+				// in the viewport, so the copy's layout would not match the original
+				return this.putContentOntoCurrentPage(content, { preservePosition: true })
 			}
 		})
 
@@ -8313,6 +8319,9 @@ export class Editor extends EventEmitter<TLEventMap> {
 			initialShape: TLShape
 			isAspectRatioLocked: boolean
 			initialPageTransform: MatLike
+			dragHandle?: TLResizeHandle
+			mode?: TLResizeMode
+			skipStartAndEndCallbacks?: boolean
 		}
 	) {
 		const { type } = options.initialShape
@@ -8337,19 +8346,39 @@ export class Editor extends EventEmitter<TLEventMap> {
 			initialBounds: options.initialBounds,
 			isAspectRatioLocked: options.isAspectRatioLocked,
 			initialPageTransform: options.initialPageTransform,
+			dragHandle: options.dragHandle,
+			mode: options.mode,
+			// this is one frame of the same resize, not a new one, so don't fire start/end again
+			skipStartAndEndCallbacks: options.skipStartAndEndCallbacks,
 		})
 
 		// then if the shape is flipped in one axis only, we need to apply an extra rotation
 		// to make sure the shape is mirrored correctly
 		if (Math.sign(scale.x) * Math.sign(scale.y) < 0) {
-			// We need to compute the new local rotation that will result in the negated page rotation.
-			// For a shape with local rotation `localRot` and parent page rotation `parentRot`:
+			// Mirroring across an axis at angle `axisRot` maps a page rotation `pageRot` to
+			// `2 * axisRot - pageRot`. For a shape with local rotation `localRot` whose parent had
+			// page rotation `parentRot` when the resize began:
 			// - pageRot = parentRot + localRot
-			// - newPageRot = -pageRot (we want to negate the page rotation)
-			// - newPageRot = parentRot + newLocalRot (parent hasn't changed)
-			// - Therefore: newLocalRot = -pageRot - parentRot = -(parentRot + localRot) - parentRot = -localRot - 2*parentRot
+			// - newPageRot = 2 * axisRot - pageRot
+			// - newPageRot = (parentRot + parentDelta) + newLocalRot
+			// - Therefore: newLocalRot = 2 * axisRot - localRot - 2 * parentRot - parentDelta
+			// `parentDelta` is how far the parent has rotated since the resize began. Nested resizes
+			// commit ancestors before descendants, so an unaligned parent may itself have been
+			// flipped by the time its child gets here; reading the parent's current rotation as if
+			// it were the initial one would then double-count that flip.
 			const parentRotation = this.getShapeParentTransform(id).rotation()
-			const rotation = -options.initialShape.rotation - 2 * parentRotation
+			// take the shortest arc so the stored rotation doesn't drift by 2π when the parent
+			// hasn't moved and the initial page rotation happens to be wrapped
+			const parentDelta = shortAngleDist(
+				Mat.Cast(options.initialPageTransform).rotation() - options.initialShape.rotation,
+				parentRotation
+			)
+			const initialParentRotation = parentRotation - parentDelta
+			const rotation =
+				2 * options.scaleAxisRotation -
+				options.initialShape.rotation -
+				2 * initialParentRotation -
+				parentDelta
 			this.updateShapes([{ id, type, rotation }])
 		}
 

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

@@ -444,13 +444,11 @@ export class ScribbleManager {
 			}
 		}
 
-		// Remove completed items in individual fade mode
+		// Keep starting scribbles with no point yet, or addPoint can't find them (#7681).
 		if (session.options.fadeMode === 'individual') {
-			for (let i = session.items.length - 1; i >= 0; i--) {
-				if (session.items[i].scribble.points.length === 0) {
-					session.items.splice(i, 1)
-				}
-			}
+			session.items = session.items.filter(
+				({ scribble }) => scribble.points.length > 0 || scribble.state === 'starting'
+			)
 		}
 	}
 

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

@@ -1,5 +1,6 @@
 import { VecModel } from '@tldraw/tlschema'
 import { Box } from '../../../primitives/Box'
+import { clamp } from '../../../primitives/utils'
 import { Vec } from '../../../primitives/Vec'
 import { TLResizeHandle } from '../../types/selection-types'
 import type { TLBaseBoxShape } from '../BaseBoxShapeUtil'
@@ -36,29 +37,31 @@ export function resizeBox<T extends TLBaseBoxShape>(
 	const offset = new Vec(0, 0)
 
 	if (w > 0) {
-		if (w < minWidth) {
+		const clampedW = clamp(w, minWidth, maxWidth)
+		if (clampedW !== w) {
 			switch (handle) {
 				case 'top_left':
 				case 'left':
 				case 'bottom_left': {
-					offset.x = w - minWidth
+					offset.x = w - clampedW
 					break
 				}
 				case 'top':
 				case 'bottom': {
-					offset.x = (w - minWidth) / 2
+					offset.x = (w - clampedW) / 2
 					break
 				}
 				default: {
 					offset.x = 0
 				}
 			}
-			w = minWidth
+			w = clampedW
 		}
 	} else {
 		offset.x = w
 		w = -w
-		if (w < minWidth) {
+		const clampedW = clamp(w, minWidth, maxWidth)
+		if (clampedW !== w) {
 			switch (handle) {
 				case 'top_left':
 				case 'left':
@@ -67,26 +70,27 @@ export function resizeBox<T extends TLBaseBoxShape>(
 					break
 				}
 				default: {
-					offset.x = -minWidth
+					offset.x = -clampedW
 				}
 			}
 
-			w = minWidth
+			w = clampedW
 		}
 	}
 
 	if (h > 0) {
-		if (h < minHeight) {
+		const clampedH = clamp(h, minHeight, maxHeight)
+		if (clampedH !== h) {
 			switch (handle) {
 				case 'top_left':
 				case 'top':
 				case 'top_right': {
-					offset.y = h - minHeight
+					offset.y = h - clampedH
 					break
 				}
 				case 'right':
 				case 'left': {
-					offset.y = (h - minHeight) / 2
+					offset.y = (h - clampedH) / 2
 					break
 				}
 				default: {
@@ -94,12 +98,13 @@ export function resizeBox<T extends TLBaseBoxShape>(
 				}
 			}
 
-			h = minHeight
+			h = clampedH
 		}
 	} else {
 		offset.y = h
 		h = -h
-		if (h < minHeight) {
+		const clampedH = clamp(h, minHeight, maxHeight)
+		if (clampedH !== h) {
 			switch (handle) {
 				case 'top_left':
 				case 'top':
@@ -108,10 +113,10 @@ export function resizeBox<T extends TLBaseBoxShape>(
 					break
 				}
 				default: {
-					offset.y = -minHeight
+					offset.y = -clampedH
 				}
 			}
-			h = minHeight
+			h = clampedH
 		}
 	}
 
@@ -122,8 +127,8 @@ export function resizeBox<T extends TLBaseBoxShape>(
 		x,
 		y,
 		props: {
-			w: Math.min(maxWidth, w),
-			h: Math.min(maxHeight, h),
+			w,
+			h,
 		},
 	}
 }

package/src/lib/hooks/useCursor.ts

@@ -23,8 +23,9 @@ function getCursorCss(
 	const dx = 1 * c - 1 * s
 	const dy = 1 * s + 1 * c
 
+	// A raw '#' in the colour (hex) would end the unencoded data url as a fragment.
 	return (
-		`url("data:image/svg+xml,<svg height='32' width='32' viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg' style='color: ${color};'><defs><filter id='shadow' y='-40%' x='-40%' width='180px' height='180%' color-interpolation-filters='sRGB'><feDropShadow dx='${dx}' dy='${dy}' stdDeviation='1.2' flood-opacity='.5'/></filter></defs><g fill='none' transform='rotate(${
+		`url("data:image/svg+xml,<svg height='32' width='32' viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg' style='color: ${encodeURIComponent(color)};'><defs><filter id='shadow' y='-40%' x='-40%' width='180px' height='180%' color-interpolation-filters='sRGB'><feDropShadow dx='${dx}' dy='${dy}' stdDeviation='1.2' flood-opacity='.5'/></filter></defs><g fill='none' transform='rotate(${
 			r + tr
 		} 16 16)${f ? ` scale(-1,-1) translate(0, -32)` : ''}' filter='url(%23shadow)'>` +
 		svg.replaceAll(`"`, `'`) +
@@ -32,7 +33,8 @@ function getCursorCss(
 	)
 }
 
-const STATIC_CURSORS = [
+// Cursors that map straight to a prerendered `--tl-cursor-*` css variable rather than a runtime svg.
+const STATIC_CURSORS = new Set<TLCursorType>([
 	'default',
 	'pointer',
 	'cross',
@@ -43,11 +45,14 @@ const STATIC_CURSORS = [
 	'text',
 	'zoom-in',
 	'zoom-out',
-]
+	'rotate',
+	'resize-edge',
+	'resize-corner',
+])
 
 type CursorFunction = (rotation: number, flip: boolean, color: string) => string
 
-const CURSORS: Record<TLCursorType, CursorFunction> = {
+const DYNAMIC_CURSORS: Record<TLCursorType, CursorFunction> = {
 	none: () => 'none',
 	'ew-resize': (r, f, c) => getCursorCss(EDGE_SVG, r, 0, f, c),
 	'ns-resize': (r, f, c) => getCursorCss(EDGE_SVG, r, 90, f, c),
@@ -61,7 +66,8 @@ const CURSORS: Record<TLCursorType, CursorFunction> = {
 
 /** @public */
 export function getCursor(cursor: TLCursorType, rotation = 0, color = 'black') {
-	return CURSORS[cursor](radiansToDegrees(rotation), false, color)
+	if (STATIC_CURSORS.has(cursor)) return `var(--tl-cursor-${cursor})`
+	return DYNAMIC_CURSORS[cursor](radiansToDegrees(rotation), false, color)
 }
 
 export function useCursor() {
@@ -73,8 +79,9 @@ export function useCursor() {
 		() => {
 			const { type, rotation } = editor.getInstanceState().cursor
 
-			if (STATIC_CURSORS.includes(type)) {
-				container.style.setProperty('--tl-cursor', `var(--tl-cursor-${type})`)
+			// Static cursors don't need the theme colour, so skip reading it to avoid depending on it.
+			if (STATIC_CURSORS.has(type)) {
+				container.style.setProperty('--tl-cursor', getCursor(type))
 				return
 			}
 

package/src/lib/test/useCursor.test.tsx

@@ -0,0 +1,36 @@
+import { act, render } from '@testing-library/react'
+import { createTLStore } from '../config/createTLStore'
+import { Editor } from '../editor/Editor'
+import { getCursor } from '../hooks/useCursor'
+import { TL_CONTAINER_CLASS, TldrawEditor } from '../TldrawEditor'
+
+describe('useCursor', () => {
+	it('maps the static schema cursor types to their css variables', async () => {
+		let editor: Editor
+		const store = createTLStore({ shapeUtils: [], bindingUtils: [] })
+		await act(async () => {
+			render(<TldrawEditor store={store} onMount={(e) => void (editor = e)} />)
+		})
+		const container = document.querySelector(`.${TL_CONTAINER_CLASS}`) as HTMLElement
+
+		for (const type of ['rotate', 'resize-edge', 'resize-corner', 'default'] as const) {
+			act(() => editor.setCursor({ type, rotation: 0 }))
+			expect(container.style.getPropertyValue('--tl-cursor')).toBe(`var(--tl-cursor-${type})`)
+		}
+	})
+})
+
+describe('getCursor', () => {
+	it('returns the css variable for the static cursor types', () => {
+		for (const type of ['rotate', 'resize-edge', 'resize-corner', 'default'] as const) {
+			expect(getCursor(type)).toBe(`var(--tl-cursor-${type})`)
+			expect(getCursor(type, Math.PI / 2, '#000000')).toBe(`var(--tl-cursor-${type})`)
+		}
+	})
+
+	it('encodes the colour so a hex value does not end the data url as a fragment', () => {
+		const css = getCursor('ew-resize', 0, '#000000')
+		expect(css).toContain("style='color: %23000000;'")
+		expect(css).not.toContain('#')
+	})
+})

package/src/lib/utils/sync/TLLocalSyncClient.test.ts

@@ -484,3 +484,76 @@ test('a buffered newer schema reports a load error without announcing a successf
 	client.close()
 	expect(client.db.storeSnapshot).not.toHaveBeenCalled()
 })
+
+test('a client created on the same key while a closed client is still flushing waits for that flush', async () => {
+	const inFlightWrite = promiseWithResolve<void>()
+	const { client, tick } = testClient()
+	client.db.storeSnapshot.mockImplementationOnce(() => inFlightWrite)
+	await tick()
+	client.store.put([PageRecordType.create({ name: 'first', index: 'a0' as IndexKey })])
+	await tick()
+	expect(client.db.storeSnapshot).toHaveBeenCalledTimes(1) // still in flight
+	client.store.put([PageRecordType.create({ name: 'during write', index: 'a1' as IndexKey })])
+	client.close()
+
+	// remount on the same key while the old client is still flushing
+	const loadSpy = vi.spyOn(LocalIndexedDb.prototype, 'load')
+	const next = testClient()
+	await tick()
+	// reading now would miss the queued edit, then erase it on the first write
+	expect(loadSpy).not.toHaveBeenCalled()
+	expect(next.onLoad).not.toHaveBeenCalled()
+
+	inFlightWrite.resolve()
+	await tick()
+	expect(client.db.storeChanges).toHaveBeenCalledTimes(1)
+	for (let i = 0; i < 20; i++) await Promise.resolve()
+	await next.tick()
+	expect(loadSpy).toHaveBeenCalledTimes(1)
+	expect(next.onLoad).toHaveBeenCalledTimes(1)
+	loadSpy.mockRestore()
+})
+
+test('two clients closing on the same key flush in order', async () => {
+	const writes: string[] = []
+	const inFlightWrite = promiseWithResolve<void>()
+
+	const a = testClient()
+	const b = testClient()
+	await a.tick()
+	await b.tick()
+	// hold a's first write in flight
+	a.client.db.storeSnapshot.mockImplementation(() => {
+		writes.push('a')
+		return inFlightWrite
+	})
+	a.client.db.storeChanges.mockImplementation(() => {
+		writes.push('a')
+		return Promise.resolve()
+	})
+	b.client.db.storeSnapshot.mockImplementation(() => {
+		writes.push('b')
+		return Promise.resolve()
+	})
+	b.client.db.storeChanges.mockImplementation(() => {
+		writes.push('b')
+		return Promise.resolve()
+	})
+
+	a.client.store.put([PageRecordType.create({ name: 'a1', index: 'a0' as IndexKey })])
+	await a.tick()
+	expect(writes).toEqual(['a']) // in flight
+	a.client.store.put([PageRecordType.create({ name: 'a2', index: 'a1' as IndexKey })])
+	a.client.close()
+
+	b.client.store.put([PageRecordType.create({ name: 'b1', index: 'a2' as IndexKey })])
+	b.client.close()
+	await b.tick()
+	// b's snapshot landing first would lose a's queued changes
+	expect(writes).toEqual(['a'])
+
+	inFlightWrite.resolve()
+	await a.tick()
+	await b.tick()
+	expect(writes).toEqual(['a', 'a', 'b'])
+})

package/src/lib/utils/sync/TLLocalSyncClient.ts

@@ -1,7 +1,7 @@
 import { Signal, transact } from '@tldraw/state'
 import { RecordsDiff, SerializedSchema, UnknownRecord, squashRecordDiffs } from '@tldraw/store'
 import { TLStore } from '@tldraw/tlschema'
-import { assert } from '@tldraw/utils'
+import { assert, noop } from '@tldraw/utils'
 import {
 	TAB_ID,
 	TLSessionStateSnapshot,
@@ -64,6 +64,9 @@ export class BroadcastChannelMock {
 
 const BC = typeof BroadcastChannel === 'undefined' ? BroadcastChannelMock : BroadcastChannel
 
+// Flushes still running for closed clients, by key. See connect() and close().
+const pendingFlushes = new Map<string, Promise<void>>()
+
 /** @internal */
 export class TLLocalSyncClient {
 	private disposables = new Set<() => void>()
@@ -238,6 +241,11 @@ export class TLLocalSyncClient {
 			this.channel.close()
 		})
 
+		// our first write is a full snapshot, so it would erase whatever a client that just closed
+		// on this key is still flushing
+		await pendingFlushes.get(this.persistenceKey)
+		if (this.didDispose) return
+
 		try {
 			data = await this.db.load({ sessionId: this.sessionId })
 		} catch (error: any) {
@@ -313,8 +321,6 @@ export class TLLocalSyncClient {
 		if (this.didDispose) return
 		this.debug('closing')
 		this.didDispose = true
-		// Store listeners normally run on the next frame; collect the last edits before removal.
-		this.store._flushHistory()
 		this.disposables.forEach((d) => d())
 		if (this.scheduledPersistTimeout) {
 			clearTimeout(this.scheduledPersistTimeout)
@@ -323,7 +329,18 @@ export class TLLocalSyncClient {
 		if (typeof window !== 'undefined' && (window as any).tlsync === this) {
 			delete (window as any).tlsync
 		}
-		this.flushAndCloseDb()
+		// flush now when the key is idle: close() runs during teardown, where a deferred write may
+		// never run. wait when it isn't, or our snapshot lands first and gets overwritten.
+		// connect() awaits this, so it must never reject
+		const previous = pendingFlushes.get(this.persistenceKey)
+		const flush = (previous ? previous.then(() => this.flushAndCloseDb()) : this.flushAndCloseDb())
+			.catch(noop)
+			.then(() => {
+				if (pendingFlushes.get(this.persistenceKey) === flush) {
+					pendingFlushes.delete(this.persistenceKey)
+				}
+			})
+		pendingFlushes.set(this.persistenceKey, flush)
 	}
 
 	/**
@@ -332,17 +349,16 @@ export class TLLocalSyncClient {
 	 * store), and only when something is queued: shouldDoFullDBWrite stays true until the first
 	 * persist, so an unconditional flush would rewrite the whole document on every no-op close.
 	 */
-	private flushAndCloseDb() {
+	private flushAndCloseDb(): Promise<void> {
 		// A persist in flight can't be joined (persistIfNeeded bails while one is running) and,
 		// now that we're disposed, won't schedule a follow-up. Edits queued during that write
 		// would be lost if the db closed now, so wait for it and flush again.
 		if (this.persistPromise) {
-			this.persistPromise.then(() => this.flushAndCloseDb())
-			return
+			return this.persistPromise.then(() => this.flushAndCloseDb())
 		}
 		if (this.didLoad && this.diffQueue.length > 0) this.persistIfNeeded()
 		// the db waits for the transaction the flush just opened before actually closing
-		this.db.close()
+		return this.db.close()
 	}
 
 	private isPersisting = false

package/src/version.ts

@@ -1,9 +1,9 @@
 // This file is automatically generated by internal/scripts/refresh-assets.ts.
 // Do not edit manually. Or do, I'm a comment, not a cop.
 
-export const version = '5.5.2'
+export const version = '5.6.0-canary.035b741dc331'
 export const publishDates = {
 	major: '2026-05-06T16:28:18.473Z',
-	minor: '2026-09-30T10:03:27.724Z',
-	patch: '2026-10-02T13:35:40.683Z',
+	minor: '2026-10-06T06:00:33.486Z',
+	patch: '2026-10-06T06:00:33.486Z',
 }