tldraw 3.16.0-canary.c2c4563957ce → 3.16.0-canary.c349490eaef0

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}
@@ -333,7 +333,7 @@ function useDraggableEvents(
 							type: 'pointer',
 							target: 'canvas',
 							name: 'pointer_down',
-							...getPointerInfo(e),
+							...getPointerInfo(editor, e),
 							point: screenSpaceStart,
 						})
 
@@ -345,7 +345,7 @@ function useDraggableEvents(
 							type: 'pointer',
 							target: 'canvas',
 							name: 'pointer_move',
-							...getPointerInfo(e),
+							...getPointerInfo(editor, e),
 							point: screenSpaceStart,
 						})
 
@@ -365,7 +365,7 @@ function useDraggableEvents(
 				type: 'pointer',
 				target: 'canvas',
 				name: 'pointer_up',
-				...getPointerInfo(e),
+				...getPointerInfo(editor, e),
 			})
 		}
 
@@ -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

@@ -8,7 +8,6 @@ import {
 	compact,
 	isDefined,
 	preventDefault,
-	stopEventPropagation,
 	uniq,
 	useEditor,
 	useMaybeEditor,
@@ -763,7 +762,7 @@ export function useNativeClipboardEvents() {
 
 		const paste = (e: ClipboardEvent) => {
 			if (disablingMiddleClickPaste) {
-				stopEventPropagation(e)
+				editor.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.c2c4563957ce'
+export const version = '3.16.0-canary.c349490eaef0'
 export const publishDates = {
 	major: '2024-09-13T14:36:29.063Z',
-	minor: '2025-09-03T11:25:43.960Z',
-	patch: '2025-09-03T11:25:43.960Z',
+	minor: '2025-09-17T16:01:20.675Z',
+	patch: '2025-09-17T16:01:20.675Z',
 }

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;
 }

package/src/test/getCulledShapes.test.tsx

@@ -1,12 +1,50 @@
-import { Box, TLShapeId, createShapeId } from '@tldraw/editor'
+import {
+	BaseBoxShapeUtil,
+	Box,
+	RecordProps,
+	T,
+	TLBaseShape,
+	TLShapeId,
+	createShapeId,
+} from '@tldraw/editor'
 import { vi } from 'vitest'
 import { TestEditor } from './TestEditor'
 import { TL } from './test-jsx'
 
+// Custom uncullable shape type for testing canCull override
+type UncullableShape = TLBaseShape<'uncullable', { w: number; h: number }>
+
+class UncullableShapeUtil extends BaseBoxShapeUtil<UncullableShape> {
+	static override type = 'uncullable' as const
+	static override props: RecordProps<UncullableShape> = {
+		w: T.number,
+		h: T.number,
+	}
+
+	override canCull() {
+		return false
+	}
+
+	override getDefaultProps(): UncullableShape['props'] {
+		return {
+			w: 100,
+			h: 100,
+		}
+	}
+
+	override component() {
+		return <div>Uncullable shape</div>
+	}
+
+	override indicator() {
+		return <div>Uncullable shape</div>
+	}
+}
+
 let editor: TestEditor
 
 beforeEach(() => {
-	editor = new TestEditor()
+	editor = new TestEditor({ shapeUtils: [UncullableShapeUtil] })
 	editor.setScreenBounds({ x: 0, y: 0, w: 1800, h: 900 })
 })
 
@@ -203,3 +241,34 @@ it('works for shapes that are outside of the viewport, but are then moved inside
 	// Arrow should also not be culled
 	expect(editor.getCulledShapes()).toEqual(new Set())
 })
+
+it('respects canCull override - shapes that cannot be culled are never culled', () => {
+	const cullableShapeId = createShapeId()
+	const uncullableShapeId = createShapeId()
+
+	// Create both shapes outside the viewport
+	editor.createShapes([
+		{
+			id: cullableShapeId,
+			type: 'geo',
+			x: -2000, // Way outside viewport
+			y: -2000,
+			props: { w: 100, h: 100 },
+		},
+		{
+			id: uncullableShapeId,
+			type: 'uncullable',
+			x: -2000, // Way outside viewport
+			y: -2000,
+			props: { w: 100, h: 100 },
+		},
+	])
+
+	const culledShapes = editor.getCulledShapes()
+
+	// The regular geo shape should be culled since it's outside the viewport
+	expect(culledShapes).toContain(cullableShapeId)
+
+	// The uncullable shape should NOT be culled even though it's outside the viewport
+	expect(culledShapes).not.toContain(uncullableShapeId)
+})

package/tldraw.css

@@ -693,11 +693,17 @@ input,
 }
 
 .tl-text-measure {
-	position: absolute;
 	z-index: var(--tl-layer-canvas-hidden);
+	opacity: 0;
+	visibility: hidden;
+
+	/* pointer-events: all; */
+	/* opacity: 1; */
+	/* z-index: 99999;  */
+
+	position: absolute;
 	top: 0px;
 	left: 0px;
-	opacity: 0;
 	width: max-content;
 	box-sizing: border-box;
 	pointer-events: none;
@@ -708,7 +714,6 @@ input,
 	border: none;
 	user-select: none;
 	contain: style paint;
-	visibility: hidden;
 	/* N.B. This property, while discouraged ("intended for Document Type Definition (DTD) designers") is necessary for ensuring correct mixed RTL/LTR behavior when exporting SVGs. */
 	unicode-bidi: plaintext;
 	-webkit-user-select: none;
@@ -2285,6 +2290,10 @@ it from receiving any pointer events or affecting the cursor. */
 	-webkit-user-select: auto !important;
 }
 
+.tlui-input::placeholder {
+	color: var(--tl-color-text-3);
+}
+
 .tlui-input__wrapper {
 	width: 100%;
 	height: 44px;
@@ -2369,6 +2378,12 @@ it from receiving any pointer events or affecting the cursor. */
 	box-shadow: var(--tl-shadow-3);
 }
 
+@media (max-height: 600px) {
+	.tlui-menu {
+		max-height: 70vh;
+	}
+}
+
 .tlui-menu::-webkit-scrollbar {
 	display: none;
 }