tldraw 3.16.0-canary.6f3aedaa1c01 → 3.16.0-canary.7379d3553d7e

package/src/lib/tools/EraserTool/childStates/Erasing.ts

@@ -4,6 +4,7 @@ import {
 	TLGroupShape,
 	TLPointerEventInfo,
 	TLShapeId,
+	isAccelKey,
 	pointInPolygon,
 } from '@tldraw/editor'
 
@@ -15,7 +16,15 @@ export class Erasing extends StateNode {
 	private markId = ''
 	private excludedShapeIds = new Set<TLShapeId>()
 
+	_isHoldingAccelKey = false
+	_firstErasingShapeId: TLShapeId | null = null
+	_erasingShapeIds: TLShapeId[] = []
+
 	override onEnter(info: TLPointerEventInfo) {
+		this._isHoldingAccelKey = isAccelKey(this.editor.inputs)
+		this._firstErasingShapeId = this.editor.getErasingShapeIds()[0] // the first one should be the first one we hit... is it?
+		this._erasingShapeIds = this.editor.getErasingShapeIds()
+
 		this.markId = this.editor.markHistoryStoppingPoint('erase scribble begin')
 		this.info = info
 
@@ -76,6 +85,16 @@ export class Erasing extends StateNode {
 		this.complete()
 	}
 
+	override onKeyUp() {
+		this._isHoldingAccelKey = isAccelKey(this.editor.inputs)
+		this.update()
+	}
+
+	override onKeyDown() {
+		this._isHoldingAccelKey = isAccelKey(this.editor.inputs)
+		this.update()
+	}
+
 	update() {
 		const { editor, excludedShapeIds } = this
 		const erasingShapeIds = editor.getErasingShapeIds()
@@ -87,6 +106,7 @@ export class Erasing extends StateNode {
 
 		this.pushPointToScribble()
 
+		// Otherwise, erasing shapes are all the shapes that were hit before plus any new shapes that are hit
 		const erasing = new Set<TLShapeId>(erasingShapeIds)
 		const minDist = this.editor.options.hitTestMargin / zoomLevel
 
@@ -121,18 +141,31 @@ export class Erasing extends StateNode {
 			if (geometry.hitTestLineSegment(A, B, minDist)) {
 				erasing.add(editor.getOutermostSelectableShape(shape).id)
 			}
+
+			this._erasingShapeIds = [...erasing]
+		}
+
+		// If the user is holding the meta / ctrl key, we should only erase the first shape we hit
+		if (this._isHoldingAccelKey && this._firstErasingShapeId) {
+			const erasingShapeId = this._firstErasingShapeId
+			if (erasingShapeId && this.editor.getShape(erasingShapeId)) {
+				editor.setErasingShapes([erasingShapeId])
+			}
+			return
 		}
 
 		// Remove the hit shapes, except if they're in the list of excluded shapes
 		// (these excluded shapes will be any frames or groups the pointer was inside of
 		// when the user started erasing)
-		this.editor.setErasingShapes([...erasing].filter((id) => !excludedShapeIds.has(id)))
+		this.editor.setErasingShapes(this._erasingShapeIds.filter((id) => !excludedShapeIds.has(id)))
 	}
 
 	complete() {
 		const { editor } = this
 		editor.deleteShapes(editor.getCurrentPageState().erasingShapeIds)
 		this.parent.transition('idle')
+		this._erasingShapeIds = []
+		this._firstErasingShapeId = null
 	}
 
 	cancel() {

package/src/lib/tools/EraserTool/childStates/Pointing.ts

@@ -1,4 +1,5 @@
 import {
+	isAccelKey,
 	StateNode,
 	TLFrameShape,
 	TLGroupShape,
@@ -9,7 +10,11 @@ import {
 export class Pointing extends StateNode {
 	static override id = 'pointing'
 
+	_isHoldingAccelKey = false
+
 	override onEnter() {
+		this._isHoldingAccelKey = isAccelKey(this.editor.inputs)
+
 		const zoomLevel = this.editor.getZoomLevel()
 		const currentPageShapesSorted = this.editor.getCurrentPageRenderingShapesSorted()
 		const {
@@ -45,12 +50,25 @@ export class Pointing extends StateNode {
 				}
 
 				erasing.add(hitShape.id)
+
+				// If the user is holding the meta / ctrl key, stop after the first shape
+				if (this._isHoldingAccelKey) {
+					break
+				}
 			}
 		}
 
 		this.editor.setErasingShapes([...erasing])
 	}
 
+	override onKeyUp() {
+		this._isHoldingAccelKey = isAccelKey(this.editor.inputs)
+	}
+
+	override onKeyDown() {
+		this._isHoldingAccelKey = isAccelKey(this.editor.inputs)
+	}
+
 	override onLongPress(info: TLPointerEventInfo) {
 		this.startErasing(info)
 	}
@@ -62,6 +80,8 @@ export class Pointing extends StateNode {
 	}
 
 	override onPointerMove(info: TLPointerEventInfo) {
+		if (this._isHoldingAccelKey) return
+
 		if (this.editor.inputs.isDragging) {
 			this.startErasing(info)
 		}

package/src/lib/tools/SelectTool/childStates/DraggingHandle.tsx

@@ -13,6 +13,7 @@ import {
 	sortByIndex,
 	structuredClone,
 } from '@tldraw/editor'
+import { ArrowShapeUtil } from '../../../shapes/arrow/ArrowShapeUtil'
 import { clearArrowTargetState } from '../../../shapes/arrow/arrowTargetState'
 import { getArrowBindings } from '../../../shapes/arrow/shared'
 
@@ -135,10 +136,13 @@ export class DraggingHandle extends StateNode {
 	}
 
 	// Only relevant to arrows
-	private exactTimeout = -1 as any
+	private exactTimeout = -1
 
 	// Only relevant to arrows
 	private resetExactTimeout() {
+		const arrowUtil = this.editor.getShapeUtil<ArrowShapeUtil>('arrow')
+		const timeoutValue = arrowUtil.options.pointingPreciseTimeout
+
 		if (this.exactTimeout !== -1) {
 			this.clearExactTimeout()
 		}
@@ -150,7 +154,7 @@ export class DraggingHandle extends StateNode {
 				this.update()
 			}
 			this.exactTimeout = -1
-		}, 750)
+		}, timeoutValue)
 	}
 
 	// Only relevant to arrows

package/src/lib/ui/TldrawUi.tsx

@@ -1,12 +1,11 @@
 import { tlenv, useEditor, useReactor, useValue } from '@tldraw/editor'
 import classNames from 'classnames'
-import React, { ReactNode, useRef, useState } from 'react'
+import React, { ReactNode, useMemo, useRef, useState } from 'react'
 import { TLUiAssetUrlOverrides } from './assetUrls'
 import { SkipToMainContent } from './components/A11y'
-import { FollowingIndicator } from './components/FollowingIndicator'
 import { TldrawUiButton } from './components/primitives/Button/TldrawUiButton'
 import { TldrawUiButtonIcon } from './components/primitives/Button/TldrawUiButtonIcon'
-import { PORTRAIT_BREAKPOINT } from './constants'
+import { PORTRAIT_BREAKPOINT, PORTRAIT_BREAKPOINTS } from './constants'
 import {
 	TLUiContextProviderProps,
 	TldrawUiContextProvider,
@@ -108,10 +107,6 @@ const TldrawUiContent = React.memo(function TldrawUI() {
 		NavigationPanel,
 		HelperButtons,
 		DebugPanel,
-		CursorChatBubble,
-		RichTextToolbar,
-		ImageToolbar,
-		VideoToolbar,
 		Toasts,
 		Dialogs,
 		A11y,
@@ -160,6 +155,19 @@ const TldrawUiContent = React.memo(function TldrawUI() {
 
 	const { 'toggle-focus-mode': toggleFocus } = useActions()
 
+	const { breakpointsAbove, breakpointsBelow } = useMemo(() => {
+		const breakpointsAbove = []
+		const breakpointsBelow = []
+		for (let bp = 0; bp < PORTRAIT_BREAKPOINTS.length; bp++) {
+			if (bp <= breakpoint) {
+				breakpointsAbove.push(bp)
+			} else {
+				breakpointsBelow.push(bp)
+			}
+		}
+		return { breakpointsAbove, breakpointsBelow }
+	}, [breakpoint])
+
 	return (
 		<div
 			className={classNames('tlui-layout', {
@@ -169,6 +177,8 @@ const TldrawUiContent = React.memo(function TldrawUI() {
 			// But when the virtual keyboard is closing we want to wait a bit before showing it again.
 			data-iseditinganything={hideToolbarWhileEditing}
 			data-breakpoint={breakpoint}
+			data-breakpoints-above={breakpointsAbove.join(' ')}
+			data-breakpoints-below={breakpointsBelow.join(' ')}
 		>
 			<SkipToMainContent />
 			{isFocusMode ? (
@@ -208,13 +218,24 @@ const TldrawUiContent = React.memo(function TldrawUI() {
 					</div>
 				</>
 			)}
-			{RichTextToolbar && <RichTextToolbar />}
-			{ImageToolbar && <ImageToolbar />}
-			{VideoToolbar && <VideoToolbar />}
 			{Toasts && <Toasts />}
 			{Dialogs && <Dialogs />}
-			<FollowingIndicator />
-			{CursorChatBubble && <CursorChatBubble />}
 		</div>
 	)
 })
+
+/** @public @react */
+export function TldrawUiInFrontOfTheCanvas() {
+	const { RichTextToolbar, ImageToolbar, VideoToolbar, CursorChatBubble, FollowingIndicator } =
+		useTldrawUiComponents()
+
+	return (
+		<>
+			{RichTextToolbar && <RichTextToolbar />}
+			{ImageToolbar && <ImageToolbar />}
+			{VideoToolbar && <VideoToolbar />}
+			{FollowingIndicator && <FollowingIndicator />}
+			{CursorChatBubble && <CursorChatBubble />}
+		</>
+	)
+}

package/src/lib/ui/assetUrls.ts

@@ -1,4 +1,5 @@
 import { LANGUAGES, RecursivePartial, getDefaultCdnBaseUrl } from '@tldraw/editor'
+import { useMemo } from 'react'
 import { DEFAULT_EMBED_DEFINITIONS } from '../defaultEmbedDefinitions'
 import { TLEditorAssetUrls, defaultEditorAssetUrls } from '../utils/static-assets/assetUrls'
 import { TLUiIconType, iconTypes } from './icon-types'
@@ -41,15 +42,17 @@ export function setDefaultUiAssetUrls(urls: TLUiAssetUrls) {
 export function useDefaultUiAssetUrlsWithOverrides(
 	overrides?: TLUiAssetUrlOverrides
 ): TLUiAssetUrls {
-	if (!overrides) return defaultUiAssetUrls
+	return useMemo(() => {
+		if (!overrides) return defaultUiAssetUrls
 
-	return {
-		fonts: Object.assign({ ...defaultUiAssetUrls.fonts }, { ...overrides?.fonts }),
-		icons: Object.assign({ ...defaultUiAssetUrls.icons }, { ...overrides?.icons }),
-		embedIcons: Object.assign({ ...defaultUiAssetUrls.embedIcons }, { ...overrides?.embedIcons }),
-		translations: Object.assign(
-			{ ...defaultUiAssetUrls.translations },
-			{ ...overrides?.translations }
-		),
-	}
+		return {
+			fonts: Object.assign({ ...defaultUiAssetUrls.fonts }, { ...overrides?.fonts }),
+			icons: Object.assign({ ...defaultUiAssetUrls.icons }, { ...overrides?.icons }),
+			embedIcons: Object.assign({ ...defaultUiAssetUrls.embedIcons }, { ...overrides?.embedIcons }),
+			translations: Object.assign(
+				{ ...defaultUiAssetUrls.translations },
+				{ ...overrides?.translations }
+			),
+		}
+	}, [overrides])
 }

package/src/lib/ui/components/A11y.tsx

@@ -1,7 +1,6 @@
 import {
 	debugFlags,
 	Editor,
-	stopEventPropagation,
 	TLGeoShape,
 	TLShapeId,
 	unsafe__withoutCapture,
@@ -23,7 +22,7 @@ export function SkipToMainContent() {
 
 	const handleNavigateToFirstShape = useCallback(
 		(e: MouseEvent | KeyboardEvent) => {
-			stopEventPropagation(e)
+			editor.markEventAsHandled(e)
 			button.current?.blur()
 			const shapes = editor.getCurrentPageShapesInReadingOrder()
 			if (!shapes.length) return

package/src/lib/ui/components/ActionsMenu/DefaultActionsMenu.tsx

@@ -11,6 +11,7 @@ import {
 	TldrawUiPopoverTrigger,
 } from '../primitives/TldrawUiPopover'
 import { TldrawUiToolbar, TldrawUiToolbarButton } from '../primitives/TldrawUiToolbar'
+import { useTldrawUiOrientation } from '../primitives/layout'
 import { TldrawUiMenuContextProvider } from '../primitives/menus/TldrawUiMenuContext'
 import { DefaultActionsMenuContent } from './DefaultActionsMenuContent'
 
@@ -26,6 +27,7 @@ export const DefaultActionsMenu = memo(function DefaultActionsMenu({
 	const msg = useTranslation()
 	const breakpoint = useBreakpoint()
 	const isReadonlyMode = useReadonly()
+	const { orientation } = useTldrawUiOrientation()
 
 	const ref = useRef<HTMLDivElement>(null)
 	usePassThroughWheelEvents(ref)
@@ -52,11 +54,20 @@ export const DefaultActionsMenu = memo(function DefaultActionsMenu({
 					data-testid="actions-menu.button"
 					title={msg('actions-menu.title')}
 				>
-					<TldrawUiButtonIcon icon="dots-vertical" small />
+					<TldrawUiButtonIcon
+						icon={orientation === 'horizontal' ? 'dots-vertical' : 'dots-horizontal'}
+						small
+					/>
 				</TldrawUiToolbarButton>
 			</TldrawUiPopoverTrigger>
 			<TldrawUiPopoverContent
-				side={breakpoint >= PORTRAIT_BREAKPOINT.TABLET ? 'bottom' : 'top'}
+				side={
+					orientation === 'horizontal'
+						? breakpoint >= PORTRAIT_BREAKPOINT.TABLET
+							? 'bottom'
+							: 'top'
+						: 'right'
+				}
 				sideOffset={6}
 			>
 				<TldrawUiToolbar

package/src/lib/ui/components/{FollowingIndicator.tsx → DefaultFollowingIndicator.tsx}

@@ -1,6 +1,7 @@
 import { useEditor, usePresence, useValue } from '@tldraw/editor'
 
-export function FollowingIndicator() {
+/** @public @react */
+export function DefaultFollowingIndicator() {
 	const editor = useEditor()
 	const followingUserId = useValue('follow', () => editor.getInstanceState().followingUserId, [
 		editor,

package/src/lib/ui/components/InputModeMenu.tsx

@@ -0,0 +1,65 @@
+import { useEditor, useValue } from '@tldraw/editor'
+import { useUiEvents } from '../context/events'
+import { TldrawUiMenuCheckboxItem } from './primitives/menus/TldrawUiMenuCheckboxItem'
+import { TldrawUiMenuGroup } from './primitives/menus/TldrawUiMenuGroup'
+import { TldrawUiMenuSubmenu } from './primitives/menus/TldrawUiMenuSubmenu'
+
+const MODES = ['auto', 'trackpad', 'mouse'] as const
+
+/** @public @react */
+export function InputModeMenu() {
+	const editor = useEditor()
+	const trackEvent = useUiEvents()
+
+	const inputMode = useValue('inputMode', () => editor.user.getUserPreferences().inputMode, [
+		editor,
+	])
+	const wheelBehavior = useValue('wheelBehavior', () => editor.getCameraOptions().wheelBehavior, [
+		editor,
+	])
+
+	const isModeChecked = (mode: string) => {
+		if (mode === 'auto') {
+			return inputMode === null
+		}
+		return inputMode === mode
+	}
+
+	const getLabel = (mode: string, wheelBehavior: 'zoom' | 'pan' | 'none') => {
+		if (mode === 'auto') {
+			return `action.toggle-auto-${wheelBehavior}`
+		}
+
+		return mode === 'trackpad' ? 'action.toggle-trackpad' : 'action.toggle-mouse'
+	}
+
+	return (
+		<TldrawUiMenuSubmenu id="help menu input-mode" label="menu.input-mode">
+			<TldrawUiMenuGroup id="peripheral-mode">
+				{MODES.map((mode) => (
+					<TldrawUiMenuCheckboxItem
+						id={`peripheral-mode-${mode}`}
+						key={mode}
+						label={getLabel(mode, wheelBehavior)}
+						checked={isModeChecked(mode)}
+						readonlyOk
+						onSelect={() => {
+							trackEvent('input-mode', { source: 'menu', value: mode })
+							switch (mode) {
+								case 'auto':
+									editor.user.updateUserPreferences({ inputMode: null })
+									break
+								case 'trackpad':
+									editor.user.updateUserPreferences({ inputMode: 'trackpad' })
+									break
+								case 'mouse':
+									editor.user.updateUserPreferences({ inputMode: 'mouse' })
+									break
+							}
+						}}
+					/>
+				))}
+			</TldrawUiMenuGroup>
+		</TldrawUiMenuSubmenu>
+	)
+}

package/src/lib/ui/components/KeyboardShortcutsDialog/DefaultKeyboardShortcutsDialogContent.tsx

@@ -123,7 +123,7 @@ export function DefaultKeyboardShortcutsDialogContent() {
 				<TldrawUiMenuItem
 					id="text-header"
 					label="tool.rich-text-header"
-					kbd="cmd+shift+[[1-6]]"
+					kbd="cmd+alt+[[1-6]]"
 					onSelect={() => {
 						/* do nothing */
 					}}
@@ -157,7 +157,7 @@ export function DefaultKeyboardShortcutsDialogContent() {
 				<TldrawUiMenuItem
 					id="a11y-select-next-shape-direction"
 					label="a11y.select-shape-direction"
-					kbd="cmd+↑→↓←"
+					kbd="cmd+[[↑→↓←]]"
 					onSelect={() => {
 						/* do nothing */
 					}}
@@ -165,7 +165,7 @@ export function DefaultKeyboardShortcutsDialogContent() {
 				<TldrawUiMenuItem
 					id="a11y-select-next-shape-container"
 					label="a11y.enter-leave-container"
-					kbd="cmd+shift+↑→"
+					kbd="cmd+shift+[[↑→]]"
 					onSelect={() => {
 						/* do nothing */
 					}}
@@ -173,7 +173,7 @@ export function DefaultKeyboardShortcutsDialogContent() {
 				<TldrawUiMenuItem
 					id="a11y-pan-camera"
 					label="a11y.pan-camera"
-					kbd="[[Space]]+↑→↓←"
+					kbd="[[Space]]+[[↑→↓←]]"
 					onSelect={() => {
 						/* do nothing */
 					}}
@@ -197,7 +197,7 @@ export function DefaultKeyboardShortcutsDialogContent() {
 				<TldrawUiMenuItem
 					id="a11y-move-shape"
 					label="a11y.move-shape"
-					kbd="↑→↓←"
+					kbd="[[↑→↓←]]"
 					onSelect={() => {
 						/* do nothing */
 					}}
@@ -205,7 +205,7 @@ export function DefaultKeyboardShortcutsDialogContent() {
 				<TldrawUiMenuItem
 					id="a11y-move-shape-faster"
 					label="a11y.move-shape-faster"
-					kbd="shift+↑→↓←"
+					kbd="shift+[[↑→↓←]]"
 					onSelect={() => {
 						/* do nothing */
 					}}

package/src/lib/ui/components/LanguageMenu.tsx

@@ -18,6 +18,7 @@ export function LanguageMenu() {
 				{LANGUAGES.map(({ locale, label }) => (
 					<TldrawUiMenuCheckboxItem
 						id={`language-${locale}`}
+						lang={locale}
 						key={locale}
 						title={locale}
 						label={label}

package/src/lib/ui/components/MainMenu/DefaultMainMenuContent.tsx

@@ -2,6 +2,7 @@ import { useCanRedo, useCanUndo } from '../../hooks/menu-hooks'
 import { AccessibilityMenu } from '../AccessibilityMenu'
 import { ColorSchemeMenu } from '../ColorSchemeMenu'
 import { KeyboardShortcutsMenuItem } from '../HelpMenu/DefaultHelpMenuContent'
+import { InputModeMenu } from '../InputModeMenu'
 import { LanguageMenu } from '../LanguageMenu'
 import {
 	ClipboardMenuGroup,
@@ -164,6 +165,9 @@ export function PreferencesGroup() {
 					<TogglePasteAtCursorItem />
 					<ToggleDebugModeItem />
 				</TldrawUiMenuGroup>
+				<TldrawUiMenuGroup id="input-mode">
+					<InputModeMenu />
+				</TldrawUiMenuGroup>
 				<TldrawUiMenuGroup id="color-scheme">
 					<ColorSchemeMenu />
 				</TldrawUiMenuGroup>

package/src/lib/ui/components/Minimap/DefaultMinimap.tsx

@@ -159,7 +159,7 @@ export function DefaultMinimap() {
 				type: 'pointer',
 				target: 'canvas',
 				name: 'pointer_move',
-				...getPointerInfo(e),
+				...getPointerInfo(editor, e),
 				point: screenPoint,
 				isPen: editor.getInstanceState().isPenMode,
 			}
@@ -204,6 +204,7 @@ export function DefaultMinimap() {
 			<canvas
 				role="img"
 				aria-label={msg('navigation-zone.minimap')}
+				data-testid="minimap.canvas"
 				ref={rCanvas}
 				className="tlui-minimap__canvas"
 				onDoubleClick={onDoubleClick}

package/src/lib/ui/components/Minimap/MinimapManager.ts

@@ -46,10 +46,10 @@ export class MinimapManager {
 		const style = getComputedStyle(this.editor.getContainer())
 
 		return {
-			shapeFill: getRgba(style.getPropertyValue('--color-text-3').trim()),
-			selectFill: getRgba(style.getPropertyValue('--color-selected').trim()),
-			viewportFill: getRgba(style.getPropertyValue('--color-muted-1').trim()),
-			background: getRgba(style.getPropertyValue('--color-low').trim()),
+			shapeFill: getRgba(style.getPropertyValue('--tl-color-text-3').trim()),
+			selectFill: getRgba(style.getPropertyValue('--tl-color-selected').trim()),
+			viewportFill: getRgba(style.getPropertyValue('--tl-color-muted-1').trim()),
+			background: getRgba(style.getPropertyValue('--tl-color-low').trim()),
 		}
 	}
 

package/src/lib/ui/components/MobileStylePanel.tsx

@@ -17,12 +17,13 @@ import {
 	TldrawUiPopoverContent,
 	TldrawUiPopoverTrigger,
 } from './primitives/TldrawUiPopover'
+import { useTldrawUiOrientation } from './primitives/layout'
 
 /** @public @react */
 export function MobileStylePanel() {
 	const editor = useEditor()
 	const msg = useTranslation()
-
+	const { orientation } = useTldrawUiOrientation()
 	const relevantStyles = useRelevantStyles()
 	const color = relevantStyles?.get(DefaultColorStyle)
 	const theme = getDefaultColorTheme({ isDarkMode: editor.user.getIsDarkMode() })
@@ -56,7 +57,7 @@ export function MobileStylePanel() {
 					type="tool"
 					data-testid="mobile-styles.button"
 					style={{
-						color: disableStylePanel ? 'var(--color-muted-1)' : currentColor,
+						color: disableStylePanel ? 'var(--tl-color-muted-1)' : currentColor,
 					}}
 					title={msg('style-panel.title')}
 					disabled={disableStylePanel}
@@ -66,7 +67,7 @@ export function MobileStylePanel() {
 					/>
 				</TldrawUiButton>
 			</TldrawUiPopoverTrigger>
-			<TldrawUiPopoverContent side="top" align="end">
+			<TldrawUiPopoverContent side={orientation === 'horizontal' ? 'top' : 'right'} align="end">
 				{StylePanel && <StylePanel isMobile />}
 			</TldrawUiPopoverContent>
 		</TldrawUiPopover>

package/src/lib/ui/components/PageMenu/DefaultPageMenu.tsx

@@ -3,7 +3,6 @@ import {
 	TLPageId,
 	releasePointerCapture,
 	setPointerCapture,
-	stopEventPropagation,
 	tlenv,
 	useEditor,
 	useValue,
@@ -451,7 +450,7 @@ export const DefaultPageMenu = memo(function DefaultPageMenu() {
 											if (e.key === 'Enter') {
 												if (page.id === currentPage.id) {
 													toggleEditing()
-													stopEventPropagation(e)
+													editor.markEventAsHandled(e)
 												}
 											}
 										}}

package/src/lib/ui/components/StylePanel/DefaultStylePanel.tsx

@@ -1,18 +1,26 @@
-import { useEditor, usePassThroughWheelEvents, useValue } from '@tldraw/editor'
+import {
+	ReadonlySharedStyleMap,
+	useEditor,
+	usePassThroughWheelEvents,
+	useValue,
+} from '@tldraw/editor'
 import classNames from 'classnames'
 import { ReactNode, memo, useCallback, useEffect, useRef } from 'react'
 import { useRelevantStyles } from '../../hooks/useRelevantStyles'
 import { DefaultStylePanelContent } from './DefaultStylePanelContent'
+import { StylePanelContextProvider } from './StylePanelContext'
 
 /** @public */
 export interface TLUiStylePanelProps {
 	isMobile?: boolean
+	styles?: ReadonlySharedStyleMap | null
 	children?: ReactNode
 }
 
 /** @public @react */
 export const DefaultStylePanel = memo(function DefaultStylePanel({
 	isMobile,
+	styles,
 	children,
 }: TLUiStylePanelProps) {
 	const editor = useEditor()
@@ -21,15 +29,16 @@ export const DefaultStylePanel = memo(function DefaultStylePanel({
 	const ref = useRef<HTMLDivElement>(null)
 	usePassThroughWheelEvents(ref)
 
-	const styles = useRelevantStyles()
-
 	const handlePointerOut = useCallback(() => {
 		if (!isMobile) {
 			editor.updateInstanceState({ isChangingStyle: false })
 		}
 	}, [editor, isMobile])
 
-	const content = children ?? <DefaultStylePanelContent styles={styles} />
+	const defaultStyles = useRelevantStyles()
+	if (styles === undefined) {
+		styles = defaultStyles
+	}
 
 	useEffect(() => {
 		function handleKeyDown(event: KeyboardEvent) {
@@ -47,14 +56,19 @@ export const DefaultStylePanel = memo(function DefaultStylePanel({
 	}, [editor])
 
 	return (
-		<div
-			ref={ref}
-			className={classNames('tlui-style-panel', { 'tlui-style-panel__wrapper': !isMobile })}
-			data-ismobile={isMobile}
-			data-show-ui-labels={showUiLabels}
-			onPointerLeave={handlePointerOut}
-		>
-			{content}
-		</div>
+		styles && (
+			<div
+				ref={ref}
+				data-testid="style.panel"
+				className={classNames('tlui-style-panel', { 'tlui-style-panel__wrapper': !isMobile })}
+				data-ismobile={isMobile}
+				data-show-ui-labels={showUiLabels}
+				onPointerLeave={handlePointerOut}
+			>
+				<StylePanelContextProvider styles={styles}>
+					{children ?? <DefaultStylePanelContent />}
+				</StylePanelContextProvider>
+			</div>
+		)
 	)
 })