tldraw 3.16.0-canary.efdec30fc411 → 3.16.0-canary.f55016ece635

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>

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,32 +58,49 @@ export const DefaultToolbar = memo(function DefaultToolbar({ children }: Default
 				: breakpoint < PORTRAIT_BREAKPOINT.TABLET
 
 	return (
-		<div ref={ref} className="tlui-main-toolbar">
-			<div className="tlui-main-toolbar__inner">
-				<div className="tlui-main-toolbar__left">
-					{!isReadonlyMode && (
-						<div className="tlui-main-toolbar__extras">
-							{showQuickActions && (
-								<TldrawUiToolbar
-									orientation="horizontal"
-									className="tlui-main-toolbar__extras__controls"
-									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-main-toolbar__tools">
-						<MobileStylePanel />
-					</div>
-				)}
 			</div>
-		</div>
+		</TldrawUiOrientationProvider>
 	)
 })

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

@@ -1,5 +1,7 @@
 import {
 	activeElementShouldCaptureKeys,
+	assert,
+	modulate,
 	preventDefault,
 	tlmenus,
 	useEditor,
@@ -7,7 +9,7 @@ import {
 	useUniqueSafeId,
 } from '@tldraw/editor'
 import classNames from 'classnames'
-import { createContext, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react'
+import { createContext, useEffect, useLayoutEffect, useRef, useState } from 'react'
 import { PORTRAIT_BREAKPOINT } from '../../constants'
 import { useBreakpoint } from '../../context/breakpoints'
 import { areShortcutsDisabled } from '../../hooks/useKeyboardShortcuts'
@@ -20,7 +22,7 @@ import {
 	TldrawUiPopoverTrigger,
 } from '../primitives/TldrawUiPopover'
 import { TldrawUiToolbar, TldrawUiToolbarButton } from '../primitives/TldrawUiToolbar'
-import { TldrawUiRow } from '../primitives/layout'
+import { TldrawUiColumn, TldrawUiRow } from '../primitives/layout'
 import { TldrawUiMenuContextProvider } from '../primitives/menus/TldrawUiMenuContext'
 
 export const IsInOverflowContext = createContext(false)
@@ -41,10 +43,24 @@ const NUMBERED_SHORTCUT_KEYS: Record<string, number> = {
 /** @public */
 export interface OverflowingToolbarProps {
 	children: React.ReactNode
+	orientation: 'horizontal' | 'vertical'
+	sizingParentClassName: string
+	minItems: number
+	minSizePx: number
+	maxItems: number
+	maxSizePx: number
 }
 
 /** @public @react */
-export function OverflowingToolbar({ children }: OverflowingToolbarProps) {
+export function OverflowingToolbar({
+	children,
+	orientation,
+	sizingParentClassName,
+	minItems,
+	minSizePx,
+	maxItems,
+	maxSizePx,
+}: OverflowingToolbarProps) {
 	const editor = useEditor()
 	const id = useUniqueSafeId()
 	const breakpoint = useBreakpoint()
@@ -52,63 +68,165 @@ export function OverflowingToolbar({ children }: OverflowingToolbarProps) {
 	const rButtons = useRef<HTMLElement[]>([])
 	const [isOpen, setIsOpen] = useState(false)
 
-	const overflowIndex = Math.min(8, 5 + breakpoint)
-
-	const [totalItems, setTotalItems] = useState(0)
 	const mainToolsRef = useRef<HTMLDivElement>(null)
-	const [lastActiveOverflowItem, setLastActiveOverflowItem] = useState<string | null>(null)
 
-	const css = useMemo(() => {
-		const activeCss = lastActiveOverflowItem ? `:not([data-value="${lastActiveOverflowItem}"])` : ''
-
-		return `
-			#${id}_main > *:nth-of-type(n + ${overflowIndex + (lastActiveOverflowItem ? 1 : 2)}):not([data-radix-popper-content-wrapper])${activeCss} {
-				display: none;
-			}
-			#${id}_more > *:nth-of-type(-n + ${overflowIndex}):not([data-radix-popper-content-wrapper]) {
-				display: none;
-			}
-        `
-	}, [lastActiveOverflowItem, id, overflowIndex])
+	// we have to use state instead of a ref here so that we get
+	// an update when the overflow popover mounts / unmounts
+	const [overflowTools, setOverflowTools] = useState<HTMLDivElement | null>(null)
+	const [lastActiveOverflowItem, setLastActiveOverflowItem] = useState<string | null>(null)
+	const [shouldShowOverflow, setShouldShowOverflow] = useState(false)
 
 	const onDomUpdate = useEvent(() => {
 		if (!mainToolsRef.current) return
 
-		const children = Array.from(mainToolsRef.current.children)
-		setTotalItems(children.length)
+		// whenever we get an update, we need to re-calculate the number of items to show and update
+		// the component accordingly.
+		const sizeProp = orientation === 'horizontal' ? 'offsetWidth' : 'offsetHeight'
 
-		// If the last active overflow item is no longer in the overflow, clear it
-		const lastActiveElementIdx = children.findIndex(
-			(el) => el.getAttribute('data-value') === lastActiveOverflowItem
-		)
-		if (lastActiveElementIdx <= overflowIndex) {
-			setLastActiveOverflowItem(null)
+		// toolbars can contain both single items and groups. we need to keep track of both.
+		type Items = (
+			| { type: 'item'; element: HTMLElement }
+			| { type: 'group'; items: Items; element: HTMLElement }
+		)[]
+
+		// walk through the dom and collect items so we can calculate what to show/hide
+		const mainItems = collectItems(mainToolsRef.current.children)
+		const overflowItems = overflowTools ? collectItems(overflowTools.children) : null
+		function collectItems(collection: HTMLCollection) {
+			const items: Items = []
+			for (const child of collection) {
+				if (child.classList.contains('tlui-main-toolbar__group')) {
+					items.push({
+						type: 'group',
+						items: collectItems(child.children),
+						element: child as HTMLElement,
+					})
+				} else {
+					items.push({ type: 'item', element: child as HTMLElement })
+				}
+			}
+
+			return items
 		}
 
-		// But if there's a new active item...
-		const activeElementIdx = Array.from(mainToolsRef.current.children).findIndex(
-			(el) => el.getAttribute('aria-pressed') === 'true'
+		// the number of items to show is based on the space available to the toolbar.
+		const sizingParent = findParentWithClassName(mainToolsRef.current, sizingParentClassName)
+		const size = sizingParent[sizeProp]
+		const itemsToShow = Math.floor(
+			modulate(size, [minSizePx, maxSizePx], [minItems, maxItems], true)
 		)
-		if (activeElementIdx === -1) return
 
-		// ...and it's in the overflow, set it as the last active overflow item
-		if (activeElementIdx >= overflowIndex) {
-			setLastActiveOverflowItem(children[activeElementIdx].getAttribute('data-value'))
-		}
+		// now we know how many items to show, we need to walk through the items we found and show /
+		// hide them accordingly. We need to keep track of:
+		// the number of item's we've shown in the main content so far
+		let mainItemCount = 0
+		// the item that is currently active in the overflow content (if any)
+		let newActiveOverflowItem: string | null = null
+		// whether the last active overflow item is actually still in the overflow content
+		let shouldInvalidateLastActiveOverflowItem = false
+		// the buttons visible in the main content
+		const numberedButtons: HTMLButtonElement[] = []
+		function visitItems(
+			mainItems: Items,
+			overflowItems: Items | null
+		): {
+			// for each group of items we visit, we need to know whether we showed anything in
+			// either section
+			didShowAnyInMain: boolean
+			didShowAnyInOverflow: boolean
+		} {
+			if (overflowItems) assert(mainItems.length === overflowItems.length)
+
+			let didShowAnyInMain = false
+			let didShowAnyInOverflow = false
+
+			for (let i = 0; i < mainItems.length; i++) {
+				const mainItem = mainItems[i]
+				const overflowItem = overflowItems?.[i]
+
+				if (mainItem.type === 'item') {
+					const isLastActiveOverflowItem =
+						mainItem.element.getAttribute('data-value') === lastActiveOverflowItem
+
+					// for single items, we show them in main if we have space, or if they're the
+					// last-used item from the overflow.
+					let shouldShowInMain
+					if (lastActiveOverflowItem) {
+						shouldShowInMain = mainItemCount < itemsToShow || isLastActiveOverflowItem
+					} else {
+						// we use <= here because if there is no last active overflow item, we want
+						// to show at least one item in the main toolbar.
+						shouldShowInMain = mainItemCount <= itemsToShow
+					}
+					const shouldShowInOverflow = mainItemCount >= itemsToShow
 
-		// Save the buttons that are actually visible
-		rButtons.current = Array.from(mainToolsRef.current?.children ?? []).filter(
-			(el): el is HTMLElement => {
-				// only count html elements...
-				if (!(el instanceof HTMLElement)) return false
+					didShowAnyInMain ||= shouldShowInMain
+					didShowAnyInOverflow ||= shouldShowInOverflow
 
-				// ...that are buttons...
-				if (el.tagName.toLowerCase() !== 'button') return false
+					setAttribute(
+						mainItem.element,
+						'data-toolbar-visible',
+						shouldShowInMain ? 'true' : 'false'
+					)
+					if (overflowItem) {
+						assert(overflowItem.type === 'item')
+						setAttribute(
+							overflowItem.element,
+							'data-toolbar-visible',
+							shouldShowInOverflow ? 'true' : 'false'
+						)
+					}
+					if (shouldShowInOverflow && mainItem.element.getAttribute('aria-pressed') === 'true') {
+						newActiveOverflowItem = mainItem.element.getAttribute('data-value')
+					}
+					if (shouldShowInMain && mainItem.element.tagName === 'BUTTON') {
+						numberedButtons.push(mainItem.element as HTMLButtonElement)
+					}
+					if (!shouldShowInOverflow && isLastActiveOverflowItem) {
+						shouldInvalidateLastActiveOverflowItem = true
+					}
+					mainItemCount++
+				} else {
+					// for groups, we show them in main if we have space, or if they're the
+					// last-used item from the overflow.
+					let result, overflowGroup
+					if (overflowItem) {
+						assert(overflowItem.type === 'group')
+						overflowGroup = overflowItem
+						result = visitItems(mainItem.items, overflowGroup.items)
+					} else {
+						result = visitItems(mainItem.items, null)
+					}
 
-				// ...that are actually visible
-				return !!(el.offsetWidth || el.offsetHeight)
+					didShowAnyInMain ||= result.didShowAnyInMain
+					didShowAnyInOverflow ||= result.didShowAnyInOverflow
+
+					setAttribute(
+						mainItem.element,
+						'data-toolbar-visible',
+						result.didShowAnyInMain ? 'true' : 'false'
+					)
+					if (overflowGroup) {
+						setAttribute(
+							overflowGroup.element,
+							'data-toolbar-visible',
+							result.didShowAnyInOverflow ? 'true' : 'false'
+						)
+					}
+				}
 			}
-		)
+			return { didShowAnyInMain, didShowAnyInOverflow }
+		}
+
+		const { didShowAnyInOverflow } = visitItems(mainItems, overflowItems)
+		setShouldShowOverflow(didShowAnyInOverflow)
+		if (newActiveOverflowItem) {
+			setLastActiveOverflowItem(newActiveOverflowItem)
+		} else if (shouldInvalidateLastActiveOverflowItem) {
+			setLastActiveOverflowItem(null)
+		}
+
+		rButtons.current = numberedButtons
 	})
 
 	useLayoutEffect(() => {
@@ -122,20 +240,31 @@ export function OverflowingToolbar({ children }: OverflowingToolbarProps) {
 		mutationObserver.observe(mainToolsRef.current, {
 			childList: true,
 			subtree: true,
-			attributeFilter: ['data-value', 'aria-pressed'],
+			attributes: true,
+			characterData: true,
 		})
 
+		const sizingParent = findParentWithClassName(mainToolsRef.current, sizingParentClassName)
+		const resizeObserver = new ResizeObserver(onDomUpdate)
+		resizeObserver.observe(sizingParent)
+
 		return () => {
 			mutationObserver.disconnect()
+			resizeObserver.disconnect()
 		}
-	}, [onDomUpdate])
+	}, [onDomUpdate, sizingParentClassName])
 
 	useEffect(() => {
 		if (!editor.options.enableToolbarKeyboardShortcuts) return
 
 		function handleKeyDown(event: KeyboardEvent) {
-			if (areShortcutsDisabled(editor) || activeElementShouldCaptureKeys(true /* allow buttons */))
+			if (
+				areShortcutsDisabled(editor) ||
+				activeElementShouldCaptureKeys(true /* allow buttons */)
+			) {
 				return
+			}
+
 			// no accelerator keys
 			if (event.ctrlKey || event.metaKey || event.altKey || event.shiftKey) return
 			const index = NUMBERED_SHORTCUT_KEYS[event.key]
@@ -152,23 +281,23 @@ export function OverflowingToolbar({ children }: OverflowingToolbarProps) {
 	}, [editor])
 
 	const popoverId = 'toolbar overflow'
+
+	const Layout = orientation === 'horizontal' ? TldrawUiRow : TldrawUiColumn
 	return (
 		<>
-			<style nonce={editor.options.nonce}>{css}</style>
 			<TldrawUiToolbar
-				orientation="horizontal"
+				orientation={orientation}
 				className={classNames('tlui-main-toolbar__tools', {
 					'tlui-main-toolbar__tools__mobile': breakpoint < PORTRAIT_BREAKPOINT.TABLET_SM,
 				})}
 				label={msg('tool-panel.title')}
 			>
-				<TldrawUiRow id={`${id}_main`} ref={mainToolsRef}>
+				<Layout id={`${id}_main`} ref={mainToolsRef}>
 					<TldrawUiMenuContextProvider type="toolbar" sourceId="toolbar">
 						{children}
 					</TldrawUiMenuContextProvider>
-				</TldrawUiRow>
-				{/* There is a +1 because if the menu is just one item, it's not necessary. */}
-				{totalItems > overflowIndex + 1 && (
+				</Layout>
+				{shouldShowOverflow && (
 					<IsInOverflowContext.Provider value={true}>
 						<TldrawUiPopover id={popoverId} open={isOpen} onOpenChange={setIsOpen}>
 							<TldrawUiPopoverTrigger>
@@ -178,12 +307,19 @@ export function OverflowingToolbar({ children }: OverflowingToolbarProps) {
 									className="tlui-main-toolbar__overflow"
 									data-testid="tools.more-button"
 								>
-									<TldrawUiButtonIcon icon="chevron-up" />
+									<TldrawUiButtonIcon
+										icon={orientation === 'horizontal' ? 'chevron-up' : 'chevron-right'}
+									/>
 								</TldrawUiToolbarButton>
 							</TldrawUiPopoverTrigger>
-							<TldrawUiPopoverContent side="top" align="center">
+							<TldrawUiPopoverContent
+								side={orientation === 'horizontal' ? 'top' : 'right'}
+								align={orientation === 'horizontal' ? 'center' : 'end'}
+							>
 								<TldrawUiToolbar
 									orientation="grid"
+									className="tlui-main-toolbar__overflow-content"
+									ref={setOverflowTools}
 									data-testid="tools.more-content"
 									label={msg('tool-panel.more')}
 									id={`${id}_more`}
@@ -214,3 +350,19 @@ export const isActiveTLUiToolItem = (
 		? activeToolId === 'geo' && geoState === item.meta?.geo
 		: activeToolId === item.id
 }
+
+function findParentWithClassName(startingElement: HTMLElement, className: string): HTMLElement {
+	let element: HTMLElement | null = startingElement
+	while (element) {
+		if (element.classList.contains(className)) {
+			return element
+		}
+		element = element.parentElement
+	}
+	throw new Error('Could not find parent with class name ' + className)
+}
+
+function setAttribute(element: HTMLElement, name: string, value: string) {
+	if (element.getAttribute(name) === value) return
+	element.setAttribute(name, value)
+}

package/src/lib/ui/components/primitives/TldrawUiButtonPicker.tsx

@@ -1,12 +1,13 @@
 import {
 	DefaultColorStyle,
+	getColorValue,
 	SharedStyle,
 	StyleProp,
 	TLDefaultColorStyle,
 	TLDefaultColorTheme,
 	useEditor,
 } from '@tldraw/editor'
-import { ReactElement, memo, useMemo, useRef } from 'react'
+import { memo, ReactElement, useMemo, useRef } from 'react'
 import { StyleValuesForUi } from '../../../styles'
 import { PORTRAIT_BREAKPOINT } from '../../constants'
 import { useBreakpoint } from '../../context/breakpoints'
@@ -140,7 +141,7 @@ export const TldrawUiButtonPicker = memo(function TldrawUiButtonPicker<T extends
 							title={label}
 							style={
 								style === (DefaultColorStyle as StyleProp<unknown>)
-									? { color: theme[item.value as TLDefaultColorStyle].solid }
+									? { color: getColorValue(theme, item.value as TLDefaultColorStyle, 'solid') }
 									: undefined
 							}
 							onPointerEnter={handleButtonPointerEnter}

package/src/lib/ui/components/primitives/TldrawUiToolbar.tsx

@@ -1,7 +1,7 @@
 import classnames from 'classnames'
 import { Toolbar as _Toolbar } from 'radix-ui'
 import React from 'react'
-import { TldrawUiGrid, TldrawUiRow } from './layout'
+import { TldrawUiColumn, TldrawUiGrid, TldrawUiRow } from './layout'
 import { TldrawUiTooltip } from './TldrawUiTooltip'
 
 /** @public */
@@ -10,15 +10,32 @@ export interface TLUiToolbarProps extends React.HTMLAttributes<HTMLDivElement> {
 	className?: string
 	dir?: 'ltr' | 'rtl'
 	label: string
-	orientation?: 'horizontal' | 'grid'
+	orientation?: 'horizontal' | 'vertical' | 'grid'
+	tooltipSide?: 'top' | 'right' | 'bottom' | 'left'
+}
+
+const LayoutByOrientation = {
+	horizontal: TldrawUiRow,
+	vertical: TldrawUiColumn,
+	grid: TldrawUiGrid,
 }
 
 /** @public @react */
 export const TldrawUiToolbar = React.forwardRef<HTMLDivElement, TLUiToolbarProps>(
-	({ children, className, label, orientation = 'horizontal', ...props }: TLUiToolbarProps, ref) => {
-		const Layout = orientation === 'grid' ? TldrawUiGrid : TldrawUiRow
+	(
+		{
+			children,
+			className,
+			label,
+			orientation = 'horizontal',
+			tooltipSide,
+			...props
+		}: TLUiToolbarProps,
+		ref
+	) => {
+		const Layout = LayoutByOrientation[orientation]
 		return (
-			<Layout asChild>
+			<Layout asChild tooltipSide={tooltipSide}>
 				<_Toolbar.Root
 					ref={ref}
 					{...props}