@tldraw/editor 5.5.0 → 5.6.0-canary.669b4c97f643

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.0'
+export const version = '5.6.0-canary.669b4c97f643'
 export const publishDates = {
 	major: '2026-05-06T16:28:18.473Z',
-	minor: '2026-09-30T10:03:27.724Z',
-	patch: '2026-09-30T10:03:27.724Z',
+	minor: '2026-09-30T12:35:27.842Z',
+	patch: '2026-09-30T12:35:27.842Z',
 }