@tldraw/collaboration 0.0.0-bootstrap → 5.3.0-canary.31036673d3f8

package/collaboration.css

@@ -2,87 +2,227 @@
 /* This file is created by the copy-css-files.mjs script in packages/collaboration. */
 /* It combines the stylesheets of the collaboration umbrella's sub-packages. */
 
+/* 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. */
-.cmt-card {
+.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 */
-.cmt-card__actions {
+/* 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;
 }
-.cmt-card:hover .cmt-card__actions,
-.cmt-card:focus-within .cmt-card__actions {
+.tlui-cmt-card:hover .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;
 }
 
-.cmt-body {
+.tlui-cmt-body {
 	flex: 1;
 	min-width: 0;
 }
 
-.cmt-head {
+.tlui-cmt-head {
 	display: flex;
-	align-items: baseline;
+	align-items: center;
 	gap: 6px;
 }
 
-.cmt-author {
-	font-weight: 600;
-	font-size: 13px;
+.tlui-cmt-author {
+	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;
 }
 
-.cmt-time {
-	font-size: 11px;
+.tlui-cmt-time {
+	font-size: 12px;
 	color: var(--tl-color-text-3);
+	flex-shrink: 0;
+	white-space: nowrap;
 }
 
-.cmt-text {
-	margin: 3px 0 0;
-	font-size: 13px;
+/* 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: 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;
 }
 
-.cmt-edited {
+.tlui-cmt-edited {
 	font-style: italic;
 }
 
 /* rendered rich text inside a comment body — bare tags emitted by the comment renderer
    (paragraphs, lists, code, highlight, links), matching the limited comment extension set. */
-.cmt-text p {
+.tlui-cmt-text p {
 	margin: 0;
 }
 
-.cmt-text p + p,
-.cmt-text p + ul,
-.cmt-text p + ol,
-.cmt-text ul + p,
-.cmt-text ol + p {
+.tlui-cmt-text p + p,
+.tlui-cmt-text p + ul,
+.tlui-cmt-text p + ol,
+.tlui-cmt-text ul + p,
+.tlui-cmt-text ol + p {
 	margin-top: 6px;
 }
 
-.cmt-text ul,
-.cmt-text ol {
+.tlui-cmt-text ul,
+.tlui-cmt-text ol {
 	margin: 0;
 	padding-left: 18px;
 }
 
-.cmt-text code {
+.tlui-cmt-text code {
 	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
 	font-size: 0.92em;
 	background: var(--tl-color-muted-2);
@@ -90,212 +230,263 @@
 	padding: 0 3px;
 }
 
-.cmt-text mark {
+.tlui-cmt-text mark {
 	background: color-mix(in srgb, #ffeb3b 60%, transparent);
 	color: inherit;
 	border-radius: 2px;
 }
 
-.cmt-text a {
+.tlui-cmt-text a {
 	color: var(--tl-color-selected);
 	text-decoration: underline;
 }
 
-.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;
-}
-
-.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
    top so it stays put as the field grows to multiple lines. */
-.cmt-composer {
+.tlui-cmt-composer {
 	display: flex;
 	align-items: flex-start;
 	gap: 10px;
 	padding: 4px 0 8px 4px;
 }
 
-.cmt-composer__field {
+.tlui-cmt-composer__field {
 	flex: 1;
 	min-width: 0;
 	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;
 }
 
-.cmt-composer__field:focus-within {
+.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 */
-.cmt-composer__input-wrap {
+.tlui-cmt-composer__input-wrap {
 	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;
 }
 
-.cmt-input {
+/* 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;
 }
 
-.cmt-input p {
+.tlui-cmt-input p {
 	margin: 0;
 }
 
-.cmt-input p + p,
-.cmt-input p + ul,
-.cmt-input p + ol {
+.tlui-cmt-input p + p,
+.tlui-cmt-input p + ul,
+.tlui-cmt-input p + ol {
 	margin-top: 4px;
 }
 
-.cmt-input ul,
-.cmt-input ol {
+.tlui-cmt-input ul,
+.tlui-cmt-input ol {
 	margin: 0;
 	padding-left: 18px;
 }
 
-.cmt-input__placeholder {
+.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;
 }
 
-.cmt-send {
+/* 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:not(:disabled) {
+	color: var(--tl-color-text-1);
 }
 
-.cmt-send:hover,
-.pseudo-hover .cmt-send {
-	background: color-mix(in srgb, var(--tl-color-selected) 88%, black);
+.tlui-cmt-send:hover:not(:disabled) {
+	background: var(--tl-color-muted-2);
 }
 
-.cmt-send:active,
-.pseudo-active .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);
 }
 
-.cmt-send:focus-visible,
-.pseudo-focus-visible .cmt-send {
+.tlui-cmt-send:focus-visible,
+.pseudo-focus-visible .tlui-cmt-send {
 	outline: 2px solid var(--tl-color-selected);
 	outline-offset: 2px;
 }
 
-.cmt-send:disabled {
-	opacity: 0.45;
+.tlui-cmt-send:disabled {
+	background: transparent;
+	color: var(--tl-color-text-3);
 	cursor: not-allowed;
 }
 
-/* pin */
-.cmt-pin {
-	width: 34px;
-	height: 34px;
-	border-radius: 50% 50% 50% 3px;
-	background: var(--tl-color-selected);
+/* 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 {
+	--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;
 }
-
-.cmt-pin:hover,
-.pseudo-hover .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 */
-.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
    translucent over the canvas). Dark mode gets its own grey — the token's dark value is near-black. */
-.cmt-pin--resolved {
+.tlui-cmt-pin--resolved {
 	background: #dfe0e1;
 	color: hsl(214, 8%, 42%);
 }
-.tl-theme__dark .cmt-pin--resolved {
+.tl-theme__dark .tlui-cmt-pin--resolved {
 	background: hsl(240, 5%, 30%);
 	color: hsl(0, 0%, 72%);
 }
 
-/* count badge */
-.cmt-count-badge {
-	width: 34px;
-	height: 34px;
+/* count badge — the same marker as a pin. */
+.tlui-cmt-count-badge {
+	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;
 }
 
 /* thread */
-.cmt-thread {
+.tlui-cmt-thread {
 	display: flex;
 	flex-direction: column;
-	gap: 8px;
 	width: 300px;
 }
 
-.cmt-thread__head {
+.tlui-cmt-thread__head {
 	display: flex;
 	align-items: center;
 	gap: 8px;
@@ -306,7 +497,7 @@
 	letter-spacing: 0.04em;
 }
 
-.cmt-badge {
+.tlui-cmt-badge {
 	font-size: 10px;
 	font-weight: 600;
 	text-transform: none;
@@ -318,134 +509,105 @@
 }
 
 /* reactions */
-.cmt-reactions {
+.tlui-cmt-reactions {
 	display: flex;
-	gap: 6px;
+	flex-wrap: wrap;
+	gap: 4px;
+	margin-top: 6px;
 }
 
-.cmt-reaction {
+.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;
 }
 
-.cmt-reaction:hover,
-.pseudo-hover .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);
 }
 
-.cmt-reaction--active {
-	border-color: var(--tl-color-selected);
-	background: color-mix(in srgb, var(--tl-color-selected) 12%, var(--tl-color-panel));
+/* 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 {
+	background: color-mix(in srgb, var(--tl-color-selected) 28%, var(--tl-color-panel));
 }
 
-.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));
 }
 
-.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 */
-.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 */
-.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));
 }
 
-.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;
 }
 
-.cmt-mention-list__item--active,
-.cmt-mention-list__item:hover {
-	background: var(--tl-color-muted-2, rgba(0, 0, 0, 0.06));
-}
-
-.cmt-mention-list__text {
-	display: flex;
-	flex-direction: column;
-	min-width: 0;
-	line-height: 1.3;
-}
-
-.cmt-mention-list__name {
-	font-size: 13px;
-	font-weight: 500;
-	white-space: nowrap;
-	overflow: hidden;
-	text-overflow: ellipsis;
-}
-
-.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);
 }
-
-.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;
 }
-
-.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 */
-.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 */
-.cmt-empty {
+.tlui-cmt-empty {
 	display: flex;
 	flex-direction: column;
 	align-items: center;
@@ -455,50 +617,116 @@
 	width: 240px;
 }
 
-.cmt-empty__icon {
+.tlui-cmt-empty__icon {
 	font-size: 28px;
 }
 
-.cmt-empty__message {
+.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 */
-.cmt-thread {
+/* 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;
 }
-.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;
 }
-.cmt-thread__title {
+.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);
 }
-.cmt-thread__actions {
+.tlui-cmt-thread__actions {
 	display: flex;
-	gap: 2px;
-}
-.cmt-thread__action {
+	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,39 +736,156 @@
 	line-height: 1;
 	cursor: pointer;
 }
-.cmt-thread__action:hover {
-	background: var(--tl-color-muted-2);
+/* 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 {
 	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);
 }
-.cmt-thread__resolved {
+.tlui-cmt-thread__resolved {
+	margin: 4px 12px;
 	padding: 6px 10px;
 	border-radius: 8px;
 	background: var(--tl-color-muted-2);
 	font-size: 12px;
 	color: var(--tl-color-text-3);
 }
-.cmt-thread__list {
+.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. */
-.cmt-thread .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) */
-.cmt-list {
+.tlui-cmt-list {
 	display: flex;
 	flex-direction: column;
 	width: 100%;
 	min-height: 0;
 }
-.cmt-list__header {
+.tlui-cmt-list__header {
 	flex-shrink: 0;
 	display: flex;
 	align-items: center;
@@ -549,16 +894,15 @@
 	padding: 6px 6px 6px 14px;
 	border-bottom: 1px solid var(--tl-color-divider);
 }
-.cmt-list__header-title {
-	font-size: 11px;
-	font-weight: 600;
-	letter-spacing: 0.06em;
-	text-transform: uppercase;
-	color: var(--tl-color-text-3);
+.tlui-cmt-list__header-title {
+	font-size: 12px;
+	font-weight: 500;
+	color: var(--tl-color-text-1);
 }
 
 /* a small square icon button in the sidebar header (filter funnel, overflow …) */
-.cmt-header-btn {
+.tlui-cmt-header-btn {
+	position: relative;
 	display: flex;
 	align-items: center;
 	justify-content: center;
@@ -571,51 +915,83 @@
 	color: var(--tl-color-text-2);
 	cursor: pointer;
 }
-.cmt-header-btn:hover,
-.cmt-header-btn[data-state='open'] {
+/* 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);
 	color: var(--tl-color-text-1);
 }
-.cmt-list__header-actions {
+.tlui-cmt-list__header-actions {
 	display: flex;
 	align-items: center;
 	gap: 2px;
 }
 
+/* The commenting dropdowns' surface — a little air between the items and the menu edge. */
+.tlui-cmt-menu {
+	min-width: 100px;
+	padding: 4px;
+}
+
 /* a menu row with a label and a right-aligned shortcut hint (overflow menu) */
-.cmt-menu-item {
+.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;
 }
-.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);
 }
-.cmt-menu-item__shortcut {
+/* 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;
 }
-.cmt-list__items {
+.tlui-cmt-list__items {
 	flex: 1;
 	min-height: 0;
 	overflow-y: auto;
 }
-.cmt-list__empty {
+.tlui-cmt-list__empty {
 	padding: 20px 14px;
 	color: var(--tl-color-text-3);
-	font-size: 13px;
+	font-size: 12px;
 }
-.cmt-list__item {
+.tlui-cmt-list__item {
 	display: flex;
 	gap: 10px;
 	width: 100%;
@@ -626,34 +1002,48 @@
 	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;
 }
-.cmt-list__item:hover {
+.tlui-cmt-list__item:hover {
 	background: var(--tl-color-muted-2);
 }
-.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 */
-.cmt-list__item[data-resolved] .cmt-head,
-.cmt-list__item[data-resolved] .cmt-list__item-preview {
+.tlui-cmt-list__item[data-resolved] .tlui-cmt-head,
+.tlui-cmt-list__item[data-resolved] .tlui-cmt-list__item-preview {
 	opacity: 0.55;
 }
-.cmt-list__item-body {
+.tlui-cmt-list__item-body {
 	flex: 1;
 	min-width: 0;
 }
-.cmt-list__item-preview {
+.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 */
-.cmt-list__item-meta {
+.tlui-cmt-list__item-meta {
 	display: flex;
 	align-items: center;
 	gap: 8px;
@@ -661,92 +1051,371 @@
 	font-size: 11px;
 	color: var(--tl-color-text-3);
 }
-.cmt-list__item-resolved {
+.tlui-cmt-list__item-resolved {
 	display: inline-flex;
 	align-items: center;
 	gap: 3px;
 	font-weight: 600;
 }
-.cmt-list__item-page {
+.tlui-cmt-list__item-page {
 	display: inline-flex;
 	align-items: center;
 	padding: 1px 6px;
 	border-radius: 4px;
 	background: var(--tl-color-muted-2);
 }
-.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);
 }
 
 /* The comments layer is portaled into the editor container. Pins live in the canvas-in-front layer
    (beneath the UI panels at z-index 300), so the toolbar and style panel draw over them; the open
-   thread's popover portals up to the menus layer separately (`.cmt-canvas-popover`) so it isn't
+   thread's popover portals up to the menus layer separately (`.tlui-cmt-canvas-popover`) so it isn't
    clipped. Click-through except on its own children. */
-.cmt-canvas-layer {
+.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;
 }
 
-.cmt-canvas-pin,
-.cmt-canvas-cluster,
-.cmt-canvas-composer {
+.tlui-cmt-canvas-pin,
+.tlui-cmt-canvas-cluster,
+.tlui-cmt-canvas-composer {
 	position: absolute;
 }
 
-.cmt-canvas-pin,
-.cmt-canvas-composer {
+.tlui-cmt-canvas-composer {
 	pointer-events: auto;
 }
 
-/* Badges are clickable (zoom to the cluster's first split). */
-.cmt-canvas-cluster {
-	transform: translate(-50%, -50%);
+/* 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(0, -100%);
 	pointer-events: auto;
 	cursor: pointer;
 }
 
-.cmt-cluster-fade {
+/* 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;
 }
 
-.cmt-cluster-fade--entering {
+.tlui-cmt-cluster-fade--entering {
 	opacity: 0;
 }
 
-.cmt-cluster-fade--present {
+.tlui-cmt-cluster-fade--present {
 	opacity: 1;
 }
 
-.cmt-cluster-fade--exiting {
+.tlui-cmt-cluster-fade--exiting {
 	opacity: 0;
 }
 
-.cmt-cluster-fade--entering *,
-.cmt-cluster-fade--exiting * {
+.tlui-cmt-cluster-fade--entering *,
+.tlui-cmt-cluster-fade--exiting * {
 	pointer-events: none !important;
 }
 
 @media (prefers-reduced-motion: reduce) {
-	.cmt-cluster-fade {
+	.tlui-cmt-cluster-fade {
 		transition: none;
 	}
 }
 
 /* The open thread (its pin + popover) sits above the other pins, so nearby markers don't
    overlap its popover — they tuck behind it. */
-.cmt-canvas-pin--open {
+.tlui-cmt-canvas-pin--open {
 	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. */
-.cmt-canvas-region {
+.tlui-cmt-canvas-region {
 	position: absolute;
 	pointer-events: none;
 	border: 2px dashed var(--tl-color-selected);
@@ -756,13 +1425,13 @@
 
 /* A movable region body (the 'body'/'both' move modes): draggable to translate the whole region.
    Interactive, so it captures the interior while shown — the tradeoff of dragging the body. */
-.cmt-canvas-region--movable {
+.tlui-cmt-canvas-region--movable {
 	pointer-events: auto;
 	cursor: move;
 }
 
 /* Corner resize handles on a region box (three corners; the pin corner is the move handle). */
-.cmt-canvas-region-handle {
+.tlui-cmt-canvas-region-handle {
 	position: absolute;
 	width: 9px;
 	height: 9px;
@@ -774,59 +1443,200 @@
 	touch-action: none;
 }
 
-/* Centre the pin marker on its anchor point. */
-.cmt-canvas-pin__marker {
+/* 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));
 }
-.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. */
-.cmt-canvas-popover {
+.tlui-cmt-canvas-popover {
 	position: absolute;
 	z-index: var(--tl-layer-menus);
 	pointer-events: auto;
 }
 
 /* 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. */
-.cmt-canvas-composer {
+   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;
-}
-.cmt-canvas-composer .cmt-composer__field {
+	/* 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-color: transparent;
 	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-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. */
-.cmt-canvas-sidebar {
+/* 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;
 }