@tldraw/commenting 5.3.0-internal.c5c7f1d817d0 → 5.3.0-next.2fa9c61a8de6

package/src/ui/comments.css

@@ -3,25 +3,35 @@
 .tlui-cmt-card {
 	position: relative;
 	display: flex;
-	gap: 10px;
-	padding: 12px;
+	flex-direction: column;
+	gap: 8px;
+	padding: 8px;
 	width: 260px;
 	background: var(--tl-color-panel);
 	border: 1px solid var(--tl-color-divider);
-	border-radius: 12px;
+	border-radius: var(--tl-radius-3);
+}
+
+/* The avatar lives in the byline row (see Byline), so the body text below indents to line up with
+   the name — the avatar's width plus the head's gap. */
+.tlui-cmt-body {
+	padding-left: calc(28px + 6px);
 }
 
-/* hover-revealed controls (edit…) at the card's top-right */
+/* hover-revealed controls (edit, react…) stacked at the card's top-right */
 .tlui-cmt-card__actions {
 	position: absolute;
 	top: 6px;
 	right: 6px;
 	display: flex;
-	gap: 2px;
+	gap: 0;
 	opacity: 0;
 }
 .tlui-cmt-card:hover .tlui-cmt-card__actions,
-.tlui-cmt-card:focus-within .tlui-cmt-card__actions {
+.tlui-cmt-card:focus-within .tlui-cmt-card__actions,
+/* an open menu is portaled out of the card, so neither :hover nor :focus-within survives moving
+   the pointer into it — keep the controls up while their menu is open */
+.tlui-cmt-card__actions:has([data-state='open']) {
 	opacity: 1;
 }
 
@@ -32,26 +42,46 @@
 
 .tlui-cmt-head {
 	display: flex;
-	align-items: baseline;
+	align-items: center;
 	gap: 6px;
 }
 
 .tlui-cmt-author {
-	font-weight: 600;
-	font-size: 13px;
+	font-weight: 500;
+	font-size: 12px;
 	color: var(--tl-color-text-1);
+	/* a long name ellipsizes rather than pushing the time out or running under the actions */
+	min-width: 0;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
 }
 
 .tlui-cmt-time {
-	font-size: 11px;
+	font-size: 12px;
 	color: var(--tl-color-text-3);
+	flex-shrink: 0;
+	white-space: nowrap;
+}
+
+/* In the hover preview a long comment truncates with an ellipsis rather than growing the card —
+   ~7 lines (≈120px at this line height). Preview only. */
+.tlui-cmt-canvas-preview--thread .tlui-cmt-text {
+	display: -webkit-box;
+	-webkit-box-orient: vertical;
+	-webkit-line-clamp: 7;
+	line-clamp: 7;
+	overflow: hidden;
 }
 
 .tlui-cmt-text {
-	margin: 3px 0 0;
-	font-size: 13px;
+	margin: 0 0 6px;
+	font-size: 12px;
 	line-height: 1.4;
 	color: var(--tl-color-text-1);
+	/* Break long unbroken strings (URLs, keyboard-mashing) so they wrap inside the card instead of
+	   overflowing it. `anywhere` also lets the flex body shrink to the card width. */
+	overflow-wrap: anywhere;
 }
 
 .tlui-cmt-edited {
@@ -97,24 +127,8 @@
 	text-decoration: underline;
 }
 
-.tlui-cmt-avatar {
-	width: 28px;
-	height: 28px;
-	border-radius: 50%;
-	background: var(--tl-color-selected);
-	color: #fff;
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	font-size: 11px;
-	font-weight: 600;
-	flex-shrink: 0;
-}
-
-.tlui-cmt-avatar--image {
-	object-fit: cover;
-	background: none;
-}
+/* Avatar and mention styles live in @tldraw/mentions (src/mention.css) and are bundled into
+   commenting.css by copy-css-files.mjs. */
 
 /* composer — an avatar beside a rounded-rect field holding the rich-text input and the send button.
    Formatting is applied via markdown and keyboard shortcuts (no toolbar). The avatar aligns to the
@@ -132,14 +146,35 @@
 	display: flex;
 	align-items: center;
 	gap: 6px;
-	padding: 3px 3px 3px 12px;
-	background: var(--tl-color-muted-2);
+	padding: 3px 3px 3px 8px;
+	background: var(--tl-color-muted-0);
 	border: 1px solid var(--tl-color-divider);
-	border-radius: var(--tl-radius-3);
+	border-radius: var(--tl-radius-2);
+	/* The whole field reads as the text input — clicking its empty area focuses the editor
+	   (see CommentComposer). The send button restores its own pointer cursor. */
+	cursor: text;
 }
 
 .tlui-cmt-composer__field:focus-within {
 	border-color: var(--tl-color-selected);
+	background: var(--tl-color-panel);
+}
+
+/* Expanded: the content no longer fits on one line beside the send button, so the input takes
+   the full width and the send button drops to its own row, right-aligned. */
+.tlui-cmt-composer__field--expanded {
+	flex-wrap: wrap;
+	/* No vertical gap between the input and the send-button row it wraps onto. */
+	row-gap: 0;
+}
+.tlui-cmt-composer__field--expanded .tlui-cmt-composer__input-wrap {
+	flex-basis: 100%;
+	/* The field pads 8px left but only 3px right (the send button's inset). With the input
+	   spanning the full width, give the text the same 8px on the right. */
+	padding-right: 5px;
+}
+.tlui-cmt-composer__field--expanded .tlui-cmt-send {
+	margin-left: auto;
 }
 
 /* the editable area, with the placeholder overlaid while it's empty */
@@ -147,18 +182,32 @@
 	position: relative;
 	flex: 1;
 	min-width: 0;
-	padding: 3px 0;
+	/* Frames the input's line height symmetrically so the text sits centred in the field. Paired
+	   with the input's min-height, which equals its line height (no gap for the text to top-align
+	   into). Keeps the field's overall height. */
+	padding: 4.5px 0;
+}
+
+/* The hidden single-line measuring clone of the editor's content (see CommentComposer). */
+.tlui-cmt-composer__mirror {
+	position: absolute;
+	top: 0;
+	left: 0;
+	visibility: hidden;
+	pointer-events: none;
+	white-space: nowrap;
+	width: max-content;
+	max-height: none;
+	overflow: visible;
 }
 
 .tlui-cmt-input {
 	font: inherit;
-	font-size: 13px;
+	font-size: 12px;
 	line-height: 1.4;
 	color: var(--tl-color-text-1);
 	outline: none;
-	min-height: 20px;
-	max-height: 40vh;
-	overflow-y: auto;
+	min-height: 17px;
 	white-space: pre-wrap;
 	word-break: break-word;
 }
@@ -181,35 +230,42 @@
 
 .tlui-cmt-input__placeholder {
 	position: absolute;
-	top: 3px;
+	top: 4.5px;
 	left: 0;
-	font-size: 13px;
+	font-size: 12px;
 	line-height: 1.4;
 	color: var(--tl-color-text-3);
 	pointer-events: none;
 }
 
+/* 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 {
+	flex-shrink: 0;
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	width: 28px;
+	height: 28px;
 	border: 0;
 	border-radius: var(--tl-radius-2);
-	background: var(--tl-color-selected);
-	color: #fff;
-	font: inherit;
-	font-size: 12px;
-	font-weight: 600;
-	padding: 6px 12px;
+	background: transparent;
+	color: var(--tl-color-text-3);
 	cursor: pointer;
-	align-self: flex-end;
+	align-self: center;
 }
 
-.tlui-cmt-send:hover,
-.pseudo-hover .tlui-cmt-send {
-	background: color-mix(in srgb, var(--tl-color-selected) 88%, black);
+.tlui-cmt-send:not(:disabled) {
+	color: var(--tl-color-text-1);
+}
+
+.tlui-cmt-send:hover:not(:disabled) {
+	background: var(--tl-color-muted-2);
 }
 
-.tlui-cmt-send:active,
-.pseudo-active .tlui-cmt-send {
-	background: color-mix(in srgb, var(--tl-color-selected) 78%, black);
+.tlui-cmt-send:active:not(:disabled),
+.pseudo-active .tlui-cmt-send:not(:disabled) {
+	background: var(--tl-color-muted-1);
 }
 
 .tlui-cmt-send:focus-visible,
@@ -219,41 +275,68 @@
 }
 
 .tlui-cmt-send:disabled {
-	opacity: 0.45;
+	background: transparent;
+	color: var(--tl-color-text-3);
 	cursor: not-allowed;
 }
 
-/* pin */
+/* The shared marker treatment. To the pointer a comment pin and a count badge are the same
+   object — a token sitting on the canvas — so they rest and lift identically; everything shared
+   lives here so the two can't drift apart. */
+.tlui-cmt-marker {
+	box-shadow: var(--tlui-cmt-marker-shadow);
+	cursor: pointer;
+	transition:
+		transform var(--tlui-cmt-marker-transition),
+		box-shadow var(--tlui-cmt-marker-transition);
+}
+
+.tlui-cmt-marker:hover {
+	transform: scale(var(--tlui-cmt-marker-hover-scale));
+}
+
+/* The hover shadow is for closed markers only — an open one keeps its selection ring, which this
+   box-shadow would otherwise override (the hover selector outranks the --open rule). */
+.tlui-cmt-marker:not(.tlui-cmt-marker--open):hover {
+	box-shadow: var(--tlui-cmt-marker-shadow-hover);
+}
+
+/* Count badges don't react to hover — no scale, no shadow lift. Only pins do. */
+.tlui-cmt-count-badge:hover {
+	transform: none;
+	box-shadow: var(--tlui-cmt-marker-shadow);
+}
+
+/* Pins don't scale on hover — only the shadow lifts. */
+.tlui-cmt-pin:hover {
+	transform: none;
+}
+
+/* open: the thread (or a stack's list) is showing — the active marker just keeps its lift shadow,
+   no selection ring. */
+.tlui-cmt-marker--open {
+	box-shadow: var(--tlui-cmt-marker-shadow);
+}
+
+/* pin — a canvas marker: a white teardrop holding the author's avatar circle, so a thread is
+   identifiable at a glance. */
 .tlui-cmt-pin {
-	width: 34px;
-	height: 34px;
-	border-radius: 50% 50% 50% 3px;
-	background: var(--tl-color-selected);
+	--tlui-cmt-marker-size: var(--tlui-cmt-pin-size);
+	width: var(--tlui-cmt-marker-size);
+	height: var(--tlui-cmt-marker-size);
+	border-radius: 50% 50% 50% 0;
+	background: var(--tl-color-panel);
 	color: #fff;
 	display: flex;
 	align-items: center;
 	justify-content: center;
 	font-size: 14px;
 	font-weight: 600;
-	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
-	cursor: pointer;
-	transition:
-		transform 0.08s ease,
-		box-shadow 0.08s ease;
 }
-
-.tlui-cmt-pin:hover,
-.pseudo-hover .tlui-cmt-pin {
-	transform: scale(1.08);
-	box-shadow: 0 3px 10px rgba(0, 0, 0, 0.32);
-}
-
-/* open: the thread is showing — a selection ring marks the active pin */
-.tlui-cmt-pin--open {
-	box-shadow:
-		0 0 0 3px var(--tl-color-panel),
-		0 0 0 5px var(--tl-color-selected),
-		0 2px 6px rgba(0, 0, 0, 0.25);
+/* The pin holds the author's 22px avatar circle, centred in its 28px face. */
+.tlui-cmt-pin .tlui-cmt-avatar {
+	width: 22px;
+	height: 22px;
 }
 
 /* resolved: a solid, muted grey (the default --tl-color-muted-1 is 10% black, so it goes
@@ -267,19 +350,18 @@
 	color: hsl(0, 0%, 72%);
 }
 
-/* count badge */
+/* count badge — the same marker as a pin. */
 .tlui-cmt-count-badge {
-	width: 34px;
-	height: 34px;
+	width: var(--tlui-cmt-marker-size);
+	height: var(--tlui-cmt-marker-size);
 	border-radius: 50%;
 	display: flex;
 	align-items: center;
 	justify-content: center;
 	background: var(--tl-color-text-1);
 	color: var(--tl-color-panel);
-	font-size: 13px;
+	font-size: 12px;
 	font-weight: 700;
-	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
 	user-select: none;
 }
 
@@ -287,7 +369,6 @@
 .tlui-cmt-thread {
 	display: flex;
 	flex-direction: column;
-	gap: 8px;
 	width: 300px;
 }
 
@@ -316,128 +397,99 @@
 /* reactions */
 .tlui-cmt-reactions {
 	display: flex;
-	gap: 6px;
+	flex-wrap: wrap;
+	gap: 4px;
+	margin-top: 6px;
 }
 
 .tlui-cmt-reaction {
 	display: inline-flex;
 	align-items: center;
-	gap: 5px;
-	padding: 3px 9px;
-	border-radius: 999px;
-	border: 1px solid var(--tl-color-divider);
-	background: var(--tl-color-panel);
+	gap: 4px;
+	padding: 2px 6px;
+	border: none;
+	border-radius: var(--tl-radius-1);
+	background: var(--tl-color-muted-2);
 	font: inherit;
-	font-size: 12px;
+	font-size: 10px;
+	font-weight: 400;
 	color: var(--tl-color-text-1);
 	cursor: pointer;
 }
 
-.tlui-cmt-reaction:hover,
-.pseudo-hover .tlui-cmt-reaction {
-	border-color: var(--tl-color-selected);
+/* 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 {
+	background: var(--tl-color-muted-1);
 }
 
+/* a reaction you're part of fills with the selection colour, so "I reacted with this" stands out
+   from the grey pills of reactions you haven't joined. */
 .tlui-cmt-reaction--active {
-	border-color: var(--tl-color-selected);
-	background: color-mix(in srgb, var(--tl-color-selected) 12%, var(--tl-color-panel));
+	background: color-mix(in srgb, var(--tl-color-selected) 28%, var(--tl-color-panel));
 }
 
-.tlui-cmt-reaction__count {
-	color: var(--tl-color-text-3);
+.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 */
+.tlui-cmt-reaction__emoji {
+	font-size: 10px;
+	line-height: 1;
 }
 
-.tlui-cmt-reaction--add {
+.tlui-cmt-reaction__count {
 	color: var(--tl-color-text-3);
-	font-weight: 600;
+	font-variant-numeric: tabular-nums;
 }
 
-/* mention */
-.tlui-cmt-mention {
-	color: var(--tl-color-selected);
-	font-weight: 600;
-	background: color-mix(in srgb, var(--tl-color-selected) 12%, transparent);
-	padding: 0 4px;
-	border-radius: 4px;
+.tlui-cmt-reaction--active .tlui-cmt-reaction__count {
+	color: var(--tl-color-text-1);
 }
 
-/* mention picker */
-.tlui-cmt-mention-list {
-	display: flex;
-	flex-direction: column;
-	gap: 1px;
+/* emoji picker */
+.tlui-cmt-emoji-picker {
+	display: grid;
+	grid-template-columns: repeat(5, 40px);
+	gap: 0;
 	padding: 4px;
-	width: 100%;
-	box-sizing: border-box;
-	max-height: 260px;
-	overflow-y: auto;
-	color: var(--tl-color-text-1, #1d1d1d);
-	background: var(--tl-color-panel, #fff);
-	border: 1px solid var(--tl-color-divider, rgba(0, 0, 0, 0.08));
-	border-radius: 10px;
-	box-shadow: var(--tl-shadow-2, 0 2px 12px rgba(0, 0, 0, 0.14));
 }
 
-.tlui-cmt-mention-list__item {
+.tlui-cmt-emoji-picker__item {
+	position: relative;
 	display: flex;
 	align-items: center;
-	gap: 8px;
-	padding: 6px 8px;
+	justify-content: center;
+	width: 40px;
+	height: 40px;
+	padding: 0;
 	border: none;
-	background: transparent;
-	border-radius: 6px;
-	cursor: pointer;
-	text-align: left;
-	color: var(--tl-color-text-1);
+	background: none;
 	font: inherit;
+	font-size: 21px;
+	line-height: 1;
+	cursor: pointer;
 }
 
-.tlui-cmt-mention-list__item--active,
-.tlui-cmt-mention-list__item:hover {
-	background: var(--tl-color-muted-2, rgba(0, 0, 0, 0.06));
-}
-
-.tlui-cmt-mention-list__text {
-	display: flex;
-	flex-direction: column;
-	min-width: 0;
-	line-height: 1.3;
-}
-
-.tlui-cmt-mention-list__name {
-	font-size: 13px;
-	font-weight: 500;
-	white-space: nowrap;
-	overflow: hidden;
-	text-overflow: ellipsis;
-}
-
-.tlui-cmt-mention-list__you {
-	margin-left: 4px;
-	font-weight: 400;
-	color: var(--tl-color-text-3);
+/* Inset wash behind the glyph — the 40px hit cells tile edge-to-edge, the squares sit 4px apart,
+   like the thread action buttons. Sits under the emoji so an opaque selected fill can't hide it. */
+.tlui-cmt-emoji-picker__item::after {
+	content: '';
+	position: absolute;
+	inset: 2px;
+	z-index: -1;
+	border-radius: var(--tl-radius-2);
 }
-
-.tlui-cmt-mention-list__secondary {
-	font-size: 12px;
-	color: var(--tl-color-text-3);
-	white-space: nowrap;
-	overflow: hidden;
-	text-overflow: ellipsis;
+.tlui-cmt-emoji-picker__item:hover {
+	z-index: 1;
 }
-
-.tlui-cmt-mention-list--empty {
-	padding: 8px 10px;
-	width: 100%;
-	box-sizing: border-box;
-	color: var(--tl-color-text-3);
-	font-size: 13px;
+.tlui-cmt-emoji-picker__item:hover::after {
+	background: var(--tl-color-muted-2);
 }
 
-/* the @-picker popup — caret-anchored above the page, positioned by the suggestion plugin */
-.tlui-cmt-mention-popup {
-	position: fixed;
-	z-index: var(--tl-layer-menus);
+.tlui-cmt-emoji-picker__item--active::after {
+	background: color-mix(in srgb, var(--tl-color-selected) 28%, var(--tl-color-panel));
 }
 
 /* empty state */
@@ -458,43 +510,109 @@
 .tlui-cmt-empty__message {
 	margin: 0;
 	color: var(--tl-color-text-3);
-	font-size: 13px;
+	font-size: 12px;
 	line-height: 1.4;
 }
 
-/* a comment thread: an elevated panel — the same surface treatment as the toolbar — holding a
-   header, an optional resolved banner, the comments, and a reply composer */
+/* a comment thread: an elevated panel holding a header, an optional resolved banner, the
+   comments, and a reply composer */
+/* The thread panel's layout metrics live on the container because two separate portals need them:
+   the panel itself, and the canvas hover preview, which has to land its first comment on exactly
+   the pixel the panel would. Deriving the preview's offset from these means the two can't drift —
+   retune the padding or the header here and the preview follows. */
+.tl-container {
+	/* Everything that has to line up against a pin — its preview's bridge, the draft composer's
+	   offsets, `PIN_SIZE` in thread-view.tsx — derives from this, so the pin's size stays one
+	   number. */
+	--tlui-cmt-pin-size: 28px;
+	/* A cluster badge and a stack badge are this square — the same size as a pin, so the marker
+	   kinds read as one family. The hover preview measures its bridge against it, so the bridge
+	   stops at the marker's edge instead of covering it. Mirrored by `MARKER_SIZE` in
+	   thread-view.tsx. */
+	--tlui-cmt-marker-size: var(--tlui-cmt-pin-size);
+	/* How a marker sits, lifts, and rings. Shared so a pin and a badge respond identically.
+	   shadow-3's depth without its `inset 1px panel-contrast` edge — that inset reads as a white
+	   border on a coloured pin (it's invisible on the panel-white menus shadow-3 is meant for). */
+	--tlui-cmt-marker-shadow: 0px 1px 2px hsl(0, 0%, 0%, 28%), 0px 2px 6px hsl(0, 0%, 0%, 14%);
+	--tlui-cmt-marker-shadow-hover: var(--tlui-cmt-marker-shadow);
+	--tlui-cmt-marker-hover-scale: 1.08;
+	--tlui-cmt-marker-transition: 0.08s ease;
+	--tlui-cmt-thread-padding: 12px;
+	--tlui-cmt-thread-gap: 0px;
+	--tlui-cmt-thread-action-size: 26px;
+	/* 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
+	   literal; a soft dark blur reads on both themes. */
+	--tlui-cmt-pill-shadow: 0 0 0 1px var(--tl-color-divider), 0 1px 3px hsl(0, 0%, 0%, 0.05);
+}
+
 .tlui-cmt-thread {
+	position: relative;
 	display: flex;
 	flex-direction: column;
-	gap: 6px;
 	width: 300px;
-	padding: 8px;
 	background: var(--tl-color-panel);
 	border-radius: var(--tl-radius-4);
-	box-shadow: var(--tl-shadow-2);
+	box-shadow: var(--tl-shadow-3);
 }
+/* A pill of its own, floating above the panel's top-right corner and overlapping its top edge. */
 .tlui-cmt-thread__header {
+	position: absolute;
+	right: 10px;
+	bottom: calc(100% - 15px);
 	display: flex;
+	gap: 2px;
+	padding: 2px;
+	background: var(--tl-color-panel);
+	border-radius: var(--tl-radius-3);
+	box-shadow: var(--tlui-cmt-pill-shadow);
+	transition: opacity 0.1s ease;
+}
+/* The first comment's hover actions surface right where the header pill sits, so hide the pill
+   while that comment is hovered — one pill in the corner, never two stacked. */
+.tlui-cmt-thread:has(.tlui-cmt-thread__list > :first-child:hover)
+	.tlui-cmt-thread__header:not(:has(.tlui-cmt-thread__title)) {
+	opacity: 0;
+	pointer-events: none;
+}
+/* A title puts the header back in the panel, in flow. The pill above is tuned for the actions-only
+   case tldraw itself uses: right-anchored and only as wide as its buttons, so a title inside it
+   would grow leftwards off the panel's edge and float over whatever sits above. `header` is public
+   API (see `CommentThreadProps`), so it has to keep laying out sensibly for anyone passing one. */
+.tlui-cmt-thread__header:has(.tlui-cmt-thread__title) {
+	position: static;
 	align-items: center;
-	justify-content: space-between;
-	padding: 2px 2px 2px 4px;
+	padding: 0;
+	background: none;
+	border-radius: 0;
+	box-shadow: none;
 }
 .tlui-cmt-thread__title {
+	padding: 10px 12px;
 	font-size: 12px;
-	font-weight: 600;
+	line-height: 20px;
+	font-weight: 500;
 	color: var(--tl-color-text-1);
 }
 .tlui-cmt-thread__actions {
 	display: flex;
-	gap: 2px;
-}
+	gap: 0;
+	/* Right-align the actions whether or not the header has a title (it currently has none, so
+	   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;
-	width: 22px;
-	height: 22px;
+	width: 40px;
+	height: 40px;
 	padding: 0;
 	border: none;
 	border-radius: 6px;
@@ -504,11 +622,31 @@
 	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 {
-	background: var(--tl-color-muted-2);
 	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 {
+	color: var(--tl-color-danger);
 }
 .tlui-cmt-thread__resolved {
+	margin: 4px 12px;
 	padding: 6px 10px;
 	border-radius: 8px;
 	background: var(--tl-color-muted-2);
@@ -518,16 +656,113 @@
 .tlui-cmt-thread__list {
 	display: flex;
 	flex-direction: column;
-	gap: 6px;
+	gap: var(--tlui-cmt-thread-gap);
+}
+/* When nothing follows the list (a resolved thread has no composer or footer) the last comment
+   would sit against the panel's rounded bottom — restore the trailing inset the composer supplies. */
+.tlui-cmt-thread__list:last-child {
+	padding-bottom: 12px;
+}
+/* The footer slot sits where the composer would — its content (e.g. a sign-in prompt) sits at
+   the thread's trailing edge, like the composer's send button. */
+.tlui-cmt-thread__footer {
+	display: flex;
+	justify-content: flex-end;
+	padding: 4px 2px 2px;
+}
+/* Inside a thread, author identity is a small colour dot, no initial — the letter doesn't fit
+   at this size. */
+.tlui-cmt-thread .tlui-cmt-avatar,
+.tlui-cmt-canvas-preview--thread .tlui-cmt-avatar,
+.tlui-cmt-canvas-preview--list .tlui-cmt-avatar,
+.tlui-cmt-stack-list .tlui-cmt-avatar {
+	width: 12px;
+	height: 12px;
+	font-size: 0;
 }
+
+.tlui-cmt-thread .tlui-cmt-composer {
+	padding: 12px;
+}
+.tlui-cmt-thread .tlui-cmt-composer .tlui-cmt-avatar {
+	display: none;
+}
+
+/* The sidebar's rows use the same small colour dot as the thread view. */
+.tlui-cmt-list .tlui-cmt-avatar {
+	width: 14px;
+	height: 14px;
+	font-size: 0;
+	margin-top: 2px;
+}
+/* The sidebar row already leads with its own avatar (the flex row's first column); the byline's
+   avatar — added for the canvas thread views — would double it, so hide the byline's inside a row. */
+.tlui-cmt-list .tlui-cmt-head .tlui-cmt-avatar {
+	display: none;
+}
+
+/* The dot treatment is for colour-only identity — an image avatar stays full size. */
+.tlui-cmt-thread .tlui-cmt-avatar--image,
+.tlui-cmt-canvas-preview--thread .tlui-cmt-avatar--image,
+.tlui-cmt-canvas-preview--list .tlui-cmt-avatar--image,
+.tlui-cmt-stack-list .tlui-cmt-avatar--image {
+	/* Match the 12px colour dot's width so the body's calc(12px + 6px) indent still lines up under
+	   the byline name when the author has an image rather than a dot. */
+	width: 12px;
+	height: 12px;
+	margin-top: 0;
+}
+.tlui-cmt-list .tlui-cmt-avatar--image {
+	width: 24px;
+	height: 24px;
+	margin-top: 0;
+}
+
 /* inside the panel, comments are plain content — no surrounding box; the composer's field carries
-   its own surface. */
-.tlui-cmt-thread .tlui-cmt-card {
+   its own surface. The hover preview is the same panel without a header, so its comment is laid
+   out by the same rule rather than a copy of it. */
+.tlui-cmt-thread .tlui-cmt-card,
+.tlui-cmt-canvas-preview--thread .tlui-cmt-card {
 	width: 100%;
-	padding: 6px 0 6px 4px;
+	gap: 0;
+	padding: 0 12px;
 	background: transparent;
 	border: none;
 }
+/* The avatar is a 12px dot, so the body lines up 12px + the head's 6px gap in from the row. */
+.tlui-cmt-thread .tlui-cmt-body,
+.tlui-cmt-canvas-preview--thread .tlui-cmt-body,
+.tlui-cmt-canvas-preview--list .tlui-cmt-body,
+.tlui-cmt-stack-list .tlui-cmt-body {
+	padding-left: calc(12px + 6px);
+}
+/* Inside a panel the actions float as their own pill — the same pill the thread header is, in the
+   same corner (which is why the header hides while the first comment is hovered). It sits just
+   above the card's top edge rather than on the byline. */
+/* Line the card actions up with the header actions: flush to the full-width card's right edge (the
+   panel edge, matching the header ✕) and flush on the 40px byline row, so the 40px buttons fill it. */
+.tlui-cmt-thread .tlui-cmt-card .tlui-cmt-card__actions {
+	top: 0;
+	right: 0;
+}
+/* The byline row is 40px: on the opened thread it fits the action pills (react/edit/delete) that
+   float in its corner without the text running underneath; previews and collapsed cards carry the
+   same height so every comment row reads identically, solo or in a stack. */
+.tlui-cmt-thread .tlui-cmt-card .tlui-cmt-head,
+.tlui-cmt-canvas-preview--thread .tlui-cmt-card .tlui-cmt-head,
+.tlui-cmt-canvas-preview--list .tlui-cmt-card .tlui-cmt-head,
+.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);
+}
+.tlui-cmt-thread .tlui-cmt-card--you .tlui-cmt-head {
+	padding-right: calc(3 * var(--tlui-cmt-thread-action-size) + 10px);
+}
 
 /* comments list — thread summaries, one per row (used by the canvas sidebar) */
 .tlui-cmt-list {
@@ -546,15 +781,14 @@
 	border-bottom: 1px solid var(--tl-color-divider);
 }
 .tlui-cmt-list__header-title {
-	font-size: 11px;
-	font-weight: 600;
-	letter-spacing: 0.06em;
-	text-transform: uppercase;
-	color: var(--tl-color-text-3);
+	font-size: 12px;
+	font-weight: 500;
+	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;
@@ -567,6 +801,19 @@
 	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;
+}
 .tlui-cmt-header-btn:hover,
 .tlui-cmt-header-btn[data-state='open'] {
 	background: var(--tl-color-muted-2);
@@ -578,25 +825,44 @@
 	gap: 2px;
 }
 
+/* The commenting dropdowns' surface — a little air between the items and the menu edge. */
+.tlui-cmt-menu {
+	min-width: 100px;
+	padding: 4px;
+}
+
 /* a menu row with a label and a right-aligned shortcut hint (overflow menu) */
 .tlui-cmt-menu-item {
+	position: relative;
 	display: flex;
 	align-items: center;
 	justify-content: space-between;
 	gap: 24px;
 	width: 100%;
-	padding: 6px 8px;
+	min-height: 40px;
+	padding: 0 10px;
 	border: none;
-	border-radius: 6px;
 	background: transparent;
 	font: inherit;
-	font-size: 13px;
+	font-size: 12px;
 	color: var(--tl-color-text-1);
 	cursor: pointer;
 }
-.tlui-cmt-menu-item:hover {
+/* 36px visual inset within the 40px row — the hover wash the action and emoji buttons use. */
+.tlui-cmt-menu-item::after {
+	content: '';
+	position: absolute;
+	inset: 2px;
+	border-radius: var(--tl-radius-2);
+}
+.tlui-cmt-menu-item:hover::after {
 	background: var(--tl-color-muted-2);
 }
+/* Destructive menu entries (delete) — the same danger colour as tldraw's danger buttons. */
+.tlui-cmt-menu-item--danger {
+	color: var(--tl-color-danger);
+}
+
 .tlui-cmt-menu-item__shortcut {
 	color: var(--tl-color-text-3);
 	font-size: 12px;
@@ -609,7 +875,7 @@
 .tlui-cmt-list__empty {
 	padding: 20px 14px;
 	color: var(--tl-color-text-3);
-	font-size: 13px;
+	font-size: 12px;
 }
 .tlui-cmt-list__item {
 	display: flex;
@@ -622,12 +888,23 @@
 	font: inherit;
 	text-align: left;
 	cursor: pointer;
+	/* rows can render as anchors (for open-in-new-tab); keep them looking like list rows */
+	color: inherit;
+	text-decoration: none;
 }
 .tlui-cmt-list__item:hover {
 	background: var(--tl-color-muted-2);
 }
-.tlui-cmt-list__item--selected {
-	background: var(--tl-color-muted-1);
+/* 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 {
+	background: hsl(0, 0%, 0%, 5%);
+}
+.tl-theme__dark .tlui-cmt-list__item--selected,
+.tl-theme__dark .tlui-cmt-list__item--selected:hover {
+	background: hsl(0, 0%, 100%, 5%);
 }
 /* resolved rows mute their content but keep the "Resolved" marker legible */
 .tlui-cmt-list__item[data-resolved] .tlui-cmt-head,
@@ -640,13 +917,16 @@
 }
 .tlui-cmt-list__item-preview {
 	margin-top: 2px;
-	font-size: 13px;
+	font-size: 12px;
 	color: var(--tl-color-text-1);
 	overflow: hidden;
 	text-overflow: ellipsis;
 	display: -webkit-box;
 	-webkit-line-clamp: 2;
 	-webkit-box-orient: vertical;
+	/* Long unbroken strings (URLs, mashed keys) wrap onto the clamped lines instead of clipping
+	   mid-string — same treatment as the card body. */
+	overflow-wrap: anywhere;
 }
 /* meta line under the preview: page label and/or a resolved marker */
 .tlui-cmt-list__item-meta {
@@ -670,9 +950,14 @@
 	border-radius: 4px;
 	background: var(--tl-color-muted-2);
 }
-.tlui-cmt-list__item-count {
-	flex-shrink: 0;
-	align-self: center;
+.tlui-cmt-list__item-replies {
+	display: inline-flex;
+	align-items: center;
+}
+/* reply count under a preview card's opening comment — the thread continues past what's shown */
+.tlui-cmt-card__replies {
+	display: block;
+	margin-top: 6px;
 	font-size: 12px;
 	color: var(--tl-color-text-3);
 }