@tldraw/commenting 0.0.0-bootstrap → 5.3.0-internal.c5c7f1d817d0

package/src/canvas/canvas.css

@@ -1,69 +1,69 @@
 /* The comments layer is portaled into the editor container. Pins live in the canvas-in-front layer
    (beneath the UI panels at z-index 300), so the toolbar and style panel draw over them; the open
-   thread's popover portals up to the menus layer separately (`.cmt-canvas-popover`) so it isn't
+   thread's popover portals up to the menus layer separately (`.tlui-cmt-canvas-popover`) so it isn't
    clipped. Click-through except on its own children. */
-.cmt-canvas-layer {
+.tlui-cmt-canvas-layer {
 	position: absolute;
 	inset: 0;
 	z-index: var(--tl-layer-canvas-in-front);
 	pointer-events: none;
 }
 
-.cmt-canvas-pin,
-.cmt-canvas-cluster,
-.cmt-canvas-composer {
+.tlui-cmt-canvas-pin,
+.tlui-cmt-canvas-cluster,
+.tlui-cmt-canvas-composer {
 	position: absolute;
 }
 
-.cmt-canvas-pin,
-.cmt-canvas-composer {
+.tlui-cmt-canvas-pin,
+.tlui-cmt-canvas-composer {
 	pointer-events: auto;
 }
 
 /* Badges are clickable (zoom to the cluster's first split). */
-.cmt-canvas-cluster {
+.tlui-cmt-canvas-cluster {
 	transform: translate(-50%, -50%);
 	pointer-events: auto;
 	cursor: pointer;
 }
 
-.cmt-cluster-fade {
+.tlui-cmt-cluster-fade {
 	opacity: 1;
 	transition: opacity 150ms ease;
 }
 
-.cmt-cluster-fade--entering {
+.tlui-cmt-cluster-fade--entering {
 	opacity: 0;
 }
 
-.cmt-cluster-fade--present {
+.tlui-cmt-cluster-fade--present {
 	opacity: 1;
 }
 
-.cmt-cluster-fade--exiting {
+.tlui-cmt-cluster-fade--exiting {
 	opacity: 0;
 }
 
-.cmt-cluster-fade--entering *,
-.cmt-cluster-fade--exiting * {
+.tlui-cmt-cluster-fade--entering *,
+.tlui-cmt-cluster-fade--exiting * {
 	pointer-events: none !important;
 }
 
 @media (prefers-reduced-motion: reduce) {
-	.cmt-cluster-fade {
+	.tlui-cmt-cluster-fade {
 		transition: none;
 	}
 }
 
 /* The open thread (its pin + popover) sits above the other pins, so nearby markers don't
    overlap its popover — they tuck behind it. */
-.cmt-canvas-pin--open {
+.tlui-cmt-canvas-pin--open {
 	z-index: 1;
 }
 
 /* A region anchor's area: a dashed box under the pins, non-interactive so canvas events pass
    through. Drawn for the live drag draft and for a region thread while hovered or open. */
-.cmt-canvas-region {
+.tlui-cmt-canvas-region {
 	position: absolute;
 	pointer-events: none;
 	border: 2px dashed var(--tl-color-selected);
@@ -73,13 +73,13 @@
 
 /* A movable region body (the 'body'/'both' move modes): draggable to translate the whole region.
    Interactive, so it captures the interior while shown — the tradeoff of dragging the body. */
-.cmt-canvas-region--movable {
+.tlui-cmt-canvas-region--movable {
 	pointer-events: auto;
 	cursor: move;
 }
 
 /* Corner resize handles on a region box (three corners; the pin corner is the move handle). */
-.cmt-canvas-region-handle {
+.tlui-cmt-canvas-region-handle {
 	position: absolute;
 	width: 9px;
 	height: 9px;
@@ -92,18 +92,18 @@
 }
 
 /* Centre the pin marker on its anchor point. */
-.cmt-canvas-pin__marker {
+.tlui-cmt-canvas-pin__marker {
 	width: max-content;
 	transform: translate(-50%, -50%);
 	cursor: grab;
 	touch-action: none;
 }
-.cmt-canvas-pin__marker:active {
+.tlui-cmt-canvas-pin__marker:active {
 	cursor: grabbing;
 }
 
 /* The open thread's popover — portaled to the menus layer (above the UI), positioned at the pin. */
-.cmt-canvas-popover {
+.tlui-cmt-canvas-popover {
 	position: absolute;
 	z-index: var(--tl-layer-menus);
 	pointer-events: auto;
@@ -112,7 +112,7 @@
 /* The placement composer — a distinct floating view (portaled to the menus layer, below the click
    point): a pencil "draft" avatar beside a pill field that is itself the surface (no wrapping
    panel). Scoped here so the in-thread reply composer keeps its own squarer look. */
-.cmt-canvas-composer {
+.tlui-cmt-canvas-composer {
 	position: absolute;
 	z-index: var(--tl-layer-menus);
 	pointer-events: auto;
@@ -121,7 +121,7 @@
 	   placement composer a definite width or it collapses to nothing. */
 	width: 280px;
 }
-.cmt-canvas-composer .cmt-composer__field {
+.tlui-cmt-canvas-composer .tlui-cmt-composer__field {
 	background: var(--tl-color-panel);
 	border-color: transparent;
 	border-radius: var(--tl-radius-4);
@@ -132,7 +132,7 @@
    the popover layer, so an open thread still draws over it. Sits under the top-right share panel
    (top offset clears its ~48px height) and sizes to its content, scrolling past max-height rather
    than stretching the full canvas height. */
-.cmt-canvas-sidebar {
+.tlui-cmt-canvas-sidebar {
 	position: absolute;
 	top: 56px;
 	right: 8px;

package/src/canvas/comment-body.tsx

@@ -17,5 +17,5 @@ export interface CommentBodyProps {
  */
 export function CommentBody({ richText, resolveName }: CommentBodyProps) {
 	const html = useMemo(() => renderCommentHtml(richText, resolveName), [richText, resolveName])
-	return <div className="cmt-text" dangerouslySetInnerHTML={{ __html: html }} />
+	return <div className="tlui-cmt-text" dangerouslySetInnerHTML={{ __html: html }} />
 }

package/src/canvas/comment-render.test.ts

@@ -38,7 +38,7 @@ describe('renderCommentHtml', () => {
 	it('renders a mention as a pill and resolves its id to the current name', () => {
 		const body = doc(para(text('hey '), mention('u1', 'Ada')))
 		const html = renderCommentHtml(body, (id) => (id === 'u1' ? 'Ada Lovelace' : '?'))
-		expect(html).toContain('cmt-mention')
+		expect(html).toContain('tlui-cmt-mention')
 		// the live name from the resolver, not the label stored at insert time
 		expect(html).toContain('@Ada Lovelace')
 		expect(html).not.toContain('@Ada<')

package/src/canvas/comments-filter-menu.tsx

@@ -38,7 +38,7 @@ export function CommentsFilterMenu({
 			<TldrawUiDropdownMenuTrigger>
 				<button
 					type="button"
-					className="cmt-header-btn"
+					className="tlui-cmt-header-btn"
 					title={msg('comments.filter')}
 					aria-label={msg('comments.filter')}
 				>

package/src/canvas/comments-overflow-menu.tsx

@@ -26,7 +26,7 @@ export function CommentsOverflowMenu() {
 			<TldrawUiDropdownMenuTrigger>
 				<button
 					type="button"
-					className="cmt-header-btn"
+					className="tlui-cmt-header-btn"
 					title={msg('comments.more-options')}
 					aria-label={msg('comments.more-options')}
 				>
@@ -38,11 +38,11 @@ export function CommentsOverflowMenu() {
 					<TldrawUiDropdownMenuItem>
 						<button
 							type="button"
-							className="cmt-menu-item"
+							className="tlui-cmt-menu-item"
 							onClick={() => toggleCommentsHidden(editor)}
 						>
 							<span>{hidden ? msg('comments.show') : msg('comments.hide')}</span>
-							<span className="cmt-menu-item__shortcut">{HIDE_SHORTCUT}</span>
+							<span className="tlui-cmt-menu-item__shortcut">{HIDE_SHORTCUT}</span>
 						</button>
 					</TldrawUiDropdownMenuItem>
 				</TldrawUiDropdownMenuGroup>

package/src/canvas/comments-overlay.tsx

@@ -186,21 +186,21 @@ function CanvasCommentsLayer(props: CanvasCommentsProps) {
 	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 +213,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 +283,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 +301,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 +417,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()
@@ -414,7 +447,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 +481,7 @@ function CanvasCommentsLayer(props: CanvasCommentsProps) {
 							regionOptions={regionOptions}
 						/>
 					))}
-					{movedThreads.map((thread) => (
+					{heldThreads.map((thread) => (
 						<ThreadPin
 							key={thread.id}
 							editor={editor}
@@ -597,7 +630,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 +660,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
@@ -733,7 +760,7 @@ const ClusterBadge = memo(function ClusterBadge({
 
 	return (
 		<div
-			className="cmt-canvas-cluster"
+			className="tlui-cmt-canvas-cluster"
 			style={{ left: point.x, top: point.y }}
 			onPointerDown={stop}
 			onClick={(e) => {
@@ -772,7 +799,7 @@ function ThreadPopover({
 	usePassThroughWheelEvents(ref)
 	usePassThroughMouseOverEvents(ref)
 	return createPortal(
-		<div ref={ref} className="cmt-canvas-popover" style={style} onPointerDown={stop}>
+		<div ref={ref} className="tlui-cmt-canvas-popover" style={style} onPointerDown={stop}>
 			{children}
 		</div>,
 		container
@@ -831,7 +858,11 @@ function RegionBox({
 	}
 	return (
 		<div
-			className={movable ? 'cmt-canvas-region cmt-canvas-region--movable' : 'cmt-canvas-region'}
+			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 +970,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)}
@@ -1032,15 +1063,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)
 		}
@@ -1128,7 +1161,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)
@@ -1157,7 +1190,7 @@ const ThreadPin = memo(function ThreadPin({
 				actions={
 					comment.authorId === currentUserId ? (
 						<button
-							className="cmt-thread__action"
+							className="tlui-cmt-thread__action"
 							title={msg('comments.edit')}
 							onClick={() => startEdit(comment)}
 						>
@@ -1173,7 +1206,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}
 				>
@@ -1186,7 +1219,7 @@ const ThreadPin = memo(function ThreadPin({
 			)}
 			{currentUserId && (
 				<button
-					className="cmt-thread__action"
+					className="tlui-cmt-thread__action"
 					title={msg('comments.delete')}
 					onClick={deleteThread}
 				>
@@ -1194,7 +1227,7 @@ const ThreadPin = memo(function ThreadPin({
 				</button>
 			)}
 			<button
-				className="cmt-thread__action"
+				className="tlui-cmt-thread__action"
 				title={msg('comments.dismiss')}
 				onClick={() => openThreadId.set(editor, null)}
 			>
@@ -1313,12 +1346,12 @@ const ThreadPin = memo(function ThreadPin({
 				/>
 			)}
 			<div
-				className={open ? 'cmt-canvas-pin cmt-canvas-pin--open' : 'cmt-canvas-pin'}
+				className={open ? 'tlui-cmt-canvas-pin tlui-cmt-canvas-pin--open' : 'tlui-cmt-canvas-pin'}
 				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}
@@ -1402,7 +1435,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)
@@ -1434,7 +1467,7 @@ function PendingComposer({
 	return createPortal(
 		<div
 			ref={ref}
-			className="cmt-canvas-composer"
+			className="tlui-cmt-canvas-composer"
 			style={{ left: point.x, top: point.y }}
 			onPointerDown={stop}
 			onKeyDown={(e) => {

package/src/canvas/comments-sidebar.tsx

@@ -149,7 +149,7 @@ export function CanvasCommentsSidebar(props: CanvasCommentsSidebarProps) {
 				items={items}
 				header={header ?? msg('comments.title')}
 				headerAction={
-					<div className="cmt-list__header-actions">
+					<div className="tlui-cmt-list__header-actions">
 						<CommentsFilterMenu
 							canFilterByAuthor={currentUserId !== undefined}
 							canFilterByUnread={isCommentUnread !== undefined}
@@ -176,7 +176,7 @@ function SidebarPanel({ container, children }: { container: HTMLElement; childre
 	const ref = useRef<HTMLDivElement>(null)
 	usePassThroughMouseOverEvents(ref)
 	return createPortal(
-		<div ref={ref} className="cmt-canvas-sidebar">
+		<div ref={ref} className="tlui-cmt-canvas-sidebar">
 			{children}
 		</div>,
 		container