@tldraw/editor 4.6.0-next.20de11b7e238 → 4.6.0-next.241e87d4700a

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

@@ -61,7 +61,7 @@ describe('UserPreferencesManager', () => {
 			// Test when window.matchMedia is not available
 			delete (window as any).matchMedia
 
-			userPreferencesManager = new UserPreferencesManager(mockUser, false)
+			userPreferencesManager = new UserPreferencesManager(mockUser, 'light')
 
 			expect(userPreferencesManager.systemColorScheme.get()).toBe('light')
 
@@ -76,7 +76,7 @@ describe('UserPreferencesManager', () => {
 				removeEventListener: vi.fn(),
 			})
 
-			userPreferencesManager = new UserPreferencesManager(mockUser, false)
+			userPreferencesManager = new UserPreferencesManager(mockUser, 'light')
 
 			expect(userPreferencesManager.systemColorScheme.get()).toBe('light')
 		})
@@ -88,7 +88,7 @@ describe('UserPreferencesManager', () => {
 				removeEventListener: vi.fn(),
 			})
 
-			userPreferencesManager = new UserPreferencesManager(mockUser, false)
+			userPreferencesManager = new UserPreferencesManager(mockUser, 'system')
 
 			expect(userPreferencesManager.systemColorScheme.get()).toBe('dark')
 		})
@@ -103,7 +103,7 @@ describe('UserPreferencesManager', () => {
 				removeEventListener: mockRemoveEventListener,
 			})
 
-			userPreferencesManager = new UserPreferencesManager(mockUser, false)
+			userPreferencesManager = new UserPreferencesManager(mockUser, 'system')
 
 			expect(mockAddEventListener).toHaveBeenCalledWith('change', expect.any(Function))
 		})
@@ -123,7 +123,7 @@ describe('UserPreferencesManager', () => {
 				removeEventListener: vi.fn(),
 			})
 
-			userPreferencesManager = new UserPreferencesManager(mockUser, false)
+			userPreferencesManager = new UserPreferencesManager(mockUser, 'system')
 
 			expect(userPreferencesManager.systemColorScheme.get()).toBe('light')
 
@@ -141,7 +141,7 @@ describe('UserPreferencesManager', () => {
 			delete (global as any).window
 
 			expect(() => {
-				userPreferencesManager = new UserPreferencesManager(mockUser, false)
+				userPreferencesManager = new UserPreferencesManager(mockUser, 'light')
 			}).not.toThrow()
 
 			global.window = originalWindow
@@ -158,14 +158,14 @@ describe('UserPreferencesManager', () => {
 				removeEventListener: mockRemoveEventListener,
 			})
 
-			userPreferencesManager = new UserPreferencesManager(mockUser, false)
+			userPreferencesManager = new UserPreferencesManager(mockUser, 'system')
 			userPreferencesManager.dispose()
 
 			expect(mockRemoveEventListener).toHaveBeenCalledWith('change', expect.any(Function))
 		})
 
 		it('should call all disposables', () => {
-			userPreferencesManager = new UserPreferencesManager(mockUser, false)
+			userPreferencesManager = new UserPreferencesManager(mockUser, 'light')
 
 			const mockDisposable1 = vi.fn()
 			const mockDisposable2 = vi.fn()
@@ -182,7 +182,7 @@ describe('UserPreferencesManager', () => {
 
 	describe('updateUserPreferences', () => {
 		beforeEach(() => {
-			userPreferencesManager = new UserPreferencesManager(mockUser, false)
+			userPreferencesManager = new UserPreferencesManager(mockUser, 'light')
 		})
 
 		it('should update user preferences with partial data', () => {
@@ -216,7 +216,7 @@ describe('UserPreferencesManager', () => {
 
 	describe('getUserPreferences', () => {
 		beforeEach(() => {
-			userPreferencesManager = new UserPreferencesManager(mockUser, false)
+			userPreferencesManager = new UserPreferencesManager(mockUser, 'light')
 		})
 
 		it('should return complete user preferences with computed values', () => {
@@ -255,7 +255,7 @@ describe('UserPreferencesManager', () => {
 
 	describe('getIsDarkMode', () => {
 		beforeEach(() => {
-			userPreferencesManager = new UserPreferencesManager(mockUser, false)
+			userPreferencesManager = new UserPreferencesManager(mockUser, 'light')
 		})
 
 		it('should return true when colorScheme is dark', () => {
@@ -282,24 +282,18 @@ describe('UserPreferencesManager', () => {
 			expect(userPreferencesManager.getIsDarkMode()).toBe(true)
 		})
 
-		it('should use inferDarkMode when colorScheme is undefined', () => {
+		it('should default to light when colorScheme is undefined', () => {
 			userPreferencesAtom.set({ ...mockUserPreferences, colorScheme: undefined })
 
-			// With inferDarkMode = true
-			const managerWithInfer = new UserPreferencesManager(mockUser, true)
-			managerWithInfer.systemColorScheme.set('dark')
-			expect(managerWithInfer.getIsDarkMode()).toBe(true)
-
-			// With inferDarkMode = false
-			const managerWithoutInfer = new UserPreferencesManager(mockUser, false)
-			managerWithoutInfer.systemColorScheme.set('dark')
-			expect(managerWithoutInfer.getIsDarkMode()).toBe(false)
+			const manager = new UserPreferencesManager(mockUser, 'light')
+			manager.systemColorScheme.set('dark')
+			expect(manager.getIsDarkMode()).toBe(false)
 		})
 	})
 
 	describe('individual preference getters', () => {
 		beforeEach(() => {
-			userPreferencesManager = new UserPreferencesManager(mockUser, false)
+			userPreferencesManager = new UserPreferencesManager(mockUser, 'light')
 		})
 
 		describe('getId', () => {
@@ -499,7 +493,7 @@ describe('UserPreferencesManager', () => {
 
 	describe('reactive behavior', () => {
 		beforeEach(() => {
-			userPreferencesManager = new UserPreferencesManager(mockUser, false)
+			userPreferencesManager = new UserPreferencesManager(mockUser, 'light')
 		})
 
 		it('should react to user preferences changes', () => {
@@ -533,7 +527,7 @@ describe('UserPreferencesManager', () => {
 
 	describe('edge cases and error handling', () => {
 		beforeEach(() => {
-			userPreferencesManager = new UserPreferencesManager(mockUser, false)
+			userPreferencesManager = new UserPreferencesManager(mockUser, 'light')
 		})
 
 		it('should handle undefined user preferences gracefully', () => {
@@ -589,14 +583,14 @@ describe('UserPreferencesManager', () => {
 			mockMatchMedia.mockReturnValue(null)
 
 			expect(() => {
-				userPreferencesManager = new UserPreferencesManager(mockUser, false)
+				userPreferencesManager = new UserPreferencesManager(mockUser, 'light')
 			}).not.toThrow()
 
 			expect(userPreferencesManager.systemColorScheme.get()).toBe('light')
 		})
 
 		it('should handle dispose gracefully in all cases', () => {
-			userPreferencesManager = new UserPreferencesManager(mockUser, false)
+			userPreferencesManager = new UserPreferencesManager(mockUser, 'light')
 
 			// Should not throw even if dispose is called multiple times
 			expect(() => userPreferencesManager.dispose()).not.toThrow()
@@ -608,7 +602,7 @@ describe('UserPreferencesManager', () => {
 			const originalWindow = global.window
 			delete (global as any).window
 
-			userPreferencesManager = new UserPreferencesManager(mockUser, false)
+			userPreferencesManager = new UserPreferencesManager(mockUser, 'light')
 
 			expect(() => userPreferencesManager.dispose()).not.toThrow()
 			expect(userPreferencesManager.disposables.size).toBe(0)
@@ -619,7 +613,7 @@ describe('UserPreferencesManager', () => {
 
 	describe('integration scenarios', () => {
 		it('should work with real-world preference scenarios', () => {
-			userPreferencesManager = new UserPreferencesManager(mockUser, true)
+			userPreferencesManager = new UserPreferencesManager(mockUser, 'light')
 
 			// User starts with system preference
 			userPreferencesManager.updateUserPreferences({ colorScheme: 'system' })
@@ -641,7 +635,7 @@ describe('UserPreferencesManager', () => {
 		})
 
 		it('should handle preference updates with multiple fields', () => {
-			userPreferencesManager = new UserPreferencesManager(mockUser, false)
+			userPreferencesManager = new UserPreferencesManager(mockUser, 'light')
 
 			const updates = {
 				name: 'New User',

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

@@ -12,7 +12,7 @@ export class UserPreferencesManager {
 	}
 	constructor(
 		private readonly user: TLCurrentUser,
-		private readonly inferDarkMode: boolean
+		private readonly colorScheme: 'light' | 'dark' | 'system'
 	) {
 		if (typeof window === 'undefined' || !getGlobalWindow().matchMedia) return
 
@@ -57,7 +57,9 @@ export class UserPreferencesManager {
 	}
 
 	@computed getIsDarkMode() {
-		switch (this.user.userPreferences.get().colorScheme) {
+		const userColorScheme = this.user.userPreferences.get().colorScheme
+		const scheme = userColorScheme ?? this.colorScheme
+		switch (scheme) {
 			case 'dark':
 				return true
 			case 'light':
@@ -65,7 +67,7 @@ export class UserPreferencesManager {
 			case 'system':
 				return this.systemColorScheme.get() === 'dark'
 			default:
-				return this.inferDarkMode ? this.systemColorScheme.get() === 'dark' : false
+				return false
 		}
 	}
 

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

@@ -3,6 +3,7 @@ import { EMPTY_ARRAY } from '@tldraw/state'
 import { LegacyMigrations, MigrationSequence } from '@tldraw/store'
 import {
 	RecordProps,
+	TLAsset,
 	TLHandle,
 	TLParentId,
 	TLPropsMigrations,
@@ -11,14 +12,15 @@ import {
 	TLShapeId,
 	TLShapePartial,
 	TLUnknownShape,
+	VecModel,
 } from '@tldraw/tlschema'
+import { TLFontFace } from '@tldraw/tlschema'
 import { IndexKey } from '@tldraw/utils'
 import { ReactElement } from 'react'
 import { Box, SelectionHandle } from '../../primitives/Box'
 import { Geometry2d } from '../../primitives/geometry/Geometry2d'
 import { Vec } from '../../primitives/Vec'
 import type { Editor } from '../Editor'
-import { TLFontFace } from '../managers/FontManager/FontManager'
 import { BoundsSnapGeometry } from '../managers/SnapManager/BoundsSnaps'
 import { HandleSnapGeometry } from '../managers/SnapManager/HandleSnaps'
 import { TLClickEventInfo } from '../types/event-types'
@@ -31,6 +33,7 @@ export interface TLShapeUtilConstructor<T extends TLShape, U extends ShapeUtil<T
 	type: T['type']
 	props?: RecordProps<T>
 	migrations?: LegacyMigrations | TLPropsMigrations | MigrationSequence
+	handledAssetTypes?: readonly string[]
 }
 
 /**
@@ -168,6 +171,16 @@ export abstract class ShapeUtil<Shape extends TLShape = TLShape> {
 	 */
 	static type: string
 
+	/**
+	 * The asset types that this shape can be created from.
+	 * When a file is dropped on the canvas, the editor finds the shape util
+	 * whose `handledAssetTypes` includes the asset's type and calls
+	 * {@link ShapeUtil.createShapeForAsset} to produce the shape.
+	 *
+	 * @public
+	 */
+	static handledAssetTypes?: readonly string[]
+
 	/**
 	 * Get the default props for a shape.
 	 *
@@ -175,6 +188,18 @@ export abstract class ShapeUtil<Shape extends TLShape = TLShape> {
 	 */
 	abstract getDefaultProps(): Shape['props']
 
+	/**
+	 * Create a shape partial for placing an asset on the canvas.
+	 * Only called for shapes whose constructor declares matching
+	 * {@link ShapeUtil.handledAssetTypes | `handledAssetTypes`}.
+	 *
+	 * @param asset - The asset to create a shape for.
+	 * @param position - Where to place the shape.
+	 * @returns A shape partial, or null if this shape can't be created for the asset.
+	 * @public
+	 */
+	createShapeForAsset?(asset: TLAsset, position: VecModel): TLShapePartial | null
+
 	/**
 	 * Get the shape's geometry.
 	 *
@@ -276,7 +301,7 @@ export abstract class ShapeUtil<Shape extends TLShape = TLShape> {
 	 *
 	 * @public
 	 */
-	canBind(_opts: TLShapeUtilCanBindOpts): boolean {
+	canBind(opts: TLShapeUtilCanBindOpts): boolean {
 		return true
 	}
 
@@ -526,7 +551,7 @@ export abstract class ShapeUtil<Shape extends TLShape = TLShape> {
 	 * @param type - The shape type.
 	 * @public
 	 */
-	canReceiveNewChildrenOfType(shape: Shape, _type: TLShape['type']) {
+	canReceiveNewChildrenOfType(shape: Shape, type: TLShape['type']) {
 		return false
 	}
 

package/src/lib/editor/shapes/group/GroupShapeUtil.tsx

@@ -12,7 +12,7 @@ export class GroupShapeUtil extends ShapeUtil<TLGroupShape> {
 	static override props = groupShapeProps
 	static override migrations = groupShapeMigrations
 
-	override hideSelectionBoundsFg() {
+	override hideSelectionBoundsFg(shape: TLGroupShape) {
 		return true
 	}
 

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

@@ -43,6 +43,13 @@ export function getPerfectDashProps(
 		}
 	}
 
+	if (style === 'none') {
+		return {
+			strokeDasharray: 'none',
+			strokeDashoffset: 'none',
+		}
+	}
+
 	switch (style) {
 		case 'dashed': {
 			ratio = 1

package/src/lib/editor/tools/StateNode.ts

@@ -17,20 +17,6 @@ import {
 	TLWheelEventInfo,
 } from '../types/event-types'
 
-const STATE_NODES_TO_MEASURE = [
-	'brushing',
-	'cropping',
-	'dragging',
-	'dragging_handle',
-	'drawing',
-	'erasing',
-	'lasering',
-	'resizing',
-	'rotating',
-	'scribble_brushing',
-	'translating',
-]
-
 /** @public */
 export interface TLStateNodeConstructor {
 	new (editor: Editor, parent?: StateNode): StateNode
@@ -39,6 +25,7 @@ export interface TLStateNodeConstructor {
 	children?(): TLStateNodeConstructor[]
 	isLockable: boolean
 	useCoalescedEvents: boolean
+	trackPerformance: boolean
 }
 
 /** @public */
@@ -94,6 +81,8 @@ export abstract class StateNode implements Partial<TLEventHandlers> {
 	static children?: () => TLStateNodeConstructor[]
 	static isLockable = true
 	static useCoalescedEvents = false
+	/** Set to `true` in subclasses to emit interaction-start/end performance events when this state is entered/exited. */
+	static trackPerformance = false
 
 	id: string
 	type: 'branch' | 'leaf' | 'root'
@@ -191,8 +180,12 @@ export abstract class StateNode implements Partial<TLEventHandlers> {
 
 	// todo: move this logic into transition
 	enter(info: any, from: string) {
-		if (debugFlags.measurePerformance.get() && STATE_NODES_TO_MEASURE.includes(this.id)) {
-			this.performanceTracker.start(this.id)
+		const track = (this.constructor as TLStateNodeConstructor).trackPerformance
+		if (track) {
+			if (debugFlags.measurePerformance.get()) {
+				this.performanceTracker.start(this.id)
+			}
+			this.editor.performance._notifyInteractionStart(this.id, this.getPath())
 		}
 
 		this._isActive.set(true)
@@ -207,9 +200,14 @@ export abstract class StateNode implements Partial<TLEventHandlers> {
 
 	// todo: move this logic into transition
 	exit(info: any, to: string) {
-		if (debugFlags.measurePerformance.get() && this.performanceTracker.isStarted()) {
-			this.performanceTracker.stop()
+		const track = (this.constructor as TLStateNodeConstructor).trackPerformance
+		if (track) {
+			if (debugFlags.measurePerformance.get() && this.performanceTracker.isStarted()) {
+				this.performanceTracker.stop()
+			}
+			this.editor.performance._notifyInteractionEnd()
 		}
+
 		this._isActive.set(false)
 		this.onExit?.(info, to)
 

package/src/lib/editor/types/SvgExportContext.tsx

@@ -42,6 +42,11 @@ export interface SvgExportContext {
 	 */
 	readonly isDarkMode: boolean
 
+	/**
+	 * The color mode to use for this export.
+	 */
+	readonly colorMode: 'light' | 'dark'
+
 	/**
 	 * The scale of the export - how much CSS pixels will be scaled up/down by.
 	 */

package/src/lib/editor/types/external-content.ts

@@ -60,6 +60,7 @@ export interface TLFileReplaceExternalContent extends TLBaseExternalContent {
 	type: 'file-replace'
 	file: File
 	shapeId: TLShapeId
+	/** @deprecated This field is no longer used by the default handler. It may be removed in a future version. */
 	isImage: boolean
 }
 

package/src/lib/exports/getSvgJsx.tsx

@@ -1,11 +1,6 @@
 import { useAtom, useValue } from '@tldraw/state-react'
-import {
-	TLFrameShape,
-	TLShape,
-	TLShapeId,
-	getColorValue,
-	getDefaultColorTheme,
-} from '@tldraw/tlschema'
+import { TLFrameShape, TLShape, TLShapeId } from '@tldraw/tlschema'
+import { TLFontFace } from '@tldraw/tlschema'
 import { hasOwnProperty, promiseWithResolve, uniqueId } from '@tldraw/utils'
 import {
 	ComponentType,
@@ -21,7 +16,7 @@ import { flushSync } from 'react-dom'
 import { ErrorBoundary } from '../components/ErrorBoundary'
 import { InnerShape, InnerShapeBackground } from '../components/Shape'
 import type { Editor, TLRenderingShape } from '../editor/Editor'
-import { TLFontFace } from '../editor/managers/FontManager/FontManager'
+import { getColorValue } from '../editor/managers/ThemeManager/defaultThemes'
 import { ShapeUtil } from '../editor/shapes/ShapeUtil'
 import { TLImageExportOptions } from '../editor/types/misc-types'
 import {
@@ -54,7 +49,9 @@ export function getSvgJsx(editor: Editor, ids: TLShapeId[], opts: TLImageExportO
 	const renderPadding =
 		typeof opts.padding === 'number' ? opts.padding : editor.options.defaultSvgPadding
 
-	const isDarkMode = opts.darkMode ?? editor.user.getIsDarkMode()
+	const colorMode: 'light' | 'dark' =
+		opts.darkMode !== undefined ? (opts.darkMode ? 'dark' : 'light') : editor.getColorMode()
+	const isDarkMode = colorMode === 'dark'
 
 	// ---Figure out which shapes we need to include
 	const shapeIdsToInclude = editor.getShapeAndDescendantIds(ids)
@@ -116,6 +113,7 @@ export function getSvgJsx(editor: Editor, ids: TLShapeId[], opts: TLImageExportO
 			background={background}
 			singleFrameShapeId={singleFrameShapeId}
 			isDarkMode={isDarkMode}
+			colorMode={colorMode}
 			renderingShapes={renderingShapes}
 			onMount={initialEffectPromise.resolve}
 			waitUntil={exportDelay.waitUntil}
@@ -206,6 +204,7 @@ function SvgExport({
 	background,
 	singleFrameShapeId,
 	isDarkMode,
+	colorMode,
 	renderingShapes,
 	onMount,
 	waitUntil,
@@ -218,12 +217,13 @@ function SvgExport({
 	background: boolean
 	singleFrameShapeId: TLShapeId | null
 	isDarkMode: boolean
+	colorMode: 'light' | 'dark'
 	renderingShapes: TLRenderingShape[]
 	onMount(): void
 	waitUntil(promise: Promise<void>): void
 }) {
 	const masksId = useUniqueSafeId()
-	const theme = getDefaultColorTheme({ isDarkMode })
+	const theme = editor.getCurrentTheme()
 
 	const stateAtom = useAtom<{
 		defsById: Record<
@@ -257,6 +257,7 @@ function SvgExport({
 	const exportContext = useMemo(
 		(): SvgExportContext => ({
 			isDarkMode,
+			colorMode,
 			waitUntil,
 			addExportDef,
 			scale,
@@ -272,7 +273,7 @@ function SvgExport({
 				})
 			},
 		}),
-		[isDarkMode, waitUntil, addExportDef, scale, pixelRatio, editor]
+		[isDarkMode, colorMode, waitUntil, addExportDef, scale, pixelRatio, editor]
 	)
 
 	const didRenderRef = useRef(false)
@@ -443,17 +444,22 @@ function SvgExport({
 		onMount()
 	}, [onMount, shapeElements])
 
-	let backgroundColor = background ? theme.background : 'transparent'
+	const colors = theme.colors[colorMode]
+	let backgroundColor = background ? colors.background : 'transparent'
 
 	if (singleFrameShapeId && background) {
 		const frameShapeUtil = editor.getShapeUtil('frame') as any as
 			| undefined
-			| { options: { showColors: boolean } }
+			| {
+					options: {
+						showColors: boolean
+					}
+			  }
 		if (frameShapeUtil?.options.showColors) {
 			const shape = editor.getShape(singleFrameShapeId)! as TLFrameShape
-			backgroundColor = getColorValue(theme, shape.props.color, 'frameFill')
+			backgroundColor = getColorValue(colors, shape.props.color, 'frameFill')
 		} else {
-			backgroundColor = theme.solid
+			backgroundColor = colors.solid
 		}
 	}
 

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/{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/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}.