tldraw 3.16.0-canary.5dac57cf9465 → 3.16.0-canary.6f3aedaa1c01

package/src/lib/shapes/draw/DrawShapeUtil.tsx

@@ -14,6 +14,7 @@ import {
 	VecLike,
 	drawShapeMigrations,
 	drawShapeProps,
+	getColorValue,
 	last,
 	lerp,
 	rng,
@@ -289,7 +290,7 @@ function DrawShapeSvg({ shape, zoomOverride }: { shape: TLDrawShape; zoomOverrid
 				<path
 					d={svgInk(allPointsFromSegments, options)}
 					strokeLinecap="round"
-					fill={theme[shape.props.color].solid}
+					fill={getColorValue(theme, shape.props.color, 'solid')}
 				/>
 			</>
 		)
@@ -313,8 +314,8 @@ function DrawShapeSvg({ shape, zoomOverride }: { shape: TLDrawShape; zoomOverrid
 			<path
 				d={solidStrokePath}
 				strokeLinecap="round"
-				fill={isDot ? theme[shape.props.color].solid : 'none'}
-				stroke={theme[shape.props.color].solid}
+				fill={isDot ? getColorValue(theme, shape.props.color, 'solid') : 'none'}
+				stroke={getColorValue(theme, shape.props.color, 'solid')}
 				strokeWidth={sw}
 				strokeDasharray={isDot ? 'none' : getDrawShapeStrokeDashArray(shape, sw, dotAdjustment)}
 				strokeDashoffset="0"

package/src/lib/shapes/frame/FrameShapeUtil.tsx

@@ -19,6 +19,7 @@ import {
 	compact,
 	frameShapeMigrations,
 	frameShapeProps,
+	getColorValue,
 	getDefaultColorTheme,
 	lerp,
 	resizeBox,
@@ -220,13 +221,12 @@ export class FrameShapeUtil extends BaseBoxShapeUtil<TLFrameShape> {
 		)
 
 		const showFrameColors = this.options.showColors
-
-		const color = theme[shape.props.color]
-		const frameFill = showFrameColors ? color.frame.fill : theme.black.frame.fill
-		const frameStroke = showFrameColors ? color.frame.stroke : theme.black.frame.stroke
-		const frameHeadingStroke = showFrameColors ? color.frame.headingStroke : theme.background
-		const frameHeadingFill = showFrameColors ? color.frame.headingFill : theme.background
-		const frameHeadingText = showFrameColors ? color.frame.text : theme.text
+		const colorToUse = showFrameColors ? shape.props.color : 'black'
+		const frameFill = getColorValue(theme, colorToUse, 'frameFill')
+		const frameStroke = getColorValue(theme, colorToUse, 'frameStroke')
+		const frameHeadingStroke = getColorValue(theme, colorToUse, 'frameHeadingStroke')
+		const frameHeadingFill = getColorValue(theme, colorToUse, 'frameHeadingFill')
+		const frameHeadingText = getColorValue(theme, colorToUse, 'frameText')
 
 		return (
 			<>
@@ -277,13 +277,12 @@ export class FrameShapeUtil extends BaseBoxShapeUtil<TLFrameShape> {
 		const text = createTextJsxFromSpans(this.editor, spans, opts)
 
 		const showFrameColors = this.options.showColors
-
-		const color = theme[shape.props.color]
-		const frameFill = showFrameColors ? color.frame.fill : theme.black.frame.fill
-		const frameStroke = showFrameColors ? color.frame.stroke : theme.black.frame.stroke
-		const frameHeadingStroke = showFrameColors ? color.frame.headingStroke : theme.background
-		const frameHeadingFill = showFrameColors ? color.frame.headingFill : theme.background
-		const frameHeadingText = showFrameColors ? color.frame.text : theme.text
+		const colorToUse = showFrameColors ? shape.props.color : 'black'
+		const frameFill = getColorValue(theme, colorToUse, 'frameFill')
+		const frameStroke = getColorValue(theme, colorToUse, 'frameStroke')
+		const frameHeadingStroke = getColorValue(theme, colorToUse, 'frameHeadingStroke')
+		const frameHeadingFill = getColorValue(theme, colorToUse, 'frameHeadingFill')
+		const frameHeadingText = getColorValue(theme, colorToUse, 'frameText')
 
 		return (
 			<>

package/src/lib/shapes/geo/GeoShapeUtil.tsx

@@ -18,6 +18,7 @@ import {
 	exhaustiveSwitchError,
 	geoShapeMigrations,
 	geoShapeProps,
+	getColorValue,
 	getDefaultColorTheme,
 	getFontsFromRichText,
 	isEqual,
@@ -220,7 +221,7 @@ export class GeoShapeUtil extends BaseBoxShapeUtil<TLGeoShape> {
 							verticalAlign={verticalAlign}
 							richText={richText}
 							isSelected={isOnlySelected}
-							labelColor={theme[props.labelColor].solid}
+							labelColor={getColorValue(theme, props.labelColor, 'solid')}
 							wrap
 						/>
 					</HTMLContainer>
@@ -278,7 +279,7 @@ export class GeoShapeUtil extends BaseBoxShapeUtil<TLGeoShape> {
 					align={props.align}
 					verticalAlign={props.verticalAlign}
 					richText={props.richText}
-					labelColor={theme[props.labelColor].solid}
+					labelColor={getColorValue(theme, props.labelColor, 'solid')}
 					bounds={bounds}
 					padding={LABEL_PADDING}
 				/>

package/src/lib/shapes/geo/components/GeoShapeBody.tsx

@@ -1,4 +1,4 @@
-import { TLGeoShape } from '@tldraw/editor'
+import { getColorValue, TLGeoShape } from '@tldraw/editor'
 import { ShapeFill } from '../../shared/ShapeFill'
 import { STROKE_SIZES } from '../../shared/default-shape-constants'
 import { useDefaultColorTheme } from '../../shared/useDefaultColorTheme'
@@ -33,7 +33,7 @@ export function GeoShapeBody({
 				strokeWidth,
 				forceSolid,
 				randomSeed: shape.id,
-				props: { fill: 'none', stroke: theme[color].solid },
+				props: { fill: 'none', stroke: getColorValue(theme, color, 'solid') },
 			})}
 		</>
 	)

package/src/lib/shapes/highlight/HighlightShapeUtil.tsx

@@ -10,6 +10,7 @@ import {
 	TLHighlightShapeProps,
 	TLResizeInfo,
 	VecLike,
+	getColorValue,
 	highlightShapeMigrations,
 	highlightShapeProps,
 	last,
@@ -289,7 +290,12 @@ function HighlightRenderer({
 			: getShapeDot(shape.props.segments[0].points[0])
 
 	const colorSpace = useColorSpace()
-	const color = theme[shape.props.color].highlight[colorSpace]
+
+	const color = getColorValue(
+		theme,
+		shape.props.color,
+		colorSpace === 'p3' ? 'highlightP3' : 'highlightSrgb'
+	)
 
 	return (
 		<path

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/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} />
+			return <path fill={getColorValue(theme, color, '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/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/tools/SelectTool/childStates/Translating.ts

@@ -28,7 +28,6 @@ export type TranslatingInfo = TLPointerEventInfo & {
 	isCreating?: boolean
 	creatingMarkId?: string
 	onCreate?(): void
-	didStartInPit?: boolean
 	onInteractionEnd?: string
 }
 

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

@@ -1,6 +1,7 @@
 import {
 	DefaultColorStyle,
 	TLDefaultColorStyle,
+	getColorValue,
 	getDefaultColorTheme,
 	useEditor,
 	useValue,
@@ -25,9 +26,10 @@ export function MobileStylePanel() {
 	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',

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

@@ -1,4 +1,4 @@
-import { Editor, uniqueId, useMaybeEditor, Vec } from '@tldraw/editor'
+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 { usePrefersReducedMotion } from '../../../shapes/shared/usePrefersReducedMotion'
@@ -69,20 +69,32 @@ class TooltipManager {
 		this.notify()
 	}
 
-	hideTooltip(tooltipId: string) {
-		// Only hide if this is the current tooltip
-		if (this.currentTooltipId === tooltipId) {
-			// Start destroy timeout (1 second)
-			if (this.editor) {
-				this.destroyTimeoutId = this.editor.timers.setTimeout(() => {
-					this.currentTooltipId = null
-					this.currentContent = ''
-					this.activeElement = null
-					this.destroyTimeoutId = null
-					this.notify()
-				}, 300)
+	hideTooltip(tooltipId: string, instant: boolean = false) {
+		const hide = () => {
+			// Only hide if this is the current tooltip
+			if (this.currentTooltipId === tooltipId) {
+				this.currentTooltipId = null
+				this.currentContent = ''
+				this.activeElement = null
+				this.destroyTimeoutId = null
+				this.notify()
 			}
 		}
+
+		if (instant) {
+			hide()
+		} else if (this.editor) {
+			// Start destroy timeout (1 second)
+			this.destroyTimeoutId = this.editor.timers.setTimeout(hide, 300)
+		}
+	}
+
+	hideAllTooltips() {
+		this.currentTooltipId = null
+		this.currentContent = ''
+		this.activeElement = null
+		this.destroyTimeoutId = null
+		this.notify()
 	}
 
 	getCurrentTooltipData() {
@@ -96,7 +108,7 @@ class TooltipManager {
 	}
 }
 
-const tooltipManager = TooltipManager.getInstance()
+export const tooltipManager = TooltipManager.getInstance()
 
 // Context for the tooltip singleton
 const TooltipSingletonContext = createContext<boolean>(false)
@@ -274,7 +286,11 @@ export function TldrawUiTooltip({
 		)
 	}
 
+	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,
@@ -284,11 +300,13 @@ export function TldrawUiTooltip({
 		)
 	}
 
-	const handleMouseLeave = () => {
+	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,
@@ -298,7 +316,8 @@ export function TldrawUiTooltip({
 		)
 	}
 
-	const handleBlur = () => {
+	const handleBlur = (event: React.FocusEvent<HTMLElement>) => {
+		child.props.onBlur?.(event)
 		tooltipManager.hideTooltip(tooltipId.current)
 	}
 

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

@@ -1,9 +1,18 @@
-import { exhaustiveSwitchError, preventDefault } from '@tldraw/editor'
+import {
+	exhaustiveSwitchError,
+	getPointerInfo,
+	preventDefault,
+	TLPointerEventInfo,
+	useEditor,
+	Vec,
+	VecModel,
+} from '@tldraw/editor'
 import { ContextMenu as _ContextMenu } from 'radix-ui'
-import { useState } from 'react'
+import { useMemo, useState } from 'react'
 import { unwrapLabel } from '../../../context/actions'
 import { TLUiEventSource } from '../../../context/events'
 import { useReadonly } from '../../../hooks/useReadonly'
+import { TLUiToolItem } from '../../../hooks/useTools'
 import { TLUiTranslationKey } from '../../../hooks/useTranslation/TLUiTranslationKey'
 import { useTranslation } from '../../../hooks/useTranslation/useTranslation'
 import { kbdStr } from '../../../kbd-utils'
@@ -15,6 +24,7 @@ import { TldrawUiDropdownMenuItem } from '../TldrawUiDropdownMenu'
 import { TLUiIconJsx } from '../TldrawUiIcon'
 import { TldrawUiKbd } from '../TldrawUiKbd'
 import { TldrawUiToolbarButton } from '../TldrawUiToolbar'
+import { tooltipManager } from '../TldrawUiTooltip'
 import { useTldrawUiMenuContext } from './TldrawUiMenuContext'
 
 /** @public */
@@ -63,6 +73,10 @@ export interface TLUiMenuItemProps<
 	 * Whether the item is selected.
 	 */
 	isSelected?: boolean
+	/**
+	 * The function to call when the item is dragged. If this is provided, the item will be draggable.
+	 */
+	onDragStart?(source: TLUiEventSource, info: TLPointerEventInfo): void
 }
 
 /** @public @react */
@@ -81,6 +95,7 @@ export function TldrawUiMenuItem<
 	onSelect,
 	noClose,
 	isSelected,
+	onDragStart,
 }: TLUiMenuItemProps<TranslationKey, IconType>) {
 	const { type: menuType, sourceId } = useTldrawUiMenuContext()
 
@@ -207,6 +222,20 @@ export function TldrawUiMenuItem<
 			)
 		}
 		case 'toolbar': {
+			if (onDragStart) {
+				return (
+					<DraggableToolbarButton
+						id={id}
+						icon={icon}
+						onSelect={onSelect}
+						onDragStart={onDragStart}
+						labelToUse={labelToUse}
+						titleStr={titleStr}
+						disabled={disabled}
+						isSelected={isSelected}
+					/>
+				)
+			}
 			return (
 				<TldrawUiToolbarButton
 					aria-label={labelStr}
@@ -227,6 +256,21 @@ export function TldrawUiMenuItem<
 			)
 		}
 		case 'toolbar-overflow': {
+			if (onDragStart) {
+				return (
+					<DraggableToolbarButton
+						id={id}
+						icon={icon}
+						onSelect={onSelect}
+						onDragStart={onDragStart}
+						labelToUse={labelToUse}
+						titleStr={titleStr}
+						disabled={disabled}
+						isSelected={isSelected}
+						overflow
+					/>
+				)
+			}
 			return (
 				<TldrawUiToolbarButton
 					aria-label={labelStr}
@@ -248,3 +292,175 @@ export function TldrawUiMenuItem<
 		}
 	}
 }
+
+function useDraggableEvents(
+	onDragStart: TLUiToolItem['onDragStart'],
+	onSelect: TLUiToolItem['onSelect']
+) {
+	const editor = useEditor()
+	const events = useMemo(() => {
+		let state = { name: 'idle' } as
+			| {
+					name: 'idle'
+			  }
+			| {
+					name: 'pointing'
+					screenSpaceStart: VecModel
+			  }
+			| {
+					name: 'dragging'
+					screenSpaceStart: VecModel
+			  }
+			| {
+					name: 'dragged'
+			  }
+
+		function handlePointerDown(e: React.PointerEvent<HTMLButtonElement>) {
+			state = {
+				name: 'pointing',
+				screenSpaceStart: { x: e.clientX, y: e.clientY },
+			}
+
+			e.currentTarget.setPointerCapture(e.pointerId)
+		}
+
+		function handlePointerMove(e: React.PointerEvent<HTMLButtonElement>) {
+			if ((e as any).isSpecialRedispatchedEvent) return
+
+			if (state.name === 'pointing') {
+				const distanceSq = Vec.Dist2(state.screenSpaceStart, { x: e.clientX, y: e.clientY })
+				if (
+					distanceSq >
+					(editor.getInstanceState().isCoarsePointer
+						? editor.options.coarseDragDistanceSquared
+						: editor.options.dragDistanceSquared)
+				) {
+					const screenSpaceStart = state.screenSpaceStart
+					state = {
+						name: 'dragging',
+						screenSpaceStart,
+					}
+
+					editor.run(() => {
+						// Set origin point
+						editor.dispatch({
+							type: 'pointer',
+							target: 'canvas',
+							name: 'pointer_down',
+							...getPointerInfo(e),
+							point: screenSpaceStart,
+						})
+
+						// Pointer down potentially selects shapes, so we need to deselect them.
+						editor.selectNone()
+
+						// start drag
+						onDragStart?.('toolbar', {
+							type: 'pointer',
+							target: 'canvas',
+							name: 'pointer_move',
+							...getPointerInfo(e),
+							point: screenSpaceStart,
+						})
+
+						tooltipManager.hideAllTooltips()
+					})
+				}
+			}
+		}
+
+		function handlePointerUp(e: React.PointerEvent<HTMLButtonElement>) {
+			if ((e as any).isSpecialRedispatchedEvent) return
+
+			e.currentTarget.releasePointerCapture(e.pointerId)
+
+			editor.dispatch({
+				type: 'pointer',
+				target: 'canvas',
+				name: 'pointer_up',
+				...getPointerInfo(e),
+			})
+		}
+
+		function handleClick() {
+			if (state.name === 'dragging' || state.name === 'dragged') {
+				state = { name: 'idle' }
+				return true
+			}
+
+			state = { name: 'idle' }
+			onSelect?.('toolbar')
+		}
+
+		return {
+			onPointerDown: handlePointerDown,
+			onPointerMove: handlePointerMove,
+			onPointerUp: handlePointerUp,
+			onClick: handleClick,
+		}
+	}, [onDragStart, editor, onSelect])
+
+	return events
+}
+
+function DraggableToolbarButton({
+	id,
+	labelToUse,
+	titleStr,
+	disabled,
+	isSelected,
+	icon,
+	onSelect,
+	onDragStart,
+	overflow,
+}: {
+	id: string
+	disabled: boolean
+	labelToUse?: string
+	titleStr?: string
+	isSelected?: boolean
+	icon: TLUiMenuItemProps['icon']
+	onSelect: TLUiMenuItemProps['onSelect']
+	onDragStart: TLUiMenuItemProps['onDragStart']
+	overflow?: boolean
+}) {
+	const events = useDraggableEvents(onDragStart, onSelect)
+
+	if (overflow) {
+		return (
+			<TldrawUiToolbarButton
+				aria-label={labelToUse}
+				aria-pressed={isSelected ? 'true' : 'false'}
+				isActive={isSelected}
+				className="tlui-button-grid__button"
+				data-testid={`tools.more.${id}`}
+				data-value={id}
+				disabled={disabled}
+				title={titleStr}
+				type="icon"
+				{...events}
+			>
+				<TldrawUiButtonIcon icon={icon!} />
+			</TldrawUiToolbarButton>
+		)
+	}
+
+	return (
+		<TldrawUiToolbarButton
+			aria-label={labelToUse}
+			aria-pressed={isSelected ? 'true' : 'false'}
+			data-testid={`tools.${id}`}
+			data-value={id}
+			disabled={disabled}
+			onTouchStart={(e) => {
+				preventDefault(e)
+				onSelect('toolbar')
+			}}
+			title={titleStr}
+			type="tool"
+			{...events}
+		>
+			<TldrawUiButtonIcon icon={icon!} />
+		</TldrawUiToolbarButton>
+	)
+}