tldraw 3.16.0-canary.856874107ebd → 3.16.0-canary.887377ec7acc

package/src/lib/ui/components/Toolbar/DefaultVideoToolbarContent.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 { TldrawUiToolbarButton } from '../primitives/TldrawUiToolbar'
 
 /** @public */
 export interface DefaultVideoToolbarContentProps {
@@ -44,7 +45,12 @@ export const DefaultVideoToolbarContent = track(function DefaultVideoToolbarCont
 	return (
 		<>
 			{!isReadonly && (
-				<TldrawUiButton type="icon" title={msg('tool.replace-media')} onClick={handleVideoReplace}>
+				<TldrawUiButton
+					type="icon"
+					title={msg('tool.replace-media')}
+					onClick={handleVideoReplace}
+					data-testid="tool.video-replace"
+				>
 					<TldrawUiButtonIcon small icon="tool-media" />
 				</TldrawUiButton>
 			)}
@@ -52,21 +58,23 @@ export const DefaultVideoToolbarContent = track(function DefaultVideoToolbarCont
 				type="icon"
 				title={msg('action.download-original')}
 				onClick={handleVideoDownload}
+				data-testid="tool.video-download"
 			>
 				<TldrawUiButtonIcon small icon="download" />
 			</TldrawUiButton>
 			{(altText || !isReadonly) && (
-				<TldrawUiButton
-					type="normal"
+				<TldrawUiToolbarButton
+					type="icon"
 					isActive={!!altText}
 					title={msg('tool.media-alt-text')}
+					data-testid="tool.video-alt-text"
 					onClick={() => {
 						trackEvent('alt-text-start', { source })
 						onEditAltTextStart()
 					}}
 				>
 					<TldrawUiButtonIcon small icon="alt" />
-				</TldrawUiButton>
+				</TldrawUiToolbarButton>
 			)}
 		</>
 	)

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

@@ -2,9 +2,9 @@ import { preventDefault, TiptapEditor, useEditor } from '@tldraw/editor'
 import { useEffect, useRef, useState } from 'react'
 import { useUiEvents } from '../../context/events'
 import { useTranslation } from '../../hooks/useTranslation/useTranslation'
-import { TldrawUiButton } from '../primitives/Button/TldrawUiButton'
 import { TldrawUiButtonIcon } from '../primitives/Button/TldrawUiButtonIcon'
 import { TldrawUiInput } from '../primitives/TldrawUiInput'
+import { TldrawUiToolbarButton } from '../primitives/TldrawUiToolbar'
 
 /** @public */
 export interface LinkEditorProps {
@@ -76,7 +76,7 @@ export function LinkEditor({ textEditor, value: initialValue, onClose }: LinkEdi
 				onCancel={handleLinkCancel}
 				placeholder="example.com"
 			/>
-			<TldrawUiButton
+			<TldrawUiToolbarButton
 				className="tlui-rich-text__toolbar-link-visit"
 				title={msg('tool.rich-text-link-visit')}
 				type="icon"
@@ -85,8 +85,8 @@ export function LinkEditor({ textEditor, value: initialValue, onClose }: LinkEdi
 				disabled={!value}
 			>
 				<TldrawUiButtonIcon small icon="external-link" />
-			</TldrawUiButton>
-			<TldrawUiButton
+			</TldrawUiToolbarButton>
+			<TldrawUiToolbarButton
 				className="tlui-rich-text__toolbar-link-remove"
 				title={msg('tool.rich-text-link-remove')}
 				data-testid="rich-text.link-remove"
@@ -95,7 +95,7 @@ export function LinkEditor({ textEditor, value: initialValue, onClose }: LinkEdi
 				onClick={handleRemoveLink}
 			>
 				<TldrawUiButtonIcon small icon="trash" />
-			</TldrawUiButton>
+			</TldrawUiToolbarButton>
 		</>
 	)
 }

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/TldrawUiContextualToolbar.tsx

@@ -172,7 +172,12 @@ export const TldrawUiContextualToolbar = ({
 			className={classNames('tlui-contextual-toolbar', className)}
 			onPointerDown={stopEventPropagation}
 		>
-			<TldrawUiToolbar orientation="horizontal" className="tlui-menu" label={label}>
+			<TldrawUiToolbar
+				orientation="horizontal"
+				className="tlui-menu"
+				label={label}
+				tooltipSide="top"
+			>
 				{children}
 			</TldrawUiToolbar>
 		</div>

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

@@ -1,7 +1,9 @@
+import { tltime } from '@tldraw/editor'
 import { Slider as _Slider } from 'radix-ui'
 import React, { useCallback, useEffect, useState } from 'react'
 import { TLUiTranslationKey } from '../../hooks/useTranslation/TLUiTranslationKey'
 import { useTranslation } from '../../hooks/useTranslation/useTranslation'
+import { TldrawUiTooltip, tooltipManager } from './TldrawUiTooltip'
 
 /** @public */
 export interface TLUiSliderProps {
@@ -11,7 +13,7 @@ export interface TLUiSliderProps {
 	label: string
 	title: string
 	onValueChange(value: number): void
-	onHistoryMark(id: string): void
+	onHistoryMark?(id: string): void
 	'data-testid'?: string
 	ariaValueModifier?: number
 }
@@ -32,6 +34,7 @@ export const TldrawUiSlider = React.forwardRef<HTMLDivElement, TLUiSliderProps>(
 	ref
 ) {
 	const msg = useTranslation()
+	const [titleAndLabel, setTitleAndLabel] = useState('')
 
 	// XXX: Radix starts out our slider with a tabIndex of 0
 	// This causes some tab focusing issues, most prevelant in MobileStylePanel,
@@ -49,9 +52,25 @@ export const TldrawUiSlider = React.forwardRef<HTMLDivElement, TLUiSliderProps>(
 	)
 
 	const handlePointerDown = useCallback(() => {
-		onHistoryMark('click slider')
+		tooltipManager.hideAllTooltips()
+		onHistoryMark?.('click slider')
 	}, [onHistoryMark])
 
+	// N.B. This is a bit silly. The Radix slider auto-focuses which
+	// triggers TldrawUiTooltip handleFocus when we dbl-click to edit an image,
+	// which in turn makes the tooltip display prematurely.
+	// This makes it wait until we've focused to show the tooltip.
+	useEffect(() => {
+		const timeout = tltime.setTimeout(
+			'set title and label',
+			() => {
+				setTitleAndLabel(title + ' — ' + msg(label as TLUiTranslationKey))
+			},
+			0
+		)
+		return () => clearTimeout(timeout)
+	}, [label, msg, title])
+
 	// N.B. Annoying. For a11y purposes, we need Tab to work.
 	// For some reason, Radix has some custom behavior here
 	// that interferes with tabbing past the slider and then
@@ -64,36 +83,37 @@ export const TldrawUiSlider = React.forwardRef<HTMLDivElement, TLUiSliderProps>(
 
 	return (
 		<div className="tlui-slider__container">
-			<_Slider.Root
-				data-testid={testId}
-				className="tlui-slider"
-				dir="ltr"
-				min={min ?? 0}
-				max={steps}
-				step={1}
-				value={value !== null ? [value] : undefined}
-				onPointerDown={handlePointerDown}
-				onValueChange={handleValueChange}
-				onKeyDownCapture={handleKeyEvent}
-				onKeyUpCapture={handleKeyEvent}
-				title={title + ' — ' + msg(label as TLUiTranslationKey)}
-			>
-				<_Slider.Track className="tlui-slider__track" dir="ltr">
-					{value !== null && <_Slider.Range className="tlui-slider__range" dir="ltr" />}
-				</_Slider.Track>
-				{value !== null && (
-					<_Slider.Thumb
-						aria-valuemin={(min ?? 0) * ariaValueModifier}
-						aria-valuenow={value * ariaValueModifier}
-						aria-valuemax={steps * ariaValueModifier}
-						aria-label={title + ' — ' + msg(label as TLUiTranslationKey)}
-						className="tlui-slider__thumb"
-						dir="ltr"
-						ref={ref}
-						tabIndex={tabIndex}
-					/>
-				)}
-			</_Slider.Root>
+			<TldrawUiTooltip content={titleAndLabel}>
+				<_Slider.Root
+					data-testid={testId}
+					className="tlui-slider"
+					dir="ltr"
+					min={min ?? 0}
+					max={steps}
+					step={1}
+					value={value !== null ? [value] : undefined}
+					onPointerDown={handlePointerDown}
+					onValueChange={handleValueChange}
+					onKeyDownCapture={handleKeyEvent}
+					onKeyUpCapture={handleKeyEvent}
+				>
+					<_Slider.Track className="tlui-slider__track" dir="ltr">
+						{value !== null && <_Slider.Range className="tlui-slider__range" dir="ltr" />}
+					</_Slider.Track>
+					{value !== null && (
+						<_Slider.Thumb
+							aria-valuemin={(min ?? 0) * ariaValueModifier}
+							aria-valuenow={value * ariaValueModifier}
+							aria-valuemax={steps * ariaValueModifier}
+							aria-label={titleAndLabel}
+							className="tlui-slider__thumb"
+							dir="ltr"
+							ref={ref}
+							tabIndex={tabIndex}
+						/>
+					)}
+				</_Slider.Root>
+			</TldrawUiTooltip>
 		</div>
 	)
 })

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}
@@ -77,6 +94,7 @@ export interface TLUiToolbarToggleGroupProps extends React.HTMLAttributes<HTMLDi
 	// TODO: fix up this type later
 	defaultValue?: any
 	type: 'single' | 'multiple'
+	asChild?: boolean
 }
 
 /** @public @react */
@@ -84,10 +102,12 @@ export const TldrawUiToolbarToggleGroup = ({
 	children,
 	className,
 	type,
+	asChild,
 	...props
 }: TLUiToolbarToggleGroupProps) => {
 	return (
 		<_Toolbar.ToggleGroup
+			asChild={asChild}
 			type={type}
 			{...props}
 			// TODO: this fixes a bug in Radix until they fix it.