@tldraw/editor 5.2.0-canary.cfef7b16ad41 → 5.2.0-canary.d28cf4347708

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

@@ -32,7 +32,7 @@ export interface TLCanvasComponentProps {
 export function DefaultCanvas({ className }: TLCanvasComponentProps) {
 	const editor = useEditor()
 
-	const { SelectionBackground, Background, SvgDefs } = useEditorComponents()
+	const { Background, SvgDefs } = useEditorComponents()
 
 	const rCanvas = useRef<HTMLDivElement>(null)
 	const rHtmlLayer = useRef<HTMLDivElement>(null)
@@ -160,7 +160,6 @@ export function DefaultCanvas({ className }: TLCanvasComponentProps) {
 				{isGridMode && Grid && <GridWrapper />}
 				<div ref={rHtmlLayer} className="tl-html-layer tl-shapes" draggable={false}>
 					<OnTheCanvasWrapper />
-					{SelectionBackground && <SelectionBackgroundWrapper />}
 					{hideShapes ? null : <ShapesLayer canvasRef={rCanvas} />}
 				</div>
 				<CanvasOverlays />
@@ -345,21 +344,6 @@ function DebugSvgCopy({ id, mode }: { id: TLShapeId; mode: 'img' | 'iframe' }) {
 	)
 }
 
-function SelectionBackgroundWrapper() {
-	const editor = useEditor()
-	const selectionRotation = useValue('selection rotation', () => editor.getSelectionRotation(), [
-		editor,
-	])
-	const selectionBounds = useValue(
-		'selection bounds',
-		() => editor.getSelectionRotatedPageBounds(),
-		[editor]
-	)
-	const { SelectionBackground } = useEditorComponents()
-	if (!selectionBounds || !SelectionBackground) return null
-	return <SelectionBackground bounds={selectionBounds} rotation={selectionRotation} />
-}
-
 function OnTheCanvasWrapper() {
 	const { OnTheCanvas } = useEditorComponents()
 	if (!OnTheCanvas) return null

package/src/lib/editor/Editor.test.ts

@@ -96,6 +96,42 @@ describe('updateShape', () => {
 	})
 })
 
+describe('updateViewportScreenBounds', () => {
+	it('bails without crashing or updating bounds when the container document has no body', () => {
+		const documentSpy = vi
+			.spyOn(editor, 'getContainerDocument')
+			.mockReturnValue({ body: null } as unknown as Document)
+
+		const prevScreenBounds = editor.getInstanceState().screenBounds
+		const prevInsets = editor.getInstanceState().insets
+
+		try {
+			expect(() => editor.updateViewportScreenBounds(new Box(10, 20, 100, 200))).not.toThrow()
+			// A torn-down document is not measurable, so the bounds are left untouched.
+			expect(editor.getInstanceState().screenBounds).toEqual(prevScreenBounds)
+			expect(editor.getInstanceState().insets).toEqual(prevInsets)
+		} finally {
+			documentSpy.mockRestore()
+		}
+	})
+
+	it('uses the container document body to calculate right and bottom insets', () => {
+		const documentSpy = vi.spyOn(editor, 'getContainerDocument').mockReturnValue({
+			body: {
+				scrollWidth: 500,
+				scrollHeight: 400,
+			},
+		} as unknown as Document)
+
+		try {
+			editor.updateViewportScreenBounds(new Box(10, 20, 100, 200))
+			expect(editor.getInstanceState().insets).toEqual([true, true, true, true])
+		} finally {
+			documentSpy.mockRestore()
+		}
+	})
+})
+
 describe('zoomToFit', () => {
 	it('no-op when isLocked is set', () => {
 		editor.getCurrentPageShapeIds = vi.fn(() => new Set([createShapeId('box1')]))

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/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/primitives/Vec.ts

@@ -1,5 +1,8 @@
 import { VecModel } from '@tldraw/tlschema'
 import { EASINGS } from './easings'
+
+const { easeInQuad, easeInOutQuad } = EASINGS
+
 function clamp(n: number, min: number, max?: number): number {
 	return Math.max(min, typeof max !== 'undefined' ? Math.min(n, max) : n)
 }
@@ -634,13 +637,13 @@ export class Vec {
 	 * @param steps - The number of points to return.
 	 * @param ease - The easing to use.
 	 */
-	static PointsBetween(A: VecModel, B: VecModel, steps = 6, ease = EASINGS.easeInQuad): Vec[] {
+	static PointsBetween(A: VecModel, B: VecModel, steps = 6, ease = easeInQuad): Vec[] {
 		const results: Vec[] = []
 
 		for (let i = 0; i < steps; i++) {
 			const t = ease(i / (steps - 1))
 			const point = Vec.Lrp(A, B, t)
-			point.z = Math.min(1, 0.5 + Math.abs(0.5 - EASINGS.easeInOutQuad(t)) * 0.65)
+			point.z = Math.min(1, 0.5 + Math.abs(0.5 - easeInOutQuad(t)) * 0.65)
 			results.push(point)
 		}
 

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.cfef7b16ad41'
+export const version = '5.2.0-canary.d28cf4347708'
 export const publishDates = {
 	major: '2026-05-06T16:28:18.473Z',
-	minor: '2026-06-19T19:55:55.499Z',
-	patch: '2026-06-19T19:55:55.499Z',
+	minor: '2026-06-23T20:12:41.773Z',
+	patch: '2026-06-23T20:12:41.773Z',
 }

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
-	})
-}