@tldraw/editor 5.2.0-next.e2b8d10bf10e → 5.2.0

package/src/lib/test/ContentElementSlot.test.tsx

@@ -0,0 +1,201 @@
+import { act, render } from '@testing-library/react'
+import { BaseBoxShapeUtil, createShapeId, Editor, RecordProps, T, TLShape } from '../..'
+import { TldrawEditor } from '../TldrawEditor'
+
+const PERSISTENT_SHAPE_TYPE = 'test-persistent'
+
+declare module '@tldraw/tlschema' {
+	export interface TLGlobalShapePropsMap {
+		[PERSISTENT_SHAPE_TYPE]: { w: number; h: number }
+	}
+}
+
+type IPersistentShape = TLShape<typeof PERSISTENT_SHAPE_TYPE>
+
+// App-owned element registry and parking lot, the way an app using
+// getContentElement would keep elements alive across editor sessions.
+const elements = new Map<string, HTMLElement>()
+let parkingLot: HTMLDivElement
+const releaseCalls: Array<{ shapeId: string; element: HTMLElement; slotWasConnected: boolean }> = []
+
+class PersistentShapeUtil extends BaseBoxShapeUtil<IPersistentShape> {
+	static override type = PERSISTENT_SHAPE_TYPE
+	static override props: RecordProps<IPersistentShape> = {
+		w: T.number,
+		h: T.number,
+	}
+	getDefaultProps(): IPersistentShape['props'] {
+		return { w: 100, h: 100 }
+	}
+	getIndicatorPath() {
+		return undefined
+	}
+	component() {
+		return null
+	}
+	override getAppOwnedElement(shape: IPersistentShape) {
+		let element = elements.get(shape.id)
+		if (!element) {
+			element = document.createElement('div')
+			element.dataset.testElementFor = shape.id
+			elements.set(shape.id, element)
+		}
+		return element
+	}
+	override onReleaseAppOwnedElement(shape: IPersistentShape, element: HTMLElement) {
+		releaseCalls.push({
+			shapeId: shape.id,
+			element,
+			slotWasConnected: element.parentElement?.isConnected ?? false,
+		})
+		parkingLot.appendChild(element)
+	}
+}
+
+function getSlotFor(shapeId: string) {
+	return document.querySelector(`[data-shape-id="${shapeId}"] .tl-content-slot`)
+}
+
+describe('content element slot', () => {
+	beforeEach(() => {
+		elements.clear()
+		releaseCalls.length = 0
+		parkingLot = document.createElement('div')
+		document.body.appendChild(parkingLot)
+	})
+
+	afterEach(() => {
+		parkingLot.remove()
+	})
+
+	async function renderEditor() {
+		let editor!: Editor
+		const result = await act(async () =>
+			render(
+				<TldrawEditor
+					shapeUtils={[PersistentShapeUtil]}
+					onMount={(e) => {
+						editor = e
+					}}
+				/>
+			)
+		)
+		return { ...result, editor }
+	}
+
+	it('adopts the app-owned element into the shape and releases it before editor unmount', async () => {
+		const { editor, unmount } = await renderEditor()
+		const id = createShapeId()
+
+		await act(async () => {
+			editor.createShape<IPersistentShape>({ id, type: PERSISTENT_SHAPE_TYPE, x: 0, y: 0 })
+		})
+
+		const element = elements.get(id)!
+		expect(element).toBeDefined()
+		expect(element.parentElement).toBe(getSlotFor(id))
+		expect(element.isConnected).toBe(true)
+
+		await act(async () => {
+			unmount()
+		})
+
+		// The release callback fired exactly once, while the slot was still
+		// connected to the document, so a state-preserving move was possible.
+		expect(releaseCalls).toHaveLength(1)
+		expect(releaseCalls[0]).toMatchObject({ shapeId: id, element, slotWasConnected: true })
+		// The app reclaimed the element into its parking lot and it survived teardown.
+		expect(element.parentElement).toBe(parkingLot)
+		expect(element.isConnected).toBe(true)
+	})
+
+	it('releases the element when the shape is deleted', async () => {
+		const { editor, unmount } = await renderEditor()
+		const id = createShapeId()
+
+		await act(async () => {
+			editor.createShape<IPersistentShape>({ id, type: PERSISTENT_SHAPE_TYPE, x: 0, y: 0 })
+		})
+
+		const element = elements.get(id)!
+		expect(element.parentElement).toBe(getSlotFor(id))
+
+		await act(async () => {
+			editor.deleteShape(id)
+		})
+
+		expect(releaseCalls).toHaveLength(1)
+		expect(releaseCalls[0]).toMatchObject({ shapeId: id, element, slotWasConnected: true })
+		expect(element.parentElement).toBe(parkingLot)
+
+		await act(async () => {
+			unmount()
+		})
+
+		// The slot is gone; no second release for the deleted shape.
+		expect(releaseCalls).toHaveLength(1)
+	})
+
+	it('re-adopts a parked element when the editor remounts, without recreating it', async () => {
+		const first = await renderEditor()
+		const id = createShapeId()
+
+		await act(async () => {
+			first.editor.createShape<IPersistentShape>({ id, type: PERSISTENT_SHAPE_TYPE, x: 0, y: 0 })
+		})
+
+		const element = elements.get(id)!
+
+		await act(async () => {
+			first.unmount()
+		})
+		expect(element.parentElement).toBe(parkingLot)
+
+		const second = await renderEditor()
+		await act(async () => {
+			second.editor.createShape<IPersistentShape>({ id, type: PERSISTENT_SHAPE_TYPE, x: 0, y: 0 })
+		})
+
+		// The same element instance was adopted into the new editor's slot.
+		expect(elements.get(id)).toBe(element)
+		expect(element.parentElement).toBe(getSlotFor(id))
+
+		await act(async () => {
+			second.unmount()
+		})
+		expect(element.parentElement).toBe(parkingLot)
+	})
+
+	it('keeps the element in the same DOM position when z-order changes', async () => {
+		const { editor, unmount } = await renderEditor()
+		const id = createShapeId()
+		const otherId = createShapeId()
+
+		await act(async () => {
+			editor.createShape<IPersistentShape>({ id, type: PERSISTENT_SHAPE_TYPE, x: 0, y: 0 })
+			editor.createShape<IPersistentShape>({
+				id: otherId,
+				type: PERSISTENT_SHAPE_TYPE,
+				x: 50,
+				y: 50,
+			})
+		})
+
+		const element = elements.get(id)!
+		const slot = getSlotFor(id)
+		expect(element.parentElement).toBe(slot)
+
+		await act(async () => {
+			editor.sendToBack([id])
+			editor.bringToFront([id])
+		})
+
+		// No release fired and the element is still in the same slot node.
+		expect(releaseCalls).toHaveLength(0)
+		expect(element.parentElement).toBe(slot)
+
+		await act(async () => {
+			unmount()
+		})
+	})
+})

package/src/lib/utils/dom.ts

@@ -100,6 +100,40 @@ export function setStyleProperty(
 	elm.style.setProperty(property, String(value))
 }
 
+/**
+ * Move an element into a new parent, preserving its state where the platform allows it.
+ *
+ * Uses `Node.moveBefore` (Chromium 133+, Firefox 144+) when both the element and parent are
+ * connected to the same document — this moves the element without resetting its state, so
+ * iframes don't reload and media keeps playing. Otherwise (older browsers, disconnected nodes,
+ * or a cross-document move) it falls back to `appendChild`, which moves the element but resets
+ * its state like an iframe reload.
+ *
+ * This is the primitive tldraw uses to adopt `ShapeUtil.getAppOwnedElement` elements, exposed so
+ * apps can perform symmetric state-preserving moves from `ShapeUtil.onReleaseAppOwnedElement` —
+ * for example moving an element to an off-canvas parking lot between editor sessions.
+ *
+ * @param parent - The element to move `element` into, as its last child.
+ * @param element - The element to move.
+ * @public
+ */
+export function moveElementInto(parent: HTMLElement, element: HTMLElement) {
+	if (
+		element.isConnected &&
+		parent.isConnected &&
+		typeof (parent as any).moveBefore === 'function' &&
+		element.ownerDocument === parent.ownerDocument
+	) {
+		try {
+			;(parent as any).moveBefore(element, null)
+			return
+		} catch {
+			// fall through to appendChild
+		}
+	}
+	parent.appendChild(element)
+}
+
 /** @internal */
 export function elementShouldCaptureKeys(el: Element | null, includeButtonsAndMenus = true) {
 	if (!el) return false

package/src/lib/utils/getPointerInfo.ts

@@ -1,6 +1,7 @@
 import type React from 'react'
 import { Editor } from '../editor/Editor'
 import { isAccelKey } from './keyboard'
+import { getPointerEventButton } from './pointer'
 
 /** @public */
 export function getPointerInfo(editor: Editor, e: React.PointerEvent | PointerEvent) {
@@ -18,7 +19,7 @@ export function getPointerInfo(editor: Editor, e: React.PointerEvent | PointerEv
 		metaKey: e.metaKey,
 		accelKey: isAccelKey(e),
 		pointerId: e.pointerId,
-		button: e.button,
+		button: getPointerEventButton(e),
 		isPen: e.pointerType === 'pen',
 	}
 }

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

@@ -0,0 +1,76 @@
+import { tlenv } from '../globals/environment'
+import { TestEditor } from '../test/TestEditor'
+import { getPointerInfo } from './getPointerInfo'
+import { isDirectDisplayPen, isSecondaryClickEvent } from './pointer'
+
+const originalIsDarwin = tlenv.isDarwin
+
+afterEach(() => {
+	tlenv.isDarwin = originalIsDarwin
+})
+
+describe('isSecondaryClickEvent', () => {
+	it('treats ctrl + left-click as a secondary click on macOS', () => {
+		tlenv.isDarwin = true
+		expect(isSecondaryClickEvent({ button: 0, ctrlKey: true, metaKey: false })).toBe(true)
+	})
+
+	it('does not treat ctrl + left-click as a secondary click off macOS', () => {
+		tlenv.isDarwin = false
+		expect(isSecondaryClickEvent({ button: 0, ctrlKey: true, metaKey: false })).toBe(false)
+	})
+})
+
+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
+	let editor: TestEditor
+
+	beforeEach(() => {
+		editor = new TestEditor()
+	})
+
+	afterEach(() => {
+		editor.dispose()
+	})
+
+	it('reports button 2 in the dispatched pointer info on macOS', () => {
+		tlenv.isDarwin = true
+		const event = new PointerEvent('pointerdown', { button: 0, ctrlKey: true })
+		expect(getPointerInfo(editor, event).button).toBe(2)
+	})
+
+	it('stays button 0 for the same gesture off macOS', () => {
+		tlenv.isDarwin = false
+		const event = new PointerEvent('pointerdown', { button: 0, ctrlKey: true })
+		expect(getPointerInfo(editor, event).button).toBe(0)
+	})
+})

package/src/lib/utils/pointer.ts

@@ -0,0 +1,42 @@
+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
+	ctrlKey: boolean
+	metaKey: boolean
+}
+
+/** @internal */
+export function isSecondaryClickEvent(e: PointerLike) {
+	return e.button === 2 || (tlenv.isDarwin && e.button === 0 && e.ctrlKey && !e.metaKey)
+}
+
+/** @internal */
+export function getPointerEventButton(e: PointerLike) {
+	return isSecondaryClickEvent(e) ? 2 : e.button
+}

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-next.e2b8d10bf10e'
+export const version = '5.2.0'
 export const publishDates = {
 	major: '2026-05-06T16:28:18.473Z',
-	minor: '2026-06-05T16:06:49.927Z',
-	patch: '2026-06-05T16:06:49.927Z',
+	minor: '2026-07-01T09:20:01.735Z',
+	patch: '2026-07-01T09:20:01.735Z',
 }

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/editor/overlays/ShapeIndicatorOverlayUtil.js

@@ -1,161 +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 ShapeIndicatorOverlayUtil_exports = {};
-__export(ShapeIndicatorOverlayUtil_exports, {
-  ShapeIndicatorOverlayUtil: () => ShapeIndicatorOverlayUtil,
-  strokeShapeIndicators: () => strokeShapeIndicators
-});
-module.exports = __toCommonJS(ShapeIndicatorOverlayUtil_exports);
-var import_state = require("@tldraw/state");
-var import_store = require("@tldraw/store");
-var import_OverlayUtil = require("./OverlayUtil");
-const indicatorPathCache = (0, import_store.createComputedCache)(
-  "shapeIndicatorPath",
-  (editor, shape) => {
-    const util = editor.getShapeUtil(shape);
-    return util.getIndicatorPath(shape);
-  },
-  {
-    areRecordsEqual(a, b) {
-      return a.props === b.props;
-    }
-  }
-);
-function strokeShapeIndicators(editor, ctx, shapeIds) {
-  if (shapeIds.length === 0) return;
-  const batched = new Path2D();
-  for (const shapeId of shapeIds) {
-    const shape = editor.getShape(shapeId);
-    if (!shape || shape.isLocked) continue;
-    const pageTransform = editor.getShapePageTransform(shape);
-    if (!pageTransform) continue;
-    const indicatorPath = indicatorPathCache.get(editor, shape.id);
-    if (!indicatorPath) continue;
-    if (indicatorPath instanceof Path2D) {
-      batched.addPath(indicatorPath, pageTransform);
-      continue;
-    }
-    const { path, clipPath, additionalPaths } = indicatorPath;
-    if (!clipPath) {
-      batched.addPath(path, pageTransform);
-      if (additionalPaths) {
-        for (const p of additionalPaths) batched.addPath(p, pageTransform);
-      }
-      continue;
-    }
-    ctx.save();
-    ctx.transform(
-      pageTransform.a,
-      pageTransform.b,
-      pageTransform.c,
-      pageTransform.d,
-      pageTransform.e,
-      pageTransform.f
-    );
-    ctx.save();
-    ctx.clip(clipPath, "evenodd");
-    ctx.stroke(path);
-    ctx.restore();
-    if (additionalPaths) {
-      for (const p of additionalPaths) ctx.stroke(p);
-    }
-    ctx.restore();
-  }
-  ctx.stroke(batched);
-}
-class ShapeIndicatorOverlayUtil extends import_OverlayUtil.OverlayUtil {
-  static type = "shape_indicator";
-  options = { zIndex: 50, lineWidth: 1.5, hintedLineWidth: 2.5 };
-  // Narrow projection of instance state. Reading the full record would
-  // re-fire getOverlays on every cursor move / brush update; gating on these
-  // three booleans means we only re-fire when one of them actually flips.
-  _instanceFlags$ = (0, import_state.computed)(
-    "shape indicator instance flags",
-    () => {
-      const i = this.editor.getInstanceState();
-      return {
-        isChangingStyle: i.isChangingStyle,
-        isHoveringCanvas: i.isHoveringCanvas,
-        isCoarsePointer: i.isCoarsePointer
-      };
-    },
-    {
-      isEqual: (a, b) => a.isChangingStyle === b.isChangingStyle && a.isHoveringCanvas === b.isHoveringCanvas && a.isCoarsePointer === b.isCoarsePointer
-    }
-  );
-  isActive() {
-    return true;
-  }
-  getOverlays() {
-    const editor = this.editor;
-    const renderingShapeIds = new Set(editor.getRenderingShapes().map((s) => s.id));
-    const idsToDisplay = [];
-    const { isChangingStyle, isHoveringCanvas, isCoarsePointer } = this._instanceFlags$.get();
-    const isIdleOrEditing = editor.isInAny("select.idle", "select.editing_shape");
-    const isInSelectState = editor.isInAny(
-      "select.brushing",
-      "select.scribble_brushing",
-      "select.pointing_shape",
-      "select.pointing_selection",
-      "select.pointing_handle"
-    );
-    if (!isChangingStyle && (isIdleOrEditing || isInSelectState)) {
-      for (const id of editor.getSelectedShapeIds()) {
-        if (renderingShapeIds.has(id)) idsToDisplay.push(id);
-      }
-      if (isIdleOrEditing && isHoveringCanvas && !isCoarsePointer) {
-        const hovered = editor.getHoveredShapeId();
-        if (hovered && renderingShapeIds.has(hovered) && !idsToDisplay.includes(hovered)) {
-          idsToDisplay.push(hovered);
-        }
-      }
-    }
-    const hintingShapeIds = [];
-    for (const id of editor.getHintingShapeIds()) {
-      if (renderingShapeIds.has(id)) hintingShapeIds.push(id);
-    }
-    if (idsToDisplay.length === 0 && hintingShapeIds.length === 0) {
-      return [];
-    }
-    return [
-      {
-        id: "shape_indicator",
-        type: "shape_indicator",
-        props: { idsToDisplay, hintingShapeIds }
-      }
-    ];
-  }
-  render(ctx, overlays) {
-    const overlay = overlays[0];
-    if (!overlay) return;
-    const editor = this.editor;
-    const zoom = editor.getZoomLevel();
-    const { idsToDisplay, hintingShapeIds } = overlay.props;
-    ctx.lineCap = "round";
-    ctx.lineJoin = "round";
-    ctx.strokeStyle = editor.getCurrentTheme().colors[editor.getColorMode()].selectionStroke;
-    ctx.lineWidth = this.options.lineWidth / zoom;
-    strokeShapeIndicators(editor, ctx, idsToDisplay);
-    if (hintingShapeIds.length > 0) {
-      ctx.lineWidth = this.options.hintedLineWidth / zoom;
-      strokeShapeIndicators(editor, ctx, hintingShapeIds);
-    }
-  }
-}
-//# sourceMappingURL=ShapeIndicatorOverlayUtil.js.map

package/dist-cjs/lib/editor/overlays/ShapeIndicatorOverlayUtil.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../../src/lib/editor/overlays/ShapeIndicatorOverlayUtil.ts"],
-  "sourcesContent": ["import { computed } from '@tldraw/state'\nimport { createComputedCache } from '@tldraw/store'\nimport { TLShape, TLShapeId } from '@tldraw/tlschema'\nimport type { Editor } from '../Editor'\nimport { OverlayUtil, TLOverlay } from './OverlayUtil'\n\ninterface RelevantInstanceFlags {\n\tisChangingStyle: boolean\n\tisHoveringCanvas: boolean | null\n\tisCoarsePointer: boolean\n}\n\n/** @public */\nexport interface TLShapeIndicatorOverlay extends TLOverlay {\n\tprops: {\n\t\tidsToDisplay: TLShapeId[]\n\t\thintingShapeIds: TLShapeId[]\n\t}\n}\n\nconst indicatorPathCache = createComputedCache(\n\t'shapeIndicatorPath',\n\t(editor: Editor, shape: TLShape) => {\n\t\tconst util = editor.getShapeUtil(shape)\n\t\treturn util.getIndicatorPath(shape)\n\t},\n\t{\n\t\tareRecordsEqual(a, b) {\n\t\t\treturn a.props === b.props\n\t\t},\n\t}\n)\n\n/**\n * Combine every batchable shape indicator into a single page-space `Path2D` and\n * emit one stroke call. Shapes whose indicator needs an evenodd clip (e.g.\n * arrows with labels or complex arrowheads) can't be batched \u2014 they still\n * stroke individually inside a save/restore with `ctx.clip` applied.\n *\n * Shared by {@link ShapeIndicatorOverlayUtil} and any overlay util that paints\n * shape indicators (e.g. collaborator selections).\n *\n * @public\n */\nexport function strokeShapeIndicators(\n\teditor: Editor,\n\tctx: CanvasRenderingContext2D,\n\tshapeIds: TLShapeId[]\n): void {\n\tif (shapeIds.length === 0) return\n\n\tconst batched = new Path2D()\n\n\tfor (const shapeId of shapeIds) {\n\t\tconst shape = editor.getShape(shapeId)\n\t\tif (!shape || shape.isLocked) continue\n\n\t\tconst pageTransform = editor.getShapePageTransform(shape)\n\t\tif (!pageTransform) continue\n\n\t\tconst indicatorPath = indicatorPathCache.get(editor, shape.id)\n\t\tif (!indicatorPath) continue\n\n\t\tif (indicatorPath instanceof Path2D) {\n\t\t\tbatched.addPath(indicatorPath, pageTransform)\n\t\t\tcontinue\n\t\t}\n\n\t\tconst { path, clipPath, additionalPaths } = indicatorPath\n\n\t\tif (!clipPath) {\n\t\t\tbatched.addPath(path, pageTransform)\n\t\t\tif (additionalPaths) {\n\t\t\t\tfor (const p of additionalPaths) batched.addPath(p, pageTransform)\n\t\t\t}\n\t\t\tcontinue\n\t\t}\n\n\t\t// Clipped case: fall back to an individual stroke. Rare (arrows with\n\t\t// labels / complex arrowheads), so the extra save/restore/stroke\n\t\t// pair per such shape isn't worth batching away.\n\t\tctx.save()\n\t\tctx.transform(\n\t\t\tpageTransform.a,\n\t\t\tpageTransform.b,\n\t\t\tpageTransform.c,\n\t\t\tpageTransform.d,\n\t\t\tpageTransform.e,\n\t\t\tpageTransform.f\n\t\t)\n\t\tctx.save()\n\t\tctx.clip(clipPath, 'evenodd')\n\t\tctx.stroke(path)\n\t\tctx.restore()\n\t\tif (additionalPaths) {\n\t\t\tfor (const p of additionalPaths) ctx.stroke(p)\n\t\t}\n\t\tctx.restore()\n\t}\n\n\tctx.stroke(batched)\n}\n\n/**\n * Overlay util for shape indicators \u2014 the selection / hover / hint outlines drawn\n * under the selection foreground. Paints local indicators in the theme's\n * selection color.\n *\n * Remote collaborator selection indicators are drawn by a separate overlay util\n * (e.g. `CollaboratorShapeIndicatorOverlayUtil` from `tldraw`) that runs at a\n * lower z-index so peer selections appear under the local indicators.\n *\n * Non-interactive: contributes no hit-test geometry.\n *\n * @public\n */\nexport class ShapeIndicatorOverlayUtil extends OverlayUtil<TLShapeIndicatorOverlay> {\n\tstatic override type = 'shape_indicator'\n\toverride options = { zIndex: 50, lineWidth: 1.5, hintedLineWidth: 2.5 }\n\n\t// Narrow projection of instance state. Reading the full record would\n\t// re-fire getOverlays on every cursor move / brush update; gating on these\n\t// three booleans means we only re-fire when one of them actually flips.\n\tprivate _instanceFlags$ = computed<RelevantInstanceFlags>(\n\t\t'shape indicator instance flags',\n\t\t() => {\n\t\t\tconst i = this.editor.getInstanceState()\n\t\t\treturn {\n\t\t\t\tisChangingStyle: i.isChangingStyle,\n\t\t\t\tisHoveringCanvas: i.isHoveringCanvas,\n\t\t\t\tisCoarsePointer: i.isCoarsePointer,\n\t\t\t}\n\t\t},\n\t\t{\n\t\t\tisEqual: (a, b) =>\n\t\t\t\ta.isChangingStyle === b.isChangingStyle &&\n\t\t\t\ta.isHoveringCanvas === b.isHoveringCanvas &&\n\t\t\t\ta.isCoarsePointer === b.isCoarsePointer,\n\t\t}\n\t)\n\n\toverride isActive(): boolean {\n\t\treturn true\n\t}\n\n\toverride getOverlays(): TLShapeIndicatorOverlay[] {\n\t\tconst editor = this.editor\n\t\tconst renderingShapeIds = new Set(editor.getRenderingShapes().map((s) => s.id))\n\n\t\t// Local selected / hovered indicators.\n\t\tconst idsToDisplay: TLShapeId[] = []\n\t\tconst { isChangingStyle, isHoveringCanvas, isCoarsePointer } = this._instanceFlags$.get()\n\t\tconst isIdleOrEditing = editor.isInAny('select.idle', 'select.editing_shape')\n\t\tconst isInSelectState = editor.isInAny(\n\t\t\t'select.brushing',\n\t\t\t'select.scribble_brushing',\n\t\t\t'select.pointing_shape',\n\t\t\t'select.pointing_selection',\n\t\t\t'select.pointing_handle'\n\t\t)\n\n\t\tif (!isChangingStyle && (isIdleOrEditing || isInSelectState)) {\n\t\t\tfor (const id of editor.getSelectedShapeIds()) {\n\t\t\t\tif (renderingShapeIds.has(id)) idsToDisplay.push(id)\n\t\t\t}\n\t\t\tif (isIdleOrEditing && isHoveringCanvas && !isCoarsePointer) {\n\t\t\t\tconst hovered = editor.getHoveredShapeId()\n\t\t\t\tif (hovered && renderingShapeIds.has(hovered) && !idsToDisplay.includes(hovered)) {\n\t\t\t\t\tidsToDisplay.push(hovered)\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\t// Hinted shapes (drawn thicker). Already deduped at write time in\n\t\t// `updateHintingShapeIds`, so no need to dedupe again here.\n\t\tconst hintingShapeIds: TLShapeId[] = []\n\t\tfor (const id of editor.getHintingShapeIds()) {\n\t\t\tif (renderingShapeIds.has(id)) hintingShapeIds.push(id)\n\t\t}\n\n\t\tif (idsToDisplay.length === 0 && hintingShapeIds.length === 0) {\n\t\t\treturn []\n\t\t}\n\n\t\treturn [\n\t\t\t{\n\t\t\t\tid: 'shape_indicator',\n\t\t\t\ttype: 'shape_indicator',\n\t\t\t\tprops: { idsToDisplay, hintingShapeIds },\n\t\t\t},\n\t\t]\n\t}\n\n\toverride render(ctx: CanvasRenderingContext2D, overlays: TLShapeIndicatorOverlay[]): void {\n\t\tconst overlay = overlays[0]\n\t\tif (!overlay) return\n\n\t\tconst editor = this.editor\n\t\tconst zoom = editor.getZoomLevel()\n\t\tconst { idsToDisplay, hintingShapeIds } = overlay.props\n\n\t\tctx.lineCap = 'round'\n\t\tctx.lineJoin = 'round'\n\n\t\t// Local selected / hovered indicators \u2014 one stroke call for the whole batch.\n\t\tctx.strokeStyle = editor.getCurrentTheme().colors[editor.getColorMode()].selectionStroke\n\t\tctx.lineWidth = this.options.lineWidth / zoom\n\t\tstrokeShapeIndicators(editor, ctx, idsToDisplay)\n\n\t\t// Hinted shapes \u2014 thicker stroke, one call for the whole batch.\n\t\tif (hintingShapeIds.length > 0) {\n\t\t\tctx.lineWidth = this.options.hintedLineWidth / zoom\n\t\t\tstrokeShapeIndicators(editor, ctx, hintingShapeIds)\n\t\t}\n\t}\n}\n"],
-  "mappings": "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",
-  "names": []
-}

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