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

package/src/ui/comments.css

@@ -197,8 +197,6 @@
 	pointer-events: none;
 	white-space: nowrap;
 	width: max-content;
-	max-height: none;
-	overflow: visible;
 }
 
 .tlui-cmt-input {
@@ -238,6 +236,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 +423,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 +443,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 +554,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 +618,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 +722,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 +751,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) */
@@ -786,36 +786,34 @@
 	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;
+/* 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. */
+.tlui-button.tlui-cmt-header-btn {
 	width: 26px;
+	min-width: 26px;
 	height: 26px;
 	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;
+   (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-cmt-header-btn:first-child::after {
+.tlui-button.tlui-cmt-header-btn:first-child::after {
 	left: -6px;
 }
-.tlui-cmt-header-btn:last-child::after {
+.tlui-button.tlui-cmt-header-btn:last-child::after {
 	right: -6px;
 }
-.tlui-cmt-header-btn:hover,
-.tlui-cmt-header-btn[data-state='open'] {
+.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);
 }

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: 'short' }).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: 'short' }).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: 'short' }).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

@@ -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,116 @@
+/* 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, 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.
+ *
+ * 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. 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">
+			<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"
+			/>
+		</svg>
+	)
+}
+
+/** Comment pins are hidden. */
+export function EyeClosedIcon() {
+	return (
+		<svg width="15" height="15" viewBox="0 0 15 15" 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"
+			/>
+		</svg>
+	)
+}
+
+/** The sidebar's filter menu trigger. */
+export function FilterIcon() {
+	return (
+		<svg width="15" height="15" viewBox="0 0 15 15" 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"
+			/>
+		</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>
 	)
 }

package/src/ui/visual-viewport.test.ts

@@ -0,0 +1,36 @@
+import { describe, expect, it } from 'vitest'
+import { getVisibleViewport } from './visual-viewport'
+
+function makeWindow(
+	innerWidth: number,
+	innerHeight: number,
+	vv?: { offsetTop: number; offsetLeft: number; width: number; height: number }
+): Window {
+	return { innerWidth, innerHeight, visualViewport: vv ?? null } as unknown as Window
+}
+
+describe('getVisibleViewport', () => {
+	it('reads the visual viewport, carrying its offset into the derived edges', () => {
+		const win = makeWindow(1024, 768, { offsetTop: 40, offsetLeft: 10, width: 900, height: 500 })
+		expect(getVisibleViewport(win)).toEqual({
+			top: 40,
+			left: 10,
+			width: 900,
+			height: 500,
+			bottom: 540,
+			right: 910,
+		})
+	})
+
+	it('falls back to the layout viewport when visualViewport is absent', () => {
+		const win = makeWindow(1024, 768)
+		expect(getVisibleViewport(win)).toEqual({
+			top: 0,
+			left: 0,
+			width: 1024,
+			height: 768,
+			bottom: 768,
+			right: 1024,
+		})
+	})
+})

package/src/ui/visual-viewport.ts

@@ -0,0 +1,27 @@
+// The visual viewport is the region actually on screen. The software keyboard (and pinch-zoom)
+// shrink it while leaving the layout viewport — and CSS `dvh` — unchanged, most notably on iOS.
+// So placing a panel above the keyboard means measuring against `window.visualViewport`, not CSS.
+// These helpers are the single place the commenting layer reads it.
+
+/** The on-screen viewport region in window coordinates, falling back to the layout viewport where
+ *  `visualViewport` is unavailable. `top`/`left` carry the viewport's own offset — on iOS this is
+ *  non-zero while the keyboard is open, and dropping it misplaces anything measured against it. */
+export interface VisibleViewport {
+	top: number
+	left: number
+	width: number
+	height: number
+	bottom: number
+	right: number
+}
+
+/** Read the visible viewport once. Call it inside a `visualViewport` resize/scroll handler to keep
+ *  a measurement current as the keyboard opens and closes. */
+export function getVisibleViewport(win: Window): VisibleViewport {
+	const vv = win.visualViewport
+	const top = vv ? vv.offsetTop : 0
+	const left = vv ? vv.offsetLeft : 0
+	const width = vv ? vv.width : win.innerWidth
+	const height = vv ? vv.height : win.innerHeight
+	return { top, left, width, height, bottom: top + height, right: left + width }
+}

package/dist-cjs/ui/tooltip-button.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../src/ui/tooltip-button.tsx"],
-  "sourcesContent": ["import { type ButtonHTMLAttributes, forwardRef } from 'react'\nimport { TldrawUiTooltip } from 'tldraw'\n\ninterface TooltipButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {\n\ttooltip: string\n}\n\n/** An icon button labelled by a styled tooltip. Forwards ref and props to the underlying button\n *  so `asChild` triggers (dropdown, tooltip) both compose onto the real element. */\nexport const TooltipButton = forwardRef<HTMLButtonElement, TooltipButtonProps>(\n\tfunction TooltipButton({ tooltip, children, ...props }, ref) {\n\t\treturn (\n\t\t\t<TldrawUiTooltip content={tooltip}>\n\t\t\t\t<button ref={ref} type=\"button\" aria-label={tooltip} {...props}>\n\t\t\t\t\t{children}\n\t\t\t\t</button>\n\t\t\t</TldrawUiTooltip>\n\t\t)\n\t}\n)\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAaI;AAbJ,mBAAsD;AACtD,oBAAgC;AAQzB,MAAM,oBAAgB;AAAA,EAC5B,SAASA,eAAc,EAAE,SAAS,UAAU,GAAG,MAAM,GAAG,KAAK;AAC5D,WACC,4CAAC,iCAAgB,SAAS,SACzB,sDAAC,YAAO,KAAU,MAAK,UAAS,cAAY,SAAU,GAAG,OACvD,UACF,GACD;AAAA,EAEF;AACD;",
-  "names": ["TooltipButton"]
-}

package/dist-esm/ui/tooltip-button.mjs

@@ -1,12 +0,0 @@
-import { jsx } from "react/jsx-runtime";
-import { forwardRef } from "react";
-import { TldrawUiTooltip } from "tldraw";
-const TooltipButton = forwardRef(
-  function TooltipButton2({ tooltip, children, ...props }, ref) {
-    return /* @__PURE__ */ jsx(TldrawUiTooltip, { content: tooltip, children: /* @__PURE__ */ jsx("button", { ref, type: "button", "aria-label": tooltip, ...props, children }) });
-  }
-);
-export {
-  TooltipButton
-};
-//# sourceMappingURL=tooltip-button.mjs.map

package/dist-esm/ui/tooltip-button.mjs.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../src/ui/tooltip-button.tsx"],
-  "sourcesContent": ["import { type ButtonHTMLAttributes, forwardRef } from 'react'\nimport { TldrawUiTooltip } from 'tldraw'\n\ninterface TooltipButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {\n\ttooltip: string\n}\n\n/** An icon button labelled by a styled tooltip. Forwards ref and props to the underlying button\n *  so `asChild` triggers (dropdown, tooltip) both compose onto the real element. */\nexport const TooltipButton = forwardRef<HTMLButtonElement, TooltipButtonProps>(\n\tfunction TooltipButton({ tooltip, children, ...props }, ref) {\n\t\treturn (\n\t\t\t<TldrawUiTooltip content={tooltip}>\n\t\t\t\t<button ref={ref} type=\"button\" aria-label={tooltip} {...props}>\n\t\t\t\t\t{children}\n\t\t\t\t</button>\n\t\t\t</TldrawUiTooltip>\n\t\t)\n\t}\n)\n"],
-  "mappings": "AAaI;AAbJ,SAAoC,kBAAkB;AACtD,SAAS,uBAAuB;AAQzB,MAAM,gBAAgB;AAAA,EAC5B,SAASA,eAAc,EAAE,SAAS,UAAU,GAAG,MAAM,GAAG,KAAK;AAC5D,WACC,oBAAC,mBAAgB,SAAS,SACzB,8BAAC,YAAO,KAAU,MAAK,UAAS,cAAY,SAAU,GAAG,OACvD,UACF,GACD;AAAA,EAEF;AACD;",
-  "names": ["TooltipButton"]
-}

package/src/ui/tooltip-button.tsx

@@ -1,20 +0,0 @@
-import { type ButtonHTMLAttributes, forwardRef } from 'react'
-import { TldrawUiTooltip } from 'tldraw'
-
-interface TooltipButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
-	tooltip: string
-}
-
-/** An icon button labelled by a styled tooltip. Forwards ref and props to the underlying button
- *  so `asChild` triggers (dropdown, tooltip) both compose onto the real element. */
-export const TooltipButton = forwardRef<HTMLButtonElement, TooltipButtonProps>(
-	function TooltipButton({ tooltip, children, ...props }, ref) {
-		return (
-			<TldrawUiTooltip content={tooltip}>
-				<button ref={ref} type="button" aria-label={tooltip} {...props}>
-					{children}
-				</button>
-			</TldrawUiTooltip>
-		)
-	}
-)