@tldraw/editor 5.5.0-next.f9308d324e1c → 5.5.0

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

@@ -65,21 +65,21 @@ export class SnapManager {
 	@computed getSnappableShapes(): Set<TLShapeId> {
 		const { editor } = this
 		const renderingBounds = editor.getViewportPageBounds()
-		const selectedShapeIds = editor.getSelectedShapeIds()
+		const selectedShapeIds = new Set(editor.getSelectedShapeIds())
 
 		const snappableShapes: Set<TLShapeId> = new Set()
 
 		const collectSnappableShapesFromParent = (parentId: TLParentId) => {
 			if (isShapeId(parentId)) {
 				const parent = editor.getShape(parentId)
-				if (parent && editor.isShapeFrameLike(parent)) {
+				if (parent && editor.isShapeFrameLike(parent) && !editor.isShapeHidden(parent)) {
 					snappableShapes.add(parentId)
 				}
 			}
 			const sortedChildIds = editor.getSortedChildIdsForParent(parentId)
 			for (const childId of sortedChildIds) {
 				// Skip any selected ids
-				if (selectedShapeIds.includes(childId)) continue
+				if (selectedShapeIds.has(childId)) continue
 				const childShape = editor.getShape(childId)
 				if (!childShape) continue
 				const util = editor.getShapeUtil(childShape)
@@ -88,11 +88,13 @@ export class SnapManager {
 				// Only consider shapes if they're inside of the viewport page bounds
 				const pageBounds = editor.getShapePageBounds(childId)
 				if (!(pageBounds && renderingBounds.includes(pageBounds))) continue
-				// Snap to children of groups but not group itself
+				// Snap to children of groups but not group itself. A hidden group's
+				// children may still override to visible, so recurse before the check.
 				if (editor.isShapeOfType(childShape, 'group')) {
 					collectSnappableShapesFromParent(childId)
 					continue
 				}
+				if (editor.isShapeHidden(childShape)) continue
 				snappableShapes.add(childId)
 			}
 		}

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

@@ -307,6 +307,80 @@ describe('TextManager', () => {
 			expect(result.spans[0].text).toBe(`a${family}b`)
 		})
 
+		it('should measure each text node with its own offsets', () => {
+			const starts: [unknown, number][] = []
+			const RangeMock = global.Range as unknown as ReturnType<typeof vi.fn>
+			RangeMock.mockImplementationOnce(function () {
+				return {
+					setStart: vi.fn((node: unknown, offset: number) => starts.push([node, offset])),
+					setEnd: vi.fn(),
+					getClientRects: vi.fn(() => [
+						{ width: 10, height: 16, left: 0, top: 0, right: 10, bottom: 16 },
+					]),
+				}
+			})
+
+			const first = { nodeType: 3, textContent: 'ab' }
+			const second = { nodeType: 3, textContent: 'cd' }
+			const mockElementWithText = {
+				childNodes: [first, { nodeType: 1 }, second],
+				getBoundingClientRect: () => ({ left: 0, top: 0 }),
+			}
+
+			textManager.measureElementTextNodeSpans(mockElementWithText as any)
+
+			// the range must be placed in the node being measured, not the first one
+			expect(starts).toEqual([
+				[first, 0],
+				[first, 1],
+				[second, 0],
+				[second, 1],
+			])
+		})
+
+		it('should stop measuring later text nodes once the first line is truncated', () => {
+			const starts: [unknown, number][] = []
+			let current: { textContent: string } | null = null
+			const RangeMock = global.Range as unknown as ReturnType<typeof vi.fn>
+			RangeMock.mockImplementationOnce(function () {
+				return {
+					setStart: vi.fn((node: { textContent: string }, offset: number) => {
+						current = node
+						starts.push([node, offset])
+					}),
+					setEnd: vi.fn(),
+					// the second node sits on a new line
+					getClientRects: vi.fn(() => {
+						const top = current?.textContent === 'cd' ? 16 : 0
+						return [{ width: 10, height: 16, left: 0, top, right: 10, bottom: top + 16 }]
+					}),
+				}
+			})
+
+			const first = { nodeType: 3, textContent: 'ab' }
+			const second = { nodeType: 3, textContent: 'cd' }
+			const third = { nodeType: 3, textContent: 'ef' }
+			const mockElementWithText = {
+				childNodes: [first, second, third],
+				getBoundingClientRect: () => ({ left: 0, top: 0 }),
+			}
+
+			const result = textManager.measureElementTextNodeSpans(mockElementWithText as any, {
+				shouldTruncateToFirstLine: true,
+			})
+
+			expect(result).toEqual({
+				spans: [{ box: { x: 0, y: 0, w: 10, h: 16 }, text: 'ab' }],
+				didTruncate: true,
+			})
+			// the third node must never be measured
+			expect(starts).toEqual([
+				[first, 0],
+				[first, 1],
+				[second, 0],
+			])
+		})
+
 		it('should handle truncation option', () => {
 			const mockTextNode = {
 				nodeType: 3, // TEXT_NODE

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

@@ -292,10 +292,8 @@ export class TextManager extends EditorManager {
 		const offsetX = -elmBounds.left
 		const offsetY = -elmBounds.top
 
-		// we measure by creating a range that spans each character in the elements text node
+		// we measure by creating a range that spans each character in the elements text nodes
 		const range = new Range()
-		const textNode = element.childNodes[0]
-		let idx = 0
 
 		let currentSpan = null
 		let prevCharWasSpaceCharacter = null
@@ -303,12 +301,15 @@ export class TextManager extends EditorManager {
 		let prevCharLeftForRTLTest = 0
 		let didTruncate = false
 		for (const childNode of element.childNodes) {
+			if (didTruncate) break
 			if (childNode.nodeType !== Node.TEXT_NODE) continue
 
+			// offsets are per text node, or the range would index past the node's end
+			let idx = 0
 			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)
+				range.setStart(childNode, idx)
+				range.setEnd(childNode, idx + segment.length)
 				// measure the range. some browsers return multiple rects for the
 				// first char in a new line - one for the line break, and one for
 				// the character itself. we're only interested in the character.

package/src/lib/editor/shapes/group/GroupShapeUtil.tsx

@@ -39,14 +39,29 @@ export class GroupShapeUtil extends ShapeUtil<TLGroupShape> {
 			return new Rectangle2d({ width: 1, height: 1, isFilled: false })
 		}
 
-		return new Group2d({
-			children: children.map((childId) => {
-				const shape = this.editor.getShape(childId)!
-				return this.editor
-					.getShapeGeometry(childId)
-					.transform(this.editor.getShapeLocalTransform(shape)!, { isLabel: false })
-			}),
-		})
+		// A child id can outlive its record. The children index and the geometry cache are separate
+		// derivations, so inside a transaction that removes a child the index can still name it while
+		// `getShapeGeometry` already answers nothing — its `!` hides that it returns `undefined` for a
+		// record the store no longer holds. Asserting instead of checking threw a `TypeError` out of a
+		// reactive recompute, where no caller could catch it.
+		const geometries: Geometry2d[] = []
+		for (const childId of children) {
+			const child = this.editor.getShape(childId)
+			if (!child) continue
+			const geometry = this.editor.getShapeGeometry(childId)
+			if (!geometry) continue
+			const transform = this.editor.getShapeLocalTransform(child)
+			if (!transform) continue
+			geometries.push(geometry.transform(transform, { isLabel: false }))
+		}
+
+		// Every child resolved to nothing, so there is no meaningful extent to report. Matches the
+		// no-children case above rather than building an empty `Group2d`, whose bounds are `NaN`.
+		if (geometries.length === 0) {
+			return new Rectangle2d({ width: 1, height: 1, isFilled: false })
+		}
+
+		return new Group2d({ children: geometries })
 	}
 
 	component(shape: TLGroupShape) {

package/src/lib/editor/types/external-content.ts

@@ -73,6 +73,11 @@ export interface TLFileReplaceExternalContent extends TLBaseExternalContent {
 export interface TLUrlExternalContent extends TLBaseExternalContent {
 	type: 'url'
 	url: string
+	/**
+	 * A shape to set the url on, instead of creating a bookmark or an embed. The shape must have a
+	 * `url` prop; the clipboard sets this when a link is pasted with one such shape selected.
+	 */
+	shapeId?: TLShapeId
 }
 
 /** @public */

package/src/lib/exports/ExportDelay.tsx

@@ -1,4 +1,4 @@
-import { bind, sleep } from '@tldraw/utils'
+import { bind, noop, promiseWithResolve, sleep } from '@tldraw/utils'
 
 /**
  * Export delay is a helper class that allows you to wait for a set of promises to resolve before
@@ -11,8 +11,20 @@ import { bind, sleep } from '@tldraw/utils'
 export class ExportDelay {
 	private isResolved = false
 	private readonly promisesToWaitFor: Promise<void>[] = []
+	private readonly failure = promiseWithResolve<never>()
 
-	constructor(private readonly maxDelayTimeMs: number) {}
+	constructor(private readonly maxDelayTimeMs: number) {
+		// only observed inside `resolve`, so a `fail` before then would otherwise be an unhandled rejection
+		this.failure.catch(noop)
+	}
+
+	/**
+	 * Abort the export: `resolve` rejects with this error instead of waiting out the delay and
+	 * snapshotting a broken svg.
+	 */
+	@bind fail(error: unknown): void {
+		this.failure.reject(error)
+	}
 
 	@bind waitUntil(promise: Promise<void>): void {
 		if (this.isResolved) {
@@ -40,9 +52,9 @@ export class ExportDelay {
 		const timeoutPromise = sleep(this.maxDelayTimeMs).then(() => 'timeout' as const)
 		const resolvePromise = this.resolvePromises().then(() => 'resolved' as const)
 
-		const result = await Promise.race([timeoutPromise, resolvePromise])
+		const result = await Promise.race([timeoutPromise, resolvePromise, this.failure])
 		if (result === 'timeout') {
-			console.warn('[tldraw] Export delay timed out after ${this.maxDelayTimeMs}ms')
+			console.warn(`[tldraw] Export delay timed out after ${this.maxDelayTimeMs}ms`)
 		}
 
 		this.isResolved = true

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

@@ -0,0 +1,99 @@
+import { vi } from 'vitest'
+import { fetchCssFontFaces, FontEmbedder } from './FontEmbedder'
+import { parseCssFontFaces } from './parseCss'
+
+describe('FontEmbedder', () => {
+	let style: HTMLStyleElement
+
+	beforeEach(() => {
+		style = document.createElement('style')
+		style.textContent = `
+			@font-face { font-family: 'Font A'; src: url('/font-a.woff2'); }
+			@font-face { font-family: 'Font B'; src: url('/font-b.woff2'); }
+		`
+		document.head.appendChild(style)
+	})
+
+	afterEach(() => {
+		style.remove()
+	})
+
+	it('embeds every family in a font-family list, even when an earlier one was already seen', async () => {
+		const embedder = new FontEmbedder()
+		embedder.startFindingDocumentFontFaces(document)
+
+		embedder.onFontFamilyValue(`'Font A'`)
+		embedder.onFontFamilyValue(`'Font A', 'Font B'`)
+
+		const css = await embedder.createCss()
+		expect(css).toContain('Font A')
+		expect(css).toContain('Font B')
+	})
+
+	it('retries a failed font fetch on the next export', async () => {
+		vi.spyOn(console, 'error').mockImplementation(() => {})
+		// the parsed sheet is shared across exports through the fetch cache
+		const fontFaces = parseCssFontFaces(
+			`@font-face { font-family: 'Font A'; src: url(a.woff2); }`,
+			'https://example.com/fonts.css'
+		)
+		const blob = new Blob(['font'], { type: 'font/woff2' })
+		vi.spyOn(window, 'fetch')
+			.mockResolvedValueOnce({ ok: false } as Response)
+			.mockResolvedValue({ ok: true, blob: async () => blob } as Response)
+
+		const exportCss = async () => {
+			const embedder = new FontEmbedder()
+			embedder.startFindingDocumentFontFaces(document)
+			;(embedder as any).fontFacesPromise = Promise.resolve(fontFaces)
+			embedder.onFontFamilyValue(`'Font A'`)
+			return embedder.createCss()
+		}
+
+		expect(await exportCss()).toContain('url(a.woff2)')
+		expect(await exportCss()).toContain('data:font/woff2;base64,')
+	})
+})
+
+describe('fetchCssFontFaces', () => {
+	afterEach(() => {
+		vi.restoreAllMocks()
+	})
+
+	it('resolves when stylesheets @import each other', async () => {
+		const sheets: Record<string, string> = {
+			'https://example.com/a.css': `@import url(b.css); @font-face { font-family: 'Font A'; src: url(a.woff2); }`,
+			'https://example.com/b.css': `@import url(a.css); @font-face { font-family: 'Font B'; src: url(b.woff2); }`,
+		}
+		vi.spyOn(window, 'fetch').mockImplementation(async (input) => {
+			const url = String(input)
+			return { ok: true, url, text: async () => sheets[url] } as Response
+		})
+
+		const fontFaces = await fetchCssFontFaces('https://example.com/a.css')
+		expect(fontFaces.map((f) => [...f.fontFamilies])).toEqual([['font a'], ['font b']])
+	})
+
+	it('keeps font order in source order when siblings import the same sheet', async () => {
+		const sheets: Record<string, string> = {
+			'https://example.com/root.css': `@import url(c.css); @import url(d.css);`,
+			'https://example.com/c.css': `@import url(e.css); @font-face { font-family: 'Font C'; src: url(c.woff2); }`,
+			'https://example.com/d.css': `@import url(e.css); @font-face { font-family: 'Font D'; src: url(d.woff2); }`,
+			'https://example.com/e.css': `@font-face { font-family: 'Font E'; src: url(e.woff2); }`,
+		}
+		vi.spyOn(window, 'fetch').mockImplementation(async (input) => {
+			const url = String(input)
+			// the first sibling resolves last, so the shared sheet is reached through the second first
+			if (url.endsWith('c.css')) await new Promise((resolve) => setTimeout(resolve, 20))
+			return { ok: true, url, text: async () => sheets[url] } as Response
+		})
+
+		const fontFaces = await fetchCssFontFaces('https://example.com/root.css')
+		expect(fontFaces.map((f) => [...f.fontFamilies][0])).toEqual([
+			'font c',
+			'font e',
+			'font d',
+			'font e',
+		])
+	})
+})

package/src/lib/exports/FontEmbedder.ts

@@ -24,6 +24,9 @@ export class FontEmbedder {
 	private fontFacesPromise: Promise<ParsedFontFace[]> | null = null
 	private readonly foundFontNames = new Set<string>()
 	private readonly fontFacesToEmbed = new Set<ParsedFontFace>()
+	// per export, keyed by resolved url: parsed font faces are shared across exports through the
+	// fetch cache, so a failed fetch stored on them would never be retried
+	private readonly embeddedUrls = new Map<string, Promise<string | null>>()
 	private readonly pendingPromises: Promise<void>[] = []
 
 	startFindingDocumentFontFaces(doc: Document) {
@@ -36,7 +39,7 @@ export class FontEmbedder {
 
 		const fonts = parseCssFontFamilyValue(fontFamilyValue)
 		for (const font of fonts) {
-			if (this.foundFontNames.has(font)) return
+			if (this.foundFontNames.has(font)) continue
 			this.foundFontNames.add(font)
 
 			this.pendingPromises.push(
@@ -47,9 +50,9 @@ export class FontEmbedder {
 
 						this.fontFacesToEmbed.add(fontFace)
 						for (const url of fontFace.urls) {
-							if (!url.resolved || url.embedded) continue
+							if (!url.resolved || this.embeddedUrls.has(url.resolved)) continue
 							// kick off fetching this font
-							url.embedded = resourceToDataUrl(url.resolved)
+							this.embeddedUrls.set(url.resolved, resourceToDataUrl(url.resolved))
 						}
 					}
 				})
@@ -66,11 +69,11 @@ export class FontEmbedder {
 			let fontFaceString = `@font-face {${fontFace.fontFace}}`
 
 			for (const url of fontFace.urls) {
-				if (!url.embedded) continue
-				const dataUrl = await url.embedded
+				if (!url.resolved) continue
+				const dataUrl = await this.embeddedUrls.get(url.resolved)
 				if (!dataUrl) continue
 
-				fontFaceString = fontFaceString.replace(url.original, dataUrl)
+				fontFaceString = fontFaceString.replace(url.original, () => dataUrl)
 			}
 
 			css += fontFaceString
@@ -119,12 +122,30 @@ async function getDocumentFontFaces(doc: Document) {
 	return compact(await Promise.all(fontFaces)).flat()
 }
 
-const fetchCssFontFaces = fetchCache(async (response: Response): Promise<ParsedFontFace[]> => {
+const fetchParsedCss = fetchCache(async (response: Response) => {
 	const parsed = parseCss(await response.text(), response.url)
+	return {
+		fontFaces: parsed.fontFaces,
+		importUrls: parsed.imports.map(({ url }) => new URL(url, response.url).href),
+	}
+})
+
+/** @internal */
+export async function fetchCssFontFaces(
+	url: string,
+	// the chain of sheets that imported this one: sheets that @import each other would otherwise
+	// await their own in-flight fetch forever. Each branch gets its own copy so a sheet imported by
+	// two siblings lands under both in source order, not under whichever fetch resolved first.
+	seen = new Set<string>()
+): Promise<ParsedFontFace[]> {
+	if (seen.has(url)) return []
+	seen.add(url)
+
+	const parsed = await fetchParsedCss(url)
+	if (!parsed) return []
 
 	const importedFontFaces = await Promise.all(
-		parsed.imports.map(({ url }) => fetchCssFontFaces(new URL(url, response.url).href))
+		parsed.importUrls.map((importUrl) => fetchCssFontFaces(importUrl, new Set(seen)))
 	)
-
-	return [...parsed.fontFaces, ...compact(importedFontFaces).flat()]
-})
+	return [...parsed.fontFaces, ...importedFontFaces.flat()]
+}

package/src/lib/exports/StyleEmbedder.ts

@@ -92,10 +92,19 @@ export class StyleEmbedder {
 					if (urlMatches.length === 0) continue
 
 					promises.push(
-						...urlMatches.map(async ({ url, original }) => {
-							const dataUrl = (await resourceToDataUrl(url)) ?? 'data:'
-							styles[property] = value.replace(original, `url("${dataUrl}")`)
-						})
+						(async () => {
+							// resolve every url first, then rewrite the value in one pass - replacing
+							// per-url from the original value would keep only whichever resolved last.
+							// The replacer callback keeps `$` in a data url's mime segment literal.
+							const dataUrls = await Promise.all(
+								urlMatches.map(({ url }) => resourceToDataUrl(url))
+							)
+							styles[property] = urlMatches.reduce(
+								(result, { original }, i) =>
+									result.replace(original, () => `url("${dataUrls[i] ?? 'data:'}")`),
+								value
+							)
+						})()
 					)
 				}
 			}

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

@@ -0,0 +1,22 @@
+import { vi } from 'vitest'
+import { fetchCache } from './fetchCache'
+
+describe('fetchCache', () => {
+	afterEach(() => {
+		vi.restoreAllMocks()
+	})
+
+	it('caches successes but retries after a failure', async () => {
+		vi.spyOn(console, 'error').mockImplementation(() => {})
+		const fetchSpy = vi
+			.spyOn(window, 'fetch')
+			.mockResolvedValueOnce({ ok: false } as Response)
+			.mockResolvedValue({ ok: true, text: async () => 'hello' } as Response)
+		const fetchText = fetchCache((response) => response.text())
+
+		expect(await fetchText('https://example.com/a')).toBe(null)
+		expect(await fetchText('https://example.com/a')).toBe('hello')
+		expect(await fetchText('https://example.com/a')).toBe('hello')
+		expect(fetchSpy).toHaveBeenCalledTimes(2)
+	})
+})

package/src/lib/exports/fetchCache.ts

@@ -18,6 +18,10 @@ export function fetchCache<T>(cb: (response: Response) => Promise<T>, init?: Req
 			}
 		})()
 		cache.set(url, promise)
+		// only keep successes, otherwise a transient failure poisons this url for the whole session
+		promise.then((result) => {
+			if (result === null && cache.get(url) === promise) cache.delete(url)
+		})
 		return promise
 	}
 }

package/src/lib/exports/getSvgAsImage.ts

@@ -145,7 +145,13 @@ function measureContentBounds(
 	// (extraPx * 2 >= w means declaredRight <= declaredLeft, producing zero/negative crop)
 	if (extraPx <= 0 || extraPx * 2 >= w || extraPx * 2 >= h) return null
 
-	const imageData = ctx.getImageData(0, 0, w, h)
+	let imageData: ImageData
+	try {
+		imageData = ctx.getImageData(0, 0, w, h)
+	} catch {
+		// a tainted or unallocatable canvas can't be measured; export untrimmed rather than fail
+		return null
+	}
 	const data = imageData.data
 
 	// Determine how to detect "empty" pixels.
@@ -302,9 +308,11 @@ export async function trimSvgToContent(
 
 	if (trimPadding <= 0) return null
 
-	// Render SVG to a temporary canvas at 1:1 pixel ratio
-	const canvasWidth = Math.floor(width)
-	const canvasHeight = Math.floor(height)
+	// Render SVG to a temporary canvas at 1:1 pixel ratio, clamped like the raster path so a
+	// large export doesn't exceed the browser's canvas limits
+	let [canvasWidth, canvasHeight] = clampToBrowserMaxCanvasSize(width, height)
+	canvasWidth = Math.floor(canvasWidth)
+	canvasHeight = Math.floor(canvasHeight)
 
 	if (canvasWidth <= 0 || canvasHeight <= 0) return null
 
@@ -313,7 +321,7 @@ export async function trimSvgToContent(
 	if (!canvas) return null
 
 	// Measure content bounds on the canvas
-	const trimPaddingPx = trimPadding * scale
+	const trimPaddingPx = trimPadding * scale * (canvasWidth / width)
 	const bounds = measureContentBounds(canvas, trimPaddingPx)
 	if (!bounds) return null
 

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

@@ -1,4 +1,13 @@
-import { Geometry2d, RecordProps, Rectangle2d, ShapeUtil, T, TLShape, createShapeId } from '../..'
+import {
+	BaseFrameLikeShapeUtil,
+	Geometry2d,
+	RecordProps,
+	Rectangle2d,
+	ShapeUtil,
+	T,
+	TLShape,
+	createShapeId,
+} from '../..'
 import { createTLStore } from '../config/createTLStore'
 import { Editor } from '../editor/Editor'
 import { Box } from '../primitives/Box'
@@ -861,3 +870,36 @@ describe('getExportDefaultBounds', () => {
 		})
 	})
 })
+
+// Deliberately not registered in TLGlobalShapePropsMap (test-only types leak into the api report)
+const FRAME_LIKE_TYPE = 'test-frame-like'
+
+class FrameLikeShape extends BaseFrameLikeShapeUtil<any> {
+	static override type = FRAME_LIKE_TYPE
+	static override props = { w: T.number, h: T.number }
+	getDefaultProps() {
+		return { w: 100, h: 100 }
+	}
+	getIndicatorPath() {
+		return undefined
+	}
+	component() {}
+}
+
+describe('exporting a single frame-like shape', () => {
+	it('does not need the default frame shape util to be registered', async () => {
+		const editor = new Editor({
+			shapeUtils: [FrameLikeShape],
+			bindingUtils: [],
+			tools: [],
+			store: createTLStore({ shapeUtils: [FrameLikeShape], bindingUtils: [] }),
+			getContainer: () => document.body,
+		})
+		const id = createShapeId('frame-like')
+		editor.createShape({ id, type: FRAME_LIKE_TYPE, x: 0, y: 0, props: { w: 100, h: 100 } } as any)
+
+		const result = await editor.getSvgElement([id], { background: true })
+		expect(result?.svg.style.backgroundColor).not.toBe('')
+		expect(result?.svg.style.backgroundColor).not.toBe('transparent')
+	})
+})

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 (