tldraw 3.16.0-internal.51e99e128bd4 → 3.16.0-internal.a478398270c6

package/src/lib/ui/components/primitives/TldrawUiSlider.tsx

@@ -13,7 +13,6 @@ export interface TLUiSliderProps {
 	onValueChange(value: number): void
 	onHistoryMark(id: string): void
 	'data-testid'?: string
-	ariaValueModifier?: number
 }
 
 /** @public @react */
@@ -27,7 +26,6 @@ export const TldrawUiSlider = React.forwardRef<HTMLDivElement, TLUiSliderProps>(
 		label,
 		onValueChange,
 		['data-testid']: testId,
-		ariaValueModifier = 1,
 	}: TLUiSliderProps,
 	ref
 ) {
@@ -83,10 +81,7 @@ export const TldrawUiSlider = React.forwardRef<HTMLDivElement, TLUiSliderProps>(
 				</_Slider.Track>
 				{value !== null && (
 					<_Slider.Thumb
-						aria-valuemin={(min ?? 0) * ariaValueModifier}
-						aria-valuenow={value * ariaValueModifier}
-						aria-valuemax={steps * ariaValueModifier}
-						aria-label={title + ' — ' + msg(label as TLUiTranslationKey)}
+						aria-label={msg('style-panel.opacity')}
 						className="tlui-slider__thumb"
 						dir="ltr"
 						ref={ref}

package/src/lib/ui/components/primitives/TldrawUiToolbar.tsx

@@ -1,8 +1,6 @@
 import classnames from 'classnames'
 import { Toolbar as _Toolbar } from 'radix-ui'
 import React from 'react'
-import { TldrawUiColumn, TldrawUiGrid, TldrawUiRow } from './layout'
-import { TldrawUiTooltip } from './TldrawUiTooltip'
 
 /** @public */
 export interface TLUiToolbarProps extends React.HTMLAttributes<HTMLDivElement> {
@@ -10,42 +8,20 @@ export interface TLUiToolbarProps extends React.HTMLAttributes<HTMLDivElement> {
 	className?: string
 	dir?: 'ltr' | 'rtl'
 	label: string
-	orientation?: 'horizontal' | 'vertical' | 'grid'
-	tooltipSide?: 'top' | 'right' | 'bottom' | 'left'
-}
-
-const LayoutByOrientation = {
-	horizontal: TldrawUiRow,
-	vertical: TldrawUiColumn,
-	grid: TldrawUiGrid,
 }
 
 /** @public @react */
 export const TldrawUiToolbar = React.forwardRef<HTMLDivElement, TLUiToolbarProps>(
-	(
-		{
-			children,
-			className,
-			label,
-			orientation = 'horizontal',
-			tooltipSide,
-			...props
-		}: TLUiToolbarProps,
-		ref
-	) => {
-		const Layout = LayoutByOrientation[orientation]
+	({ children, className, label, ...props }: TLUiToolbarProps, ref) => {
 		return (
-			<Layout asChild tooltipSide={tooltipSide}>
-				<_Toolbar.Root
-					ref={ref}
-					{...props}
-					className={classnames('tlui-toolbar', className)}
-					aria-label={label}
-					orientation={orientation === 'grid' ? 'horizontal' : orientation}
-				>
-					{children}
-				</_Toolbar.Root>
-			</Layout>
+			<_Toolbar.Root
+				ref={ref}
+				{...props}
+				className={classnames('tlui-toolbar-container', className)}
+				aria-label={label}
+			>
+				{children}
+			</_Toolbar.Root>
 		)
 	}
 )
@@ -58,30 +34,23 @@ export interface TLUiToolbarButtonProps extends React.HTMLAttributes<HTMLButtonE
 	disabled?: boolean
 	isActive?: boolean
 	type: 'icon' | 'tool' | 'menu'
-	tooltip?: string
 }
 
 /** @public @react */
 export const TldrawUiToolbarButton = React.forwardRef<HTMLButtonElement, TLUiToolbarButtonProps>(
-	({ asChild, children, type, isActive, tooltip, ...props }: TLUiToolbarButtonProps, ref) => {
-		const button = (
+	({ asChild, children, type, isActive, ...props }: TLUiToolbarButtonProps, ref) => {
+		return (
 			<_Toolbar.Button
 				ref={ref}
 				asChild={asChild}
 				draggable={false}
 				data-isactive={isActive}
 				{...props}
-				// The tooltip takes care of this.
-				title={undefined}
 				className={classnames('tlui-button', `tlui-button__${type}`, props.className)}
 			>
 				{children}
 			</_Toolbar.Button>
 		)
-
-		const tooltipContent = tooltip || props.title
-
-		return <TldrawUiTooltip content={tooltipContent}>{button}</TldrawUiTooltip>
 	}
 )
 
@@ -90,7 +59,6 @@ export interface TLUiToolbarToggleGroupProps extends React.HTMLAttributes<HTMLDi
 	children?: React.ReactNode
 	className?: string
 	dir?: 'ltr' | 'rtl'
-	value: any
 	// TODO: fix up this type later
 	defaultValue?: any
 	type: 'single' | 'multiple'
@@ -107,10 +75,6 @@ export const TldrawUiToolbarToggleGroup = ({
 		<_Toolbar.ToggleGroup
 			type={type}
 			{...props}
-			// TODO: this fixes a bug in Radix until they fix it.
-			// https://github.com/radix-ui/primitives/issues/3188
-			// https://github.com/radix-ui/primitives/pull/3189
-			role="radiogroup"
 			className={classnames('tlui-toolbar-toggle-group', className)}
 		>
 			{children}
@@ -124,7 +88,6 @@ export interface TLUiToolbarToggleItemProps extends React.HTMLAttributes<HTMLBut
 	className?: string
 	type: 'icon' | 'tool'
 	value: string
-	tooltip?: string
 }
 
 /** @public @react */
@@ -133,14 +96,11 @@ export const TldrawUiToolbarToggleItem = ({
 	className,
 	type,
 	value,
-	tooltip,
 	...props
 }: TLUiToolbarToggleItemProps) => {
-	const toggleItem = (
+	return (
 		<_Toolbar.ToggleItem
 			{...props}
-			// The tooltip takes care of this.
-			title={undefined}
 			className={classnames(
 				'tlui-button',
 				`tlui-button__${type}`,
@@ -152,8 +112,4 @@ export const TldrawUiToolbarToggleItem = ({
 			{children}
 		</_Toolbar.ToggleItem>
 	)
-
-	const tooltipContent = tooltip || props.title
-
-	return <TldrawUiTooltip content={tooltipContent}>{toggleItem}</TldrawUiTooltip>
 }

package/src/lib/ui/components/primitives/menus/TldrawUiMenuCheckboxItem.tsx

@@ -5,7 +5,7 @@ import { TLUiEventSource } from '../../../context/events'
 import { useReadonly } from '../../../hooks/useReadonly'
 import { TLUiTranslationKey } from '../../../hooks/useTranslation/TLUiTranslationKey'
 import { useTranslation } from '../../../hooks/useTranslation/useTranslation'
-import { TldrawUiIcon, TLUiIconJsx } from '../TldrawUiIcon'
+import { TldrawUiIcon } from '../TldrawUiIcon'
 import { TldrawUiKbd } from '../TldrawUiKbd'
 import { useTldrawUiMenuContext } from './TldrawUiMenuContext'
 
@@ -14,7 +14,7 @@ export interface TLUiMenuCheckboxItemProps<
 	TranslationKey extends string = string,
 	IconType extends string = string,
 > {
-	icon?: IconType | TLUiIconJsx
+	icon?: IconType
 	id: string
 	kbd?: string
 	title?: string

package/src/lib/ui/components/primitives/menus/TldrawUiMenuContext.tsx

@@ -3,6 +3,7 @@ import { TLUiEventSource } from '../../../context/events'
 
 /** @public */
 export type TLUiMenuContextType =
+	| 'panel'
 	| 'menu'
 	| 'small-icons'
 	| 'context-menu'

package/src/lib/ui/components/primitives/menus/TldrawUiMenuGroup.tsx

@@ -3,7 +3,6 @@ import { ReactNode } from 'react'
 import { unwrapLabel } from '../../../context/actions'
 import { TLUiTranslationKey } from '../../../hooks/useTranslation/TLUiTranslationKey'
 import { useTranslation } from '../../../hooks/useTranslation/useTranslation'
-import { TldrawUiColumn, TldrawUiGrid, TldrawUiRow, useTldrawUiOrientation } from '../layout'
 import { TldrawUiDropdownMenuGroup } from '../TldrawUiDropdownMenu'
 import { useTldrawUiMenuContext } from './TldrawUiMenuContext'
 
@@ -20,20 +19,26 @@ export interface TLUiMenuGroupProps<TranslationKey extends string = string> {
 
 /** @public @react */
 export function TldrawUiMenuGroup({ id, label, className, children }: TLUiMenuGroupProps) {
-	const menu = useTldrawUiMenuContext()
-	const { orientation } = useTldrawUiOrientation()
+	const { type: menuType, sourceId } = useTldrawUiMenuContext()
 	const msg = useTranslation()
-	const labelToUse = unwrapLabel(label, menu.type)
+	const labelToUse = unwrapLabel(label, menuType)
 	const labelStr = labelToUse ? msg(labelToUse as TLUiTranslationKey) : undefined
 
-	switch (menu.type) {
-		case 'menu': {
+	switch (menuType) {
+		case 'panel': {
 			return (
-				<TldrawUiDropdownMenuGroup
-					className={className}
-					data-testid={`${menu.sourceId}-group.${id}`}
+				<div
+					className={classNames('tlui-menu__group', className)}
+					data-testid={`${sourceId}-group.${id}`}
 				>
 					{children}
+				</div>
+			)
+		}
+		case 'menu': {
+			return (
+				<TldrawUiDropdownMenuGroup className={className} data-testid={`${sourceId}-group.${id}`}>
+					{children}
 				</TldrawUiDropdownMenuGroup>
 			)
 		}
@@ -42,7 +47,7 @@ export function TldrawUiMenuGroup({ id, label, className, children }: TLUiMenuGr
 				<div
 					dir="ltr"
 					className={classNames('tlui-menu__group', className)}
-					data-testid={`${menu.sourceId}-group.${id}`}
+					data-testid={`${sourceId}-group.${id}`}
 				>
 					{children}
 				</div>
@@ -51,30 +56,12 @@ export function TldrawUiMenuGroup({ id, label, className, children }: TLUiMenuGr
 		case 'keyboard-shortcuts': {
 			// todo: if groups need a label, let's give em a label
 			return (
-				<div className="tlui-shortcuts-dialog__group" data-testid={`${menu.sourceId}-group.${id}`}>
+				<div className="tlui-shortcuts-dialog__group" data-testid={`${sourceId}-group.${id}`}>
 					<h2 className="tlui-shortcuts-dialog__group__title">{labelStr}</h2>
 					<div className="tlui-shortcuts-dialog__group__content">{children}</div>
 				</div>
 			)
 		}
-		case 'toolbar': {
-			const Layout = orientation === 'horizontal' ? TldrawUiRow : TldrawUiColumn
-			return (
-				<Layout className="tlui-main-toolbar__group" data-testid={`${menu.sourceId}-group.${id}`}>
-					{children}
-				</Layout>
-			)
-		}
-		case 'toolbar-overflow': {
-			return (
-				<TldrawUiGrid
-					className="tlui-main-toolbar__group"
-					data-testid={`${menu.sourceId}-group.${id}`}
-				>
-					{children}
-				</TldrawUiGrid>
-			)
-		}
 		default: {
 			return children
 		}

package/src/lib/ui/components/primitives/menus/TldrawUiMenuItem.tsx

@@ -1,18 +1,9 @@
-import {
-	exhaustiveSwitchError,
-	getPointerInfo,
-	preventDefault,
-	TLPointerEventInfo,
-	useEditor,
-	Vec,
-	VecModel,
-} from '@tldraw/editor'
+import { exhaustiveSwitchError, preventDefault } from '@tldraw/editor'
 import { ContextMenu as _ContextMenu } from 'radix-ui'
-import { useMemo, useState } from 'react'
+import { useState } from 'react'
 import { unwrapLabel } from '../../../context/actions'
 import { TLUiEventSource } from '../../../context/events'
 import { useReadonly } from '../../../hooks/useReadonly'
-import { TLUiToolItem } from '../../../hooks/useTools'
 import { TLUiTranslationKey } from '../../../hooks/useTranslation/TLUiTranslationKey'
 import { useTranslation } from '../../../hooks/useTranslation/useTranslation'
 import { kbdStr } from '../../../kbd-utils'
@@ -21,10 +12,8 @@ import { TldrawUiButton } from '../Button/TldrawUiButton'
 import { TldrawUiButtonIcon } from '../Button/TldrawUiButtonIcon'
 import { TldrawUiButtonLabel } from '../Button/TldrawUiButtonLabel'
 import { TldrawUiDropdownMenuItem } from '../TldrawUiDropdownMenu'
-import { TLUiIconJsx } from '../TldrawUiIcon'
 import { TldrawUiKbd } from '../TldrawUiKbd'
 import { TldrawUiToolbarButton } from '../TldrawUiToolbar'
-import { tooltipManager } from '../TldrawUiTooltip'
 import { useTldrawUiMenuContext } from './TldrawUiMenuContext'
 
 /** @public */
@@ -36,11 +25,11 @@ export interface TLUiMenuItemProps<
 	/**
 	 * The icon to display on the item. Icons are only shown in certain menu types.
 	 */
-	icon?: IconType | TLUiIconJsx
+	icon?: IconType
 	/**
 	 * An icon to display to the left of the menu item.
 	 */
-	iconLeft?: IconType | TLUiIconJsx
+	iconLeft?: IconType
 	/**
 	 * The keyboard shortcut to display on the item.
 	 */
@@ -73,10 +62,6 @@ export interface TLUiMenuItemProps<
 	 * Whether the item is selected.
 	 */
 	isSelected?: boolean
-	/**
-	 * The function to call when the item is dragged. If this is provided, the item will be draggable.
-	 */
-	onDragStart?(source: TLUiEventSource, info: TLPointerEventInfo): void
 }
 
 /** @public @react */
@@ -95,7 +80,6 @@ export function TldrawUiMenuItem<
 	onSelect,
 	noClose,
 	isSelected,
-	onDragStart,
 }: TLUiMenuItemProps<TranslationKey, IconType>) {
 	const { type: menuType, sourceId } = useTldrawUiMenuContext()
 
@@ -120,6 +104,7 @@ export function TldrawUiMenuItem<
 						type="menu"
 						data-testid={`${sourceId}.${id}`}
 						disabled={disabled}
+						title={titleStr}
 						onClick={(e) => {
 							if (noClose) {
 								preventDefault(e)
@@ -145,6 +130,7 @@ export function TldrawUiMenuItem<
 			return (
 				<_ContextMenu.Item
 					dir="ltr"
+					title={titleStr}
 					draggable={false}
 					className="tlui-button tlui-button__menu"
 					data-testid={`${sourceId}.${id}`}
@@ -166,6 +152,20 @@ export function TldrawUiMenuItem<
 				</_ContextMenu.Item>
 			)
 		}
+		case 'panel': {
+			return (
+				<TldrawUiButton
+					data-testid={`${sourceId}.${id}`}
+					type="menu"
+					title={titleStr}
+					disabled={disabled}
+					onClick={() => onSelect(sourceId)}
+				>
+					<TldrawUiButtonLabel>{labelStr}</TldrawUiButtonLabel>
+					{spinner ? <Spinner /> : icon && <TldrawUiButtonIcon icon={icon} />}
+				</TldrawUiButton>
+			)
+		}
 		case 'small-icons':
 		case 'icons': {
 			return (
@@ -206,20 +206,6 @@ export function TldrawUiMenuItem<
 			)
 		}
 		case 'toolbar': {
-			if (onDragStart) {
-				return (
-					<DraggableToolbarButton
-						id={id}
-						icon={icon}
-						onSelect={onSelect}
-						onDragStart={onDragStart}
-						labelToUse={labelToUse}
-						titleStr={titleStr}
-						disabled={disabled}
-						isSelected={isSelected}
-					/>
-				)
-			}
 			return (
 				<TldrawUiToolbarButton
 					aria-label={labelStr}
@@ -232,6 +218,7 @@ export function TldrawUiMenuItem<
 						preventDefault(e)
 						onSelect('toolbar')
 					}}
+					role="option"
 					title={titleStr}
 					type="tool"
 				>
@@ -240,30 +227,17 @@ export function TldrawUiMenuItem<
 			)
 		}
 		case 'toolbar-overflow': {
-			if (onDragStart) {
-				return (
-					<DraggableToolbarButton
-						id={id}
-						icon={icon}
-						onSelect={onSelect}
-						onDragStart={onDragStart}
-						labelToUse={labelToUse}
-						titleStr={titleStr}
-						disabled={disabled}
-						isSelected={isSelected}
-						overflow
-					/>
-				)
-			}
 			return (
 				<TldrawUiToolbarButton
 					aria-label={labelStr}
 					aria-pressed={isSelected ? 'true' : 'false'}
 					isActive={isSelected}
+					className="tlui-button-grid__button"
 					data-testid={`tools.more.${id}`}
 					data-value={id}
 					disabled={disabled}
 					onClick={() => onSelect('toolbar')}
+					role="option"
 					title={titleStr}
 					type="icon"
 				>
@@ -276,178 +250,3 @@ export function TldrawUiMenuItem<
 		}
 	}
 }
-
-function useDraggableEvents(
-	onDragStart: TLUiToolItem['onDragStart'],
-	onSelect: TLUiToolItem['onSelect']
-) {
-	const editor = useEditor()
-	const events = useMemo(() => {
-		let state = { name: 'idle' } as
-			| {
-					name: 'idle'
-			  }
-			| {
-					name: 'pointing'
-					screenSpaceStart: VecModel
-			  }
-			| {
-					name: 'dragging'
-					screenSpaceStart: VecModel
-			  }
-			| {
-					name: 'dragged'
-			  }
-
-		function handlePointerDown(e: React.PointerEvent<HTMLButtonElement>) {
-			state = {
-				name: 'pointing',
-				screenSpaceStart: { x: e.clientX, y: e.clientY },
-			}
-
-			e.currentTarget.setPointerCapture(e.pointerId)
-		}
-
-		function handlePointerMove(e: React.PointerEvent<HTMLButtonElement>) {
-			if ((e as any).isSpecialRedispatchedEvent) return
-
-			if (state.name === 'pointing') {
-				const distanceSq = Vec.Dist2(state.screenSpaceStart, { x: e.clientX, y: e.clientY })
-				if (
-					distanceSq >
-					(editor.getInstanceState().isCoarsePointer
-						? editor.options.uiCoarseDragDistanceSquared
-						: editor.options.uiDragDistanceSquared)
-				) {
-					const screenSpaceStart = state.screenSpaceStart
-					state = {
-						name: 'dragging',
-						screenSpaceStart,
-					}
-
-					editor.run(() => {
-						editor.setCurrentTool('select')
-
-						// Set origin point
-						editor.dispatch({
-							type: 'pointer',
-							target: 'canvas',
-							name: 'pointer_down',
-							...getPointerInfo(e),
-							point: screenSpaceStart,
-						})
-
-						// Pointer down potentially selects shapes, so we need to deselect them.
-						editor.selectNone()
-
-						// start drag
-						onDragStart?.('toolbar', {
-							type: 'pointer',
-							target: 'canvas',
-							name: 'pointer_move',
-							...getPointerInfo(e),
-							point: screenSpaceStart,
-						})
-
-						tooltipManager.hideAllTooltips()
-						editor.getContainer().focus()
-					})
-				}
-			}
-		}
-
-		function handlePointerUp(e: React.PointerEvent<HTMLButtonElement>) {
-			if ((e as any).isSpecialRedispatchedEvent) return
-
-			e.currentTarget.releasePointerCapture(e.pointerId)
-
-			editor.dispatch({
-				type: 'pointer',
-				target: 'canvas',
-				name: 'pointer_up',
-				...getPointerInfo(e),
-			})
-		}
-
-		function handleClick() {
-			if (state.name === 'dragging' || state.name === 'dragged') {
-				state = { name: 'idle' }
-				return true
-			}
-
-			state = { name: 'idle' }
-			onSelect?.('toolbar')
-		}
-
-		return {
-			onPointerDown: handlePointerDown,
-			onPointerMove: handlePointerMove,
-			onPointerUp: handlePointerUp,
-			onClick: handleClick,
-		}
-	}, [onDragStart, editor, onSelect])
-
-	return events
-}
-
-function DraggableToolbarButton({
-	id,
-	labelToUse,
-	titleStr,
-	disabled,
-	isSelected,
-	icon,
-	onSelect,
-	onDragStart,
-	overflow,
-}: {
-	id: string
-	disabled: boolean
-	labelToUse?: string
-	titleStr?: string
-	isSelected?: boolean
-	icon: TLUiMenuItemProps['icon']
-	onSelect: TLUiMenuItemProps['onSelect']
-	onDragStart: TLUiMenuItemProps['onDragStart']
-	overflow?: boolean
-}) {
-	const events = useDraggableEvents(onDragStart, onSelect)
-
-	if (overflow) {
-		return (
-			<TldrawUiToolbarButton
-				aria-label={labelToUse}
-				aria-pressed={isSelected ? 'true' : 'false'}
-				isActive={isSelected}
-				className="tlui-button-grid__button"
-				data-testid={`tools.more.${id}`}
-				data-value={id}
-				disabled={disabled}
-				title={titleStr}
-				type="icon"
-				{...events}
-			>
-				<TldrawUiButtonIcon icon={icon!} />
-			</TldrawUiToolbarButton>
-		)
-	}
-
-	return (
-		<TldrawUiToolbarButton
-			aria-label={labelToUse}
-			aria-pressed={isSelected ? 'true' : 'false'}
-			data-testid={`tools.${id}`}
-			data-value={id}
-			disabled={disabled}
-			onTouchStart={(e) => {
-				preventDefault(e)
-				onSelect('toolbar')
-			}}
-			title={titleStr}
-			type="tool"
-			{...events}
-		>
-			<TldrawUiButtonIcon icon={icon!} />
-		</TldrawUiToolbarButton>
-	)
-}

package/src/lib/ui/context/TldrawUiContextProvider.tsx

@@ -1,7 +1,6 @@
 import { RecursivePartial, defaultUserPreferences, track, useMaybeEditor } from '@tldraw/editor'
 import { ReactNode } from 'react'
 import { TLUiAssetUrls, useDefaultUiAssetUrlsWithOverrides } from '../assetUrls'
-import { TldrawUiTooltipProvider } from '../components/primitives/TldrawUiTooltip'
 import { ToolsProvider } from '../hooks/useTools'
 import { TldrawUiTranslationProvider } from '../hooks/useTranslation/useTranslation'
 import {
@@ -73,28 +72,26 @@ export const TldrawUiContextProvider = track(function TldrawUiContextProvider({
 	const editor = useMaybeEditor()
 	return (
 		<MimeTypeContext.Provider value={mediaMimeTypes}>
-			<TldrawUiTooltipProvider>
-				<AssetUrlsProvider assetUrls={useDefaultUiAssetUrlsWithOverrides(assetUrls)}>
-					<TldrawUiTranslationProvider
-						overrides={useMergedTranslationOverrides(overrides)}
-						locale={editor?.user.getLocale() ?? defaultUserPreferences.locale}
-					>
-						<TldrawUiEventsProvider onEvent={onUiEvent}>
-							<TldrawUiToastsProvider>
-								<TldrawUiDialogsProvider context={'tla'}>
-									<TldrawUiA11yProvider>
-										<BreakPointProvider forceMobile={forceMobile}>
-											<TldrawUiComponentsProvider overrides={components}>
-												<InternalProviders overrides={overrides}>{children}</InternalProviders>
-											</TldrawUiComponentsProvider>
-										</BreakPointProvider>
-									</TldrawUiA11yProvider>
-								</TldrawUiDialogsProvider>
-							</TldrawUiToastsProvider>
-						</TldrawUiEventsProvider>
-					</TldrawUiTranslationProvider>
-				</AssetUrlsProvider>
-			</TldrawUiTooltipProvider>
+			<AssetUrlsProvider assetUrls={useDefaultUiAssetUrlsWithOverrides(assetUrls)}>
+				<TldrawUiTranslationProvider
+					overrides={useMergedTranslationOverrides(overrides)}
+					locale={editor?.user.getLocale() ?? defaultUserPreferences.locale}
+				>
+					<TldrawUiEventsProvider onEvent={onUiEvent}>
+						<TldrawUiToastsProvider>
+							<TldrawUiDialogsProvider context={'tla'}>
+								<TldrawUiA11yProvider>
+									<BreakPointProvider forceMobile={forceMobile}>
+										<TldrawUiComponentsProvider overrides={components}>
+											<InternalProviders overrides={overrides}>{children}</InternalProviders>
+										</TldrawUiComponentsProvider>
+									</BreakPointProvider>
+								</TldrawUiA11yProvider>
+							</TldrawUiDialogsProvider>
+						</TldrawUiToastsProvider>
+					</TldrawUiEventsProvider>
+				</TldrawUiTranslationProvider>
+			</AssetUrlsProvider>
 		</MimeTypeContext.Provider>
 	)
 })