@tldraw/editor 5.2.0-canary.2e7bbb68abd7 → 5.2.0-canary.2f9bfdac00de

package/src/lib/editor/Editor.ts

@@ -4165,6 +4165,10 @@ export class Editor extends EventEmitter<TLEventMap> {
 		}
 
 		const doc = this.getContainerDocument()
+		// If the container's document has been torn down (e.g. an iframe being
+		// removed), its body is null and there's nothing meaningful to measure.
+		if (!doc.body) return this
+
 		const insets = [
 			// top
 			screenBounds.minY !== 0,
@@ -10177,6 +10181,12 @@ export class Editor extends EventEmitter<TLEventMap> {
 
 		if (ids.length === 0) return undefined
 
+		// Text geometry is measured from the loaded font, so the export's bounds - and the
+		// layout of any text within it - depend on the right fonts having loaded. Wait for them
+		// before we measure; otherwise an export taken before fonts finish loading (e.g. right
+		// after the editor mounts) is sized and laid out with fallback-font metrics.
+		await this.fonts.loadRequiredFontsForCurrentPage(this.options.maxFontsToLoadBeforeRender)
+
 		return exportToSvg(this, ids, opts)
 	}
 
@@ -11223,8 +11233,10 @@ export class Editor extends EventEmitter<TLEventMap> {
 						inputs.setIsPointing(true)
 						inputs.setIsDragging(false)
 
-						// If pen mode is off but we're not already in pen mode, turn that on
-						if (!isPenMode && isPen) {
+						// If pen mode is off, turn it on for direct-display pen input only (e.g. Apple
+						// Pencil on an iPad or a Surface Pen on a touchscreen). Indirect desktop tablet
+						// styluses still draw as pens, but should not auto-enable pen mode.
+						if (!isPenMode && info.isPenDirect) {
 							this.updateInstanceState({ isPenMode: true })
 							// Once pen mode is on, touch input is ignored, so we discard the
 							// in-progress touch interaction .

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

@@ -9,7 +9,7 @@ import {
 import { IndexKey } from '@tldraw/utils'
 import { Mock, Mocked, vi } from 'vitest'
 import { Editor } from '../../Editor'
-import { FontManager } from './FontManager'
+import { clearFontFaceCacheForTests, FontManager } from './FontManager'
 
 // Mock the Editor class
 vi.mock('../../Editor')
@@ -73,6 +73,7 @@ describe('FontManager', () => {
 
 	beforeEach(() => {
 		vi.clearAllMocks()
+		clearFontFaceCacheForTests()
 
 		mockAssetUrls = {
 			'test-font.woff2': 'https://example.com/fonts/test-font.woff2',
@@ -314,4 +315,26 @@ describe('FontManager', () => {
 			await expect(fontManager.ensureFontIsLoaded(minimalFont)).resolves.toBeUndefined()
 		})
 	})
+
+	describe('findOrCreateFontFace caching', () => {
+		it('reuses a font face across manager instances instead of recreating it on remount', async () => {
+			const font = createMockFont()
+			await fontManager.ensureFontIsLoaded(font)
+			expect(global.FontFace).toHaveBeenCalledTimes(1)
+
+			// A fresh manager on the same document simulates an editor remount.
+			const remounted = new FontManager(editor, mockAssetUrls)
+			await remounted.ensureFontIsLoaded(font)
+
+			// The per-document cache lets the second manager reuse the existing face
+			// rather than re-scanning document.fonts and creating a new one.
+			expect(global.FontFace).toHaveBeenCalledTimes(1)
+		})
+
+		it('creates separate font faces for fonts with different descriptors', async () => {
+			await fontManager.ensureFontIsLoaded(createMockFont({ weight: 'normal' }))
+			await fontManager.ensureFontIsLoaded(createMockFont({ weight: 'bold' }))
+			expect(global.FontFace).toHaveBeenCalledTimes(2)
+		})
+	})
 })

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

@@ -145,7 +145,26 @@ export class FontManager {
 	}
 
 	private findOrCreateFontFace(font: TLFontFace) {
-		const fonts = this.editor.getContainerDocument().fonts
+		const containerDocument = this.editor.getContainerDocument()
+
+		// `findOrCreateFontFace` runs for every font on every editor mount, and a fresh
+		// editor (e.g. switching documents) gets a fresh FontManager with no memory of the
+		// previous one. The dedup below is an O(n) scan of the document's whole FontFaceSet,
+		// so without a cache that scan re-ran on every mount (measurably expensive on mobile
+		// Safari). Cache the resolved FontFace per document so repeated lookups - and
+		// remounts - are O(1). Keyed per document for cross-window embedding.
+		let cache = fontFaceCacheByDocument.get(containerDocument)
+		if (!cache) {
+			cache = new Map()
+			fontFaceCacheByDocument.set(containerDocument, cache)
+		}
+		const key = getFontFaceCacheKey(font)
+		const cached = cache.get(key)
+		if (cached) return cached
+
+		const fonts = containerDocument.fonts
+		// On a cache miss we still scan once, so font faces added outside this manager
+		// (e.g. preloaded fonts) are reused rather than duplicated.
 		for (const existing of fonts) {
 			if (
 				existing.family === font.family &&
@@ -153,6 +172,7 @@ export class FontManager {
 					([key, defaultValue]) => existing[key] === (font[key] ?? defaultValue)
 				)
 			) {
+				cache.set(key, existing)
 				return existing
 			}
 		}
@@ -164,6 +184,7 @@ export class FontManager {
 		})
 
 		fonts.add(instance)
+		cache.set(key, instance)
 
 		return instance
 	}
@@ -205,3 +226,27 @@ const defaultFontFaceDescriptors = {
 	descentOverride: 'normal',
 	lineGapOverride: 'normal',
 }
+
+// A FontFace is fully determined by its family and descriptors, so resolved faces can be
+// cached per document and reused across FontManager instances (e.g. editor remounts),
+// turning the per-lookup FontFaceSet scan into an O(1) map lookup. Faces are never removed
+// from `document.fonts` (FontManager.dispose leaves them), so the cache stays valid for the
+// document's lifetime. Keyed per document for cross-window embedding.
+let fontFaceCacheByDocument = new WeakMap<Document, Map<string, FontFace>>()
+
+function getFontFaceCacheKey(font: TLFontFace): string {
+	return JSON.stringify([
+		font.family,
+		...objectMapEntries(defaultFontFaceDescriptors).map(
+			([key, defaultValue]) => font[key] ?? defaultValue
+		),
+	])
+}
+
+/**
+ * Resets the per-document font-face cache. Only intended for tests.
+ * @internal
+ */
+export function clearFontFaceCacheForTests() {
+	fontFaceCacheByDocument = new WeakMap()
+}

package/src/lib/editor/types/event-types.ts

@@ -63,6 +63,13 @@ export type TLPointerEventInfo = TLBaseEventInfo & {
 	pointerId: number
 	button: number
 	isPen: boolean
+	/**
+	 * Whether this pen event appears to be direct manipulation on the display (e.g. Apple Pencil on
+	 * an iPad or a Surface Pen on a touchscreen) rather than indirect input from a desktop graphics
+	 * tablet (e.g. a Wacom Intuos). Only direct-display pens should auto-enable pen mode. Drawing and
+	 * pressure behavior is driven by `isPen` and applies to all pens regardless of this flag.
+	 */
+	isPenDirect?: boolean
 } & TLPointerEventTarget
 
 /** @public */

package/src/lib/globals/environment.ts

@@ -17,6 +17,10 @@ const tlenv = {
 	isWebview: false,
 	isDarwin: false,
 	hasCanvasSupport: false,
+	// Whether the device has a touch screen (an integrated coarse pointer, e.g. an iPad or a
+	// touchscreen laptop). Unlike `isCoarsePointer`, this reflects the device's hardware rather than
+	// the pointer currently in use, so it stays stable when a pen or mouse is used.
+	isTouchDevice: false,
 }
 
 let isForcedFinePointer = false
@@ -32,6 +36,9 @@ if (typeof window !== 'undefined') {
 	}
 	tlenv.hasCanvasSupport = 'Promise' in window && 'HTMLCanvasElement' in window
 	isForcedFinePointer = tlenv.isFirefox && !tlenv.isAndroid && !tlenv.isIos
+	tlenv.isTouchDevice =
+		('navigator' in window && window.navigator.maxTouchPoints > 0) ||
+		(typeof window.matchMedia === 'function' && window.matchMedia('(any-pointer: coarse)').matches)
 }
 
 /**

package/src/lib/hooks/EditorComponentsContext.tsx

@@ -2,7 +2,6 @@ import { ComponentType, RefAttributes, createContext, useContext } from 'react'
 import type { TLCanvasComponentProps } from '../components/default-components/DefaultCanvas'
 import type { TLErrorFallbackComponent } from '../components/default-components/DefaultErrorFallback'
 import type { TLGridProps } from '../components/default-components/DefaultGrid'
-import type { TLSelectionBackgroundProps } from '../components/default-components/DefaultSelectionBackground'
 import type { TLShapeErrorFallbackComponent } from '../components/default-components/DefaultShapeErrorFallback'
 import type { TLShapeWrapperProps } from '../components/default-components/DefaultShapeWrapper'
 
@@ -14,7 +13,6 @@ export interface TLEditorComponents {
 	InFrontOfTheCanvas?: ComponentType | null
 	LoadingScreen?: ComponentType | null
 	OnTheCanvas?: ComponentType | null
-	SelectionBackground?: ComponentType<TLSelectionBackgroundProps> | null
 	ShapeWrapper?: ComponentType<TLShapeWrapperProps & RefAttributes<HTMLDivElement>> | null
 	Spinner?: ComponentType<React.SVGProps<SVGSVGElement>> | null
 	SvgDefs?: ComponentType | null

package/src/lib/hooks/useCanvasEvents.ts

@@ -8,7 +8,7 @@ import {
 	setPointerCapture,
 } from '../utils/dom'
 import { getPointerInfo } from '../utils/getPointerInfo'
-import { getPointerEventButton, isSecondaryClickEvent } from '../utils/pointer'
+import { getPointerEventButton, isDirectDisplayPen, isSecondaryClickEvent } from '../utils/pointer'
 import { useEditor } from './useEditor'
 
 export function useCanvasEvents() {
@@ -39,6 +39,10 @@ export function useCanvasEvents() {
 
 				if (button !== 0 && button !== 1 && button !== 2 && button !== 5) return
 
+				// Detect direct-display pen input (Apple Pencil, Surface Pen on a touchscreen) so we
+				// only auto-enable pen mode for it, not for an indirect desktop tablet stylus.
+				const isPenDirect = isDirectDisplayPen(e)
+
 				setPointerCapture(e.currentTarget, e)
 
 				editor.dispatch({
@@ -46,6 +50,7 @@ export function useCanvasEvents() {
 					target: 'canvas',
 					name: 'pointer_down',
 					...getPointerInfo(editor, e),
+					isPenDirect,
 				})
 			}
 

package/src/lib/hooks/useEditorComponents.tsx

@@ -33,7 +33,6 @@ export function EditorComponentsProvider({
 			InFrontOfTheCanvas: null,
 			LoadingScreen: DefaultLoadingScreen,
 			OnTheCanvas: null,
-			SelectionBackground: null,
 			ShapeWrapper: DefaultShapeWrapper,
 			Spinner: DefaultSpinner,
 			SvgDefs: DefaultSvgDefs,

package/src/lib/hooks/useScreenBounds.ts

@@ -11,6 +11,9 @@ export function useScreenBounds(ref: React.RefObject<HTMLElement | null>) {
 		const updateBounds = throttle(
 			() => {
 				if (!ref.current) return
+				// If the container's document has been torn down (e.g. an iframe
+				// being removed), there's nothing to measure — bail.
+				if (!ref.current.ownerDocument.body) return
 				editor.updateViewportScreenBounds(ref.current)
 			},
 			200,

package/src/lib/utils/pointer.test.ts

@@ -1,7 +1,7 @@
 import { tlenv } from '../globals/environment'
 import { TestEditor } from '../test/TestEditor'
 import { getPointerInfo } from './getPointerInfo'
-import { isSecondaryClickEvent } from './pointer'
+import { isDirectDisplayPen, isSecondaryClickEvent } from './pointer'
 
 const originalIsDarwin = tlenv.isDarwin
 
@@ -21,6 +21,34 @@ describe('isSecondaryClickEvent', () => {
 	})
 })
 
+describe('isDirectDisplayPen', () => {
+	const originalIsTouchDevice = tlenv.isTouchDevice
+
+	afterEach(() => {
+		tlenv.isTouchDevice = originalIsTouchDevice
+	})
+
+	function event(pointerType: string) {
+		return { pointerType, pointerId: 1 } as unknown as PointerEvent
+	}
+
+	it('treats a pen on a touch-capable device as a direct-display pen', () => {
+		tlenv.isTouchDevice = true
+		expect(isDirectDisplayPen(event('pen'))).toBe(true)
+	})
+
+	it('treats a pen on a non-touch device as indirect', () => {
+		tlenv.isTouchDevice = false
+		expect(isDirectDisplayPen(event('pen'))).toBe(false)
+	})
+
+	it('is never true for mouse or touch input, even on a touch-capable device', () => {
+		tlenv.isTouchDevice = true
+		expect(isDirectDisplayPen(event('mouse'))).toBe(false)
+		expect(isDirectDisplayPen(event('touch'))).toBe(false)
+	})
+})
+
 describe('ctrl + left-click on macOS fires as a right-click (regression)', () => {
 	// Regression test for https://github.com/tldraw/tldraw/issues/8217
 	// On macOS, a ctrl + left-click should be treated as a right-click

package/src/lib/utils/pointer.ts

@@ -1,5 +1,29 @@
+import type React from 'react'
 import { tlenv } from '../globals/environment'
 
+/**
+ * Decide whether a pen pointer event looks like direct manipulation on the display (e.g. Apple
+ * Pencil on an iPad or a Surface Pen on a touchscreen) rather than indirect input from a desktop
+ * graphics tablet (e.g. a Wacom Intuos).
+ *
+ * We can't tell the two apart from the pointer event itself: both report `pointerType: 'pen'`, and
+ * implicit pointer capture — which in theory distinguishes direct-manipulation pointers — isn't
+ * reliably observable across browsers (notably WebKit/iPad). Instead we key off the device: a
+ * direct-display pen draws on a touch-capable screen, while an indirect graphics tablet is used on
+ * a non-touch desktop alongside a mouse. A device with no touch input therefore can't host a
+ * direct-display pen.
+ *
+ * Note this uses {@link tlenv.isTouchDevice} — the device's fixed touch capability — not the
+ * editor's dynamic `isCoarsePointer` state, which a pen `pointerdown` flips to coarse regardless
+ * of device.
+ *
+ * @internal
+ */
+export function isDirectDisplayPen(e: React.PointerEvent | PointerEvent): boolean {
+	if (e.pointerType !== 'pen') return false
+	return tlenv.isTouchDevice
+}
+
 /** @internal */
 interface PointerLike {
 	button: number

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.2.0-canary.2e7bbb68abd7'
+export const version = '5.2.0-canary.2f9bfdac00de'
 export const publishDates = {
 	major: '2026-05-06T16:28:18.473Z',
-	minor: '2026-06-18T14:06:28.264Z',
-	patch: '2026-06-18T14:06:28.264Z',
+	minor: '2026-06-22T14:24:17.659Z',
+	patch: '2026-06-22T14:24:17.659Z',
 }

package/dist-cjs/lib/components/default-components/DefaultSelectionBackground.js

@@ -1,49 +0,0 @@
-"use strict";
-var __create = Object.create;
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  // If the importer is in node compatibility mode or this is not an ESM
-  // file that has been converted to a CommonJS file using a Babel-
-  // compatible transform (i.e. "__esModule" has not been set), then set
-  // "default" to the CommonJS "module.exports" for node compatibility.
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
-  mod
-));
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var DefaultSelectionBackground_exports = {};
-__export(DefaultSelectionBackground_exports, {
-  DefaultSelectionBackground: () => DefaultSelectionBackground
-});
-module.exports = __toCommonJS(DefaultSelectionBackground_exports);
-var import_jsx_runtime = require("react/jsx-runtime");
-var React = __toESM(require("react"), 1);
-var import_useTransform = require("../../hooks/useTransform");
-var import_utils = require("../../primitives/utils");
-function DefaultSelectionBackground({ bounds, rotation }) {
-  const rDiv = React.useRef(null);
-  (0, import_useTransform.useTransform)(rDiv, bounds.x, bounds.y, 1, rotation);
-  React.useLayoutEffect(() => {
-    const div = rDiv.current;
-    if (!div) return;
-    div.style.width = (0, import_utils.toDomPrecision)(Math.max(1, bounds.width)) + "px";
-    div.style.height = (0, import_utils.toDomPrecision)(Math.max(1, bounds.height)) + "px";
-  }, [bounds.width, bounds.height]);
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { ref: rDiv, className: "tl-selection__bg", draggable: false });
-}
-//# sourceMappingURL=DefaultSelectionBackground.js.map

package/dist-cjs/lib/components/default-components/DefaultSelectionBackground.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../../src/lib/components/default-components/DefaultSelectionBackground.tsx"],
-  "sourcesContent": ["import * as React from 'react'\nimport { useTransform } from '../../hooks/useTransform'\nimport { Box } from '../../primitives/Box'\nimport { toDomPrecision } from '../../primitives/utils'\n\n/** @public */\nexport interface TLSelectionBackgroundProps {\n\tbounds: Box\n\trotation: number\n}\n\n/** @public @react */\nexport function DefaultSelectionBackground({ bounds, rotation }: TLSelectionBackgroundProps) {\n\tconst rDiv = React.useRef<HTMLDivElement>(null)\n\tuseTransform(rDiv, bounds.x, bounds.y, 1, rotation)\n\n\tReact.useLayoutEffect(() => {\n\t\tconst div = rDiv.current\n\t\tif (!div) return\n\t\tdiv.style.width = toDomPrecision(Math.max(1, bounds.width)) + 'px'\n\t\tdiv.style.height = toDomPrecision(Math.max(1, bounds.height)) + 'px'\n\t}, [bounds.width, bounds.height])\n\n\treturn <div ref={rDiv} className=\"tl-selection__bg\" draggable={false} />\n}\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAuBQ;AAvBR,YAAuB;AACvB,0BAA6B;AAE7B,mBAA+B;AASxB,SAAS,2BAA2B,EAAE,QAAQ,SAAS,GAA+B;AAC5F,QAAM,OAAO,MAAM,OAAuB,IAAI;AAC9C,wCAAa,MAAM,OAAO,GAAG,OAAO,GAAG,GAAG,QAAQ;AAElD,QAAM,gBAAgB,MAAM;AAC3B,UAAM,MAAM,KAAK;AACjB,QAAI,CAAC,IAAK;AACV,QAAI,MAAM,YAAQ,6BAAe,KAAK,IAAI,GAAG,OAAO,KAAK,CAAC,IAAI;AAC9D,QAAI,MAAM,aAAS,6BAAe,KAAK,IAAI,GAAG,OAAO,MAAM,CAAC,IAAI;AAAA,EACjE,GAAG,CAAC,OAAO,OAAO,OAAO,MAAM,CAAC;AAEhC,SAAO,4CAAC,SAAI,KAAK,MAAM,WAAU,oBAAmB,WAAW,OAAO;AACvE;",
-  "names": []
-}

package/dist-cjs/lib/hooks/useTransform.js

@@ -1,43 +0,0 @@
-"use strict";
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var useTransform_exports = {};
-__export(useTransform_exports, {
-  useTransform: () => useTransform
-});
-module.exports = __toCommonJS(useTransform_exports);
-var import_react = require("react");
-function useTransform(ref, x, y, scale, rotate, additionalOffset) {
-  (0, import_react.useLayoutEffect)(() => {
-    const elm = ref.current;
-    if (!elm) return;
-    if (x === void 0) return;
-    let trans = `translate(${x}px, ${y}px)`;
-    if (scale !== void 0) {
-      trans += ` scale(${scale})`;
-    }
-    if (rotate !== void 0) {
-      trans += ` rotate(${rotate}rad)`;
-    }
-    if (additionalOffset) {
-      trans += ` translate(${additionalOffset.x}px, ${additionalOffset.y}px)`;
-    }
-    elm.style.transform = trans;
-  });
-}
-//# sourceMappingURL=useTransform.js.map

package/dist-cjs/lib/hooks/useTransform.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../src/lib/hooks/useTransform.ts"],
-  "sourcesContent": ["import { useLayoutEffect } from 'react'\nimport { VecLike } from '../primitives/Vec'\n\n/** @public */\nexport function useTransform(\n\tref: React.RefObject<HTMLElement | SVGElement | null>,\n\tx?: number,\n\ty?: number,\n\tscale?: number,\n\trotate?: number,\n\tadditionalOffset?: VecLike\n) {\n\tuseLayoutEffect(() => {\n\t\tconst elm = ref.current\n\t\tif (!elm) return\n\t\tif (x === undefined) return\n\n\t\tlet trans = `translate(${x}px, ${y}px)`\n\t\tif (scale !== undefined) {\n\t\t\ttrans += ` scale(${scale})`\n\t\t}\n\t\tif (rotate !== undefined) {\n\t\t\ttrans += ` rotate(${rotate}rad)`\n\t\t}\n\t\tif (additionalOffset) {\n\t\t\ttrans += ` translate(${additionalOffset.x}px, ${additionalOffset.y}px)`\n\t\t}\n\t\telm.style.transform = trans\n\t})\n}\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAgC;AAIzB,SAAS,aACf,KACA,GACA,GACA,OACA,QACA,kBACC;AACD,oCAAgB,MAAM;AACrB,UAAM,MAAM,IAAI;AAChB,QAAI,CAAC,IAAK;AACV,QAAI,MAAM,OAAW;AAErB,QAAI,QAAQ,aAAa,CAAC,OAAO,CAAC;AAClC,QAAI,UAAU,QAAW;AACxB,eAAS,UAAU,KAAK;AAAA,IACzB;AACA,QAAI,WAAW,QAAW;AACzB,eAAS,WAAW,MAAM;AAAA,IAC3B;AACA,QAAI,kBAAkB;AACrB,eAAS,cAAc,iBAAiB,CAAC,OAAO,iBAAiB,CAAC;AAAA,IACnE;AACA,QAAI,MAAM,YAAY;AAAA,EACvB,CAAC;AACF;",
-  "names": []
-}

package/dist-esm/lib/components/default-components/DefaultSelectionBackground.mjs

@@ -1,19 +0,0 @@
-import { jsx } from "react/jsx-runtime";
-import * as React from "react";
-import { useTransform } from "../../hooks/useTransform.mjs";
-import { toDomPrecision } from "../../primitives/utils.mjs";
-function DefaultSelectionBackground({ bounds, rotation }) {
-  const rDiv = React.useRef(null);
-  useTransform(rDiv, bounds.x, bounds.y, 1, rotation);
-  React.useLayoutEffect(() => {
-    const div = rDiv.current;
-    if (!div) return;
-    div.style.width = toDomPrecision(Math.max(1, bounds.width)) + "px";
-    div.style.height = toDomPrecision(Math.max(1, bounds.height)) + "px";
-  }, [bounds.width, bounds.height]);
-  return /* @__PURE__ */ jsx("div", { ref: rDiv, className: "tl-selection__bg", draggable: false });
-}
-export {
-  DefaultSelectionBackground
-};
-//# sourceMappingURL=DefaultSelectionBackground.mjs.map

package/dist-esm/lib/components/default-components/DefaultSelectionBackground.mjs.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../../src/lib/components/default-components/DefaultSelectionBackground.tsx"],
-  "sourcesContent": ["import * as React from 'react'\nimport { useTransform } from '../../hooks/useTransform'\nimport { Box } from '../../primitives/Box'\nimport { toDomPrecision } from '../../primitives/utils'\n\n/** @public */\nexport interface TLSelectionBackgroundProps {\n\tbounds: Box\n\trotation: number\n}\n\n/** @public @react */\nexport function DefaultSelectionBackground({ bounds, rotation }: TLSelectionBackgroundProps) {\n\tconst rDiv = React.useRef<HTMLDivElement>(null)\n\tuseTransform(rDiv, bounds.x, bounds.y, 1, rotation)\n\n\tReact.useLayoutEffect(() => {\n\t\tconst div = rDiv.current\n\t\tif (!div) return\n\t\tdiv.style.width = toDomPrecision(Math.max(1, bounds.width)) + 'px'\n\t\tdiv.style.height = toDomPrecision(Math.max(1, bounds.height)) + 'px'\n\t}, [bounds.width, bounds.height])\n\n\treturn <div ref={rDiv} className=\"tl-selection__bg\" draggable={false} />\n}\n"],
-  "mappings": "AAuBQ;AAvBR,YAAY,WAAW;AACvB,SAAS,oBAAoB;AAE7B,SAAS,sBAAsB;AASxB,SAAS,2BAA2B,EAAE,QAAQ,SAAS,GAA+B;AAC5F,QAAM,OAAO,MAAM,OAAuB,IAAI;AAC9C,eAAa,MAAM,OAAO,GAAG,OAAO,GAAG,GAAG,QAAQ;AAElD,QAAM,gBAAgB,MAAM;AAC3B,UAAM,MAAM,KAAK;AACjB,QAAI,CAAC,IAAK;AACV,QAAI,MAAM,QAAQ,eAAe,KAAK,IAAI,GAAG,OAAO,KAAK,CAAC,IAAI;AAC9D,QAAI,MAAM,SAAS,eAAe,KAAK,IAAI,GAAG,OAAO,MAAM,CAAC,IAAI;AAAA,EACjE,GAAG,CAAC,OAAO,OAAO,OAAO,MAAM,CAAC;AAEhC,SAAO,oBAAC,SAAI,KAAK,MAAM,WAAU,oBAAmB,WAAW,OAAO;AACvE;",
-  "names": []
-}

package/dist-esm/lib/hooks/useTransform.mjs

@@ -1,23 +0,0 @@
-import { useLayoutEffect } from "react";
-function useTransform(ref, x, y, scale, rotate, additionalOffset) {
-  useLayoutEffect(() => {
-    const elm = ref.current;
-    if (!elm) return;
-    if (x === void 0) return;
-    let trans = `translate(${x}px, ${y}px)`;
-    if (scale !== void 0) {
-      trans += ` scale(${scale})`;
-    }
-    if (rotate !== void 0) {
-      trans += ` rotate(${rotate}rad)`;
-    }
-    if (additionalOffset) {
-      trans += ` translate(${additionalOffset.x}px, ${additionalOffset.y}px)`;
-    }
-    elm.style.transform = trans;
-  });
-}
-export {
-  useTransform
-};
-//# sourceMappingURL=useTransform.mjs.map

package/dist-esm/lib/hooks/useTransform.mjs.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../src/lib/hooks/useTransform.ts"],
-  "sourcesContent": ["import { useLayoutEffect } from 'react'\nimport { VecLike } from '../primitives/Vec'\n\n/** @public */\nexport function useTransform(\n\tref: React.RefObject<HTMLElement | SVGElement | null>,\n\tx?: number,\n\ty?: number,\n\tscale?: number,\n\trotate?: number,\n\tadditionalOffset?: VecLike\n) {\n\tuseLayoutEffect(() => {\n\t\tconst elm = ref.current\n\t\tif (!elm) return\n\t\tif (x === undefined) return\n\n\t\tlet trans = `translate(${x}px, ${y}px)`\n\t\tif (scale !== undefined) {\n\t\t\ttrans += ` scale(${scale})`\n\t\t}\n\t\tif (rotate !== undefined) {\n\t\t\ttrans += ` rotate(${rotate}rad)`\n\t\t}\n\t\tif (additionalOffset) {\n\t\t\ttrans += ` translate(${additionalOffset.x}px, ${additionalOffset.y}px)`\n\t\t}\n\t\telm.style.transform = trans\n\t})\n}\n"],
-  "mappings": "AAAA,SAAS,uBAAuB;AAIzB,SAAS,aACf,KACA,GACA,GACA,OACA,QACA,kBACC;AACD,kBAAgB,MAAM;AACrB,UAAM,MAAM,IAAI;AAChB,QAAI,CAAC,IAAK;AACV,QAAI,MAAM,OAAW;AAErB,QAAI,QAAQ,aAAa,CAAC,OAAO,CAAC;AAClC,QAAI,UAAU,QAAW;AACxB,eAAS,UAAU,KAAK;AAAA,IACzB;AACA,QAAI,WAAW,QAAW;AACzB,eAAS,WAAW,MAAM;AAAA,IAC3B;AACA,QAAI,kBAAkB;AACrB,eAAS,cAAc,iBAAiB,CAAC,OAAO,iBAAiB,CAAC;AAAA,IACnE;AACA,QAAI,MAAM,YAAY;AAAA,EACvB,CAAC;AACF;",
-  "names": []
-}

package/src/lib/components/default-components/DefaultSelectionBackground.tsx

@@ -1,25 +0,0 @@
-import * as React from 'react'
-import { useTransform } from '../../hooks/useTransform'
-import { Box } from '../../primitives/Box'
-import { toDomPrecision } from '../../primitives/utils'
-
-/** @public */
-export interface TLSelectionBackgroundProps {
-	bounds: Box
-	rotation: number
-}
-
-/** @public @react */
-export function DefaultSelectionBackground({ bounds, rotation }: TLSelectionBackgroundProps) {
-	const rDiv = React.useRef<HTMLDivElement>(null)
-	useTransform(rDiv, bounds.x, bounds.y, 1, rotation)
-
-	React.useLayoutEffect(() => {
-		const div = rDiv.current
-		if (!div) return
-		div.style.width = toDomPrecision(Math.max(1, bounds.width)) + 'px'
-		div.style.height = toDomPrecision(Math.max(1, bounds.height)) + 'px'
-	}, [bounds.width, bounds.height])
-
-	return <div ref={rDiv} className="tl-selection__bg" draggable={false} />
-}

package/src/lib/hooks/useTransform.ts

@@ -1,30 +0,0 @@
-import { useLayoutEffect } from 'react'
-import { VecLike } from '../primitives/Vec'
-
-/** @public */
-export function useTransform(
-	ref: React.RefObject<HTMLElement | SVGElement | null>,
-	x?: number,
-	y?: number,
-	scale?: number,
-	rotate?: number,
-	additionalOffset?: VecLike
-) {
-	useLayoutEffect(() => {
-		const elm = ref.current
-		if (!elm) return
-		if (x === undefined) return
-
-		let trans = `translate(${x}px, ${y}px)`
-		if (scale !== undefined) {
-			trans += ` scale(${scale})`
-		}
-		if (rotate !== undefined) {
-			trans += ` rotate(${rotate}rad)`
-		}
-		if (additionalOffset) {
-			trans += ` translate(${additionalOffset.x}px, ${additionalOffset.y}px)`
-		}
-		elm.style.transform = trans
-	})
-}