@tldraw/commenting 0.0.0-bootstrap → 5.3.0-internal.5f14a24c179e

package/src/canvas/comments-overlay.tsx

@@ -21,6 +21,11 @@ import {
 	TLCommentId,
 	TLCommentThread,
 	TLRichText,
+	TldrawUiDropdownMenuContent,
+	TldrawUiDropdownMenuGroup,
+	TldrawUiDropdownMenuItem,
+	TldrawUiDropdownMenuRoot,
+	TldrawUiDropdownMenuTrigger,
 	TldrawUiIcon,
 	useContainer,
 	useEditor,
@@ -33,6 +38,7 @@ import {
 import { computeClusterTable } from '../clustering/computeClusterTable'
 import { type ClusterRuntime, createClusterRuntime } from '../clustering/runtime'
 import type { ClusterNode, ClusterTable, MergeEvent } from '../clustering/types'
+import { CommentAuthor } from '../ui/comment-author'
 import { CommentCard, CommentCardProps } from '../ui/comment-card'
 import { CommentComposer } from '../ui/comment-composer'
 import { EMPTY_COMMENT, isCommentEmpty } from '../ui/comment-extensions'
@@ -43,7 +49,14 @@ import { MentionMember } from '../ui/mention-list'
 import { isMentionPickerOpen } from '../ui/mention-suggestion'
 import { collectClusterLeaves } from './cluster-input'
 import { CommentBody } from './comment-body'
-import { UNKNOWN_AUTHOR } from './comment-render'
+import {
+	clearCommentDraft,
+	getCommentDraft,
+	NEW_COMMENT_DRAFT,
+	replyDraftSlot,
+	saveCommentDraft,
+} from './comment-drafts'
+import { UNKNOWN_AUTHOR, UNKNOWN_COMMENT_AUTHOR } from './comment-render'
 import { getCommentRecord, putCommentRecords, removeCommentRecords } from './comment-store'
 import { PendingComment } from './comment-tool'
 import { useCommentThreads, useThreadComments } from './hooks'
@@ -68,7 +81,12 @@ import {
 	toggleCommentsHidden,
 	usePendingComment,
 } from './state'
-import { anchorPagePoint, regionPinPoint, shapeAnchorAt } from './thread-state'
+import {
+	anchorPagePoint,
+	regionAnchorPinCorner,
+	regionPinPoint,
+	shapeAnchorAt,
+} from './thread-state'
 
 /**
  * A ready-to-use comments layer for a tldraw canvas: pins each thread at its anchor, opens a
@@ -84,8 +102,8 @@ import { anchorPagePoint, regionPinPoint, shapeAnchorAt } from './thread-state'
 export interface CanvasCommentsProps {
 	/** The signed-in user's id, or null for a read-only viewer. Only a signed-in user composes. */
 	currentUserId: string | null
-	/** Map an author id to a display name, or `undefined` when the id can't be named. */
-	resolveName(id: string): string | undefined
+	/** Map an author id to their display info, or `undefined` when the id can't be resolved. */
+	resolveAuthor(id: string): CommentAuthor | undefined
 	/** Called after any comment (a new thread's first comment, or a reply) is posted. */
 	onPostComment?(comment: TLComment): void
 	/** Whether a comment is unread for the current user (return true for unread). */
@@ -108,6 +126,39 @@ export interface CanvasCommentsProps {
 
 const stop = (e: { stopPropagation(): void }) => e.stopPropagation()
 
+/** How far an imprecise shape pin steps inside the shape from its anchor spot, in screen px —
+ *  most of the marker sits within the shape, with a small overhang past the corner. */
+const IMPRECISE_PIN_INSET_PX = 20
+
+/** Imprecise shape pins tuck inside the shape rather than hanging off its edge: the marker
+ *  extends up-right of its anchor point, so step it toward the shape's centre. Screen px — the
+ *  pin is screen-fixed while the shape scales with zoom. Null for anchors that need no inset. */
+function impreciseShapePinInset(
+	anchor: TLCommentThread['anchor'],
+	spot: { x: number; y: number }
+): { x: number; y: number } | null {
+	if (anchor.type !== 'shape' || anchor.isPrecise) return null
+	return {
+		x: Math.sign(0.5 - spot.x) * IMPRECISE_PIN_INSET_PX,
+		y: Math.sign(0.5 - spot.y) * IMPRECISE_PIN_INSET_PX,
+	}
+}
+
+/** A pointer-down that belongs to the camera, not the comment UI: any non-primary button
+ *  (middle/right-button pans), or a primary press with the spacebar pan key held. */
+const isCanvasPanGesture = (editor: Editor, e: ReactPointerEvent) =>
+	e.button !== 0 || editor.inputs.keys.has('Space')
+
+/** Hand a pointer event to the canvas beneath the comments layer, marked the same way the
+ *  pass-through wheel/hover hooks mark their re-dispatched events. */
+function forwardPointerEventToCanvas(container: HTMLElement, e: ReactPointerEvent) {
+	const cvs = container.querySelector('.tl-canvas')
+	if (!cvs) return
+	const newEvent = new PointerEvent(e.type, e.nativeEvent as any)
+	;(newEvent as any).isSpecialRedispatchedEvent = true
+	cvs.dispatchEvent(newEvent)
+}
+
 const initialOf = (name: string): string => (getFirstCharacter(name.trim()) || '?').toUpperCase()
 const CLUSTER_FADE_MS = 150
 /** Duration of the click-a-badge zoom-to-split animation. */
@@ -115,8 +166,8 @@ const CLUSTER_EXPAND_ZOOM_MS = 450
 
 /** The leading element for the placement composer — the comment pin's shape, but a pencil
  *  instead of an initial, marking an unsent draft. */
-const draftAvatar = (
-	<CommentPin>
+const draftAvatar = (color?: string) => (
+	<CommentPin color={color}>
 		<svg
 			viewBox="0 0 24 24"
 			width="15"
@@ -137,7 +188,8 @@ const draftAvatar = (
 function toCardProps(
 	comment: TLComment,
 	props: CanvasCommentsProps,
-	components: CommentingComponents
+	components: CommentingComponents,
+	resolveName: (id: string) => string | undefined
 ): CommentCardProps {
 	const Body = components.CommentBody
 	// The `CommentBody` component slot overrides the built-in rich-text default (which resolves
@@ -145,10 +197,10 @@ function toCardProps(
 	const body = Body ? (
 		<Body comment={comment} />
 	) : (
-		<CommentBody richText={comment.body} resolveName={props.resolveName} />
+		<CommentBody richText={comment.body} resolveName={resolveName} />
 	)
 	return {
-		author: props.resolveName(comment.authorId) ?? UNKNOWN_AUTHOR,
+		author: props.resolveAuthor(comment.authorId) ?? UNKNOWN_COMMENT_AUTHOR,
 		body,
 		date: new Date(comment.createdAt).toISOString(),
 		you: comment.authorId === props.currentUserId,
@@ -177,30 +229,32 @@ function CanvasCommentsLayer(props: CanvasCommentsProps) {
 	)
 	useEffect(() => setRegionCommentOptions(editor, regionOptions), [editor, regionOptions])
 	const layerRef = useRef<HTMLDivElement>(null)
-	// Over the pins and cluster badges, wheel and hover pass through to the canvas beneath (these
-	// events bubble up from the pointer-interactive markers to this layer root).
-	usePassThroughWheelEvents(layerRef)
+	// Over the pins and cluster badges, hover passes through to the canvas beneath (these events
+	// bubble up from the pointer-interactive markers to this layer root). Wheel pass-through is
+	// NOT on this root: it lives on each interactive element instead. The root spans the whole
+	// canvas, so any pin past its bottom/right edge inflates the root's scrollHeight — which the
+	// wheel hook's is-this-scrollable guard reads as scrollable, silently disabling pass-through.
 	usePassThroughMouseOverEvents(layerRef)
 	const deepLinkHandled = useRef(false)
 	const threads = useCommentThreads(editor)
 	const pending = usePendingComment()
 	const openId = useValue('open thread id', () => openThreadId.get(editor), [editor])
 	const impreciseShapeAnchor = props.impreciseShapeAnchor ?? options.impreciseShapeAnchor
-	// Threads whose anchor has moved (by any means — drag, nudge, align, undo, a collaborator)
-	// since the rendered clustering was built. They pop out of clustering and render as live pins,
-	// and only rejoin at the next zoom event, when everything re-clusters anyway.
-	const [movedThreadIds, setMovedThreadIds] = useState<ReadonlySet<string>>(EMPTY_SET)
+	// Threads held out of clustering because their anchor moved while folded inside a badge
+	// (drag, nudge, align, undo, a collaborator — detected by position, not gesture). They render
+	// as live pins riding their anchor and rejoin clustering on the next zoom-out.
+	const [heldThreadIds, setHeldThreadIds] = useState<ReadonlySet<string>>(EMPTY_SET)
 	const adoptOnRebuild = useRef(false)
 	const clusterLeaves = useValue(
 		'comment cluster leaves',
 		() =>
 			collectClusterLeaves(
 				editor,
-				threads.filter((thread) => !movedThreadIds.has(thread.id)),
+				threads.filter((thread) => !heldThreadIds.has(thread.id)),
 				openThreadId.get(editor),
 				impreciseShapeAnchor
 			),
-		[editor, threads, impreciseShapeAnchor, movedThreadIds]
+		[editor, threads, impreciseShapeAnchor, heldThreadIds]
 	)
 	const clusterZoomBounds = useValue(
 		'comment cluster zoom bounds',
@@ -213,44 +267,69 @@ function CanvasCommentsLayer(props: CanvasCommentsProps) {
 		runtime.seed(editor.getZoomLevel())
 		return { runtime, table }
 	}, [clusterLeaves, clusterZoomBounds, editor])
-	// Re-clustering only applies while zooming: a rebuilt model (thread added, moved, or closed)
-	// is held as `latestModel` and adopted on the next zoom change, so pins never re-flow into
-	// clusters under a static camera. Until adoption, threads the rendered model doesn't know
-	// about show as plain unclustered pins (`orphanThreads`). Exception: a rebuild that *removed*
-	// leaves (thread deleted or opened, page changed) is adopted immediately, so stale pins and
-	// badge counts never linger.
+	// The core invariant: the only thing that re-flows clustering doc-wide is zoom. Every rebuild
+	// (add / move / delete / open / pop-out) is computed immediately as `latestModel` — the MST
+	// stays correct — but the on-screen partition is `renderedModel`, and it only ever changes via
+	// (a) the cursor walking on zoom, (b) adoption of the pending rebuild on zoom-out, or
+	// (c) LOCAL detach patches: a leaf that left the input (deleted, opened, popped out) is
+	// detached from its own badge in place — count and centroid update for that badge alone,
+	// and nothing else on the canvas moves.
 	const [renderedModel, setRenderedModel] = useState(latestModel)
 	let clusterModel = renderedModel
-	if (
-		renderedModel !== latestModel &&
-		(adoptOnRebuild.current || hasRemovedLeaves(renderedModel.table, latestModel.table))
-	) {
+	// A page switch replaces the whole scene: hard-reset rather than detach the world.
+	const pageId = useValue('comment cluster page', () => editor.getCurrentPageId(), [editor])
+	const pageRef = useRef(pageId)
+	if (pageRef.current !== pageId) {
+		pageRef.current = pageId
 		adoptOnRebuild.current = false
-		// Carryover seed: events inside their hysteresis band inherit the outgoing partition's
-		// merged/unmerged state instead of the geometric-mean tiebreak, so untouched pins never
-		// snap together (or apart) just because the model was swapped. Idempotent, so safe to
-		// run during render.
+		latestModel.runtime.seed(editor.getZoomLevel())
+		if (heldThreadIds.size > 0) setHeldThreadIds(EMPTY_SET)
+		setRenderedModel(latestModel)
+		clusterModel = latestModel
+	}
+	// adoptOnRebuild is set by the rejoin reaction below, outside React's render cycle, paired
+	// with clearing heldThreadIds. Only trust it once that pairing is actually visible here
+	// (heldThreadIds confirmed empty) — an unrelated re-render can land in the gap between the
+	// ref being set and the state update it was paired with being applied.
+	const rejoinPending = heldThreadIds.size === 0 && adoptOnRebuild.current
+	if (renderedModel !== latestModel && rejoinPending) {
+		adoptOnRebuild.current = false
+		// Carryover seed: band events inherit the outgoing partition's merged/unmerged state, so
+		// nothing changes state because of the swap alone. Idempotent, so safe during render.
 		latestModel.runtime.seedFrom(editor.getZoomLevel(), renderedModel.runtime.getVisible())
 		setRenderedModel(latestModel)
 		clusterModel = latestModel
+	} else if (heldThreadIds.size === 0 && renderedModel === latestModel) {
+		// Nothing pending and nothing to adopt: clear any leftover force-adopt intent so it can't
+		// survive to force-adopt a later, unrelated rebuild.
+		adoptOnRebuild.current = false
 	}
 	// Pop-out detection: a leaf folded inside a badge can't follow its anchor (the badge position
-	// is baked into the model), so when its live position drifts from the baked one it ghosts.
-	// Marking it moved excludes it from the cluster input, which reads as a removal above and
-	// re-clusters the rest of its pile immediately; the pin itself renders live below.
+	// is baked into the model), so when its live position drifts from the baked one, hold it out.
+	// It renders as a live pin riding the anchor; the detach loop below shrinks its badge locally.
 	const newlyMovedIds = findMovedClusteredLeafIds(clusterModel, latestModel)
 	if (newlyMovedIds.length > 0) {
-		// eslint-disable-next-line no-console
-		console.debug(`[comments] pins popped out of clustering: ${newlyMovedIds.join(', ')}`)
-		const next = new Set(movedThreadIds)
+		const next = new Set(heldThreadIds)
 		for (const id of newlyMovedIds) next.add(id)
-		setMovedThreadIds(next)
+		setHeldThreadIds(next)
+	}
+	// Local partition maintenance — the only non-zoom visual change, and it is local by
+	// construction: any displayed leaf that has left the cluster input (deleted, thread opened,
+	// popped out above) is detached from its badge in place. The corrected rebuild is already
+	// sitting in latestModel awaiting the next zoom-out.
+	{
+		const latestLeafIds = new Set(latestModel.table.leaves.map((leaf) => leaf.id))
+		for (const leaf of clusterModel.table.leaves) {
+			if (!latestLeafIds.has(leaf.id)) {
+				clusterModel.runtime.detachLeaf(leaf.id)
+			}
+		}
 	}
 	// Moved pins rejoin clustering on the next zoom-out motion: clear the set (so the rebuild
 	// includes them again) and adopt that rebuild immediately instead of deferring it. Zooming in
 	// never folds pins into clusters — merging is a zoom-out-only move, matching the runtime.
 	useEffect(() => {
-		if (movedThreadIds.size === 0) return
+		if (heldThreadIds.size === 0) return
 		let lastZoom = editor.getZoomLevel()
 		return react('rejoin moved comment pins on zoom out', () => {
 			const zoom = editor.getZoomLevel()
@@ -258,9 +337,9 @@ function CanvasCommentsLayer(props: CanvasCommentsProps) {
 			lastZoom = zoom
 			if (zoom >= prevZoom) return
 			adoptOnRebuild.current = true
-			setMovedThreadIds(EMPTY_SET)
+			setHeldThreadIds(EMPTY_SET)
 		})
-	}, [movedThreadIds, editor])
+	}, [heldThreadIds, editor])
 	// Adopt a pending rebuild only on zoom-out motion: folding deferred additions into clusters is
 	// a merge, and merging only happens while zooming out. While zooming in, the stale table still
 	// splits correctly on its own (split thresholds are direction-safe by the hysteresis invariant).
@@ -276,36 +355,44 @@ function CanvasCommentsLayer(props: CanvasCommentsProps) {
 			setRenderedModel(latestModel)
 		})
 	}, [clusterModel, latestModel, editor])
+	// Threads in the current input that the displayed partition doesn't show anywhere (new
+	// comments, reopened threads, undone deletions): render as plain pins until the next
+	// zoom-out folds them in. Membership is judged against the *displayed* partition (with
+	// detaches applied), not the rendered table, so a detached-then-restored leaf reappears.
+	const partitionVersion = clusterModel.runtime.version
 	const orphanThreads = useMemo(() => {
 		if (clusterModel === latestModel) return []
-		const renderedIds = new Set(clusterModel.table.leaves.map((leaf) => leaf.id))
+		const displayed = new Set<string>()
+		for (const node of clusterModel.runtime.getVisible().values()) {
+			for (const member of node.members) displayed.add(member)
+		}
 		const latestIds = new Set(latestModel.table.leaves.map((leaf) => leaf.id))
-		return threads.filter((thread) => latestIds.has(thread.id) && !renderedIds.has(thread.id))
-	}, [clusterModel, latestModel, threads])
-	const movedThreads = useMemo(
-		() => threads.filter((thread) => movedThreadIds.has(thread.id) && thread.id !== openId),
-		[threads, movedThreadIds, openId]
+		return threads.filter((thread) => latestIds.has(thread.id) && !displayed.has(thread.id))
+		// The runtime mutates its partition in place; partitionVersion is its change stamp.
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [clusterModel, latestModel, threads, partitionVersion])
+	const heldThreads = useMemo(
+		() => threads.filter((thread) => heldThreadIds.has(thread.id) && thread.id !== openId),
+		[threads, heldThreadIds, openId]
 	)
-	// Subscribe to the runtime cursor, not the raw zoom: onCamera runs on every zoom tick (two
-	// O(1) threshold checks against the event table) but returns the same integer until a merge
-	// or split event actually fires — so this component only re-renders on cluster changes, not
-	// on every camera frame.
-	const clusterCursor = useValue(
-		'comment cluster cursor',
+	// Subscribe to the runtime's partition version, not the raw zoom: onCamera runs on every zoom
+	// tick (O(1) threshold checks) but the version only moves when the partition actually changes
+	// — so this component only re-renders on cluster changes, not on every camera frame. The memo
+	// below keys on a fresh inline read of the version rather than the subscribed value, because
+	// render-time detaches (above) bump it after the subscription's computed already evaluated.
+	useValue(
+		'comment cluster version',
 		() => {
 			clusterModel.runtime.onCamera(editor.getZoomLevel())
-			return clusterModel.runtime.k
+			return clusterModel.runtime.version
 		},
 		[clusterModel, editor]
 	)
 	const visibleNodes = useMemo(() => {
-		const nodes = Array.from(clusterModel.runtime.getVisible().values())
-		// eslint-disable-next-line no-console
-		console.debug(
-			`[comments] cluster cursor k=${clusterCursor} → re-rendering ${nodes.length} visible nodes`
-		)
-		return nodes
-	}, [clusterModel, clusterCursor])
+		return Array.from(clusterModel.runtime.getVisible().values())
+		// The runtime mutates its partition in place; partitionVersion is its change stamp.
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [clusterModel, partitionVersion])
 	const fadeNodes = useFadeVisibleNodes(visibleNodes, clusterModel)
 	const threadsById = useMemo(
 		() => new Map<string, TLCommentThread>(threads.map((thread) => [thread.id, thread])),
@@ -384,7 +471,7 @@ function CanvasCommentsLayer(props: CanvasCommentsProps) {
 			// The mention picker owns Escape while it's open — let it dismiss the roster alone.
 			if (isMentionPickerOpen()) return
 			const target = e.target as HTMLElement | null
-			if (target && target.closest('.cmt-editing')) return
+			if (target && target.closest('.tlui-cmt-editing')) return
 			openThreadId.set(editor, null)
 			e.preventDefault()
 			e.stopPropagation()
@@ -393,8 +480,8 @@ function CanvasCommentsLayer(props: CanvasCommentsProps) {
 		return () => document.removeEventListener('keydown', onKeyDown, true)
 	}, [editor])
 
-	// Shift+C toggles comment-pin visibility on the canvas (matching Figma). Skipped while typing so
-	// it never fires from inside a composer. Physical `KeyC` (layout-independent) with shift only.
+	// Shift+C toggles comment-pin visibility on the canvas. Skipped while typing so it never fires
+	// from inside a composer. Physical `KeyC` (layout-independent) with shift only.
 	useEffect(() => {
 		const onKeyDown = (e: KeyboardEvent) => {
 			if (e.code !== 'KeyC' || !e.shiftKey || e.metaKey || e.ctrlKey || e.altKey) return
@@ -414,7 +501,7 @@ function CanvasCommentsLayer(props: CanvasCommentsProps) {
 	// Render into the container (above the panels' stacking context) so the pins and popovers
 	// live in the UI layer rather than being clipped by the canvas layer.
 	return createPortal(
-		<div ref={layerRef} className="cmt-canvas-layer">
+		<div ref={layerRef} className="tlui-cmt-canvas-layer">
 			{options.enableClustering ? (
 				<>
 					{fadeNodes.map(({ node, phase }) => {
@@ -448,7 +535,7 @@ function CanvasCommentsLayer(props: CanvasCommentsProps) {
 							regionOptions={regionOptions}
 						/>
 					))}
-					{movedThreads.map((thread) => (
+					{heldThreads.map((thread) => (
 						<ThreadPin
 							key={thread.id}
 							editor={editor}
@@ -597,7 +684,7 @@ function cancelClusterFadeFrame(frame: number) {
 }
 
 function clusterFadeClassName(phase: ClusterFadePhase): string {
-	return `cmt-cluster-fade cmt-cluster-fade--${phase}`
+	return `tlui-cmt-cluster-fade tlui-cmt-cluster-fade--${phase}`
 }
 
 /**
@@ -627,12 +714,6 @@ function findMovedClusteredLeafIds(
 	return moved
 }
 
-function hasRemovedLeaves(rendered: ClusterTable, latest: ClusterTable): boolean {
-	if (rendered.leaves.length === 0) return false
-	const latestIds = new Set(latest.leaves.map((leaf) => leaf.id))
-	return rendered.leaves.some((leaf) => !latestIds.has(leaf.id))
-}
-
 function getClusterZoomBounds(editor: Editor): { minZoom: number; maxZoom: number } {
 	const cameraOptions = editor.getCameraOptions()
 	const baseZoom = cameraOptions.constraints ? editor.getBaseZoom() : 1
@@ -719,6 +800,11 @@ const ClusterBadge = memo(function ClusterBadge({
 	node: ClusterNode
 	onExpand(node: ClusterNode): void
 }) {
+	const container = useContainer()
+	const badgeRef = useRef<HTMLDivElement>(null)
+	// Wheel pass-through sits on the badge (never scrollable), not the layer root — see the
+	// note on the layer.
+	usePassThroughWheelEvents(badgeRef)
 	const point = useValue(
 		'cluster badge point',
 		() => {
@@ -733,9 +819,16 @@ const ClusterBadge = memo(function ClusterBadge({
 
 	return (
 		<div
-			className="cmt-canvas-cluster"
+			ref={badgeRef}
+			className="tlui-cmt-canvas-cluster"
 			style={{ left: point.x, top: point.y }}
-			onPointerDown={stop}
+			onPointerDown={(e) => {
+				if (isCanvasPanGesture(editor, e)) {
+					forwardPointerEventToCanvas(container, e)
+					return
+				}
+				e.stopPropagation()
+			}}
 			onClick={(e) => {
 				e.stopPropagation()
 				onExpand(node)
@@ -772,7 +865,15 @@ function ThreadPopover({
 	usePassThroughWheelEvents(ref)
 	usePassThroughMouseOverEvents(ref)
 	return createPortal(
-		<div ref={ref} className="cmt-canvas-popover" style={style} onPointerDown={stop}>
+		// contextmenu also stops here: portals bubble React events to the canvas's context-menu
+		// trigger (the layer mounts inside it), which would open the canvas menu over this panel.
+		<div
+			ref={ref}
+			className="tlui-cmt-canvas-popover"
+			style={style}
+			onPointerDown={stop}
+			onContextMenu={stop}
+		>
 			{children}
 		</div>,
 		container
@@ -808,12 +909,21 @@ function RegionBox({
 	// The grab point and the box at grab time, captured so the drag translates by a stable delta even
 	// as the box prop reflows under the live preview.
 	const grabRef = useRef<{ page: VecLike; box: BoxModel } | null>(null)
+	const container = useContainer()
+	const boxRef = useRef<HTMLDivElement>(null)
+	// A movable region body takes pointer events over its whole area — wheel pass-through sits
+	// here for the same reason as on the pin markers (see the note on the layer).
+	usePassThroughWheelEvents(boxRef)
 	const translated = (e: ReactPointerEvent<HTMLDivElement>): BoxModel => {
 		const g = grabRef.current!
 		const p = editor.screenToPage({ x: e.clientX, y: e.clientY })
 		return { ...g.box, x: g.box.x + (p.x - g.page.x), y: g.box.y + (p.y - g.page.y) }
 	}
 	const startMove = (e: ReactPointerEvent<HTMLDivElement>) => {
+		if (isCanvasPanGesture(editor, e)) {
+			forwardPointerEventToCanvas(container, e)
+			return
+		}
 		e.stopPropagation()
 		grabRef.current = { page: editor.screenToPage({ x: e.clientX, y: e.clientY }), box }
 		e.currentTarget.setPointerCapture(e.pointerId)
@@ -831,7 +941,12 @@ function RegionBox({
 	}
 	return (
 		<div
-			className={movable ? 'cmt-canvas-region cmt-canvas-region--movable' : 'cmt-canvas-region'}
+			ref={boxRef}
+			className={
+				movable
+					? 'tlui-cmt-canvas-region tlui-cmt-canvas-region--movable'
+					: 'tlui-cmt-canvas-region'
+			}
 			style={rect}
 			onPointerDown={movable ? startMove : undefined}
 			onPointerMove={movable ? onMove : undefined}
@@ -939,7 +1054,7 @@ function RegionResizeHandles({
 			{points.map((h) => (
 				<div
 					key={h.key}
-					className="cmt-canvas-region-handle"
+					className="tlui-cmt-canvas-region-handle"
 					style={{ left: h.left, top: h.top, cursor: h.cursor }}
 					onPointerDown={startResize}
 					onPointerMove={onResize(h)}
@@ -962,13 +1077,17 @@ const ThreadPin = memo(function ThreadPin({
 }) {
 	const {
 		currentUserId,
-		resolveName,
+		resolveAuthor,
 		onPostComment,
 		isCommentUnread,
 		onCommentRead,
 		getMentionSuggestions,
 		renderMentionSuggestion,
 	} = props
+	// Name-only view of the resolver, for the mention/rich-text paths (stable identity so
+	// CommentBody's memoized render doesn't recompute every render).
+	const resolveName = useCallback((id: string) => resolveAuthor(id)?.name, [resolveAuthor])
+	const me = currentUserId ? resolveAuthor(currentUserId) : undefined
 	const options = useCommentingOptions()
 	const impreciseShapeAnchor = props.impreciseShapeAnchor ?? options.impreciseShapeAnchor
 	const container = useContainer()
@@ -979,7 +1098,11 @@ const ThreadPin = memo(function ThreadPin({
 		editor,
 		thread.id,
 	])
-	const [reply, setReply] = useState<TLRichText>(EMPTY_COMMENT)
+	// An unsent reply survives closing the thread (saved on every change, keyed by thread id) —
+	// the flip side of dismissing without a discard warning.
+	const [reply, setReply] = useState<TLRichText>(
+		() => getCommentDraft(replyDraftSlot(thread.id)) ?? EMPTY_COMMENT
+	)
 	const [editingId, setEditingId] = useState<string | null>(null)
 	const [editText, setEditText] = useState<TLRichText>(EMPTY_COMMENT)
 	// While dragging the marker, its page point overrides the anchor's; committed on drop.
@@ -1010,18 +1133,33 @@ const ThreadPin = memo(function ThreadPin({
 		resizeBounds != null ||
 		(regionOptions.reveal === 'pointer' && pointerInRegion) ||
 		(regionOptions.reveal === 'pin-hover' && pinHovered)
+	// A region thread's pin corner is its own (the corner its creating drag released on), with
+	// the configured default as the fallback for older records.
+	const pinCorner =
+		thread.anchor.type === 'region'
+			? regionAnchorPinCorner(editor, thread.anchor)
+			: regionOptions.pinCorner
 	// The resize handles: side midpoints ('edges'), or the corners other than the pin's ('corners').
 	const resizeHandles = useMemo(
 		() =>
 			regionOptions.resize === 'edges'
 				? REGION_EDGES
-				: REGION_CORNERS.filter(
-						(c) => c.x !== regionOptions.pinCorner.x || c.y !== regionOptions.pinCorner.y
-					),
-		[regionOptions.resize, regionOptions.pinCorner]
+				: REGION_CORNERS.filter((c) => c.x !== pinCorner.x || c.y !== pinCorner.y),
+		[regionOptions.resize, pinCorner]
 	)
-	const dragRef = useRef<{ startX: number; startY: number; moved: boolean } | null>(null)
+	const dragRef = useRef<{
+		startX: number
+		startY: number
+		moved: boolean
+		// The anchor's page-space offset from the grab point, so a drag translates the pin by the
+		// cursor's delta (like RegionBox's move) instead of snapping the anchor to the cursor.
+		offsetX: number
+		offsetY: number
+	} | null>(null)
 	const markerRef = useRef<HTMLDivElement>(null)
+	// Wheel pass-through sits on the marker (which is never scrollable), not the layer root —
+	// see the note on the layer.
+	usePassThroughWheelEvents(markerRef)
 
 	// Clicking outside the open popover (and off its own pin) closes the thread — mirrors the
 	// pending composer's dismiss. Capture phase + a class check rather than stopPropagation, since the
@@ -1032,15 +1170,17 @@ const ThreadPin = memo(function ThreadPin({
 		const onPointerDown = (e: PointerEvent) => {
 			const target = e.target as HTMLElement | null
 			if (!target) return
-			if (target.closest('.cmt-canvas-popover')) return
+			if (target.closest('.tlui-cmt-canvas-popover')) return
 			const marker = markerRef.current
 			if (marker && marker.contains(target)) return
 			// A press on a region's resize handle or movable body edits this thread — don't dismiss it.
-			if (target.closest('.cmt-canvas-region-handle, .cmt-canvas-region--movable')) return
+			if (target.closest('.tlui-cmt-canvas-region-handle, .tlui-cmt-canvas-region--movable')) return
 			// A click inside a menu/popover layered above us (the sidebar's filter or overflow
 			// dropdown, or the composer's mention picker — all portaled elsewhere) belongs to that
 			// layer; defer to its own dismissal instead of closing the thread out from under it.
-			if (target.closest('.tlui-menu, [data-radix-popper-content-wrapper], .cmt-mention-popup'))
+			if (
+				target.closest('.tlui-menu, [data-radix-popper-content-wrapper], .tlui-cmt-mention-popup')
+			)
 				return
 			openThreadId.set(editor, null)
 		}
@@ -1053,7 +1193,10 @@ const ThreadPin = memo(function ThreadPin({
 		() => {
 			if (thread.pageId !== editor.getCurrentPageId()) return null
 			const pagePoint = anchorPagePoint(editor, thread.anchor, impreciseShapeAnchor)
-			return pagePoint ? editor.pageToViewport(pagePoint) : null
+			if (!pagePoint) return null
+			const viewportPoint = editor.pageToViewport(pagePoint)
+			const inset = impreciseShapePinInset(thread.anchor, impreciseShapeAnchor)
+			return inset ? { x: viewportPoint.x + inset.x, y: viewportPoint.y + inset.y } : viewportPoint
 		},
 		[editor, thread.anchor, thread.pageId, impreciseShapeAnchor]
 	)
@@ -1086,6 +1229,7 @@ const ThreadPin = memo(function ThreadPin({
 			if (onPostComment) onPostComment(comment)
 		})
 		setReply(EMPTY_COMMENT)
+		clearCommentDraft(replyDraftSlot(thread.id))
 	}
 
 	const toggleResolve = () => {
@@ -1112,6 +1256,18 @@ const ThreadPin = memo(function ThreadPin({
 		setEditText(comment.body)
 	}
 
+	const deleteComment = (comment: TLComment) => {
+		commitCommentMutation(editor, () => {
+			// Deleting a thread's only comment deletes the thread — an empty thread has no surface.
+			if (comments.length === 1) {
+				openThreadId.set(editor, null)
+				removeCommentRecords(editor, [thread.id, comment.id])
+			} else {
+				removeCommentRecords(editor, [comment.id])
+			}
+		})
+	}
+
 	const saveEdit = () => {
 		const comment = comments.find((c) => c.id === editingId)
 		if (!comment || isCommentEmpty(editText)) return
@@ -1128,7 +1284,7 @@ const ThreadPin = memo(function ThreadPin({
 		if (editingId === comment.id) {
 			return (
 				<div
-					className="cmt-editing"
+					className="tlui-cmt-editing"
 					onKeyDown={(e) => {
 						if (e.key === 'Escape') {
 							setEditingId(null)
@@ -1156,13 +1312,44 @@ const ThreadPin = memo(function ThreadPin({
 				{...card}
 				actions={
 					comment.authorId === currentUserId ? (
-						<button
-							className="cmt-thread__action"
-							title={msg('comments.edit')}
-							onClick={() => startEdit(comment)}
-						>
-							<TldrawUiIcon icon="dots-horizontal" label={msg('comments.edit')} small />
-						</button>
+						<TldrawUiDropdownMenuRoot id={`comment-actions-${comment.id}`}>
+							<TldrawUiDropdownMenuTrigger>
+								<button
+									type="button"
+									className="tlui-cmt-thread__action"
+									title={msg('comments.more-options')}
+								>
+									<TldrawUiIcon icon="dots-vertical" label={msg('comments.more-options')} small />
+								</button>
+							</TldrawUiDropdownMenuTrigger>
+							<TldrawUiDropdownMenuContent
+								className="tlui-cmt-menu"
+								side="bottom"
+								align="end"
+								alignOffset={0}
+							>
+								<TldrawUiDropdownMenuGroup>
+									<TldrawUiDropdownMenuItem>
+										<button
+											type="button"
+											className="tlui-cmt-menu-item"
+											onClick={() => startEdit(comment)}
+										>
+											<span>{msg('comments.edit-comment')}</span>
+										</button>
+									</TldrawUiDropdownMenuItem>
+									<TldrawUiDropdownMenuItem>
+										<button
+											type="button"
+											className="tlui-cmt-menu-item tlui-cmt-menu-item--danger"
+											onClick={() => deleteComment(comment)}
+										>
+											<span>{msg('comments.delete-comment')}</span>
+										</button>
+									</TldrawUiDropdownMenuItem>
+								</TldrawUiDropdownMenuGroup>
+							</TldrawUiDropdownMenuContent>
+						</TldrawUiDropdownMenuRoot>
 					) : undefined
 				}
 			/>
@@ -1173,7 +1360,7 @@ const ThreadPin = memo(function ThreadPin({
 		<>
 			{currentUserId && (
 				<button
-					className="cmt-thread__action"
+					className="tlui-cmt-thread__action"
 					title={msg(thread.resolved ? 'comments.reopen' : 'comments.resolve')}
 					onClick={toggleResolve}
 				>
@@ -1185,30 +1372,46 @@ const ThreadPin = memo(function ThreadPin({
 				</button>
 			)}
 			{currentUserId && (
-				<button
-					className="cmt-thread__action"
-					title={msg('comments.delete')}
-					onClick={deleteThread}
-				>
-					<TldrawUiIcon icon="trash" label={msg('comments.delete')} small />
-				</button>
+				<TldrawUiDropdownMenuRoot id={`comment-thread-actions-${thread.id}`}>
+					<TldrawUiDropdownMenuTrigger>
+						<button
+							type="button"
+							className="tlui-cmt-thread__action"
+							title={msg('comments.more-options')}
+						>
+							<TldrawUiIcon icon="dots-vertical" label={msg('comments.more-options')} small />
+						</button>
+					</TldrawUiDropdownMenuTrigger>
+					<TldrawUiDropdownMenuContent
+						className="tlui-cmt-menu"
+						side="bottom"
+						align="end"
+						alignOffset={0}
+					>
+						<TldrawUiDropdownMenuGroup>
+							<TldrawUiDropdownMenuItem>
+								<button
+									type="button"
+									className="tlui-cmt-menu-item tlui-cmt-menu-item--danger"
+									onClick={deleteThread}
+								>
+									<span>{msg('comments.delete')}</span>
+								</button>
+							</TldrawUiDropdownMenuItem>
+						</TldrawUiDropdownMenuGroup>
+					</TldrawUiDropdownMenuContent>
+				</TldrawUiDropdownMenuRoot>
 			)}
-			<button
-				className="cmt-thread__action"
-				title={msg('comments.dismiss')}
-				onClick={() => openThreadId.set(editor, null)}
-			>
-				<TldrawUiIcon icon="cross-2" label={msg('comments.dismiss')} small />
-			</button>
 		</>
 	)
 
 	const PinContent = options.components.PinContent
 	// The `PinContent` component slot overrides the built-in author-initial default.
+	const threadAuthor = resolveAuthor(thread.createdBy)
 	const pinContent = PinContent ? (
 		<PinContent thread={thread} comments={comments} />
 	) : (
-		initialOf(resolveName(thread.createdBy) ?? UNKNOWN_AUTHOR)
+		initialOf(threadAuthor?.name ?? UNKNOWN_AUTHOR)
 	)
 
 	// Drag the marker to move the thread: its position is overridden locally while dragging, then
@@ -1220,8 +1423,30 @@ const ThreadPin = memo(function ThreadPin({
 	const pinMovable = regionOptions.move !== 'body'
 	const bodyMovable = regionOptions.move !== 'pin'
 	const startDrag = (e: ReactPointerEvent<HTMLDivElement>) => {
+		// A middle/right-button or space-held press over a pin is a camera pan, not a pin drag —
+		// hand it to the canvas untouched.
+		if (isCanvasPanGesture(editor, e)) {
+			forwardPointerEventToCanvas(container, e)
+			return
+		}
 		e.stopPropagation()
-		dragRef.current = { startX: e.clientX, startY: e.clientY, moved: false }
+		const grabPage = editor.screenToPage({ x: e.clientX, y: e.clientY })
+		const anchorPage = anchorPagePoint(editor, thread.anchor, impreciseShapeAnchor)
+		// The drag delta is taken from where the pin is drawn, which for an imprecise shape pin
+		// is inset from its anchor point — without this the pin jumps by the inset on drag start.
+		const inset = impreciseShapePinInset(thread.anchor, impreciseShapeAnchor)
+		if (anchorPage && inset) {
+			const zoom = editor.getZoomLevel()
+			anchorPage.x += inset.x / zoom
+			anchorPage.y += inset.y / zoom
+		}
+		dragRef.current = {
+			startX: e.clientX,
+			startY: e.clientY,
+			moved: false,
+			offsetX: anchorPage ? anchorPage.x - grabPage.x : 0,
+			offsetY: anchorPage ? anchorPage.y - grabPage.y : 0,
+		}
 		e.currentTarget.setPointerCapture(e.pointerId)
 	}
 	const onDrag = (e: ReactPointerEvent<HTMLDivElement>) => {
@@ -1231,7 +1456,8 @@ const ThreadPin = memo(function ThreadPin({
 		if (isRegion && !pinMovable) return
 		if (!drag.moved && Math.hypot(e.clientX - drag.startX, e.clientY - drag.startY) < 4) return
 		drag.moved = true
-		setDragPagePoint(editor.screenToPage({ x: e.clientX, y: e.clientY }))
+		const cursorPage = editor.screenToPage({ x: e.clientX, y: e.clientY })
+		setDragPagePoint({ x: cursorPage.x + drag.offsetX, y: cursorPage.y + drag.offsetY })
 	}
 	const endDrag = (e: ReactPointerEvent<HTMLDivElement>) => {
 		const drag = dragRef.current
@@ -1244,15 +1470,16 @@ const ThreadPin = memo(function ThreadPin({
 			openThreadId.set(editor, openThreadId.get(editor) === thread.id ? null : thread.id)
 			return
 		}
-		const pagePoint = editor.screenToPage({ x: e.clientX, y: e.clientY })
+		const cursorPage = editor.screenToPage({ x: e.clientX, y: e.clientY })
+		const pagePoint = { x: cursorPage.x + drag.offsetX, y: cursorPage.y + drag.offsetY }
 		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 - regionOptions.pinCorner.x * thread.anchor.w,
-				y: pagePoint.y - regionOptions.pinCorner.y * thread.anchor.h,
+				x: pagePoint.x - pinCorner.x * thread.anchor.w,
+				y: pagePoint.y - pinCorner.y * thread.anchor.h,
 			}
 		} else {
 			const hit = editor.getShapeAtPoint(pagePoint, { hitInside: true })
@@ -1265,10 +1492,13 @@ const ThreadPin = memo(function ThreadPin({
 
 	// The pin (and its popover) track the live edit: a resize moves it to the region's pin corner, a
 	// move to the drag point; otherwise it sits at the stored anchor's viewport point.
-	const livePinPage = resizeBounds
-		? regionPinPoint(resizeBounds, regionOptions.pinCorner)
-		: dragPagePoint
-	const renderPoint = livePinPage ? editor.pageToViewport(livePinPage) : point
+	const livePinPage = resizeBounds ? regionPinPoint(resizeBounds, pinCorner) : dragPagePoint
+	const renderPointBase = livePinPage ? editor.pageToViewport(livePinPage) : point
+	// A region's pin centres on its corner — overlapping the box — rather than hanging off it.
+	// The marker anchors bottom-left, so step half its 34px size left and down (screen px).
+	const renderPoint = isRegion
+		? { x: renderPointBase.x - 17, y: renderPointBase.y + 17 }
+		: renderPointBase
 
 	// A region's live box bounds, by priority: a corner resize, else a pin-drag translation (the pin
 	// corner tracks the cursor), else the stored anchor. Undefined for non-region threads.
@@ -1277,15 +1507,16 @@ const ThreadPin = memo(function ThreadPin({
 		regionAnchor && dragPagePoint
 			? {
 					...regionAnchor,
-					x: dragPagePoint.x - regionOptions.pinCorner.x * regionAnchor.w,
-					y: dragPagePoint.y - regionOptions.pinCorner.y * regionAnchor.h,
+					x: dragPagePoint.x - pinCorner.x * regionAnchor.w,
+					y: dragPagePoint.y - pinCorner.y * regionAnchor.h,
 				}
 			: regionAnchor
 	const regionBoxBounds = resizeBounds ?? movedRegion
 	const commitResize = (bounds: BoxModel) => {
 		setResizeBounds(null)
 		editor.run(
-			() => putCommentRecords(editor, [{ ...thread, anchor: { type: 'region', ...bounds } }]),
+			// Spread the existing anchor first so the region's pin corner survives a resize.
+			() => putCommentRecords(editor, [{ ...thread, anchor: { ...regionAnchor!, ...bounds } }]),
 			{
 				history: 'ignore',
 			}
@@ -1313,19 +1544,25 @@ const ThreadPin = memo(function ThreadPin({
 				/>
 			)}
 			<div
-				className={open ? 'cmt-canvas-pin cmt-canvas-pin--open' : 'cmt-canvas-pin'}
+				className={[
+					'tlui-cmt-canvas-pin',
+					open && 'tlui-cmt-canvas-pin--open',
+					dragPagePoint && 'tlui-cmt-canvas-pin--dragging',
+				]
+					.filter(Boolean)
+					.join(' ')}
 				style={{ left: renderPoint.x, top: renderPoint.y }}
 			>
 				<div
 					ref={markerRef}
-					className="cmt-canvas-pin__marker"
+					className="tlui-cmt-canvas-pin__marker"
 					onPointerDown={startDrag}
 					onPointerMove={onDrag}
 					onPointerUp={endDrag}
 					onPointerEnter={() => setPinHovered(true)}
 					onPointerLeave={() => setPinHovered(false)}
 				>
-					<CommentPin resolved={thread.resolved != null} open={open}>
+					<CommentPin resolved={thread.resolved != null} open={open} color={threadAuthor?.color}>
 						{pinContent}
 					</CommentPin>
 				</div>
@@ -1334,29 +1571,35 @@ const ThreadPin = memo(function ThreadPin({
 				{open && (
 					<ThreadPopover
 						container={container}
-						style={{ left: renderPoint.x + 36, top: renderPoint.y - 28 }}
+						// Clear the bottom-left-anchored pin: it spans 34px right of and above the
+						// anchor, plus the open ring's 5px — the popover starts past that, opening
+						// above the pin's top.
+						style={{ left: renderPoint.x + 48, top: renderPoint.y - 54 }}
 					>
 						<CommentThread
 							header={msg('comments.thread-title')}
 							headerActions={headerActions}
 							renderComment={renderComment}
-							comments={comments.map((c) => toCardProps(c, props, options.components))}
+							comments={comments.map((c) => toCardProps(c, props, options.components, resolveName))}
 							resolvedBanner={
 								thread.resolved
 									? msg('comments.resolved-by').replace(
 											'{name}',
-											resolveName(thread.resolved.by) ?? UNKNOWN_AUTHOR
+											resolveAuthor(thread.resolved.by)?.name ?? UNKNOWN_AUTHOR
 										)
 									: undefined
 							}
 							composer={
 								currentUserId && !thread.resolved
 									? {
-											author: resolveName(currentUserId) ?? UNKNOWN_AUTHOR,
+											author: me ?? UNKNOWN_COMMENT_AUTHOR,
 											placeholder: msg('comments.reply-placeholder'),
 											sendLabel: msg('comments.send'),
 											value: reply,
-											onChange: setReply,
+											onChange: (value: TLRichText) => {
+												setReply(value)
+												saveCommentDraft(replyDraftSlot(thread.id), value)
+											},
 											onSubmit: postReply,
 											disabled: isCommentEmpty(reply),
 											getMentionSuggestions,
@@ -1376,12 +1619,17 @@ function PendingComposer({
 	editor,
 	pending,
 	currentUserId,
-	resolveName,
+	resolveAuthor,
 	onPostComment,
 	getMentionSuggestions,
 	renderMentionSuggestion,
 }: CanvasCommentsProps & { editor: Editor; pending: PendingComment }) {
-	const [text, setText] = useState<TLRichText>(EMPTY_COMMENT)
+	const me = currentUserId ? resolveAuthor(currentUserId) : undefined
+	// Click-away keeps the draft (saved on every change) and the next placement composer
+	// restores it — the flip side of dismissing without a discard warning.
+	const [text, setText] = useState<TLRichText>(
+		() => getCommentDraft(NEW_COMMENT_DRAFT) ?? EMPTY_COMMENT
+	)
 	const ref = useRef<HTMLDivElement>(null)
 	const msg = useTranslation()
 	const container = useContainer()
@@ -1402,7 +1650,7 @@ function PendingComposer({
 			if (!el || !target) return
 			// A click in the composer, or in the mention picker it spawns (portaled elsewhere), is
 			// not "outside" — keep the draft open so the pick can insert.
-			if (el.contains(target) || target.closest('.cmt-mention-popup')) return
+			if (el.contains(target) || target.closest('.tlui-cmt-mention-popup')) return
 			pendingComment.set(editor, null)
 		}
 		document.addEventListener('pointerdown', onPointerDown, true)
@@ -1428,31 +1676,41 @@ function PendingComposer({
 			if (onPostComment) onPostComment(comment)
 		})
 		setText(EMPTY_COMMENT)
+		clearCommentDraft(NEW_COMMENT_DRAFT)
 		pendingComment.set(editor, null)
 	}
 
 	return createPortal(
 		<div
 			ref={ref}
-			className="cmt-canvas-composer"
+			className={[
+				'tlui-cmt-canvas-composer',
+				pending.anchor.type === 'region' && 'tlui-cmt-canvas-composer--region',
+			]
+				.filter(Boolean)
+				.join(' ')}
 			style={{ left: point.x, top: point.y }}
 			onPointerDown={stop}
+			onContextMenu={stop}
 			onKeyDown={(e) => {
 				if (e.key === 'Escape' && !isMentionPickerOpen()) pendingComment.set(editor, null)
 			}}
 		>
 			<CommentComposer
-				author={currentUserId ? (resolveName(currentUserId) ?? UNKNOWN_AUTHOR) : ''}
+				author={me ?? UNKNOWN_COMMENT_AUTHOR}
 				placeholder={msg('comments.add-placeholder')}
 				sendLabel={msg('comments.send')}
 				value={text}
-				onChange={setText}
+				onChange={(value) => {
+					setText(value)
+					saveCommentDraft(NEW_COMMENT_DRAFT, value)
+				}}
 				onSubmit={submit}
 				disabled={isCommentEmpty(text)}
 				getMentionSuggestions={getMentionSuggestions}
 				renderMentionSuggestion={renderMentionSuggestion}
 				autoFocus
-				leading={draftAvatar}
+				leading={draftAvatar(me?.color)}
 			/>
 		</div>,
 		container