@tldraw/commenting 0.0.0-bootstrap → 5.3.0-internal.5f14a24c179e

package/commenting.css

@@ -4,7 +4,7 @@
 
 /* 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;
@@ -16,7 +16,7 @@
 }
 
 /* hover-revealed controls (edit…) at the card's top-right */
-.cmt-card__actions {
+.tlui-cmt-card__actions {
 	position: absolute;
 	top: 6px;
 	right: 6px;
@@ -24,65 +24,68 @@
 	gap: 2px;
 	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 {
 	opacity: 1;
 }
 
-.cmt-body {
+.tlui-cmt-body {
 	flex: 1;
 	min-width: 0;
 }
 
-.cmt-head {
+.tlui-cmt-head {
 	display: flex;
 	align-items: baseline;
 	gap: 6px;
 }
 
-.cmt-author {
+.tlui-cmt-author {
 	font-weight: 600;
 	font-size: 13px;
 	color: var(--tl-color-text-1);
 }
 
-.cmt-time {
+.tlui-cmt-time {
 	font-size: 11px;
 	color: var(--tl-color-text-3);
 }
 
-.cmt-text {
+.tlui-cmt-text {
 	margin: 3px 0 0;
 	font-size: 13px;
 	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,18 +93,18 @@
 	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 {
+.tlui-cmt-avatar {
 	width: 28px;
 	height: 28px;
 	border-radius: 50%;
@@ -115,7 +118,7 @@
 	flex-shrink: 0;
 }
 
-.cmt-avatar--image {
+.tlui-cmt-avatar--image {
 	object-fit: cover;
 	background: none;
 }
@@ -123,14 +126,14 @@
 /* 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;
@@ -142,19 +145,47 @@
 	border-radius: var(--tl-radius-3);
 }
 
-.cmt-composer__field:focus-within {
+.tlui-cmt-composer__field:focus-within {
 	border-color: var(--tl-color-selected);
 }
 
+/* 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;
+}
+.tlui-cmt-composer__field--expanded .tlui-cmt-composer__input-wrap {
+	flex-basis: 100%;
+	/* The field pads 12px left but only 3px right (the send button's inset). With the input
+	   spanning the full width, give the text the same 12px on the right. */
+	padding-right: 9px;
+}
+.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;
 }
 
-.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;
 	line-height: 1.4;
@@ -167,23 +198,23 @@
 	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;
 	left: 0;
@@ -193,7 +224,7 @@
 	pointer-events: none;
 }
 
-.cmt-send {
+.tlui-cmt-send {
 	border: 0;
 	border-radius: var(--tl-radius-2);
 	background: var(--tl-color-selected);
@@ -206,33 +237,33 @@
 	align-self: flex-end;
 }
 
-.cmt-send:hover,
-.pseudo-hover .cmt-send {
+.tlui-cmt-send:hover,
+.pseudo-hover .tlui-cmt-send {
 	background: color-mix(in srgb, var(--tl-color-selected) 88%, black);
 }
 
-.cmt-send:active,
-.pseudo-active .cmt-send {
+.tlui-cmt-send:active,
+.pseudo-active .tlui-cmt-send {
 	background: color-mix(in srgb, var(--tl-color-selected) 78%, black);
 }
 
-.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 {
+.tlui-cmt-send:disabled {
 	opacity: 0.45;
 	cursor: not-allowed;
 }
 
 /* pin */
-.cmt-pin {
+.tlui-cmt-pin {
 	width: 34px;
 	height: 34px;
 	border-radius: 50% 50% 50% 3px;
-	background: var(--tl-color-selected);
+	background: var(--tlui-cmt-pin-color, var(--tl-color-selected));
 	color: #fff;
 	display: flex;
 	align-items: center;
@@ -246,33 +277,39 @@
 		box-shadow 0.08s ease;
 }
 
-.cmt-pin:hover,
-.pseudo-hover .cmt-pin {
+.tlui-cmt-pin:hover,
+.pseudo-hover .tlui-cmt-pin {
 	transform: scale(1.08);
+}
+
+/* The hover shadow is for closed pins only — an open pin keeps its selection ring, which this
+   box-shadow would otherwise override (the hover selector outranks the --open rule). */
+.tlui-cmt-pin:not(.tlui-cmt-pin--open):hover,
+.pseudo-hover .tlui-cmt-pin:not(.tlui-cmt-pin--open) {
 	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 {
+/* open: the thread is showing — a selection ring marks the active pin (in the pin's own tint) */
+.tlui-cmt-pin--open {
 	box-shadow:
 		0 0 0 3px var(--tl-color-panel),
-		0 0 0 5px var(--tl-color-selected),
+		0 0 0 5px var(--tlui-cmt-pin-color, var(--tl-color-selected)),
 		0 2px 6px rgba(0, 0, 0, 0.25);
 }
 
 /* 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 {
+.tlui-cmt-count-badge {
 	width: 34px;
 	height: 34px;
 	border-radius: 50%;
@@ -288,14 +325,14 @@
 }
 
 /* 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 +343,7 @@
 	letter-spacing: 0.04em;
 }
 
-.cmt-badge {
+.tlui-cmt-badge {
 	font-size: 10px;
 	font-weight: 600;
 	text-transform: none;
@@ -318,12 +355,12 @@
 }
 
 /* reactions */
-.cmt-reactions {
+.tlui-cmt-reactions {
 	display: flex;
 	gap: 6px;
 }
 
-.cmt-reaction {
+.tlui-cmt-reaction {
 	display: inline-flex;
 	align-items: center;
 	gap: 5px;
@@ -337,27 +374,27 @@
 	cursor: pointer;
 }
 
-.cmt-reaction:hover,
-.pseudo-hover .cmt-reaction {
+.tlui-cmt-reaction:hover,
+.pseudo-hover .tlui-cmt-reaction {
 	border-color: var(--tl-color-selected);
 }
 
-.cmt-reaction--active {
+.tlui-cmt-reaction--active {
 	border-color: var(--tl-color-selected);
 	background: color-mix(in srgb, var(--tl-color-selected) 12%, var(--tl-color-panel));
 }
 
-.cmt-reaction__count {
+.tlui-cmt-reaction__count {
 	color: var(--tl-color-text-3);
 }
 
-.cmt-reaction--add {
+.tlui-cmt-reaction--add {
 	color: var(--tl-color-text-3);
 	font-weight: 600;
 }
 
 /* mention */
-.cmt-mention {
+.tlui-cmt-mention {
 	color: var(--tl-color-selected);
 	font-weight: 600;
 	background: color-mix(in srgb, var(--tl-color-selected) 12%, transparent);
@@ -366,7 +403,7 @@
 }
 
 /* mention picker */
-.cmt-mention-list {
+.tlui-cmt-mention-list {
 	display: flex;
 	flex-direction: column;
 	gap: 1px;
@@ -382,7 +419,7 @@
 	box-shadow: var(--tl-shadow-2, 0 2px 12px rgba(0, 0, 0, 0.14));
 }
 
-.cmt-mention-list__item {
+.tlui-cmt-mention-list__item {
 	display: flex;
 	align-items: center;
 	gap: 8px;
@@ -396,19 +433,19 @@
 	font: inherit;
 }
 
-.cmt-mention-list__item--active,
-.cmt-mention-list__item:hover {
+.tlui-cmt-mention-list__item--active,
+.tlui-cmt-mention-list__item:hover {
 	background: var(--tl-color-muted-2, rgba(0, 0, 0, 0.06));
 }
 
-.cmt-mention-list__text {
+.tlui-cmt-mention-list__text {
 	display: flex;
 	flex-direction: column;
 	min-width: 0;
 	line-height: 1.3;
 }
 
-.cmt-mention-list__name {
+.tlui-cmt-mention-list__name {
 	font-size: 13px;
 	font-weight: 500;
 	white-space: nowrap;
@@ -416,13 +453,13 @@
 	text-overflow: ellipsis;
 }
 
-.cmt-mention-list__you {
+.tlui-cmt-mention-list__you {
 	margin-left: 4px;
 	font-weight: 400;
 	color: var(--tl-color-text-3);
 }
 
-.cmt-mention-list__secondary {
+.tlui-cmt-mention-list__secondary {
 	font-size: 12px;
 	color: var(--tl-color-text-3);
 	white-space: nowrap;
@@ -430,7 +467,7 @@
 	text-overflow: ellipsis;
 }
 
-.cmt-mention-list--empty {
+.tlui-cmt-mention-list--empty {
 	padding: 8px 10px;
 	width: 100%;
 	box-sizing: border-box;
@@ -439,13 +476,13 @@
 }
 
 /* the @-picker popup — caret-anchored above the page, positioned by the suggestion plugin */
-.cmt-mention-popup {
+.tlui-cmt-mention-popup {
 	position: fixed;
 	z-index: var(--tl-layer-menus);
 }
 
 /* empty state */
-.cmt-empty {
+.tlui-cmt-empty {
 	display: flex;
 	flex-direction: column;
 	align-items: center;
@@ -455,11 +492,11 @@
 	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;
@@ -468,7 +505,7 @@
 
 /* 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 {
+.tlui-cmt-thread {
 	display: flex;
 	flex-direction: column;
 	gap: 6px;
@@ -478,22 +515,22 @@
 	border-radius: var(--tl-radius-4);
 	box-shadow: var(--tl-shadow-2);
 }
-.cmt-thread__header {
+.tlui-cmt-thread__header {
 	display: flex;
 	align-items: center;
 	justify-content: space-between;
 	padding: 2px 2px 2px 4px;
 }
-.cmt-thread__title {
+.tlui-cmt-thread__title {
 	font-size: 12px;
 	font-weight: 600;
 	color: var(--tl-color-text-1);
 }
-.cmt-thread__actions {
+.tlui-cmt-thread__actions {
 	display: flex;
 	gap: 2px;
 }
-.cmt-thread__action {
+.tlui-cmt-thread__action {
 	display: flex;
 	align-items: center;
 	justify-content: center;
@@ -508,25 +545,55 @@
 	line-height: 1;
 	cursor: pointer;
 }
-.cmt-thread__action:hover {
+.tlui-cmt-thread__action:hover {
 	background: var(--tl-color-muted-2);
 	color: var(--tl-color-text-1);
 }
-.cmt-thread__resolved {
+.tlui-cmt-thread__resolved {
 	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;
 }
+/* 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 {
+	width: 14px;
+	height: 14px;
+	font-size: 0;
+	margin-top: 2px;
+}
+
+/* The reply composer carries no avatar at all — the field spans the thread's full width. */
+.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 dot treatment is for colour-only identity — an image avatar stays full size. */
+.tlui-cmt-thread .tlui-cmt-avatar--image,
+.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 {
+.tlui-cmt-thread .tlui-cmt-card {
 	width: 100%;
 	padding: 6px 0 6px 4px;
 	background: transparent;
@@ -534,13 +601,13 @@
 }
 
 /* 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 +616,14 @@
 	padding: 6px 6px 6px 14px;
 	border-bottom: 1px solid var(--tl-color-divider);
 }
-.cmt-list__header-title {
-	font-size: 11px;
+.tlui-cmt-list__header-title {
+	font-size: 13px;
 	font-weight: 600;
-	letter-spacing: 0.06em;
-	text-transform: uppercase;
-	color: var(--tl-color-text-3);
+	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 {
 	display: flex;
 	align-items: center;
 	justify-content: center;
@@ -571,19 +636,24 @@
 	color: var(--tl-color-text-2);
 	cursor: pointer;
 }
-.cmt-header-btn:hover,
-.cmt-header-btn[data-state='open'] {
+.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 {
+	padding: 4px;
+}
+
 /* a menu row with a label and a right-aligned shortcut hint (overflow menu) */
-.cmt-menu-item {
+.tlui-cmt-menu-item {
 	display: flex;
 	align-items: center;
 	justify-content: space-between;
@@ -594,28 +664,33 @@
 	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 {
+.tlui-cmt-menu-item:hover {
 	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;
 }
-.cmt-list__item {
+.tlui-cmt-list__item {
 	display: flex;
 	gap: 10px;
 	width: 100%;
@@ -627,22 +702,30 @@
 	text-align: left;
 	cursor: pointer;
 }
-.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;
 	color: var(--tl-color-text-1);
@@ -651,9 +734,12 @@
 	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,20 +747,20 @@
 	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 {
+.tlui-cmt-list__item-count {
 	flex-shrink: 0;
 	align-self: center;
 	font-size: 12px;
@@ -683,70 +769,76 @@
 
 /* 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);
 	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;
 }
 
+/* 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;
+}
+
 /* Badges are clickable (zoom to the cluster's first split). */
-.cmt-canvas-cluster {
+.tlui-cmt-canvas-cluster {
 	transform: translate(-50%, -50%);
 	pointer-events: auto;
 	cursor: pointer;
 }
 
-.cmt-cluster-fade {
+.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;
 }
 
 /* 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 +848,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,19 +866,47 @@
 	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;
 }
-.cmt-canvas-pin__marker:active {
-	cursor: grabbing;
+
+/* 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 styling keys off the marker. The hover shadow is for closed pins only: an
+   open pin keeps its selection ring, which the shadow would otherwise override. */
+.tlui-cmt-canvas-pin__marker:hover .tlui-cmt-pin {
+	transform: scale(1.08);
+}
+.tlui-cmt-canvas-pin__marker:hover .tlui-cmt-pin:not(.tlui-cmt-pin--open) {
+	box-shadow: 0 3px 10px rgba(0, 0, 0, 0.32);
 }
 
 /* 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;
@@ -795,32 +915,41 @@
 /* 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 {
+.tlui-cmt-canvas-composer {
 	position: absolute;
 	z-index: var(--tl-layer-menus);
 	pointer-events: auto;
-	transform: translateY(8px);
+	/* Anchor the draft avatar bottom-left like the pins it becomes: it is 34px wide and sits 4px
+	   into the row, so its bottom-left corner is 4px right of and 4 + 34 = 38px below the
+	   composer's top-left corner. */
+	transform: translate(-4px, -38px);
 	/* 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 {
+
+/* 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 4 + 34/2 = 21px into the composer. */
+.tlui-cmt-canvas-composer--region {
+	transform: translate(-21px, -21px);
+}
+.tlui-cmt-canvas-composer .tlui-cmt-composer__field {
 	background: var(--tl-color-panel);
 	border-color: transparent;
 	border-radius: var(--tl-radius-4);
 	box-shadow: var(--tl-shadow-2);
 }
 
-/* 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;