@tldraw/editor 4.6.0-next.30b99cd52fc8 → 4.6.0-next.35cf541abcf9

package/src/lib/globals/environment.ts

@@ -46,8 +46,26 @@ const tlenvReactive = atom('tlenvReactive', {
 	// on touch-screen laptops, which will become "coarse" if the user touches the screen.
 	// See https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/@media/pointer#coarse
 	isCoarsePointer: false,
+	// Whether the user's display supports P3 color space. This is dynamic because a window can
+	// move between displays with different color gamut support.
+	supportsP3ColorSpace: false,
 })
 
+if (typeof window !== 'undefined') {
+	const canRenderP3 = typeof CSS !== 'undefined' && CSS.supports('color', 'color(display-p3 1 1 1)')
+	if (canRenderP3) {
+		const p3mql = window.matchMedia('(color-gamut: p3)')
+		const updateSupportsP3 = () => {
+			const supportsP3 = p3mql.matches
+			if (supportsP3 !== tlenvReactive.__unsafe__getWithoutCapture().supportsP3ColorSpace) {
+				tlenvReactive.update((prev) => ({ ...prev, supportsP3ColorSpace: supportsP3 }))
+			}
+		}
+		updateSupportsP3()
+		p3mql.addEventListener('change', updateSupportsP3)
+	}
+}
+
 if (typeof window !== 'undefined' && !isForcedFinePointer) {
 	const mql = getGlobalWindow().matchMedia && getGlobalWindow().matchMedia('(any-pointer: coarse)')
 

package/src/lib/hooks/useCanvasEvents.ts

@@ -1,6 +1,5 @@
 import { useValue } from '@tldraw/state-react'
 import React, { useEffect, useMemo } from 'react'
-import { RIGHT_MOUSE_BUTTON } from '../constants'
 import { tlenv } from '../globals/environment'
 import {
 	elementShouldCaptureKeys,
@@ -21,7 +20,9 @@ export function useCanvasEvents() {
 			function onPointerDown(e: React.PointerEvent) {
 				if (editor.wasEventAlreadyHandled(e)) return
 
-				if (e.button === RIGHT_MOUSE_BUTTON) {
+				// With right-click panning disabled, fire right_click on press and let the
+				// native contextmenu through so the menu opens at the pointer-down location.
+				if (e.button === 2 && !editor.options.rightClickPanning) {
 					editor.dispatch({
 						type: 'pointer',
 						target: 'canvas',
@@ -31,7 +32,7 @@ export function useCanvasEvents() {
 					return
 				}
 
-				if (e.button !== 0 && e.button !== 1 && e.button !== 5) return
+				if (e.button !== 0 && e.button !== 1 && e.button !== 2 && e.button !== 5) return
 
 				setPointerCapture(e.currentTarget, e)
 
@@ -47,6 +48,11 @@ export function useCanvasEvents() {
 				if (editor.wasEventAlreadyHandled(e)) return
 				if (e.button !== 0 && e.button !== 1 && e.button !== 2 && e.button !== 5) return
 
+				const rightClickPanning = editor.options.rightClickPanning
+				// Check before dispatch (which resets isPanning)
+				const wasRightClickPanning =
+					rightClickPanning && e.button === 2 && editor.inputs.getIsPanning()
+
 				releasePointerCapture(e.currentTarget, e)
 
 				editor.dispatch({
@@ -55,6 +61,21 @@ export function useCanvasEvents() {
 					name: 'pointer_up',
 					...getPointerInfo(editor, e),
 				})
+
+				// Static right-click: fire contextmenu at the pointer-up location
+				if (rightClickPanning && e.button === 2 && !wasRightClickPanning) {
+					const contextMenuEvent = new PointerEvent('contextmenu', {
+						bubbles: true,
+						clientX: e.clientX,
+						clientY: e.clientY,
+						button: 2,
+						buttons: 0,
+						pointerId: e.pointerId,
+						pointerType: e.pointerType,
+						isPrimary: e.isPrimary,
+					})
+					e.currentTarget.dispatchEvent(contextMenuEvent)
+				}
 			}
 
 			function onPointerEnter(e: React.PointerEvent) {
@@ -143,6 +164,21 @@ export function useCanvasEvents() {
 				e.stopPropagation()
 			}
 
+			function onContextMenu(e: React.MouseEvent) {
+				// With right-click panning disabled, let the native contextmenu through so the
+				// menu opens on press.
+				if (!editor.options.rightClickPanning) return
+				// Synthetic events — our own dispatch from onPointerUp, or tests using
+				// fireEvent.contextMenu — pass through so Radix can open the menu. The real
+				// browser contextmenu is always suppressed: right-click behavior has
+				// already been decided by our pointer handling (either we dispatched a
+				// synthetic to open the menu at the release position, or we panned and
+				// don't want a menu at all).
+				if (e.nativeEvent.isTrusted) {
+					preventDefault(e)
+				}
+			}
+
 			return {
 				onPointerDown,
 				onPointerUp,
@@ -153,6 +189,7 @@ export function useCanvasEvents() {
 				onTouchStart,
 				onTouchEnd,
 				onClick,
+				onContextMenu,
 			}
 		},
 		[editor]

package/src/lib/hooks/{useIsDarkMode.ts → useColorMode.ts}

@@ -3,11 +3,15 @@ import { useSvgExportContext } from '../editor/types/SvgExportContext'
 import { useEditor } from './useEditor'
 
 /** @public */
-export function useIsDarkMode() {
+export function useColorMode(): 'light' | 'dark' {
 	const editor = useEditor()
 	const exportContext = useSvgExportContext()
-	return useValue('isDarkMode', () => exportContext?.isDarkMode ?? editor.user.getIsDarkMode(), [
-		exportContext,
-		editor,
-	])
+	return useValue(
+		'colorMode',
+		() => {
+			if (exportContext) return exportContext.colorMode
+			return editor.getColorMode()
+		},
+		[exportContext, editor]
+	)
 }

package/src/lib/hooks/useCursor.ts

@@ -3,7 +3,6 @@ import { TLCursorType } from '@tldraw/tlschema'
 import { PI, radiansToDegrees } from '../primitives/utils'
 import { useContainer } from './useContainer'
 import { useEditor } from './useEditor'
-import { useIsDarkMode } from './useIsDarkMode'
 
 const CORNER_SVG = `<path d='m19.7432 17.0869-4.072 4.068 2.829 2.828-8.473-.013-.013-8.47 2.841 2.842 4.075-4.068 1.414-1.415-2.844-2.842h8.486v8.484l-2.83-2.827z' fill='%23fff'/><path d='m18.6826 16.7334-4.427 4.424 1.828 1.828-5.056-.016-.014-5.054 1.842 1.841 4.428-4.422 2.474-2.475-1.844-1.843h5.073v5.071l-1.83-1.828z' fill='%23000'/>`
 const EDGE_SVG = `<path d='m9 17.9907v.005l5.997 5.996.001-3.999h1.999 2.02v4l5.98-6.001-5.98-5.999.001 4.019-2.021.002h-2l.001-4.022zm1.411.003 3.587-3.588-.001 2.587h3.5 2.521v-2.585l3.565 3.586-3.564 3.585-.001-2.585h-2.521l-3.499-.001-.001 2.586z' fill='%23fff'/><path d='m17.4971 18.9932h2.521v2.586l3.565-3.586-3.565-3.585v2.605h-2.521-3.5v-2.607l-3.586 3.587 3.586 3.586v-2.587z' fill='%23000'/>`
@@ -67,7 +66,6 @@ export function getCursor(cursor: TLCursorType, rotation = 0, color = 'black') {
 export function useCursor() {
 	const editor = useEditor()
 	const container = useContainer()
-	const isDarkMode = useIsDarkMode()
 
 	useQuickReactor(
 		'useCursor',
@@ -79,11 +77,9 @@ export function useCursor() {
 				return
 			}
 
-			container.style.setProperty(
-				'--tl-cursor',
-				getCursor(type, rotation, isDarkMode ? 'white' : 'black')
-			)
+			const { cursor } = editor.getCurrentTheme().colors[editor.getColorMode()]
+			container.style.setProperty('--tl-cursor', getCursor(type, rotation, cursor))
 		},
-		[editor, container, isDarkMode]
+		[editor, container]
 	)
 }

package/src/lib/hooks/useDarkMode.ts

@@ -1,18 +1,18 @@
 import { useValue } from '@tldraw/state-react'
 import React from 'react'
 import { debugFlags } from '../utils/debug-flags'
+import { useColorMode } from './useColorMode'
 import { useContainer } from './useContainer'
 import { useEditor } from './useEditor'
-import { useIsDarkMode } from './useIsDarkMode'
 
 export function useDarkMode() {
 	const editor = useEditor()
 	const container = useContainer()
-	const isDarkMode = useIsDarkMode()
+	const colorMode = useColorMode()
 	const forceSrgb = useValue(debugFlags.forceSrgb)
 
 	React.useEffect(() => {
-		if (isDarkMode) {
+		if (colorMode === 'dark') {
 			container.setAttribute('data-color-mode', 'dark')
 			container.classList.remove('tl-theme__light')
 			container.classList.add('tl-theme__dark')
@@ -26,5 +26,5 @@ export function useDarkMode() {
 		} else {
 			container.classList.remove('tl-theme__force-sRGB')
 		}
-	}, [editor, container, forceSrgb, isDarkMode])
+	}, [editor, container, forceSrgb, colorMode])
 }

package/src/lib/options.ts

@@ -154,6 +154,12 @@ export interface TldrawOptions {
 	 * When false, the spacebar will not pan the camera.
 	 */
 	readonly spacebarPanning: boolean
+	/**
+	 * Whether to allow right-click + drag to pan the camera. When true, right-click + drag pans the
+	 * camera and a static right-click opens the context menu at the release position. When false,
+	 * right-click opens the context menu on press (no drag-to-pan).
+	 */
+	readonly rightClickPanning: boolean
 	/**
 	 * The default padding (in pixels) used when zooming to fit content in the viewport.
 	 * This affects methods like `zoomToFit()`, `zoomToSelection()`, and `zoomToBounds()`.
@@ -196,6 +202,12 @@ export interface TldrawOptions {
 	 * viewport's page dimensions regardless of overview zoom changes.
 	 */
 	readonly quickZoomPreservesScreenBounds: boolean
+	/**
+	 * Whether to use 2D canvas rendering for shape indicators. When true (default),
+	 * shapes that support it will render indicators on a 2D canvas for better
+	 * performance. When false, all indicators use legacy SVG rendering.
+	 */
+	readonly useCanvasIndicators: boolean
 	/**
 	 * Called before content is written to the clipboard during a copy or cut operation.
 	 * Receives the serialized content (shapes, bindings, assets) and can filter or transform
@@ -326,11 +338,13 @@ export const defaultTldrawOptions = {
 	debouncedZoom: true,
 	debouncedZoomThreshold: 500,
 	spacebarPanning: true,
+	rightClickPanning: true,
 	zoomToFitPadding: 128,
 	snapThreshold: 8,
 	camera: DEFAULT_CAMERA_OPTIONS,
 	text: {},
 	deepLinks: undefined,
+	useCanvasIndicators: true,
 	quickZoomPreservesScreenBounds: true,
 	onBeforeCopyToClipboard: undefined,
 	onBeforePasteFromClipboard: undefined,

package/src/lib/utils/reparenting.ts

@@ -103,9 +103,13 @@ export function kickoutOccludedShapes(
 					if (oldParentIndex > -1) {
 						// If the old parent is a direct child of the new parent, then we'll add them above the old parent but below the next sibling.
 						const siblingsIndexAbove = oldParentSiblingIds[oldParentIndex + 1]
-						const indexKeyAbove = siblingsIndexAbove
+						const siblingAboveIndex = siblingsIndexAbove
 							? editor.getShape(siblingsIndexAbove)!.index
-							: getIndexAbove(prevParent.index)
+							: undefined
+						const indexKeyAbove =
+							siblingAboveIndex && siblingAboveIndex > prevParent.index
+								? siblingAboveIndex
+								: getIndexAbove(prevParent.index)
 						insertIndexKey = getIndexBetween(prevParent.index, indexKeyAbove)
 					} else {
 						// If the old parent is not a direct child of the new parent, then we'll add them to the "top" of the new parent's children.

package/src/lib/utils/richText.ts

@@ -2,9 +2,9 @@ import { getSchema, JSONContent, Editor as TTEditor } from '@tiptap/core'
 import { Node, Schema } from '@tiptap/pm/model'
 import { EditorProviderProps } from '@tiptap/react'
 import { TLRichText } from '@tldraw/tlschema'
+import { TLFontFace } from '@tldraw/tlschema'
 import { assert, WeakCache } from '@tldraw/utils'
 import type { Editor } from '../editor/Editor'
-import { TLFontFace } from '../editor/managers/FontManager/FontManager'
 
 /**
  * This is the TipTap editor! Docs are {@link https://tiptap.dev/docs}.

package/src/lib/utils/runtime.ts

@@ -1,3 +1,5 @@
+import { hardReset } from './sync/hardReset'
+
 /** @public */
 export const runtime: {
 	openWindow(url: string, target: string, allowReferrer?: boolean): void
@@ -11,7 +13,7 @@ export const runtime: {
 		window.location.reload()
 	},
 	async hardReset() {
-		return await (window as any).__tldraw__hardReset?.()
+		return await hardReset({ shouldReload: true })
 	},
 }
 

package/src/lib/utils/sync/hardReset.ts

@@ -19,11 +19,3 @@ export async function hardReset({ shouldReload = true } = {}) {
 		window.location.reload()
 	}
 }
-
-if (typeof window !== 'undefined') {
-	if (process.env.NODE_ENV === 'development') {
-		;(window as any).hardReset = hardReset
-	}
-	// window.__tldraw__hardReset is used to inject the logic into the tldraw library
-	;(window as any).__tldraw__hardReset = hardReset
-}

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 = '4.6.0-next.30b99cd52fc8'
+export const version = '4.6.0-next.35cf541abcf9'
 export const publishDates = {
 	major: '2025-09-18T14:39:22.803Z',
-	minor: '2026-04-03T13:03:17.058Z',
-	patch: '2026-04-03T13:03:17.058Z',
+	minor: '2026-04-22T15:37:39.418Z',
+	patch: '2026-04-22T15:37:39.418Z',
 }

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

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../src/lib/hooks/useIsDarkMode.ts"],
-  "sourcesContent": ["import { useValue } from '@tldraw/state-react'\nimport { useSvgExportContext } from '../editor/types/SvgExportContext'\nimport { useEditor } from './useEditor'\n\n/** @public */\nexport function useIsDarkMode() {\n\tconst editor = useEditor()\n\tconst exportContext = useSvgExportContext()\n\treturn useValue('isDarkMode', () => exportContext?.isDarkMode ?? editor.user.getIsDarkMode(), [\n\t\texportContext,\n\t\teditor,\n\t])\n}\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,yBAAyB;AACzB,8BAAoC;AACpC,uBAA0B;AAGnB,SAAS,gBAAgB;AAC/B,QAAM,aAAS,4BAAU;AACzB,QAAM,oBAAgB,6CAAoB;AAC1C,aAAO,6BAAS,cAAc,MAAM,eAAe,cAAc,OAAO,KAAK,cAAc,GAAG;AAAA,IAC7F;AAAA,IACA;AAAA,EACD,CAAC;AACF;",
-  "names": []
-}

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

@@ -1,15 +0,0 @@
-import { useValue } from "@tldraw/state-react";
-import { useSvgExportContext } from "../editor/types/SvgExportContext.mjs";
-import { useEditor } from "./useEditor.mjs";
-function useIsDarkMode() {
-  const editor = useEditor();
-  const exportContext = useSvgExportContext();
-  return useValue("isDarkMode", () => exportContext?.isDarkMode ?? editor.user.getIsDarkMode(), [
-    exportContext,
-    editor
-  ]);
-}
-export {
-  useIsDarkMode
-};
-//# sourceMappingURL=useIsDarkMode.mjs.map

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

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../src/lib/hooks/useIsDarkMode.ts"],
-  "sourcesContent": ["import { useValue } from '@tldraw/state-react'\nimport { useSvgExportContext } from '../editor/types/SvgExportContext'\nimport { useEditor } from './useEditor'\n\n/** @public */\nexport function useIsDarkMode() {\n\tconst editor = useEditor()\n\tconst exportContext = useSvgExportContext()\n\treturn useValue('isDarkMode', () => exportContext?.isDarkMode ?? editor.user.getIsDarkMode(), [\n\t\texportContext,\n\t\teditor,\n\t])\n}\n"],
-  "mappings": "AAAA,SAAS,gBAAgB;AACzB,SAAS,2BAA2B;AACpC,SAAS,iBAAiB;AAGnB,SAAS,gBAAgB;AAC/B,QAAM,SAAS,UAAU;AACzB,QAAM,gBAAgB,oBAAoB;AAC1C,SAAO,SAAS,cAAc,MAAM,eAAe,cAAc,OAAO,KAAK,cAAc,GAAG;AAAA,IAC7F;AAAA,IACA;AAAA,EACD,CAAC;AACF;",
-  "names": []
-}