tldraw 5.2.0-next.e2b8d10bf10e → 5.2.0

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

@@ -12,8 +12,10 @@ export function DefaultKeyboardShortcutsDialogContent() {
 			<TldrawUiMenuGroup label="shortcuts-dialog.tools" id="tools">
 				<TldrawUiMenuActionItem actionId="toggle-tool-lock" />
 				<TldrawUiMenuActionItem actionId="insert-media" />
+				<TldrawUiMenuActionItem actionId="insert-embed" />
 				<TldrawUiMenuToolItem toolId="select" />
 				<TldrawUiMenuToolItem toolId="draw" />
+				<TldrawUiMenuToolItem toolId="highlight" />
 				<TldrawUiMenuToolItem toolId="eraser" />
 				<TldrawUiMenuToolItem toolId="hand" />
 				<TldrawUiMenuToolItem toolId="rectangle" />
@@ -43,10 +45,13 @@ export function DefaultKeyboardShortcutsDialogContent() {
 				<TldrawUiMenuActionItem actionId="redo" />
 				<TldrawUiMenuActionItem actionId="cut" />
 				<TldrawUiMenuActionItem actionId="copy" />
+				<TldrawUiMenuActionItem actionId="copy-as-png" />
+				<TldrawUiMenuActionItem actionId="copy-hovered-styles" />
 				<TldrawUiMenuActionItem actionId="paste" />
 				<TldrawUiMenuActionItem actionId="select-all" />
 				<TldrawUiMenuActionItem actionId="delete" />
 				<TldrawUiMenuActionItem actionId="duplicate" />
+				<TldrawUiMenuActionItem actionId="print" />
 			</TldrawUiMenuGroup>
 			<TldrawUiMenuGroup label="shortcuts-dialog.view" id="view">
 				<TldrawUiMenuActionItem actionId="select-zoom-tool" />
@@ -71,6 +76,9 @@ export function DefaultKeyboardShortcutsDialogContent() {
 				<TldrawUiMenuActionItem actionId="send-to-back" />
 				<TldrawUiMenuActionItem actionId="group" />
 				<TldrawUiMenuActionItem actionId="ungroup" />
+				<TldrawUiMenuActionItem actionId="frame-selection" />
+				<TldrawUiMenuActionItem actionId="flatten-to-image" />
+				<TldrawUiMenuActionItem actionId="toggle-lock" />
 				<TldrawUiMenuActionItem actionId="flip-horizontal" />
 				<TldrawUiMenuActionItem actionId="flip-vertical" />
 				<TldrawUiMenuActionItem actionId="align-top" />
@@ -79,6 +87,8 @@ export function DefaultKeyboardShortcutsDialogContent() {
 				<TldrawUiMenuActionItem actionId="align-left" />
 				<TldrawUiMenuActionItem actionId="align-center-horizontal" />
 				<TldrawUiMenuActionItem actionId="align-right" />
+				<TldrawUiMenuActionItem actionId="distribute-horizontal" />
+				<TldrawUiMenuActionItem actionId="distribute-vertical" />
 			</TldrawUiMenuGroup>
 			<TldrawUiMenuGroup label="shortcuts-dialog.text-formatting" id="text">
 				<TldrawUiMenuItem

package/src/lib/ui/components/Minimap/DefaultMinimap.tsx

@@ -15,6 +15,11 @@ import * as React from 'react'
 import { useTranslation } from '../../hooks/useTranslation/useTranslation'
 import { MinimapManager } from './MinimapManager'
 
+// Squared distance (in screen pixels) the pointer can move after pointer down before
+// it counts as a drag. Sub-pixel jitter that accompanies a click stays below this, so
+// it doesn't recenter the camera instantly and cut off the easing animation.
+const CLICK_JITTER_THRESHOLD_SQ = 4
+
 /** @public @react */
 export function DefaultMinimap() {
 	const editor = useEditor()
@@ -24,6 +29,7 @@ export function DefaultMinimap() {
 	const rCanvas = React.useRef<HTMLCanvasElement>(null!)
 	const rPointing = React.useRef(false)
 	const rActivePointerId = React.useRef<number | null>(null)
+	const rOriginScreenPoint = React.useRef(new Vec())
 
 	const minimapRef = React.useRef<MinimapManager | undefined>(undefined)
 
@@ -47,25 +53,18 @@ export function DefaultMinimap() {
 	const onDoubleClick = React.useCallback(
 		(e: React.MouseEvent<HTMLCanvasElement>) => {
 			if (!editor.getCurrentPageShapeIds().size) return
-			if (!minimapRef.current) return
-
-			const point = minimapRef.current.minimapScreenPointToPagePoint(
-				e.clientX,
-				e.clientY,
-				false,
-				false
-			)
+			const minimap = minimapRef.current
+			if (!minimap) return
 
-			const clampedPoint = minimapRef.current.minimapScreenPointToPagePoint(
-				e.clientX,
-				e.clientY,
-				false,
-				true
-			)
+			const { clientX: x, clientY: y } = e
 
-			minimapRef.current.originPagePoint.setTo(clampedPoint)
-			minimapRef.current.originPageCenter.setTo(editor.getViewportPageBounds().center)
+			// Stash the clamped point / clamped viewport page center
+			const clampedPoint = minimap.minimapScreenPointToPagePoint(x, y, false, true)
+			minimap.originPagePoint.setTo(clampedPoint)
+			minimap.originPageCenter.setTo(editor.getViewportPageBounds().center)
 
+			// Then center on the unclamped point
+			const point = minimap.minimapScreenPointToPagePoint(x, y, false, false)
 			editor.centerOnPoint(point, { animation: { duration: editor.options.animationMediumMs } })
 		},
 		[editor]
@@ -73,54 +72,49 @@ export function DefaultMinimap() {
 
 	const onPointerDown = React.useCallback(
 		(e: React.PointerEvent<HTMLCanvasElement>) => {
-			if (!minimapRef.current) return
+			const minimap = minimapRef.current
+			if (!minimap) return
 			if (e.button !== 0) return
 
 			const elm = e.currentTarget
 			setPointerCapture(elm, e)
 			if (!editor.getCurrentPageShapeIds().size) return
 
+			const { clientX: x, clientY: y } = e
+
 			rPointing.current = true
 			rActivePointerId.current = e.pointerId
+			rOriginScreenPoint.current = new Vec(x, y)
 
-			minimapRef.current.isInViewport = false
+			minimap.isInViewport = false
 
-			const point = minimapRef.current.minimapScreenPointToPagePoint(
-				e.clientX,
-				e.clientY,
-				false,
-				false
-			)
+			const point = minimap.minimapScreenPointToPagePoint(x, y, false, false)
 
-			const _vpPageBounds = editor.getViewportPageBounds()
-			const commonBounds = minimapRef.current.getContentPageBounds()
+			const vpPageBounds = editor.getViewportPageBounds()
+			const commonBounds = minimap.getContentPageBounds()
 			const allowedBounds = new Box(
-				commonBounds.x - _vpPageBounds.width / 2,
-				commonBounds.y - _vpPageBounds.height / 2,
-				commonBounds.width + _vpPageBounds.width,
-				commonBounds.height + _vpPageBounds.height
+				commonBounds.x - vpPageBounds.width / 2,
+				commonBounds.y - vpPageBounds.height / 2,
+				commonBounds.width + vpPageBounds.width,
+				commonBounds.height + vpPageBounds.height
 			)
 
 			// If we clicked inside of the allowed area, but outside of the viewport
-			if (allowedBounds.containsPoint(point) && !_vpPageBounds.containsPoint(point)) {
-				minimapRef.current.isInViewport = _vpPageBounds.containsPoint(point)
-				const delta = Vec.Sub(_vpPageBounds.center, _vpPageBounds.point)
+			if (allowedBounds.containsPoint(point) && !vpPageBounds.containsPoint(point)) {
+				const delta = Vec.Sub(vpPageBounds.center, vpPageBounds.point)
 				const pagePoint = Vec.Add(point, delta)
-				minimapRef.current.originPagePoint.setTo(pagePoint)
-				minimapRef.current.originPageCenter.setTo(point)
+				minimap.originPagePoint.setTo(pagePoint)
+				minimap.originPageCenter.setTo(point)
 				editor.centerOnPoint(point, { animation: { duration: editor.options.animationMediumMs } })
 			} else {
-				const clampedPoint = minimapRef.current.minimapScreenPointToPagePoint(
-					e.clientX,
-					e.clientY,
-					false,
-					true
-				)
-				minimapRef.current.isInViewport = _vpPageBounds.containsPoint(clampedPoint)
-				minimapRef.current.originPagePoint.setTo(clampedPoint)
-				minimapRef.current.originPageCenter.setTo(_vpPageBounds.center)
+				const clampedPoint = minimap.minimapScreenPointToPagePoint(x, y, false, true)
+				minimap.isInViewport = vpPageBounds.containsPoint(clampedPoint)
+				minimap.originPagePoint.setTo(clampedPoint)
+				minimap.originPageCenter.setTo(vpPageBounds.center)
 			}
 
+			const body = editor.getContainerDocument().body
+
 			function endDrag() {
 				if (rActivePointerId.current !== null && elm.hasPointerCapture(rActivePointerId.current)) {
 					elm.releasePointerCapture(rActivePointerId.current)
@@ -128,44 +122,36 @@ export function DefaultMinimap() {
 
 				rPointing.current = false
 				rActivePointerId.current = null
-				body.removeEventListener('pointerup', onPointerUp)
-				body.removeEventListener('pointercancel', onPointerCancel)
-				body.removeEventListener('contextmenu', onContextMenu, true)
+				body.removeEventListener('pointerup', endDrag)
+				body.removeEventListener('pointercancel', endDrag)
+				body.removeEventListener('contextmenu', endDrag, true)
 			}
 
-			function onPointerUp() {
-				endDrag()
-			}
-			function onPointerCancel() {
-				endDrag()
-			}
-			function onContextMenu() {
-				endDrag()
-			}
-
-			const body = editor.getContainerDocument().body
-			body.addEventListener('pointerup', onPointerUp)
-			body.addEventListener('pointercancel', onPointerCancel)
-			body.addEventListener('contextmenu', onContextMenu, true)
+			body.addEventListener('pointerup', endDrag)
+			body.addEventListener('pointercancel', endDrag)
+			body.addEventListener('contextmenu', endDrag, true)
 		},
 		[editor]
 	)
 
 	const onPointerMove = React.useCallback(
 		(e: React.PointerEvent<HTMLCanvasElement>) => {
-			if (!minimapRef.current) return
-			const point = minimapRef.current.minimapScreenPointToPagePoint(
-				e.clientX,
-				e.clientY,
-				e.shiftKey,
-				true
-			)
+			const minimap = minimapRef.current
+			if (!minimap) return
+
+			const { clientX: x, clientY: y } = e
+
+			const point = minimap.minimapScreenPointToPagePoint(x, y, e.shiftKey, true)
 
 			if (rPointing.current) {
-				if (minimapRef.current.isInViewport) {
-					const delta = minimapRef.current.originPagePoint
-						.clone()
-						.sub(minimapRef.current.originPageCenter)
+				// Ignore the sub-pixel pointer jitter that accompanies a click, so it doesn't
+				// cut off the easing animation started on pointer down.
+				if (Vec.Dist2(rOriginScreenPoint.current, new Vec(x, y)) <= CLICK_JITTER_THRESHOLD_SQ) {
+					return
+				}
+
+				if (minimap.isInViewport) {
+					const delta = minimap.originPagePoint.clone().sub(minimap.originPageCenter)
 					editor.centerOnPoint(Vec.Sub(point, delta))
 					return
 				}
@@ -173,7 +159,7 @@ export function DefaultMinimap() {
 				editor.centerOnPoint(point)
 			}
 
-			const pagePoint = minimapRef.current.getMinimapPagePoint(e.clientX, e.clientY)
+			const pagePoint = minimap.getMinimapPagePoint(x, y)
 
 			const screenPoint = editor.pageToScreen(pagePoint)
 
@@ -225,10 +211,10 @@ export function DefaultMinimap() {
 	return (
 		<div className="tlui-minimap">
 			<canvas
+				ref={rCanvas}
 				role="img"
 				aria-label={msg('navigation-zone.minimap')}
 				data-testid="minimap.canvas"
-				ref={rCanvas}
 				className="tlui-minimap__canvas"
 				onDoubleClick={onDoubleClick}
 				onPointerMove={onPointerMove}

package/src/lib/ui/components/Minimap/MinimapManager.ts

@@ -17,7 +17,7 @@ export class MinimapManager {
 
 	@bind
 	close() {
-		return this.disposables.forEach((d) => d())
+		this.disposables.forEach((d) => d())
 	}
 
 	private readonly ctx: CanvasRenderingContext2D
@@ -78,16 +78,6 @@ export class MinimapManager {
 			: viewportPageBounds
 	}
 
-	@computed
-	getContentScreenBounds() {
-		const contentPageBounds = this.getContentPageBounds()
-		const topLeft = this.editor.pageToScreen(contentPageBounds.point)
-		const bottomRight = this.editor.pageToScreen(
-			new Vec(contentPageBounds.maxX, contentPageBounds.maxY)
-		)
-		return new Box(topLeft.x, topLeft.y, bottomRight.x - topLeft.x, bottomRight.y - topLeft.y)
-	}
-
 	private _getCanvasBoundingRect() {
 		const { x, y, width, height } = this.elem.getBoundingClientRect()
 		return new Box(x, y, width, height)
@@ -116,11 +106,6 @@ export class MinimapManager {
 		return new Vec(rect.width * dpr, rect.height * dpr)
 	}
 
-	@computed
-	getCanvasClientPosition() {
-		return this.canvasBoundingClientRect.get().point
-	}
-
 	originPagePoint = new Vec()
 	originPageCenter = new Vec()
 
@@ -209,6 +194,29 @@ export class MinimapManager {
 		return new Vec(px, py)
 	}
 
+	// Shape geometry in page space, split into unselected/selected fills. Built
+	// from the per-shape rect cache and selection only, so it survives pan/zoom of
+	// the main canvas — those move the `ctx` transform, not the paths themselves.
+	@computed
+	private getShapePaths() {
+		const { editor } = this
+		const selectedIds = new Set<string>(editor.getSelectedShapeIds())
+		const ids = editor.getCurrentPageShapeIdsSorted()
+
+		const shapes = new Path2D()
+		const selected = new Path2D()
+
+		for (let i = 0, len = ids.length; i < len; i++) {
+			const shapeId = ids[i]
+			const bounds = this.shapeRectCache.get(shapeId)
+			if (!bounds) continue
+			const target = selectedIds.has(shapeId) ? selected : shapes
+			target.rect(bounds.x, bounds.y, bounds.w, bounds.h)
+		}
+
+		return { shapes, selected }
+	}
+
 	@bind
 	render() {
 		const { ctx, editor, elem } = this
@@ -234,21 +242,9 @@ export class MinimapManager {
 		ctx.scale(dpr * zoom, dpr * zoom)
 		ctx.translate(-canvasPageBounds.minX, -canvasPageBounds.minY)
 
-		// Shapes — iterate sorted IDs and pull per-shape rects from the
-		// computed cache so only *changed* shapes re-derive between renders.
-		const selectedIds = new Set<string>(editor.getSelectedShapeIds())
-		const ids = editor.getCurrentPageShapeIdsSorted()
-
-		const shapesPath = new Path2D()
-		const selectedPath = new Path2D()
-
-		for (let i = 0, len = ids.length; i < len; i++) {
-			const shapeId = ids[i]
-			const bounds = this.shapeRectCache.get(shapeId)
-			if (!bounds) continue
-			const target = selectedIds.has(shapeId) ? selectedPath : shapesPath
-			target.rect(bounds.x, bounds.y, bounds.w, bounds.h)
-		}
+		// Shapes — page-space paths from a computed, so a pan/zoom that only moves
+		// the transform above reuses them instead of rebuilding per shape.
+		const { shapes: shapesPath, selected: selectedPath } = this.getShapePaths()
 
 		ctx.fillStyle = this.colors.shapeFill
 		ctx.fill(shapesPath)
@@ -256,13 +252,18 @@ export class MinimapManager {
 		ctx.fillStyle = this.colors.selectFill
 		ctx.fill(selectedPath)
 
-		// Viewport rounded rect
+		// Viewport indicator. roundRect is pricier than rect, so when the corner
+		// radius would be sub-pixel on screen (and thus invisible) fall back to a
+		// plain rect.
 		const viewport = editor.getViewportPageBounds()
 		const { minX: vx, minY: vy, width: vw, height: vh } = viewport
 		const r = Math.min(vw / 4, vh / 4, 4 / zoom)
 		ctx.beginPath()
-		roundedRect(ctx, vx, vy, vw, vh, r)
-		ctx.closePath()
+		if (r * zoom < 1) {
+			ctx.rect(vx, vy, vw, vh)
+		} else {
+			ctx.roundRect(vx, vy, vw, vh, r)
+		}
 		ctx.fillStyle = this.colors.viewportFill
 		ctx.fill()
 
@@ -276,26 +277,3 @@ export class MinimapManager {
 		}
 	}
 }
-
-function roundedRect(
-	ctx: CanvasRenderingContext2D | Path2D,
-	x: number,
-	y: number,
-	w: number,
-	h: number,
-	r: number
-) {
-	if (r < 1) {
-		ctx.rect(x, y, w, h)
-		return
-	}
-	ctx.moveTo(x + r, y)
-	ctx.lineTo(x + w - r, y)
-	ctx.quadraticCurveTo(x + w, y, x + w, y + r)
-	ctx.lineTo(x + w, y + h - r)
-	ctx.quadraticCurveTo(x + w, y + h, x + w - r, y + h)
-	ctx.lineTo(x + r, y + h)
-	ctx.quadraticCurveTo(x, y + h, x, y + h - r)
-	ctx.lineTo(x, y + r)
-	ctx.quadraticCurveTo(x, y, x + r, y)
-}

package/src/lib/ui/components/SharePanel/DefaultPeopleMenuAvatar.tsx

@@ -1,8 +1,8 @@
-import { usePresence } from '@tldraw/editor'
+import { TLUserId, usePresence } from '@tldraw/editor'
 
 /** @public */
 export interface TLUiPeopleMenuAvatarProps {
-	userId: string
+	userId: TLUserId
 }
 
 /** @public @react */

package/src/lib/ui/components/SharePanel/DefaultPeopleMenuContent.tsx

@@ -1,8 +1,9 @@
+import { TLUserId } from '@tldraw/editor'
 import { useTldrawUiComponents } from '../../context/components'
 
 /** @public */
 export interface DefaultPeopleMenuContentProps {
-	userIds: string[]
+	userIds: TLUserId[]
 }
 
 /** @public @react */

package/src/lib/ui/components/SharePanel/DefaultPeopleMenuFacePile.tsx

@@ -1,10 +1,11 @@
+import { TLUserId } from '@tldraw/editor'
 import { PORTRAIT_BREAKPOINT } from '../../constants'
 import { useBreakpoint } from '../../context/breakpoints'
 import { useTldrawUiComponents } from '../../context/components'
 
 /** @public */
 export interface TLUiPeopleMenuFacePileProps {
-	userIds: string[]
+	userIds: TLUserId[]
 	userName: string
 	userColor: string
 }

package/src/lib/ui/components/SharePanel/DefaultPeopleMenuItem.tsx

@@ -1,4 +1,4 @@
-import { track, useEditor, usePresence } from '@tldraw/editor'
+import { TLUserId, track, useEditor, usePresence } from '@tldraw/editor'
 import { useCallback } from 'react'
 import { useUiEvents } from '../../context/events'
 import { useTranslation } from '../../hooks/useTranslation/useTranslation'
@@ -9,7 +9,7 @@ import { TldrawUiIcon } from '../primitives/TldrawUiIcon'
 
 /** @public */
 export interface TLUiPeopleMenuItemProps {
-	userId: string
+	userId: TLUserId
 }
 
 /** @public @react */
@@ -32,7 +32,7 @@ export const DefaultPeopleMenuItem = track(function DefaultPeopleMenuItem({
 		}
 	}, [editor, userId, trackEvent])
 
-	const theyAreFollowingYou = presence?.followingUserId === editor.user.getId()
+	const theyAreFollowingYou = presence?.followingUserId === editor.user.getRecordId()
 	const youAreFollowingThem = editor.getInstanceState().followingUserId === userId
 
 	if (!presence) return null

package/src/lib/ui/components/StylePanel/StylePanelButtonPicker.tsx

@@ -123,6 +123,11 @@ function StylePanelButtonPickerInlineInner<T extends string>(
 		}
 
 		const handleButtonPointerUp = (e: React.PointerEvent<HTMLButtonElement>) => {
+			// Only apply on release if the scrub started in this picker. Otherwise
+			// releasing over a different style section selects that section's
+			// option, even though scrubbing can't cross sections. See #9223.
+			if (!rPointing.current) return
+
 			const { id } = e.currentTarget.dataset
 			if (value.type === 'shared' && value.value === id) return
 

package/src/lib/ui/components/menu-items.tsx

@@ -103,6 +103,14 @@ export function UngroupMenuItem() {
 	return <TldrawUiMenuActionItem actionId="ungroup" />
 }
 
+/** @public @react */
+export function FrameSelectionMenuItem() {
+	const shouldDisplay = useAllowGroup()
+	if (!shouldDisplay) return null
+
+	return <TldrawUiMenuActionItem actionId="frame-selection" />
+}
+
 /** @public @react */
 export function RemoveFrameMenuItem() {
 	const editor = useEditor()
@@ -343,6 +351,7 @@ export function EditMenuSubmenu() {
 			<GroupMenuItem />
 			<UngroupMenuItem />
 			<FlattenMenuItem />
+			<FrameSelectionMenuItem />
 			<EditLinkMenuItem />
 			<FitFrameToContentMenuItem />
 			<RemoveFrameMenuItem />

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

@@ -68,6 +68,7 @@ export interface TLUiDropdownMenuContentProps {
 	align?: 'start' | 'center' | 'end'
 	sideOffset?: number
 	alignOffset?: number
+	collisionPadding?: number
 	children: ReactNode
 }
 
@@ -78,6 +79,7 @@ export function TldrawUiDropdownMenuContent({
 	align = 'start',
 	sideOffset = 8,
 	alignOffset = 8,
+	collisionPadding = 4,
 	children,
 }: TLUiDropdownMenuContentProps) {
 	const container = useContainer()
@@ -90,7 +92,7 @@ export function TldrawUiDropdownMenuContent({
 				sideOffset={sideOffset}
 				align={align}
 				alignOffset={alignOffset}
-				collisionPadding={4}
+				collisionPadding={collisionPadding}
 			>
 				{children}
 			</_DropdownMenu.Content>

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

@@ -11,6 +11,7 @@ export interface TLUiIconProps extends React.HTMLAttributes<HTMLDivElement> {
 	icon: TLUiIconType | Exclude<string, TLUiIconType> | TLUiIconJsx
 	label: string
 	small?: boolean
+	tiny?: boolean
 	color?: string
 	children?: undefined
 	invertIcon?: boolean
@@ -23,6 +24,7 @@ export const TldrawUiIcon = memo(function TldrawUiIcon({
 	small,
 	invertIcon,
 	icon,
+	tiny,
 	color,
 	className,
 	...props
@@ -32,6 +34,7 @@ export const TldrawUiIcon = memo(function TldrawUiIcon({
 			<TldrawUIIconInner
 				label={label}
 				small={small}
+				tiny={tiny}
 				invertIcon={invertIcon}
 				icon={icon}
 				color={color}
@@ -43,7 +46,11 @@ export const TldrawUiIcon = memo(function TldrawUiIcon({
 
 	return cloneElement(icon, {
 		...props,
-		className: classNames({ 'tlui-icon__small': small }, className, icon.props.className),
+		className: classNames(
+			{ 'tlui-icon__small': small, 'tlui-icon__tiny': tiny },
+			className,
+			icon.props.className
+		),
 		'aria-label': label,
 		style: {
 			color,
@@ -56,6 +63,7 @@ export const TldrawUiIcon = memo(function TldrawUiIcon({
 function TldrawUIIconInner({
 	label,
 	small,
+	tiny,
 	invertIcon,
 	icon,
 	color,
@@ -85,7 +93,7 @@ function TldrawUIIconInner({
 			<div
 				className={classNames(
 					'tlui-icon tlui-icon__placeholder',
-					{ 'tlui-icon__small': small },
+					{ 'tlui-icon__small': small, 'tlui-icon__tiny': tiny },
 					className
 				)}
 				{...props}
@@ -99,7 +107,11 @@ function TldrawUIIconInner({
 			ref={ref}
 			aria-label={label}
 			role="img"
-			className={classNames('tlui-icon', { 'tlui-icon__small': small }, className)}
+			className={classNames(
+				'tlui-icon',
+				{ 'tlui-icon__small': small, 'tlui-icon__tiny': tiny },
+				className
+			)}
 			style={{
 				color,
 				mask: `url(${asset}) center 100% / 100% no-repeat`,

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

@@ -17,6 +17,8 @@ export interface TLUiInputProps {
 	autoSelect?: boolean
 	children?: React.ReactNode
 	defaultValue?: string
+	/** Maximum number of characters the input will accept. */
+	maxLength?: number
 	placeholder?: string
 	onComplete?(value: string): void
 	onValueChange?(value: string): void
@@ -50,6 +52,7 @@ export const TldrawUiInput = React.forwardRef<HTMLInputElement, TLUiInputProps>(
 			autoSelect = false,
 			autoFocus = false,
 			defaultValue,
+			maxLength,
 			placeholder,
 			onComplete,
 			onValueChange,
@@ -196,6 +199,7 @@ export const TldrawUiInput = React.forwardRef<HTMLInputElement, TLUiInputProps>(
 					className={classNames('tlui-input', className)}
 					type="text"
 					defaultValue={defaultValue}
+					maxLength={maxLength}
 					onKeyDownCapture={handleKeyDownCapture}
 					onChange={handleChange}
 					onFocus={handleFocus}

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

@@ -47,6 +47,11 @@ export interface TLUiPopoverContentProps {
 	align?: 'start' | 'center' | 'end'
 	alignOffset?: number
 	sideOffset?: number
+	/**
+	 * Minimum distance to keep between the popover and the viewport edge before it
+	 * shifts to stay in view. Defaults to Radix's `0`.
+	 */
+	collisionPadding?: number
 	disableEscapeKeyDown?: boolean
 	autoFocusFirstButton?: boolean
 }
@@ -58,6 +63,7 @@ export function TldrawUiPopoverContent({
 	align = 'center',
 	sideOffset = 8,
 	alignOffset = 0,
+	collisionPadding,
 	disableEscapeKeyDown = false,
 	autoFocusFirstButton = true,
 }: TLUiPopoverContentProps) {
@@ -83,6 +89,7 @@ export function TldrawUiPopoverContent({
 				sideOffset={sideOffset}
 				align={align}
 				alignOffset={alignOffset}
+				collisionPadding={collisionPadding}
 				dir={dir}
 				ref={ref}
 				onOpenAutoFocus={handleOpenAutoFocus}

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

@@ -60,7 +60,6 @@ export function TldrawUiMenuCheckboxItem<
 					dir={dir}
 					lang={lang}
 					className="tlui-button tlui-button__menu tlui-button__checkbox"
-					title={labelStr}
 					onSelect={(e) => {
 						onSelect?.(sourceId)
 						preventDefault(e)
@@ -89,7 +88,6 @@ export function TldrawUiMenuCheckboxItem<
 					className="tlui-button tlui-button__menu tlui-button__checkbox"
 					dir={dir}
 					lang={lang}
-					title={labelStr}
 					onSelect={(e) => {
 						onSelect(sourceId)
 						preventDefault(e)

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

@@ -50,7 +50,6 @@ export function TldrawUiMenuSubmenu<Translation extends string = string>({
 						id={`${sourceId}-sub.${id}-button`}
 						disabled={disabled}
 						label={labelStr!}
-						title={labelStr!}
 					/>
 					<TldrawUiDropdownMenuSubContent id={`${sourceId}-sub.${id}-content`} size={size}>
 						{children}