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

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

@@ -148,22 +148,20 @@ export const useSelectedShapesAnnouncer = () => {
 			if (!editor) return
 
 			const isInSelecting = editor.isIn('select.idle')
-			if (isInSelecting) {
-				const selectedShapeIds = editor.getSelectedShapeIds()
-				if (selectedShapeIds !== rPrevSelectedShapeIds.current) {
-					rPrevSelectedShapeIds.current = selectedShapeIds
-					unsafe__withoutCapture(() => {
-						const a11yLive = generateShapeAnnouncementMessage({
-							editor,
-							selectedShapeIds,
-							msg,
-						})
-
-						if (a11yLive) {
-							a11y.announce({ msg: a11yLive })
-						}
+			const selectedShapeIds = editor.getSelectedShapeIds()
+			if (isInSelecting && selectedShapeIds !== rPrevSelectedShapeIds.current) {
+				rPrevSelectedShapeIds.current = selectedShapeIds
+				unsafe__withoutCapture(() => {
+					const a11yLive = generateShapeAnnouncementMessage({
+						editor,
+						selectedShapeIds,
+						msg,
 					})
-				}
+
+					if (a11yLive) {
+						a11y.announce({ msg: a11yLive })
+					}
+				})
 			}
 		},
 		[editor, a11y, msg]

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

@@ -11,7 +11,6 @@ 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'
 
@@ -27,7 +26,6 @@ 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)
@@ -54,28 +52,18 @@ export const DefaultActionsMenu = memo(function DefaultActionsMenu({
 					data-testid="actions-menu.button"
 					title={msg('actions-menu.title')}
 				>
-					<TldrawUiButtonIcon
-						icon={orientation === 'horizontal' ? 'dots-vertical' : 'dots-horizontal'}
-						small
-					/>
+					<TldrawUiButtonIcon icon="dots-vertical" small />
 				</TldrawUiToolbarButton>
 			</TldrawUiPopoverTrigger>
 			<TldrawUiPopoverContent
-				side={
-					orientation === 'horizontal'
-						? breakpoint >= PORTRAIT_BREAKPOINT.TABLET
-							? 'bottom'
-							: 'top'
-						: 'right'
-				}
+				side={breakpoint >= PORTRAIT_BREAKPOINT.TABLET ? 'bottom' : 'top'}
 				sideOffset={6}
 			>
 				<TldrawUiToolbar
 					ref={ref}
 					label={msg('actions-menu.title')}
-					className="tlui-actions-menu"
+					className="tlui-actions-menu tlui-buttons__grid"
 					data-testid="actions-menu.content"
-					orientation="grid"
 				>
 					<TldrawUiMenuContextProvider type="icons" sourceId="actions-menu">
 						{content}

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

@@ -5,7 +5,6 @@ import { useBreakpoint } from '../context/breakpoints'
 import { useTldrawUiComponents } from '../context/components'
 import { useTranslation } from '../hooks/useTranslation/useTranslation'
 import { TldrawUiToolbar } from './primitives/TldrawUiToolbar'
-import { TldrawUiRow } from './primitives/layout'
 
 /** @public @react */
 export const DefaultMenuPanel = memo(function MenuPanel() {
@@ -33,16 +32,16 @@ export const DefaultMenuPanel = memo(function MenuPanel() {
 
 	return (
 		<nav ref={ref} className="tlui-menu-zone">
-			<TldrawUiRow>
+			<div className="tlui-buttons__horizontal">
 				{MainMenu && <MainMenu />}
 				{PageMenu && !isSinglePageMode && <PageMenu />}
 				{showQuickActions ? (
-					<TldrawUiToolbar orientation="horizontal" label={msg('actions-menu.title')}>
+					<TldrawUiToolbar className="tlui-buttons__horizontal" label={msg('actions-menu.title')}>
 						{QuickActions && <QuickActions />}
 						{ActionsMenu && <ActionsMenu />}
 					</TldrawUiToolbar>
 				) : null}
-			</TldrawUiRow>
+			</div>
 		</nav>
 	)
 })

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

@@ -210,49 +210,9 @@ export function DefaultKeyboardShortcutsDialogContent() {
 						/* do nothing */
 					}}
 				/>
-				<TldrawUiMenuItem
-					id="a11y-rotate-shape-cw"
-					label="a11y.rotate-shape-cw"
-					kbd="shift+﹥"
-					onSelect={() => {
-						/* do nothing */
-					}}
-				/>
-				<TldrawUiMenuItem
-					id="a11y-rotate-shape-cw-fine"
-					label="a11y.rotate-shape-cw-fine"
-					kbd="shift+alt+﹥"
-					onSelect={() => {
-						/* do nothing */
-					}}
-				/>
-				<TldrawUiMenuItem
-					id="a11y-rotate-shape-ccw"
-					label="a11y.rotate-shape-ccw"
-					kbd="shift+﹤"
-					onSelect={() => {
-						/* do nothing */
-					}}
-				/>
-				<TldrawUiMenuItem
-					id="a11y-rotate-shape-ccw-fine"
-					label="a11y.rotate-shape-ccw-fine"
-					kbd="shift+alt+﹤"
-					onSelect={() => {
-						/* do nothing */
-					}}
-				/>
 				<TldrawUiMenuActionItem actionId="enlarge-shapes" />
 				<TldrawUiMenuActionItem actionId="shrink-shapes" />
 				<TldrawUiMenuActionItem actionId="a11y-repeat-shape-announce" />
-				<TldrawUiMenuItem
-					id="a11y-open-keyboard-shortcuts"
-					label="a11y.open-keyboard-shortcuts"
-					kbd="cmd+alt+/"
-					onSelect={() => {
-						/* do nothing */
-					}}
-				/>
 			</TldrawUiMenuGroup>
 			{showCollaborationUi && (
 				<TldrawUiMenuGroup label="shortcuts-dialog.collaboration" id="collaboration">

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

@@ -1,5 +1,4 @@
 import { useCanRedo, useCanUndo } from '../../hooks/menu-hooks'
-import { AccessibilityMenu } from '../AccessibilityMenu'
 import { ColorSchemeMenu } from '../ColorSchemeMenu'
 import { KeyboardShortcutsMenuItem } from '../HelpMenu/DefaultHelpMenuContent'
 import { LanguageMenu } from '../LanguageMenu'
@@ -22,6 +21,7 @@ import {
 	ToggleGridItem,
 	ToggleLockMenuItem,
 	TogglePasteAtCursorItem,
+	ToggleReduceMotionItem,
 	ToggleSnapModeItem,
 	ToggleToolLockItem,
 	ToggleTransparentBgMenuItem,
@@ -160,6 +160,7 @@ export function PreferencesGroup() {
 					<ToggleWrapModeItem />
 					<ToggleFocusModeItem />
 					<ToggleEdgeScrollingItem />
+					<ToggleReduceMotionItem />
 					<ToggleDynamicSizeModeItem />
 					<TogglePasteAtCursorItem />
 					<ToggleDebugModeItem />
@@ -167,9 +168,6 @@ export function PreferencesGroup() {
 				<TldrawUiMenuGroup id="color-scheme">
 					<ColorSchemeMenu />
 				</TldrawUiMenuGroup>
-				<TldrawUiMenuGroup id="accessibility-menu">
-					<AccessibilityMenu />
-				</TldrawUiMenuGroup>
 			</TldrawUiMenuSubmenu>
 			<LanguageMenu />
 			<KeyboardShortcutsMenuItem />

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('--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()),
+			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()),
 		}
 	}
 

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

@@ -1,7 +1,6 @@
 import {
 	DefaultColorStyle,
 	TLDefaultColorStyle,
-	getColorValue,
 	getDefaultColorTheme,
 	useEditor,
 	useValue,
@@ -17,20 +16,18 @@ 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() })
-	const currentColor =
-		color?.type === 'shared'
-			? getColorValue(theme, color.value as TLDefaultColorStyle, 'solid')
-			: getColorValue(theme, 'black', 'solid')
+	const currentColor = (
+		color?.type === 'shared' ? theme[color.value as TLDefaultColorStyle] : theme.black
+	).solid
 
 	const disableStylePanel = useValue(
 		'disable style panel',
@@ -57,7 +54,7 @@ export function MobileStylePanel() {
 					type="tool"
 					data-testid="mobile-styles.button"
 					style={{
-						color: disableStylePanel ? 'var(--tl-color-muted-1)' : currentColor,
+						color: disableStylePanel ? 'var(--color-muted-1)' : currentColor,
 					}}
 					title={msg('style-panel.title')}
 					disabled={disableStylePanel}
@@ -67,7 +64,7 @@ export function MobileStylePanel() {
 					/>
 				</TldrawUiButton>
 			</TldrawUiPopoverTrigger>
-			<TldrawUiPopoverContent side={orientation === 'horizontal' ? 'top' : 'right'} align="end">
+			<TldrawUiPopoverContent side="top" align="end">
 				{StylePanel && <StylePanel isMobile />}
 			</TldrawUiPopoverContent>
 		</TldrawUiPopover>

package/src/lib/ui/components/NavigationPanel/DefaultNavigationPanel.tsx

@@ -33,7 +33,7 @@ export const DefaultNavigationPanel = memo(function DefaultNavigationPanel() {
 
 	return (
 		<div ref={ref} className="tlui-navigation-panel">
-			<TldrawUiToolbar orientation="horizontal" label={msg('navigation-zone.title')}>
+			<TldrawUiToolbar className="tlui-buttons__horizontal" label={msg('navigation-zone.title')}>
 				{ZoomMenu && breakpoint < PORTRAIT_BREAKPOINT.TABLET ? (
 					<ZoomMenu />
 				) : (
@@ -45,7 +45,7 @@ export const DefaultNavigationPanel = memo(function DefaultNavigationPanel() {
 								title={`${msg(unwrapLabel(actions['zoom-out'].label))} ${kbdStr(actions['zoom-out'].kbd!)}`}
 								onClick={() => actions['zoom-out'].onSelect('navigation-zone')}
 							>
-								<TldrawUiButtonIcon small icon="minus" />
+								<TldrawUiButtonIcon icon="minus" />
 							</TldrawUiToolbarButton>
 						)}
 						{ZoomMenu && <ZoomMenu key="zoom-menu" />}
@@ -56,7 +56,7 @@ export const DefaultNavigationPanel = memo(function DefaultNavigationPanel() {
 								title={`${msg(unwrapLabel(actions['zoom-in'].label))} ${kbdStr(actions['zoom-in'].kbd!)}`}
 								onClick={() => actions['zoom-in'].onSelect('navigation-zone')}
 							>
-								<TldrawUiButtonIcon small icon="plus" />
+								<TldrawUiButtonIcon icon="plus" />
 							</TldrawUiToolbarButton>
 						)}
 						{Minimap && (
@@ -64,9 +64,10 @@ export const DefaultNavigationPanel = memo(function DefaultNavigationPanel() {
 								type="icon"
 								data-testid="minimap.toggle-button"
 								title={msg('navigation-zone.toggle-minimap')}
+								className="tlui-navigation-panel__toggle"
 								onClick={toggleMinimap}
 							>
-								<TldrawUiButtonIcon small icon={collapsed ? 'chevron-right' : 'chevron-left'} />
+								<TldrawUiButtonIcon icon={collapsed ? 'chevrons-ne' : 'chevrons-sw'} />
 							</TldrawUiToolbarButton>
 						)}
 					</>

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

@@ -24,7 +24,6 @@ import {
 	TldrawUiPopoverContent,
 	TldrawUiPopoverTrigger,
 } from '../primitives/TldrawUiPopover'
-import { TldrawUiRow } from '../primitives/layout'
 import { PageItemInput } from './PageItemInput'
 import { PageItemSubmenu } from './PageItemSubmenu'
 import { onMovePage } from './edit-pages-shared'
@@ -330,7 +329,7 @@ export const DefaultPageMenu = memo(function DefaultPageMenu() {
 					<div className="tlui-page-menu__header">
 						<div className="tlui-page-menu__header__title">{msg('page-menu.title')}</div>
 						{!isReadonlyMode && (
-							<TldrawUiRow>
+							<div className="tlui-buttons__horizontal">
 								<TldrawUiButton
 									type="icon"
 									data-testid="page-menu.edit"
@@ -352,7 +351,7 @@ export const DefaultPageMenu = memo(function DefaultPageMenu() {
 								>
 									<TldrawUiButtonIcon icon="plus" />
 								</TldrawUiButton>
-							</TldrawUiRow>
+							</div>
 						)}
 					</div>
 					<div

package/src/lib/ui/components/SharePanel/PeopleMenuItem.tsx

@@ -5,7 +5,6 @@ import { useTranslation } from '../../hooks/useTranslation/useTranslation'
 import { TldrawUiButton } from '../primitives/Button/TldrawUiButton'
 import { TldrawUiButtonIcon } from '../primitives/Button/TldrawUiButtonIcon'
 import { TldrawUiIcon } from '../primitives/TldrawUiIcon'
-import { TldrawUiRow } from '../primitives/layout'
 
 export const PeopleMenuItem = track(function PeopleMenuItem({ userId }: { userId: string }) {
 	const editor = useEditor()
@@ -30,8 +29,8 @@ export const PeopleMenuItem = track(function PeopleMenuItem({ userId }: { userId
 	if (!presence) return null
 
 	return (
-		<TldrawUiRow
-			className="tlui-people-menu__item"
+		<div
+			className="tlui-people-menu__item tlui-buttons__horizontal"
 			data-follow={youAreFollowingThem || theyAreFollowingYou}
 		>
 			<TldrawUiButton
@@ -62,6 +61,6 @@ export const PeopleMenuItem = track(function PeopleMenuItem({ userId }: { userId
 					icon={theyAreFollowingYou ? 'leading' : youAreFollowingThem ? 'following' : 'follow'}
 				/>
 			</TldrawUiButton>
-		</TldrawUiRow>
+		</div>
 	)
 })

package/src/lib/ui/components/SharePanel/UserPresenceColorPicker.tsx

@@ -5,7 +5,6 @@ import { useUiEvents } from '../../context/events'
 import { useTranslation } from '../../hooks/useTranslation/useTranslation'
 import { TldrawUiButton } from '../primitives/Button/TldrawUiButton'
 import { TldrawUiButtonIcon } from '../primitives/Button/TldrawUiButtonIcon'
-import { TldrawUiGrid } from '../primitives/layout'
 
 export const UserPresenceColorPicker = track(function UserPresenceColorPicker() {
 	const editor = useEditor()
@@ -101,7 +100,7 @@ export const UserPresenceColorPicker = track(function UserPresenceColorPicker()
 					side="left"
 					sideOffset={8}
 				>
-					<TldrawUiGrid>
+					<div className={'tlui-buttons__grid'}>
 						{USER_COLORS.map((item: string) => (
 							<TldrawUiButton
 								type="icon"
@@ -111,6 +110,7 @@ export const UserPresenceColorPicker = track(function UserPresenceColorPicker()
 								aria-label={item}
 								isActive={value === item}
 								title={item}
+								className={'tlui-button-grid__button'}
 								style={{ color: item }}
 								onPointerEnter={handleButtonPointerEnter}
 								onPointerDown={handleButtonPointerDown}
@@ -120,7 +120,7 @@ export const UserPresenceColorPicker = track(function UserPresenceColorPicker()
 								<TldrawUiButtonIcon icon="color" />
 							</TldrawUiButton>
 						))}
-					</TldrawUiGrid>
+					</div>
 				</_Popover.Content>
 			</_Popover.Portal>
 		</_Popover.Root>

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

@@ -1,4 +1,3 @@
-import { DefaultSpinner } from '@tldraw/editor'
 import React from 'react'
 import { useTranslation } from '../hooks/useTranslation/useTranslation'
 
@@ -6,5 +5,28 @@ import { useTranslation } from '../hooks/useTranslation/useTranslation'
 export function Spinner(props: React.SVGProps<SVGSVGElement>) {
 	const msg = useTranslation()
 
-	return <DefaultSpinner aria-label={msg('app.loading')} {...props} />
+	return (
+		<svg
+			width={16}
+			height={16}
+			viewBox="0 0 16 16"
+			{...props}
+			aria-label={msg('app.loading')}
+			aria-hidden="false"
+		>
+			<g strokeWidth={2} fill="none" fillRule="evenodd">
+				<circle strokeOpacity={0.25} cx={8} cy={8} r={7} stroke="currentColor" />
+				<path strokeLinecap="round" d="M15 8c0-4.5-4.5-7-7-7" stroke="currentColor">
+					<animateTransform
+						attributeName="transform"
+						type="rotate"
+						from="0 8 8"
+						to="360 8 8"
+						dur="1s"
+						repeatCount="indefinite"
+					/>
+				</path>
+			</g>
+		</svg>
+	)
 }

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

@@ -1,4 +1,4 @@
-import { useEditor, usePassThroughWheelEvents, useValue } from '@tldraw/editor'
+import { useEditor, usePassThroughWheelEvents } from '@tldraw/editor'
 import classNames from 'classnames'
 import { ReactNode, memo, useCallback, useEffect, useRef } from 'react'
 import { useRelevantStyles } from '../../hooks/useRelevantStyles'
@@ -16,7 +16,6 @@ export const DefaultStylePanel = memo(function DefaultStylePanel({
 	children,
 }: TLUiStylePanelProps) {
 	const editor = useEditor()
-	const showUiLabels = useValue('showUiLabels', () => editor.user.getShowUiLabels(), [editor])
 
 	const ref = useRef<HTMLDivElement>(null)
 	usePassThroughWheelEvents(ref)
@@ -51,7 +50,6 @@ export const DefaultStylePanel = memo(function DefaultStylePanel({
 			ref={ref}
 			className={classNames('tlui-style-panel', { 'tlui-style-panel__wrapper': !isMobile })}
 			data-ismobile={isMobile}
-			data-show-ui-labels={showUiLabels}
 			onPointerLeave={handlePointerOut}
 		>
 			{content}