@tldraw/editor 3.13.0-canary.e0266852447b → 3.13.0-canary.e25033d63b69

package/dist-esm/version.mjs

@@ -1,8 +1,8 @@
-const version = "3.13.0-canary.e0266852447b";
+const version = "3.13.0-canary.e25033d63b69";
 const publishDates = {
   major: "2024-09-13T14:36:29.063Z",
-  minor: "2025-05-02T09:47:57.604Z",
-  patch: "2025-05-02T09:47:57.604Z"
+  minor: "2025-05-12T08:07:21.124Z",
+  patch: "2025-05-12T08:07:21.124Z"
 };
 export {
   publishDates,

package/dist-esm/version.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../src/version.ts"],
-  "sourcesContent": ["// This file is automatically generated by internal/scripts/refresh-assets.ts.\n// Do not edit manually. Or do, I'm a comment, not a cop.\n\nexport const version = '3.13.0-canary.e0266852447b'\nexport const publishDates = {\n\tmajor: '2024-09-13T14:36:29.063Z',\n\tminor: '2025-05-02T09:47:57.604Z',\n\tpatch: '2025-05-02T09:47:57.604Z',\n}\n"],
+  "sourcesContent": ["// This file is automatically generated by internal/scripts/refresh-assets.ts.\n// Do not edit manually. Or do, I'm a comment, not a cop.\n\nexport const version = '3.13.0-canary.e25033d63b69'\nexport const publishDates = {\n\tmajor: '2024-09-13T14:36:29.063Z',\n\tminor: '2025-05-12T08:07:21.124Z',\n\tpatch: '2025-05-12T08:07:21.124Z',\n}\n"],
   "mappings": "AAGO,MAAM,UAAU;AAChB,MAAM,eAAe;AAAA,EAC3B,OAAO;AAAA,EACP,OAAO;AAAA,EACP,OAAO;AACR;",
   "names": []
 }

package/editor.css

@@ -157,6 +157,7 @@
 	--color-panel-contrast: hsl(0, 0%, 100%);
 	--color-panel-overlay: hsl(0, 0%, 100%, 82%);
 	--color-panel: hsl(0, 0%, 99%);
+	--color-panel-transparent: hsla(0, 0%, 99%, 0%);
 	--color-focus: hsl(219, 65%, 50%);
 	--color-selected: hsl(214, 84%, 56%);
 	--color-selected-contrast: hsl(0, 0%, 100%);
@@ -208,6 +209,7 @@
 	--color-panel-contrast: hsl(245, 12%, 23%);
 	--color-panel: hsl(235, 6.8%, 13.5%);
 	--color-panel-overlay: hsl(210, 10%, 24%, 82%);
+	--color-panel-transparent: hsla(235, 6.8%, 13.5%, 0%);
 	--color-focus: hsl(217, 76%, 80%);
 	--color-selected: hsl(217, 89%, 61%);
 	--color-selected-contrast: hsl(0, 0%, 100%);
@@ -600,6 +602,31 @@ input,
 	}
 }
 
+/* --------------------- Arrow Hints -------------------- */
+
+.tl-arrow-hint-handle {
+	fill: var(--color-selected-contrast);
+	stroke: var(--color-selection-stroke);
+	stroke-width: calc(1.5px * var(--tl-scale));
+	r: calc(4px * var(--tl-scale));
+}
+
+.tl-arrow-hint-snap {
+	stroke: transparent;
+	fill: var(--color-selection-fill);
+	r: calc(12px * var(--tl-scale));
+}
+
+.tl-arrow-hint-snap__none,
+.tl-arrow-hint-snap__center,
+.tl-arrow-hint-snap__axis {
+	display: none;
+}
+
+.tl-arrow-hint-snap__edge {
+	r: calc(8px * var(--tl-scale));
+}
+
 /* ------------------ Bounds Detail ----------------- */
 
 .tl-image,
@@ -969,6 +996,8 @@ input,
 
 .tl-rich-text p {
 	margin: 0;
+	/* Depending on the extensions, <p> tags can be empty, without a <br />. */
+	min-height: 1lh;
 }
 
 .tl-rich-text ul,
@@ -976,6 +1005,8 @@ input,
 	text-align: left;
 	margin: 0;
 	padding-left: 3.25ch;
+	/* Some resets, like Tailwind, nix the list styling. */
+	list-style: revert;
 }
 
 .tl-rich-text ol:has(> li:nth-child(10)) {
@@ -1353,10 +1384,6 @@ input,
 	opacity: 0;
 }
 
-.tl-arrow-label[data-isediting='true'] > .tl-arrow-label__inner {
-	background-color: var(--color-background);
-}
-
 .tl-arrow-label__inner {
 	border-radius: var(--radius-1);
 	box-sizing: content-box;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tldraw/editor",
   "description": "A tiny little drawing app (editor).",
-  "version": "3.13.0-canary.e0266852447b",
+  "version": "3.13.0-canary.e25033d63b69",
   "author": {
     "name": "tldraw Inc.",
     "email": "hello@tldraw.com"
@@ -48,12 +48,12 @@
     "@tiptap/core": "^2.9.1",
     "@tiptap/pm": "^2.9.1",
     "@tiptap/react": "^2.9.1",
-    "@tldraw/state": "3.13.0-canary.e0266852447b",
-    "@tldraw/state-react": "3.13.0-canary.e0266852447b",
-    "@tldraw/store": "3.13.0-canary.e0266852447b",
-    "@tldraw/tlschema": "3.13.0-canary.e0266852447b",
-    "@tldraw/utils": "3.13.0-canary.e0266852447b",
-    "@tldraw/validate": "3.13.0-canary.e0266852447b",
+    "@tldraw/state": "3.13.0-canary.e25033d63b69",
+    "@tldraw/state-react": "3.13.0-canary.e25033d63b69",
+    "@tldraw/store": "3.13.0-canary.e25033d63b69",
+    "@tldraw/tlschema": "3.13.0-canary.e25033d63b69",
+    "@tldraw/utils": "3.13.0-canary.e25033d63b69",
+    "@tldraw/validate": "3.13.0-canary.e25033d63b69",
     "@types/core-js": "^2.5.8",
     "@use-gesture/react": "^10.3.1",
     "classnames": "^2.5.1",

package/src/index.ts

@@ -4,37 +4,11 @@ import 'core-js/stable/array/flat-map.js'
 import 'core-js/stable/array/flat.js'
 import 'core-js/stable/string/at.js'
 import 'core-js/stable/string/replace-all.js'
-export {
-	EMPTY_ARRAY,
-	EffectScheduler,
-	atom,
-	computed,
-	react,
-	transact,
-	transaction,
-	whyAmIRunning,
-	type Atom,
-	type Signal,
-} from '@tldraw/state'
-export {
-	track,
-	useAtom,
-	useComputed,
-	useQuickReactor,
-	useReactor,
-	useStateTracking,
-	useValue,
-} from '@tldraw/state-react'
-export { resizeScaled } from './lib/editor/shapes/shared/resizeScaled'
-export {
-	getFontsFromRichText,
-	type RichTextFontVisitor,
-	type RichTextFontVisitorState,
-	type TLTextOptions,
-	type TiptapEditor,
-	type TiptapNode,
-} from './lib/utils/richText'
-export { LocalIndexedDb, Table, type StoreName } from './lib/utils/sync/LocalIndexedDb'
+
+// eslint-disable-next-line local/no-export-star
+export * from '@tldraw/state'
+// eslint-disable-next-line local/no-export-star
+export * from '@tldraw/state-react'
 // eslint-disable-next-line local/no-export-star
 export * from '@tldraw/store'
 // eslint-disable-next-line local/no-export-star
@@ -43,6 +17,7 @@ export * from '@tldraw/tlschema'
 export * from '@tldraw/utils'
 // eslint-disable-next-line local/no-export-star
 export * from '@tldraw/validate'
+
 export {
 	ErrorScreen,
 	LoadingScreen,
@@ -212,6 +187,7 @@ export {
 export { GroupShapeUtil } from './lib/editor/shapes/group/GroupShapeUtil'
 export { getPerfectDashProps } from './lib/editor/shapes/shared/getPerfectDashProps'
 export { resizeBox, type ResizeBoxOptions } from './lib/editor/shapes/shared/resizeBox'
+export { resizeScaled } from './lib/editor/shapes/shared/resizeScaled'
 export { BaseBoxShapeTool } from './lib/editor/tools/BaseBoxShapeTool/BaseBoxShapeTool'
 export { maybeSnapToGrid } from './lib/editor/tools/BaseBoxShapeTool/children/Pointing'
 export { StateNode, type TLStateNodeConstructor } from './lib/editor/tools/StateNode'
@@ -459,12 +435,21 @@ export { hardResetEditor } from './lib/utils/hardResetEditor'
 export { isAccelKey } from './lib/utils/keyboard'
 export { normalizeWheel } from './lib/utils/normalizeWheel'
 export { refreshPage } from './lib/utils/refreshPage'
+export {
+	getFontsFromRichText,
+	type RichTextFontVisitor,
+	type RichTextFontVisitorState,
+	type TLTextOptions,
+	type TiptapEditor,
+	type TiptapNode,
+} from './lib/utils/richText'
 export {
 	applyRotationToSnapshotShapes,
 	getRotationSnapshot,
 	type TLRotationSnapshot,
 } from './lib/utils/rotation'
 export { runtime, setRuntimeOverrides } from './lib/utils/runtime'
+export { LocalIndexedDb, Table, type StoreName } from './lib/utils/sync/LocalIndexedDb'
 export { type TLStoreWithStatus } from './lib/utils/sync/StoreWithStatus'
 export { hardReset } from './lib/utils/sync/hardReset'
 export { uniq } from './lib/utils/uniq'

package/src/lib/components/Shape.tsx

@@ -6,6 +6,7 @@ import { ShapeUtil } from '../editor/shapes/ShapeUtil'
 import { useEditor } from '../hooks/useEditor'
 import { useEditorComponents } from '../hooks/useEditorComponents'
 import { Mat } from '../primitives/Mat'
+import { areShapesContentEqual } from '../utils/areShapesContentEqual'
 import { setStyleProperty } from '../utils/dom'
 import { OptionalErrorBoundary } from './ErrorBoundary'
 
@@ -190,10 +191,7 @@ export const InnerShape = memo(
 			[util, shape.id]
 		)
 	},
-	(prev, next) =>
-		prev.shape.props === next.shape.props &&
-		prev.shape.meta === next.shape.meta &&
-		prev.util === next.util
+	(prev, next) => areShapesContentEqual(prev.shape, next.shape) && prev.util === next.util
 )
 
 export const InnerShapeBackground = memo(

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

@@ -37,7 +37,7 @@ export interface TLCanvasComponentProps {
 export function DefaultCanvas({ className }: TLCanvasComponentProps) {
 	const editor = useEditor()
 
-	const { Background, SvgDefs, ShapeIndicators } = useEditorComponents()
+	const { SelectionBackground, Background, SvgDefs, ShapeIndicators } = useEditorComponents()
 
 	const rCanvas = useRef<HTMLDivElement>(null)
 	const rHtmlLayer = useRef<HTMLDivElement>(null)
@@ -155,7 +155,7 @@ export function DefaultCanvas({ className }: TLCanvasComponentProps) {
 				<GridWrapper />
 				<div ref={rHtmlLayer} className="tl-html-layer tl-shapes" draggable={false}>
 					<OnTheCanvasWrapper />
-					<SelectionBackgroundWrapper />
+					{SelectionBackground && <SelectionBackgroundWrapper />}
 					{hideShapes ? null : debugSvg ? <ShapesWithSVGs /> : <ShapesToDisplay />}
 				</div>
 				<div className="tl-overlays">
@@ -575,9 +575,13 @@ function DebugSvgCopy({ id, mode }: { id: TLShapeId; mode: 'img' | 'iframe' }) {
 
 function SelectionForegroundWrapper() {
 	const editor = useEditor()
-	const selectionRotation = useValue('selection rotation', () => editor.getSelectionRotation(), [
-		editor,
-	])
+	const selectionRotation = useValue(
+		'selection rotation',
+		function getSelectionRotation() {
+			return editor.getSelectionRotation()
+		},
+		[editor]
+	)
 	const selectionBounds = useValue(
 		'selection bounds',
 		() => editor.getSelectionRotatedPageBounds(),

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

@@ -9,13 +9,21 @@ import { useEditorComponents } from '../../hooks/useEditorComponents'
 import { OptionalErrorBoundary } from '../ErrorBoundary'
 
 // need an extra layer of indirection here to allow hooks to be used inside the indicator render
-const EvenInnererIndicator = memo(({ shape, util }: { shape: TLShape; util: ShapeUtil<any> }) => {
-	return useStateTracking('Indicator: ' + shape.type, () =>
-		// always fetch the latest shape from the store even if the props/meta have not changed, to avoid
-		// calling the render method with stale data.
-		util.indicator(util.editor.store.unsafeGetWithoutCapture(shape.id) as TLShape)
-	)
-})
+const EvenInnererIndicator = memo(
+	({ shape, util }: { shape: TLShape; util: ShapeUtil<any> }) => {
+		return useStateTracking('Indicator: ' + shape.type, () =>
+			// always fetch the latest shape from the store even if the props/meta have not changed, to avoid
+			// calling the render method with stale data.
+			util.indicator(util.editor.store.unsafeGetWithoutCapture(shape.id) as TLShape)
+		)
+	},
+	(prevProps, nextProps) => {
+		return (
+			prevProps.shape.props === nextProps.shape.props &&
+			prevProps.shape.meta === nextProps.shape.meta
+		)
+	}
+)
 
 const InnerIndicator = memo(({ editor, id }: { editor: Editor; id: TLShapeId }) => {
 	const shape = useValue('shape for indicator', () => editor.store.get(id), [editor, id])
@@ -61,13 +69,14 @@ export const DefaultShapeIndicator = memo(function DefaultShapeIndicator({
 	useQuickReactor(
 		'indicator transform',
 		() => {
+			if (hidden) return
 			const elm = rIndicator.current
 			if (!elm) return
 			const pageTransform = editor.getShapePageTransform(shapeId)
 			if (!pageTransform) return
 			elm.style.setProperty('transform', pageTransform.toCssString())
 		},
-		[editor, shapeId]
+		[editor, shapeId, hidden]
 	)
 
 	useLayoutEffect(() => {

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

@@ -52,7 +52,7 @@ beforeEach(() => {
 		shapeUtils: [CustomShape],
 		bindingUtils: [],
 		tools: [],
-		store: createTLStore({ shapeUtils: [CustomShape] }),
+		store: createTLStore({ shapeUtils: [CustomShape], bindingUtils: [] }),
 		getContainer: () => document.body,
 	})
 	editor.setCameraOptions({ isLocked: true })

package/src/lib/editor/Editor.ts

@@ -129,6 +129,7 @@ import { Group2d } from '../primitives/geometry/Group2d'
 import { intersectPolygonPolygon } from '../primitives/intersect'
 import { PI, approximately, areAnglesCompatible, clamp, pointInPolygon } from '../primitives/utils'
 import { ReadonlySharedStyleMap, SharedStyle, SharedStyleMap } from '../utils/SharedStylesMap'
+import { areShapesContentEqual } from '../utils/areShapesContentEqual'
 import { dataUrlToFile } from '../utils/assets'
 import { debugFlags } from '../utils/debug-flags'
 import {
@@ -325,7 +326,6 @@ export class Editor extends EventEmitter<TLEventMap> {
 		this.options = { ...defaultTldrawOptions, ...options }
 
 		this.store = store
-		this.disposables.add(this.store.dispose.bind(this.store))
 		this.history = new HistoryManager<TLRecord>({
 			store,
 			annotateError: (error) => {
@@ -955,6 +955,7 @@ export class Editor extends EventEmitter<TLEventMap> {
 	dispose() {
 		this.disposables.forEach((dispose) => dispose())
 		this.disposables.clear()
+		this.store.dispose()
 		this.isDisposed = true
 	}
 
@@ -2275,13 +2276,21 @@ export class Editor extends EventEmitter<TLEventMap> {
 	setEditingShape(shape: TLShapeId | TLShape | null): this {
 		const id = typeof shape === 'string' ? shape : (shape?.id ?? null)
 		this.setRichTextEditor(null)
-		if (id !== this.getEditingShapeId()) {
+		const prevEditingShapeId = this.getEditingShapeId()
+		if (id !== prevEditingShapeId) {
 			if (id) {
 				const shape = this.getShape(id)
 				if (shape && this.getShapeUtil(shape).canEdit(shape)) {
 					this.run(
 						() => {
 							this._updateCurrentPageState({ editingShapeId: id })
+							if (prevEditingShapeId) {
+								const prevEditingShape = this.getShape(prevEditingShapeId)
+								if (prevEditingShape) {
+									this.getShapeUtil(prevEditingShape).onEditEnd?.(prevEditingShape)
+								}
+							}
+							this.getShapeUtil(shape).onEditStart?.(shape)
 						},
 						{ history: 'ignore' }
 					)
@@ -2294,6 +2303,12 @@ export class Editor extends EventEmitter<TLEventMap> {
 				() => {
 					this._updateCurrentPageState({ editingShapeId: null })
 					this._currentRichTextEditor.set(null)
+					if (prevEditingShapeId) {
+						const prevEditingShape = this.getShape(prevEditingShapeId)
+						if (prevEditingShape) {
+							this.getShapeUtil(prevEditingShape).onEditEnd?.(prevEditingShape)
+						}
+					}
 				},
 				{ history: 'ignore' }
 			)
@@ -4574,7 +4589,7 @@ export class Editor extends EventEmitter<TLEventMap> {
 					this.fonts.trackFontsForShape(shape)
 					return this.getShapeUtil(shape).getGeometry(shape, opts)
 				},
-				{ areRecordsEqual: (a, b) => a.props === b.props }
+				{ areRecordsEqual: areShapesContentEqual }
 			)
 		}
 		return this._shapeGeometryCaches[context].get(
@@ -4622,9 +4637,15 @@ export class Editor extends EventEmitter<TLEventMap> {
 
 	/** @internal */
 	@computed private _getShapeHandlesCache(): ComputedCache<TLHandle[] | undefined, TLShape> {
-		return this.store.createComputedCache('handles', (shape) => {
-			return this.getShapeUtil(shape).getHandles?.(shape)
-		})
+		return this.store.createComputedCache(
+			'handles',
+			(shape) => {
+				return this.getShapeUtil(shape).getHandles?.(shape)
+			},
+			{
+				areRecordsEqual: areShapesContentEqual,
+			}
+		)
 	}
 
 	/**
@@ -5845,9 +5866,15 @@ export class Editor extends EventEmitter<TLEventMap> {
 	@computed
 	private _getBindingsIndexCache() {
 		const index = bindingsIndex(this)
-		return this.store.createComputedCache<TLBinding[], TLShape>('bindingsIndex', (shape) => {
-			return index.get().get(shape.id)
-		})
+		return this.store.createComputedCache<TLBinding[], TLShape>(
+			'bindingsIndex',
+			(shape) => {
+				return index.get().get(shape.id)
+			},
+			// we can ignore the shape equality check here because the index is
+			// computed incrementally based on what bindings are in the store
+			{ areRecordsEqual: () => true }
+		)
 	}
 
 	/**
@@ -10330,12 +10357,10 @@ export class Editor extends EventEmitter<TLEventMap> {
 						if (this.inputs.isPanning && this.inputs.isPointing) {
 							// Handle spacebar / middle mouse button panning
 							const { currentScreenPoint, previousScreenPoint } = this.inputs
-							const { panSpeed } = cameraOptions
 							const offset = Vec.Sub(currentScreenPoint, previousScreenPoint)
-							this.setCamera(
-								new Vec(cx + (offset.x * panSpeed) / cz, cy + (offset.y * panSpeed) / cz, cz),
-								{ immediate: true }
-							)
+							this.setCamera(new Vec(cx + offset.x / cz, cy + offset.y / cz, cz), {
+								immediate: true,
+							})
 							this.maybeTrackPerformance('Panning')
 							return
 						}

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

@@ -45,7 +45,6 @@ export interface HandleSnapGeometry {
 
 const defaultGetSelfSnapOutline = () => null
 const defaultGetSelfSnapPoints = () => []
-
 /** @public */
 export class HandleSnaps {
 	readonly editor: Editor

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

@@ -32,6 +32,7 @@ export interface TLMeasureTextSpanOpts {
 	fontStyle: string
 	lineHeight: number
 	textAlign: TLDefaultHorizontalAlignStyle
+	otherStyles?: Record<string, string>
 }
 
 const spaceCharacterRegex = /\s/
@@ -86,6 +87,7 @@ export class TextManager {
 			 */
 			maxWidth: null | number
 			minWidth?: null | number
+			otherStyles?: Record<string, string>
 			padding: string
 			disableOverflowWrapBreaking?: boolean
 		}
@@ -112,6 +114,11 @@ export class TextManager {
 			'overflow-wrap',
 			opts.disableOverflowWrapBreaking ? 'normal' : 'break-word'
 		)
+		if (opts.otherStyles) {
+			for (const [key, value] of Object.entries(opts.otherStyles)) {
+				wrapperElm.style.setProperty(key, value)
+			}
+		}
 
 		const scrollWidth = wrapperElm.scrollWidth
 		const rect = wrapperElm.getBoundingClientRect()
@@ -256,6 +263,11 @@ export class TextManager {
 		elm.style.setProperty('line-height', `${opts.lineHeight * opts.fontSize}px`)
 		elm.style.setProperty('text-align', textAlignmentsForLtr[opts.textAlign])
 		elm.style.setProperty('font-style', opts.fontStyle)
+		if (opts.otherStyles) {
+			for (const [key, value] of Object.entries(opts.otherStyles)) {
+				elm.style.setProperty(key, value)
+			}
+		}
 
 		const shouldTruncateToFirstLine =
 			opts.overflow === 'truncate-ellipsis' || opts.overflow === 'truncate-clip'

package/src/lib/editor/shapes/ShapeUtil.ts

@@ -707,7 +707,15 @@ export abstract class ShapeUtil<Shape extends TLUnknownShape = TLUnknownShape> {
 	onClick?(shape: Shape): TLShapePartial<Shape> | void
 
 	/**
-	 * A callback called when a shape finishes being editing.
+	 * A callback called when a shape starts being edited.
+	 *
+	 * @param shape - The shape.
+	 * @public
+	 */
+	onEditStart?(shape: Shape): void
+
+	/**
+	 * A callback called when a shape finishes being edited.
 	 *
 	 * @param shape - The shape.
 	 * @public

package/src/lib/editor/shapes/shared/getPerfectDashProps.ts

@@ -4,15 +4,15 @@ import { TLDefaultDashStyle } from '@tldraw/tlschema'
 export function getPerfectDashProps(
 	totalLength: number,
 	strokeWidth: number,
-	opts = {} as Partial<{
-		style: TLDefaultDashStyle
-		snap: number
-		end: 'skip' | 'outset' | 'none'
-		start: 'skip' | 'outset' | 'none'
-		lengthRatio: number
-		closed: boolean
-		forceSolid: boolean
-	}>
+	opts: {
+		style?: TLDefaultDashStyle
+		snap?: number
+		end?: 'skip' | 'outset' | 'none'
+		start?: 'skip' | 'outset' | 'none'
+		lengthRatio?: number
+		closed?: boolean
+		forceSolid?: boolean
+	} = {}
 ): {
 	strokeDasharray: string
 	strokeDashoffset: string

package/src/lib/exports/getSvgJsx.tsx

@@ -365,6 +365,21 @@ function SvgExport({
 		onMount()
 	}, [onMount, shapeElements])
 
+	let backgroundColor = background ? theme.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
+			const color = theme[shape.props.color]
+			backgroundColor = color.frame.fill
+		} else {
+			backgroundColor = theme.solid
+		}
+	}
+
 	return (
 		<SvgExportContextProvider editor={editor} context={exportContext}>
 			<svg
@@ -375,13 +390,7 @@ function SvgExport({
 				viewBox={`${bbox.minX} ${bbox.minY} ${bbox.width} ${bbox.height}`}
 				strokeLinecap="round"
 				strokeLinejoin="round"
-				style={{
-					backgroundColor: background
-						? singleFrameShapeId
-							? theme.solid
-							: theme.background
-						: 'transparent',
-				}}
+				style={{ backgroundColor }}
 				data-color-mode={isDarkMode ? 'dark' : 'light'}
 				className={`tl-container tl-theme__force-sRGB ${isDarkMode ? 'tl-theme__dark' : 'tl-theme__light'}`}
 			>

package/src/lib/hooks/useEditorComponents.tsx

@@ -19,10 +19,7 @@ import { DefaultHandle, TLHandleProps } from '../components/default-components/D
 import { DefaultHandles, TLHandlesProps } from '../components/default-components/DefaultHandles'
 import { DefaultLoadingScreen } from '../components/default-components/DefaultLoadingScreen'
 import { DefaultScribble, TLScribbleProps } from '../components/default-components/DefaultScribble'
-import {
-	DefaultSelectionBackground,
-	TLSelectionBackgroundProps,
-} from '../components/default-components/DefaultSelectionBackground'
+import { TLSelectionBackgroundProps } from '../components/default-components/DefaultSelectionBackground'
 import {
 	DefaultSelectionForeground,
 	TLSelectionForegroundProps,
@@ -113,7 +110,7 @@ export function EditorComponentsProvider({
 			OnTheCanvas: null,
 			Overlays: null,
 			Scribble: DefaultScribble,
-			SelectionBackground: DefaultSelectionBackground,
+			SelectionBackground: null,
 			SelectionForeground: DefaultSelectionForeground,
 			ShapeIndicator: DefaultShapeIndicator,
 			ShapeIndicators: DefaultShapeIndicators,

package/src/lib/primitives/Box.ts

@@ -57,6 +57,11 @@ export class Box {
 		this.x = n
 	}
 
+	// eslint-disable-next-line no-restricted-syntax
+	get left() {
+		return this.x
+	}
+
 	// eslint-disable-next-line no-restricted-syntax
 	get midX() {
 		return this.x + this.w / 2
@@ -67,6 +72,11 @@ export class Box {
 		return this.x + this.w
 	}
 
+	// eslint-disable-next-line no-restricted-syntax
+	get right() {
+		return this.x + this.w
+	}
+
 	// eslint-disable-next-line no-restricted-syntax
 	get minY() {
 		return this.y
@@ -77,6 +87,11 @@ export class Box {
 		this.y = n
 	}
 
+	// eslint-disable-next-line no-restricted-syntax
+	get top() {
+		return this.y
+	}
+
 	// eslint-disable-next-line no-restricted-syntax
 	get midY() {
 		return this.y + this.h / 2
@@ -87,6 +102,11 @@ export class Box {
 		return this.y + this.h
 	}
 
+	// eslint-disable-next-line no-restricted-syntax
+	get bottom() {
+		return this.y + this.h
+	}
+
 	// eslint-disable-next-line no-restricted-syntax
 	get width() {
 		return this.w

package/src/lib/primitives/Mat.ts

@@ -157,12 +157,13 @@ export class Mat {
 		return Mat.Compose(Mat.Translate(cx, cy!), rotationMatrix, Mat.Translate(-cx, -cy!))
 	}
 
-	static Scale(x: number, y: number): MatModel
-	static Scale(x: number, y: number, cx: number, cy: number): MatModel
-	static Scale(x: number, y: number, cx?: number, cy?: number): MatModel {
+	static Scale(x: number, y: number): Mat
+	static Scale(x: number, y: number, cx: number, cy: number): Mat
+	static Scale(x: number, y: number, cx?: number, cy?: number): Mat {
 		const scaleMatrix = new Mat(x, 0, 0, y, 0, 0)
 		if (cx === undefined) return scaleMatrix
-		return Mat.Compose(Mat.Translate(cx, cy!), scaleMatrix, Mat.Translate(-cx, -cy!))
+
+		return Mat.Translate(cx, cy!).multiply(scaleMatrix).translate(-cx, -cy!)
 	}
 	static Multiply(m1: MatModel, m2: MatModel): MatModel {
 		return {