@tldraw/editor 5.4.2 → 5.5.0-canary.0241f11f2e99

package/src/lib/exports/getSvgJsx.tsx

@@ -1,5 +1,5 @@
 import { useAtom, useValue } from '@tldraw/state-react'
-import { TLFrameShape, TLShape, TLShapeId } from '@tldraw/tlschema'
+import { DefaultColorStyle, TLShape, TLShapeId } from '@tldraw/tlschema'
 import { TLFontFace } from '@tldraw/tlschema'
 import { hasOwnProperty, promiseWithResolve, uniqueId } from '@tldraw/utils'
 import {
@@ -117,6 +117,7 @@ export function getSvgJsx(editor: Editor, ids: TLShapeId[], opts: TLImageExportO
 			colorMode={colorMode}
 			renderingShapes={renderingShapes}
 			onMount={initialEffectPromise.resolve}
+			onError={exportDelay.fail}
 			waitUntil={exportDelay.waitUntil}
 		>
 			{}
@@ -208,6 +209,7 @@ function SvgExport({
 	colorMode,
 	renderingShapes,
 	onMount,
+	onError,
 	waitUntil,
 }: {
 	editor: Editor
@@ -221,6 +223,7 @@ function SvgExport({
 	colorMode: 'light' | 'dark'
 	renderingShapes: TLRenderingShape[]
 	onMount(): void
+	onError(error: unknown): void
 	waitUntil(promise: Promise<void>): void
 }) {
 	const masksId = useUniqueSafeId()
@@ -283,6 +286,8 @@ function SvgExport({
 			throw new Error('SvgExport should only render once - do not use with react strict mode')
 		}
 		didRenderRef.current = true
+		// the promise is caught at the end: a throwing `toSvg` would otherwise leave `onMount`
+		// pending forever, so the export would wait out its max delay and snapshot an empty svg
 		;(async () => {
 			const shapeDefs: Record<string, { pending: false; element: ReactElement }> = {}
 
@@ -418,8 +423,17 @@ function SvgExport({
 					defsById: { ...state.defsById, ...shapeDefs },
 				}))
 			})
-		})()
-	}, [bbox, editor, exportContext, masksId, renderingShapes, singleFrameShapeId, stateAtom])
+		})().catch(onError)
+	}, [
+		bbox,
+		editor,
+		exportContext,
+		masksId,
+		onError,
+		renderingShapes,
+		singleFrameShapeId,
+		stateAtom,
+	])
 
 	useEffect(() => {
 		const fontsInUse = new Set<TLFontFace>()
@@ -449,19 +463,17 @@ function SvgExport({
 	let backgroundColor = background ? colors.background : 'transparent'
 
 	if (singleFrameShapeId && background) {
-		const frameShapeUtil = editor.getShapeUtil('frame') as any as
-			| undefined
-			| {
-					options: {
-						showColors: boolean
-					}
-			  }
-		if (frameShapeUtil?.options.showColors) {
-			const shape = editor.getShape(singleFrameShapeId)! as TLFrameShape
-			backgroundColor = getColorValue(colors, shape.props.color, 'frameFill')
-		} else {
-			backgroundColor = colors.solid
-		}
+		// the frame-like shape's own util decides this - it may not be the default 'frame' util
+		const shape = editor.getShape(singleFrameShapeId)!
+		const { showColors } = editor.getShapeUtil(shape).options as { showColors?: boolean }
+		// the color style may live under any prop key, so look it up through the style map and
+		// fall back to a literal `color` prop for frame-like shapes that don't use the style
+		const color = showColors
+			? (editor.getShapeStyleIfExists(shape, DefaultColorStyle) ??
+				('color' in shape.props ? shape.props.color : null))
+			: null
+		backgroundColor =
+			typeof color === 'string' ? getColorValue(colors, color, 'frameFill') : colors.solid
 	}
 
 	return (

package/src/lib/exports/parseCss.test.ts

@@ -119,6 +119,10 @@ test('parseCss', () => {
 		    },
 		  ],
 		  "imports": [
+		    {
+		      "extras": "",
+		      "url": "https://example.com/font.css",
+		    },
 		    {
 		      "extras": " screen and (min-width: 900px)",
 		      "url": "thing.css",

package/src/lib/exports/parseCss.ts

@@ -2,7 +2,7 @@ import { safeParseUrl } from '@tldraw/utils'
 
 export interface ParsedFontFace {
 	fontFace: string
-	urls: { original: string; resolved: string | null; embedded?: Promise<string | null> }[]
+	urls: { original: string; resolved: string | null }[]
 	fontFamilies: Set<string>
 }
 
@@ -18,7 +18,7 @@ export interface ParsedFontFace {
 // Parse @import declarations:
 // https://developer.mozilla.org/en-US/docs/Web/CSS/@import#formal_syntax
 const importsRegex =
-	/@import\s+(?:"([^"]+)"|'([^']+)'|url\s*\(\s*(?:"([^"]+)"|'([^']+)'|([^'")]+))\s*\))([^;]+);/gi
+	/@import\s+(?:"([^"]+)"|'([^']+)'|url\s*\(\s*(?:"([^"]+)"|'([^']+)'|([^'")]+))\s*\))([^;]*);/gi
 
 // Locate @font-face declarations:
 const fontFaceRegex = /@font-face\s*{([^}]+)}/gi

package/src/lib/license/LicenseManager.ts

@@ -1,4 +1,5 @@
 import { atom, transact } from '@tldraw/state'
+import { noop } from '@tldraw/utils'
 import { publishDates, version } from '../../version'
 import { getDefaultCdnBaseUrl } from '../utils/assets'
 import { importPublicKey, str2ab } from '../utils/licensing'
@@ -127,6 +128,7 @@ export class LicenseManager {
 		...NO_FEATURES,
 	})
 	public verbose = true
+	private isDisposed = false
 
 	constructor(licenseKey: string | undefined, testPublicKey?: string) {
 		this.isTest = process.env.NODE_ENV === 'test'
@@ -144,6 +146,9 @@ export class LicenseManager {
 
 		this.getLicenseFromKey(licenseKey)
 			.then((result) => {
+				// replaced by a manager for a newer key: this one's messages, tracking ping and state
+				// would describe a key the app no longer uses
+				if (this.isDisposed) return
 				const licenseState = getLicenseState(
 					result,
 					(messages: string[]) => this.outputMessages(messages),
@@ -160,11 +165,17 @@ export class LicenseManager {
 				})
 			})
 			.catch((error) => {
+				if (this.isDisposed) return
 				console.error('License validation failed:', error)
 				this.state.set('unlicensed')
 			})
 	}
 
+	/** Ignore the pending validation: nothing is logged, tracked or set once the manager is replaced. */
+	dispose() {
+		this.isDisposed = true
+	}
+
 	/**
 	 * Returns whether a given licensable feature is enabled. Reactive: reading this inside a signal
 	 * recomputes when license validation resolves.
@@ -247,8 +258,9 @@ export class LicenseManager {
 			url.searchParams.set('environment', process.env.NODE_ENV)
 		}
 
+		// best-effort: a blocked or offline request must not surface as an unhandled rejection
 		// eslint-disable-next-line no-restricted-globals
-		fetch(url.toString())
+		fetch(url.toString()).catch(noop)
 	}
 
 	private async extractLicenseKey(licenseKey: string): Promise<LicenseInfo> {

package/src/lib/license/LicenseProvider.test.tsx

@@ -0,0 +1,76 @@
+import { act, render } from '@testing-library/react'
+import { vi } from 'vitest'
+import { LicenseFromKeyResult, LicenseManager } from './LicenseManager'
+import { LICENSE_TIMEOUT, LicenseProvider, useLicenseContext } from './LicenseProvider'
+
+const NO_KEY: LicenseFromKeyResult = { isLicenseParseable: false, reason: 'no-key-provided' }
+
+describe('LicenseProvider', () => {
+	const managers: LicenseManager[] = []
+	function Probe() {
+		managers.push(useLicenseContext())
+		return null
+	}
+	const renderWithKey = (licenseKey: string | undefined) => (
+		<LicenseProvider licenseKey={licenseKey}>
+			<Probe />
+		</LicenseProvider>
+	)
+
+	beforeEach(() => {
+		managers.length = 0
+	})
+	afterEach(() => {
+		vi.restoreAllMocks()
+		vi.useRealTimers()
+	})
+
+	it('creates a new license manager when the license key changes', async () => {
+		const rendered = await act(async () => render(renderWithKey(undefined)))
+		const initial = managers.at(-1)!
+
+		await act(async () => rendered.rerender(renderWithKey('not-a-real-key')))
+		const changed = managers.at(-1)!
+		expect(changed).not.toBe(initial)
+
+		// same key again: the manager is stable
+		await act(async () => rendered.rerender(renderWithKey('not-a-real-key')))
+		expect(managers.at(-1)).toBe(changed)
+	})
+
+	it('shows the editor again when a new key arrives after the gate closed', async () => {
+		// validation never settles so the test drives the state by hand
+		vi.spyOn(LicenseManager.prototype, 'getLicenseFromKey').mockReturnValue(new Promise(() => {}))
+		vi.useFakeTimers()
+
+		const rendered = await act(async () => render(renderWithKey('expired-key')))
+		const expired = managers.at(-1)!
+		act(() => expired.state.set('expired'))
+		act(() => vi.advanceTimersByTime(LICENSE_TIMEOUT))
+		expect(rendered.queryByTestId('tl-license-expired')).not.toBeNull()
+
+		await act(async () => rendered.rerender(renderWithKey('fresh-key')))
+		expect(rendered.queryByTestId('tl-license-expired')).toBeNull()
+		expect(managers.at(-1)).not.toBe(expired)
+	})
+
+	it('ignores the validation result of a manager replaced by a new key', async () => {
+		const resolvers: ((result: LicenseFromKeyResult) => void)[] = []
+		vi.spyOn(LicenseManager.prototype, 'getLicenseFromKey').mockImplementation(
+			() => new Promise((resolve) => resolvers.push(resolve))
+		)
+		const track = vi.spyOn(LicenseManager.prototype as any, 'maybeTrack')
+
+		const rendered = await act(async () => render(renderWithKey(undefined)))
+		const orphan = managers.at(-1)!
+		await act(async () => rendered.rerender(renderWithKey('real-key')))
+		expect(managers.at(-1)).not.toBe(orphan)
+
+		await act(async () => resolvers[0](NO_KEY))
+		expect(orphan.state.get()).toBe('pending')
+		expect(track).not.toHaveBeenCalled()
+
+		await act(async () => resolvers[1](NO_KEY))
+		expect(managers.at(-1)!.state.get()).toBe('unlicensed')
+	})
+})

package/src/lib/license/LicenseProvider.tsx

@@ -1,5 +1,5 @@
 import { useValue } from '@tldraw/state-react'
-import { createContext, ReactNode, useContext, useEffect, useState } from 'react'
+import { createContext, ReactNode, useContext, useEffect, useMemo, useRef, useState } from 'react'
 import { useMaybeEditor } from '../hooks/useEditor'
 import { LicenseManager } from './LicenseManager'
 
@@ -46,21 +46,35 @@ export function LicenseProvider({
 	licenseKey?: string
 	children: ReactNode
 }) {
-	const [licenseManager] = useState(() => new LicenseManager(licenseKey))
+	// Keyed on the license key: the editor is recreated when the key changes, and must not be
+	// handed a manager that validated the old key.
+	const licenseManager = useMemo(() => new LicenseManager(licenseKey), [licenseKey])
 	const licenseState = useValue(licenseManager.state)
-	const [showEditor, setShowEditor] = useState(true)
+	// The manager whose LICENSE_TIMEOUT elapsed; compared by identity so a new key un-gates the editor.
+	const [gatedManager, setGatedManager] = useState<LicenseManager | null>(null)
+	const showEditor = gatedManager !== licenseManager
+
+	// Dispose only the replaced manager, never on cleanup: strict mode re-runs effects with the
+	// same manager, and disposing it there would silence the live one.
+	const previousManager = useRef<LicenseManager | null>(null)
+	useEffect(() => {
+		if (previousManager.current && previousManager.current !== licenseManager) {
+			previousManager.current.dispose()
+		}
+		previousManager.current = licenseManager
+	}, [licenseManager])
 
 	// When license expires or no license in production, show for 5 seconds then hide
 	useEffect(() => {
 		if (shouldHideEditorAfterDelay(licenseState) && showEditor) {
 			// eslint-disable-next-line no-restricted-globals
 			const timer = setTimeout(() => {
-				setShowEditor(false)
+				setGatedManager(licenseManager)
 			}, LICENSE_TIMEOUT)
 
 			return () => clearTimeout(timer)
 		}
-	}, [licenseState, showEditor])
+	}, [licenseManager, licenseState, showEditor])
 
 	// If license is expired or no license in production and 5 seconds have passed, don't render anything (blank screen)
 	if (shouldHideEditorAfterDelay(licenseState) && !showEditor) {

package/src/lib/primitives/geometry/Arc2d.test.ts

@@ -225,4 +225,13 @@ describe('Arc2d.getSvgPathData', () => {
 		})
 		expect(arc.getSvgPathData()).toBe('M10, 0 A10 10 0 0 1 7.07, 7.07')
 	})
+
+	it('does not mutate the stored points', () => {
+		const start = new Vec(10, 0)
+		const end = new Vec(10 / Math.SQRT2, 10 / Math.SQRT2)
+		const arc = new Arc2d({ center: new Vec(0, 0), start, end, sweepFlag: 1, largeArcFlag: 0 })
+		arc.getSvgPathData()
+		expect(start).toMatchObject({ x: 10, y: 0 })
+		expect(end).toMatchObject({ x: 10 / Math.SQRT2, y: 10 / Math.SQRT2 })
+	})
 })

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

@@ -105,7 +105,7 @@ export class Arc2d extends Geometry2d {
 			_largeArcFlag: largeArcFlag,
 			_sweepFlag: sweepFlag,
 		} = this
-		return `${first ? `M${start.toFixed()}` : ``} A${radius} ${radius} 0 ${largeArcFlag} ${sweepFlag} ${end.toFixed()}`
+		return `${first ? `M${start}` : ``} A${radius} ${radius} 0 ${largeArcFlag} ${sweepFlag} ${end}`
 	}
 
 	override getLength() {

package/src/lib/primitives/geometry/CubicBezier2d.test.ts

@@ -172,4 +172,17 @@ describe('CubicBezier2d.getSvgPathData', () => {
 		})
 		expect(b.getSvgPathData()).toBe('M 0.12, 0  C1.01, 2 3, 5 10, 10')
 	})
+
+	it('does not mutate the stored points', () => {
+		const start = new Vec(0.123, 0)
+		const cp1 = new Vec(1.006, 2)
+		const cp2 = new Vec(3, 4.999)
+		const end = new Vec(10, 10.005)
+		const b = new CubicBezier2d({ start, cp1, cp2, end })
+		b.getSvgPathData()
+		expect(start).toMatchObject({ x: 0.123, y: 0 })
+		expect(cp1).toMatchObject({ x: 1.006, y: 2 })
+		expect(cp2).toMatchObject({ x: 3, y: 4.999 })
+		expect(end).toMatchObject({ x: 10, y: 10.005 })
+	})
 })

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

@@ -81,7 +81,7 @@ export class CubicBezier2d extends Polyline2d {
 
 	getSvgPathData(first = true) {
 		const { _a: a, _b: b, _c: c, _d: d } = this
-		return `${first ? `M ${a.toFixed()} ` : ``} C${b.toFixed()} ${c.toFixed()} ${d.toFixed()}`
+		return `${first ? `M ${a} ` : ``} C${b} ${c} ${d}`
 	}
 
 	static GetAtT(segment: CubicBezier2d, t: number) {

package/src/lib/primitives/geometry/Edge2d.test.ts

@@ -1,5 +1,23 @@
-describe('Edge2d', () => {
-	it('should be tested', () => {
-		expect(true).toBe(true)
+import { Vec } from '../Vec'
+import { Edge2d } from './Edge2d'
+
+describe('Edge2d.getSvgPathData', () => {
+	it('emits a move and a line command, rounded to two decimals', () => {
+		const edge = new Edge2d({ start: new Vec(0.123456, 0), end: new Vec(10, 10.987654) })
+		expect(edge.getSvgPathData()).toBe('M0.12, 0 L10, 10.99')
+	})
+
+	it('omits the move command when not first', () => {
+		const edge = new Edge2d({ start: new Vec(0.123456, 0), end: new Vec(10, 10.987654) })
+		expect(edge.getSvgPathData(false)).toBe(' L10, 10.99')
+	})
+
+	it('does not mutate the stored points', () => {
+		const start = new Vec(0.123456, 0)
+		const end = new Vec(10, 10.987654)
+		const edge = new Edge2d({ start, end })
+		edge.getSvgPathData()
+		expect(start).toMatchObject({ x: 0.123456, y: 0 })
+		expect(end).toMatchObject({ x: 10, y: 10.987654 })
 	})
 })

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

@@ -68,6 +68,6 @@ export class Edge2d extends Geometry2d {
 
 	getSvgPathData(first = true) {
 		const { _start: start, _end: end } = this
-		return `${first ? `M${start.toFixed()}` : ``} L${end.toFixed()}`
+		return `${first ? `M${start}` : ``} L${end}`
 	}
 }

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

@@ -340,20 +340,38 @@ describe('Group2d.transform', () => {
 		expect(t.vertices.length).toBe(8)
 	})
 
-	it('carries the label, debug colour and ignore flags forward', () => {
+	it('carries all the flags forward', () => {
 		const g = new Group2d({
 			children: [rectA()],
 			isLabel: true,
+			isEmptyLabel: true,
+			isInternal: true,
+			excludeFromShapeBounds: true,
 			debugColor: 'red',
 			ignore: true,
 		})
 		expect(g.transform(Mat.Identity())).toMatchObject({
 			isLabel: true,
+			isEmptyLabel: true,
+			isInternal: true,
+			excludeFromShapeBounds: true,
 			debugColor: 'red',
 			ignore: true,
 		})
 	})
 
+	it('applies the transform options over the carried flags', () => {
+		const g = new Group2d({ children: [rectA()], isLabel: true, isInternal: true })
+		expect(
+			g.transform(Mat.Identity(), {
+				isLabel: false,
+				isInternal: false,
+				debugColor: 'red',
+				ignore: true,
+			})
+		).toMatchObject({ isLabel: false, isInternal: false, debugColor: 'red', ignore: true })
+	})
+
 	it('scales hit testing with the transform', () => {
 		const t = group().transform(Mat.Scale(2, 2))
 		expect(t.hitTestPoint(new Vec(100, 50), 0, false)).toBe(true)
@@ -361,12 +379,15 @@ describe('Group2d.transform', () => {
 		expect(t.distanceToPoint(new Vec(300, 50))).toBe(100)
 	})
 
-	// Locks in current behaviour, see #10562.
-	it('drops the ignored children', () => {
+	// #10562: transform used to drop the ignored children.
+	it('keeps the transformed ignored children', () => {
 		const ignored = new Rectangle2d({ x: 500, width: 10, height: 10, isFilled: true, ignore: true })
 		const g = new Group2d({ children: [rectA(), ignored] })
-		expect(g.ignoredChildren.length).toBe(1)
-		expect((g.transform(Mat.Identity()) as Group2d).ignoredChildren).toEqual([])
+		const t = g.transform(Mat.Translate(10, 20)) as Group2d
+		expect(t.children.length).toBe(1)
+		expect(t.ignoredChildren.length).toBe(1)
+		expect(t.ignoredChildren[0].ignore).toBe(true)
+		expect(t.ignoredChildren[0].bounds).toMatchObject({ x: 510, y: 20, w: 10, h: 10 })
 	})
 })
 

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

@@ -1,8 +1,13 @@
 import { assert, invLerp, lerp } from '@tldraw/utils'
 import { Box } from '../Box'
-import { Mat } from '../Mat'
+import { MatModel } from '../Mat'
 import { Vec, VecLike } from '../Vec'
-import { Geometry2d, Geometry2dFilters, Geometry2dOptions } from './Geometry2d'
+import {
+	Geometry2d,
+	Geometry2dFilters,
+	Geometry2dOptions,
+	TransformedGeometry2dOptions,
+} from './Geometry2d'
 
 /** @public */
 export class Group2d extends Geometry2d {
@@ -226,12 +231,18 @@ export class Group2d extends Geometry2d {
 		return childTLength / totalLength
 	}
 
-	override transform(transform: Mat): Geometry2d {
+	override transform(transform: MatModel, opts?: TransformedGeometry2dOptions): Geometry2d {
+		// Each child's own transform preserves its `ignore` flag, so the constructor
+		// re-partitions ignored children back into `ignoredChildren` instead of dropping
+		// them (#10562).
 		return new Group2d({
-			children: this.children.map((c) => c.transform(transform)),
-			isLabel: this.isLabel,
-			debugColor: this.debugColor,
-			ignore: this.ignore,
+			children: [...this.children, ...this.ignoredChildren].map((c) => c.transform(transform)),
+			isLabel: opts?.isLabel ?? this.isLabel,
+			isEmptyLabel: this.isEmptyLabel,
+			isInternal: opts?.isInternal ?? this.isInternal,
+			debugColor: opts?.debugColor ?? this.debugColor,
+			ignore: opts?.ignore ?? this.ignore,
+			excludeFromShapeBounds: this.excludeFromShapeBounds,
 		})
 	}
 

package/src/lib/primitives/geometry/Point2d.test.ts

@@ -1,5 +1,16 @@
-describe('Point2d', () => {
-	it('should be tested', () => {
-		expect(true).toBe(true)
+import { Vec } from '../Vec'
+import { Point2d } from './Point2d'
+
+describe('Point2d.getSvgPathData', () => {
+	it('emits a move command rounded to two decimals', () => {
+		const point = new Point2d({ margin: 0, point: new Vec(0.123456, 7.891234) })
+		expect(point.getSvgPathData()).toBe('M0.12, 7.89')
+	})
+
+	it('does not mutate the stored point', () => {
+		const vec = new Vec(0.123456, 7.891234)
+		const point = new Point2d({ margin: 0, point: vec })
+		point.getSvgPathData()
+		expect(vec).toMatchObject({ x: 0.123456, y: 7.891234 })
 	})
 })

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

@@ -28,6 +28,6 @@ export class Point2d extends Geometry2d {
 
 	getSvgPathData() {
 		const { _point: point } = this
-		return `M${point.toFixed()}`
+		return `M${point}`
 	}
 }

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

@@ -106,6 +106,34 @@ describe('LocalIndexedDb', () => {
 		})
 	})
 
+	it('commits a write that is still in flight when the db is closed', async () => {
+		const db = new LocalIndexedDb('test-0')
+		const write = db.storeSnapshot({ schema, snapshot: { 'shape:1': { id: 'shape:1' } } })
+		await db.close()
+		await write
+
+		const reopened = new LocalIndexedDb('test-0')
+		expect((await reopened.load())?.records).toEqual([{ id: 'shape:1' }])
+		await reopened.close()
+	})
+
+	it('rejects a transaction that aborts after its requests succeeded while closing', async () => {
+		const db = new LocalIndexedDb('test-0')
+		let closing: Promise<void> | undefined
+		// A commit can fail after every request succeeded, so the request promises cannot report it.
+		// @ts-expect-error Exercise the transaction boundary directly to inject a commit failure.
+		const write = db.tx('readwrite', ['records'], async (tx) => {
+			await tx.objectStore('records').put({ id: 'shape:1' }, 'shape:1')
+			closing = db.close()
+			tx.abort()
+		})
+		try {
+			await expect(write).rejects.toMatchObject({ name: 'AbortError' })
+		} finally {
+			await closing
+		}
+	})
+
 	describe('#storeChanges', () => {
 		it('allows merging changes into an existing store', async () => {
 			const db = new LocalIndexedDb('test-0')

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

@@ -141,26 +141,22 @@ export class LocalIndexedDb {
 			assert(!this.isClosed, 'db is closed')
 			const db = await this.getDb()
 			const tx = db.transaction(names, mode)
-			// need to add a catch here early to prevent unhandled promise rejection
-			// during react-strict-mode where this tx.done promise can be rejected
-			// before we have a chance to await on it
-			const done = tx.done.catch((e: unknown) => {
-				if (!this.isClosed) {
-					throw e
-				}
-			})
+			// Commit failures may arrive before the callback finishes; observe them immediately
+			// while preserving the rejection for the await below.
+			const done = tx.done
+			done.catch(noop)
 			try {
 				return await cb(tx)
 			} finally {
-				if (!this.isClosed) {
-					await done
-				} else {
-					tx.abort()
-				}
+				// let the transaction commit even if close() was called meanwhile, otherwise a
+				// persist racing an unmount is silently rolled back
+				await done
 			}
 		})()
 		this.pendingTransactionSet.add(txPromise)
-		txPromise.finally(() => this.pendingTransactionSet.delete(txPromise))
+		// not `.finally()`: the promise it returns would re-reject with nobody observing it
+		const cleanup = () => this.pendingTransactionSet.delete(txPromise)
+		txPromise.then(cleanup, cleanup)
 		return txPromise
 	}
 
@@ -208,17 +204,19 @@ export class LocalIndexedDb {
 			const schemaStore = tx.objectStore(Table.Schema)
 			const sessionStateStore = tx.objectStore(Table.SessionState)
 
+			const requests: Promise<unknown>[] = []
 			for (const [id, record] of Object.entries(changes.added)) {
-				await recordsStore.put(record, id)
+				requests.push(recordsStore.put(record, id))
 			}
 
 			for (const [_prev, updated] of Object.values(changes.updated)) {
-				await recordsStore.put(updated, updated.id)
+				requests.push(recordsStore.put(updated, updated.id))
 			}
 
 			for (const id of Object.keys(changes.removed)) {
-				await recordsStore.delete(id)
+				requests.push(recordsStore.delete(id))
 			}
+			await Promise.all(requests)
 
 			schemaStore.put(schema.serialize(), Table.Schema)
 			if (sessionStateSnapshot && sessionId) {
@@ -254,9 +252,9 @@ export class LocalIndexedDb {
 
 			await recordsStore.clear()
 
-			for (const [id, record] of Object.entries(snapshot)) {
-				await recordsStore.put(record, id)
-			}
+			await Promise.all(
+				Object.entries(snapshot).map(([id, record]) => recordsStore.put(record, id))
+			)
 
 			schemaStore.put(schema.serialize(), Table.Schema)