tldraw 3.16.0-canary.54408756ac9c → 3.16.0-canary.5462c7eac75a

package/src/lib/shapes/frame/components/FrameLabelInput.tsx

@@ -1,4 +1,4 @@
-import { TLFrameShape, TLShapeId, stopEventPropagation, useEditor } from '@tldraw/editor'
+import { TLFrameShape, TLShapeId, markEventAsHandled, useEditor } from '@tldraw/editor'
 import { forwardRef, useCallback } from 'react'
 import { defaultEmptyAs } from '../FrameShapeUtil'
 
@@ -13,7 +13,7 @@ export const FrameLabelInput = forwardRef<
 			if (e.key === 'Enter' && !e.nativeEvent.isComposing) {
 				// need to prevent the enter keydown making it's way up to the Idle state
 				// and sending us back into edit mode
-				stopEventPropagation(e)
+				markEventAsHandled(e)
 				e.currentTarget.blur()
 				editor.setEditingShape(null)
 			}
@@ -74,7 +74,7 @@ export const FrameLabelInput = forwardRef<
 				onKeyDown={handleKeyDown}
 				onBlur={handleBlur}
 				onChange={handleChange}
-				onPointerDown={isEditing ? stopEventPropagation : undefined}
+				onPointerDown={isEditing ? markEventAsHandled : undefined}
 				draggable={false}
 			/>
 			{defaultEmptyAs(name, 'Frame') + String.fromCharCode(8203)}

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

@@ -126,6 +126,7 @@ export class GeoShapeUtil extends BaseBoxShapeUtil<TLGeoShape> {
 					height: unscaledLabelHeight * shape.props.scale,
 					isFilled: true,
 					isLabel: true,
+					excludeFromShapeBounds: true,
 					isEmptyLabel: isEmptyRichText(shape.props.richText),
 				}),
 			],

package/src/lib/shapes/note/NoteShapeUtil.tsx

@@ -147,6 +147,7 @@ export class NoteShapeUtil extends ShapeUtil<TLNoteShape> {
 					height: lh,
 					isFilled: true,
 					isLabel: true,
+					excludeFromShapeBounds: true,
 				}),
 			],
 		})

package/src/lib/shapes/shared/HyperlinkButton.tsx

@@ -1,4 +1,4 @@
-import { stopEventPropagation, useEditor, useValue } from '@tldraw/editor'
+import { markEventAsHandled, useEditor, useValue } from '@tldraw/editor'
 import classNames from 'classnames'
 import { PointerEventHandler, useCallback } from 'react'
 
@@ -8,9 +8,9 @@ const LINK_ICON =
 export function HyperlinkButton({ url }: { url: string }) {
 	const editor = useEditor()
 	const hideButton = useValue('zoomLevel', () => editor.getZoomLevel() < 0.32, [editor])
-	const useStopPropagationOnShiftKey = useCallback<PointerEventHandler>(
+	const markAsHandledOnShiftKey = useCallback<PointerEventHandler>(
 		(e) => {
-			if (!editor.inputs.shiftKey) stopEventPropagation(e)
+			if (!editor.inputs.shiftKey) markEventAsHandled(e)
 		},
 		[editor]
 	)
@@ -22,8 +22,8 @@ export function HyperlinkButton({ url }: { url: string }) {
 			href={url}
 			target="_blank"
 			rel="noopener noreferrer"
-			onPointerDown={useStopPropagationOnShiftKey}
-			onPointerUp={useStopPropagationOnShiftKey}
+			onPointerDown={markAsHandledOnShiftKey}
+			onPointerUp={markAsHandledOnShiftKey}
 			title={url}
 			draggable={false}
 		>

package/src/lib/shapes/shared/useEditablePlainText.ts

@@ -3,9 +3,9 @@ import {
 	TLShapeId,
 	TLUnknownShape,
 	getPointerInfo,
+	markEventAsHandled,
 	noop,
 	preventDefault,
-	stopEventPropagation,
 	tlenv,
 	useEditor,
 	useValue,
@@ -136,7 +136,7 @@ export function useEditableTextCommon(shapeId: TLShapeId) {
 				shape: editor.getShape(shapeId)!,
 			})
 
-			stopEventPropagation(e) // we need to prevent blurring the input
+			e.stopPropagation() // we need to prevent blurring the input
 		},
 		[editor, shapeId]
 	)
@@ -157,11 +157,13 @@ export function useEditableTextCommon(shapeId: TLShapeId) {
 		[editor, shapeId]
 	)
 
+	const handleDoubleClick: (e: React.MouseEvent) => void = markEventAsHandled
+
 	return {
 		handleFocus: noop,
 		handleBlur: noop,
 		handleInputPointerDown,
-		handleDoubleClick: stopEventPropagation,
+		handleDoubleClick,
 		handlePaste,
 		isEditing,
 		isReadyForEditing,

package/src/lib/shapes/text/PlainTextArea.tsx

@@ -1,4 +1,4 @@
-import { preventDefault, stopEventPropagation } from '@tldraw/editor'
+import { markEventAsHandled, preventDefault } from '@tldraw/editor'
 import React from 'react'
 import { TextAreaProps } from './RichTextArea'
 
@@ -46,8 +46,8 @@ export const PlainTextArea = React.forwardRef<HTMLTextAreaElement, TextAreaProps
 			onChange={onChange}
 			onKeyDown={(e) => handleKeyDown(e.nativeEvent)}
 			onBlur={handleBlur}
-			onTouchEnd={stopEventPropagation}
-			onContextMenu={isEditing ? stopEventPropagation : undefined}
+			onTouchEnd={markEventAsHandled}
+			onContextMenu={isEditing ? (e) => e.stopPropagation() : undefined}
 			onPointerDown={handleInputPointerDown}
 			onPaste={handlePaste}
 			onDoubleClick={handleDoubleClick}

package/src/lib/shapes/text/RichTextArea.tsx

@@ -10,7 +10,6 @@ import {
 	TLRichText,
 	TLShapeId,
 	preventDefault,
-	stopEventPropagation,
 	useEditor,
 	useEvent,
 	useUniqueSafeId,
@@ -233,13 +232,13 @@ export const RichTextArea = React.forwardRef<HTMLDivElement, TextAreaProps>(func
 			tabIndex={-1}
 			data-testid="rich-text-area"
 			className="tl-rich-text tl-text tl-text-input"
-			onContextMenu={isEditing ? stopEventPropagation : undefined}
+			onContextMenu={isEditing ? (e) => e.stopPropagation() : undefined}
 			// N.B. When PointerStateExtension was introduced, this was moved there.
 			// However, that caused selecting over list items to break.
 			// The handleDOMEvents in TipTap don't seem to support the pointerDownCapture event.
-			onPointerDownCapture={stopEventPropagation}
+			onPointerDownCapture={(e) => e.stopPropagation()}
 			// This onTouchEnd is important for Android to be able to change selection on text.
-			onTouchEnd={stopEventPropagation}
+			onTouchEnd={(e) => e.stopPropagation()}
 			// On FF, there's a behavior where dragging a selection will grab that selection into
 			// the drag event. However, once the drag is over, and you select away from the textarea,
 			// starting a drag over the textarea will restart a selection drag instead of a shape drag.

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

@@ -1,7 +1,7 @@
 import {
 	debugFlags,
 	Editor,
-	stopEventPropagation,
+	markEventAsHandled,
 	TLGeoShape,
 	TLShapeId,
 	unsafe__withoutCapture,
@@ -23,7 +23,7 @@ export function SkipToMainContent() {
 
 	const handleNavigateToFirstShape = useCallback(
 		(e: MouseEvent | KeyboardEvent) => {
-			stopEventPropagation(e)
+			markEventAsHandled(e)
 			button.current?.blur()
 			const shapes = editor.getCurrentPageShapesInReadingOrder()
 			if (!shapes.length) return

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

@@ -18,6 +18,7 @@ export function LanguageMenu() {
 				{LANGUAGES.map(({ locale, label }) => (
 					<TldrawUiMenuCheckboxItem
 						id={`language-${locale}`}
+						lang={locale}
 						key={locale}
 						title={locale}
 						label={label}

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

@@ -204,6 +204,7 @@ export function DefaultMinimap() {
 			<canvas
 				role="img"
 				aria-label={msg('navigation-zone.minimap')}
+				data-testid="minimap.canvas"
 				ref={rCanvas}
 				className="tlui-minimap__canvas"
 				onDoubleClick={onDoubleClick}

package/src/lib/ui/components/PageMenu/DefaultPageMenu.tsx

@@ -1,9 +1,9 @@
 import {
 	PageRecordType,
 	TLPageId,
+	markEventAsHandled,
 	releasePointerCapture,
 	setPointerCapture,
-	stopEventPropagation,
 	tlenv,
 	useEditor,
 	useValue,
@@ -451,7 +451,7 @@ export const DefaultPageMenu = memo(function DefaultPageMenu() {
 											if (e.key === 'Enter') {
 												if (page.id === currentPage.id) {
 													toggleEditing()
-													stopEventPropagation(e)
+													markEventAsHandled(e)
 												}
 											}
 										}}

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

@@ -137,6 +137,7 @@ export const StylePanelButtonPicker = memo(function StylePanelButtonPicker<T ext
 				>
 					<Layout>
 						{items.map((item) => {
+							const isActive = value.type === 'shared' && value.value === item.value
 							const label =
 								title + ' — ' + msg(`${uiType}-style.${item.value}` as TLUiTranslationKey)
 							return (
@@ -145,10 +146,16 @@ export const StylePanelButtonPicker = memo(function StylePanelButtonPicker<T ext
 									key={item.value}
 									data-id={item.value}
 									data-testid={`style.${uiType}.${item.value}`}
-									aria-label={label}
+									aria-label={label + (isActive ? ` (${msg('style-panel.selected')})` : '')}
+									tooltip={
+										<>
+											<div>{label}</div>
+											{isActive ? <div>({msg('style-panel.selected')})</div> : null}
+										</>
+									}
 									value={item.value}
 									data-state={value.type === 'shared' && value.value === item.value ? 'on' : 'off'}
-									data-isactive={value.type === 'shared' && value.value === item.value}
+									data-isactive={isActive}
 									title={label}
 									style={
 										style === (DefaultColorStyle as StyleProp<unknown>)

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

@@ -70,6 +70,7 @@ export function AltTextEditor({ shapeId, onClose, source }: AltTextEditorProps)
 				data-testid="media-toolbar.alt-text-input"
 				value={altText}
 				placeholder={msg('tool.media-alt-text-desc')}
+				aria-label={msg('tool.media-alt-text-desc')}
 				onValueChange={handleValueChange}
 				onComplete={handleComplete}
 				onCancel={handleAltTextCancel}

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

@@ -75,6 +75,7 @@ export function LinkEditor({ textEditor, value: initialValue, onClose }: LinkEdi
 				onComplete={handleLinkComplete}
 				onCancel={handleLinkCancel}
 				placeholder="example.com"
+				aria-label="example.com"
 			/>
 			<TldrawUiToolbarButton
 				className="tlui-rich-text__toolbar-link-visit"

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

@@ -3,8 +3,8 @@ import {
 	Box,
 	clamp,
 	Editor,
+	markEventAsHandled,
 	react,
-	stopEventPropagation,
 	useAtom,
 	useEditor,
 	usePassThroughMouseOverEvents,
@@ -170,7 +170,7 @@ export const TldrawUiContextualToolbar = ({
 			data-visible={false}
 			data-testid="contextual-toolbar"
 			className={classNames('tlui-contextual-toolbar', className)}
-			onPointerDown={stopEventPropagation}
+			onPointerDown={markEventAsHandled}
 		>
 			<TldrawUiToolbar
 				orientation="horizontal"

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

@@ -1,4 +1,4 @@
-import { stopEventPropagation, tlenv, tltime, useMaybeEditor } from '@tldraw/editor'
+import { tlenv, tltime, useMaybeEditor } from '@tldraw/editor'
 import classNames from 'classnames'
 import * as React from 'react'
 import { TLUiTranslationKey } from '../../hooks/useTranslation/TLUiTranslationKey'
@@ -118,7 +118,7 @@ export const TldrawUiInput = React.forwardRef<HTMLInputElement, TLUiInputProps>(
 						// `onChange` with a duplicated text value.
 						if (isComposing.current) return
 						e.currentTarget.blur()
-						stopEventPropagation(e)
+						e.stopPropagation()
 						onComplete?.(e.currentTarget.value)
 						break
 					}
@@ -126,7 +126,7 @@ export const TldrawUiInput = React.forwardRef<HTMLInputElement, TLUiInputProps>(
 						e.currentTarget.value = rInitialValue.current
 						onCancel?.(e.currentTarget.value)
 						e.currentTarget.blur()
-						stopEventPropagation(e)
+						e.stopPropagation()
 						break
 					}
 				}

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

@@ -13,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
 }
@@ -53,7 +53,7 @@ export const TldrawUiSlider = React.forwardRef<HTMLDivElement, TLUiSliderProps>(
 
 	const handlePointerDown = useCallback(() => {
 		tooltipManager.hideAllTooltips()
-		onHistoryMark('click slider')
+		onHistoryMark?.('click slider')
 	}, [onHistoryMark])
 
 	// N.B. This is a bit silly. The Radix slider auto-focuses which

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

@@ -71,6 +71,7 @@ export const TldrawUiToolbarButton = React.forwardRef<HTMLButtonElement, TLUiToo
 				draggable={false}
 				data-isactive={isActive}
 				{...props}
+				aria-label={props.title}
 				// The tooltip takes care of this.
 				title={undefined}
 				className={classnames('tlui-button', `tlui-button__${type}`, props.className)}
@@ -127,7 +128,7 @@ export interface TLUiToolbarToggleItemProps extends React.HTMLAttributes<HTMLBut
 	className?: string
 	type: 'icon' | 'tool'
 	value: string
-	tooltip?: string
+	tooltip?: React.ReactNode
 }
 
 /** @public @react */

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

@@ -6,6 +6,7 @@ import React, {
 	ReactNode,
 	useContext,
 	useEffect,
+	useLayoutEffect,
 	useRef,
 	useState,
 } from 'react'
@@ -24,18 +25,20 @@ export interface TldrawUiTooltipProps {
 	delayDuration?: number
 }
 
+interface CurrentTooltip {
+	id: string
+	content: ReactNode
+	side: 'top' | 'right' | 'bottom' | 'left'
+	sideOffset: number
+	showOnMobile: boolean
+	targetElement: HTMLElement
+	delayDuration: number
+}
+
 // Singleton tooltip manager
 class TooltipManager {
 	private static instance: TooltipManager | null = null
-	private currentTooltip = atom<{
-		id: string
-		content: ReactNode
-		side: 'top' | 'right' | 'bottom' | 'left'
-		sideOffset: number
-		showOnMobile: boolean
-		targetElement: HTMLElement
-		delayDuration: number
-	} | null>('current tooltip', null)
+	private currentTooltip = atom<CurrentTooltip | null>('current tooltip', null)
 	private destroyTimeoutId: number | null = null
 
 	static getInstance(): TooltipManager {
@@ -72,6 +75,15 @@ class TooltipManager {
 		})
 	}
 
+	updateCurrentTooltip(tooltipId: string, update: (tooltip: CurrentTooltip) => CurrentTooltip) {
+		this.currentTooltip.update((tooltip) => {
+			if (tooltip?.id === tooltipId) {
+				return update(tooltip)
+			}
+			return tooltip
+		})
+	}
+
 	hideTooltip(editor: Editor | null, tooltipId: string, instant: boolean = false) {
 		const hide = () => {
 			// Only hide if this is the current tooltip
@@ -159,6 +171,19 @@ function TooltipSingleton() {
 		}
 	}, [cameraState, isOpen, currentTooltip, editor])
 
+	useEffect(() => {
+		function handleKeyDown(event: KeyboardEvent) {
+			if (event.key === 'Escape' && currentTooltip) {
+				tooltipManager.hideTooltip(editor, currentTooltip.id)
+			}
+		}
+
+		document.addEventListener('keydown', handleKeyDown)
+		return () => {
+			document.removeEventListener('keydown', handleKeyDown)
+		}
+	}, [editor, currentTooltip])
+
 	// Update open state and trigger position
 	useEffect(() => {
 		let timer: ReturnType<typeof setTimeout> | null = null
@@ -241,6 +266,7 @@ export const TldrawUiTooltip = forwardRef<HTMLButtonElement, TldrawUiTooltipProp
 		const editor = useMaybeEditor()
 		const tooltipId = useRef<string>(uniqueId())
 		const hasProvider = useContext(TooltipSingletonContext)
+		const showUiLabels = useValue('showUiLabels', () => editor?.user.getShowUiLabels(), [editor])
 
 		const orientationCtx = useTldrawUiOrientation()
 		const sideToUse = side ?? orientationCtx.tooltipSide
@@ -254,13 +280,30 @@ export const TldrawUiTooltip = forwardRef<HTMLButtonElement, TldrawUiTooltipProp
 			}
 		}, [editor, hasProvider])
 
+		useLayoutEffect(() => {
+			if (hasProvider && tooltipManager.getCurrentTooltipData()?.id === tooltipId.current) {
+				tooltipManager.updateCurrentTooltip(tooltipId.current, (tooltip) => ({
+					...tooltip,
+					content,
+					side: sideToUse,
+					sideOffset,
+					showOnMobile,
+				}))
+			}
+		}, [content, sideToUse, sideOffset, showOnMobile, hasProvider])
+
 		// Don't show tooltip if disabled, no content, or UI labels are disabled
 		if (disabled || !content) {
 			return <>{children}</>
 		}
 
-		const delayDurationToUse =
-			delayDuration ?? (editor?.options.tooltipDelayMs || DEFAULT_TOOLTIP_DELAY_MS)
+		let delayDurationToUse
+		if (showUiLabels) {
+			delayDurationToUse = 0
+		} else {
+			delayDurationToUse =
+				delayDuration ?? (editor?.options.tooltipDelayMs || DEFAULT_TOOLTIP_DELAY_MS)
+		}
 
 		// Fallback to old behavior if no provider
 		if (!hasProvider) {

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

@@ -19,6 +19,7 @@ export interface TLUiMenuCheckboxItemProps<
 	kbd?: string
 	title?: string
 	label?: TranslationKey | { [key: string]: TranslationKey }
+	lang?: string
 	readonlyOk?: boolean
 	onSelect(source: TLUiEventSource): Promise<void> | void
 	toggle?: boolean
@@ -34,6 +35,7 @@ export function TldrawUiMenuCheckboxItem<
 	id,
 	kbd,
 	label,
+	lang,
 	readonlyOk,
 	onSelect,
 	toggle = false,
@@ -55,6 +57,7 @@ export function TldrawUiMenuCheckboxItem<
 			return (
 				<_DropdownMenu.CheckboxItem
 					dir="ltr"
+					lang={lang}
 					className="tlui-button tlui-button__menu tlui-button__checkbox"
 					title={labelStr}
 					onSelect={(e) => {
@@ -84,6 +87,7 @@ export function TldrawUiMenuCheckboxItem<
 					key={id}
 					className="tlui-button tlui-button__menu tlui-button__checkbox"
 					dir="ltr"
+					lang={lang}
 					title={labelStr}
 					onSelect={(e) => {
 						onSelect(sourceId)

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

@@ -213,7 +213,7 @@ export function TldrawUiMenuItem<
 						icon={icon}
 						onSelect={onSelect}
 						onDragStart={onDragStart}
-						labelToUse={labelToUse}
+						labelStr={labelStr}
 						titleStr={titleStr}
 						disabled={disabled}
 						isSelected={isSelected}
@@ -247,7 +247,7 @@ export function TldrawUiMenuItem<
 						icon={icon}
 						onSelect={onSelect}
 						onDragStart={onDragStart}
-						labelToUse={labelToUse}
+						labelStr={labelStr}
 						titleStr={titleStr}
 						disabled={disabled}
 						isSelected={isSelected}
@@ -392,7 +392,7 @@ function useDraggableEvents(
 
 function DraggableToolbarButton({
 	id,
-	labelToUse,
+	labelStr,
 	titleStr,
 	disabled,
 	isSelected,
@@ -403,7 +403,7 @@ function DraggableToolbarButton({
 }: {
 	id: string
 	disabled: boolean
-	labelToUse?: string
+	labelStr?: string
 	titleStr?: string
 	isSelected?: boolean
 	icon: TLUiMenuItemProps['icon']
@@ -416,7 +416,7 @@ function DraggableToolbarButton({
 	if (overflow) {
 		return (
 			<TldrawUiToolbarButton
-				aria-label={labelToUse}
+				aria-label={labelStr}
 				aria-pressed={isSelected ? 'true' : 'false'}
 				isActive={isSelected}
 				className="tlui-button-grid__button"
@@ -434,7 +434,7 @@ function DraggableToolbarButton({
 
 	return (
 		<TldrawUiToolbarButton
-			aria-label={labelToUse}
+			aria-label={labelStr}
 			aria-pressed={isSelected ? 'true' : 'false'}
 			data-testid={`tools.${id}`}
 			data-value={id}

package/src/lib/ui/context/actions.tsx

@@ -1584,6 +1584,19 @@ export function ActionsProvider({ overrides, children }: ActionsProviderProps) {
 				onSelect: async (source) => {
 					if (!canApplySelectionAction()) return
 
+					const onlySelectedShape = editor.getOnlySelectedShape()
+					if (
+						onlySelectedShape &&
+						(editor.isShapeOfType<TLImageShape>(onlySelectedShape, 'image') ||
+							editor.isShapeOfType<TLVideoShape>(onlySelectedShape, 'video'))
+					) {
+						const firstToolbarButton = editor
+							.getContainer()
+							.querySelector('.tlui-contextual-toolbar button:first-child') as HTMLElement | null
+						firstToolbarButton?.focus()
+						return
+					}
+
 					const firstButton = editor
 						.getContainer()
 						.querySelector('.tlui-style-panel button') as HTMLElement | null

package/src/lib/ui/hooks/useClipboardEvents.ts

@@ -7,8 +7,8 @@ import {
 	assert,
 	compact,
 	isDefined,
+	markEventAsHandled,
 	preventDefault,
-	stopEventPropagation,
 	uniq,
 	useEditor,
 	useMaybeEditor,
@@ -763,7 +763,7 @@ export function useNativeClipboardEvents() {
 
 		const paste = (e: ClipboardEvent) => {
 			if (disablingMiddleClickPaste) {
-				stopEventPropagation(e)
+				markEventAsHandled(e)
 				return
 			}
 

package/src/lib/ui/hooks/useTranslation/TLUiTranslationKey.ts

@@ -122,6 +122,7 @@ export type TLUiTranslationKey =
 	| 'action.zoom-to-fit'
 	| 'action.zoom-to-selection'
 	| 'assets.files.size-too-big'
+	| 'assets.files.maximum-size'
 	| 'assets.files.type-not-allowed'
 	| 'assets.files.upload-failed'
 	| 'assets.files.amount-too-many'
@@ -411,6 +412,7 @@ export type TLUiTranslationKey =
 	| 'style-panel.opacity'
 	| 'style-panel.size'
 	| 'style-panel.spline'
+	| 'style-panel.selected'
 	| 'tool-panel.title'
 	| 'tool-panel.more'
 	| 'navigation-zone.title'

package/src/lib/ui/hooks/useTranslation/defaultTranslation.ts

@@ -92,9 +92,9 @@ export const DEFAULT_TRANSLATION = {
 	'action.toggle-wrap-mode': 'Toggle Select on wrap',
 	'action.toggle-reduce-motion.menu': 'Reduce motion',
 	'action.toggle-reduce-motion': 'Toggle reduce motion',
-	'action.toggle-keyboard-shortcuts.menu': 'Keyboard shortcuts',
+	'action.toggle-keyboard-shortcuts.menu': 'Enable keyboard shortcuts',
 	'action.toggle-keyboard-shortcuts': 'Toggle keyboard shortcuts',
-	'action.toggle-ui-labels.menu': 'UI labels',
+	'action.toggle-ui-labels.menu': 'Enable UI labels',
 	'action.toggle-ui-labels': 'Toggle UI labels',
 	'action.toggle-edge-scrolling.menu': 'Edge scrolling',
 	'action.toggle-edge-scrolling': 'Toggle edge scrolling',
@@ -123,6 +123,7 @@ export const DEFAULT_TRANSLATION = {
 	'action.zoom-to-fit': 'Zoom to fit',
 	'action.zoom-to-selection': 'Zoom to selection',
 	'assets.files.size-too-big': 'File size is too big',
+	'assets.files.maximum-size': 'Maximum file size is {size}',
 	'assets.files.type-not-allowed': 'File type is not allowed',
 	'assets.files.upload-failed': 'Upload failed',
 	'assets.files.amount-too-many': 'Too many files',
@@ -414,6 +415,7 @@ export const DEFAULT_TRANSLATION = {
 	'style-panel.opacity': 'Opacity',
 	'style-panel.size': 'Size',
 	'style-panel.spline': 'Spline',
+	'style-panel.selected': 'selected',
 	'tool-panel.title': 'Tools',
 	'tool-panel.more': 'More',
 	'navigation-zone.title': 'Navigation',

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.54408756ac9c'
+export const version = '3.16.0-canary.5462c7eac75a'
 export const publishDates = {
 	major: '2024-09-13T14:36:29.063Z',
-	minor: '2025-09-09T16:35:13.062Z',
-	patch: '2025-09-09T16:35:13.062Z',
+	minor: '2025-09-16T21:35:37.564Z',
+	patch: '2025-09-16T21:35:37.564Z',
 }

package/src/lib/ui.css

@@ -494,6 +494,10 @@
 	-webkit-user-select: auto !important;
 }
 
+.tlui-input::placeholder {
+	color: var(--tl-color-text-3);
+}
+
 .tlui-input__wrapper {
 	width: 100%;
 	height: 44px;
@@ -578,6 +582,12 @@
 	box-shadow: var(--tl-shadow-3);
 }
 
+@media (max-height: 600px) {
+	.tlui-menu {
+		max-height: 70vh;
+	}
+}
+
 .tlui-menu::-webkit-scrollbar {
 	display: none;
 }