@tldraw/commenting 0.0.0-bootstrap → 5.3.0-canary.31036673d3f8

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. */
@@ -12,11 +13,12 @@ export interface BylineProps {
 /** A comment's metadata line: author name, relative time, and an edited marker. @public @react */
 export function Byline({ author, date, edited }: BylineProps) {
 	return (
-		<div className="cmt-head">
-			<span className="cmt-author">{author}</span>
-			<span className="cmt-time">
+		<div className="tlui-cmt-head">
+			<Avatar author={author} />
+			<span className="tlui-cmt-author">{author.name}</span>
+			<span className="tlui-cmt-time">
 				{formatRelativeTime(date)}
-				{edited && <span className="cmt-edited"> · edited</span>}
+				{edited && <span className="tlui-cmt-edited"> · edited</span>}
 			</span>
 		</div>
 	)

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,18 +15,28 @@ 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 ? 'cmt-card cmt-card--you' : 'cmt-card'}>
-			<Avatar name={author} />
-			<div className="cmt-body">
-				<Byline author={author} date={date} edited={edited} />
+		<div className={you ? 'tlui-cmt-card tlui-cmt-card--you' : 'tlui-cmt-card'}>
+			<Byline author={author} date={date} edited={edited} />
+			<div className="tlui-cmt-body">
 				{body}
+				{footer}
 			</div>
-			{actions !== undefined && <div className="cmt-card__actions">{actions}</div>}
+			{actions !== undefined && <div className="tlui-cmt-card__actions">{actions}</div>}
 		</div>
 	)
 }

package/src/ui/comment-composer.tsx

@@ -1,17 +1,29 @@
-import { Extension, JSONContent } from '@tiptap/core'
+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,29 +86,75 @@ 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)
 
-	// Enter submits the comment. Shift+Enter (and Cmd/Ctrl+Enter) keep their default behavior — a
-	// new line — for the occasional multi-line comment.
-	const submitExtension = useMemo(
-		() =>
-			Extension.create({
-				name: 'commentComposerSubmit',
-				priority: 1000,
-				addKeyboardShortcuts() {
-					return {
-						Enter: () => {
-							// While the @-mention picker is open, Enter selects the highlighted member.
-							// This extension outranks the mention plugin (priority 1000), so defer to the
-							// picker here or Enter would submit before the member could be inserted.
-							if (isMentionPickerOpen()) return false
-							if (!disabledRef.current) onSubmitRef.current?.()
-							return true
-						},
-					}
-				},
-			}),
-		[]
-	)
+	// 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.
+	const editorRef = useRef<ReturnType<typeof useEditor>>(null)
+
+	// Set while we replay Enter through the keymaps for a Shift+Enter newline: `commands.enter()`
+	// re-dispatches Enter through `handleKeyDown`, and without this guard our own handler would catch
+	// that synthetic Enter and submit instead.
+	const replayingEnter = useRef(false)
+
+	// Enter and Cmd/Ctrl+Enter submit the comment; Shift+Enter inserts a new line for the occasional
+	// multi-line comment. This is handled through `editorProps.handleKeyDown` (below) rather than a
+	// keyboard-shortcut extension: ProseMirror runs `handleKeyDown` before every keymap plugin, so it
+	// can tell Shift+Enter apart from Enter — an `Enter` keymap binding also fires on Shift/Cmd+Enter
+	// and would otherwise swallow the newline.
 
 	// The suggestion plugin is built once (the editor is recreated only on `interactive`) and runs
 	// outside React, so it must read the mention callbacks through refs — like onChange/onSubmit —
@@ -100,7 +164,7 @@ export function CommentComposer({
 	const mentionsEnabled = !!getMentionSuggestions
 	const hasCustomRow = !!renderMentionSuggestion
 	const extensions = useMemo(() => {
-		const list = [...commentTipTapExtensions, submitExtension]
+		const list = [...commentTipTapExtensions]
 		// Always register the mention node so an existing body that contains a mention keeps it on
 		// edit (an unregistered node would be stripped by ProseMirror when the content loads). The `@`
 		// picker itself only turns on when the host provides a resolver; otherwise the node is present
@@ -111,7 +175,7 @@ export function CommentComposer({
 				? (member: MentionMember) => renderMentionSuggestionRef.current?.(member)
 				: undefined
 			list.push(
-				commentMention({
+				createMentionExtension({
 					suggestion: createMentionSuggestion(resolveSuggestions, {
 						renderMember: renderRow,
 						editor: tlEditor,
@@ -119,10 +183,10 @@ export function CommentComposer({
 				})
 			)
 		} else {
-			list.push(commentMention({ suggestion: { char: '@', allow: () => false } }))
+			list.push(createMentionExtension({ suggestion: { char: '@', allow: () => false } }))
 		}
 		return list
-	}, [submitExtension, mentionsEnabled, hasCustomRow, tlEditor])
+	}, [mentionsEnabled, hasCustomRow, tlEditor])
 
 	const editor = useEditor(
 		{
@@ -134,14 +198,65 @@ export function CommentComposer({
 			// mirrors RichTextArea's setup.
 			enableCoreExtensions: { textDirection: false },
 			textDirection: 'auto',
-			editorProps: { attributes: { class: 'cmt-input' } },
+			editorProps: {
+				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
+					// Shift+Enter inserts a new line. Replay a plain Enter through the keymaps (guarded so
+					// 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()
+						} finally {
+							replayingEnter.current = false
+						}
+						return true
+					}
+					// Enter, Cmd+Enter, and Ctrl+Enter submit.
+					if (!disabledRef.current) onSubmitRef.current?.()
+					return true
+				},
+			},
 			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
 
 	// Sync controlled resets (e.g. the parent clearing to EMPTY_COMMENT after posting) into the
 	// editor without echoing back the value the editor itself just emitted.
@@ -152,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(() => {
@@ -160,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="cmt-composer">
-			{leading ?? <Avatar name={author} />}
-			<div className="cmt-composer__field">
-				<div className="cmt-composer__input-wrap">
+		<div className="tlui-cmt-composer">
+			{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="cmt-input__placeholder" aria-hidden="true">
+						<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,12 +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 = ['cmt-pin', resolved && 'cmt-pin--resolved', open && 'cmt-pin--open']
+	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-marker--open',
+	]
 		.filter(Boolean)
 		.join(' ')
-	return <div className={className}>{resolved ? '✓' : children}</div>
+	return <div className={className}>{resolved ? resolvedCheck : children}</div>
 }