@tldraw/commenting 5.3.0-next.d7d8ced023d5 → 5.3.0-next.dec36c5c2930

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;
 }
@@ -197,8 +206,6 @@
 	pointer-events: none;
 	white-space: nowrap;
 	width: max-content;
-	max-height: none;
-	overflow: visible;
 }
 
 .tlui-cmt-input {
@@ -238,6 +245,17 @@
 	pointer-events: none;
 }
 
+/* iOS Safari zooms the whole page in when a text input with a sub-16px font takes focus, and doesn't
+   zoom back out. Raising the font to 16px on touch devices suppresses that without disabling
+   pinch-zoom of the canvas (which a `maximum-scale` viewport lock would). Must come after both base
+   rules above: a media query adds no specificity, so it only wins the placeholder on source order. */
+@media (pointer: coarse) {
+	.tlui-cmt-input,
+	.tlui-cmt-input__placeholder {
+		font-size: 16px;
+	}
+}
+
 /* A bare up-arrow icon button (matching the placement composer): no fill by default, a grey square
    on hover, grey while there's nothing to send and dark once there is. */
 .tlui-cmt-send {
@@ -414,12 +432,17 @@
 	font-size: 10px;
 	font-weight: 400;
 	color: var(--tl-color-text-1);
+}
+
+/* An inert pill renders as a span (e.g. in a notification row); only the button variant is
+   clickable, so only it gets the pointer cursor and hover shade. */
+button.tlui-cmt-reaction {
 	cursor: pointer;
 }
 
 /* Hover deepens the grey — no border to tint now. Mixing toward the text colour is theme-aware:
    it darkens the fill in light mode and lightens it in dark, tracking the pill's own contrast. */
-.tlui-cmt-reaction:hover {
+button.tlui-cmt-reaction:hover {
 	background: var(--tl-color-muted-1);
 }
 
@@ -429,14 +452,15 @@
 	background: color-mix(in srgb, var(--tl-color-selected) 28%, var(--tl-color-panel));
 }
 
-.tlui-cmt-reaction--active:hover {
+button.tlui-cmt-reaction--active:hover {
 	background: color-mix(in srgb, var(--tl-color-selected) 38%, var(--tl-color-panel));
 }
 
-/* the emoji sits at the same 10px as the count beside it */
+/* The emoji renders larger than the 10px count, but its pinned line-height keeps the pill the
+   count's height — the glyph overflows the line box rather than growing it. */
 .tlui-cmt-reaction__emoji {
-	font-size: 10px;
-	line-height: 1;
+	font-size: 13px;
+	line-height: 10px;
 }
 
 .tlui-cmt-reaction__count {
@@ -539,7 +563,8 @@
 	--tlui-cmt-marker-transition: 0.08s ease;
 	--tlui-cmt-thread-padding: 12px;
 	--tlui-cmt-thread-gap: 0px;
-	--tlui-cmt-thread-action-size: 26px;
+	/* Hit-area width of one .tlui-cmt-thread__action button (drawn as a 32px square inset 4px). */
+	--tlui-cmt-thread-action-size: 40px;
 	/* A floating pill's edge — its hairline ring is the only thing separating it from the panel it
 	   overlaps, so the ring is a theme token rather than a literal black: a near-black hairline
 	   vanishes on a dark panel, where the divider token lightens instead. The drop below it stays
@@ -602,47 +627,28 @@
 	   space-between alone would leave them at the left). */
 	margin-left: auto;
 }
-/* Follows tldraw's toolbar buttons (.tlui-button), used by both the header and card actions: the
-   button is the 40px hit target that tiles with its neighbours; its 32px ::after is the visual
-   square carrying the hover wash, so the hit area (not the ::after) is what's clickable and it
-   never reaches past its row. */
-.tlui-cmt-thread__action {
-	position: relative;
-	display: flex;
-	align-items: center;
-	justify-content: center;
+/* These are TldrawUiButtons (type="icon"), so the 40px box, the 32px ::after square carrying the
+   hover wash, and the hover z-index flip all come from .tlui-button — the hit area (not the
+   ::after) is what's clickable, and it never reaches past its row. Only the bits that differ from
+   a toolbar button are set here, at .tlui-button's specificity + 1 so stylesheet order can't
+   decide the winner. */
+.tlui-button.tlui-cmt-thread__action {
 	width: 40px;
-	height: 40px;
 	padding: 0;
-	border: none;
 	border-radius: 6px;
-	background: transparent;
 	color: var(--tl-color-text-3);
 	font-size: 14px;
 	line-height: 1;
-	cursor: pointer;
 }
 /* Overlap each button 4px into the previous so the 32px visual squares sit 4px apart, not 8px.
    Left-only, so the last button's hit area still stops at its row's right edge. */
 .tlui-cmt-thread__action + .tlui-cmt-thread__action {
 	margin-left: -4px;
 }
-.tlui-cmt-thread__action::after {
-	content: '';
-	position: absolute;
-	inset: 4px;
-	border-radius: var(--tl-radius-2);
-}
-.tlui-cmt-thread__action:hover {
+.tlui-button.tlui-cmt-thread__action:hover {
 	color: var(--tl-color-text-1);
-	/* Raise the hovered button above its overlapping neighbours so its 40px hit area wins the
-	   overlap zone — the same z-index flip tldraw's own toolbar buttons use. */
-	z-index: 1;
-}
-.tlui-cmt-thread__action:hover::after {
-	background: var(--tl-color-muted-2);
 }
-.tlui-cmt-thread__action--danger:hover {
+.tlui-button.tlui-cmt-thread__action--danger:hover {
 	color: var(--tl-color-danger);
 }
 .tlui-cmt-thread__resolved {
@@ -725,7 +731,7 @@
 .tlui-cmt-canvas-preview--thread .tlui-cmt-card {
 	width: 100%;
 	gap: 0;
-	padding: 0 12px;
+	padding: 0 var(--tlui-cmt-thread-padding);
 	background: transparent;
 	border: none;
 }
@@ -754,14 +760,17 @@
 .tlui-cmt-stack-list .tlui-cmt-card .tlui-cmt-head {
 	min-height: 40px;
 }
-/* Only the opened thread's comments actually carry the pills, so only they reserve room for them.
-   Derived from the action size so it can't drift: n buttons + (n−1) 2px gaps + the pill's 2px
-   padding either side + its 2px right inset. One button (react) on others' comments. */
-.tlui-cmt-thread .tlui-cmt-card .tlui-cmt-head {
-	padding-right: calc(var(--tlui-cmt-thread-action-size) + 6px);
+/* Reserve head room only for pills that actually rendered (one child / two children) — pill count
+   is a permissions question (canModifyComment), not ownership, and empty slots (read-only viewers)
+   keep the full row. Sized from the 40px hit areas (4px overlap), minus the card padding the
+   right:0 pills sit over; text stops 4px shy of the visible square. */
+.tlui-cmt-thread .tlui-cmt-card:has(.tlui-cmt-card__actions > *) .tlui-cmt-head {
+	padding-right: calc(var(--tlui-cmt-thread-action-size) - var(--tlui-cmt-thread-padding));
 }
-.tlui-cmt-thread .tlui-cmt-card--you .tlui-cmt-head {
-	padding-right: calc(3 * var(--tlui-cmt-thread-action-size) + 10px);
+.tlui-cmt-thread .tlui-cmt-card:has(.tlui-cmt-card__actions > * + *) .tlui-cmt-head {
+	padding-right: calc(
+		2 * var(--tlui-cmt-thread-action-size) - 4px - var(--tlui-cmt-thread-padding)
+	);
 }
 
 /* comments list — thread summaries, one per row (used by the canvas sidebar) */
@@ -777,7 +786,7 @@
 	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,43 +795,28 @@
 	color: var(--tl-color-text-1);
 }
 
-/* a small square icon button in the sidebar header (filter funnel, overflow …) */
-.tlui-cmt-header-btn {
-	position: relative;
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	width: 26px;
-	height: 26px;
+/* 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: 40px;
 	padding: 0;
-	border: none;
 	border-radius: 6px;
-	background: transparent;
 	color: var(--tl-color-text-2);
-	cursor: pointer;
-}
-/* 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`). */
-.tlui-cmt-header-btn::after {
-	content: '';
-	position: absolute;
-	inset: -6px -1px;
 }
-.tlui-cmt-header-btn:first-child::after {
-	left: -6px;
-}
-.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-cmt-header-btn:hover,
-.tlui-cmt-header-btn[data-state='open'] {
-	background: var(--tl-color-muted-2);
+.tlui-button.tlui-cmt-header-btn:hover,
+.tlui-button.tlui-cmt-header-btn[data-state='open'] {
 	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. */
@@ -878,6 +872,7 @@
 	font-size: 12px;
 }
 .tlui-cmt-list__item {
+	position: relative;
 	display: flex;
 	gap: 10px;
 	width: 100%;
@@ -892,18 +887,27 @@
 	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

@@ -0,0 +1,69 @@
+import { describe, expect, it } from 'vitest'
+import { formatFullDateTime, formatRelativeTime } from './format-time'
+
+/** An ISO timestamp `seconds` in the past, relative to now. */
+function agoIso(seconds: number): string {
+	return new Date(Date.now() - seconds * 1000).toISOString()
+}
+
+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: 'narrow' }).format(-2, 'hour')
+		)
+	})
+
+	// `Byline` passes the UI's current translation locale; without this a localized app showed
+	// English timestamps under localized everything else.
+	it('formats in the given locale', () => {
+		const french = formatRelativeTime(agoIso(TWO_HOURS), 'fr')
+		expect(french).toBe(
+			new Intl.RelativeTimeFormat('fr', { numeric: 'auto', style: 'narrow' }).format(-2, 'hour')
+		)
+		expect(french).not.toBe(formatRelativeTime(agoIso(TWO_HOURS), 'en'))
+	})
+
+	// The parameter is optional, so undefined has to mean "the default", not "no locale".
+	it('treats an undefined locale as the default', () => {
+		expect(formatRelativeTime(agoIso(TWO_HOURS), undefined)).toBe(
+			formatRelativeTime(agoIso(TWO_HOURS))
+		)
+	})
+
+	it('reads under a minute as "now" in the given locale', () => {
+		expect(formatRelativeTime(agoIso(5), 'fr')).toBe(
+			new Intl.RelativeTimeFormat('fr', { numeric: 'auto', style: 'narrow' }).format(0, 'second')
+		)
+	})
+
+	it('returns nothing for an unparseable date', () => {
+		expect(formatRelativeTime('not a date', 'fr')).toBe('')
+	})
+})
+
+describe('formatFullDateTime', () => {
+	it('formats an ISO datetime as a full date and time', () => {
+		const iso = '2025-07-22T16:44:00.000Z'
+		expect(formatFullDateTime(iso)).toBe(
+			new Intl.DateTimeFormat('en', { dateStyle: 'full', timeStyle: 'short' }).format(new Date(iso))
+		)
+	})
+
+	it('formats in the given locale', () => {
+		const french = formatFullDateTime('2025-07-22T16:44:00.000Z', 'fr')
+		expect(french).toContain('juillet')
+		expect(french).not.toBe(formatFullDateTime('2025-07-22T16:44:00.000Z', 'en'))
+	})
+
+	// The parameter is optional, so undefined has to mean "the default", not "no locale".
+	it('treats an undefined locale as the default', () => {
+		const iso = '2025-07-22T16:44:00.000Z'
+		expect(formatFullDateTime(iso, undefined)).toBe(formatFullDateTime(iso))
+	})
+
+	it('returns an empty string for invalid dates', () => {
+		expect(formatFullDateTime('not a date')).toBe('')
+	})
+})

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).
@@ -32,3 +32,23 @@ export function formatRelativeTime(iso: string, locale = 'en'): string {
 	}
 	return ''
 }
+
+// Cached per locale — comment cards re-render on every reply keystroke, and constructing a
+// DateTimeFormat is far more expensive than formatting with one.
+const fullDateTimeFormatters = new Map<string, Intl.DateTimeFormat>()
+
+/**
+ * Format an ISO datetime as a full date and time ("Tuesday, July 22, 2025 at 4:44 PM").
+ * Locale-aware via Intl.DateTimeFormat.
+ * @public
+ */
+export function formatFullDateTime(iso: string, locale = 'en'): string {
+	const date = new Date(iso)
+	if (Number.isNaN(date.getTime())) return ''
+	let formatter = fullDateTimeFormatters.get(locale)
+	if (!formatter) {
+		formatter = new Intl.DateTimeFormat(locale, { dateStyle: 'full', timeStyle: 'short' })
+		fullDateTimeFormatters.set(locale, formatter)
+	}
+	return formatter.format(date)
+}

package/src/ui/icons.tsx

@@ -0,0 +1,138 @@
+/* The commenting UI's inline icons, kept together so the set is visible in one place.
+ *
+ * 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, 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. */
+
+/** The check inside a resolved comment pin. A drawn check, not the '✓' glyph — that character sits
+ * off-baseline and varies by font. Heavier and rounder than `CheckIcon`: it has to hold its weight
+ * against the pin's 28px filled face, where the asset check reads too light. */
+export function PinCheckIcon() {
+	return (
+		<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>
+	)
+}
+
+/** The check beside the "Resolved" label on a comments list row. Thinner than `PinCheckIcon` — it
+ * sits next to text at 12px, so it's drawn to match the label's weight rather than shout. */
+export function CheckIcon() {
+	return (
+		<svg width="12" height="12" viewBox="0 0 12 12" fill="none" aria-hidden="true">
+			<path
+				d="M2.5 6.2 4.7 8.4 9.5 3.6"
+				stroke="currentColor"
+				strokeWidth="1.5"
+				strokeLinecap="round"
+				strokeLinejoin="round"
+			/>
+		</svg>
+	)
+}
+
+/** The reaction picker's trigger. */
+export function SmileyIcon() {
+	return (
+		<svg width="15" height="15" viewBox="0 0 15 15" fill="none" aria-hidden="true">
+			<path
+				d="M7.49991 0.876892C3.84222 0.876892 0.877075 3.84204 0.877075 7.49972C0.877075 11.1574 3.84222 14.1226 7.49991 14.1226C11.1576 14.1226 14.1227 11.1574 14.1227 7.49972C14.1227 3.84204 11.1576 0.876892 7.49991 0.876892ZM1.82708 7.49972C1.82708 4.36671 4.36689 1.82689 7.49991 1.82689C10.6329 1.82689 13.1727 4.36671 13.1727 7.49972C13.1727 10.6327 10.6329 13.1726 7.49991 13.1726C4.36689 13.1726 1.82708 10.6327 1.82708 7.49972ZM5.03747 9.21395C4.87949 8.98746 4.56782 8.93193 4.34133 9.08991C4.11484 9.24789 4.05931 9.55956 4.21729 9.78605C4.93926 10.8211 6.14033 11.5 7.50004 11.5C8.85974 11.5 10.0608 10.8211 10.7828 9.78605C10.9408 9.55956 10.8852 9.24789 10.6587 9.08991C10.4323 8.93193 10.1206 8.98746 9.9626 9.21395C9.41963 9.99238 8.51907 10.5 7.50004 10.5C6.481 10.5 5.58044 9.99238 5.03747 9.21395ZM5.37503 6.84998C5.85828 6.84998 6.25003 6.45815 6.25003 5.97498C6.25003 5.4918 5.85828 5.09998 5.37503 5.09998C4.89179 5.09998 4.50003 5.4918 4.50003 5.97498C4.50003 6.45815 4.89179 6.84998 5.37503 6.84998ZM10.5 5.97498C10.5 6.45815 10.1083 6.84998 9.62503 6.84998C9.14179 6.84998 8.75003 6.45815 8.75003 5.97498C8.75003 5.4918 9.14179 5.09998 9.62503 5.09998C10.1083 5.09998 10.5 5.4918 10.5 5.97498Z"
+				fill="currentColor"
+				fillRule="evenodd"
+				clipRule="evenodd"
+			/>
+		</svg>
+	)
+}
+
+/** The composer's post button — an up arrow. */
+export function SendIcon() {
+	return (
+		<svg width="15" height="15" viewBox="0 0 15 15" fill="none" aria-hidden="true">
+			<path
+				d="M7.14645 2.14645C7.34171 1.95118 7.65829 1.95118 7.85355 2.14645L11.8536 6.14645C12.0488 6.34171 12.0488 6.65829 11.8536 6.85355C11.6583 7.04882 11.3417 7.04882 11.1464 6.85355L8 3.70711L8 12.5C8 12.7761 7.77614 13 7.5 13C7.22386 13 7 12.7761 7 12.5L7 3.70711L3.85355 6.85355C3.65829 7.04882 3.34171 7.04882 3.14645 6.85355C2.95118 6.65829 2.95118 6.34171 3.14645 6.14645L7.14645 2.14645Z"
+				fill="currentColor"
+				fillRule="evenodd"
+				clipRule="evenodd"
+			/>
+		</svg>
+	)
+}
+
+/** 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 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
+				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. 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 30 30" fill="none" aria-hidden="true">
+			<path
+				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 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 30 30" fill="none" aria-hidden="true">
+			<path
+				fill="currentColor"
+				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>
+	)
+}

package/src/ui/reaction-picker.tsx

@@ -1,5 +1,6 @@
 import { useCallback, useId, type ComponentType } from 'react'
 import {
+	TldrawUiButton,
 	TldrawUiDropdownMenuContent,
 	TldrawUiDropdownMenuRoot,
 	TldrawUiDropdownMenuTrigger,
@@ -8,8 +9,8 @@ import {
 	useTranslation,
 } from 'tldraw'
 import { EmojiPicker, type EmojiPickerProps } from './emoji-picker'
+import { SmileyIcon } from './icons'
 import { RenderReaction } from './reaction'
-import { TooltipButton } from './tooltip-button'
 
 /** @public */
 export interface ReactionPickerProps {
@@ -78,9 +79,14 @@ export function ReactionPicker({
 	return (
 		<TldrawUiDropdownMenuRoot id={id}>
 			<TldrawUiDropdownMenuTrigger>
-				<TooltipButton tooltip={msg('comments.add-reaction')} className={className}>
+				<TldrawUiButton
+					type="icon"
+					tooltip={msg('comments.add-reaction')}
+					title={msg('comments.add-reaction')}
+					className={className}
+				>
 					<SmileyIcon />
-				</TooltipButton>
+				</TldrawUiButton>
 			</TldrawUiDropdownMenuTrigger>
 			{/* left-aligned under the trigger, so the grid opens rightward off the card's edge */}
 			<TldrawUiDropdownMenuContent side="bottom" align="start" alignOffset={0} sideOffset={4}>
@@ -94,16 +100,3 @@ export function ReactionPicker({
 		</TldrawUiDropdownMenuRoot>
 	)
 }
-
-function SmileyIcon() {
-	return (
-		<svg width="15" height="15" viewBox="0 0 15 15" fill="none" aria-hidden="true">
-			<path
-				d="M7.49991 0.876892C3.84222 0.876892 0.877075 3.84204 0.877075 7.49972C0.877075 11.1574 3.84222 14.1226 7.49991 14.1226C11.1576 14.1226 14.1227 11.1574 14.1227 7.49972C14.1227 3.84204 11.1576 0.876892 7.49991 0.876892ZM1.82708 7.49972C1.82708 4.36671 4.36689 1.82689 7.49991 1.82689C10.6329 1.82689 13.1727 4.36671 13.1727 7.49972C13.1727 10.6327 10.6329 13.1726 7.49991 13.1726C4.36689 13.1726 1.82708 10.6327 1.82708 7.49972ZM5.03747 9.21395C4.87949 8.98746 4.56782 8.93193 4.34133 9.08991C4.11484 9.24789 4.05931 9.55956 4.21729 9.78605C4.93926 10.8211 6.14033 11.5 7.50004 11.5C8.85974 11.5 10.0608 10.8211 10.7828 9.78605C10.9408 9.55956 10.8852 9.24789 10.6587 9.08991C10.4323 8.93193 10.1206 8.98746 9.9626 9.21395C9.41963 9.99238 8.51907 10.5 7.50004 10.5C6.481 10.5 5.58044 9.99238 5.03747 9.21395ZM5.37503 6.84998C5.85828 6.84998 6.25003 6.45815 6.25003 5.97498C6.25003 5.4918 5.85828 5.09998 5.37503 5.09998C4.89179 5.09998 4.50003 5.4918 4.50003 5.97498C4.50003 6.45815 4.89179 6.84998 5.37503 6.84998ZM10.5 5.97498C10.5 6.45815 10.1083 6.84998 9.62503 6.84998C9.14179 6.84998 8.75003 6.45815 8.75003 5.97498C8.75003 5.4918 9.14179 5.09998 9.62503 5.09998C10.1083 5.09998 10.5 5.4918 10.5 5.97498Z"
-				fill="currentColor"
-				fillRule="evenodd"
-				clipRule="evenodd"
-			/>
-		</svg>
-	)
-}

package/src/ui/reaction.tsx

@@ -46,19 +46,23 @@ export function Reaction({
 	ReactionTooltip = DefaultReactionTooltip,
 	onClick,
 }: ReactionProps) {
+	// An inert pill (no handler) is plain content, not a control — rendering it as a span keeps it
+	// valid inside an anchor row (e.g. a notification list item) and out of the tab order.
+	const Tag = onClick ? 'button' : 'span'
 	const pill = (
-		<button
+		<Tag
 			className={active ? 'tlui-cmt-reaction tlui-cmt-reaction--active' : 'tlui-cmt-reaction'}
-			type="button"
+			{...(onClick
+				? { type: 'button' as const, 'aria-pressed': active, onClick }
+				: { role: 'img' as const })}
 			// The emoji alone announces as its unicode name ("thumbs up"); pairing it with the count
-			// is what makes the pill's state legible to a screen reader.
+			// is what makes the pill's state legible to a screen reader. The inert span needs the
+			// img role for the label to be announced at all.
 			aria-label={`${emoji} ${count}`}
-			aria-pressed={active}
-			onClick={onClick}
 		>
 			<span className="tlui-cmt-reaction__emoji">{renderReaction(emoji)}</span>
 			<span className="tlui-cmt-reaction__count">{count}</span>
-		</button>
+		</Tag>
 	)
 
 	// A bare pill when hovering is suppressed, or when there's no one to name.

package/src/ui/send-button.tsx

@@ -1,3 +1,5 @@
+import { SendIcon } from './icons'
+
 /** @public */
 export interface SendButtonProps {
 	/** The button's accessible name (e.g. "Send"). Shown as an up-arrow icon, so this is its label. */
@@ -17,14 +19,7 @@ export function SendButton({ label, disabled, onClick }: SendButtonProps) {
 			aria-label={label}
 			title={label}
 		>
-			<svg width="15" height="15" viewBox="0 0 15 15" fill="none" aria-hidden="true">
-				<path
-					d="M7.14645 2.14645C7.34171 1.95118 7.65829 1.95118 7.85355 2.14645L11.8536 6.14645C12.0488 6.34171 12.0488 6.65829 11.8536 6.85355C11.6583 7.04882 11.3417 7.04882 11.1464 6.85355L8 3.70711L8 12.5C8 12.7761 7.77614 13 7.5 13C7.22386 13 7 12.7761 7 12.5L7 3.70711L3.85355 6.85355C3.65829 7.04882 3.34171 7.04882 3.14645 6.85355C2.95118 6.65829 2.95118 6.34171 3.14645 6.14645L7.14645 2.14645Z"
-					fill="currentColor"
-					fillRule="evenodd"
-					clipRule="evenodd"
-				/>
-			</svg>
+			<SendIcon />
 		</button>
 	)
 }