tldraw 3.16.0-canary.6f3aedaa1c01 → 3.16.0-canary.7f4043b128a3

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

@@ -1,7 +1,8 @@
 import { assert, Editor, uniqueId, useMaybeEditor, Vec } from '@tldraw/editor'
 import { Tooltip as _Tooltip } from 'radix-ui'
-import React, { createContext, useContext, useEffect, useRef, useState } from 'react'
+import React, { createContext, forwardRef, useContext, useEffect, useRef, useState } from 'react'
 import { usePrefersReducedMotion } from '../../../shapes/shared/usePrefersReducedMotion'
+import { useTldrawUiOrientation } from './layout'
 
 const DEFAULT_TOOLTIP_DELAY_MS = 700
 
@@ -247,86 +248,96 @@ function TooltipSingleton() {
 }
 
 /** @public @react */
-export function TldrawUiTooltip({
-	children,
-	content,
-	side = 'bottom',
-	sideOffset = 5,
-	disabled = false,
-}: TldrawUiTooltipProps) {
-	const editor = useMaybeEditor()
-	const tooltipId = useRef<string>(uniqueId())
-	const hasProvider = useContext(TooltipSingletonContext)
+export const TldrawUiTooltip = forwardRef<HTMLButtonElement, TldrawUiTooltipProps>(
+	({ children, content, side, sideOffset = 5, disabled = false }, ref) => {
+		const editor = useMaybeEditor()
+		const tooltipId = useRef<string>(uniqueId())
+		const hasProvider = useContext(TooltipSingletonContext)
+
+		const orientationCtx = useTldrawUiOrientation()
+		const sideToUse = side ?? orientationCtx.tooltipSide
+
+		useEffect(() => {
+			const currentTooltipId = tooltipId.current
+			return () => {
+				if (hasProvider) {
+					tooltipManager.hideTooltip(currentTooltipId, true)
+				}
+			}
+		}, [hasProvider])
 
-	// Don't show tooltip if disabled, no content, or UI labels are disabled
-	if (disabled || !content) {
-		return <>{children}</>
-	}
+		// Don't show tooltip if disabled, no content, or UI labels are disabled
+		if (disabled || !content) {
+			return <>{children}</>
+		}
 
-	// Fallback to old behavior if no provider
-	if (!hasProvider) {
-		return (
-			<_Tooltip.Root
-				delayDuration={editor?.options.tooltipDelayMs || DEFAULT_TOOLTIP_DELAY_MS}
-				disableHoverableContent
-			>
-				<_Tooltip.Trigger asChild>{children}</_Tooltip.Trigger>
-				<_Tooltip.Content
-					className="tlui-tooltip"
-					side={side}
-					sideOffset={sideOffset}
-					avoidCollisions
-					collisionPadding={8}
-					dir="ltr"
+		// Fallback to old behavior if no provider
+		if (!hasProvider) {
+			return (
+				<_Tooltip.Root
+					delayDuration={editor?.options.tooltipDelayMs || DEFAULT_TOOLTIP_DELAY_MS}
+					disableHoverableContent
 				>
-					{content}
-					<_Tooltip.Arrow className="tlui-tooltip__arrow" />
-				</_Tooltip.Content>
-			</_Tooltip.Root>
-		)
-	}
+					<_Tooltip.Trigger asChild ref={ref}>
+						{children}
+					</_Tooltip.Trigger>
+					<_Tooltip.Content
+						className="tlui-tooltip"
+						side={sideToUse}
+						sideOffset={sideOffset}
+						avoidCollisions
+						collisionPadding={8}
+						dir="ltr"
+					>
+						{content}
+						<_Tooltip.Arrow className="tlui-tooltip__arrow" />
+					</_Tooltip.Content>
+				</_Tooltip.Root>
+			)
+		}
 
-	const child = React.Children.only(children)
-	assert(React.isValidElement(child), 'TldrawUiTooltip children must be a single element')
-
-	const handleMouseEnter = (event: React.MouseEvent<HTMLElement>) => {
-		child.props.onMouseEnter?.(event)
-		tooltipManager.showTooltip(
-			tooltipId.current,
-			content,
-			event.currentTarget as HTMLElement,
-			side,
-			sideOffset
-		)
-	}
+		const child = React.Children.only(children)
+		assert(React.isValidElement(child), 'TldrawUiTooltip children must be a single element')
+
+		const handleMouseEnter = (event: React.MouseEvent<HTMLElement>) => {
+			child.props.onMouseEnter?.(event)
+			tooltipManager.showTooltip(
+				tooltipId.current,
+				content,
+				event.currentTarget as HTMLElement,
+				sideToUse,
+				sideOffset
+			)
+		}
 
-	const handleMouseLeave = (event: React.MouseEvent<HTMLElement>) => {
-		child.props.onMouseLeave?.(event)
-		tooltipManager.hideTooltip(tooltipId.current)
-	}
+		const handleMouseLeave = (event: React.MouseEvent<HTMLElement>) => {
+			child.props.onMouseLeave?.(event)
+			tooltipManager.hideTooltip(tooltipId.current)
+		}
 
-	const handleFocus = (event: React.FocusEvent<HTMLElement>) => {
-		child.props.onFocus?.(event)
-		tooltipManager.showTooltip(
-			tooltipId.current,
-			content,
-			event.currentTarget as HTMLElement,
-			side,
-			sideOffset
-		)
-	}
+		const handleFocus = (event: React.FocusEvent<HTMLElement>) => {
+			child.props.onFocus?.(event)
+			tooltipManager.showTooltip(
+				tooltipId.current,
+				content,
+				event.currentTarget as HTMLElement,
+				sideToUse,
+				sideOffset
+			)
+		}
 
-	const handleBlur = (event: React.FocusEvent<HTMLElement>) => {
-		child.props.onBlur?.(event)
-		tooltipManager.hideTooltip(tooltipId.current)
-	}
+		const handleBlur = (event: React.FocusEvent<HTMLElement>) => {
+			child.props.onBlur?.(event)
+			tooltipManager.hideTooltip(tooltipId.current)
+		}
 
-	const childrenWithHandlers = React.cloneElement(children as React.ReactElement, {
-		onMouseEnter: handleMouseEnter,
-		onMouseLeave: handleMouseLeave,
-		onFocus: handleFocus,
-		onBlur: handleBlur,
-	})
+		const childrenWithHandlers = React.cloneElement(children as React.ReactElement, {
+			onMouseEnter: handleMouseEnter,
+			onMouseLeave: handleMouseLeave,
+			onFocus: handleFocus,
+			onBlur: handleBlur,
+		})
 
-	return childrenWithHandlers
-}
+		return childrenWithHandlers
+	}
+)

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

@@ -1,10 +1,60 @@
 import classNames from 'classnames'
 import { Slot } from 'radix-ui'
-import { HTMLAttributes, ReactNode, forwardRef } from 'react'
+import { HTMLAttributes, ReactNode, createContext, forwardRef, useContext } from 'react'
+
+/** @public */
+export interface TldrawUiOrientationContext {
+	orientation: 'horizontal' | 'vertical'
+	tooltipSide: 'top' | 'right' | 'bottom' | 'left'
+}
+
+const TldrawUiOrientationContext = createContext<TldrawUiOrientationContext>({
+	orientation: 'horizontal',
+	tooltipSide: 'bottom',
+})
+
+/** @public */
+export interface TldrawUiOrientationProviderProps {
+	children: ReactNode
+	orientation: 'horizontal' | 'vertical'
+	tooltipSide?: 'top' | 'right' | 'bottom' | 'left'
+}
+/** @public @react */
+export function TldrawUiOrientationProvider({
+	children,
+	orientation,
+	tooltipSide,
+}: TldrawUiOrientationProviderProps) {
+	const prevContext = useTldrawUiOrientation()
+	// generally, we want tooltip side to cascade down through the layout - apart from when the
+	// orientation changes. If the tooltip side is "bottom", and then I include some vertical layout
+	// elements, keeping the tooltip side as bottom will cause the tooltip to overlap elements
+	// stacked on top of each other. In the absence of a tooltip side, we pick a default side based
+	// on the orientation whenever the orientation changes.
+	const tooltipSideToUse =
+		tooltipSide ??
+		(orientation === prevContext.orientation
+			? prevContext.tooltipSide
+			: orientation === 'horizontal'
+				? 'bottom'
+				: 'right')
+
+	return (
+		<TldrawUiOrientationContext.Provider value={{ orientation, tooltipSide: tooltipSideToUse }}>
+			{children}
+		</TldrawUiOrientationContext.Provider>
+	)
+}
+
+/** @public */
+export function useTldrawUiOrientation() {
+	return useContext(TldrawUiOrientationContext)
+}
 
 /** @public */
 export interface TLUiLayoutProps extends HTMLAttributes<HTMLDivElement> {
 	children: ReactNode
+	tooltipSide?: 'top' | 'right' | 'bottom' | 'left'
 	asChild?: boolean
 }
 
@@ -14,9 +64,29 @@ export interface TLUiLayoutProps extends HTMLAttributes<HTMLDivElement> {
  * @public @react
  */
 export const TldrawUiRow = forwardRef<HTMLDivElement, TLUiLayoutProps>(
-	({ asChild, className, ...props }, ref) => {
+	({ asChild, className, tooltipSide, ...props }, ref) => {
+		const Component = asChild ? Slot.Root : 'div'
+		return (
+			<TldrawUiOrientationProvider orientation="horizontal" tooltipSide={tooltipSide}>
+				<Component ref={ref} className={classNames('tlui-row', className)} {...props} />
+			</TldrawUiOrientationProvider>
+		)
+	}
+)
+
+/**
+ * A column, usually of UI controls like buttons, select dropdown, checkboxes, etc.
+ *
+ * @public @react
+ */
+export const TldrawUiColumn = forwardRef<HTMLDivElement, TLUiLayoutProps>(
+	({ asChild, className, tooltipSide, ...props }, ref) => {
 		const Component = asChild ? Slot.Root : 'div'
-		return <Component ref={ref} className={classNames('tlui-row', className)} {...props} />
+		return (
+			<TldrawUiOrientationProvider orientation="vertical" tooltipSide={tooltipSide}>
+				<Component ref={ref} className={classNames('tlui-column', className)} {...props} />
+			</TldrawUiOrientationProvider>
+		)
 	}
 )
 
@@ -26,8 +96,12 @@ export const TldrawUiRow = forwardRef<HTMLDivElement, TLUiLayoutProps>(
  *
  * @public @react */
 export const TldrawUiGrid = forwardRef<HTMLDivElement, TLUiLayoutProps>(
-	({ asChild, className, ...props }, ref) => {
+	({ asChild, className, tooltipSide, ...props }, ref) => {
 		const Component = asChild ? Slot.Root : 'div'
-		return <Component ref={ref} className={classNames('tlui-grid', className)} {...props} />
+		return (
+			<TldrawUiOrientationProvider orientation="horizontal" tooltipSide={tooltipSide}>
+				<Component ref={ref} className={classNames('tlui-grid', className)} {...props} />
+			</TldrawUiOrientationProvider>
+		)
 	}
 )

package/src/lib/ui/components/primitives/menus/TldrawUiMenuGroup.tsx

@@ -3,6 +3,7 @@ import { ReactNode } from 'react'
 import { unwrapLabel } from '../../../context/actions'
 import { TLUiTranslationKey } from '../../../hooks/useTranslation/TLUiTranslationKey'
 import { useTranslation } from '../../../hooks/useTranslation/useTranslation'
+import { TldrawUiColumn, TldrawUiGrid, TldrawUiRow, useTldrawUiOrientation } from '../layout'
 import { TldrawUiDropdownMenuGroup } from '../TldrawUiDropdownMenu'
 import { useTldrawUiMenuContext } from './TldrawUiMenuContext'
 
@@ -19,17 +20,18 @@ export interface TLUiMenuGroupProps<TranslationKey extends string = string> {
 
 /** @public @react */
 export function TldrawUiMenuGroup({ id, label, className, children }: TLUiMenuGroupProps) {
-	const { type: menuType, sourceId } = useTldrawUiMenuContext()
+	const menu = useTldrawUiMenuContext()
+	const { orientation } = useTldrawUiOrientation()
 	const msg = useTranslation()
-	const labelToUse = unwrapLabel(label, menuType)
+	const labelToUse = unwrapLabel(label, menu.type)
 	const labelStr = labelToUse ? msg(labelToUse as TLUiTranslationKey) : undefined
 
-	switch (menuType) {
+	switch (menu.type) {
 		case 'panel': {
 			return (
 				<div
 					className={classNames('tlui-menu__group', className)}
-					data-testid={`${sourceId}-group.${id}`}
+					data-testid={`${menu.sourceId}-group.${id}`}
 				>
 					{children}
 				</div>
@@ -37,7 +39,10 @@ export function TldrawUiMenuGroup({ id, label, className, children }: TLUiMenuGr
 		}
 		case 'menu': {
 			return (
-				<TldrawUiDropdownMenuGroup className={className} data-testid={`${sourceId}-group.${id}`}>
+				<TldrawUiDropdownMenuGroup
+					className={className}
+					data-testid={`${menu.sourceId}-group.${id}`}
+				>
 					{children}
 				</TldrawUiDropdownMenuGroup>
 			)
@@ -47,7 +52,7 @@ export function TldrawUiMenuGroup({ id, label, className, children }: TLUiMenuGr
 				<div
 					dir="ltr"
 					className={classNames('tlui-menu__group', className)}
-					data-testid={`${sourceId}-group.${id}`}
+					data-testid={`${menu.sourceId}-group.${id}`}
 				>
 					{children}
 				</div>
@@ -56,12 +61,30 @@ export function TldrawUiMenuGroup({ id, label, className, children }: TLUiMenuGr
 		case 'keyboard-shortcuts': {
 			// todo: if groups need a label, let's give em a label
 			return (
-				<div className="tlui-shortcuts-dialog__group" data-testid={`${sourceId}-group.${id}`}>
+				<div className="tlui-shortcuts-dialog__group" data-testid={`${menu.sourceId}-group.${id}`}>
 					<h2 className="tlui-shortcuts-dialog__group__title">{labelStr}</h2>
 					<div className="tlui-shortcuts-dialog__group__content">{children}</div>
 				</div>
 			)
 		}
+		case 'toolbar': {
+			const Layout = orientation === 'horizontal' ? TldrawUiRow : TldrawUiColumn
+			return (
+				<Layout className="tlui-main-toolbar__group" data-testid={`${menu.sourceId}-group.${id}`}>
+					{children}
+				</Layout>
+			)
+		}
+		case 'toolbar-overflow': {
+			return (
+				<TldrawUiGrid
+					className="tlui-main-toolbar__group"
+					data-testid={`${menu.sourceId}-group.${id}`}
+				>
+					{children}
+				</TldrawUiGrid>
+			)
+		}
 		default: {
 			return children
 		}

package/src/lib/ui/version.ts

@@ -1,9 +1,9 @@
 // This file is automatically generated by internal/scripts/refresh-assets.ts.
 // Do not edit manually. Or do, I'm a comment, not a cop.
 
-export const version = '3.16.0-canary.6f3aedaa1c01'
+export const version = '3.16.0-canary.7f4043b128a3'
 export const publishDates = {
 	major: '2024-09-13T14:36:29.063Z',
-	minor: '2025-08-11T09:05:51.468Z',
-	patch: '2025-08-11T09:05:51.468Z',
+	minor: '2025-08-12T08:51:53.161Z',
+	patch: '2025-08-12T08:51:53.161Z',
 }

package/src/lib/ui.css

@@ -203,15 +203,23 @@
 
 .tlui-main-toolbar__lock-button {
 	position: absolute;
-	top: 4px;
-	right: 0px;
 	pointer-events: all;
 	height: 40px;
 	width: 40px;
-	min-width: 0px;
 	border-radius: var(--radius-2);
 }
 
+.tlui-main-toolbar--horizontal .tlui-main-toolbar__lock-button {
+	top: 4px;
+	right: 0px;
+	min-width: 0px;
+}
+
+.tlui-main-toolbar--vertical .tlui-main-toolbar__lock-button {
+	bottom: 0px;
+	min-height: 0px;
+}
+
 .tlui-main-toolbar__lock-button::after {
 	top: 4px;
 	left: 8px;
@@ -244,12 +252,12 @@
 	opacity: 1;
 }
 
-.tlui-layout__mobile .tlui-button__tool {
+.tlui-layout__mobile .tlui-main-toolbar--horizontal .tlui-button__tool {
 	height: 48px;
 	width: 43px;
 }
 
-.tlui-layout__mobile .tlui-button__tool > .tlui-icon {
+.tlui-layout__mobile .tlui-main-toolbar--horizontal .tlui-button__tool > .tlui-icon {
 	height: 16px;
 	width: 16px;
 }
@@ -266,6 +274,18 @@
 	margin-right: -2px;
 }
 
+/* Column layout */
+
+.tlui-column {
+	display: flex;
+	flex-direction: column;
+	padding: 2px 0;
+}
+.tlui-column > * {
+	margin-top: -2px;
+	margin-bottom: -2px;
+}
+
 /* Grid layout */
 
 .tlui-grid {
@@ -1057,11 +1077,12 @@
 
 .tlui-layout__bottom {
 	grid-row: 2;
+	width: 100%;
+	overflow: hidden;
 }
 
 .tlui-layout__bottom__main {
 	width: 100%;
-	position: relative;
 	display: flex;
 	align-items: flex-end;
 	justify-content: center;
@@ -1077,7 +1098,6 @@
 	pointer-events: all;
 	position: absolute;
 	left: 0px;
-	bottom: 0px;
 }
 
 .tlui-navigation-panel::before {
@@ -1124,7 +1144,23 @@
 	align-items: center;
 	justify-content: center;
 	flex-grow: 2;
+}
+
+.tlui-main-toolbar--horizontal {
 	padding-bottom: calc(var(--space-3) + var(--sab));
+	max-width: 100%;
+}
+
+.tlui-main-toolbar--vertical {
+	position: absolute;
+	left: 0;
+	top: 90px; /* height of page menu + 'back to content' button */
+	bottom: 140px; /* height of expanded mini-map */
+	padding-left: calc(var(--space-3) + var(--sab));
+}
+
+[data-breakpoints-below*='6'] .tlui-main-toolbar--vertical {
+	bottom: 90px; /* collapsed mini-map, but same as top to keep things looking even */
 }
 
 /* Centered Content */
@@ -1133,46 +1169,69 @@
 	width: fit-content;
 	display: flex;
 	gap: var(--space-3);
-	align-items: flex-end;
+	align-items: flex-start;
+}
+
+.tlui-main-toolbar--vertical .tlui-main-toolbar__inner {
+	flex-direction: column;
 }
 
-.tlui-main-toolbar__left {
+.tlui-main-toolbar--horizontal .tlui-main-toolbar__left {
 	width: fit-content;
 }
+.tlui-main-toolbar--vertical .tlui-main-toolbar__left {
+	display: flex;
+	height: fit-content;
+}
 
 /* Row of controls + lock button */
 .tlui-main-toolbar__extras {
 	position: relative;
 	z-index: var(--layer-above);
-	width: 100%;
 	pointer-events: none;
-	top: 6px;
-	height: 48px;
+	align-self: stretch;
 }
 
 .tlui-main-toolbar__extras:empty {
 	display: none;
 }
 
+.tlui-main-toolbar--horizontal .tlui-main-toolbar__extras {
+	height: 48px;
+	top: 6px;
+}
+
+.tlui-main-toolbar--vertical .tlui-main-toolbar__extras {
+	width: 48px;
+	order: 1;
+}
+
 .tlui-main-toolbar__extras__controls {
-	display: flex;
 	position: relative;
-	flex-direction: row;
 	z-index: var(--layer-above);
 	background-color: var(--color-low);
+	border: 2px solid var(--color-background);
+	pointer-events: all;
+}
+
+.tlui-main-toolbar--horizontal .tlui-main-toolbar__extras__controls {
 	border-top-left-radius: var(--radius-4);
 	border-top-right-radius: var(--radius-4);
-	border: 2px solid var(--color-background);
 	margin-left: 8px;
 	margin-right: 0px;
-	pointer-events: all;
+	width: fit-content;
+}
+
+.tlui-main-toolbar--vertical .tlui-main-toolbar__extras__controls {
+	border-top-right-radius: var(--radius-4);
+	border-bottom-right-radius: var(--radius-4);
+	margin-top: 8px;
+	margin-left: -2px;
+	margin-bottom: 0px;
 	width: fit-content;
 }
 
 .tlui-main-toolbar__tools {
-	display: flex;
-	flex-direction: row;
-	align-items: center;
 	border-radius: var(--radius-4);
 	z-index: var(--layer-panels);
 	pointer-events: all;
@@ -1181,26 +1240,71 @@
 	box-shadow: var(--shadow-2);
 }
 
-.tlui-main-toolbar__overflow {
+.tlui-main-toolbar--horizontal .tlui-main-toolbar__mobile-style-panel {
+	align-self: flex-end;
+}
+.tlui-main-toolbar--vertical .tlui-main-toolbar__mobile-style-panel {
+	align-self: flex-start;
+}
+
+.tlui-main-toolbar--horizontal .tlui-main-toolbar__overflow {
 	width: 40px;
 	margin-left: 2px;
 }
+.tlui-main-toolbar--vertical .tlui-main-toolbar__overflow {
+	height: 40px;
+	margin-top: 2px;
+}
 
-.tlui-layout__mobile .tlui-main-toolbar__overflow {
+.tlui-layout__mobile .tlui-main-toolbar--horizontal .tlui-main-toolbar__overflow {
 	width: 32px;
 	padding: 0px;
 }
 
-.tlui-main-toolbar *[data-state='open']::after {
+.tlui-main-toolbar--horizontal *[data-state='open']::after {
 	background: linear-gradient(0deg, rgba(144, 144, 144, 0) 0%, var(--color-muted-2) 100%);
 	opacity: 1;
 }
+.tlui-main-toolbar--vertical *[data-state='open']::after {
+	background: linear-gradient(90deg, rgba(144, 144, 144, 0) 0%, var(--color-muted-2) 100%);
+	opacity: 1;
+}
+
+.tlui-main-toolbar__tools [data-toolbar-visible='false'],
+.tlui-main-toolbar__overflow-content [data-toolbar-visible='false'] {
+	display: none;
+}
+
+.tlui-main-toolbar__group:empty {
+	display: none;
+}
+.tlui-row.tlui-main-toolbar__group:not(:nth-last-child(-n + 1 of [data-toolbar-visible='true'])) {
+	border-right: 1px solid var(--color-divider);
+	margin-right: 2px;
+}
+.tlui-column.tlui-main-toolbar__group:not(
+		:nth-last-child(-n + 1 of [data-toolbar-visible='true'])
+	) {
+	border-bottom: 1px solid var(--color-divider);
+	margin-bottom: 2px;
+}
+.tlui-grid.tlui-main-toolbar__group {
+	grid-column: 1 / span 4;
+}
+.tlui-grid.tlui-main-toolbar__group:not(:nth-last-child(-n + 1 of [data-toolbar-visible='true'])) {
+	border-bottom: 1px solid var(--color-divider);
+	margin-bottom: 2px;
+}
 
 @media (hover: hover) {
-	.tlui-main-toolbar *[data-state='open']:not(:hover)::after {
+	.tlui-main-toolbar--horizontal *[data-state='open']:not(:hover)::after {
 		background: linear-gradient(0deg, rgba(144, 144, 144, 0) 0%, var(--color-muted-2) 100%);
 		opacity: 1;
 	}
+	.tlui-main-toolbar--vertical *[data-state='open']:not(:hover)::after {
+		background: linear-gradient(90deg, rgba(144, 144, 144, 0) 0%, var(--color-muted-2) 100%);
+		opacity: 1;
+	}
 }
 
 /* ------------------- Tooltip -------------------- */