tldraw 3.16.0-next.4337ae1ab96d → 3.16.0-next.8eb6d5c2d8f4

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,20 @@ function TooltipSingleton() {
 		}
 	}, [cameraState, isOpen, currentTooltip, editor])
 
+	useEffect(() => {
+		function handleKeyDown(event: KeyboardEvent) {
+			if (event.key === 'Escape' && currentTooltip && isOpen) {
+				tooltipManager.hideTooltip(editor, currentTooltip.id)
+				event.stopPropagation()
+			}
+		}
+
+		document.addEventListener('keydown', handleKeyDown, { capture: true })
+		return () => {
+			document.removeEventListener('keydown', handleKeyDown, { capture: true })
+		}
+	}, [editor, currentTooltip, isOpen])
+
 	// Update open state and trigger position
 	useEffect(() => {
 		let timer: ReturnType<typeof setTimeout> | null = null
@@ -241,6 +267,11 @@ export const TldrawUiTooltip = forwardRef<HTMLButtonElement, TldrawUiTooltipProp
 		const editor = useMaybeEditor()
 		const tooltipId = useRef<string>(uniqueId())
 		const hasProvider = useContext(TooltipSingletonContext)
+		const enhancedA11yMode = useValue(
+			'enhancedA11yMode',
+			() => editor?.user.getEnhancedA11yMode(),
+			[editor]
+		)
 
 		const orientationCtx = useTldrawUiOrientation()
 		const sideToUse = side ?? orientationCtx.tooltipSide
@@ -254,18 +285,38 @@ export const TldrawUiTooltip = forwardRef<HTMLButtonElement, TldrawUiTooltipProp
 			}
 		}, [editor, hasProvider])
 
-		// Don't show tooltip if disabled, no content, or UI labels are disabled
+		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 enhanced accessibility mode is disabled
 		if (disabled || !content) {
 			return <>{children}</>
 		}
 
-		const delayDurationToUse =
-			delayDuration ?? (editor?.options.tooltipDelayMs || DEFAULT_TOOLTIP_DELAY_MS)
+		let delayDurationToUse
+		if (enhancedA11yMode) {
+			delayDurationToUse = 0
+		} else {
+			delayDurationToUse =
+				delayDuration ?? (editor?.options.tooltipDelayMs || DEFAULT_TOOLTIP_DELAY_MS)
+		}
 
 		// Fallback to old behavior if no provider
-		if (!hasProvider) {
+		if (!hasProvider || enhancedA11yMode) {
 			return (
-				<_Tooltip.Root delayDuration={delayDurationToUse} disableHoverableContent>
+				<_Tooltip.Root
+					delayDuration={delayDurationToUse}
+					disableHoverableContent={!enhancedA11yMode}
+				>
 					<_Tooltip.Trigger asChild ref={ref}>
 						{children}
 					</_Tooltip.Trigger>

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

@@ -1270,16 +1270,16 @@ export function ActionsProvider({ overrides, children }: ActionsProviderProps) {
 				checkbox: true,
 			},
 			{
-				id: 'toggle-ui-labels',
+				id: 'enhanced-a11y-mode',
 				label: {
-					default: 'action.toggle-ui-labels',
-					menu: 'action.toggle-ui-labels.menu',
+					default: 'action.enhanced-a11y-mode',
+					menu: 'action.enhanced-a11y-mode.menu',
 				},
 				readonlyOk: true,
 				onSelect(source) {
-					trackEvent('toggle-ui-labels', { source })
+					trackEvent('enhanced-a11y-mode', { source })
 					editor.user.updateUserPreferences({
-						showUiLabels: !editor.user.getShowUiLabels(),
+						enhancedA11yMode: !editor.user.getEnhancedA11yMode(),
 					})
 				},
 				checkbox: true,
@@ -1344,28 +1344,6 @@ export function ActionsProvider({ overrides, children }: ActionsProviderProps) {
 					}
 				},
 			},
-			{
-				id: 'toggle-focus-mode',
-				label: {
-					default: 'action.toggle-focus-mode',
-					menu: 'action.toggle-focus-mode.menu',
-				},
-				readonlyOk: true,
-				kbd: 'cmd+.,ctrl+.',
-				checkbox: true,
-				onSelect(source) {
-					// this needs to be deferred because it causes the menu
-					// UI to unmount which puts us in a dodgy state
-					editor.timers.requestAnimationFrame(() => {
-						editor.run(() => {
-							trackEvent('toggle-focus-mode', { source })
-							helpers.clearDialogs()
-							helpers.clearToasts()
-							editor.updateInstanceState({ isFocusMode: !editor.getInstanceState().isFocusMode })
-						})
-					})
-				},
-			},
 			{
 				id: 'toggle-grid',
 				label: {
@@ -1584,6 +1562,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/context/events.tsx

@@ -102,13 +102,14 @@ export interface TLUiEventMap {
 	'toggle-grid-mode': null
 	'toggle-wrap-mode': null
 	'toggle-focus-mode': null
+	'input-mode': { value: string }
 	'toggle-debug-mode': null
 	'toggle-dynamic-size-mode': null
 	'toggle-paste-at-cursor': null
 	'toggle-lock': null
 	'toggle-reduce-motion': null
 	'toggle-keyboard-shortcuts': null
-	'toggle-ui-labels': null
+	'enhanced-a11y-mode': null
 	'toggle-edge-scrolling': null
 	'color-scheme': { value: string }
 	'exit-pen-mode': 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

@@ -3,6 +3,11 @@
 
 /** @public */
 export type TLUiTranslationKey =
+	| 'action.toggle-auto-pan'
+	| 'action.toggle-auto-zoom'
+	| 'action.toggle-auto-none'
+	| 'action.toggle-mouse'
+	| 'action.toggle-trackpad'
 	| 'action.convert-to-bookmark'
 	| 'action.convert-to-embed'
 	| 'action.open-embed-link'
@@ -93,8 +98,8 @@ export type TLUiTranslationKey =
 	| 'action.toggle-reduce-motion'
 	| 'action.toggle-keyboard-shortcuts.menu'
 	| 'action.toggle-keyboard-shortcuts'
-	| 'action.toggle-ui-labels.menu'
-	| 'action.toggle-ui-labels'
+	| 'action.enhanced-a11y-mode.menu'
+	| 'action.enhanced-a11y-mode'
 	| 'action.toggle-edge-scrolling.menu'
 	| 'action.toggle-edge-scrolling'
 	| 'action.toggle-debug-mode.menu'
@@ -122,6 +127,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'
@@ -310,6 +316,7 @@ export type TLUiTranslationKey =
 	| 'menu.language'
 	| 'menu.preferences'
 	| 'menu.view'
+	| 'menu.input-mode'
 	| 'context-menu.title'
 	| 'context-menu.edit'
 	| 'context-menu.arrange'
@@ -411,6 +418,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

@@ -3,6 +3,11 @@
 
 /** @internal */
 export const DEFAULT_TRANSLATION = {
+	'action.toggle-auto-pan': 'Auto (trackpad)',
+	'action.toggle-auto-zoom': 'Auto (mouse)',
+	'action.toggle-auto-none': 'Auto',
+	'action.toggle-mouse': 'Mouse',
+	'action.toggle-trackpad': 'Trackpad',
 	'action.convert-to-bookmark': 'Convert to Bookmark',
 	'action.convert-to-embed': 'Convert to Embed',
 	'action.open-embed-link': 'Open link',
@@ -92,10 +97,10 @@ 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': 'Toggle UI labels',
+	'action.enhanced-a11y-mode.menu': 'Enhanced accessibility mode',
+	'action.enhanced-a11y-mode': 'Toggle enhanced accessibility mode',
 	'action.toggle-edge-scrolling.menu': 'Edge scrolling',
 	'action.toggle-edge-scrolling': 'Toggle edge scrolling',
 	'action.toggle-debug-mode.menu': 'Debug mode',
@@ -123,6 +128,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',
@@ -311,6 +317,7 @@ export const DEFAULT_TRANSLATION = {
 	'menu.language': 'Language',
 	'menu.preferences': 'Preferences',
 	'menu.view': 'View',
+	'menu.input-mode': 'Input mode',
 	'context-menu.title': 'Context menu',
 	'context-menu.edit': 'Edit',
 	'context-menu.arrange': 'Arrange',
@@ -414,6 +421,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-next.4337ae1ab96d'
+export const version = '3.16.0-next.8eb6d5c2d8f4'
 export const publishDates = {
 	major: '2024-09-13T14:36:29.063Z',
-	minor: '2025-09-03T14:48:08.249Z',
-	patch: '2025-09-03T14:48:08.249Z',
+	minor: '2025-09-18T14:19:10.006Z',
+	patch: '2025-09-18T14:19:10.006Z',
 }

package/src/lib/ui.css

@@ -168,7 +168,7 @@
 	min-height: 40px;
 	width: 100%;
 	gap: 8px;
-	margin: -4px 0px;
+	margin-top: -4px;
 }
 
 .tlui-button__menu::after {
@@ -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;
 }
@@ -987,7 +997,7 @@
 	max-width: 148px;
 }
 
-.tlui-style-panel[data-show-ui-labels='true'] .tlui-button[data-isactive='true'] {
+.tlui-style-panel[data-enhanced-a11y-mode='true'] .tlui-button[data-isactive='true'] {
 	border-radius: 10px;
 	outline: 2px solid var(--tl-color-text);
 	outline-offset: -5px;
@@ -1029,6 +1039,19 @@ tldraw? probably.
 	display: none;
 }
 
+/*
+ * This is used in a couple places, like Align and Vertical Align.
+ * It's because we have a toolbar with a Toggle Group but then an adjacent button
+ * next to it that opens a popup.
+ */
+.tlui-style-panel__section .tlui-toolbar:has(.tlui-toolbar) {
+	flex-wrap: wrap;
+}
+
+.tlui-style-panel__section .tlui-toolbar:has(.tlui-toolbar) .tlui-style-panel__subheading {
+	margin-left: -2px;
+}
+
 .tlui-style-panel__section__common:not(:only-child) {
 	margin-bottom: 7px;
 	border-bottom: 1px solid var(--tl-color-divider);

package/src/test/TestEditor.ts

@@ -86,8 +86,14 @@ export class TestEditor extends Editor {
 		elm.tabIndex = 0
 		elm.getBoundingClientRect = () => bounds as DOMRect
 
-		const shapeUtilsWithDefaults = [...defaultShapeUtils, ...(options.shapeUtils ?? [])]
-		const bindingUtilsWithDefaults = [...defaultBindingUtils, ...(options.bindingUtils ?? [])]
+		const shapeUtilsWithDefaults = [
+			...defaultShapeUtils.filter((s) => !options.shapeUtils?.some((su) => su.type === s.type)),
+			...(options.shapeUtils ?? []),
+		]
+		const bindingUtilsWithDefaults = [
+			...defaultBindingUtils.filter((b) => !options.bindingUtils?.some((bu) => bu.type === b.type)),
+			...(options.bindingUtils ?? []),
+		]
 
 		super({
 			...options,

package/src/test/commands/setCamera.test.ts

@@ -12,6 +12,7 @@ beforeEach(() => {
 		},
 	})
 	editor.updateViewportScreenBounds(new Box(0, 0, 1600, 900))
+	editor.user.updateUserPreferences({ inputMode: null })
 })
 
 const wheelEvent = {
@@ -204,6 +205,18 @@ describe('CameraOptions.wheelBehavior', () => {
 			.forceTick()
 		expect(editor.getCamera()).toMatchObject({ x: 0, y: 5, z: 1 })
 	})
+
+	it('When input mode is set, camera wheel behavior is ignored', () => {
+		editor.user.updateUserPreferences({ inputMode: 'trackpad' })
+		editor
+			.setCameraOptions({ ...DEFAULT_CAMERA_OPTIONS, wheelBehavior: 'zoom' })
+			.dispatch({
+				...wheelEvent,
+				delta: new Vec(0, 5, 0.01),
+			})
+			.forceTick()
+		expect(editor.getCamera()).toMatchObject({ x: 0, y: 5, z: 1 })
+	})
 })
 
 describe('CameraOptions.panSpeed', () => {

package/src/test/frames.test.ts

@@ -1680,3 +1680,18 @@ it('drops into the top-most frame, if there is one', () => {
 
 	expect(editor.getShape(rect)?.parentId).toBe(editor.getCurrentPageId())
 })
+
+it('does not get drop children of nested frame if they are occluded from the outer frame', () => {
+	const frame1Id = dragCreateFrame({ down: [100, 100], move: [300, 300], up: [300, 300] })
+	const frame2Id = dragCreateFrame({ down: [150, 150], move: [290, 290], up: [290, 290] })
+
+	const rect1 = createRect({ pos: [280, 160], size: [10, 30] })
+
+	expect(editor.getShape(rect1)?.parentId).toBe(frame2Id)
+	expect(editor.getShape(frame2Id)?.parentId).toBe(frame1Id)
+
+	editor.select(frame2Id)
+	editor.translateSelection(30, 0)
+
+	expect(editor.getShape(rect1)?.parentId).toBe(frame2Id)
+})

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)
+})