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

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

@@ -35,11 +35,6 @@ import { TldrawUiToolbar, TldrawUiToolbarButton } from '../primitives/TldrawUiTo
 import { DoubleDropdownPicker } from './DoubleDropdownPicker'
 import { DropdownPicker } from './DropdownPicker'
 
-// Local component for style panel subheadings
-function StylePanelSubheading({ children }: { children: React.ReactNode }) {
-	return <h3 className="tlui-style-panel__subheading">{children}</h3>
-}
-
 /** @public */
 export interface TLUiStylePanelContentProps {
 	styles: ReturnType<typeof useRelevantStyles>
@@ -120,7 +115,6 @@ export function CommonStylePickerSet({ styles, theme }: ThemeStylePickerSetProps
 	const editor = useEditor()
 
 	const onHistoryMark = useCallback((id: string) => editor.markHistoryStoppingPoint(id), [editor])
-	const showUiLabels = useValue('showUiLabels', () => editor.user.getShowUiLabels(), [editor])
 
 	const handleValueChange = useStyleChangeCallback()
 
@@ -135,90 +129,70 @@ export function CommonStylePickerSet({ styles, theme }: ThemeStylePickerSetProps
 		<>
 			<div className="tlui-style-panel__section__common" data-testid="style.panel">
 				{color === undefined ? null : (
-					<>
-						{showUiLabels && (
-							<StylePanelSubheading>{msg('style-panel.color')}</StylePanelSubheading>
-						)}
-						<TldrawUiToolbar orientation="horizontal" label={msg('style-panel.color')}>
-							<TldrawUiButtonPicker
-								title={msg('style-panel.color')}
-								uiType="color"
-								style={DefaultColorStyle}
-								items={STYLES.color}
-								value={color}
-								onValueChange={handleValueChange}
-								theme={theme}
-								onHistoryMark={onHistoryMark}
-							/>
-						</TldrawUiToolbar>
-					</>
+					<TldrawUiToolbar label={msg('style-panel.color')}>
+						<TldrawUiButtonPicker
+							title={msg('style-panel.color')}
+							uiType="color"
+							style={DefaultColorStyle}
+							items={STYLES.color}
+							value={color}
+							onValueChange={handleValueChange}
+							theme={theme}
+							onHistoryMark={onHistoryMark}
+						/>
+					</TldrawUiToolbar>
 				)}
 				<OpacitySlider />
 			</div>
 			{showPickers && (
 				<div className="tlui-style-panel__section">
 					{fill === undefined ? null : (
-						<>
-							{showUiLabels && (
-								<StylePanelSubheading>{msg('style-panel.fill')}</StylePanelSubheading>
-							)}
-							<TldrawUiToolbar orientation="horizontal" label={msg('style-panel.fill')}>
-								<TldrawUiButtonPicker
-									title={msg('style-panel.fill')}
-									uiType="fill"
-									style={DefaultFillStyle}
-									items={STYLES.fill}
-									value={fill}
-									onValueChange={handleValueChange}
-									theme={theme}
-									onHistoryMark={onHistoryMark}
-								/>
-							</TldrawUiToolbar>
-						</>
+						<TldrawUiToolbar label={msg('style-panel.fill')}>
+							<TldrawUiButtonPicker
+								title={msg('style-panel.fill')}
+								uiType="fill"
+								style={DefaultFillStyle}
+								items={STYLES.fill}
+								value={fill}
+								onValueChange={handleValueChange}
+								theme={theme}
+								onHistoryMark={onHistoryMark}
+							/>
+						</TldrawUiToolbar>
 					)}
 					{dash === undefined ? null : (
-						<>
-							{showUiLabels && (
-								<StylePanelSubheading>{msg('style-panel.dash')}</StylePanelSubheading>
-							)}
-							<TldrawUiToolbar orientation="horizontal" label={msg('style-panel.dash')}>
-								<TldrawUiButtonPicker
-									title={msg('style-panel.dash')}
-									uiType="dash"
-									style={DefaultDashStyle}
-									items={STYLES.dash}
-									value={dash}
-									onValueChange={handleValueChange}
-									theme={theme}
-									onHistoryMark={onHistoryMark}
-								/>
-							</TldrawUiToolbar>
-						</>
+						<TldrawUiToolbar label={msg('style-panel.dash')}>
+							<TldrawUiButtonPicker
+								title={msg('style-panel.dash')}
+								uiType="dash"
+								style={DefaultDashStyle}
+								items={STYLES.dash}
+								value={dash}
+								onValueChange={handleValueChange}
+								theme={theme}
+								onHistoryMark={onHistoryMark}
+							/>
+						</TldrawUiToolbar>
 					)}
 					{size === undefined ? null : (
-						<>
-							{showUiLabels && (
-								<StylePanelSubheading>{msg('style-panel.size')}</StylePanelSubheading>
-							)}
-							<TldrawUiToolbar orientation="horizontal" label={msg('style-panel.size')}>
-								<TldrawUiButtonPicker
-									title={msg('style-panel.size')}
-									uiType="size"
-									style={DefaultSizeStyle}
-									items={STYLES.size}
-									value={size}
-									onValueChange={(style, value) => {
-										handleValueChange(style, value)
-										const selectedShapeIds = editor.getSelectedShapeIds()
-										if (selectedShapeIds.length > 0) {
-											kickoutOccludedShapes(editor, selectedShapeIds)
-										}
-									}}
-									theme={theme}
-									onHistoryMark={onHistoryMark}
-								/>
-							</TldrawUiToolbar>
-						</>
+						<TldrawUiToolbar label={msg('style-panel.size')}>
+							<TldrawUiButtonPicker
+								title={msg('style-panel.size')}
+								uiType="size"
+								style={DefaultSizeStyle}
+								items={STYLES.size}
+								value={size}
+								onValueChange={(style, value) => {
+									handleValueChange(style, value)
+									const selectedShapeIds = editor.getSelectedShapeIds()
+									if (selectedShapeIds.length > 0) {
+										kickoutOccludedShapes(editor, selectedShapeIds)
+									}
+								}}
+								theme={theme}
+								onHistoryMark={onHistoryMark}
+							/>
+						</TldrawUiToolbar>
 					)}
 				</div>
 			)}
@@ -233,8 +207,6 @@ export function TextStylePickerSet({ theme, styles }: ThemeStylePickerSetProps)
 
 	const editor = useEditor()
 	const onHistoryMark = useCallback((id: string) => editor.markHistoryStoppingPoint(id), [editor])
-	const showUiLabels = useValue('showUiLabels', () => editor.user.getShowUiLabels(), [editor])
-	const labelStr = showUiLabels && msg('style-panel.font')
 
 	const font = styles.get(DefaultFontStyle)
 	const textAlign = styles.get(DefaultTextAlignStyle)
@@ -247,37 +219,33 @@ export function TextStylePickerSet({ theme, styles }: ThemeStylePickerSetProps)
 	return (
 		<div className="tlui-style-panel__section">
 			{font === undefined ? null : (
-				<>
-					{labelStr && <StylePanelSubheading>{labelStr}</StylePanelSubheading>}
-					<TldrawUiToolbar orientation="horizontal" label={msg('style-panel.font')}>
-						<TldrawUiButtonPicker
-							title={msg('style-panel.font')}
-							uiType="font"
-							style={DefaultFontStyle}
-							items={STYLES.font}
-							value={font}
-							onValueChange={handleValueChange}
-							theme={theme}
-							onHistoryMark={onHistoryMark}
-						/>
-					</TldrawUiToolbar>
-				</>
+				<TldrawUiToolbar label={msg('style-panel.font')}>
+					<TldrawUiButtonPicker
+						title={msg('style-panel.font')}
+						uiType="font"
+						style={DefaultFontStyle}
+						items={STYLES.font}
+						value={font}
+						onValueChange={handleValueChange}
+						theme={theme}
+						onHistoryMark={onHistoryMark}
+					/>
+				</TldrawUiToolbar>
 			)}
 
 			{textAlign === undefined ? null : (
-				<>
-					{showUiLabels && <StylePanelSubheading>{msg('style-panel.align')}</StylePanelSubheading>}
-					<TldrawUiToolbar orientation="horizontal" label={msg('style-panel.align')}>
-						<TldrawUiButtonPicker
-							title={msg('style-panel.align')}
-							uiType="align"
-							style={DefaultTextAlignStyle}
-							items={STYLES.textAlign}
-							value={textAlign}
-							onValueChange={handleValueChange}
-							theme={theme}
-							onHistoryMark={onHistoryMark}
-						/>
+				<TldrawUiToolbar label={msg('style-panel.align')} className="tlui-style-panel__row">
+					<TldrawUiButtonPicker
+						title={msg('style-panel.align')}
+						uiType="align"
+						style={DefaultTextAlignStyle}
+						items={STYLES.textAlign}
+						value={textAlign}
+						onValueChange={handleValueChange}
+						theme={theme}
+						onHistoryMark={onHistoryMark}
+					/>
+					<div className="tlui-style-panel__row__extra-button">
 						<TldrawUiToolbarButton
 							type="icon"
 							title={msg('style-panel.vertical-align')}
@@ -286,26 +254,23 @@ export function TextStylePickerSet({ theme, styles }: ThemeStylePickerSetProps)
 						>
 							<TldrawUiButtonIcon icon="vertical-align-middle" />
 						</TldrawUiToolbarButton>
-					</TldrawUiToolbar>
-				</>
+					</div>
+				</TldrawUiToolbar>
 			)}
 
 			{labelAlign === undefined ? null : (
-				<>
-					{showUiLabels && (
-						<StylePanelSubheading>{msg('style-panel.label-align')}</StylePanelSubheading>
-					)}
-					<TldrawUiToolbar orientation="horizontal" label={msg('style-panel.label-align')}>
-						<TldrawUiButtonPicker
-							title={msg('style-panel.label-align')}
-							uiType="align"
-							style={DefaultHorizontalAlignStyle}
-							items={STYLES.horizontalAlign}
-							value={labelAlign}
-							onValueChange={handleValueChange}
-							theme={theme}
-							onHistoryMark={onHistoryMark}
-						/>
+				<TldrawUiToolbar label={msg('style-panel.label-align')} className="tlui-style-panel__row">
+					<TldrawUiButtonPicker
+						title={msg('style-panel.label-align')}
+						uiType="align"
+						style={DefaultHorizontalAlignStyle}
+						items={STYLES.horizontalAlign}
+						value={labelAlign}
+						onValueChange={handleValueChange}
+						theme={theme}
+						onHistoryMark={onHistoryMark}
+					/>
+					<div className="tlui-style-panel__row__extra-button">
 						{verticalLabelAlign === undefined ? (
 							<TldrawUiToolbarButton
 								type="icon"
@@ -327,8 +292,8 @@ export function TextStylePickerSet({ theme, styles }: ThemeStylePickerSetProps)
 								onValueChange={handleValueChange}
 							/>
 						)}
-					</TldrawUiToolbar>
-				</>
+					</div>
+				</TldrawUiToolbar>
 			)}
 		</div>
 	)
@@ -344,7 +309,7 @@ export function GeoStylePickerSet({ styles }: StylePickerSetProps) {
 	}
 
 	return (
-		<TldrawUiToolbar orientation="horizontal" label={msg('style-panel.geo')}>
+		<TldrawUiToolbar label={msg('style-panel.geo')}>
 			<DropdownPicker
 				id="geo"
 				type="menu"
@@ -370,7 +335,7 @@ export function SplineStylePickerSet({ styles }: StylePickerSetProps) {
 	}
 
 	return (
-		<TldrawUiToolbar orientation="horizontal" label={msg('style-panel.spline')}>
+		<TldrawUiToolbar label={msg('style-panel.spline')}>
 			<DropdownPicker
 				id="spline"
 				type="menu"
@@ -396,7 +361,7 @@ export function ArrowStylePickerSet({ styles }: StylePickerSetProps) {
 	}
 
 	return (
-		<TldrawUiToolbar orientation="horizontal" label={msg('style-panel.arrow-kind')}>
+		<TldrawUiToolbar label={msg('style-panel.arrow-kind')}>
 			<DropdownPicker
 				id="arrow-kind"
 				type="menu"
@@ -445,7 +410,6 @@ export function OpacitySlider() {
 	const editor = useEditor()
 
 	const onHistoryMark = useCallback((id: string) => editor.markHistoryStoppingPoint(id), [editor])
-	const showUiLabels = useValue('showUiLabels', () => editor.user.getShowUiLabels(), [editor])
 
 	const opacity = useValue('opacity', () => editor.getSharedOpacity(), [editor])
 	const trackEvent = useUiEvents()
@@ -479,18 +443,14 @@ export function OpacitySlider() {
 				)
 
 	return (
-		<>
-			{showUiLabels && <StylePanelSubheading>{msg('style-panel.opacity')}</StylePanelSubheading>}
-			<TldrawUiSlider
-				data-testid="style.opacity"
-				value={opacityIndex >= 0 ? opacityIndex : tldrawSupportedOpacities.length - 1}
-				label={opacity.type === 'mixed' ? 'style-panel.mixed' : `opacity-style.${opacity.value}`}
-				onValueChange={handleOpacityValueChange}
-				steps={tldrawSupportedOpacities.length - 1}
-				title={msg('style-panel.opacity')}
-				onHistoryMark={onHistoryMark}
-				ariaValueModifier={25}
-			/>
-		</>
+		<TldrawUiSlider
+			data-testid="style.opacity"
+			value={opacityIndex >= 0 ? opacityIndex : tldrawSupportedOpacities.length - 1}
+			label={opacity.type === 'mixed' ? 'style-panel.mixed' : `opacity-style.${opacity.value}`}
+			onValueChange={handleOpacityValueChange}
+			steps={tldrawSupportedOpacities.length - 1}
+			title={msg('style-panel.opacity')}
+			onHistoryMark={onHistoryMark}
+		/>
 	)
 }

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 orientation="horizontal" label={msg(label)}>
+			<TldrawUiToolbar label={msg(label)} className="tlui-buttons__horizontal">
 				<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 orientation="grid" label={msg(labelA)}>
+						<TldrawUiToolbar label={msg(labelA)} className="tlui-buttons__grid">
 							<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 orientation="grid" label={msg(labelB)}>
+						<TldrawUiToolbar label={msg(labelB)} className="tlui-buttons__grid">
 							<TldrawUiMenuContextProvider type="icons" sourceId="style-panel">
 								{itemsB.map((item) => {
 									return (

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

@@ -1,4 +1,5 @@
 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'
@@ -56,12 +57,7 @@ function DropdownPickerInner<T extends string>({
 
 	const popoverId = `style panel ${id}`
 	return (
-		<TldrawUiPopover
-			id={popoverId}
-			open={isOpen}
-			onOpenChange={setIsOpen}
-			className="tlui-style-panel__dropdown-picker"
-		>
+		<TldrawUiPopover id={popoverId} open={isOpen} onOpenChange={setIsOpen}>
 			<TldrawUiPopoverTrigger>
 				<TldrawUiToolbarButton
 					type={type}
@@ -74,7 +70,10 @@ function DropdownPickerInner<T extends string>({
 				</TldrawUiToolbarButton>
 			</TldrawUiPopoverTrigger>
 			<TldrawUiPopoverContent side="left" align="center">
-				<TldrawUiToolbar orientation="grid" label={labelStr}>
+				<TldrawUiToolbar
+					label={labelStr}
+					className={classNames('tlui-buttons__grid', `tlui-buttons__${stylePanelType}`)}
+				>
 					<TldrawUiMenuContextProvider type="icons" sourceId="style-panel">
 						{items.map((item) => {
 							return (

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

@@ -1,5 +1,5 @@
-import { Box, TLImageShape, useEditor, useValue } from '@tldraw/editor'
-import { useCallback, useEffect, useRef, useState } from 'react'
+import { Box, TLImageShape, track, useEditor, useValue } from '@tldraw/editor'
+import { useCallback, useRef, useState } from 'react'
 import { useTranslation } from '../../hooks/useTranslation/useTranslation'
 import { TldrawUiContextualToolbar } from '../primitives/TldrawUiContextualToolbar'
 import { AltTextEditor } from './AltTextEditor'
@@ -11,7 +11,9 @@ export interface TLUiImageToolbarProps {
 }
 
 /** @public @react */
-export function DefaultImageToolbar({ children }: TLUiImageToolbarProps) {
+export const DefaultImageToolbar = track(function DefaultImageToolbar({
+	children,
+}: TLUiImageToolbarProps) {
 	const editor = useEditor()
 	const imageShapeId = useValue(
 		'imageShape',
@@ -22,11 +24,7 @@ export function DefaultImageToolbar({ children }: TLUiImageToolbarProps) {
 		},
 		[editor]
 	)
-	const showToolbar = useValue(
-		'showToolbar',
-		() => editor.isInAny('select.idle', 'select.pointing_shape', 'select.crop'),
-		[editor]
-	)
+	const showToolbar = editor.isInAny('select.idle', 'select.pointing_shape', 'select.crop')
 	const isLocked = useValue(
 		'locked',
 		() => (imageShapeId ? editor.getShape<TLImageShape>(imageShapeId)?.isLocked : false),
@@ -39,7 +37,7 @@ export function DefaultImageToolbar({ children }: TLUiImageToolbarProps) {
 			{children}
 		</ContextualToolbarInner>
 	)
-}
+})
 
 function ContextualToolbarInner({
 	children,
@@ -51,18 +49,8 @@ function ContextualToolbarInner({
 	const editor = useEditor()
 	const msg = useTranslation()
 
-	const isChangingCrop = useValue(
-		'editor path',
-		() =>
-			editor.isInAny(
-				'select.crop.cropping',
-				'select.crop.pointing_crop_handle',
-				'select.crop.translating_crop'
-			),
-		[editor]
-	)
-	const camera = useValue('camera', () => editor.getCamera(), [editor])
 	const isInCropTool = useValue('editor path', () => editor.isIn('select.crop.'), [editor])
+	const isCropping = useValue('editor path', () => editor.isIn('select.crop.cropping'), [editor])
 	const previousSelectionBounds = useRef<Box | undefined>()
 	const handleManipulatingEnd = useCallback(() => {
 		editor.setCroppingShape(null)
@@ -77,10 +65,6 @@ function ContextualToolbarInner({
 	)
 	const onEditAltTextClose = useCallback(() => setIsEditingAltText(false), [])
 
-	useEffect(() => {
-		previousSelectionBounds.current = undefined
-	}, [camera])
-
 	const getSelectionBounds = useCallback(() => {
 		if (isInCropTool && previousSelectionBounds.current) {
 			// If we're cropping we want to be able to keep the toolbar in the same position.
@@ -93,7 +77,7 @@ function ContextualToolbarInner({
 		return bounds
 	}, [editor, isInCropTool])
 
-	if (isChangingCrop) {
+	if (isCropping) {
 		previousSelectionBounds.current = undefined
 		return null
 	}

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(--tl-color-divider)', marginLeft: '2px' }}
+					style={{ borderLeft: '1px solid var(--color-divider)', marginLeft: '2px' }}
 				>
 					<TldrawUiButtonIcon small icon="check" />
 				</TldrawUiButton>

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

@@ -1,5 +1,4 @@
 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'
@@ -7,7 +6,6 @@ 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'
@@ -16,11 +14,6 @@ import { ToggleToolLockedButton } from './ToggleToolLockedButton'
 /** @public */
 export interface DefaultToolbarProps {
 	children?: ReactNode
-	orientation?: 'horizontal' | 'vertical'
-	minItems?: number
-	minSizePx?: number
-	maxItems?: number
-	maxSizePx?: number
 }
 
 /**
@@ -31,14 +24,7 @@ export interface DefaultToolbarProps {
  * @public
  * @react
  */
-export const DefaultToolbar = memo(function DefaultToolbar({
-	children,
-	orientation = 'horizontal',
-	minItems = 4,
-	minSizePx = 310,
-	maxItems = 8,
-	maxSizePx = 470,
-}: DefaultToolbarProps) {
+export const DefaultToolbar = memo(function DefaultToolbar({ children }: DefaultToolbarProps) {
 	const editor = useEditor()
 	const msg = useTranslation()
 	const breakpoint = useBreakpoint()
@@ -58,49 +44,31 @@ export const DefaultToolbar = memo(function DefaultToolbar({
 				: breakpoint < PORTRAIT_BREAKPOINT.TABLET
 
 	return (
-		<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 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} />
 						</div>
 					)}
+					<OverflowingToolbar>{children ?? <DefaultToolbarContent />}</OverflowingToolbar>
 				</div>
+				{breakpoint < PORTRAIT_BREAKPOINT.TABLET_SM && !isReadonlyMode && (
+					<div className="tlui-toolbar__tools">
+						<MobileStylePanel />
+					</div>
+				)}
 			</div>
-		</TldrawUiOrientationProvider>
+		</div>
 	)
 })