tldraw 5.4.0-next.ef99ab47e5ce → 5.4.0

package/src/lib/ui/components/ActionsMenu/DefaultActionsMenu.tsx

@@ -1,5 +1,4 @@
-import { useEditor, usePassThroughWheelEvents, useValue } from '@tldraw/editor'
-import { ReactNode, memo, useRef } from 'react'
+import { ReactNode, memo } from 'react'
 import { PORTRAIT_BREAKPOINT } from '../../constants'
 import { useBreakpoint } from '../../context/breakpoints'
 import { useReadonly } from '../../hooks/useReadonly'
@@ -29,22 +28,14 @@ export const DefaultActionsMenu = memo(function DefaultActionsMenu({
 	const isReadonlyMode = useReadonly()
 	const { orientation } = useTldrawUiOrientation()
 
-	const ref = useRef<HTMLDivElement>(null)
-	usePassThroughWheelEvents(ref)
-
-	const editor = useEditor()
-	const isInAcceptableReadonlyState = useValue(
-		'should display quick actions when in readonly',
-		() => editor.isInAny('hand', 'zoom'),
-		[editor]
-	)
-
 	// Get the actions menu content, either the default component or the user's
 	// override. If there's no menu content, then the user has set it to null,
 	// so skip rendering the menu.
 
 	const content = children ?? <DefaultActionsMenuContent />
-	if (isReadonlyMode && !isInAcceptableReadonlyState) return
+
+	// Every default action edits shapes, so in readonly mode the menu would open empty
+	if (isReadonlyMode) return
 
 	return (
 		<TldrawUiPopover id="actions-menu">
@@ -71,7 +62,6 @@ export const DefaultActionsMenu = memo(function DefaultActionsMenu({
 				sideOffset={6}
 			>
 				<TldrawUiToolbar
-					ref={ref}
 					label={msg('actions-menu.title')}
 					className="tlui-actions-menu"
 					data-testid="actions-menu.content"

package/src/lib/ui/components/ContextMenu/DefaultContextMenu.tsx

@@ -6,7 +6,8 @@ import {
 	useValue,
 } from '@tldraw/editor'
 import { ContextMenu as _ContextMenu } from 'radix-ui'
-import { ReactNode, memo, useCallback, useEffect, useRef } from 'react'
+import { ReactNode, memo, useCallback, useContext, useEffect, useRef } from 'react'
+import { ContextMenuPagePointContext } from '../../context/actions'
 import { useMenuIsOpen } from '../../hooks/useMenuIsOpen'
 import { useDirection, useTranslation } from '../../hooks/useTranslation/useTranslation'
 import { TldrawUiMenuContextProvider } from '../primitives/menus/TldrawUiMenuContext'
@@ -74,9 +75,14 @@ export const DefaultContextMenu = memo(function DefaultContextMenu({
 	// interacts again.
 	const suppressDismissUntilRef = useRef(0)
 
+	const rContextMenuPagePoint = useContext(ContextMenuPagePointContext)
+
 	const cb = useCallback(
 		(isOpen: boolean) => {
 			const body = editor.getContainerDocument().body
+			if (rContextMenuPagePoint) {
+				rContextMenuPagePoint.current = isOpen ? editor.inputs.getCurrentPagePoint().clone() : null
+			}
 			if (!isOpen) {
 				const onlySelectedShape = editor.getOnlySelectedShape()
 
@@ -121,7 +127,7 @@ export const DefaultContextMenu = memo(function DefaultContextMenu({
 				}
 			}
 		},
-		[editor, preventEscapeFromLosingShapeFocus]
+		[editor, preventEscapeFromLosingShapeFocus, rContextMenuPagePoint]
 	)
 
 	const container = useContainer()

package/src/lib/ui/components/ContextMenu/DefaultContextMenuContent.tsx

@@ -29,7 +29,11 @@ export function DefaultContextMenuContent() {
 
 	return (
 		<>
-			{showCollaborationUi && <CursorChatItem />}
+			{showCollaborationUi && (
+				<TldrawUiMenuGroup id="cursor-chat">
+					<CursorChatItem />
+				</TldrawUiMenuGroup>
+			)}
 			<TldrawUiMenuGroup id="modify">
 				<EditMenuSubmenu />
 				<ArrangeMenuSubmenu />

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

@@ -1,6 +1,6 @@
 import { useContainer, useValue } from '@tldraw/editor'
 import { Dialog as _Dialog } from 'radix-ui'
-import { memo, useCallback } from 'react'
+import { memo, useCallback, useRef } from 'react'
 import { TLUiDialog, useDialogs } from '../context/dialogs'
 import { useDirection } from '../hooks/useTranslation/useTranslation'
 
@@ -10,6 +10,7 @@ const TldrawUiDialog = ({ id, component: ModalContent, preventBackgroundClose }:
 
 	const container = useContainer()
 	const dir = useDirection()
+	const contentRef = useRef<HTMLDivElement>(null)
 
 	const handleOpenChange = useCallback(
 		(isOpen: boolean) => {
@@ -29,6 +30,7 @@ const TldrawUiDialog = ({ id, component: ModalContent, preventBackgroundClose }:
 				<_Dialog.Overlay dir={dir} className="tlui-dialog__overlay" />
 				<div dir={dir} className="tlui-dialog__positioner">
 					<_Dialog.Content
+						ref={contentRef}
 						dir={dir}
 						className="tlui-dialog__content"
 						aria-describedby={undefined}
@@ -39,6 +41,20 @@ const TldrawUiDialog = ({ id, component: ModalContent, preventBackgroundClose }:
 							// both a pointer press and a focus shift outside the dialog; opt out of both
 							// when the dialog asks to stay open on background interactions (escape still
 							// closes it).
+
+							// A touch press is checked against the layers at the following click rather
+							// than at the press itself, so a press that closes a dialog stacked on top of
+							// this one arrives here once this one is topmost, and reads as a press
+							// outside it. A press inside another dialog is never outside this one, and
+							// stays so after that dialog unmounts and takes the press's target with it.
+							const target = e.detail.originalEvent.target
+							const pressedDialog =
+								target instanceof Element ? target.closest('.tlui-dialog__content') : null
+							if (pressedDialog && pressedDialog !== contentRef.current) {
+								e.preventDefault()
+								return
+							}
+
 							if (preventBackgroundClose) {
 								e.preventDefault()
 							}

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

@@ -41,8 +41,15 @@ export const EditLinkDialog = track(function EditLinkDialog({ onClose }: TLUiDia
 	const editor = useEditor()
 
 	const selectedShape = editor.getOnlySelectedShape()
+	const hasShapeWithUrl = isShapeWithUrl(selectedShape)
 
-	if (!isShapeWithUrl(selectedShape)) {
+	// The shape can be deleted or deselected from under the open dialog (a collaborator, or a
+	// keypress reaching the canvas). Returning null on its own would leave an empty dialog frame.
+	useEffect(() => {
+		if (!hasShapeWithUrl) onClose()
+	}, [hasShapeWithUrl, onClose])
+
+	if (!hasShapeWithUrl) {
 		return null
 	}
 
@@ -139,12 +146,6 @@ export const EditLinkDialogInner = track(function EditLinkDialogInner({
 		onClose()
 	}, [onClose])
 
-	if (!selectedShape) {
-		// dismiss modal
-		onClose()
-		return null
-	}
-
 	// Are we going from a valid state to an invalid state?
 	const isRemoving = rInitialValue.current && !urlInputState.valid
 

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

@@ -3,12 +3,11 @@ import {
 	TLPointerEventInfo,
 	Vec,
 	getPointerInfo,
-	isAccelKey,
-	normalizeWheel,
 	setPointerCapture,
 	useContainer,
 	useColorMode,
 	useEditor,
+	usePassThroughWheelEvents,
 	useValue,
 } from '@tldraw/editor'
 import * as React from 'react'
@@ -26,6 +25,9 @@ export function DefaultMinimap() {
 	const container = useContainer()
 	const msg = useTranslation()
 
+	const rMinimap = React.useRef<HTMLDivElement>(null)
+	usePassThroughWheelEvents(rMinimap)
+
 	const rCanvas = React.useRef<HTMLCanvasElement>(null!)
 	const rPointing = React.useRef(false)
 	const rActivePointerId = React.useRef<number | null>(null)
@@ -177,25 +179,6 @@ export function DefaultMinimap() {
 		[editor]
 	)
 
-	const onWheel = React.useCallback(
-		(e: React.WheelEvent<HTMLCanvasElement>) => {
-			const offset = normalizeWheel(e)
-
-			editor.dispatch({
-				type: 'wheel',
-				name: 'wheel',
-				delta: offset,
-				point: new Vec(e.clientX, e.clientY),
-				shiftKey: e.shiftKey,
-				altKey: e.altKey,
-				ctrlKey: e.metaKey || e.ctrlKey,
-				metaKey: e.metaKey,
-				accelKey: isAccelKey(e),
-			})
-		},
-		[editor]
-	)
-
 	const colorMode = useColorMode()
 	const currentThemeId = useValue('current theme id', () => editor.getCurrentThemeId(), [editor])
 
@@ -209,7 +192,7 @@ export function DefaultMinimap() {
 	}, [colorMode, currentThemeId, editor])
 
 	return (
-		<div className="tlui-minimap">
+		<div ref={rMinimap} className="tlui-minimap">
 			<canvas
 				ref={rCanvas}
 				role="img"
@@ -219,7 +202,6 @@ export function DefaultMinimap() {
 				onDoubleClick={onDoubleClick}
 				onPointerMove={onPointerMove}
 				onPointerDown={onPointerDown}
-				onWheelCapture={onWheel}
 			/>
 		</div>
 	)

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

@@ -4,7 +4,6 @@ import { useUiEvents } from '../../context/events'
 import { useTranslation } from '../../hooks/useTranslation/useTranslation'
 import { TldrawUiButton } from '../primitives/Button/TldrawUiButton'
 import { TldrawUiButtonIcon } from '../primitives/Button/TldrawUiButtonIcon'
-import { TldrawUiRow } from '../primitives/layout'
 import { TldrawUiIcon } from '../primitives/TldrawUiIcon'
 
 /** @public */
@@ -38,7 +37,7 @@ export const DefaultPeopleMenuItem = track(function DefaultPeopleMenuItem({
 	if (!presence) return null
 
 	return (
-		<TldrawUiRow
+		<div
 			className="tlui-people-menu__item"
 			data-follow={youAreFollowingThem || theyAreFollowingYou}
 		>
@@ -70,6 +69,6 @@ export const DefaultPeopleMenuItem = track(function DefaultPeopleMenuItem({
 					icon={theyAreFollowingYou ? 'leading' : youAreFollowingThem ? 'following' : 'follow'}
 				/>
 			</TldrawUiButton>
-		</TldrawUiRow>
+		</div>
 	)
 })

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

@@ -112,6 +112,7 @@ function StylePanelDoubleDropdownPickerInlineInner<T extends string>(
 										type="icon"
 										key={item.value}
 										onClick={() => {
+											ctx.onHistoryMark('select style dropdown item')
 											onValueChange(styleA, item.value)
 											tlmenus.deleteOpenMenu(idA, editor.contextId)
 											setIsOpenA(false)
@@ -153,6 +154,7 @@ function StylePanelDoubleDropdownPickerInlineInner<T extends string>(
 										title={`${msg(labelB)} — ${msg(`${uiTypeB}-style.${item.value}` as TLUiTranslationKey)}`}
 										data-testid={`style.${uiTypeB}.${item.value}`}
 										onClick={() => {
+											ctx.onHistoryMark('select style dropdown item')
 											onValueChange(styleB, item.value)
 											tlmenus.deleteOpenMenu(idB, editor.contextId)
 											setIsOpenB(false)

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

@@ -33,6 +33,7 @@ export function AltTextEditor({ shapeId, onClose, source }: AltTextEditorProps)
 		trackEvent('set-alt-text', { source })
 		const shape = editor.getShape<ExtractShapeByProps<{ altText: string }>>(shapeId)
 		if (!shape) return
+		editor.markHistoryStoppingPoint('set alt text')
 		editor.updateShapes([
 			{
 				id: shape.id,

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

@@ -189,15 +189,20 @@ export const DefaultImageToolbarContent = track(function DefaultImageToolbarCont
 
 	useEffect(() => {
 		function handleKeyDown(e: KeyboardEvent) {
-			if (isManipulating) {
-				if (e.key === 'Escape') {
-					editor.cancel()
-					onManipulatingEnd()
-				} else if (e.key === 'Enter') {
-					editor.complete()
-					onManipulatingEnd()
-				}
+			if (!isManipulating) return
+			if (e.key === 'Escape') {
+				editor.cancel()
+			} else if (e.key === 'Enter') {
+				editor.complete()
+			} else {
+				return
 			}
+			onManipulatingEnd()
+			// Otherwise the keydown bubbles to the container's handler, which cancels again
+			// against select.idle and clears the selection (#10405). Leaving crop mode also
+			// unmounts the slider, so refocus the container to keep shortcuts working.
+			e.stopPropagation()
+			editor.getContainer().focus()
 		}
 		const elm = sliderRef.current
 		if (elm) {

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

@@ -0,0 +1,92 @@
+import { fireEvent, render } from '@testing-library/react'
+import { afterEach, describe, expect, it, vi } from 'vitest'
+import { TldrawUiSlider } from './TldrawUiSlider'
+
+function renderSlider() {
+	const calls: string[] = []
+	const onValueChange = vi.fn((value: number) => {
+		calls.push(`change:${value}`)
+	})
+	const onHistoryMark = vi.fn((id: string) => {
+		calls.push(`mark:${id}`)
+	})
+	const result = render(
+		<TldrawUiSlider
+			data-testid="slider"
+			value={2}
+			steps={4}
+			label="style-panel.opacity"
+			title="Opacity"
+			onValueChange={onValueChange}
+			onHistoryMark={onHistoryMark}
+		/>
+	)
+	const thumb = result.getByRole('slider')
+	return { ...result, thumb, calls, onValueChange, onHistoryMark }
+}
+
+describe('TldrawUiSlider', () => {
+	afterEach(() => {
+		vi.clearAllMocks()
+	})
+
+	it('marks a history stopping point before a keyboard change', () => {
+		const { thumb, calls } = renderSlider()
+
+		fireEvent.keyDown(thumb, { key: 'ArrowLeft' })
+
+		expect(calls).toEqual(['mark:keyboard slider', 'change:1'])
+	})
+
+	it.each(['ArrowRight', 'ArrowUp', 'ArrowDown', 'PageUp', 'PageDown', 'Home', 'End'])(
+		'marks a history stopping point for %s',
+		(key) => {
+			const { thumb, onHistoryMark, onValueChange } = renderSlider()
+
+			fireEvent.keyDown(thumb, { key })
+
+			expect(onHistoryMark).toHaveBeenCalledTimes(1)
+			expect(onValueChange).toHaveBeenCalledTimes(1)
+		}
+	)
+
+	it('marks once for a held key so the repeat run is a single undo step', () => {
+		const { thumb, onHistoryMark, onValueChange } = renderSlider()
+
+		fireEvent.keyDown(thumb, { key: 'ArrowLeft' })
+		fireEvent.keyDown(thumb, { key: 'ArrowLeft', repeat: true })
+		fireEvent.keyDown(thumb, { key: 'ArrowLeft', repeat: true })
+
+		expect(onHistoryMark).toHaveBeenCalledTimes(1)
+		expect(onValueChange).toHaveBeenCalledTimes(3)
+	})
+
+	it('marks each separate key press', () => {
+		const { thumb, onHistoryMark } = renderSlider()
+
+		fireEvent.keyDown(thumb, { key: 'ArrowLeft' })
+		fireEvent.keyDown(thumb, { key: 'ArrowLeft' })
+		fireEvent.keyDown(thumb, { key: 'ArrowLeft' })
+
+		expect(onHistoryMark).toHaveBeenCalledTimes(3)
+	})
+
+	it('does not mark for keys that do not change the value', () => {
+		const { thumb, onHistoryMark, onValueChange } = renderSlider()
+
+		fireEvent.keyDown(thumb, { key: 'Tab' })
+		fireEvent.keyDown(thumb, { key: 'a' })
+		fireEvent.keyDown(thumb, { key: 'Enter' })
+
+		expect(onHistoryMark).not.toHaveBeenCalled()
+		expect(onValueChange).not.toHaveBeenCalled()
+	})
+
+	it('still marks a history stopping point on pointer down', () => {
+		const { getByTestId, onHistoryMark } = renderSlider()
+
+		fireEvent.pointerDown(getByTestId('slider'))
+
+		expect(onHistoryMark).toHaveBeenCalledWith('click slider')
+	})
+})

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

@@ -5,6 +5,17 @@ import { TLUiTranslationKey } from '../../hooks/useTranslation/TLUiTranslationKe
 import { useDirection, useTranslation } from '../../hooks/useTranslation/useTranslation'
 import { hideAllTooltips, TldrawUiTooltip } from './TldrawUiTooltip'
 
+const SLIDER_VALUE_KEYS = new Set([
+	'ArrowUp',
+	'ArrowDown',
+	'ArrowLeft',
+	'ArrowRight',
+	'PageUp',
+	'PageDown',
+	'Home',
+	'End',
+])
+
 /** @public */
 export interface TLUiSliderProps {
 	min?: number
@@ -82,6 +93,19 @@ export const TldrawUiSlider = React.forwardRef<HTMLDivElement, TLUiSliderProps>(
 		}
 	}, [])
 
+	// Capture phase so the mark lands before Radix's bubble-phase onKeyDown changes the value;
+	// otherwise keyboard changes squash into the preceding history entry and undo skips past them.
+	// Repeats from a held key are skipped so the run is one undo step, like a pointer drag.
+	const handleKeyDown = useCallback(
+		(event: React.KeyboardEvent) => {
+			handleKeyEvent(event)
+			if (SLIDER_VALUE_KEYS.has(event.key) && !event.repeat) {
+				onHistoryMark?.('keyboard slider')
+			}
+		},
+		[handleKeyEvent, onHistoryMark]
+	)
+
 	return (
 		<div className="tlui-slider__container">
 			<TldrawUiTooltip content={titleAndLabel}>
@@ -95,7 +119,7 @@ export const TldrawUiSlider = React.forwardRef<HTMLDivElement, TLUiSliderProps>(
 					value={value !== null ? [value] : undefined}
 					onPointerDown={handlePointerDown}
 					onValueChange={handleValueChange}
-					onKeyDownCapture={handleKeyEvent}
+					onKeyDownCapture={handleKeyDown}
 					onKeyUpCapture={handleKeyEvent}
 				>
 					<_Slider.Track className="tlui-slider__track" dir={dir}>

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

@@ -63,6 +63,15 @@ export type TLUiActionsContextType = Record<string, TLUiActionItem>
 /** @internal */
 export const ActionsContext = React.createContext<TLUiActionsContextType | null>(null)
 
+/**
+ * The page point the context menu opened at, or null while it is closed. The context menu
+ * writes it; actions that place content (paste) read it, since the pointer keeps moving
+ * over the menu after it opens (#10423).
+ *
+ * @internal
+ */
+export const ContextMenuPagePointContext = React.createContext<{ current: Vec | null } | null>(null)
+
 /** @public */
 export interface ActionsProviderProps {
 	overrides?(
@@ -109,6 +118,8 @@ export function ActionsProvider({ overrides, children }: ActionsProviderProps) {
 
 	const defaultDocumentName = helpers.msg('document.default-name')
 
+	const rContextMenuPagePoint = React.useRef<Vec | null>(null)
+
 	// should this be a useMemo? looks like it doesn't actually deref any reactive values
 	const actions = React.useMemo<TLUiActionsContextType>(() => {
 		const editor = _editor as Editor
@@ -587,7 +598,7 @@ export function ActionsProvider({ overrides, children }: ActionsProviderProps) {
 			{
 				id: 'frame-selection',
 				label: 'action.frame-selection',
-				kbd: 'cmd+alt+g',
+				kbd: 'cmd+alt+g,ctrl+alt+g',
 				onSelect(source) {
 					if (!canApplySelectionAction()) return
 					if (mustGoBackToSelectToolFirst()) return
@@ -1031,7 +1042,6 @@ export function ActionsProvider({ overrides, children }: ActionsProviderProps) {
 					if (!canApplySelectionAction()) return
 					if (mustGoBackToSelectToolFirst()) return
 
-					editor.markHistoryStoppingPoint('cut')
 					helpers.cut(source)
 				},
 			},
@@ -1052,14 +1062,16 @@ export function ActionsProvider({ overrides, children }: ActionsProviderProps) {
 				label: 'action.paste',
 				kbd: 'cmd+v,ctrl+v',
 				onSelect(source) {
+					// Resolve the point before the clipboard read: the menu closes, and clears
+					// its point, before the read settles.
+					const point =
+						source === 'context-menu'
+							? (rContextMenuPagePoint.current ?? editor.inputs.getCurrentPagePoint())
+							: undefined
 					navigator.clipboard
 						?.read()
 						.then((clipboardItems) => {
-							helpers.paste(
-								clipboardItems,
-								source,
-								source === 'context-menu' ? editor.inputs.getCurrentPagePoint() : undefined
-							)
+							helpers.paste(clipboardItems, source, point)
 						})
 						.catch(() => {
 							helpers.addToast({
@@ -1481,6 +1493,7 @@ export function ActionsProvider({ overrides, children }: ActionsProviderProps) {
 						}
 					}
 					if (updates.length > 0) {
+						editor.markHistoryStoppingPoint('unlock all')
 						editor.updateShapes(updates)
 					}
 				},
@@ -1978,7 +1991,11 @@ export function ActionsProvider({ overrides, children }: ActionsProviderProps) {
 		components,
 	])
 
-	return <ActionsContext.Provider value={asActions(actions)}>{children}</ActionsContext.Provider>
+	return (
+		<ContextMenuPagePointContext.Provider value={rContextMenuPagePoint}>
+			<ActionsContext.Provider value={asActions(actions)}>{children}</ActionsContext.Provider>
+		</ContextMenuPagePointContext.Provider>
+	)
 }
 
 /** @public */

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

@@ -803,6 +803,7 @@ export function useMenuClipboardEvents() {
 
 			const didCopy = await handleNativeOrMenuCopy(editor, { operation: 'cut', source: 'menu' })
 			if (didCopy) {
+				editor.markHistoryStoppingPoint('cut')
 				editor.deleteShapes(editor.getSelectedShapeIds())
 				trackEvent('cut', { source })
 			}
@@ -900,6 +901,7 @@ export function useNativeClipboardEvents() {
 
 			const didCopy = await handleNativeOrMenuCopy(editor, { operation: 'cut', source: 'native' })
 			if (didCopy) {
+				editor.markHistoryStoppingPoint('cut')
 				editor.deleteShapes(editor.getSelectedShapeIds())
 				trackEvent('cut', { source: 'kbd' })
 			}

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

@@ -1,13 +1,15 @@
-import { useLicenseContext, useLicenseFeatureFlag } from '@tldraw/editor'
+import { useLicenseFeatureFlag, useMaybeLicenseManager } from '@tldraw/editor'
 
 /**
  * Whether the commenting feature is licensed for this editor. The default comment quick action and
  * its keyboard shortcut are hidden/disabled unless this is true. Enabled in development; in
  * production it requires a license that includes the commenting feature (or the collaboration
- * umbrella that grants it). Reactive: re-reads when license validation resolves.
+ * umbrella that grants it). Reactive: re-reads when license validation resolves. Works outside
+ * `<Tldraw />` too: UI mounted via `EditorProvider` resolves the license through the editor, and
+ * with no editor at all this is `false`.
  *
  * @internal
  */
 export function useCommentingEnabled(): boolean {
-	return useLicenseFeatureFlag(useLicenseContext(), 'commenting')
+	return useLicenseFeatureFlag(useMaybeLicenseManager(), 'commenting')
 }

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

@@ -49,34 +49,70 @@ export async function flattenShapesToImages(
 			}
 		})
 
-		for (let i = 0; i < expandedBounds.length; i++) {
-			const item = expandedBounds[i]
-			if (i === 0) {
-				groups[0] = {
-					shapes: [item.shape],
-					bounds: item.bounds,
-				}
-				continue
+		// Cluster shapes by connected components: any two shapes whose expanded
+		// bounds intersect end up in the same group. Using union-find here
+		// instead of a greedy first-fit pass means the result is independent of
+		// the order shapes appear in `shapeIds`, and a shape that bridges two
+		// otherwise-disjoint clusters merges them in one pass.
+		const parents = expandedBounds.map((_, i) => i)
+		const find = (i: number): number => {
+			let root = i
+			while (parents[root] !== root) root = parents[root]
+			while (parents[i] !== root) {
+				const next = parents[i]
+				parents[i] = root
+				i = next
 			}
+			return root
+		}
+		const union = (i: number, j: number) => {
+			const ri = find(i)
+			const rj = find(j)
+			if (ri !== rj) parents[ri] = rj
+		}
 
-			let didLand = false
+		// Broad-phase sweep: sort by minX and, for each box, only compare against
+		// later boxes until one starts past the current box's maxX. Boxes that
+		// don't overlap on the x-axis can't intersect, so this skips the bulk of
+		// the pairwise checks for spread-out selections while still finding every
+		// intersecting pair (Box.includes is symmetric, so each pair is tested once).
+		const order = expandedBounds
+			.map((_, i) => i)
+			.sort((a, b) => {
+				return expandedBounds[a].bounds.minX - expandedBounds[b].bounds.minX
+			})
 
-			for (const group of groups) {
-				if (group.bounds.includes(item.bounds)) {
-					group.shapes.push(item.shape)
-					group.bounds.expand(item.bounds)
-					didLand = true
-					break
+		for (let a = 0; a < order.length; a++) {
+			const i = order[a]
+			const boundsI = expandedBounds[i].bounds
+			for (let b = a + 1; b < order.length; b++) {
+				const j = order[b]
+				// sorted by minX, so once a box starts past i's maxX no later box can overlap i
+				if (expandedBounds[j].bounds.minX > boundsI.maxX) break
+				if (find(i) === find(j)) continue
+				if (boundsI.includes(expandedBounds[j].bounds)) {
+					union(i, j)
 				}
 			}
+		}
 
-			if (!didLand) {
-				groups.push({
+		const groupsByRoot = new Map<number, { shapes: TLShape[]; bounds: Box }>()
+		for (let i = 0; i < expandedBounds.length; i++) {
+			const root = find(i)
+			const item = expandedBounds[i]
+			const existing = groupsByRoot.get(root)
+			if (existing) {
+				existing.shapes.push(item.shape)
+				existing.bounds.expand(item.bounds)
+			} else {
+				groupsByRoot.set(root, {
 					shapes: [item.shape],
-					bounds: item.bounds,
+					bounds: item.bounds.clone(),
 				})
 			}
 		}
+
+		groups.push(...groupsByRoot.values())
 	} else {
 		const bounds = Box.Common(shapes.map((shape) => editor.getShapeMaskedPageBounds(shape)!))
 		groups.push({
@@ -123,11 +159,8 @@ export async function flattenShapesToImages(
 
 			let index: IndexKey = 'a1' as IndexKey
 			for (const shape of shapes) {
-				if (shape.parentId === commonAncestorId) {
-					if (shape.index > index) {
-						index = shape.index
-					}
-					break
+				if (shape.parentId === commonAncestorId && shape.index > index) {
+					index = shape.index
 				}
 			}