@tldraw/commenting 5.3.0-internal.c5c7f1d817d0 → 5.3.0-next.0362a8b4a246

package/commenting.css

@@ -2,30 +2,150 @@
 /* This file is created by the copy-css-files.mjs script in packages/commenting. */
 /* It combines the commenting package's ui and canvas stylesheets. */
 
+/* avatar — a person's image, or a single-initial coloured circle. Shared by the mention picker and,
+   via @tldraw/commenting, the comment UI. */
+.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;
+}
+
+/* mention pill */
+.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;
+}
+
+/* mention picker */
+.tlui-cmt-mention-list {
+	display: flex;
+	flex-direction: column;
+	gap: 4px;
+	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-radius: 10px;
+	/* shadow-3 (like the context menu) already carries a 1px inset edge — a separate `border`
+	   on top of it double-outlines the popup. */
+	box-shadow: var(--tl-shadow-3, 0 2px 12px rgba(0, 0, 0, 0.14));
+}
+
+.tlui-cmt-mention-list__item {
+	display: flex;
+	align-items: center;
+	gap: 8px;
+	padding: 6px 8px;
+	border: none;
+	background: transparent;
+	border-radius: 6px;
+	cursor: pointer;
+	text-align: left;
+	color: var(--tl-color-text-1);
+	font: inherit;
+}
+
+.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: 12px;
+	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);
+}
+
+.tlui-cmt-mention-list__secondary {
+	font-size: 12px;
+	color: var(--tl-color-text-3);
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
+}
+
+.tlui-cmt-mention-list--empty {
+	padding: 8px 10px;
+	width: 100%;
+	box-sizing: border-box;
+	color: var(--tl-color-text-3);
+	font-size: 13px;
+}
+
+/* the @-picker popup — anchored under the editor field, positioned by the suggestion plugin */
+.tlui-cmt-mention-popup {
+	position: fixed;
+	z-index: var(--tl-layer-menus);
+}
+
 /* Real comment UI components. Co-located so styles travel to any view (studio,
    canvas), and themed via tldraw's --tl-color tokens so they follow light/dark. */
 .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);
 }
 
-/* hover-revealed controls (edit…) at the card's top-right */
+/* 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, 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;
 }
 
@@ -36,26 +156,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 {
@@ -101,24 +241,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
@@ -136,14 +260,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 */
@@ -151,18 +296,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;
 }
@@ -185,35 +344,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,
@@ -223,41 +389,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
@@ -271,19 +464,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;
 }
 
@@ -291,7 +483,6 @@
 .tlui-cmt-thread {
 	display: flex;
 	flex-direction: column;
-	gap: 8px;
 	width: 300px;
 }
 
@@ -320,128 +511,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));
 }
 
-.tlui-cmt-reaction--add {
+/* 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__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 */
@@ -462,43 +624,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;
 }
-.tlui-cmt-thread__header {
-	display: flex;
+/* 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;
@@ -508,11 +736,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);
@@ -522,16 +770,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 {
@@ -550,15 +895,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;
@@ -571,6 +915,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);
@@ -582,25 +939,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;
@@ -613,7 +989,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;
@@ -626,12 +1002,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,
@@ -644,13 +1031,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 {
@@ -674,9 +1064,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);
 }
@@ -688,7 +1083,10 @@
 .tlui-cmt-canvas-layer {
 	position: absolute;
 	inset: 0;
-	z-index: var(--tl-layer-canvas-in-front);
+	/* Just below the collaborator cursor layer, so cursors ride over the pins — and below the
+	   in-front content (250), so active tool UI covers both. Derived, not a literal, so the
+	   ordering can't silently drift if the cursor slot moves. */
+	z-index: calc(var(--tl-layer-collaborators) - 5);
 	pointer-events: none;
 }
 
@@ -698,18 +1096,53 @@
 	position: absolute;
 }
 
-.tlui-cmt-canvas-pin,
 .tlui-cmt-canvas-composer {
 	pointer-events: auto;
 }
 
-/* Badges are clickable (zoom to the cluster's first split). */
+/* The pin's only interactive surface is the square hit layer below — the wrapper itself is
+   inert. Its box sits at the anchor point, not over the (translated) visual, so letting it take
+   events would put a phantom hit zone beside the pin. */
+.tlui-cmt-canvas-pin {
+	pointer-events: none;
+}
+
+.tlui-cmt-button {
+	appearance: none;
+	margin: 0;
+	padding: 0;
+	border: none;
+	background: none;
+	color: inherit;
+	font: inherit;
+}
+
+/* Anchored by its bottom-left corner like a pin, so the badge sits up-and-right of the cluster's
+   centroid — the same visual-to-anchor relationship a single comment pin has. */
 .tlui-cmt-canvas-cluster {
-	transform: translate(-50%, -50%);
+	transform: translate(0, -100%);
 	pointer-events: auto;
 	cursor: pointer;
 }
 
+/* Keyboard focus has to be visible on the canvas, where there's no surrounding chrome to imply
+   it. The ring goes on the marker visual (the rounded pin/badge), not the button box, so it
+   traces the shape rather than a rectangle around it; the button's own outline is suppressed
+   because its box is offset from what you see. */
+.tlui-cmt-canvas-pin__marker:focus-visible,
+.tlui-cmt-canvas-cluster:focus-visible {
+	outline: none;
+}
+.tlui-cmt-canvas-pin__marker:focus-visible .tlui-cmt-marker,
+.tlui-cmt-canvas-cluster:focus-visible .tlui-cmt-marker {
+	outline: 2px solid var(--tl-color-selected);
+	outline-offset: 2px;
+}
+/* Focus should read like hover, so the pin lifts the same way when tabbed to. */
+.tlui-cmt-canvas-pin__marker:focus-visible .tlui-cmt-marker {
+	transform: scale(var(--tlui-cmt-marker-hover-scale));
+}
+
 .tlui-cmt-cluster-fade {
 	opacity: 1;
 	transition: opacity 150ms ease;
@@ -744,6 +1177,242 @@
 	z-index: 1;
 }
 
+/* The count badge standing in for a stack of coincident pins — same face as a cluster badge,
+   but clicking opens the stack's thread list rather than zooming (no zoom can separate them).
+   Re-enables pointer events: the badge lives inside `.tlui-cmt-canvas-pin`, which is inert
+   (`pointer-events: none`) so its box doesn't shadow the canvas — without this the badge renders
+   but can't be hovered or clicked, like the cluster badge's own `pointer-events: auto`. */
+.tlui-cmt-canvas-stack-badge {
+	/* Bottom-left anchored like the pins it stands in for, and like the cluster badge. */
+	transform: translate(0, -100%);
+	width: max-content;
+	pointer-events: auto;
+	cursor: pointer;
+}
+
+.tlui-cmt-canvas-stack-badge:focus-visible {
+	outline: none;
+}
+.tlui-cmt-canvas-stack-badge:focus-visible .tlui-cmt-marker {
+	outline: 2px solid var(--tl-color-selected);
+	outline-offset: 2px;
+	transform: scale(var(--tlui-cmt-marker-hover-scale));
+}
+
+/* The stack's popover content: one card per thread, the expanded thread inline among them. */
+.tlui-cmt-stack-list {
+	display: flex;
+	flex-direction: column;
+	gap: 10px;
+}
+
+/* The expanded thread is the only entry with pills floating above its panel — its header actions,
+   and its first comment's hover actions. Those reach ~15px up, past the list's 10px gap, so give
+   this one entry extra room: without it the pills land on the card above, and against the scroll
+   box's clip edge. Collapsed cards keep their own actions inside, so they need none of this. */
+.tlui-cmt-stack-list__thread {
+	margin-top: 8px;
+}
+
+/* Collapsed entries match the expanded thread's surface (same width, panel, elevation) so the
+   list reads as one column of cards with one of them opened up. */
+.tlui-cmt-stack-list__card {
+	box-sizing: border-box;
+	position: relative;
+	width: 300px;
+	background: var(--tl-color-panel);
+	border-radius: 12px;
+	box-shadow: var(--tl-shadow-3);
+	padding: 2px 12px 10px;
+	cursor: pointer;
+	text-align: left;
+	display: block;
+}
+
+/* The card's keyboard affordance, covering the whole surface so it's one target rather than a
+   control tucked in a corner. It's laid under the card's content instead of wrapping it: a comment
+   body renders its links as anchors, which can't be nested inside a button (see the note in
+   `StackThreadCard`). Pointer clicks anywhere still reach the card's own handler by bubbling. */
+.tlui-cmt-stack-list__card-action {
+	position: absolute;
+	inset: 0;
+	border-radius: inherit;
+	cursor: pointer;
+}
+
+.tlui-cmt-stack-list__card-action:focus-visible {
+	outline: 2px solid var(--tl-color-selected);
+	outline-offset: 2px;
+}
+
+/* The wrapper is the card's surface — inside it the comment is plain content, mirroring how the
+   thread panel flattens its own cards. Stacked above the action overlay so the body's links stay
+   clickable. */
+.tlui-cmt-stack-list__card .tlui-cmt-card {
+	position: relative;
+	width: 100%;
+	gap: 0;
+	padding: 0;
+	background: transparent;
+	border: none;
+}
+
+/* The hover preview, shown for any marker — a pin, a coincident stack, or a cluster badge. Live,
+   not a tooltip: the pointer travels into it to hover and click the cards.
+
+   Two elements, deliberately: this root is the hover *region* (it reaches back over the marker via
+   the bridge below), and `__panel` inside it is the visible surface. A pseudo-element's hover
+   counts as its host's, so a surface on this root would light up whenever the pointer was on the
+   marker — the pin would appear pressed just for being hovered. */
+.tlui-cmt-canvas-preview {
+	position: absolute;
+	z-index: var(--tl-layer-menus);
+	pointer-events: auto;
+}
+
+/* The bridge over the gap between the marker and the panel. Moving right off the pin would
+   otherwise cross bare canvas, and that leave would retract the panel before the pointer arrived.
+   Invisible, part of the panel's hover region, and only present while the panel is.
+
+   It spans the gap and stops there. Reaching any further would put it over the marker itself, and
+   since it sits in the menus layer — above the pins — it would take the marker's hover and clicks:
+   the pin would go dead exactly where it looks most alive. The marker needs no covering anyway, as
+   it carries the same hover handlers.
+
+   The gap is the panel's own offset (`--tlui-cmt-preview-offset`, set from `POPOVER_OFFSET` so
+   there's one source) less however far the marker reaches toward it, per variant below. */
+.tlui-cmt-canvas-preview::before {
+	content: '';
+	position: absolute;
+	top: 0;
+	bottom: 0;
+	right: 100%;
+	width: max(0px, var(--tlui-cmt-preview-bridge, 0px));
+}
+
+/* A pin is anchored at its bottom-left corner, so its full width lies between anchor and panel.
+   The popover and preview share a first-comment position now that the actions float outside the
+   panel rather than reserving a header row, so no vertical shift is needed. */
+.tlui-cmt-canvas-preview--thread {
+	--tlui-cmt-preview-bridge: calc(var(--tlui-cmt-preview-offset) - var(--tlui-cmt-pin-size));
+}
+
+/* A badge is anchored at its bottom-left corner like a pin, so its full width does too. */
+.tlui-cmt-canvas-preview--list {
+	--tlui-cmt-preview-bridge: calc(var(--tlui-cmt-preview-offset) - var(--tlui-cmt-marker-size));
+}
+
+.tlui-cmt-canvas-preview__panel {
+	display: flex;
+	flex-direction: column;
+}
+
+/* Previewing a single pin: the thread panel itself, minus the header — the same surface, width,
+   and flattened comment (see `.tlui-cmt-thread .tlui-cmt-card`), so the hover shows exactly what
+   the click opens. */
+.tlui-cmt-canvas-preview__panel--thread {
+	box-sizing: border-box;
+	width: 300px;
+	gap: var(--tlui-cmt-thread-gap);
+	/* Top/bottom only — the card pads its own sides now (12px), matching the expanded thread. A
+	   little extra below so the (often truncated) last line doesn't sit against the rounded edge. */
+	padding: 4px 0 8px;
+	background: var(--tl-color-panel);
+	border-radius: var(--tl-radius-4);
+	box-shadow: var(--tl-shadow-3);
+}
+/* The reply count is a short line that sits closer to the edge than a wrapped comment does, so give
+   it more room below when it's the panel's last line. */
+.tlui-cmt-canvas-preview__panel--thread:has(.tlui-cmt-card__replies) {
+	padding-bottom: 12px;
+}
+
+/* Previewing a stack or cluster: one card per thread, matching the card list a click opens. */
+.tlui-cmt-canvas-preview__panel--list {
+	gap: 8px;
+	padding: 4px 0 8px;
+}
+
+/* Matches the stack list's card surface, so a preview and the list it previews read as the same
+   object seen twice — once on hover, once opened. */
+.tlui-cmt-preview-card {
+	box-sizing: border-box;
+	width: 300px;
+	background: var(--tl-color-panel);
+	border-radius: 12px;
+	box-shadow: var(--tl-shadow-3);
+	/* A 2px nudge above the byline's centring — a boxed card reads a touch better with it than the
+	   single preview's flat card, which pads 0 vertically and leans on the panel + byline. */
+	padding: 2px 12px 10px;
+}
+
+.tlui-cmt-preview-card--selectable {
+	cursor: pointer;
+}
+
+/* Every card surface that tints on hover — a collapsed thread in a stack list, a preview card, and
+   the single-comment preview panel. One rule, because they're the same object to the eye.
+
+   The opaque low-surface token, not a translucent muted one: these float directly over the canvas,
+   where a translucent fill would let shapes show through.
+
+   The second line is why this isn't a one-liner. `--tl-shadow-3` ends with a 1px *inset* ring in
+   `--tl-color-panel-contrast` — pure white in light mode — and an inset shadow paints over the
+   background. At rest that's invisible (the panel is 99% white under a 100% white ring), but tint
+   the background to grey and the ring stays white, hugging the edge as a pale outline. Re-tinting
+   `--tl-color-panel-contrast` here wouldn't reach it: `--tl-shadow-3` is declared on the container,
+   so its var() was already substituted there and the white is baked into what we inherit. Instead
+   lay a ring of the new surface over the old one — first shadow in the list paints on top. */
+.tlui-cmt-stack-list__card:hover,
+.tlui-cmt-preview-card--selectable:hover,
+.tlui-cmt-canvas-preview__panel--thread.tlui-cmt-canvas-preview__panel--selectable:hover {
+	--tlui-cmt-preview-hover-surface: color-mix(
+		in srgb,
+		var(--tl-color-low) 50%,
+		var(--tl-color-panel)
+	);
+	background: var(--tlui-cmt-preview-hover-surface);
+	box-shadow:
+		inset 0 0 0 1px var(--tlui-cmt-preview-hover-surface),
+		var(--tl-shadow-3);
+	cursor: pointer;
+}
+
+.tlui-cmt-preview-card .tlui-cmt-card {
+	width: 100%;
+	gap: 0;
+	padding: 0;
+	background: transparent;
+	border: none;
+}
+
+/* A preview is a glance, not a list — past a few cards it says how many were left out rather than
+   growing to the height of the cluster. */
+.tlui-cmt-preview-more {
+	box-sizing: border-box;
+	width: 300px;
+	padding: 6px 14px;
+	border-radius: 12px;
+	background: var(--tl-color-panel);
+	box-shadow: var(--tl-shadow-3);
+	color: var(--tl-color-text-3);
+	font-size: 12px;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+	.tlui-cmt-canvas-preview {
+		animation: tlui-cmt-preview-in 120ms ease;
+	}
+	@keyframes tlui-cmt-preview-in {
+		from {
+			opacity: 0;
+		}
+		to {
+			opacity: 1;
+		}
+	}
+}
+
 /* A region anchor's area: a dashed box under the pins, non-interactive so canvas events pass
    through. Drawn for the live drag draft and for a region thread while hovered or open. */
 .tlui-cmt-canvas-region {
@@ -774,15 +1443,48 @@
 	touch-action: none;
 }
 
-/* Centre the pin marker on its anchor point. */
+/* Anchor the pin by its bottom-left corner, so the marker's one sharp corner (the pin shape's
+   3px bottom-left) points at the exact anchor point. */
 .tlui-cmt-canvas-pin__marker {
+	position: relative;
 	width: max-content;
-	transform: translate(-50%, -50%);
-	cursor: grab;
+	transform: translate(0, -100%);
+	/* Default at rest, like hovering a shape; the editor's move cursor while dragging (below). */
+	cursor: var(--tl-cursor-default);
 	touch-action: none;
+	pointer-events: none;
+}
+
+/* Dragging a pin shows the same move cursor as dragging a shape. */
+.tlui-cmt-canvas-pin--dragging .tlui-cmt-canvas-pin__marker {
+	cursor: var(--tl-cursor-move);
+}
+
+/* The predictable hit area: a fixed square over the marker's box, and the only part of the pin
+   that takes pointer events. Events over it target the marker (a pseudo-element's events report
+   its originating element), so the marker's handlers and :hover keep working — but the hit area
+   no longer stretches with pin content or scales with the hover transform. */
+.tlui-cmt-canvas-pin__marker::after {
+	content: '';
+	position: absolute;
+	inset: 0;
+	pointer-events: auto;
+}
+
+/* With the hit layer targeting the marker, the pin visual is never the hovered element itself
+   (`:hover` matches the target and its ancestors, and the pin is the marker's child) — so the
+   canvas pin's hover has to key off the hit layer instead of the marker's own `:hover`. Only the
+   selector differs: the values come from the same tokens the shared rule uses, so a pin on the
+   canvas and a badge (which is hovered directly) lift by exactly the same amount. */
+.tlui-cmt-canvas-pin__marker:hover .tlui-cmt-marker {
+	transform: scale(var(--tlui-cmt-marker-hover-scale));
 }
-.tlui-cmt-canvas-pin__marker:active {
-	cursor: grabbing;
+.tlui-cmt-canvas-pin__marker:hover .tlui-cmt-marker:not(.tlui-cmt-marker--open) {
+	box-shadow: var(--tlui-cmt-marker-shadow-hover);
+}
+/* The comment pin doesn't scale on hover — only the shadow lifts (badges still scale). */
+.tlui-cmt-canvas-pin__marker:hover .tlui-cmt-pin {
+	transform: none;
 }
 
 /* The open thread's popover — portaled to the menus layer (above the UI), positioned at the pin. */
@@ -793,40 +1495,148 @@
 }
 
 /* The placement composer — a distinct floating view (portaled to the menus layer, below the click
-   point): a pencil "draft" avatar beside a pill field that is itself the surface (no wrapping
-   panel). Scoped here so the in-thread reply composer keeps its own squarer look. */
+   point): a draft avatar pin beside a pill field that is itself the surface (no wrapping panel).
+   Scoped here so the in-thread reply composer keeps its own squarer look. */
 .tlui-cmt-canvas-composer {
 	position: absolute;
 	z-index: var(--tl-layer-menus);
 	pointer-events: auto;
-	transform: translateY(8px);
-	/* The rich-text editor has no intrinsic width (unlike the old <input>), so give the floating
-	   placement composer a definite width or it collapses to nothing. */
-	width: 280px;
+	/* Anchor the draft avatar bottom-left like the pins it becomes: it is a pin wide and sits 4px
+	   into the row, so its bottom-left corner is 4px right of and 4px + a pin below the composer's
+	   top-left corner. */
+	transform: translate(-4px, calc(-4px - var(--tlui-cmt-pin-size)));
+}
+
+/* A region placement centres the draft avatar on the region's pin corner — the pin it becomes
+   straddles that corner. The avatar's centre sits 4px + half a pin into the composer. */
+.tlui-cmt-canvas-composer--region {
+	--tlui-cmt-draft-avatar-centre: calc(4px + var(--tlui-cmt-pin-size) / 2);
+	transform: translate(
+		calc(-1 * var(--tlui-cmt-draft-avatar-centre)),
+		calc(-1 * var(--tlui-cmt-draft-avatar-centre))
+	);
+}
+
+/* Fallback placement (no composer to show): no draft avatar to anchor by, so no offset — a small
+   panel hanging off the click point, sized to its content (e.g. the host's sign-in prompt). */
+.tlui-cmt-canvas-composer--fallback {
+	transform: none;
+	width: auto;
+	display: flex;
+	flex-direction: column;
+	padding: 8px;
+	background: var(--tl-color-panel);
+	border-radius: var(--tl-radius-4);
+	box-shadow: var(--tl-shadow-3);
+}
+.tlui-cmt-canvas-composer .tlui-cmt-composer {
+	gap: 6px;
 }
+/* The card: a fixed 300×42 surface whose uniform 3px padding derives the 294×36 focusable input. */
 .tlui-cmt-canvas-composer .tlui-cmt-composer__field {
+	position: relative;
+	flex: none;
+	width: 300px;
+	min-height: 42px;
+	padding: 3px;
+	border: none;
 	background: var(--tl-color-panel);
-	border-color: transparent;
-	border-radius: var(--tl-radius-4);
+	border-radius: var(--tl-radius-3);
+	box-shadow: var(--tl-shadow-2);
+	/* The pin is anchored by its bottom corner at the click point and can't move; raise the taller
+	   card onto the shorter pin's centre instead. */
+	margin-top: -6px;
+}
+/* Focused (the placement composer autofocuses on mount): a selection-blue ring inset 3px from the
+   card edge, so the card frames a bordered input rather than the border sitting on the card edge. */
+.tlui-cmt-canvas-composer .tlui-cmt-composer__field:focus-within::before {
+	content: '';
+	position: absolute;
+	inset: 3px;
+	border: 1px solid var(--tl-color-selected);
+	border-radius: var(--tl-radius-2);
+	pointer-events: none;
+}
+/* The text sits 12px in from the focus ring rather than against it. The placeholder is absolutely
+   positioned (it ignores the wrap's padding), so it carries the same offset itself. */
+.tlui-cmt-canvas-composer .tlui-cmt-composer__input-wrap {
+	padding: 4.5px 12px;
+}
+.tlui-cmt-canvas-composer .tlui-cmt-composer__field--expanded .tlui-cmt-composer__input-wrap {
+	/* The base expanded rule re-pads the right edge for the squarer composer's geometry; here the
+	   12px is already symmetric. */
+	padding-right: 12px;
+}
+.tlui-cmt-canvas-composer .tlui-cmt-input__placeholder {
+	left: 12px;
+}
+/* The draft avatar previews the pin it becomes — a white 28px pin holding the author's 22px avatar
+   circle — sharing the composer's lift. Not interactive: it drops the pin's pointer cursor and
+   hover affordances (scale + shadow bump), but keeps a 40×40 hit area (the ::after below). */
+.tlui-cmt-canvas-composer .tlui-cmt-pin {
+	position: relative;
+	box-shadow: var(--tl-shadow-2);
+	cursor: default;
+}
+.tlui-cmt-canvas-composer .tlui-cmt-pin::after {
+	content: '';
+	position: absolute;
+	inset: -6px;
+}
+.tlui-cmt-canvas-composer .tlui-cmt-pin:hover {
+	transform: none;
 	box-shadow: var(--tl-shadow-2);
 }
+/* The placement composer's send button — a bare arrow, no pill: grey while empty, black once
+   there's something to send. A 28px square centred in the 36px input height, so its hover wash
+   clears the focus ring rather than butting against it; the ::after keeps a 40×40 hit area. */
+.tlui-cmt-canvas-composer .tlui-cmt-send {
+	position: relative;
+	width: 28px;
+	height: 28px;
+	margin-right: 4px;
+	background: transparent;
+	border-radius: var(--tl-radius-2);
+	color: var(--tl-color-text-3);
+}
+.tlui-cmt-canvas-composer .tlui-cmt-send::after {
+	content: '';
+	position: absolute;
+	inset: -6px;
+}
+.tlui-cmt-canvas-composer .tlui-cmt-send:not(:disabled) {
+	color: var(--tl-color-text-1);
+}
+/* Hover and press wash grey behind the bare arrow (the same treatment as the thread actions),
+   overriding the base button's blue fill. */
+.tlui-cmt-canvas-composer .tlui-cmt-send:hover:not(:disabled) {
+	background: var(--tl-color-muted-2);
+}
+.tlui-cmt-canvas-composer .tlui-cmt-send:active:not(:disabled) {
+	background: var(--tl-color-muted-1);
+}
+/* In the expanded (multi-line) layout the send drops to the bottom-right corner; give it the same
+   4px gap from the focus ring on the bottom that it already keeps on the right. */
+.tlui-cmt-canvas-composer .tlui-cmt-composer__field--expanded .tlui-cmt-send {
+	margin-bottom: 4px;
+}
 
-/* The comments list panel — a right-side surface shown while the comment tool is active. Below
-   the popover layer, so an open thread still draws over it. Sits under the top-right share panel
-   (top offset clears its ~48px height) and sizes to its content, scrolling past max-height rather
-   than stretching the full canvas height. */
+/* The comments list panel — a right-side surface shown while the comments sidebar is open. Below
+   the popover layer, so an open thread still draws over it. Its top aligns flush with the style
+   panel (48px from the top, clearing the share panel) and it sizes to its content, scrolling past
+   max-height rather than stretching the full canvas height. */
 .tlui-cmt-canvas-sidebar {
 	position: absolute;
-	top: 56px;
+	top: 48px;
 	right: 8px;
 	width: 280px;
-	max-height: calc(100% - 64px);
+	max-height: calc(100% - 56px);
 	z-index: var(--tl-layer-panels);
 	pointer-events: auto;
 	display: flex;
 	background: var(--tl-color-panel);
 	border-radius: var(--tl-radius-4);
-	box-shadow: var(--tl-shadow-2);
+	box-shadow: var(--tl-shadow-3);
 	overflow: hidden;
 }