tldraw 3.16.0-next.34fddf633325 → 3.16.0-next.b88d494af370

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,18 +54,28 @@ 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
 					ref={ref}
 					label={msg('actions-menu.title')}
-					className="tlui-actions-menu tlui-buttons__grid"
+					className="tlui-actions-menu"
 					data-testid="actions-menu.content"
+					orientation="grid"
 				>
 					<TldrawUiMenuContextProvider type="icons" sourceId="actions-menu">
 						{content}

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

@@ -5,6 +5,7 @@ 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() {
@@ -32,16 +33,16 @@ export const DefaultMenuPanel = memo(function MenuPanel() {
 
 	return (
 		<nav ref={ref} className="tlui-menu-zone">
-			<div className="tlui-buttons__horizontal">
+			<TldrawUiRow>
 				{MainMenu && <MainMenu />}
 				{PageMenu && !isSinglePageMode && <PageMenu />}
 				{showQuickActions ? (
-					<TldrawUiToolbar className="tlui-buttons__horizontal" label={msg('actions-menu.title')}>
+					<TldrawUiToolbar orientation="horizontal" label={msg('actions-menu.title')}>
 						{QuickActions && <QuickActions />}
 						{ActionsMenu && <ActionsMenu />}
 					</TldrawUiToolbar>
 				) : null}
-			</div>
+			</TldrawUiRow>
 		</nav>
 	)
 })

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

@@ -1,6 +1,7 @@
 import {
 	DefaultColorStyle,
 	TLDefaultColorStyle,
+	getColorValue,
 	getDefaultColorTheme,
 	useEditor,
 	useValue,
@@ -16,18 +17,20 @@ 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' ? theme[color.value as TLDefaultColorStyle] : theme.black
-	).solid
+	const currentColor =
+		color?.type === 'shared'
+			? getColorValue(theme, color.value as TLDefaultColorStyle, 'solid')
+			: getColorValue(theme, 'black', 'solid')
 
 	const disableStylePanel = useValue(
 		'disable style panel',
@@ -54,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}
@@ -64,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/NavigationPanel/DefaultNavigationPanel.tsx

@@ -33,7 +33,7 @@ export const DefaultNavigationPanel = memo(function DefaultNavigationPanel() {
 
 	return (
 		<div ref={ref} className="tlui-navigation-panel">
-			<TldrawUiToolbar className="tlui-buttons__horizontal" label={msg('navigation-zone.title')}>
+			<TldrawUiToolbar orientation="horizontal" label={msg('navigation-zone.title')}>
 				{ZoomMenu && breakpoint < PORTRAIT_BREAKPOINT.TABLET ? (
 					<ZoomMenu />
 				) : (

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

@@ -24,6 +24,7 @@ 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'
@@ -329,7 +330,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 && (
-							<div className="tlui-buttons__horizontal">
+							<TldrawUiRow>
 								<TldrawUiButton
 									type="icon"
 									data-testid="page-menu.edit"
@@ -351,7 +352,7 @@ export const DefaultPageMenu = memo(function DefaultPageMenu() {
 								>
 									<TldrawUiButtonIcon icon="plus" />
 								</TldrawUiButton>
-							</div>
+							</TldrawUiRow>
 						)}
 					</div>
 					<div

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

@@ -5,6 +5,7 @@ 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()
@@ -29,8 +30,8 @@ export const PeopleMenuItem = track(function PeopleMenuItem({ userId }: { userId
 	if (!presence) return null
 
 	return (
-		<div
-			className="tlui-people-menu__item tlui-buttons__horizontal"
+		<TldrawUiRow
+			className="tlui-people-menu__item"
 			data-follow={youAreFollowingThem || theyAreFollowingYou}
 		>
 			<TldrawUiButton
@@ -61,6 +62,6 @@ export const PeopleMenuItem = track(function PeopleMenuItem({ userId }: { userId
 					icon={theyAreFollowingYou ? 'leading' : youAreFollowingThem ? 'following' : 'follow'}
 				/>
 			</TldrawUiButton>
-		</div>
+		</TldrawUiRow>
 	)
 })

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

@@ -5,6 +5,7 @@ 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()
@@ -100,7 +101,7 @@ export const UserPresenceColorPicker = track(function UserPresenceColorPicker()
 					side="left"
 					sideOffset={8}
 				>
-					<div className={'tlui-buttons__grid'}>
+					<TldrawUiGrid>
 						{USER_COLORS.map((item: string) => (
 							<TldrawUiButton
 								type="icon"
@@ -110,7 +111,6 @@ 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>
 						))}
-					</div>
+					</TldrawUiGrid>
 				</_Popover.Content>
 			</_Popover.Portal>
 		</_Popover.Root>

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

@@ -139,7 +139,7 @@ export function CommonStylePickerSet({ styles, theme }: ThemeStylePickerSetProps
 						{showUiLabels && (
 							<StylePanelSubheading>{msg('style-panel.color')}</StylePanelSubheading>
 						)}
-						<TldrawUiToolbar label={msg('style-panel.color')}>
+						<TldrawUiToolbar orientation="horizontal" label={msg('style-panel.color')}>
 							<TldrawUiButtonPicker
 								title={msg('style-panel.color')}
 								uiType="color"
@@ -162,7 +162,7 @@ export function CommonStylePickerSet({ styles, theme }: ThemeStylePickerSetProps
 							{showUiLabels && (
 								<StylePanelSubheading>{msg('style-panel.fill')}</StylePanelSubheading>
 							)}
-							<TldrawUiToolbar label={msg('style-panel.fill')}>
+							<TldrawUiToolbar orientation="horizontal" label={msg('style-panel.fill')}>
 								<TldrawUiButtonPicker
 									title={msg('style-panel.fill')}
 									uiType="fill"
@@ -181,7 +181,7 @@ export function CommonStylePickerSet({ styles, theme }: ThemeStylePickerSetProps
 							{showUiLabels && (
 								<StylePanelSubheading>{msg('style-panel.dash')}</StylePanelSubheading>
 							)}
-							<TldrawUiToolbar label={msg('style-panel.dash')}>
+							<TldrawUiToolbar orientation="horizontal" label={msg('style-panel.dash')}>
 								<TldrawUiButtonPicker
 									title={msg('style-panel.dash')}
 									uiType="dash"
@@ -200,7 +200,7 @@ export function CommonStylePickerSet({ styles, theme }: ThemeStylePickerSetProps
 							{showUiLabels && (
 								<StylePanelSubheading>{msg('style-panel.size')}</StylePanelSubheading>
 							)}
-							<TldrawUiToolbar label={msg('style-panel.size')}>
+							<TldrawUiToolbar orientation="horizontal" label={msg('style-panel.size')}>
 								<TldrawUiButtonPicker
 									title={msg('style-panel.size')}
 									uiType="size"
@@ -249,7 +249,7 @@ export function TextStylePickerSet({ theme, styles }: ThemeStylePickerSetProps)
 			{font === undefined ? null : (
 				<>
 					{labelStr && <StylePanelSubheading>{labelStr}</StylePanelSubheading>}
-					<TldrawUiToolbar label={msg('style-panel.font')}>
+					<TldrawUiToolbar orientation="horizontal" label={msg('style-panel.font')}>
 						<TldrawUiButtonPicker
 							title={msg('style-panel.font')}
 							uiType="font"
@@ -267,7 +267,7 @@ export function TextStylePickerSet({ theme, styles }: ThemeStylePickerSetProps)
 			{textAlign === undefined ? null : (
 				<>
 					{showUiLabels && <StylePanelSubheading>{msg('style-panel.align')}</StylePanelSubheading>}
-					<TldrawUiToolbar label={msg('style-panel.align')} className="tlui-style-panel__row">
+					<TldrawUiToolbar orientation="horizontal" label={msg('style-panel.align')}>
 						<TldrawUiButtonPicker
 							title={msg('style-panel.align')}
 							uiType="align"
@@ -278,16 +278,14 @@ export function TextStylePickerSet({ theme, styles }: ThemeStylePickerSetProps)
 							theme={theme}
 							onHistoryMark={onHistoryMark}
 						/>
-						<div className="tlui-style-panel__row__extra-button">
-							<TldrawUiToolbarButton
-								type="icon"
-								title={msg('style-panel.vertical-align')}
-								data-testid="vertical-align"
-								disabled
-							>
-								<TldrawUiButtonIcon icon="vertical-align-middle" />
-							</TldrawUiToolbarButton>
-						</div>
+						<TldrawUiToolbarButton
+							type="icon"
+							title={msg('style-panel.vertical-align')}
+							data-testid="vertical-align"
+							disabled
+						>
+							<TldrawUiButtonIcon icon="vertical-align-middle" />
+						</TldrawUiToolbarButton>
 					</TldrawUiToolbar>
 				</>
 			)}
@@ -297,7 +295,7 @@ export function TextStylePickerSet({ theme, styles }: ThemeStylePickerSetProps)
 					{showUiLabels && (
 						<StylePanelSubheading>{msg('style-panel.label-align')}</StylePanelSubheading>
 					)}
-					<TldrawUiToolbar label={msg('style-panel.label-align')} className="tlui-style-panel__row">
+					<TldrawUiToolbar orientation="horizontal" label={msg('style-panel.label-align')}>
 						<TldrawUiButtonPicker
 							title={msg('style-panel.label-align')}
 							uiType="align"
@@ -308,29 +306,27 @@ export function TextStylePickerSet({ theme, styles }: ThemeStylePickerSetProps)
 							theme={theme}
 							onHistoryMark={onHistoryMark}
 						/>
-						<div className="tlui-style-panel__row__extra-button">
-							{verticalLabelAlign === undefined ? (
-								<TldrawUiToolbarButton
-									type="icon"
-									title={msg('style-panel.vertical-align')}
-									data-testid="vertical-align"
-									disabled
-								>
-									<TldrawUiButtonIcon icon="vertical-align-middle" />
-								</TldrawUiToolbarButton>
-							) : (
-								<DropdownPicker
-									type="icon"
-									id="geo-vertical-alignment"
-									uiType="verticalAlign"
-									stylePanelType="vertical-align"
-									style={DefaultVerticalAlignStyle}
-									items={STYLES.verticalAlign}
-									value={verticalLabelAlign}
-									onValueChange={handleValueChange}
-								/>
-							)}
-						</div>
+						{verticalLabelAlign === undefined ? (
+							<TldrawUiToolbarButton
+								type="icon"
+								title={msg('style-panel.vertical-align')}
+								data-testid="vertical-align"
+								disabled
+							>
+								<TldrawUiButtonIcon icon="vertical-align-middle" />
+							</TldrawUiToolbarButton>
+						) : (
+							<DropdownPicker
+								type="icon"
+								id="geo-vertical-alignment"
+								uiType="verticalAlign"
+								stylePanelType="vertical-align"
+								style={DefaultVerticalAlignStyle}
+								items={STYLES.verticalAlign}
+								value={verticalLabelAlign}
+								onValueChange={handleValueChange}
+							/>
+						)}
 					</TldrawUiToolbar>
 				</>
 			)}
@@ -348,7 +344,7 @@ export function GeoStylePickerSet({ styles }: StylePickerSetProps) {
 	}
 
 	return (
-		<TldrawUiToolbar label={msg('style-panel.geo')}>
+		<TldrawUiToolbar orientation="horizontal" label={msg('style-panel.geo')}>
 			<DropdownPicker
 				id="geo"
 				type="menu"
@@ -374,7 +370,7 @@ export function SplineStylePickerSet({ styles }: StylePickerSetProps) {
 	}
 
 	return (
-		<TldrawUiToolbar label={msg('style-panel.spline')}>
+		<TldrawUiToolbar orientation="horizontal" label={msg('style-panel.spline')}>
 			<DropdownPicker
 				id="spline"
 				type="menu"
@@ -400,7 +396,7 @@ export function ArrowStylePickerSet({ styles }: StylePickerSetProps) {
 	}
 
 	return (
-		<TldrawUiToolbar label={msg('style-panel.arrow-kind')}>
+		<TldrawUiToolbar orientation="horizontal" label={msg('style-panel.arrow-kind')}>
 			<DropdownPicker
 				id="arrow-kind"
 				type="menu"

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

@@ -68,7 +68,7 @@ function DoubleDropdownPickerInner<T extends string>({
 			<div title={msg(label)} className="tlui-style-panel__double-select-picker-label">
 				{msg(label)}
 			</div>
-			<TldrawUiToolbar label={msg(label)} className="tlui-buttons__horizontal">
+			<TldrawUiToolbar orientation="horizontal" label={msg(label)}>
 				<TldrawUiPopover id={idA} open={isOpenA} onOpenChange={setIsOpenA}>
 					<TldrawUiPopoverTrigger>
 						<TldrawUiToolbarButton
@@ -86,7 +86,7 @@ function DoubleDropdownPickerInner<T extends string>({
 						</TldrawUiToolbarButton>
 					</TldrawUiPopoverTrigger>
 					<TldrawUiPopoverContent side="left" align="center" sideOffset={80} alignOffset={0}>
-						<TldrawUiToolbar label={msg(labelA)} className="tlui-buttons__grid">
+						<TldrawUiToolbar orientation="grid" label={msg(labelA)}>
 							<TldrawUiMenuContextProvider type="icons" sourceId="style-panel">
 								{itemsA.map((item) => {
 									return (
@@ -126,7 +126,7 @@ function DoubleDropdownPickerInner<T extends string>({
 						</TldrawUiToolbarButton>
 					</TldrawUiPopoverTrigger>
 					<TldrawUiPopoverContent side="left" align="center" sideOffset={116} alignOffset={0}>
-						<TldrawUiToolbar label={msg(labelB)} className="tlui-buttons__grid">
+						<TldrawUiToolbar orientation="grid" label={msg(labelB)}>
 							<TldrawUiMenuContextProvider type="icons" sourceId="style-panel">
 								{itemsB.map((item) => {
 									return (

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

@@ -1,5 +1,4 @@
 import { SharedStyle, StyleProp, tlmenus, useEditor } from '@tldraw/editor'
-import classNames from 'classnames'
 import * as React from 'react'
 import { StyleValuesForUi } from '../../../styles'
 import { TLUiTranslationKey } from '../../hooks/useTranslation/TLUiTranslationKey'
@@ -57,7 +56,12 @@ function DropdownPickerInner<T extends string>({
 
 	const popoverId = `style panel ${id}`
 	return (
-		<TldrawUiPopover id={popoverId} open={isOpen} onOpenChange={setIsOpen}>
+		<TldrawUiPopover
+			id={popoverId}
+			open={isOpen}
+			onOpenChange={setIsOpen}
+			className="tlui-style-panel__dropdown-picker"
+		>
 			<TldrawUiPopoverTrigger>
 				<TldrawUiToolbarButton
 					type={type}
@@ -70,10 +74,7 @@ function DropdownPickerInner<T extends string>({
 				</TldrawUiToolbarButton>
 			</TldrawUiPopoverTrigger>
 			<TldrawUiPopoverContent side="left" align="center">
-				<TldrawUiToolbar
-					label={labelStr}
-					className={classNames('tlui-buttons__grid', `tlui-buttons__${stylePanelType}`)}
-				>
+				<TldrawUiToolbar orientation="grid" label={labelStr}>
 					<TldrawUiMenuContextProvider type="icons" sourceId="style-panel">
 						{items.map((item) => {
 							return (

package/src/lib/ui/components/Toolbar/DefaultImageToolbarContent.tsx

@@ -272,7 +272,7 @@ export const DefaultImageToolbarContent = track(function DefaultImageToolbarCont
 					type="icon"
 					onClick={onManipulatingEnd}
 					data-testid="tool.image-confirm"
-					style={{ borderLeft: '1px solid var(--color-divider)', marginLeft: '2px' }}
+					style={{ borderLeft: '1px solid var(--tl-color-divider)', marginLeft: '2px' }}
 				>
 					<TldrawUiButtonIcon small icon="check" />
 				</TldrawUiButton>

package/src/lib/ui/components/Toolbar/DefaultToolbar.tsx

@@ -1,4 +1,5 @@
 import { useEditor, usePassThroughWheelEvents, useValue } from '@tldraw/editor'
+import classNames from 'classnames'
 import { ReactNode, memo, useRef } from 'react'
 import { PORTRAIT_BREAKPOINT } from '../../constants'
 import { useBreakpoint } from '../../context/breakpoints'
@@ -6,6 +7,7 @@ import { useTldrawUiComponents } from '../../context/components'
 import { useReadonly } from '../../hooks/useReadonly'
 import { useTranslation } from '../../hooks/useTranslation/useTranslation'
 import { MobileStylePanel } from '../MobileStylePanel'
+import { TldrawUiOrientationProvider } from '../primitives/layout'
 import { TldrawUiToolbar } from '../primitives/TldrawUiToolbar'
 import { DefaultToolbarContent } from './DefaultToolbarContent'
 import { OverflowingToolbar } from './OverflowingToolbar'
@@ -14,6 +16,11 @@ import { ToggleToolLockedButton } from './ToggleToolLockedButton'
 /** @public */
 export interface DefaultToolbarProps {
 	children?: ReactNode
+	orientation?: 'horizontal' | 'vertical'
+	minItems?: number
+	minSizePx?: number
+	maxItems?: number
+	maxSizePx?: number
 }
 
 /**
@@ -24,7 +31,14 @@ export interface DefaultToolbarProps {
  * @public
  * @react
  */
-export const DefaultToolbar = memo(function DefaultToolbar({ children }: DefaultToolbarProps) {
+export const DefaultToolbar = memo(function DefaultToolbar({
+	children,
+	orientation = 'horizontal',
+	minItems = 4,
+	minSizePx = 310,
+	maxItems = 8,
+	maxSizePx = 470,
+}: DefaultToolbarProps) {
 	const editor = useEditor()
 	const msg = useTranslation()
 	const breakpoint = useBreakpoint()
@@ -44,31 +58,49 @@ export const DefaultToolbar = memo(function DefaultToolbar({ children }: Default
 				: breakpoint < PORTRAIT_BREAKPOINT.TABLET
 
 	return (
-		<div ref={ref} className="tlui-toolbar">
-			<div className="tlui-toolbar__inner">
-				<div className="tlui-toolbar__left">
-					{!isReadonlyMode && (
-						<div className="tlui-toolbar__extras">
-							{showQuickActions && (
-								<TldrawUiToolbar
-									className="tlui-toolbar__extras__controls tlui-buttons__horizontal"
-									label={msg('actions-menu.title')}
-								>
-									{QuickActions && <QuickActions />}
-									{ActionsMenu && <ActionsMenu />}
-								</TldrawUiToolbar>
-							)}
-							<ToggleToolLockedButton activeToolId={activeToolId} />
+		<TldrawUiOrientationProvider
+			orientation={orientation}
+			tooltipSide={orientation === 'horizontal' ? 'top' : 'right'}
+		>
+			<div
+				ref={ref}
+				className={classNames('tlui-main-toolbar', `tlui-main-toolbar--${orientation}`)}
+			>
+				<div className="tlui-main-toolbar__inner">
+					<div className="tlui-main-toolbar__left">
+						{!isReadonlyMode && (
+							<div className="tlui-main-toolbar__extras">
+								{showQuickActions && (
+									<TldrawUiToolbar
+										orientation={orientation}
+										className="tlui-main-toolbar__extras__controls"
+										label={msg('actions-menu.title')}
+									>
+										{QuickActions && <QuickActions />}
+										{ActionsMenu && <ActionsMenu />}
+									</TldrawUiToolbar>
+								)}
+								<ToggleToolLockedButton activeToolId={activeToolId} />
+							</div>
+						)}
+						<OverflowingToolbar
+							orientation={orientation}
+							sizingParentClassName="tlui-main-toolbar"
+							minItems={minItems}
+							maxItems={maxItems}
+							minSizePx={minSizePx}
+							maxSizePx={maxSizePx}
+						>
+							{children ?? <DefaultToolbarContent />}
+						</OverflowingToolbar>
+					</div>
+					{breakpoint < PORTRAIT_BREAKPOINT.TABLET_SM && !isReadonlyMode && (
+						<div className="tlui-main-toolbar__tools tlui-main-toolbar__mobile-style-panel">
+							<MobileStylePanel />
 						</div>
 					)}
-					<OverflowingToolbar>{children ?? <DefaultToolbarContent />}</OverflowingToolbar>
 				</div>
-				{breakpoint < PORTRAIT_BREAKPOINT.TABLET_SM && !isReadonlyMode && (
-					<div className="tlui-toolbar__tools">
-						<MobileStylePanel />
-					</div>
-				)}
 			</div>
-		</div>
+		</TldrawUiOrientationProvider>
 	)
 })