@tldraw/commenting 5.3.0-next.7654e7ac2a02 → 5.3.0-next.aefb8773a7eb

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tldraw/commenting",
   "description": "tldraw commenting UI components.",
-  "version": "5.3.0-next.7654e7ac2a02",
+  "version": "5.3.0-next.aefb8773a7eb",
   "author": {
     "name": "tldraw Inc.",
     "email": "hello@tldraw.com"
@@ -38,11 +38,12 @@
     "lint": "yarn run -T tsx ../../internal/scripts/lint.ts"
   },
   "devDependencies": {
-    "@tldraw/driver": "5.3.0-next.7654e7ac2a02",
+    "@tldraw/driver": "5.3.0-next.aefb8773a7eb",
     "@types/react": "^19.2.7",
     "@types/react-dom": "^19.2.3",
     "react": "^19.2.1",
-    "react-dom": "^19.2.1"
+    "react-dom": "^19.2.1",
+    "vitest": "^4.1.7"
   },
   "peerDependencies": {
     "react": "^18.2.0 || ^19.2.1",
@@ -55,9 +56,9 @@
     "@tiptap/core": "^3.12.1",
     "@tiptap/pm": "^3.12.1",
     "@tiptap/react": "^3.12.1",
-    "@tldraw/mentions": "5.3.0-next.7654e7ac2a02",
-    "@tldraw/utils": "5.3.0-next.7654e7ac2a02",
-    "tldraw": "5.3.0-next.7654e7ac2a02"
+    "@tldraw/mentions": "5.3.0-next.aefb8773a7eb",
+    "@tldraw/utils": "5.3.0-next.aefb8773a7eb",
+    "tldraw": "5.3.0-next.aefb8773a7eb"
   },
   "module": "dist-esm/index.mjs",
   "source": "src/index.ts",

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

@@ -13,6 +13,7 @@ import {
 } from 'tldraw'
 import { afterEach, beforeEach, describe, expect, it } from 'vitest'
 import { CommentTool } from './comment-tool'
+import { commentsSidebarOpen, pendingComment, regionDraft } from './state'
 
 /**
  * Pointer-driven tests for the comment tool's placement affordances. These need a real editor
@@ -90,14 +91,80 @@ describe('comment tool placement hints', () => {
 		driver.pointerMove(150, 125)
 		expect(editor.getHintingShapeIds()).toEqual([id])
 
-		// Releasing places the comment and hands back to select, which owns its own hover state.
-		driver.pointerDown(150, 125)
-		driver.pointerUp(150, 125)
-		expect(editor.isIn('select')).toBe(true)
+		// Select owns its own hover state, so the comment hint leaves with the tool.
+		editor.setCurrentTool('select')
 		expect(editor.getHintingShapeIds()).toEqual([])
 	})
 })
 
+describe('comment tool placement lifecycle', () => {
+	let driver: Driver
+
+	beforeEach(() => {
+		driver = makeEditor()
+	})
+
+	it('stays in the tool with the composer open after placing', () => {
+		editor.setCurrentTool('comment')
+		driver.pointerDown(400, 300)
+		driver.pointerUp(400, 300)
+		// Placement opens the composer but the interaction isn't over — the tool holds on until
+		// the comment is posted or dismissed, so the surrounding UI stays stable.
+		expect(editor.isIn('comment.idle')).toBe(true)
+		expect(pendingComment.get(editor)).toEqual({
+			anchor: { type: 'point', x: 400, y: 300 },
+			point: { x: 400, y: 300 },
+		})
+	})
+
+	it('re-places the composer on a second click', () => {
+		editor.setCurrentTool('comment')
+		driver.pointerDown(400, 300)
+		driver.pointerUp(400, 300)
+		driver.pointerDown(200, 200)
+		driver.pointerUp(200, 200)
+		expect(editor.isIn('comment.idle')).toBe(true)
+		expect(pendingComment.get(editor)).toEqual({
+			anchor: { type: 'point', x: 200, y: 200 },
+			point: { x: 200, y: 200 },
+		})
+	})
+
+	it('drops the pending composer when the tool exits', () => {
+		editor.setCurrentTool('comment')
+		driver.pointerDown(400, 300)
+		driver.pointerUp(400, 300)
+		expect(pendingComment.get(editor)).not.toBeNull()
+
+		// A direct tool switch (toolbar, shortcut) abandons the draft composer — it belongs to
+		// the tool. The text itself survives in the comment draft store.
+		editor.setCurrentTool('select')
+		expect(pendingComment.get(editor)).toBeNull()
+	})
+
+	it('closes the comments sidebar for the whole interaction', () => {
+		commentsSidebarOpen.set(editor, true)
+		editor.setCurrentTool('comment')
+		expect(commentsSidebarOpen.get(editor)).toBe(false)
+
+		// ...and placing doesn't reopen it: the tool (and the closed sidebar) hold through the
+		// composer. Reopening is the host's button, never a side effect of leaving the tool.
+		driver.pointerDown(400, 300)
+		driver.pointerUp(400, 300)
+		expect(editor.isIn('comment.idle')).toBe(true)
+		expect(commentsSidebarOpen.get(editor)).toBe(false)
+	})
+
+	it('escape leaves the tool for select and drops the draft', () => {
+		editor.setCurrentTool('comment')
+		driver.pointerDown(400, 300)
+		driver.pointerUp(400, 300)
+		editor.cancel()
+		expect(editor.isIn('select')).toBe(true)
+		expect(pendingComment.get(editor)).toBeNull()
+	})
+})
+
 describe('comment tool placement hints with regions enabled', () => {
 	it('clears the hint when a drag becomes a region', () => {
 		const driver = makeEditor(CommentTool.configure({ enableRegions: true }))
@@ -113,6 +180,44 @@ describe('comment tool placement hints with regions enabled', () => {
 		expect(editor.isIn('comment.dragging')).toBe(true)
 		expect(editor.getHintingShapeIds()).toEqual([])
 	})
+
+	it('stays in the tool with the composer open after a region drag', () => {
+		const driver = makeEditor(CommentTool.configure({ enableRegions: true }))
+		editor.setCurrentTool('comment')
+		driver.pointerDown(100, 100)
+		driver.pointerMove(200, 180)
+		driver.pointerUp(200, 180)
+		expect(editor.isIn('comment.idle')).toBe(true)
+		expect(pendingComment.get(editor)).toEqual({
+			anchor: { type: 'region', x: 100, y: 100, w: 100, h: 80, pinX: 1, pinY: 1 },
+			point: { x: 200, y: 180 },
+		})
+	})
+
+	it('does not hint a shape under the pin corner of a placed region', () => {
+		const driver = makeEditor(CommentTool.configure({ enableRegions: true }))
+		makeShape(100, 100)
+		editor.setCurrentTool('comment')
+		// Release on top of the shape: a region anchors to its rectangle, so the outline that
+		// normally previews a shape anchor would be a lie here.
+		driver.pointerDown(50, 50)
+		driver.pointerMove(150, 125)
+		driver.pointerUp(150, 125)
+		expect(editor.isIn('comment.idle')).toBe(true)
+		expect(editor.getHintingShapeIds()).toEqual([])
+	})
+
+	it('drops the region draft when the tool exits mid-drag', () => {
+		const driver = makeEditor(CommentTool.configure({ enableRegions: true }))
+		editor.setCurrentTool('comment')
+		driver.pointerDown(100, 100)
+		driver.pointerMove(200, 180)
+		expect(regionDraft.get(editor)).not.toBeNull()
+
+		// A direct tool switch (shortcut, toolbar) mid-drag must not strand the drawn rectangle.
+		editor.setCurrentTool('select')
+		expect(regionDraft.get(editor)).toBeNull()
+	})
 })
 
 describe('comment tool anchoring to frames', () => {

package/src/canvas/comment-tool.tsx

@@ -52,7 +52,9 @@ export function regionBetween(a: VecLike, b: VecLike): BoxModel {
  * The comment tool. Pressing down opens the comment composer at the pointer and it follows until
  * release — like placing a sticky note — settling on a point, or on a shape when released over one.
  * With region comments enabled, dragging past the threshold draws a region rectangle instead.
- * Placement only opens a composer; the records are created when the comment is posted.
+ * Placement only opens a composer; the records are created when the comment is posted. The tool
+ * stays active while the composer is open — posting returns to select, and clicking elsewhere
+ * re-places the composer.
  * @public
  */
 export class CommentTool extends StateNode {
@@ -98,8 +100,11 @@ export class CommentTool extends StateNode {
 
 	override onExit() {
 		// Drop the hover hint painted while pointing at shapes (see CommentIdle). The cursor resets
-		// when the next tool takes over.
+		// when the next tool takes over. The draft composer and region draft belong to the tool, so
+		// they leave with it; the draft's text survives in the comment draft store.
 		this.editor.setHintingShapes([])
+		pendingComment.set(this.editor, null)
+		regionDraft.set(this.editor, null)
 	}
 
 	// Escape leaves the tool, like the built-in tools (the editor dispatches `cancel` on Escape).
@@ -122,7 +127,14 @@ class CommentIdle extends StateNode {
 	override onEnter() {
 		// Back to hovering: restore the pin cursor (a prior placing state may have hidden it).
 		this.editor.setCursor({ type: 'comment', rotation: 0 })
-		updateAnchorHint(this.editor)
+		// With a region composer open, a shape outline under its pin corner would imply a shape
+		// anchor the region will never use — and it would stick, since moves over the composer
+		// never reach the canvas. Point placements keep the hint: it previews the next click.
+		if (pendingComment.get(this.editor)?.anchor.type === 'region') {
+			this.editor.setHintingShapes([])
+		} else {
+			updateAnchorHint(this.editor)
+		}
 	}
 
 	override onPointerMove() {
@@ -185,7 +197,10 @@ class CommentPointing extends StateNode {
 				)
 			: { type: 'point', x: point.x, y: point.y }
 		pendingComment.set(editor, { anchor, point: { x: point.x, y: point.y } })
-		editor.setCurrentTool('select')
+		// Stay in the tool while the composer is open — the interaction isn't over until the
+		// comment is posted or dismissed, and staying keeps the surrounding UI (style panel,
+		// sidebar) from churning mid-placement.
+		this.parent.transition('idle')
 	}
 
 	override onCancel() {
@@ -196,9 +211,9 @@ class CommentPointing extends StateNode {
 		this.cancel()
 	}
 
-	// Abandon the follow composer if placement is interrupted (Escape, focus loss, etc.).
+	// Abandon the follow composer if placement is interrupted (Escape, focus loss, etc.). The
+	// tool's onExit drops the draft.
 	private cancel() {
-		pendingComment.set(this.editor, null)
 		this.editor.setCurrentTool('select')
 	}
 }
@@ -233,7 +248,8 @@ class CommentDragging extends StateNode {
 			anchor: { type: 'region', ...region, pinX: pin.x, pinY: pin.y },
 			point: regionPinPoint(region, pin),
 		})
-		editor.setCurrentTool('select')
+		// Same as the point placement: the tool stays active while the composer is open.
+		this.parent.transition('idle')
 	}
 
 	override onCancel() {
@@ -252,8 +268,8 @@ class CommentDragging extends StateNode {
 		)
 	}
 
+	// The tool's onExit drops the region draft.
 	private cancel() {
-		regionDraft.set(this.editor, null)
 		this.editor.setCurrentTool('select')
 	}
 }

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

@@ -10,7 +10,7 @@ import {
 	useTranslation,
 	useValue,
 } from 'tldraw'
-import { FilterIcon } from '../ui/icons'
+import { MoreMenuIcon } from '../ui/icons'
 import { SidebarFilters } from './sidebar-filters'
 import { sidebarFilters } from './state'
 
@@ -44,7 +44,7 @@ export function CommentsFilterMenu({
 					title={msg('comments.filter')}
 					className="tlui-cmt-header-btn"
 				>
-					<FilterIcon />
+					<MoreMenuIcon />
 				</TldrawUiButton>
 			</TldrawUiDropdownMenuTrigger>
 			{/* No tlui-cmt-menu here: the rows are tldraw menu items, which carry their own insets —

package/src/canvas/comments-overlay.tsx

@@ -68,11 +68,16 @@ function CanvasCommentsLayer(props: CommentingContext) {
 	const pending = usePendingComment()
 	const canComment = useCanComment(props.currentUserId)
 	// Nothing renders a pending comment when composing is blocked and there's no fallback slot, and
-	// the dismiss handlers live inside PendingComposer — so clear the atom rather than strand it.
+	// the dismiss handlers live inside PendingComposer — so clear the atom rather than strand it,
+	// and leave the tool too: it holds while a composer is open, so staying would turn every click
+	// into a silently swallowed placement.
 	const canRenderComposer = canComment || options.components.ComposerFallback != null
 	const showPendingComposer = pending != null && canRenderComposer
 	useEffect(() => {
-		if (pending && !showPendingComposer) pendingComment.set(editor, null)
+		if (pending && !showPendingComposer) {
+			pendingComment.set(editor, null)
+			if (editor.isIn('comment')) editor.setCurrentTool('select')
+		}
 	}, [editor, pending, showPendingComposer])
 	const openId = useValue('open thread id', () => openThreadId.get(editor), [editor])
 	// Matches the sidebar's `showResolved` filter. The open thread stays in — resolving from its own

package/src/canvas/pending-composer.tsx

@@ -107,6 +107,10 @@ export function PendingComposer({
 		setText(EMPTY_COMMENT)
 		clearCommentDraft(NEW_COMMENT_DRAFT)
 		pendingComment.set(editor, null)
+		// Posting ends the placement interaction — hand the comment tool back to select. Only from
+		// the settled idle state: Enter can land while a fresh press is mid-gesture (the composer
+		// trails the pointer), and switching tools under a held pointer would strand the gesture.
+		if (editor.isIn('comment.idle')) editor.setCurrentTool('select')
 		// The host's callback is its own operation, not part of the post's history scope. It runs
 		// last so a throwing host can't strand the composer holding a draft of a posted comment.
 		onPostComment?.(comment)

package/src/canvas/thread-pin.tsx

@@ -305,9 +305,10 @@ export const ThreadPin = memo(function ThreadPin({
 	const livePinPage = resizeBounds ? regionPinPoint(resizeBounds, pinCorner) : dragPagePoint
 	const renderPointBase = livePinPage ? editor.pageToViewport(livePinPage) : point
 	// A region's pin centres on its corner — overlapping the box — rather than hanging off it.
-	// The marker anchors bottom-left, so step half its 34px size left and down (screen px).
+	// The marker anchors bottom-left, so step half its 28px size (--tlui-cmt-pin-size) left and
+	// down (screen px), matching the draft composer's --region centring on the same corner.
 	const renderPoint = isRegion
-		? { x: renderPointBase.x - 17, y: renderPointBase.y + 17 }
+		? { x: renderPointBase.x - 14, y: renderPointBase.y + 14 }
 		: renderPointBase
 
 	// A region's live box bounds, by priority: a corner resize, else a pin-drag translation (the pin

package/src/ui/comments.css

@@ -84,6 +84,15 @@
 	overflow-wrap: anywhere;
 }
 
+/* A comment body is read-only but its text must stay selectable so it can be copied. tldraw's
+   container sets `user-select: none` on every descendant (`.tl-container *`) to keep canvas gestures
+   from selecting UI text, so the body and its rendered children have to opt back in. */
+.tlui-cmt-text,
+.tlui-cmt-text * {
+	-webkit-user-select: text;
+	user-select: text;
+}
+
 .tlui-cmt-edited {
 	font-style: italic;
 }
@@ -777,7 +786,7 @@ button.tlui-cmt-reaction--active:hover {
 	align-items: center;
 	justify-content: space-between;
 	gap: 8px;
-	padding: 6px 6px 6px 14px;
+	padding: 2px 2px 2px 14px;
 	border-bottom: 1px solid var(--tl-color-divider);
 }
 .tlui-cmt-list__header-title {
@@ -786,41 +795,28 @@ button.tlui-cmt-reaction--active:hover {
 	color: var(--tl-color-text-1);
 }
 
-/* A small square icon button in the sidebar header (filter funnel, overflow …). Also a
-   TldrawUiButton, but a bespoke 26px size — so it has to override .tlui-button's 40px box, and
-   `min-width` in particular would otherwise beat `width`. Selectors carry .tlui-button so
-   stylesheet order can't decide the winner. */
+/* An icon button in the sidebar header (filter funnel, overflow …). Sized like the thread actions:
+   a TldrawUiButton (type="icon") left at its native 40px box, with .tlui-button's 32px ::after
+   square carrying the hover wash. Only the bits that differ are set here, at .tlui-button's
+   specificity + 1 so stylesheet order can't decide the winner. */
 .tlui-button.tlui-cmt-header-btn {
-	width: 26px;
-	min-width: 26px;
-	height: 26px;
+	width: 40px;
 	padding: 0;
 	border-radius: 6px;
 	color: var(--tl-color-text-2);
 }
-/* Same hit-target expansion as the thread actions, tiled the same way — this row's gap is 2px too
-   (see `.tlui-cmt-list__header-actions`). Unlike the thread actions, the hover fill sits on the
-   button itself, so .tlui-button's ::after wash is cleared and the pseudo-element is left doing
-   nothing but widening the hit area. */
-.tlui-button.tlui-cmt-header-btn::after {
-	inset: -6px -1px;
-	background: none;
-}
-.tlui-button.tlui-cmt-header-btn:first-child::after {
-	left: -6px;
-}
-.tlui-button.tlui-cmt-header-btn:last-child::after {
-	right: -6px;
+/* Overlap each button 4px into the previous so the 32px visual squares sit 4px apart, not 8px —
+   the same tiling the thread actions use. */
+.tlui-cmt-header-btn + .tlui-cmt-header-btn {
+	margin-left: -4px;
 }
 .tlui-button.tlui-cmt-header-btn:hover,
 .tlui-button.tlui-cmt-header-btn[data-state='open'] {
-	background: var(--tl-color-muted-2);
 	color: var(--tl-color-text-1);
 }
 .tlui-cmt-list__header-actions {
 	display: flex;
 	align-items: center;
-	gap: 2px;
 }
 
 /* The commenting dropdowns' surface — a little air between the items and the menu edge. */
@@ -876,6 +872,7 @@ button.tlui-cmt-reaction--active:hover {
 	font-size: 12px;
 }
 .tlui-cmt-list__item {
+	position: relative;
 	display: flex;
 	gap: 10px;
 	width: 100%;
@@ -890,18 +887,27 @@ button.tlui-cmt-reaction--active:hover {
 	color: inherit;
 	text-decoration: none;
 }
-.tlui-cmt-list__item:hover {
+/* The highlight is an inset, rounded wash like tldraw's buttons and menu items — not an
+   edge-to-edge band — so a comment row lights up the same way every other interactive row does. */
+.tlui-cmt-list__item::after {
+	content: '';
+	position: absolute;
+	inset: 4px;
+	border-radius: var(--tl-radius-2);
+	pointer-events: none;
+}
+.tlui-cmt-list__item:hover::after {
 	background: var(--tl-color-muted-2);
 }
 /* Selected sits a step above hover so the open thread's row stays distinguishable while
    pointing at other rows — but only a step: the muted-1 token (10%) reads too heavy here.
    These rows sit on the opaque sidebar panel, so a translucent tint composes safely. */
-.tlui-cmt-list__item--selected,
-.tlui-cmt-list__item--selected:hover {
+.tlui-cmt-list__item--selected::after,
+.tlui-cmt-list__item--selected:hover::after {
 	background: hsl(0, 0%, 0%, 5%);
 }
-.tl-theme__dark .tlui-cmt-list__item--selected,
-.tl-theme__dark .tlui-cmt-list__item--selected:hover {
+.tl-theme__dark .tlui-cmt-list__item--selected::after,
+.tl-theme__dark .tlui-cmt-list__item--selected:hover::after {
 	background: hsl(0, 0%, 100%, 5%);
 }
 /* resolved rows mute their content but keep the "Resolved" marker legible */

package/src/ui/format-time.test.ts

@@ -11,7 +11,7 @@ const TWO_HOURS = 2 * 60 * 60
 describe('formatRelativeTime', () => {
 	it('formats in English by default', () => {
 		expect(formatRelativeTime(agoIso(TWO_HOURS))).toBe(
-			new Intl.RelativeTimeFormat('en', { numeric: 'auto', style: 'short' }).format(-2, 'hour')
+			new Intl.RelativeTimeFormat('en', { numeric: 'auto', style: 'narrow' }).format(-2, 'hour')
 		)
 	})
 
@@ -20,7 +20,7 @@ describe('formatRelativeTime', () => {
 	it('formats in the given locale', () => {
 		const french = formatRelativeTime(agoIso(TWO_HOURS), 'fr')
 		expect(french).toBe(
-			new Intl.RelativeTimeFormat('fr', { numeric: 'auto', style: 'short' }).format(-2, 'hour')
+			new Intl.RelativeTimeFormat('fr', { numeric: 'auto', style: 'narrow' }).format(-2, 'hour')
 		)
 		expect(french).not.toBe(formatRelativeTime(agoIso(TWO_HOURS), 'en'))
 	})
@@ -34,7 +34,7 @@ describe('formatRelativeTime', () => {
 
 	it('reads under a minute as "now" in the given locale', () => {
 		expect(formatRelativeTime(agoIso(5), 'fr')).toBe(
-			new Intl.RelativeTimeFormat('fr', { numeric: 'auto', style: 'short' }).format(0, 'second')
+			new Intl.RelativeTimeFormat('fr', { numeric: 'auto', style: 'narrow' }).format(0, 'second')
 		)
 	})
 

package/src/ui/format-time.ts

@@ -9,7 +9,7 @@ const DIVISIONS = [
 ] as const
 
 /**
- * Format an ISO datetime as short relative time ("2 hr. ago", "yesterday", "last wk.").
+ * Format an ISO datetime as compact relative time ("2h ago", "yesterday", "last wk.").
  * Locale-aware via Intl.RelativeTimeFormat.
  * @public
  */
@@ -17,7 +17,7 @@ export function formatRelativeTime(iso: string, locale = 'en'): string {
 	const then = new Date(iso).getTime()
 	if (Number.isNaN(then)) return ''
 
-	const rtf = new Intl.RelativeTimeFormat(locale, { numeric: 'auto', style: 'short' })
+	const rtf = new Intl.RelativeTimeFormat(locale, { numeric: 'auto', style: 'narrow' })
 	let duration = (then - Date.now()) / 1000
 	// Under a minute is just "now" — with second granularity the label visibly ticks while
 	// typing a reply (every keystroke re-renders the card).

package/src/ui/icons.tsx

@@ -2,9 +2,13 @@
  *
  * Anything with an equivalent in tldraw's icon assets goes through `TldrawUiIcon` instead (the ⋯
  * menu, the dismiss cross, the resolve button's check). What's left lives here because the asset
- * set has no counterpart — a smiley, a send arrow, the eye pair, a filter — or because the asset
- * reads wrong at the size it's needed, which is the case for both resolved checks below. Inline
- * also means they render without an `AssetUrlsProvider` and without the consumer serving files.
+ * set has no counterpart — a smiley, a send arrow, a filter — or because the asset reads wrong at
+ * the size it's needed, which is the case for both resolved checks below. The eye pair mirrors
+ * tldraw's presence glyphs: the open state is the `follow` icon — the almond eye whose pupil
+ * tracks presence — and the closed state the `closed` icon, its shut-lid companion. Both are in
+ * the asset set, but they're inlined because the package renders without an `AssetUrlsProvider`,
+ * so `TldrawUiIcon` can't reach them. Inline also means they render without the consumer serving
+ * files.
  *
  * All internal — none are exported from the package. */
 
@@ -73,43 +77,61 @@ export function SendIcon() {
 	)
 }
 
-/** Comment pins are showing. Pairs with `EyeClosedIcon` — the two must stay the same family. */
+/** Comment pins are showing. tldraw's `follow` glyph (icons/icon/follow.svg) inlined at its native
+ *  weight — the almond eye with a centred pupil. Pairs with `EyeClosedIcon`; the two must stay the
+ *  same family. */
 export function EyeOpenIcon() {
 	return (
-		<svg width="15" height="15" viewBox="0 0 15 15" fill="none" aria-hidden="true">
+		<svg width="15" height="15" viewBox="0 0 30 30" fill="none" aria-hidden="true">
+			<path fill="currentColor" d="M19 15a4 4 0 1 1-8 0 4 4 0 0 1 8 0" />
 			<path
-				d="M7.5 11C4.80285 11 2.52952 9.62184 1.09622 7.50001C2.52952 5.37816 4.80285 4 7.5 4C10.1971 4 12.4705 5.37816 13.9038 7.5C12.4705 9.62183 10.1971 11 7.5 11ZM7.5 3C4.30786 3 1.65639 4.70638 0.0760002 7.23501C-0.0253338 7.39715 -0.0253334 7.60288 0.0760014 7.76501C1.65639 10.2936 4.30786 12 7.5 12C10.6921 12 13.3436 10.2936 14.924 7.76501C15.0253 7.60288 15.0253 7.39715 14.924 7.23501C13.3436 4.70638 10.6921 3 7.5 3ZM7.5 9.5C8.60457 9.5 9.5 8.60457 9.5 7.5C9.5 6.39543 8.60457 5.5 7.5 5.5C6.39543 5.5 5.5 6.39543 5.5 7.5C5.5 8.60457 6.39543 9.5 7.5 9.5Z"
-				fill="currentColor"
-				fillRule="evenodd"
-				clipRule="evenodd"
+				stroke="currentColor"
+				strokeWidth="2"
+				d="M26 15c0 1.77-1.077 3.496-3.07 4.825C20.946 21.149 18.145 22 15 22s-5.945-.851-7.93-2.175C5.076 18.496 4 16.77 4 15c0-1.77 1.077-3.496 3.07-4.825C9.054 8.851 11.855 8 15 8s5.945.851 7.93 2.175C24.924 11.504 26 13.23 26 15Z"
 			/>
 		</svg>
 	)
 }
 
-/** Comment pins are hidden. */
+/** Comment pins are hidden. tldraw's `closed` eye glyph (icons/icon/closed.svg) — a shut lower lid
+ *  with lashes, the design pair to `follow`. Inlined like the open eye: the package renders without
+ *  an `AssetUrlsProvider`. Lash dots are `r=1.5` (vs the asset's `r=1`) because at the 15px header
+ *  size the asset's finer lashes fall below a pixel; the lid keeps `follow`'s native stroke. */
 export function EyeClosedIcon() {
 	return (
-		<svg width="15" height="15" viewBox="0 0 15 15" fill="none" aria-hidden="true">
+		<svg width="15" height="15" viewBox="0 0 30 30" fill="none" aria-hidden="true">
 			<path
-				d="M14.7649 6.07596C14.9991 6.22231 15.0703 6.53079 14.9239 6.76495C14.4849 7.46743 13.9632 8.10645 13.3702 8.66305L14.5712 9.86406C14.7664 10.0593 14.7664 10.3759 14.5712 10.5712C14.3759 10.7664 14.0593 10.7664 13.8641 10.5712L12.6011 9.30817C11.805 9.90283 10.9089 10.3621 9.93375 10.651L10.383 12.3277C10.4544 12.5944 10.2961 12.8685 10.0294 12.94C9.76267 13.0115 9.4885 12.8532 9.41704 12.5865L8.95917 10.8775C8.48743 10.958 8.00036 11 7.50001 11C6.99965 11 6.51257 10.958 6.04082 10.8775L5.58299 12.5864C5.51153 12.8532 5.23737 13.0115 4.97064 12.94C4.7039 12.8686 4.5456 12.5944 4.61706 12.3277L5.06625 10.651C4.09111 10.3621 3.19503 9.90282 2.39889 9.30815L1.1359 10.5712C0.940638 10.7664 0.624058 10.7664 0.428798 10.5712C0.233537 10.3759 0.233537 10.0593 0.428798 9.86405L1.62982 8.66303C1.03682 8.10643 0.515113 7.46742 0.0760677 6.76495C-0.0702867 6.53079 0.000898544 6.22231 0.235065 6.07596C0.469231 5.9296 0.777703 6.00079 0.924058 6.23496C1.40354 7.00213 1.989 7.68057 2.66233 8.2427C2.67315 8.25096 2.6837 8.25972 2.69397 8.26898C4.00897 9.35527 5.65537 10 7.50001 10C10.3078 10 12.6564 8.5063 14.076 6.23495C14.2223 6.00079 14.5308 5.9296 14.7649 6.07596Z"
-				fill="currentColor"
-				fillRule="evenodd"
-				clipRule="evenodd"
+				stroke="currentColor"
+				strokeWidth="2"
+				strokeLinecap="round"
+				d="M27 15C27 19.4183 21.6274 23 15 23C8.37258 23 3 19.4183 3 15"
 			/>
+			<circle cx="4" cy="20" r="1.5" fill="currentColor" />
+			<circle cx="9" cy="23" r="1.5" fill="currentColor" />
+			<circle cx="15" cy="24" r="1.5" fill="currentColor" />
+			<circle cx="21" cy="23" r="1.5" fill="currentColor" />
+			<circle cx="26" cy="20" r="1.5" fill="currentColor" />
 		</svg>
 	)
 }
 
-/** The sidebar's filter menu trigger. */
-export function FilterIcon() {
+/** The sidebar's comment-menu trigger — tldraw's `dots-vertical` glyph (icons/icon/dots-vertical.svg)
+ *  inlined, a vertical kebab. Inlined like the eye pair because the package renders without an
+ *  `AssetUrlsProvider`. */
+export function MoreMenuIcon() {
 	return (
-		<svg width="15" height="15" viewBox="0 0 15 15" fill="none" aria-hidden="true">
+		<svg width="15" height="15" viewBox="0 0 30 30" fill="none" aria-hidden="true">
 			<path
-				d="M5.5 3C4.67157 3 4 3.67157 4 4.5C4 5.32843 4.67157 6 5.5 6C6.32843 6 7 5.32843 7 4.5C7 3.67157 6.32843 3 5.5 3ZM3 5C3.01671 5 3.03323 4.99918 3.04952 4.99758C3.28022 6.1399 4.28967 7 5.5 7C6.71033 7 7.71978 6.1399 7.95048 4.99758C7.96677 4.99918 7.98329 5 8 5H13.5C13.7761 5 14 4.77614 14 4.5C14 4.22386 13.7761 4 13.5 4H8C7.98329 4 7.96677 4.00082 7.95048 4.00242C7.71978 2.86009 6.71033 2 5.5 2C4.28967 2 3.28022 2.86009 3.04952 4.00242C3.03323 4.00082 3.01671 4 3 4H1.5C1.22386 4 1 4.22386 1 4.5C1 4.77614 1.22386 5 1.5 5H3ZM11.9505 10.9976C11.7198 12.1399 10.7103 13 9.5 13C8.28967 13 7.28022 12.1399 7.04952 10.9976C7.03323 10.9992 7.01671 11 7 11H1.5C1.22386 11 1 10.7761 1 10.5C1 10.2239 1.22386 10 1.5 10H7C7.01671 10 7.03323 10.0008 7.04952 10.0024C7.28022 8.8601 8.28967 8 9.5 8C10.7103 8 11.7198 8.8601 11.9505 10.0024C11.9668 10.0008 11.9833 10 12 10H13.5C13.7761 10 14 10.2239 14 10.5C14 10.7761 13.7761 11 13.5 11H12C11.9833 11 11.9668 10.9992 11.9505 10.9976ZM8 10.5C8 9.67157 8.67157 9 9.5 9C10.3284 9 11 9.67157 11 10.5C11 11.3284 10.3284 12 9.5 12C8.67157 12 8 11.3284 8 10.5Z"
 				fill="currentColor"
-				fillRule="evenodd"
-				clipRule="evenodd"
+				d="M15 9.48975C14.3167 9.48975 13.7292 9.24747 13.2375 8.76293C12.7458 8.27003 12.5 7.67688 12.5 6.98348C12.5 6.29843 12.7458 5.71364 13.2375 5.22909C13.7292 4.73619 14.3167 4.48975 15 4.48975C15.6833 4.48975 16.2708 4.73619 16.7625 5.22909C17.2542 5.71364 17.5 6.29843 17.5 6.98348C17.5 7.44296 17.3833 7.86485 17.15 8.24914C16.925 8.62508 16.625 8.92583 16.25 9.1514C15.875 9.37696 15.4583 9.48975 15 9.48975Z"
+			/>
+			<path
+				fill="currentColor"
+				d="M15 17.5C14.3167 17.5 13.7292 17.2577 13.2375 16.7732C12.7458 16.2803 12.5 15.6871 12.5 14.9937C12.5 14.3087 12.7458 13.7239 13.2375 13.2393C13.7292 12.7464 14.3167 12.5 15 12.5C15.6833 12.5 16.2708 12.7464 16.7625 13.2393C17.2542 13.7239 17.5 14.3087 17.5 14.9937C17.5 15.4532 17.3833 15.8751 17.15 16.2594C16.925 16.6353 16.625 16.9361 16.25 17.1617C15.875 17.3872 15.4583 17.5 15 17.5Z"
+			/>
+			<path
+				fill="currentColor"
+				d="M15 25.5103C14.3167 25.5103 13.7292 25.268 13.2375 24.7834C12.7458 24.2905 12.5 23.6974 12.5 23.004C12.5 22.319 12.7458 21.7342 13.2375 21.2496C13.7292 20.7567 14.3167 20.5103 15 20.5103C15.6833 20.5103 16.2708 20.7567 16.7625 21.2496C17.2542 21.7342 17.5 22.319 17.5 23.004C17.5 23.4635 17.3833 23.8854 17.15 24.2697C16.925 24.6456 16.625 24.9463 16.25 25.1719C15.875 25.3975 15.4583 25.5103 15 25.5103Z"
 			/>
 		</svg>
 	)