tldraw 3.16.0-canary.efdec30fc411 → 3.16.0-canary.f293c3bb58f5

package/src/lib/shapes/line/LineShapeUtil.test.tsx

@@ -7,6 +7,7 @@ import {
 	sortByIndex,
 	structuredClone,
 } from '@tldraw/editor'
+import { vi } from 'vitest'
 import { TestEditor } from '../../../test/TestEditor'
 import { TL } from '../../../test/test-jsx'
 
@@ -16,7 +17,7 @@ mockUniqueId(() => 'id' + nextId++)
 let editor: TestEditor
 const id = createShapeId('line1')
 
-jest.useFakeTimers()
+vi.useFakeTimers()
 
 beforeEach(() => {
 	editor = new TestEditor()
@@ -338,12 +339,12 @@ describe('Misc', () => {
 
 		expect(editor.getShapePageBounds(box)!.maxX).not.toEqual(editor.getShapePageBounds(line)!.maxX)
 		editor.alignShapes(editor.getSelectedShapeIds(), 'right')
-		jest.advanceTimersByTime(1000)
+		vi.advanceTimersByTime(1000)
 		expect(editor.getShapePageBounds(box)!.maxX).toEqual(editor.getShapePageBounds(line)!.maxX)
 
 		expect(editor.getShapePageBounds(box)!.maxY).not.toEqual(editor.getShapePageBounds(line)!.maxY)
 		editor.alignShapes(editor.getSelectedShapeIds(), 'bottom')
-		jest.advanceTimersByTime(1000)
+		vi.advanceTimersByTime(1000)
 		expect(editor.getShapePageBounds(box)!.maxY).toEqual(editor.getShapePageBounds(line)!.maxY)
 	})
 

package/src/lib/shapes/line/LineShapeUtil.tsx

@@ -12,6 +12,7 @@ import {
 	WeakCache,
 	ZERO_INDEX_KEY,
 	assert,
+	getColorValue,
 	getIndexAbove,
 	getIndexBetween,
 	getIndices,
@@ -346,6 +347,10 @@ function LineShapeSvg({
 		strokeWidth,
 		forceSolid,
 		randomSeed: shape.id,
-		props: { transform: `scale(${scale})`, stroke: theme[color].solid, fill: 'none' },
+		props: {
+			transform: `scale(${scale})`,
+			stroke: getColorValue(theme, color, 'solid'),
+			fill: 'none',
+		},
 	})
 }

package/src/lib/shapes/line/__snapshots__/LineShapeUtil.test.tsx.snap

@@ -1,6 +1,6 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`Misc resizes: line shape after resize 1`] = `
+exports[`Misc > resizes > line shape after resize 1`] = `
 {
   "id": "shape:line1",
   "index": "a1",

package/src/lib/shapes/note/NoteShapeUtil.tsx

@@ -17,6 +17,7 @@ import {
 	Vec,
 	WeakCache,
 	exhaustiveSwitchError,
+	getColorValue,
 	getDefaultColorTheme,
 	getFontsFromRichText,
 	isEqual,
@@ -288,7 +289,7 @@ export class NoteShapeUtil extends ShapeUtil<TLNoteShape> {
 					style={{
 						width: nw,
 						height: nh,
-						backgroundColor: theme[color].note.fill,
+						backgroundColor: getColorValue(theme, color, 'noteFill'),
 						borderBottom: hideShadows
 							? isDarkMode
 								? `${2 * scale}px solid rgb(20, 20, 20)`
@@ -308,7 +309,11 @@ export class NoteShapeUtil extends ShapeUtil<TLNoteShape> {
 							verticalAlign={verticalAlign}
 							richText={richText}
 							isSelected={isSelected}
-							labelColor={labelColor === 'black' ? theme[color].note.text : theme[labelColor].fill}
+							labelColor={
+								labelColor === 'black'
+									? getColorValue(theme, color, 'noteText')
+									: getColorValue(theme, labelColor, 'fill')
+							}
 							wrap
 							padding={LABEL_PADDING * scale}
 							hasCustomTabBehavior
@@ -343,7 +348,7 @@ export class NoteShapeUtil extends ShapeUtil<TLNoteShape> {
 				align={shape.props.align}
 				verticalAlign={shape.props.verticalAlign}
 				richText={shape.props.richText}
-				labelColor={theme[shape.props.color].note.text}
+				labelColor={getColorValue(theme, shape.props.color, 'noteText')}
 				bounds={bounds}
 				padding={LABEL_PADDING}
 				showTextOutline={false}
@@ -357,7 +362,7 @@ export class NoteShapeUtil extends ShapeUtil<TLNoteShape> {
 					rx={1}
 					width={NOTE_SIZE}
 					height={bounds.h}
-					fill={theme[shape.props.color].note.fill}
+					fill={getColorValue(theme, shape.props.color, 'noteFill')}
 				/>
 				{textLabel}
 			</>

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/text/TextShapeTool.test.ts

@@ -1,9 +1,10 @@
 import { DefaultTextAlignStyle, TLTextShape, toRichText } from '@tldraw/editor'
+import { vi } from 'vitest'
 import { TestEditor } from '../../../test/TestEditor'
 import { TextShapeTool } from './TextShapeTool'
 
 let editor: TestEditor
-jest.useFakeTimers()
+vi.useFakeTimers()
 
 beforeEach(() => {
 	editor = new TestEditor()
@@ -115,7 +116,7 @@ describe('When in the pointing state', () => {
 
 		// Go back to start and wait a little to satisfy the time requirement
 		editor.pointerMove(0, 0)
-		jest.advanceTimersByTime(200)
+		vi.advanceTimersByTime(200)
 
 		// y axis doesn't matter
 		editor.pointerMove(0, 100)
@@ -187,7 +188,7 @@ describe('When resizing', () => {
 	it('bails on escape while resizing and returns to text.idle', () => {
 		editor.setCurrentTool('text')
 		editor.pointerDown(0, 0)
-		jest.advanceTimersByTime(200)
+		vi.advanceTimersByTime(200)
 		editor.pointerMove(100, 100)
 		editor.expectToBeIn('select.resizing')
 		editor.cancel()
@@ -198,7 +199,7 @@ describe('When resizing', () => {
 	it('does not bails on interrupt while resizing', () => {
 		editor.setCurrentTool('text')
 		editor.pointerDown(0, 0)
-		jest.advanceTimersByTime(200)
+		vi.advanceTimersByTime(200)
 		editor.pointerMove(100, 100)
 		editor.expectToBeIn('select.resizing')
 		editor.interrupt()
@@ -210,7 +211,7 @@ describe('When resizing', () => {
 		const x = 0
 		const y = 0
 		editor.pointerDown(x, y)
-		jest.advanceTimersByTime(200)
+		vi.advanceTimersByTime(200)
 		editor.pointerMove(x + 100, y + 100)
 		expect(editor.getCurrentPageShapes()[0]).toMatchObject({
 			x,

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/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/assetUrls.ts

@@ -1,4 +1,5 @@
 import { LANGUAGES, RecursivePartial, getDefaultCdnBaseUrl } from '@tldraw/editor'
+import { useMemo } from 'react'
 import { DEFAULT_EMBED_DEFINITIONS } from '../defaultEmbedDefinitions'
 import { TLEditorAssetUrls, defaultEditorAssetUrls } from '../utils/static-assets/assetUrls'
 import { TLUiIconType, iconTypes } from './icon-types'
@@ -41,15 +42,17 @@ export function setDefaultUiAssetUrls(urls: TLUiAssetUrls) {
 export function useDefaultUiAssetUrlsWithOverrides(
 	overrides?: TLUiAssetUrlOverrides
 ): TLUiAssetUrls {
-	if (!overrides) return defaultUiAssetUrls
+	return useMemo(() => {
+		if (!overrides) return defaultUiAssetUrls
 
-	return {
-		fonts: Object.assign({ ...defaultUiAssetUrls.fonts }, { ...overrides?.fonts }),
-		icons: Object.assign({ ...defaultUiAssetUrls.icons }, { ...overrides?.icons }),
-		embedIcons: Object.assign({ ...defaultUiAssetUrls.embedIcons }, { ...overrides?.embedIcons }),
-		translations: Object.assign(
-			{ ...defaultUiAssetUrls.translations },
-			{ ...overrides?.translations }
-		),
-	}
+		return {
+			fonts: Object.assign({ ...defaultUiAssetUrls.fonts }, { ...overrides?.fonts }),
+			icons: Object.assign({ ...defaultUiAssetUrls.icons }, { ...overrides?.icons }),
+			embedIcons: Object.assign({ ...defaultUiAssetUrls.embedIcons }, { ...overrides?.embedIcons }),
+			translations: Object.assign(
+				{ ...defaultUiAssetUrls.translations },
+				{ ...overrides?.translations }
+			),
+		}
+	}, [overrides])
 }

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,11 +54,20 @@ 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

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

@@ -123,7 +123,7 @@ export function DefaultKeyboardShortcutsDialogContent() {
 				<TldrawUiMenuItem
 					id="text-header"
 					label="tool.rich-text-header"
-					kbd="cmd+shift+[[1-6]]"
+					kbd="cmd+alt+[[1-6]]"
 					onSelect={() => {
 						/* do nothing */
 					}}

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/StylePanel/DropdownPicker.tsx

@@ -74,7 +74,7 @@ function DropdownPickerInner<T extends string>({
 				</TldrawUiToolbarButton>
 			</TldrawUiPopoverTrigger>
 			<TldrawUiPopoverContent side="left" align="center">
-				<TldrawUiToolbar orientation="grid" label={labelStr}>
+				<TldrawUiToolbar orientation={items.length > 4 ? 'grid' : 'horizontal'} 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>