@tldraw/commenting 5.3.0-internal.c5c7f1d817d0 → 5.3.0-next.2fa9c61a8de6

package/src/clustering/runtime.ts

@@ -1,6 +1,6 @@
 import type { ClusterNode, ClusterTable, MergeEvent } from './types'
 
-/** @public */
+/** @internal */
 export interface ClusterRuntime {
 	/** Events[0..k) are in the cursor (applied unless suppressed). Exposed for tests/debugging. */
 	readonly k: number
@@ -42,7 +42,7 @@ export interface ClusterRuntime {
 	getVisible(): ReadonlyMap<string, ClusterNode>
 }
 
-/** @public */
+/** @internal */
 export function createClusterRuntime(table: ClusterTable): ClusterRuntime {
 	return new ClusterRuntimeImpl(table)
 }
@@ -141,6 +141,24 @@ class ClusterRuntimeImpl implements ClusterRuntime {
 		}
 
 		let changed = false
+		// Heal suppressed events at their own merge threshold BEFORE the merge walk: a zoom-out
+		// past zMerge merges a held-out band event exactly as if it had still been ahead of the
+		// cursor. Healing must precede the walk because a single zoom jump can cross both a
+		// suppressed event and an event that consumes its result; applying the consumer first
+		// would leave the unapplied producer's children in `visible` (its delete is a no-op) and
+		// then re-add the producer on top, double-counting those leaves. Threshold monotonicity
+		// guarantees a suppressed producer's zMerge is >= its consumer's, so anything the walk
+		// needs has already healed. Set iteration is insertion order (ascending index), so a
+		// healed event's suppressed children (larger zMerge, smaller index) heal before it.
+		if (this.suppressed.size > 0) {
+			for (const i of [...this.suppressed]) {
+				if (zoom <= this.table.events[i].zMerge) {
+					this.suppressed.delete(i)
+					applyEvent(this.visible, this.table.events[i])
+					changed = true
+				}
+			}
+		}
 		while (this.k < this.table.events.length && zoom <= this.table.events[this.k].zMerge) {
 			applyEvent(this.visible, this.table.events[this.k])
 			this.k++
@@ -154,19 +172,6 @@ class ClusterRuntimeImpl implements ClusterRuntime {
 				changed = true
 			}
 		}
-		// Heal suppressed events at their own merge threshold: a zoom-out past zMerge merges a
-		// held-out band event exactly as if it had still been ahead of the cursor. Set iteration
-		// is insertion order (ascending index), so a healed event's suppressed children (larger
-		// zMerge, smaller index) always heal before it.
-		if (this.suppressed.size > 0) {
-			for (const i of [...this.suppressed]) {
-				if (zoom <= this.table.events[i].zMerge) {
-					this.suppressed.delete(i)
-					applyEvent(this.visible, this.table.events[i])
-					changed = true
-				}
-			}
-		}
 		if (changed) this.version++
 	}
 

package/src/clustering/types.ts

@@ -2,7 +2,7 @@ import type { VecLike } from 'tldraw'
 
 /**
  * One comment thread's pin, already resolved to a page-space anchor point.
- * @public
+ * @internal
  */
 export interface LeafInput {
 	/** Unique. Thread id. Uniqueness is a precondition — throw on duplicates. */
@@ -23,7 +23,7 @@ export interface MstEdge {
 
 /**
  * A cluster in the merge tree: a leaf (one thread) or a merged group.
- * @public
+ * @internal
  */
 export interface ClusterNode {
 	/** Leaves: the thread id verbatim. Merged nodes: `cluster:${count}:${minMemberId}`. */
@@ -58,7 +58,7 @@ export interface ContractedEvent {
 
 /**
  * A finalized merge event, ready for the runtime.
- * @public
+ * @internal
  */
 export interface MergeEvent {
 	zMerge: number
@@ -70,7 +70,7 @@ export interface MergeEvent {
 
 /**
  * The precomputed clustering schedule for one page's comments.
- * @public
+ * @internal
  */
 export interface ClusterTable {
 	/** Sorted non-increasing by zMerge; satisfies the invariants of CLUSTERING.md §7.6. */
@@ -79,15 +79,15 @@ export interface ClusterTable {
 	leaves: readonly ClusterNode[]
 }
 
-/** @public */
+/** @internal */
 export interface ClusterOptions {
-	/** Cluster (merge) distance, screen px. Default 40. */
+	/** Cluster (merge) distance, screen px. Default 22. */
 	Tc?: number
-	/** Uncluster (split) distance, screen px. Must be \> Tc. Default 1.5 · Tc. */
+	/** Uncluster (split) distance, screen px. Must be \> Tc. Default 1.2 · Tc. */
 	Tu?: number
-	/** Contraction window ratio. Default 0.12. */
+	/** Contraction window ratio. Default 0.7. */
 	eps?: number
-	/** Max cluster screen extent at birth, screen px. Must be \>= Tc. Default 3 · Tc. */
+	/** Max cluster screen extent at birth, screen px. Must be \>= Tc. Default 3.75 · Tc. */
 	Dmax?: number
 	/** Camera zoom bounds — pass the editor's camera constraints. Required. */
 	minZoom: number

package/src/index.ts

@@ -1,58 +1,93 @@
 import { registerTldrawLibraryVersion } from '@tldraw/utils'
 
 // Presentational commenting components. These are tldraw-independent and can be used to build
-// custom commenting UI.
-export { Avatar, type AvatarProps } from './ui/avatar'
+// custom commenting UI. The mention picker, pill, and avatar are re-exported from @tldraw/mentions
+// so the commenting public API is unchanged.
+export {
+	Avatar,
+	type AvatarProps,
+	type CommentAuthor,
+	createMentionSuggestion,
+	filterMentionMembers,
+	Mention,
+	MentionList,
+	type MentionListProps,
+	type MentionMember,
+	type MentionProps,
+	type MentionSuggestionOptions,
+} from '@tldraw/mentions'
 export { Byline, type BylineProps } from './ui/byline'
 export { CommentCard, type CommentCardProps } from './ui/comment-card'
 export { CommentComposer, type CommentComposerProps } from './ui/comment-composer'
 export { CountBadge, type CountBadgeProps } from './ui/count-badge'
 export { CommentPin, type CommentPinProps } from './ui/comment-pin'
-export { CommentText, type CommentTextProps } from './ui/comment-text'
 export { CommentThread, type CommentThreadProps } from './ui/comment-thread'
-export { CommentsList, type CommentListItemProps, type CommentsListProps } from './ui/comments-list'
+export {
+	CommentsList,
+	isOpenInNewTabClick,
+	type CommentListItemProps,
+	type CommentsListProps,
+} from './ui/comments-list'
 export { EmptyState, type EmptyStateProps } from './ui/empty-state'
 export { formatRelativeTime } from './ui/format-time'
-export { Mention, type MentionProps } from './ui/mention'
-export { MentionList, type MentionListProps, type MentionMember } from './ui/mention-list'
 export {
-	createMentionSuggestion,
-	filterMentionMembers,
-	type MentionSuggestionOptions,
-} from './ui/mention-suggestion'
-export { Reaction, type ReactionProps } from './ui/reaction'
-export { Reactions } from './ui/reactions'
-export { renderMarkdown } from './ui/render-markdown'
+	DEFAULT_REACTION_EMOJI,
+	EmojiPicker,
+	type EmojiPickerProps,
+	isAllowedReactionEmoji,
+} from './ui/emoji-picker'
+export {
+	Reaction,
+	type ReactionProps,
+	type RenderReaction,
+	defaultRenderReaction,
+	DefaultReactionTooltip,
+	DefaultReactionTooltipContent,
+	type ReactionTooltipProps,
+} from './ui/reaction'
+export { ReactionPicker, type ReactionPickerProps } from './ui/reaction-picker'
+export {
+	Reactions,
+	type ReactionReactor,
+	type ReactionsProps,
+	type ReactionSummary,
+} from './ui/reactions'
 export { SendButton, type SendButtonProps } from './ui/send-button'
 
 // The tldraw-coupled commenting layer: the comment tool, reactive hooks over the comment
 // records, a rich-text body renderer, and a batteries-included <CanvasComments> overlay. Pairs
 // with the presentational components above.
+export { registerCommentAnchorLifecycle } from './canvas/anchor-lifecycle'
 export { CommentBody, type CommentBodyProps } from './canvas/comment-body'
 export {
-	CommentTool,
-	commentToolOverrides,
-	commentTools,
-	type PendingComment,
-} from './canvas/comment-tool'
-export { collectClusterLeaves } from './canvas/cluster-input'
-export { computeClusterTable } from './clustering/computeClusterTable'
+	deleteComment,
+	deleteThread,
+	editComment,
+	putCommentRecords,
+	removeCommentRecords,
+	reopenThread,
+	resolveThread,
+} from './canvas/comment-mutations'
+export {
+	CommentReactionPicker,
+	type CommentReactionPickerProps,
+	CommentReactions,
+	type CommentReactionsProps,
+	summarizeReactions,
+	toggleCommentReaction,
+	useCommentReactions,
+} from './canvas/comment-reactions'
+export { CommentTool, commentToolOverrides, commentTools } from './canvas/comment-tool'
 export {
+	getCommentReactions,
 	getCommentRecord,
 	getComments,
 	getCommentThreads,
-	putCommentRecords,
-	removeCommentRecords,
+	getLiveComments,
+	getLiveCommentThreads,
 	type TLCommentRecord,
 } from './canvas/comment-store'
-export { createClusterRuntime, type ClusterRuntime } from './clustering/runtime'
-export type {
-	ClusterNode,
-	ClusterOptions,
-	ClusterTable,
-	LeafInput,
-	MergeEvent,
-} from './clustering/types'
+export { type CommentingContext } from './canvas/context'
 export { CommentsFilterMenu, type CommentsFilterMenuProps } from './canvas/comments-filter-menu'
 export { CommentsMenuItem } from './canvas/comments-menu-item'
 export { CanvasComments, type CanvasCommentsProps } from './canvas/comments-overlay'
@@ -60,34 +95,35 @@ export {
 	type CommentingComponents,
 	type CommentingOptions,
 	defaultCommentingOptions,
+	getCanComment,
 	getCommentingOptions,
+	type ShapeCommentPrecisionContext,
+	useCanComment,
 	useCommentingOptions,
 } from './canvas/options'
 export { CommentsOverflowMenu } from './canvas/comments-overflow-menu'
+export { CommentsVisibilityToggle } from './canvas/comments-visibility-toggle'
 export { CanvasCommentsSidebar, type CanvasCommentsSidebarProps } from './canvas/comments-sidebar'
 export { useComments, useCommentThreads, useThreadComments } from './canvas/hooks'
 export { useCommentingEnabled } from './canvas/license'
-export { DEFAULT_REGION_COMMENT_OPTIONS, type RegionCommentOptions } from './canvas/region-options'
 export { richTextToPlaintext } from './canvas/rich-text'
 export { DEFAULT_SIDEBAR_FILTERS, type SidebarFilters } from './canvas/sidebar-filters'
 export {
 	commentsHidden,
-	commitCommentMutation,
+	commentsSidebarOpen,
+	getRevealThreadPending,
 	openThreadId,
-	pendingComment,
+	revealThread,
 	sidebarFilters,
 	toggleCommentsHidden,
+	toggleCommentsSidebar,
 	useCommentsHidden,
+	useCommentsSidebarOpen,
 	useOpenThreadId,
-	usePendingComment,
+	useRevealThreadPending,
 	useSidebarFilters,
 } from './canvas/state'
-export {
-	anchorPagePoint,
-	DEFAULT_IMPRECISE_SHAPE_ANCHOR,
-	focusThread,
-	shapeAnchorAt,
-} from './canvas/thread-state'
+export { anchorPagePoint, focusThread, shapeAnchorAt } from './canvas/thread-state'
 
 registerTldrawLibraryVersion(
 	(globalThis as any).TLDRAW_LIBRARY_NAME,

package/src/ui/byline.tsx

@@ -1,8 +1,9 @@
+import { Avatar, type CommentAuthor } from '@tldraw/mentions'
 import { formatRelativeTime } from './format-time'
 
 /** @public */
 export interface BylineProps {
-	author: string
+	author: CommentAuthor
 	/** ISO datetime; formatted to relative time by the component. */
 	date: string
 	/** Shows an "edited" marker when the comment has been edited. */
@@ -13,7 +14,8 @@ export interface BylineProps {
 export function Byline({ author, date, edited }: BylineProps) {
 	return (
 		<div className="tlui-cmt-head">
-			<span className="tlui-cmt-author">{author}</span>
+			<Avatar author={author} />
+			<span className="tlui-cmt-author">{author.name}</span>
 			<span className="tlui-cmt-time">
 				{formatRelativeTime(date)}
 				{edited && <span className="tlui-cmt-edited"> · edited</span>}

package/src/ui/comment-card.tsx

@@ -1,12 +1,12 @@
+import { type CommentAuthor } from '@tldraw/mentions'
 import { ReactNode } from 'react'
-import { Avatar } from './avatar'
 import { Byline } from './byline'
 
 /** @public */
 export interface CommentCardProps {
-	author: string
-	/** The rendered comment body. The card doesn't dictate a format — pass a `<CommentText>`
-	 *  for markdown, a rich-text render, or any node. */
+	author: CommentAuthor
+	/** The rendered comment body. The card doesn't dictate a format — pass a `<CommentBody>`
+	 *  for a comment's rich text, or any node of your own. */
 	body: ReactNode
 	/** ISO datetime; formatted to relative time by the component. */
 	date: string
@@ -15,16 +15,26 @@ export interface CommentCardProps {
 	edited?: boolean
 	/** Hover-revealed controls at the card's top-right (e.g. an edit affordance). */
 	actions?: ReactNode
+	/** Content under the body, aligned with it rather than the avatar (e.g. a `<Reactions>` row). */
+	footer?: ReactNode
 }
 
 /** A single comment: Avatar, Byline, and a body slot the consumer renders. @public @react */
-export function CommentCard({ author, body, date, you, edited, actions }: CommentCardProps) {
+export function CommentCard({
+	author,
+	body,
+	date,
+	you,
+	edited,
+	actions,
+	footer,
+}: CommentCardProps) {
 	return (
 		<div className={you ? 'tlui-cmt-card tlui-cmt-card--you' : 'tlui-cmt-card'}>
-			<Avatar name={author} />
+			<Byline author={author} date={date} edited={edited} />
 			<div className="tlui-cmt-body">
-				<Byline author={author} date={date} edited={edited} />
 				{body}
+				{footer}
 			</div>
 			{actions !== undefined && <div className="tlui-cmt-card__actions">{actions}</div>}
 		</div>

package/src/ui/comment-composer.tsx

@@ -1,17 +1,29 @@
 import { JSONContent } from '@tiptap/core'
 import { EditorContent, useEditor } from '@tiptap/react'
-import { ReactNode, useEffect, useMemo, useRef, useState } from 'react'
+import {
+	Avatar,
+	type CommentAuthor,
+	createMentionExtension,
+	createMentionSuggestion,
+	isMentionPickerOpen,
+	MentionMember,
+} from '@tldraw/mentions'
+import {
+	type MouseEvent as ReactMouseEvent,
+	ReactNode,
+	useEffect,
+	useLayoutEffect,
+	useMemo,
+	useRef,
+	useState,
+} from 'react'
 import { isEqual, TLRichText, useMaybeEditor } from 'tldraw'
-import { Avatar } from './avatar'
 import { commentTipTapExtensions, EMPTY_COMMENT, isCommentEmpty } from './comment-extensions'
-import { commentMention } from './comment-mention'
-import { MentionMember } from './mention-list'
-import { createMentionSuggestion, isMentionPickerOpen } from './mention-suggestion'
 import { SendButton } from './send-button'
 
 /** @public */
 export interface CommentComposerProps {
-	author: string
+	author: CommentAuthor
 	placeholder: string
 	/** Controlled rich-text value. Omit for the presentational (display-only) composer. */
 	value?: TLRichText
@@ -19,6 +31,9 @@ export interface CommentComposerProps {
 	/** Called on Send click or Enter. When set, the composer is interactive. */
 	onSubmit?(): void
 	sendLabel?: string
+	/** Called when Up is pressed in an empty composer — e.g. to start editing the comment above,
+	 *  the way chat apps edit your last message. With content in the field, Up moves the cursor. */
+	onArrowUpWhenEmpty?(): void
 	disabled?: boolean
 	autoFocus?: boolean
 	/** The leading element before the field. Defaults to the author's avatar. */
@@ -43,6 +58,7 @@ export function CommentComposer({
 	onChange,
 	onSubmit,
 	sendLabel = 'Send',
+	onArrowUpWhenEmpty,
 	disabled,
 	autoFocus,
 	leading,
@@ -60,6 +76,8 @@ export function CommentComposer({
 	onChangeRef.current = onChange
 	const onSubmitRef = useRef(onSubmit)
 	onSubmitRef.current = onSubmit
+	const onArrowUpWhenEmptyRef = useRef(onArrowUpWhenEmpty)
+	onArrowUpWhenEmptyRef.current = onArrowUpWhenEmpty
 	const disabledRef = useRef(disabled)
 	disabledRef.current = disabled
 	const getMentionSuggestionsRef = useRef(getMentionSuggestions)
@@ -68,6 +86,60 @@ export function CommentComposer({
 	renderMentionSuggestionRef.current = renderMentionSuggestion
 
 	const [isEmpty, setIsEmpty] = useState(() => !value || isCommentEmpty(value))
+	// Whether the field has grown to two rows: input across the full width, send button below.
+	// Flips when the (single-line) content width reaches the space left beside the send button.
+	const [expanded, setExpanded] = useState(false)
+	const expandedRef = useRef(expanded)
+	expandedRef.current = expanded
+	const inputWrapRef = useRef<HTMLDivElement>(null)
+	const mirrorRef = useRef<HTMLDivElement>(null)
+
+	// Measure whether the content still fits on one line beside the send button. The mirror is a
+	// hidden, nowrap clone of the editor's rendered content, so marks and mention chips measure at
+	// their true width. A small dead zone between the expand and collapse thresholds keeps the
+	// layout from flapping while typing at the boundary.
+	const remeasure = () => {
+		const wrap = inputWrapRef.current
+		const mirror = mirrorRef.current
+		const editor = editorRef.current
+		if (!wrap || !mirror || !editor) return
+		// Empty always fits — and measuring before TipTap's DOM has laid out reads zero widths,
+		// which would flash the expanded layout for a frame on mount.
+		if (editor.isEmpty) {
+			if (expandedRef.current) setExpanded(false)
+			return
+		}
+		if (wrap.clientWidth === 0) return
+		const doc = editor.state.doc
+		const multiBlock =
+			doc.childCount > 1 || (doc.firstChild !== null && doc.firstChild.type.name !== 'paragraph')
+		if (multiBlock) {
+			if (!expandedRef.current) setExpanded(true)
+			return
+		}
+		const field = wrap.parentElement
+		const send = field ? field.querySelector<HTMLElement>('.tlui-cmt-send') : null
+		const input = wrap.querySelector('.tlui-cmt-input')
+		if (!send || !input) return
+		mirror.innerHTML = input.innerHTML
+		const textWidth = mirror.offsetWidth
+		// The single-line space the input has beside the send button: the wrap's *content* box
+		// (clientWidth minus its own horizontal padding — the text wraps there, not at clientWidth),
+		// less the button plus the field's 6px gap when already expanded (the wrap then spans the
+		// full field). Without subtracting the padding, a padded wrap wraps to a second line ~padding
+		// px before expansion fires, so the input grows a line and then snaps to the expanded layout.
+		const wrapStyle = getComputedStyle(wrap)
+		const wrapPadX = parseFloat(wrapStyle.paddingLeft) + parseFloat(wrapStyle.paddingRight)
+		const collapsedAvailable =
+			wrap.clientWidth - wrapPadX - (expandedRef.current ? send.offsetWidth + 6 : 0)
+		if (!expandedRef.current && textWidth > collapsedAvailable - 8) {
+			setExpanded(true)
+		} else if (expandedRef.current && textWidth < collapsedAvailable - 24) {
+			setExpanded(false)
+		}
+	}
+	const remeasureRef = useRef(remeasure)
+	remeasureRef.current = remeasure
 
 	// The editor instance, reachable from `handleKeyDown` (which is created before `useEditor`
 	// returns). Updated on every render so the ref never points at a stale editor.
@@ -103,7 +175,7 @@ export function CommentComposer({
 				? (member: MentionMember) => renderMentionSuggestionRef.current?.(member)
 				: undefined
 			list.push(
-				commentMention({
+				createMentionExtension({
 					suggestion: createMentionSuggestion(resolveSuggestions, {
 						renderMember: renderRow,
 						editor: tlEditor,
@@ -111,7 +183,7 @@ export function CommentComposer({
 				})
 			)
 		} else {
-			list.push(commentMention({ suggestion: { char: '@', allow: () => false } }))
+			list.push(createMentionExtension({ suggestion: { char: '@', allow: () => false } }))
 		}
 		return list
 	}, [mentionsEnabled, hasCustomRow, tlEditor])
@@ -127,12 +199,30 @@ export function CommentComposer({
 			enableCoreExtensions: { textDirection: false },
 			textDirection: 'auto',
 			editorProps: {
-				attributes: { class: 'tlui-cmt-input' },
+				attributes: {
+					class: 'tlui-cmt-input',
+					'aria-label': placeholder,
+					role: 'textbox',
+					'aria-multiline': 'true',
+				},
 				// Runs before every keymap plugin, so it can distinguish Shift+Enter from Enter — an
 				// `Enter` keymap binding also fires on Shift+Enter and would otherwise swallow it.
 				handleKeyDown: (_view, event) => {
 					// Let the keymaps handle the synthetic Enter we replay for a Shift+Enter newline.
 					if (replayingEnter.current) return false
+					// Up in an empty composer hands off to the host (edit the comment above). With
+					// content, Up stays cursor movement; with the mention picker open, it navigates it.
+					if (event.key === 'ArrowUp' && !event.isComposing) {
+						if (
+							onArrowUpWhenEmptyRef.current &&
+							editorRef.current?.isEmpty &&
+							!isMentionPickerOpen()
+						) {
+							onArrowUpWhenEmptyRef.current()
+							return true
+						}
+						return false
+					}
 					if (event.key !== 'Enter' || event.isComposing) return false
 					// While the @-mention picker is open, Enter selects the highlighted member — defer.
 					if (isMentionPickerOpen()) return false
@@ -140,6 +230,9 @@ export function CommentComposer({
 					// we don't re-enter and submit) to reuse the editor's list-aware Enter handling — a new
 					// list item in a list, a new paragraph otherwise. tldraw doesn't do soft breaks.
 					if (event.shiftKey && !event.metaKey && !event.ctrlKey && !event.altKey) {
+						// An empty field has nothing to break onto — swallow the keypress so it doesn't
+						// open the comment with a stray leading blank line.
+						if (editorRef.current?.isEmpty) return true
 						replayingEnter.current = true
 						try {
 							editorRef.current?.commands.enter()
@@ -155,10 +248,13 @@ export function CommentComposer({
 			},
 			onUpdate: ({ editor }) => {
 				setIsEmpty(editor.isEmpty)
+				// Same-value state sets don't re-render, so measure here — the editor's DOM is
+				// already updated when onUpdate fires.
+				remeasureRef.current()
 				onChangeRef.current?.(editor.getJSON() as TLRichText)
 			},
 		},
-		[interactive]
+		[interactive, placeholder]
 	)
 	editorRef.current = editor
 
@@ -171,6 +267,12 @@ export function CommentComposer({
 		setIsEmpty(editor.isEmpty)
 	}, [editor, value])
 
+	// Measure once the editor's content is in the DOM, so a composer that mounts pre-filled (the
+	// edit-in-place composer) starts in the right layout.
+	useLayoutEffect(() => {
+		remeasureRef.current()
+	}, [editor, value])
+
 	// Focus on the next frame rather than via TipTap's autofocus: the composer often mounts from a
 	// canvas pointer event whose default focus handling would otherwise steal it back.
 	useEffect(() => {
@@ -179,17 +281,62 @@ export function CommentComposer({
 		return () => cancelAnimationFrame(raf)
 	}, [autoFocus, editor])
 
+	// tldraw's pass-through-wheel hook (on the floating composer's wrapper) forwards a wheel to the
+	// canvas unless ITS element is scrollable — but the scrollable element is this input, not that
+	// wrapper, so an overflowing input never scrolled: the wheel panned the canvas instead. Catch the
+	// wheel on the wrap first (a native listener here fires before the wrapper's, deeper in the tree)
+	// and stop it while the input can still scroll that way; at the scroll boundary let it through so
+	// the canvas still zooms.
+	useEffect(() => {
+		const wrap = inputWrapRef.current
+		if (!wrap) return
+		const onWheel = (e: WheelEvent) => {
+			const input = wrap.querySelector<HTMLElement>('.tlui-cmt-input')
+			if (!input || input.scrollHeight <= input.clientHeight) return
+			const atTop = input.scrollTop <= 0
+			const atBottom = input.scrollTop >= input.scrollHeight - input.clientHeight - 1
+			if ((e.deltaY < 0 && !atTop) || (e.deltaY > 0 && !atBottom)) {
+				e.stopPropagation()
+			}
+		}
+		wrap.addEventListener('wheel', onWheel)
+		return () => wrap.removeEventListener('wheel', onWheel)
+	}, [])
+
+	// The whole field behaves like the text input: clicking its empty area (the padding, or the
+	// space beside/below a short line) focuses the editor rather than only the text glyphs being
+	// clickable. The input (caret placement) and the send button keep their own click handling.
+	const focusEditorFromField = (e: ReactMouseEvent<HTMLDivElement>) => {
+		const target = e.target as HTMLElement
+		if (target.closest('.tlui-cmt-input') || target.closest('.tlui-cmt-send')) return
+		e.preventDefault()
+		editor?.commands.focus('end')
+	}
+
 	return (
 		<div className="tlui-cmt-composer">
-			{leading ?? <Avatar name={author} />}
-			<div className="tlui-cmt-composer__field">
-				<div className="tlui-cmt-composer__input-wrap">
+			{leading ?? <Avatar author={author} />}
+			<div
+				className={[
+					'tlui-cmt-composer__field',
+					interactive && expanded && 'tlui-cmt-composer__field--expanded',
+				]
+					.filter(Boolean)
+					.join(' ')}
+				onMouseDown={interactive ? focusEditorFromField : undefined}
+			>
+				<div className="tlui-cmt-composer__input-wrap" ref={inputWrapRef}>
 					<EditorContent editor={editor} />
 					{isEmpty && (
 						<div className="tlui-cmt-input__placeholder" aria-hidden="true">
 							{placeholder}
 						</div>
 					)}
+					<div
+						className="tlui-cmt-composer__mirror tlui-cmt-input"
+						ref={mirrorRef}
+						aria-hidden="true"
+					/>
 				</div>
 				{interactive && <SendButton label={sendLabel} onClick={onSubmit} disabled={disabled} />}
 			</div>

package/src/ui/comment-pin.tsx

@@ -10,16 +10,36 @@ export interface CommentPinProps {
 	open?: boolean
 }
 
+/* An inline check, not a text glyph — the '✓' character sits off-baseline and varies by font. */
+const resolvedCheck = (
+	<svg
+		viewBox="0 0 24 24"
+		width="15"
+		height="15"
+		fill="none"
+		stroke="currentColor"
+		strokeWidth="2.5"
+		strokeLinecap="round"
+		strokeLinejoin="round"
+		aria-hidden="true"
+	>
+		<path d="M4 12.5l5 5L20 6.5" />
+	</svg>
+)
+
 /** A canvas comment marker: shows its `children` (or a check when resolved). Purely
  * presentational — it reflects open/resolved state via CSS; wrap it to make it clickable.
  * @public @react */
 export function CommentPin({ children, resolved, open }: CommentPinProps) {
 	const className = [
+		// `tlui-cmt-marker` carries the resting shadow and the hover lift — the same treatment a
+		// count badge wears, so the two markers behave alike.
+		'tlui-cmt-marker',
 		'tlui-cmt-pin',
 		resolved && 'tlui-cmt-pin--resolved',
-		open && 'tlui-cmt-pin--open',
+		open && 'tlui-cmt-marker--open',
 	]
 		.filter(Boolean)
 		.join(' ')
-	return <div className={className}>{resolved ? '✓' : children}</div>
+	return <div className={className}>{resolved ? resolvedCheck : children}</div>
 }