@tldraw/commenting 5.3.0-next.2fa9c61a8de6 → 5.3.0-next.7654e7ac2a02

package/src/canvas/thread-preview.tsx

@@ -1,8 +1,8 @@
 import { useEffect, useMemo, useRef, type CSSProperties } from 'react'
-import { createPortal } from 'react-dom'
 import {
 	Editor,
 	EditorAtom,
+	EditorPortal,
 	TLComment,
 	TLCommentThread,
 	usePassThroughWheelEvents,
@@ -19,26 +19,21 @@ import { POPOVER_OFFSET, toCardProps, useResolveName } from './thread-view'
 
 /**
  * Hover previews for every canvas marker — a single pin, a coincident stack, or a cluster badge.
- * Hovering shows the thread(s) behind the marker as cards; the marker's own click keeps whatever
- * it already did (open the thread, open the stack list, zoom to the cluster's split).
+ * Hovering shows the thread(s) behind the marker as cards; the marker's own click is unchanged.
  *
- * The panel is live, not a passive tooltip: the pointer can travel right into it and hover each
- * card, and clicking one opens that thread — the same affordance the stack list gives its cards.
- * Two pieces make that work. The close delay survives the trip across the gap, and the panel
- * carries an invisible bridge over that gap (see `.tlui-cmt-canvas-preview::before`) so the
- * journey never crosses dead space and retracts the panel mid-move.
+ * The panel is live, not a passive tooltip: the pointer can travel into it and click a card to open
+ * that thread. Two pieces make that work — the close delay survives the trip across the gap, and
+ * the panel carries an invisible bridge over it (see `.tlui-cmt-canvas-preview::before`).
  *
- * Opening a thread from a card needs nothing more than setting `openThreadId`, including for a
- * thread currently folded inside a cluster badge: `collectClusterLeaves` skips the open thread, so
- * it drops out of its badge and renders its own pin and popover.
+ * Opening a thread from a card needs nothing more than setting `openThreadId`, even for one folded
+ * inside a badge: `collectClusterLeaves` skips the open thread, so it drops out and renders itself.
  */
 
 /** How long the pointer must rest on a marker before its preview appears. */
 const PREVIEW_OPEN_DELAY_MS = 180
 /**
- * Grace period after the pointer leaves the marker *or* the panel. Long enough to cross the gap
- * between them by hand — the bridge element covers that gap geometrically, and this covers the
- * moment of transit between the two elements' enter/leave events.
+ * Grace period after the pointer leaves the marker *or* the panel — long enough to cross the gap
+ * between them, which the bridge element covers geometrically.
  */
 const PREVIEW_CLOSE_DELAY_MS = 220
 /** Cards shown before the panel falls back to a "+N more" line. */
@@ -53,9 +48,8 @@ export interface ThreadPreviewCard {
 /**
  * The cards a marker's preview will show, and how many threads it will summarise as "+N more".
  *
- * A thread can exist before its opening comment does — a collaborator's, mid-sync — and has nothing
- * to preview until it arrives. Those are dropped here rather than rendered as blank cards, and they
- * don't count toward the overflow tally either, so "+2 more" always means two readable threads.
+ * A thread can exist before its opening comment does — a collaborator's, mid-sync. Those are
+ * dropped rather than rendered blank, and don't count toward the overflow tally.
  */
 export function selectPreviewCards(
 	threads: readonly TLCommentThread[],
@@ -81,17 +75,15 @@ export type ThreadPreviewVariant = 'thread' | 'list'
 
 /**
  * Which marker's preview is showing, or null. One atom for the whole layer, so previews are
- * mutually exclusive by construction: the close delay means an outgoing marker's timer can still
- * be pending when the next marker opens, and per-component state would briefly show both.
+ * mutually exclusive: the close delay can leave an outgoing marker's timer pending when the next
+ * opens, and per-component state would briefly show both.
  */
 const hoveredMarkerId = new EditorAtom<string | null>('commentHoveredMarkerId', () => null)
 
 /**
  * Hover state for one marker. Returns whether its preview should render, plus the pointer handlers
- * to spread onto the marker element.
- *
- * `markerId` must be stable and unique per marker across the layer — prefix by kind, since a stack
- * is keyed by its oldest member's thread id and would otherwise collide with that thread's own pin.
+ * to spread onto the marker element. `markerId` must be stable and unique per marker across the
+ * layer — prefix by kind, or a stack collides with its oldest member's own pin.
  */
 export function useMarkerPreview(editor: Editor, markerId: string) {
 	const openTimer = useRef(0)
@@ -154,14 +146,12 @@ export function useMarkerPreview(editor: Editor, markerId: string) {
 }
 
 /**
- * The hover panel: each thread's opening comment as a read-only card, capped with a "+N more"
- * line. Mounted only while hovering, so the store subscription it needs to find those comments
- * costs nothing at rest.
+ * The hover panel: each thread's opening comment as a read-only card, capped with a "+N more" line.
+ * Mounted only while hovering, so its store subscription costs nothing at rest.
  */
 export function ThreadPreview({
 	editor,
 	threads,
-	container,
 	variant,
 	point,
 	onSelectThread,
@@ -172,7 +162,6 @@ export function ThreadPreview({
 	editor: Editor
 	/** The marker's threads, in the order they should read (oldest first). */
 	threads: readonly TLCommentThread[]
-	container: HTMLElement
 	/** What the marker's click opens, which this panel imitates. */
 	variant: ThreadPreviewVariant
 	/** The marker's anchor point in viewport space — the same origin its popover is placed from. */
@@ -231,68 +220,69 @@ export function ThreadPreview({
 		.filter(Boolean)
 		.join(' ')
 
-	return createPortal(
-		// The root is the hover region — it carries the bridge back to the marker — while the panel
-		// inside it is the visible surface. Keeping them apart is what lets the surface light up on
-		// its own hover without the bridge (which reaches back over the marker) lighting it up too.
-		<div
-			ref={ref}
-			className={`tlui-cmt-canvas-preview tlui-cmt-canvas-preview--${variant}`}
-			style={
-				{
-					left: point.x + offset.x,
-					top: point.y + offset.y,
-					// The stylesheet sizes the hover bridge against this, so the gap it spans follows
-					// the offset rather than being restated as a second magic number.
-					'--tlui-cmt-preview-offset': `${offset.x}px`,
-				} as CSSProperties
-			}
-			onPointerEnter={onPointerEnter}
-			onPointerLeave={onPointerLeave}
-			// The panel sits over the canvas; a press on it is not a canvas press.
-			onPointerDown={(e) => e.stopPropagation()}
-		>
-			<div className={panelClass}>
-				{cards.map(({ thread, first }) => {
-					// The preview shows only the opening comment, so its reply count is what tells the
-					// reader the thread continues past what they see.
-					const replies = replyCountLabel(msg, (countByThread.get(thread.id) ?? 1) - 1)
-					return (
-						<div
-							key={thread.id}
-							className={
-								isThread
-									? undefined
-									: onSelectThread
-										? 'tlui-cmt-preview-card tlui-cmt-preview-card--selectable'
-										: 'tlui-cmt-preview-card'
-							}
-							onClick={
-								onSelectThread
-									? (e) => {
-											e.stopPropagation()
-											onSelectThread(thread)
-										}
-									: undefined
-							}
-						>
-							<CommentCard
-								{...toCardProps(first, props, options.components, resolveName)}
-								footer={
-									replies ? <span className="tlui-cmt-card__replies">{replies}</span> : undefined
+	return (
+		<EditorPortal>
+			{/* The root is the hover region — it carries the bridge back to the marker — while the panel
+		    inside it is the visible surface. Keeping them apart is what lets the surface light up on
+		    its own hover without the bridge (which reaches back over the marker) lighting it up too. */}
+			<div
+				ref={ref}
+				className={`tlui-cmt-canvas-preview tlui-cmt-canvas-preview--${variant}`}
+				style={
+					{
+						left: point.x + offset.x,
+						top: point.y + offset.y,
+						// The stylesheet sizes the hover bridge against this, so the gap it spans follows
+						// the offset rather than being restated as a second magic number.
+						'--tlui-cmt-preview-offset': `${offset.x}px`,
+					} as CSSProperties
+				}
+				onPointerEnter={onPointerEnter}
+				onPointerLeave={onPointerLeave}
+				// The panel sits over the canvas; a press on it is not a canvas press.
+				onPointerDown={(e) => e.stopPropagation()}
+			>
+				<div className={panelClass}>
+					{cards.map(({ thread, first }) => {
+						// The preview shows only the opening comment, so its reply count is what tells the
+						// reader the thread continues past what they see.
+						const replies = replyCountLabel(msg, (countByThread.get(thread.id) ?? 1) - 1)
+						return (
+							<div
+								key={thread.id}
+								className={
+									isThread
+										? undefined
+										: onSelectThread
+											? 'tlui-cmt-preview-card tlui-cmt-preview-card--selectable'
+											: 'tlui-cmt-preview-card'
+								}
+								onClick={
+									onSelectThread
+										? (e) => {
+												e.stopPropagation()
+												onSelectThread(thread)
+											}
+										: undefined
 								}
-							/>
+							>
+								<CommentCard
+									{...toCardProps(first, props, options.components, resolveName)}
+									footer={
+										replies ? <span className="tlui-cmt-card__replies">{replies}</span> : undefined
+									}
+								/>
+							</div>
+						)
+					})}
+					{overflow > 0 && (
+						<div className="tlui-cmt-preview-more">
+							{msg('comments.preview-more').replace('{count}', String(overflow))}
 						</div>
-					)
-				})}
-				{overflow > 0 && (
-					<div className="tlui-cmt-preview-more">
-						{msg('comments.preview-more').replace('{count}', String(overflow))}
-					</div>
-				)}
+					)}
+				</div>
 			</div>
-		</div>,
-		container
+		</EditorPortal>
 	)
 }
 

package/src/canvas/thread-stack.tsx

@@ -2,7 +2,6 @@ import { type MouseEvent as ReactMouseEvent, memo, useEffect, useRef } from 'rea
 import {
 	Editor,
 	TLCommentThread,
-	useContainer,
 	usePassThroughWheelEvents,
 	useTranslation,
 	useValue,
@@ -16,7 +15,7 @@ import { useCommentingOptions } from './options'
 import { pinStackKey } from './pin-stacking'
 import { openStackId, openThreadId } from './state'
 import { ThreadPreview, useMarkerPreview } from './thread-preview'
-import { anchorPagePoint } from './thread-state'
+import { anchorPagePoint, impreciseShapePinInset } from './thread-state'
 import {
 	POPOVER_OFFSET,
 	ThreadPopover,
@@ -27,9 +26,8 @@ import {
 
 /**
  * The pin for threads whose anchors resolve to the same page point — pins zooming can never
- * separate, so instead of stacked markers they share one count badge. Clicking it opens a
- * popover listing each thread as a card; clicking a card expands that thread in place (via the
- * single open-thread state, so expanding one collapses another).
+ * separate, so they share one count badge. Clicking it lists each thread as a card; clicking a card
+ * expands that thread in place, via the single open-thread state.
  */
 export const ThreadStackPin = memo(function ThreadStackPin({
 	editor,
@@ -40,7 +38,6 @@ export const ThreadStackPin = memo(function ThreadStackPin({
 	/** The stack's threads, oldest first. All resolve to the same anchor point. */
 	threads: readonly TLCommentThread[]
 }) {
-	const container = useContainer()
 	const msg = useTranslation()
 	const badgeRef = useRef<HTMLButtonElement>(null)
 	// The badge takes pointer events (to open on click), so wheel input over it would otherwise be
@@ -49,12 +46,9 @@ export const ThreadStackPin = memo(function ThreadStackPin({
 	// Hovering the badge previews its threads; clicking still opens them as the interactive list.
 	// The preview is what makes the badge legible before you commit to opening it.
 	const { previewShown, previewHandlers } = useMarkerPreview(editor, `stack:${threads[0].id}`)
-	// The list stays open while a member thread is expanded, and on its own after the member
-	// collapses — so Escape steps back: expanded thread → card list → closed. Held in editor
-	// state (not component state) because this pin remounts as its owning render path changes.
-	// Keyed by the coincident page point, not a member id, so the open state survives losing a
-	// member (including the oldest): the survivors keep the same key. Falls back to a thread id
-	// only when the anchor can't resolve (off page), where the list isn't shown anyway.
+	// The list stays open while a member thread is expanded, so Escape steps back: expanded thread ->
+	// card list -> closed. Held in editor state because this pin remounts as its owning render path
+	// changes, and keyed by the coincident page point so the open state survives losing a member.
 	const stackId = useValue(
 		'stack id',
 		() => {
@@ -76,13 +70,14 @@ export const ThreadStackPin = memo(function ThreadStackPin({
 		() => {
 			const first = threads[0]
 			if (first.pageId !== editor.getCurrentPageId()) return null
-			// The badge hangs off its anchor point bottom-left (transform: translate(0, -100%)),
-			// like a pin and like the cluster badge — but it sits at the raw page point with no pin
-			// inset. The inset only tucks an imprecise single pin inside its shape; applying it here
-			// would offset the badge from where the cluster badge sits (cluster centroids average
-			// raw anchor points) and make it hop as pins flip between them.
+			// The badge hangs off its anchor point bottom-left like a pin, and applies the same imprecise-shape
+			// inset the pins it stands in for would (see ThreadPin) — otherwise the marker would snap from tucked
+			// inside the shape to the raw corner the moment a second comment turns a pin into a stack.
 			const pagePoint = anchorPagePoint(editor, first.anchor)
-			return pagePoint ? editor.pageToViewport(pagePoint) : null
+			if (!pagePoint) return null
+			const viewportPoint = editor.pageToViewport(pagePoint)
+			const inset = impreciseShapePinInset(editor, first.anchor)
+			return inset ? { x: viewportPoint.x + inset.x, y: viewportPoint.y + inset.y } : viewportPoint
 		},
 		[editor, threads]
 	)
@@ -134,12 +129,9 @@ export const ThreadStackPin = memo(function ThreadStackPin({
 		}
 	}
 
-	// The expanded thread gains a "Comment" header that pushes its first comment down from where the
-	// hover preview showed it. When that thread is the list's first, lift the whole list by the
-	// header block so its "You" holds position across hover -> open: the single thread's
-	// THREAD_HEADER_BLOCK (36) plus the 8px margin above the expanded entry, less the 2px top the
-	// preview card sits its "You" down by. Only the first entry — lifting the list can't also hold a
-	// lower thread's neighbours in place.
+	// The expanded thread gains a header that pushes its first comment down from where the hover preview
+	// showed it. When that thread is the list's first, lift the whole list so its "You" holds position
+	// across hover -> open. Only the first entry — lifting can't also hold a lower thread's neighbours.
 	const liftForHeader = threads[0]?.id === openId ? 42 : 0
 
 	return (
@@ -167,7 +159,6 @@ export const ThreadStackPin = memo(function ThreadStackPin({
 				<ThreadPreview
 					editor={editor}
 					threads={threads}
-					container={container}
 					// Lines the preview up with the stack list itself, so opening it leaves the cards
 					// exactly where the preview had them.
 					variant="list"
@@ -185,10 +176,9 @@ export const ThreadStackPin = memo(function ThreadStackPin({
 			)}
 			{open && (
 				<ThreadPopover
-					container={container}
-					style={{
-						left: point.x + POPOVER_OFFSET.list.x,
-						top: point.y + POPOVER_OFFSET.list.y - liftForHeader,
+					base={{
+						x: point.x + POPOVER_OFFSET.list.x,
+						y: point.y + POPOVER_OFFSET.list.y - liftForHeader,
 					}}
 				>
 					<div className="tlui-cmt-stack-list">

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

@@ -18,6 +18,8 @@ import {
 	commentTargetShapeAt,
 	impreciseShapePinInset,
 	IMPRECISE_PIN_INSET_PX,
+	isBoxInInflatedViewport,
+	isInInflatedViewport,
 	shapeAnchorAt,
 } from './thread-state'
 
@@ -207,3 +209,52 @@ describe('commentCenterScreenOffset', () => {
 		expect(commentCenterScreenOffset(editor)).toBe(0)
 	})
 })
+
+describe('isInInflatedViewport', () => {
+	// The viewport is 1000x1000 (see beforeEach) and the margin is 120 screen px.
+	it('accepts a point on screen', () => {
+		expect(isInInflatedViewport(editor, { x: 500, y: 500 })).toBe(true)
+	})
+
+	it('accepts a point just off screen, so a pan finds it already mounted', () => {
+		expect(isInInflatedViewport(editor, { x: -119, y: 500 })).toBe(true)
+		expect(isInInflatedViewport(editor, { x: 1119, y: 500 })).toBe(true)
+		expect(isInInflatedViewport(editor, { x: 500, y: -119 })).toBe(true)
+		expect(isInInflatedViewport(editor, { x: 500, y: 1119 })).toBe(true)
+	})
+
+	it('rejects a point past the margin on any side', () => {
+		expect(isInInflatedViewport(editor, { x: -121, y: 500 })).toBe(false)
+		expect(isInInflatedViewport(editor, { x: 1121, y: 500 })).toBe(false)
+		expect(isInInflatedViewport(editor, { x: 500, y: -121 })).toBe(false)
+		expect(isInInflatedViewport(editor, { x: 500, y: 1121 })).toBe(false)
+	})
+})
+
+describe('isBoxInInflatedViewport', () => {
+	it('accepts a box wholly on screen', () => {
+		expect(isBoxInInflatedViewport(editor, { x: 100, y: 100, w: 200, h: 200 })).toBe(true)
+	})
+
+	it('accepts a box straddling the edge, whose pin corner alone would be culled', () => {
+		// This is the case the point test gets wrong: the box's visible edge is on screen while
+		// its far corner — where a region thread's pin can sit — is thousands of px away.
+		expect(isBoxInInflatedViewport(editor, { x: -5000, y: -5000, w: 5100, h: 5100 })).toBe(true)
+	})
+
+	it('accepts a box larger than the viewport on every side', () => {
+		expect(isBoxInInflatedViewport(editor, { x: -5000, y: -5000, w: 10000, h: 10000 })).toBe(true)
+	})
+
+	it('rejects a box wholly past the margin', () => {
+		expect(isBoxInInflatedViewport(editor, { x: 1200, y: 100, w: 100, h: 100 })).toBe(false)
+		expect(isBoxInInflatedViewport(editor, { x: 100, y: -400, w: 100, h: 100 })).toBe(false)
+	})
+
+	it('follows the camera rather than page coordinates', () => {
+		const box = { x: 2000, y: 0, w: 100, h: 100 }
+		expect(isBoxInInflatedViewport(editor, box)).toBe(false)
+		editor.setCamera({ x: -2000, y: 0, z: 1 })
+		expect(isBoxInInflatedViewport(editor, box)).toBe(true)
+	})
+})

package/src/canvas/thread-state.ts

@@ -17,6 +17,47 @@ import { POPOVER_OFFSET } from './thread-view'
  *  most of the marker sits within the shape, with a small overhang past the corner. */
 export const IMPRECISE_PIN_INSET_PX = 20
 
+/** Screen-pixel margin by which the viewport is inflated when culling canvas markers (thread pins
+ *  and cluster badges), so a marker just off-screen is already mounted when a pan brings it in. */
+const MARKER_CULL_MARGIN_PX = 120
+
+/**
+ * Whether a viewport-space point sits within the viewport inflated by
+ * {@link MARKER_CULL_MARGIN_PX}. The cull test for screen-fixed markers: off-screen markers
+ * return null from their position signal and unmount instead of tracking every camera frame.
+ * @internal
+ */
+export function isInInflatedViewport(editor: Editor, point: VecLike): boolean {
+	const viewport = editor.getViewportScreenBounds()
+	const margin = MARKER_CULL_MARGIN_PX
+	return (
+		point.x >= -margin &&
+		point.y >= -margin &&
+		point.x <= viewport.w + margin &&
+		point.y <= viewport.h + margin
+	)
+}
+
+/**
+ * Whether any part of a page-space box overlaps the viewport inflated by
+ * {@link MARKER_CULL_MARGIN_PX}. The cull test for region-anchored threads, whose dashed box can
+ * be on screen while the pin corner itself is not.
+ * @internal
+ */
+export function isBoxInInflatedViewport(editor: Editor, box: BoxModel): boolean {
+	const viewport = editor.getViewportScreenBounds()
+	const margin = MARKER_CULL_MARGIN_PX
+	// Zoom is positive, so the page box's corners keep their order through the transform.
+	const min = editor.pageToViewport({ x: box.x, y: box.y })
+	const max = editor.pageToViewport({ x: box.x + box.w, y: box.y + box.h })
+	return (
+		max.x >= -margin &&
+		max.y >= -margin &&
+		min.x <= viewport.w + margin &&
+		min.y <= viewport.h + margin
+	)
+}
+
 /** 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. */
@@ -61,13 +102,11 @@ export function regionPinPoint(region: BoxModel, corner: VecLike = REGION_PIN_CO
 }
 
 /**
- * Where a thread's pin sits on the page, for each anchor kind. Null hides the pin. For imprecise
- * shape anchors the pin uses the editor's {@link CommentingOptions.impreciseShapeAnchor} (a
- * normalized 0–1 spot, top-right by default) rather than the stored `x`/`y`.
+ * Where a thread's pin sits on the page, for each anchor kind. Null hides the pin. Imprecise shape
+ * anchors use {@link CommentingOptions.impreciseShapeAnchor} rather than the stored `x`/`y`.
  *
- * A shape anchor's `x`/`y` are normalized within the shape's own bounds and resolved through the
- * shape's page transform, so the pin rides every part of that transform — rotating the shape
- * carries the pin around with it instead of leaving it behind in the bounding box.
+ * A shape anchor's `x`/`y` are normalized within the shape's bounds and resolved through its page
+ * transform, so the pin rides rotation instead of being left behind in the bounding box.
  * @public
  */
 export function anchorPagePoint(
@@ -97,15 +136,12 @@ export function anchorPagePoint(
 /**
  * The shape a comment placed at a page point should anchor to, or undefined for empty canvas.
  *
- * Uses the editor's hit-test margin, the same slack select and hover use. Without it, shapes whose
- * geometry is an open path — arrows, lines, draw strokes — are unhittable in practice: their
- * geometry reports a positive distance for every point off the stroke, so a zero margin only
- * matches a pixel-perfect click right on the line.
+ * Uses the editor's hit-test margin, the same slack select and hover use — without it, open-path
+ * shapes (arrows, lines, draw strokes) are unhittable in practice.
  *
- * `hitFrameInside` lets a click inside a frame's body anchor to the frame — without it a frame is
- * hit only on its edge/label (the select-tool convention), so the frame's interior would fall
- * through to a bare point. A child shape under the pointer still wins (children sort above the
- * frame), so only a frame's empty interior anchors the frame.
+ * `hitFrameInside` lets a click inside a frame's body anchor to the frame, which it otherwise
+ * wouldn't (the select-tool convention hits only the edge/label). A child shape under the pointer
+ * still wins, so only a frame's empty interior anchors the frame.
  *
  * @internal
  */
@@ -119,11 +155,9 @@ export function commentTargetShapeAt(editor: Editor, page: VecLike): TLShape | u
 
 /**
  * A shape anchor for a page point. `x`/`y` are the point's normalized (0–1) offset within the
- * shape's own bounds — taken in the shape's own space, so a pin placed on a rotated shape records
- * the spot it was dropped on rather than a spot in the bounding box. Remembered either way: when
- * `precise` the pin sits at exactly `x`/`y`; otherwise it sits at the consumer's imprecise default
- * (top-right out of the box). Placement gestures get `precise` from the `shouldBePrecise`
- * commenting option (always precise, by default).
+ * shape's own bounds, taken in the shape's own space, so a pin on a rotated shape records the spot
+ * it was dropped on. Remembered either way: when `precise` the pin sits at exactly `x`/`y`,
+ * otherwise at the consumer's imprecise default.
  * @public
  */
 export function shapeAnchorAt(
@@ -168,10 +202,9 @@ const THREAD_UI_EXTENT_PX = POPOVER_OFFSET.thread.x + 300
 
 /**
  * How far right of a centered-on pin the true viewport center should sit, in screen px. While the
- * comments sidebar covers the viewport's right edge, centering a pin dead-center puts the thread
- * popover that opens on it under the sidebar — so centering aims the pin at the middle of the
- * uncovered area instead, nudged further left if the thread UI would still reach the sidebar, but
- * never past the viewport's left edge. Zero when the sidebar is closed or not on screen.
+ * comments sidebar covers the viewport's right edge, dead-centering a pin would put its thread
+ * popover under the sidebar — so centering aims at the middle of the uncovered area instead, never
+ * past the viewport's left edge. Zero when the sidebar is closed or not on screen.
  * @internal
  */
 export function commentCenterScreenOffset(editor: Editor): number {

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

@@ -0,0 +1,72 @@
+import type { CommentAuthor } from '@tldraw/mentions'
+import type { TLComment } from 'tldraw'
+import { describe, expect, it } from 'vitest'
+import { absoluteThreadLink, toCardProps } from './thread-view'
+
+const AUTHOR: CommentAuthor = { name: 'Ada' }
+
+function comment(overrides: Partial<TLComment> = {}): TLComment {
+	return {
+		id: 'comment:1',
+		typeName: 'comment',
+		threadId: 'comment-thread:1',
+		pageId: 'page:one',
+		authorId: 'user:1',
+		body: { type: 'doc', content: [] },
+		createdAt: Date.parse('2026-07-30T12:00:00.000Z'),
+		editedAt: null,
+		meta: {},
+		...overrides,
+	} as unknown as TLComment
+}
+
+const context = {
+	currentUserId: 'user:1',
+	resolveAuthor: (id: string) => (id === 'user:1' ? AUTHOR : undefined),
+}
+
+const resolveName = (id: string) => context.resolveAuthor(id)?.name
+
+describe('toCardProps', () => {
+	it('marks your own comments and resolves the author', () => {
+		const card = toCardProps(comment(), context, {}, resolveName)
+		expect(card.you).toBe(true)
+		expect(card.author).toBe(AUTHOR)
+		expect(card.date).toBe('2026-07-30T12:00:00.000Z')
+		expect(card.edited).toBe(false)
+	})
+
+	it('falls back to the unknown author when the id does not resolve', () => {
+		const card = toCardProps(comment({ authorId: 'user:gone' }), context, {}, resolveName)
+		expect(card.you).toBe(false)
+		expect(card.author).not.toBe(AUTHOR)
+	})
+})
+
+describe('absoluteThreadLink', () => {
+	const BASE = 'https://example.com/f/abc123?page=2'
+
+	// A host's `getThreadHref` is an href — the sidebar rows use it as one — so it's allowed to be
+	// relative. Copying that verbatim would put "/f/abc123?comment=…" on someone's clipboard.
+	it('resolves a root-relative href against the current document', () => {
+		expect(absoluteThreadLink('/f/abc123?comment=comment-thread%3A1', BASE)).toBe(
+			'https://example.com/f/abc123?comment=comment-thread%3A1'
+		)
+	})
+
+	it('leaves an already absolute href alone', () => {
+		const href = 'https://other.example/f/xyz?comment=comment-thread%3A1'
+		expect(absoluteThreadLink(href, BASE)).toBe(href)
+	})
+
+	it('resolves a path-relative href', () => {
+		expect(absoluteThreadLink('?comment=comment-thread%3A1', BASE)).toBe(
+			'https://example.com/f/abc123?comment=comment-thread%3A1'
+		)
+	})
+
+	// Better a link that's odd than a copy button that silently does nothing.
+	it('copies an unparseable href as-is', () => {
+		expect(absoluteThreadLink('::not a url::', '::also not::')).toBe('::not a url::')
+	})
+})