@tldraw/commenting 5.4.2 → 5.5.0-canary.0241f11f2e99

package/src/canvas/thread-pin.tsx

@@ -33,6 +33,7 @@ import { openThreadId } from './state'
 import { ThreadPreview, useMarkerPreview } from './thread-preview'
 import {
 	anchorPagePoint,
+	anchorViewportPoint,
 	commentTargetShapeAt,
 	impreciseShapePinInset,
 	isBoxInInflatedViewport,
@@ -40,6 +41,7 @@ import {
 	REGION_PIN_CORNER,
 	regionAnchorPinCorner,
 	regionPinPoint,
+	regionWithPinAt,
 	shapeAnchorAt,
 } from './thread-state'
 import { POPOVER_OFFSET, ThreadPopover, ThreadView } from './thread-view'
@@ -107,7 +109,7 @@ export const ThreadPin = memo(function ThreadPin({
 	// A region resizes from its corners — every corner but the pin's own, which the pin owns.
 	const resizeHandles = useMemo(
 		() => REGION_CORNERS.filter((c) => c.x !== pinCorner.x || c.y !== pinCorner.y),
-		[pinCorner]
+		[pinCorner.x, pinCorner.y]
 	)
 	const dragRef = useRef<{
 		startX: number
@@ -165,13 +167,8 @@ export const ThreadPin = memo(function ThreadPin({
 		'pin point',
 		() => {
 			if (thread.pageId !== editor.getCurrentPageId()) return null
-			const pagePoint = anchorPagePoint(editor, thread.anchor)
-			if (!pagePoint) return null
-			const viewportPoint = editor.pageToViewport(pagePoint)
-			const inset = impreciseShapePinInset(editor, thread.anchor)
-			const point = inset
-				? { x: viewportPoint.x + inset.x, y: viewportPoint.y + inset.y }
-				: viewportPoint
+			const point = anchorViewportPoint(editor, thread.anchor)
+			if (!point) return null
 			// Off-screen pins (plus a pre-mount margin) unmount rather than re-render every camera frame. A
 			// region thread stays mounted while any part of its box is on screen, since the box renders here too.
 			if (!exemptFromCull) {
@@ -187,6 +184,9 @@ export const ThreadPin = memo(function ThreadPin({
 	)
 	if (!point) return null
 
+	const toggleOpen = () =>
+		openThreadId.set(editor, openThreadId.get(editor) === thread.id ? null : thread.id)
+
 	const PinContent = options.components.PinContent
 	const threadAuthor = resolveAuthor(thread.createdBy)
 	const pinContent = PinContent ? (
@@ -247,28 +247,28 @@ export const ThreadPin = memo(function ThreadPin({
 			editor.setHintingShapes(hit ? [hit.id] : [])
 		}
 	}
-	// A cancelled pointer (touch gesture takeover, browser interruption) aborts the drag outright:
-	// no re-anchor commit, no click-toggle — the pin snaps back and the hint clears.
-	const cancelDrag = (e: ReactPointerEvent<HTMLButtonElement>) => {
+	// Release capture and take the drag record; null when no drag was in progress.
+	const takeDrag = (e: ReactPointerEvent<HTMLButtonElement>) => {
 		const drag = dragRef.current
 		dragRef.current = null
 		if (e.currentTarget.hasPointerCapture(e.pointerId)) {
 			e.currentTarget.releasePointerCapture(e.pointerId)
 		}
-		if (!drag) return
+		return drag
+	}
+	// A cancelled pointer (touch gesture takeover, browser interruption) aborts the drag outright:
+	// no re-anchor commit, no click-toggle — the pin snaps back and the hint clears.
+	const cancelDrag = (e: ReactPointerEvent<HTMLButtonElement>) => {
+		if (!takeDrag(e)) return
 		setDragPagePoint(null)
 		editor.setHintingShapes([])
 	}
 	const endDrag = (e: ReactPointerEvent<HTMLButtonElement>) => {
-		const drag = dragRef.current
-		dragRef.current = null
-		if (e.currentTarget.hasPointerCapture(e.pointerId)) {
-			e.currentTarget.releasePointerCapture(e.pointerId)
-		}
+		const drag = takeDrag(e)
 		if (!drag) return
 		editor.setHintingShapes([])
 		if (!drag.moved) {
-			openThreadId.set(editor, openThreadId.get(editor) === thread.id ? null : thread.id)
+			toggleOpen()
 			return
 		}
 		const cursorPage = editor.screenToPage({ x: e.clientX, y: e.clientY })
@@ -276,12 +276,7 @@ export const ThreadPin = memo(function ThreadPin({
 		setDragPagePoint(null)
 		let anchor: TLCommentThread['anchor']
 		if (thread.anchor.type === 'region') {
-			// Translate so the pin (the region's pin corner) lands at the drop; size unchanged.
-			anchor = {
-				...thread.anchor,
-				x: pagePoint.x - pinCorner.x * thread.anchor.w,
-				y: pagePoint.y - pinCorner.y * thread.anchor.h,
-			}
+			anchor = regionWithPinAt(thread.anchor, pinCorner, pagePoint)
 		} else {
 			const hit = commentTargetShapeAt(editor, pagePoint)
 			anchor = hit
@@ -316,11 +311,7 @@ export const ThreadPin = memo(function ThreadPin({
 	const regionAnchor = thread.anchor.type === 'region' ? thread.anchor : undefined
 	const movedRegion =
 		regionAnchor && dragPagePoint
-			? {
-					...regionAnchor,
-					x: dragPagePoint.x - pinCorner.x * regionAnchor.w,
-					y: dragPagePoint.y - pinCorner.y * regionAnchor.h,
-				}
+			? regionWithPinAt(regionAnchor, pinCorner, dragPagePoint)
 			: regionAnchor
 	const regionBoxBounds = resizeBounds ?? movedRegion
 	const commitResize = (bounds: BoxModel) => {
@@ -374,8 +365,7 @@ export const ThreadPin = memo(function ThreadPin({
 					// from a drag), so only take keyboard-synthesised clicks here — those report
 					// `detail === 0` — or the thread would toggle twice per mouse click.
 					onClick={(e) => {
-						if (e.detail !== 0) return
-						openThreadId.set(editor, openThreadId.get(editor) === thread.id ? null : thread.id)
+						if (e.detail === 0) toggleOpen()
 					}}
 					onPointerEnter={previewHandlers.onPointerEnter}
 					onPointerLeave={previewHandlers.onPointerLeave}

package/src/canvas/thread-stack.tsx

@@ -15,7 +15,7 @@ import { useCommentingOptions } from './options'
 import { pinStackKey } from './pin-stacking'
 import { openStackId, openThreadId } from './state'
 import { ThreadPreview, useMarkerPreview } from './thread-preview'
-import { anchorPagePoint, impreciseShapePinInset } from './thread-state'
+import { anchorPagePoint, anchorViewportPoint } from './thread-state'
 import {
 	POPOVER_OFFSET,
 	ThreadPopover,
@@ -73,11 +73,7 @@ export const ThreadStackPin = memo(function ThreadStackPin({
 			// The badge hangs off its anchor point bottom-left like a pin, and applies the same imprecise-shape
 			// inset the pins it stands in for would (see ThreadPin) — otherwise the marker would snap from tucked
 			// inside the shape to the raw corner the moment a second comment turns a pin into a stack.
-			const pagePoint = anchorPagePoint(editor, first.anchor)
-			if (!pagePoint) return null
-			const viewportPoint = editor.pageToViewport(pagePoint)
-			const inset = impreciseShapePinInset(editor, first.anchor)
-			return inset ? { x: viewportPoint.x + inset.x, y: viewportPoint.y + inset.y } : viewportPoint
+			return anchorViewportPoint(editor, first.anchor)
 		},
 		[editor, threads]
 	)
@@ -132,7 +128,7 @@ export const ThreadStackPin = memo(function ThreadStackPin({
 	// The expanded thread gains a header that pushes its first comment down from where the hover preview
 	// showed it. When that thread is the list's first, lift the whole list so its "You" holds position
 	// across hover -> open. Only the first entry — lifting can't also hold a lower thread's neighbours.
-	const liftForHeader = threads[0]?.id === openId ? 42 : 0
+	const liftForHeader = threads[0].id === openId ? 42 : 0
 
 	return (
 		<>

package/src/canvas/thread-state.test.ts

@@ -1,6 +1,7 @@
 import {
 	Box,
 	commentSchemaRecords,
+	createCommentThread,
 	createShapeId,
 	createTLSchema,
 	createTLStore,
@@ -8,6 +9,7 @@ import {
 	defaultShapeUtils,
 	defaultTools,
 	Editor,
+	PageRecordType,
 	TLShapeId,
 } from 'tldraw'
 import { afterEach, beforeEach, describe, expect, it } from 'vitest'
@@ -16,6 +18,7 @@ import {
 	anchorPagePoint,
 	commentCenterScreenOffset,
 	commentTargetShapeAt,
+	focusThread,
 	impreciseShapePinInset,
 	IMPRECISE_PIN_INSET_PX,
 	isBoxInInflatedViewport,
@@ -258,3 +261,35 @@ describe('isBoxInInflatedViewport', () => {
 		expect(isBoxInInflatedViewport(editor, box)).toBe(true)
 	})
 })
+
+describe('focusThread', () => {
+	it('records a cross-page jump as its own undo step', () => {
+		const page1Id = editor.getCurrentPageId()
+		const page2Id = PageRecordType.createId()
+		const boxId = createShapeId()
+
+		// Set up the second page outside of history so the only undoable steps are the ones the
+		// test creates: one edit on page 1, then the jump to the thread on page 2.
+		editor.run(() => editor.createPage({ id: page2Id, name: 'Page 2' }), { history: 'ignore' })
+		editor.clearHistory()
+
+		editor.markHistoryStoppingPoint('create box')
+		editor.createShape({ id: boxId, type: 'geo', x: 0, y: 0, props: { w: 100, h: 100 } })
+
+		const thread = createCommentThread({
+			pageId: page2Id,
+			anchor: { type: 'point', x: 50, y: 50 },
+			createdBy: 'me',
+		})
+		focusThread(editor, thread)
+		expect(editor.getCurrentPageId()).toBe(page2Id)
+
+		// The first undo only takes us back to page 1; the edit made there is still intact.
+		editor.undo()
+		expect(editor.getCurrentPageId()).toBe(page1Id)
+		expect(editor.getShape(boxId)).toBeDefined()
+
+		editor.undo()
+		expect(editor.getShape(boxId)).toBeUndefined()
+	})
+})

package/src/canvas/thread-state.ts

@@ -101,6 +101,16 @@ export function regionPinPoint(region: BoxModel, corner: VecLike = REGION_PIN_CO
 	}
 }
 
+/** The inverse of {@link regionPinPoint}: a region translated so its pin corner lands on `pinPage`;
+ *  size unchanged. */
+export function regionWithPinAt(
+	region: Extract<TLCommentAnchor, { type: 'region' }>,
+	pinCorner: VecLike,
+	pinPage: VecLike
+): Extract<TLCommentAnchor, { type: 'region' }> {
+	return { ...region, x: pinPage.x - pinCorner.x * region.w, y: pinPage.y - pinCorner.y * region.h }
+}
+
 /**
  * Where a thread's pin sits on the page, for each anchor kind. Null hides the pin. Imprecise shape
  * anchors use {@link CommentingOptions.impreciseShapeAnchor} rather than the stored `x`/`y`.
@@ -133,6 +143,22 @@ export function anchorPagePoint(
 	}
 }
 
+/**
+ * Where a thread's marker is drawn, in viewport space: {@link anchorPagePoint} projected through
+ * the camera, plus the imprecise-shape inset. Null when the anchor resolves to no point.
+ * @internal
+ */
+export function anchorViewportPoint(
+	editor: Editor,
+	anchor: TLCommentAnchor
+): { x: number; y: number } | null {
+	const pagePoint = anchorPagePoint(editor, anchor)
+	if (!pagePoint) return null
+	const viewportPoint = editor.pageToViewport(pagePoint)
+	const inset = impreciseShapePinInset(editor, anchor)
+	return inset ? { x: viewportPoint.x + inset.x, y: viewportPoint.y + inset.y } : viewportPoint
+}
+
 /**
  * The shape a comment placed at a page point should anchor to, or undefined for empty canvas.
  *
@@ -184,6 +210,7 @@ export function shapeAnchorAt(
 /** Open a thread and bring it into view — switch to its page if needed, then center its pin. @public */
 export function focusThread(editor: Editor, thread: TLCommentThread): void {
 	if (thread.pageId !== editor.getCurrentPageId()) {
+		editor.markHistoryStoppingPoint('change-page')
 		editor.setCurrentPage(thread.pageId as any)
 	}
 	openThreadId.set(editor, thread.id)

package/src/canvas/thread-view.tsx

@@ -53,6 +53,68 @@ import { openThreadId } from './state'
 
 const stop = (e: { stopPropagation(): void }) => e.stopPropagation()
 
+/** The "⋯" dropdown used for both a comment's and the thread's actions. */
+function MoreOptionsMenu({
+	id,
+	moreFor,
+	children,
+}: {
+	id: string
+	/** The comment whose ⋯ button this is, so `startEdit` can find it again to return focus. */
+	moreFor?: string
+	children: ReactNode
+}) {
+	const msg = useTranslation()
+	return (
+		<TldrawUiDropdownMenuRoot id={id}>
+			<TldrawUiDropdownMenuTrigger>
+				<TldrawUiButton
+					type="icon"
+					tooltip={msg('comments.more-options')}
+					title={msg('comments.more-options')}
+					className="tlui-cmt-thread__action"
+					data-cmt-more-for={moreFor}
+				>
+					<TldrawUiIcon icon="dots-vertical" label={msg('comments.more-options')} small />
+				</TldrawUiButton>
+			</TldrawUiDropdownMenuTrigger>
+			<TldrawUiDropdownMenuContent
+				className="tlui-cmt-menu"
+				side="bottom"
+				align="start"
+				alignOffset={0}
+				sideOffset={4}
+			>
+				<TldrawUiDropdownMenuGroup>{children}</TldrawUiDropdownMenuGroup>
+			</TldrawUiDropdownMenuContent>
+		</TldrawUiDropdownMenuRoot>
+	)
+}
+
+function MenuItem({
+	label,
+	danger,
+	noClose,
+	onClick,
+}: {
+	label: string
+	danger?: boolean
+	noClose?: boolean
+	onClick(): void
+}) {
+	return (
+		<TldrawUiDropdownMenuItem noClose={noClose}>
+			<button
+				type="button"
+				className={danger ? 'tlui-cmt-menu-item tlui-cmt-menu-item--danger' : 'tlui-cmt-menu-item'}
+				onClick={onClick}
+			>
+				<span>{label}</span>
+			</button>
+		</TldrawUiDropdownMenuItem>
+	)
+}
+
 /**
  * A name-only view of an author resolver, for the mention/rich-text paths. Stable identity, so
  * `CommentBody`'s memoized render doesn't recompute on every render of its host.
@@ -352,9 +414,7 @@ export const ThreadView = memo(function ThreadView({
 	// No `currentUserId` check: unlike a resolve, a delete stamps nothing on the record, so who may
 	// make it is `canModifyComment`'s call alone (which withholds it from an unidentified viewer by
 	// default).
-	const removeThread = () => {
-		deleteThread(editor, thread)
-	}
+	const removeThread = () => deleteThread(editor, thread)
 
 	const ThreadActions = options.components.ThreadActions
 	// The host's URL for this thread. Its presence is what puts "copy link" in the header menu.
@@ -428,55 +488,21 @@ export const ThreadView = memo(function ThreadView({
 					canComment && (
 						<>
 							{(permissions?.edit || permissions?.delete) && (
-								<TldrawUiDropdownMenuRoot id={`comment-actions-${comment.id}`}>
-									<TldrawUiDropdownMenuTrigger>
-										<TldrawUiButton
-											type="icon"
-											tooltip={msg('comments.more-options')}
-											title={msg('comments.more-options')}
-											className="tlui-cmt-thread__action"
-											data-cmt-more-for={comment.id}
-										>
-											<TldrawUiIcon
-												icon="dots-vertical"
-												label={msg('comments.more-options')}
-												small
-											/>
-										</TldrawUiButton>
-									</TldrawUiDropdownMenuTrigger>
-									<TldrawUiDropdownMenuContent
-										className="tlui-cmt-menu"
-										side="bottom"
-										align="start"
-										alignOffset={0}
-										sideOffset={4}
-									>
-										<TldrawUiDropdownMenuGroup>
-											{permissions?.edit && (
-												<TldrawUiDropdownMenuItem>
-													<button
-														type="button"
-														className="tlui-cmt-menu-item"
-														onClick={() => startEdit(comment, { fromMoreMenu: true })}
-													>
-														<span>{msg('comments.edit')}</span>
-													</button>
-												</TldrawUiDropdownMenuItem>
-											)}
-											{permissions?.delete && (
-												<TldrawUiDropdownMenuItem>
-													<button
-														type="button"
-														className="tlui-cmt-menu-item tlui-cmt-menu-item--danger"
-														onClick={() => deleteComment(editor, comment)}
-													>
-														<span>{msg('action.delete')}</span>
-													</button>
-												</TldrawUiDropdownMenuItem>
-											)}
-										</TldrawUiDropdownMenuGroup>
-									</TldrawUiDropdownMenuContent>
-								</TldrawUiDropdownMenuRoot>
+								<MoreOptionsMenu id={`comment-actions-${comment.id}`} moreFor={comment.id}>
+									{permissions?.edit && (
+										<MenuItem
+											label={msg('comments.edit')}
+											onClick={() => startEdit(comment, { fromMoreMenu: true })}
+										/>
+									)}
+									{permissions?.delete && (
+										<MenuItem
+											label={msg('action.delete')}
+											danger
+											onClick={() => deleteComment(editor, comment)}
+										/>
+									)}
+								</MoreOptionsMenu>
 							)}
 							{/* Last so react is always the rightmost pill. */}
 							<CommentReactionPicker comment={comment} currentUserId={currentUserId} />
@@ -495,49 +521,21 @@ export const ThreadView = memo(function ThreadView({
 			{/* Host verbs — assign, link a ticket — sit ahead of the built-in actions. */}
 			{ThreadActions && <ThreadActions thread={thread} comments={comments} />}
 			{(threadHref !== undefined || canDeleteThread) && (
-				<TldrawUiDropdownMenuRoot id={`comment-thread-actions-${thread.id}`}>
-					<TldrawUiDropdownMenuTrigger>
-						<TldrawUiButton
-							type="icon"
-							tooltip={msg('comments.more-options')}
-							title={msg('comments.more-options')}
-							className="tlui-cmt-thread__action"
-						>
-							<TldrawUiIcon icon="dots-vertical" label={msg('comments.more-options')} small />
-						</TldrawUiButton>
-					</TldrawUiDropdownMenuTrigger>
-					<TldrawUiDropdownMenuContent
-						className="tlui-cmt-menu"
-						side="bottom"
-						align="start"
-						alignOffset={0}
-						sideOffset={4}
-					>
-						<TldrawUiDropdownMenuGroup>
-							{/* A link is a read affordance: offered to anyone who can see the thread,
-							    including a viewer who can't comment. `noClose` keeps the menu up so the
-							    item can confirm the copy in place. */}
-							{threadHref !== undefined && (
-								<TldrawUiDropdownMenuItem noClose>
-									<button type="button" className="tlui-cmt-menu-item" onClick={copyThreadLink}>
-										<span>{msg(linkCopied ? 'comments.link-copied' : 'comments.copy-link')}</span>
-									</button>
-								</TldrawUiDropdownMenuItem>
-							)}
-							{canDeleteThread && (
-								<TldrawUiDropdownMenuItem>
-									<button
-										type="button"
-										className="tlui-cmt-menu-item tlui-cmt-menu-item--danger"
-										onClick={removeThread}
-									>
-										<span>{msg('comments.delete')}</span>
-									</button>
-								</TldrawUiDropdownMenuItem>
-							)}
-						</TldrawUiDropdownMenuGroup>
-					</TldrawUiDropdownMenuContent>
-				</TldrawUiDropdownMenuRoot>
+				<MoreOptionsMenu id={`comment-thread-actions-${thread.id}`}>
+					{/* A link is a read affordance: offered to anyone who can see the thread,
+					    including a viewer who can't comment. `noClose` keeps the menu up so the
+					    item can confirm the copy in place. */}
+					{threadHref !== undefined && (
+						<MenuItem
+							label={msg(linkCopied ? 'comments.link-copied' : 'comments.copy-link')}
+							noClose
+							onClick={copyThreadLink}
+						/>
+					)}
+					{canDeleteThread && (
+						<MenuItem label={msg('comments.delete')} danger onClick={removeThread} />
+					)}
+				</MoreOptionsMenu>
 			)}
 			{canComment && currentUserId && (
 				<TldrawUiButton

package/src/clustering/computeClusterTable.ts

@@ -9,16 +9,6 @@ import type {
 	LeafScreenOffsets,
 } from './types'
 
-interface ResolvedClusterOptions {
-	Tc: number
-	Tu: number
-	eps: number
-	Dmax: number
-	minZoom: number
-	maxZoom: number
-	maxSplitZoom: number
-}
-
 /** @internal */
 export function computeClusterTable(
 	leaves: readonly LeafInput[],
@@ -35,20 +25,13 @@ export function computeClusterTable(
 		return { events: [], leaves: leafNodes }
 	}
 
-	const raw = cappedReplay(leaves, edges, { Tc: opts.Tc, Dmax: opts.Dmax }, screenOffsets)
-	const contracted = contract(raw, opts.eps)
-	const events = finalize(contracted, {
-		Tc: opts.Tc,
-		Tu: opts.Tu,
-		minZoom: opts.minZoom,
-		maxZoom: opts.maxZoom,
-		maxSplitZoom: opts.maxSplitZoom,
-	})
+	const raw = cappedReplay(leaves, edges, opts, screenOffsets)
+	const events = finalize(contract(raw, opts.eps), opts)
 
 	return { events, leaves: leafNodes }
 }
 
-function resolveOptions(options: ClusterOptions): ResolvedClusterOptions {
+function resolveOptions(options: ClusterOptions): Required<ClusterOptions> {
 	const Tc = options.Tc ?? 22
 	const Tu = options.Tu ?? 1.2 * Tc
 	const eps = options.eps ?? 0.7

package/src/clustering/replay.ts

@@ -166,8 +166,6 @@ class ClusterState {
 	private readonly centroidY: Float64Array
 	private readonly counts: Int32Array
 	private readonly nodes: ClusterNode[]
-	private readonly memberLists: string[][]
-	private readonly minMemberIds: string[]
 	// Per-cluster sums of member render offsets (screen px), maintained like the centroid sums.
 	// Null when no offsets were passed — offsetDelta() then answers null unconditionally, which
 	// routes every pricing call down the offset-unaware path.
@@ -185,8 +183,6 @@ class ClusterState {
 		this.centroidY = new Float64Array(n)
 		this.counts = new Int32Array(n)
 		this.nodes = new Array(n)
-		this.memberLists = new Array(n)
-		this.minMemberIds = new Array(n)
 
 		if (screenOffsets !== undefined && screenOffsets.size > 0) {
 			this.offsetX = new Float64Array(n)
@@ -213,8 +209,6 @@ class ClusterState {
 			this.centroidX[i] = leaf.point.x
 			this.centroidY[i] = leaf.point.y
 			this.counts[i] = 1
-			this.memberLists[i] = [leaf.id]
-			this.minMemberIds[i] = leaf.id
 			this.nodes[i] = {
 				id: leaf.id,
 				centroid: { x: leaf.point.x, y: leaf.point.y },
@@ -237,6 +231,7 @@ class ClusterState {
 		return root
 	}
 
+	/** Allocation-free: this is the hot path when no offsets are passed. */
 	centroidDistance(aRoot: number, bRoot: number): number {
 		return Math.hypot(
 			this.centroidX[aRoot] - this.centroidX[bRoot],
@@ -271,12 +266,12 @@ class ClusterState {
 	}
 
 	merge(aRoot: number, bRoot: number, z: number): RawMergeEvent {
-		const leftRoot = this.minMemberIds[aRoot] < this.minMemberIds[bRoot] ? aRoot : bRoot
+		const leftRoot = this.nodes[aRoot].members[0] < this.nodes[bRoot].members[0] ? aRoot : bRoot
 		const rightRoot = leftRoot === aRoot ? bRoot : aRoot
 		const left = this.nodes[leftRoot]
 		const right = this.nodes[rightRoot]
 		const count = this.counts[leftRoot] + this.counts[rightRoot]
-		const members = mergeSortedMembers(this.memberLists[leftRoot], this.memberLists[rightRoot])
+		const members = mergeSortedMembers(left.members, right.members)
 
 		const minX = Math.min(this.minX[leftRoot], this.minX[rightRoot])
 		const minY = Math.min(this.minY[leftRoot], this.minY[rightRoot])
@@ -308,8 +303,6 @@ class ClusterState {
 		this.centroidY[leftRoot] = centroidY
 		this.counts[leftRoot] = count
 		this.nodes[leftRoot] = result
-		this.memberLists[leftRoot] = members
-		this.minMemberIds[leftRoot] = members[0]
 		if (this.offsetX !== null && this.offsetY !== null) {
 			this.offsetX[leftRoot] += this.offsetX[rightRoot]
 			this.offsetY[leftRoot] += this.offsetY[rightRoot]
@@ -343,10 +336,11 @@ interface HeapEntry {
 
 class EdgeMaxHeap {
 	private readonly items: HeapEntry[] = []
-	// Per-edge normalized (lo, hi) id pair for the z tie-break, precomputed once so comparisons
-	// allocate nothing. With coincident anchors every edge prices to the same z (+Infinity), so
-	// the tie-break runs on nearly every comparison of a rebuild — allocating the pair there
-	// churned millions of short-lived tuples.
+	// Per-edge (lo, hi) id pair for the z tie-break, precomputed once so comparisons allocate
+	// nothing. Relies on MstEdge's invariant that leaves[a].id < leaves[b].id; the heap does not
+	// re-normalize. With coincident anchors every edge prices to the same z (+Infinity), so the
+	// tie-break runs on nearly every comparison of a rebuild: allocating the pair there churned
+	// millions of short-lived tuples.
 	private readonly loIds: string[]
 	private readonly hiIds: string[]
 
@@ -355,15 +349,8 @@ class EdgeMaxHeap {
 		this.loIds = new Array(n)
 		this.hiIds = new Array(n)
 		for (let i = 0; i < n; i++) {
-			const aId = leaves[edges[i].a].id
-			const bId = leaves[edges[i].b].id
-			if (aId < bId) {
-				this.loIds[i] = aId
-				this.hiIds[i] = bId
-			} else {
-				this.loIds[i] = bId
-				this.hiIds[i] = aId
-			}
+			this.loIds[i] = leaves[edges[i].a].id
+			this.hiIds[i] = leaves[edges[i].b].id
 		}
 	}
 

package/src/clustering/runtime.ts

@@ -70,7 +70,7 @@ class ClusterRuntimeImpl implements ClusterRuntime {
 	private resolvedCache: { version: number; map: Map<string, ClusterNode> } | null = null
 
 	constructor(private readonly table: ClusterTable) {
-		this.resetVisible()
+		this.reset()
 	}
 
 	getSuppressedCount(): number {
@@ -84,10 +84,7 @@ class ClusterRuntimeImpl implements ClusterRuntime {
 	seed(zoom: number): void {
 		validateZoom(zoom)
 		this.k = seedCount(this.table.events, zoom)
-		this.suppressed.clear()
-		this.detached.clear()
-		this.patched.clear()
-		this.resetVisible()
+		this.reset()
 		for (let i = 0; i < this.k; i++) {
 			applyEvent(this.visible, this.table.events[i])
 		}
@@ -114,10 +111,7 @@ class ClusterRuntimeImpl implements ClusterRuntime {
 		}
 
 		this.k = k
-		this.suppressed.clear()
-		this.detached.clear()
-		this.patched.clear()
-		this.resetVisible()
+		this.reset()
 		for (let i = 0; i < k; i++) {
 			const event = events[i]
 			if (zoom > event.zMerge && !wasMergedTogether(event.result.members, ownerByMember)) {
@@ -222,8 +216,8 @@ class ClusterRuntimeImpl implements ClusterRuntime {
 			this.patched.set(id, null)
 		}
 		const patch = (node: ClusterNode) => {
-			if (node.members.length === 1 || !node.members.some((m) => this.detached.has(m))) return
 			const members = node.members.filter((m) => !this.detached.has(m))
+			if (members.length === node.members.length) return
 			if (members.length === 0) {
 				this.patched.set(node.id, null)
 			} else if (members.length === 1) {
@@ -250,11 +244,11 @@ class ClusterRuntimeImpl implements ClusterRuntime {
 		}
 	}
 
-	private resetVisible() {
-		this.visible = new Map()
-		for (const leaf of this.table.leaves) {
-			this.visible.set(leaf.id, leaf)
-		}
+	private reset() {
+		this.suppressed.clear()
+		this.detached.clear()
+		this.patched.clear()
+		this.visible = new Map(this.table.leaves.map((leaf) => [leaf.id, leaf]))
 	}
 }