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

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

@@ -18,6 +18,8 @@ function fromScratch(bindingsQuery: Computed<TLBinding[], unknown>) {
 		} else {
 			bindingsForFromShape.push(binding)
 		}
+		// A binding from a shape to itself belongs in that shape's array once, not twice
+		if (toId === fromId) continue
 		const bindingsForToShape = shapesToBindings.get(toId)
 		if (!bindingsForToShape) {
 			shapesToBindings.set(toId, [binding])
@@ -83,6 +85,7 @@ export function bindingsIndex(editor: Editor): Computed<TLBindingsIndex> {
 
 		function addBinding(binding: TLBinding) {
 			ensureNewArray(binding.fromId).push(binding)
+			if (binding.toId === binding.fromId) return
 			ensureNewArray(binding.toId).push(binding)
 		}
 

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

@@ -262,15 +262,46 @@ describe('EdgeScrollManager', () => {
 		})
 
 		it('should adjust scroll speed based on zoom level', () => {
-			editor.getZoomLevel.mockReturnValue(2)
 			mockInputs.setCurrentScreenPoint(new Vec(5, 300))
 
 			edgeScrollManager.updateEdgeScrolling(300)
+			const atZoom1 = (editor.setCamera.mock.calls[0][0] as Vec).x
+
+			editor.setCamera.mockClear()
+			edgeScrollManager = new EdgeScrollManager(editor)
+			editor.getZoomLevel.mockReturnValue(2)
+			edgeScrollManager.updateEdgeScrolling(300)
+			const atZoom2 = (editor.setCamera.mock.calls[0][0] as Vec).x
 
-			expect(editor.setCamera).toHaveBeenCalled()
-			const callArgs = editor.setCamera.mock.calls[0][0] as Vec
 			// Higher zoom should result in smaller camera movement
-			expect(Math.abs(callArgs.x)).toBeLessThan(25)
+			expect(atZoom2).toBeCloseTo(atZoom1 / 2)
+		})
+
+		it('should move the same distance per second regardless of tick rate', () => {
+			mockInputs.setCurrentScreenPoint(new Vec(5, 300))
+
+			// Get past the delay and easing ramp so each tick moves at full speed
+			edgeScrollManager.updateEdgeScrolling(1000)
+			editor.setCamera.mockClear()
+
+			// One second of 60 Hz ticks
+			for (let i = 0; i < 60; i++) edgeScrollManager.updateEdgeScrolling(1000 / 60)
+			const at60Hz = editor.setCamera.mock.calls.reduce(
+				(sum, [camera]) => sum + (camera as Vec).x,
+				0
+			)
+
+			editor.setCamera.mockClear()
+
+			// One second of 120 Hz ticks
+			for (let i = 0; i < 120; i++) edgeScrollManager.updateEdgeScrolling(1000 / 120)
+			const at120Hz = editor.setCamera.mock.calls.reduce(
+				(sum, [camera]) => sum + (camera as Vec).x,
+				0
+			)
+
+			expect(at60Hz).toBeGreaterThan(0)
+			expect(at120Hz).toBeCloseTo(at60Hz)
 		})
 
 		it('should add scroll delta to current camera position', () => {

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

@@ -1,3 +1,4 @@
+import { FRAME_MS_60HZ } from '../../../constants'
 import { EASINGS } from '../../../primitives/easings'
 import { Vec } from '../../../primitives/Vec'
 import type { Editor } from '../../Editor'
@@ -51,10 +52,13 @@ export class EdgeScrollManager {
 								)
 							)
 						: 1
-				this.moveCameraWhenCloseToEdge({
-					x: edgeScrollProximityFactor.x * eased,
-					y: edgeScrollProximityFactor.y * eased,
-				})
+				this.moveCameraWhenCloseToEdge(
+					{
+						x: edgeScrollProximityFactor.x * eased,
+						y: edgeScrollProximityFactor.y * eased,
+					},
+					elapsed
+				)
 			}
 		}
 	}
@@ -112,7 +116,7 @@ export class EdgeScrollManager {
 	 * Moves the camera when the mouse is close to the edge of the screen.
 	 * @public
 	 */
-	private moveCameraWhenCloseToEdge(proximityFactor: { x: number; y: number }) {
+	private moveCameraWhenCloseToEdge(proximityFactor: { x: number; y: number }, elapsed: number) {
 		if (proximityFactor.x === 0 && proximityFactor.y === 0) return
 		const { editor } = this
 
@@ -128,9 +132,11 @@ export class EdgeScrollManager {
 				? EDGE_SCROLL_SMALL_SCREEN_SPEED_FACTOR
 				: 1
 
-		// Determines the base speed of the scroll
+		// Determines the base speed of the scroll. edgeScrollSpeed is px per 60 Hz frame, so scale
+		// by elapsed time or a 120 Hz display scrolls twice as fast.
 		const zoomLevel = editor.getZoomLevel()
-		const pxSpeed = editor.user.getEdgeScrollSpeed() * editor.options.edgeScrollSpeed
+		const pxSpeed =
+			editor.user.getEdgeScrollSpeed() * editor.options.edgeScrollSpeed * (elapsed / FRAME_MS_60HZ)
 		const scrollDeltaX = (pxSpeed * proximityFactor.x * screenSizeFactorX) / zoomLevel
 		const scrollDeltaY = (pxSpeed * proximityFactor.y * screenSizeFactorY) / zoomLevel
 

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

@@ -0,0 +1,53 @@
+import { TLTheme } from '@tldraw/tlschema'
+import { MockInstance, vi } from 'vitest'
+import { TestEditor } from '../../../test/TestEditor'
+import { DEFAULT_THEME } from './defaultThemes'
+
+// Optional so that other tests' theme objects still satisfy TLThemes.
+declare module '@tldraw/tlschema' {
+	interface TLThemes {
+		ocean?: TLTheme
+		sunset?: TLTheme
+	}
+}
+
+const oceanTheme: TLTheme = { ...DEFAULT_THEME, id: 'ocean' }
+
+let editor: TestEditor
+let warn: MockInstance
+
+beforeEach(() => {
+	editor = new TestEditor({ themes: { ocean: oceanTheme } })
+	warn = vi.spyOn(console, 'warn').mockImplementation(() => {})
+})
+
+afterEach(() => {
+	warn.mockRestore()
+	editor.dispose()
+})
+
+describe('setCurrentTheme', () => {
+	it('switches to a registered theme', () => {
+		editor.setCurrentTheme('ocean')
+
+		expect(editor.getCurrentThemeId()).toBe('ocean')
+		expect(editor.getCurrentTheme()).toBe(oceanTheme)
+		expect(warn).not.toHaveBeenCalled()
+	})
+
+	it('warns and keeps the current theme when the id is not registered', () => {
+		editor.setCurrentTheme('sunset')
+
+		expect(warn).toHaveBeenCalledWith("Theme 'sunset' not found. Available themes: default, ocean")
+		expect(editor.getCurrentThemeId()).toBe('default')
+		expect(editor.getCurrentTheme()).toBe(DEFAULT_THEME)
+	})
+
+	it('keeps the previous theme rather than falling back to default', () => {
+		editor.setCurrentTheme('ocean')
+		editor.setCurrentTheme('sunset')
+
+		expect(editor.getCurrentThemeId()).toBe('ocean')
+		expect(editor.getCurrentTheme()).toBe(oceanTheme)
+	})
+})

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

@@ -69,14 +69,20 @@ export class ThemeManager {
 		return this._themes.get()[this.getCurrentThemeId()]!
 	}
 
-	/** Set the current theme by id. The theme must have been previously registered. */
+	/**
+	 * Set the current theme by id. The theme must have been previously registered; an
+	 * unregistered id is ignored and the current theme is kept.
+	 */
 	setCurrentTheme(id: TLThemeId): void {
-		if (process.env.NODE_ENV !== 'production') {
-			if (!(id in this._themes.get())) {
+		// Storing an unregistered id would make getCurrentTheme() return
+		// undefined despite its TLTheme return type.
+		if (!(id in this._themes.get())) {
+			if (process.env.NODE_ENV !== 'production') {
 				console.warn(
 					`Theme '${id}' not found. Available themes: ${Object.keys(this._themes.get()).join(', ')}`
 				)
 			}
+			return
 		}
 
 		this._currentThemeId.set(id)

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/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')
+	})
+})