tldraw 3.15.1 → 3.16.0-canary.03deb7f8fe34

package/src/lib/shapes/shared/ShapeFill.tsx

@@ -1,4 +1,5 @@
 import {
+	getColorValue,
 	TLDefaultColorStyle,
 	TLDefaultColorTheme,
 	TLDefaultFillStyle,
@@ -29,13 +30,13 @@ export const ShapeFill = React.memo(function ShapeFill({
 			return null
 		}
 		case 'solid': {
-			return <path fill={theme[color].semi} d={d} />
+			return <path fill={getColorValue(theme, color, 'semi')} d={d} />
 		}
 		case 'semi': {
 			return <path fill={theme.solid} d={d} />
 		}
 		case 'fill': {
-			return <path fill={theme[color].fill} d={d} />
+			return <path fill={getColorValue(theme, color, 'fill')} d={d} />
 		}
 		case 'pattern': {
 			return <PatternFill theme={theme} color={color} fill={fill} d={d} scale={scale} />
@@ -53,13 +54,13 @@ export function PatternFill({ d, color, theme }: ShapeFillProps) {
 
 	return (
 		<>
-			<path fill={theme[color].pattern} d={d} />
+			<path fill={getColorValue(theme, color, 'pattern')} d={d} />
 			<path
 				fill={
 					svgExport
 						? `url(#${getHashPatternZoomName(1, theme.id)})`
 						: teenyTiny
-							? theme[color].semi
+							? getColorValue(theme, color, 'semi')
 							: `url(#${getHashPatternZoomName(zoomLevel, theme.id)})`
 				}
 				d={d}

package/src/lib/shapes/shared/freehand/svg.ts

@@ -6,6 +6,8 @@ import { StrokePoint } from './types'
  *
  * @param points - The stroke points returned from perfect-freehand
  * @param closed - Whether the shape is closed
+ *
+ * @public
  */
 export function getSvgPathFromStrokePoints(points: StrokePoint[], closed = false): string {
 	const len = points.length

package/src/lib/shapes/shared/usePrefersReducedMotion.tsx

@@ -1,10 +1,20 @@
+import { useMaybeEditor, useValue } from '@tldraw/editor'
 import { useEffect, useState } from 'react'
 
 /** @public */
 export function usePrefersReducedMotion() {
+	const editor = useMaybeEditor()
+	const animationSpeed = useValue('animationSpeed', () => editor?.user.getAnimationSpeed(), [
+		editor,
+	])
 	const [prefersReducedMotion, setPrefersReducedMotion] = useState(false)
 
 	useEffect(() => {
+		if (animationSpeed !== undefined) {
+			setPrefersReducedMotion(animationSpeed === 0 ? true : false)
+			return
+		}
+
 		if (typeof window === 'undefined' || !('matchMedia' in window)) return
 		const mql = window.matchMedia('(prefers-reduced-motion: reduce)')
 		const handler = () => {
@@ -13,7 +23,7 @@ export function usePrefersReducedMotion() {
 		handler()
 		mql.addEventListener('change', handler)
 		return () => mql.removeEventListener('change', handler)
-	}, [])
+	}, [animationSpeed])
 
 	return prefersReducedMotion
 }

package/src/lib/shapes/text/TextShapeUtil.tsx

@@ -11,6 +11,7 @@ import {
 	TLTextShape,
 	Vec,
 	createComputedCache,
+	getColorValue,
 	getDefaultColorTheme,
 	getFontsFromRichText,
 	isEqual,
@@ -135,7 +136,7 @@ export class TextShapeUtil extends ShapeUtil<TLTextShape> {
 				align={textAlign}
 				verticalAlign="middle"
 				richText={richText}
-				labelColor={theme[color].solid}
+				labelColor={getColorValue(theme, color, 'solid')}
 				isSelected={isSelected}
 				textWidth={width}
 				textHeight={height}
@@ -171,7 +172,7 @@ export class TextShapeUtil extends ShapeUtil<TLTextShape> {
 				align={shape.props.textAlign}
 				verticalAlign="middle"
 				richText={shape.props.richText}
-				labelColor={theme[shape.props.color].solid}
+				labelColor={getColorValue(theme, shape.props.color, 'solid')}
 				bounds={exportBounds}
 				padding={0}
 			/>

package/src/lib/shapes/video/VideoShapeUtil.tsx

@@ -142,9 +142,9 @@ const VideoShape = memo(function VideoShape({ shape }: { shape: TLVideoShape })
 			<HTMLContainer
 				id={shape.id}
 				style={{
-					color: 'var(--color-text-3)',
-					backgroundColor: asset ? 'transparent' : 'var(--color-low)',
-					border: asset ? 'none' : '1px solid var(--color-low-border)',
+					color: 'var(--tl-color-text-3)',
+					backgroundColor: asset ? 'transparent' : 'var(--tl-color-low)',
+					border: asset ? 'none' : '1px solid var(--tl-color-low-border)',
 				}}
 			>
 				<div className="tl-counter-scaled">

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

@@ -1,4 +1,5 @@
 import {
+	Mat,
 	StateNode,
 	TLArrowShape,
 	TLHandle,
@@ -26,20 +27,20 @@ export type DraggingHandleInfo = TLPointerEventInfo & {
 export class DraggingHandle extends StateNode {
 	static override id = 'dragging_handle'
 
-	shapeId = '' as TLShapeId
-	initialHandle = {} as TLHandle
-	initialAdjacentHandle = null as TLHandle | null
-	initialPagePoint = {} as Vec
+	shapeId!: TLShapeId
+	initialHandle!: TLHandle
+	initialAdjacentHandle!: TLHandle | null
+	initialPagePoint!: Vec
 
-	markId = ''
-	initialPageTransform: any
-	initialPageRotation: any
+	markId!: string
+	initialPageTransform!: Mat
+	initialPageRotation!: number
 
-	info = {} as DraggingHandleInfo
+	info!: DraggingHandleInfo
 
 	isPrecise = false
-	isPreciseId = null as TLShapeId | null
-	pointingId = null as TLShapeId | null
+	isPreciseId: TLShapeId | null = null
+	pointingId: TLShapeId | null = null
 
 	override onEnter(info: DraggingHandleInfo) {
 		const { shape, isCreating, creatingMarkId, handle } = info
@@ -66,26 +67,6 @@ export class DraggingHandle extends StateNode {
 
 		this.initialHandle = structuredClone(handle)
 
-		if (this.editor.isShapeOfType<TLLineShape>(shape, 'line')) {
-			// For line shapes, if we're dragging a "create" handle, then
-			// create a new vertex handle at that point; and make this handle
-			// the handle that we're dragging.
-			if (this.initialHandle.type === 'create') {
-				this.editor.updateShape({
-					...shape,
-					props: {
-						points: {
-							...shape.props.points,
-							[handle.index]: { id: handle.index, index: handle.index, x: handle.x, y: handle.y },
-						},
-					},
-				})
-				const handlesAfter = this.editor.getShapeHandles(shape)!
-				const handleAfter = handlesAfter.find((h) => h.index === handle.index)!
-				this.initialHandle = structuredClone(handleAfter)
-			}
-		}
-
 		this.initialPageTransform = this.editor.getShapePageTransform(shape)!
 		this.initialPageRotation = this.initialPageTransform.rotation()
 		this.initialPagePoint = this.editor.inputs.originPagePoint.clone()
@@ -135,6 +116,19 @@ export class DraggingHandle extends StateNode {
 		}
 		// -->
 
+		// Call onHandleDragStart callback
+		const handleDragInfo = {
+			handle: this.initialHandle,
+			isPrecise: this.isPrecise,
+			isCreatingShape: !!this.info.isCreating,
+			initial: shape,
+		}
+		const util = this.editor.getShapeUtil(shape)
+		const startChanges = util.onHandleDragStart?.(shape, handleDragInfo)
+		if (startChanges) {
+			this.editor.updateShapes([{ ...startChanges, id: shape.id, type: shape.type }])
+		}
+
 		this.update()
 
 		this.editor.select(this.shapeId)
@@ -204,6 +198,22 @@ export class DraggingHandle extends StateNode {
 		this.editor.snaps.clearIndicators()
 		kickoutOccludedShapes(this.editor, [this.shapeId])
 
+		// Call onHandleDragEnd callback before state transitions
+		const shape = this.editor.getShape(this.shapeId)
+		if (shape) {
+			const util = this.editor.getShapeUtil(shape)
+			const handleDragInfo = {
+				handle: this.initialHandle,
+				isPrecise: this.isPrecise,
+				isCreatingShape: !!this.info.isCreating,
+				initial: this.info.shape,
+			}
+			const endChanges = util.onHandleDragEnd?.(shape, handleDragInfo)
+			if (endChanges) {
+				this.editor.updateShapes([{ ...endChanges, id: shape.id, type: shape.type }])
+			}
+		}
+
 		const { onInteractionEnd } = this.info
 		if (this.editor.getInstanceState().isToolLocked && onInteractionEnd) {
 			// Return to the tool that was active before this one,
@@ -216,6 +226,19 @@ export class DraggingHandle extends StateNode {
 	}
 
 	private cancel() {
+		// Call onHandleDragCancel callback before bailing to mark
+		const shape = this.editor.getShape(this.shapeId)
+		if (shape) {
+			const util = this.editor.getShapeUtil(shape)
+			const handleDragInfo = {
+				handle: this.initialHandle,
+				isPrecise: this.isPrecise,
+				isCreatingShape: !!this.info.isCreating,
+				initial: this.info.shape,
+			}
+			util.onHandleDragCancel?.(shape, handleDragInfo)
+		}
+
 		this.editor.bailToMark(this.markId)
 		this.editor.snaps.clearIndicators()
 
@@ -284,6 +307,7 @@ export class DraggingHandle extends StateNode {
 		const changes = util.onHandleDrag?.(shape, {
 			handle: nextHandle,
 			isPrecise: this.isPrecise || altKey,
+			isCreatingShape: !!this.info.isCreating,
 			initial: initial,
 		})
 

package/src/lib/tools/SelectTool/childStates/Idle.ts

@@ -1,9 +1,7 @@
 import {
 	Editor,
-	Group2d,
 	StateNode,
 	TLAdjacentDirection,
-	TLArrowShape,
 	TLClickEventInfo,
 	TLGroupShape,
 	TLKeyboardEventInfo,
@@ -18,6 +16,7 @@ import {
 	pointInPolygon,
 	toRichText,
 } from '@tldraw/editor'
+import { isOverArrowLabel } from '../../../shapes/arrow/arrowLabel'
 import { getHitShapeOnCanvasPointerDown } from '../../selection-logic/getHitShapeOnCanvasPointerDown'
 import { getShouldEnterCropMode } from '../../selection-logic/getShouldEnterCropModeOnPointerDown'
 import { selectOnCanvasPointerUp } from '../../selection-logic/selectOnCanvasPointerUp'
@@ -98,12 +97,6 @@ export class Idle extends StateNode {
 			case 'shape': {
 				const { shape } = info
 
-				if (this.isOverArrowLabelTest(shape)) {
-					// We're moving the label on a shape.
-					this.parent.transition('pointing_arrow_label', info)
-					break
-				}
-
 				if (this.editor.isShapeOrAncestorLocked(shape)) {
 					this.parent.transition('pointing_canvas', info)
 					break
@@ -595,22 +588,7 @@ export class Idle extends StateNode {
 	isOverArrowLabelTest(shape: TLShape | undefined) {
 		if (!shape) return false
 
-		// todo: Extract into general hit test for arrows
-		if (this.editor.isShapeOfType<TLArrowShape>(shape, 'arrow')) {
-			const pointInShapeSpace = this.editor.getPointInShapeSpace(
-				shape,
-				this.editor.inputs.currentPagePoint
-			)
-			// How should we handle multiple labels? Do shapes ever have multiple labels?
-			const labelGeometry = this.editor.getShapeGeometry<Group2d>(shape).children[1]
-			// Knowing what we know about arrows... if the shape has no text in its label,
-			// then the label geometry should not be there.
-			if (labelGeometry && pointInPolygon(pointInShapeSpace, labelGeometry.vertices)) {
-				return true
-			}
-		}
-
-		return false
+		return isOverArrowLabel(this.editor, shape)
 	}
 
 	handleDoubleClickOnCanvas(info: TLClickEventInfo) {

package/src/lib/tools/SelectTool/childStates/PointingShape.ts

@@ -1,4 +1,5 @@
 import { StateNode, TLPointerEventInfo, TLShape } from '@tldraw/editor'
+import { isOverArrowLabel } from '../../../shapes/arrow/arrowLabel'
 import { getTextLabels } from '../../../utils/shapes/shapes'
 
 export class PointingShape extends StateNode {
@@ -210,6 +211,12 @@ export class PointingShape extends StateNode {
 
 	override onPointerMove(info: TLPointerEventInfo) {
 		if (this.editor.inputs.isDragging) {
+			if (isOverArrowLabel(this.editor, this.hitShape)) {
+				// We're moving the label on a shape.
+				this.parent.transition('pointing_arrow_label', { ...info, shape: this.hitShape })
+				return
+			}
+
 			if (this.didCtrlOnEnter) {
 				this.parent.transition('brushing', info)
 			} else {

package/src/lib/tools/SelectTool/childStates/Resizing.ts

@@ -122,8 +122,19 @@ export class Resizing extends StateNode {
 	}
 
 	private cancel() {
-		// Restore initial models
+		// Call onResizeCancel callback before resetting
+		const { shapeSnapshots } = this.snapshot
+
+		shapeSnapshots.forEach(({ shape }) => {
+			const current = this.editor.getShape(shape.id)
+			if (current) {
+				const util = this.editor.getShapeUtil(shape)
+				util.onResizeCancel?.(shape, current)
+			}
+		})
+
 		this.editor.bailToMark(this.markId)
+
 		if (this.info.onInteractionEnd) {
 			this.editor.setCurrentTool(this.info.onInteractionEnd, {})
 		} else {

package/src/lib/tools/SelectTool/childStates/Rotating.ts

@@ -109,6 +109,17 @@ export class Rotating extends StateNode {
 	}
 
 	private cancel() {
+		// Call onRotateCancel callback before bailing to mark
+		const { shapeSnapshots } = this.snapshot
+
+		shapeSnapshots.forEach(({ shape }) => {
+			const current = this.editor.getShape(shape.id)
+			if (current) {
+				const util = this.editor.getShapeUtil(shape)
+				util.onRotateCancel?.(shape, current)
+			}
+		})
+
 		this.editor.bailToMark(this.markId)
 		if (this.info.onInteractionEnd) {
 			this.editor.setCurrentTool(this.info.onInteractionEnd, this.info)

package/src/lib/tools/SelectTool/childStates/Translating.ts

@@ -28,7 +28,6 @@ export type TranslatingInfo = TLPointerEventInfo & {
 	isCreating?: boolean
 	creatingMarkId?: string
 	onCreate?(): void
-	didStartInPit?: boolean
 	onInteractionEnd?: string
 }
 
@@ -203,6 +202,17 @@ export class Translating extends StateNode {
 	}
 
 	private cancel() {
+		// Call onTranslateCancel callback before resetting
+		const { movingShapes } = this.snapshot
+
+		movingShapes.forEach((shape) => {
+			const current = this.editor.getShape(shape.id)
+			if (current) {
+				const util = this.editor.getShapeUtil(shape)
+				util.onTranslateCancel?.(shape, current)
+			}
+		})
+
 		this.reset()
 		if (this.info.onInteractionEnd) {
 			this.editor.setCurrentTool(this.info.onInteractionEnd)

package/src/lib/tools/selection-logic/getHitShapeOnCanvasPointerDown.ts

@@ -1,5 +1,6 @@
 import { Editor, TLShape } from '@tldraw/editor'
 
+/** @public */
 export function getHitShapeOnCanvasPointerDown(
 	editor: Editor,
 	hitLabels = false

package/src/lib/ui/TldrawUi.tsx

@@ -1,12 +1,12 @@
 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,
@@ -160,6 +160,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 +182,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 ? (

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

@@ -0,0 +1,20 @@
+import {
+	ToggleKeyboardShortcutsItem,
+	ToggleReduceMotionItem,
+	ToggleUiLabelsItem,
+} from './menu-items'
+import { TldrawUiMenuGroup } from './primitives/menus/TldrawUiMenuGroup'
+import { TldrawUiMenuSubmenu } from './primitives/menus/TldrawUiMenuSubmenu'
+
+/** @public @react */
+export function AccessibilityMenu() {
+	return (
+		<TldrawUiMenuSubmenu id="help menu accessibility" label="menu.accessibility">
+			<TldrawUiMenuGroup id="accessibility">
+				<ToggleReduceMotionItem />
+				<ToggleKeyboardShortcutsItem />
+				<ToggleUiLabelsItem />
+			</TldrawUiMenuGroup>
+		</TldrawUiMenuSubmenu>
+	)
+}

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>
 	)
 })