@tldraw/commenting 0.0.0-bootstrap → 5.3.0-internal.1640468db8fd

package/src/ui/comments.css

@@ -1,6 +1,6 @@
 /* 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;
@@ -12,7 +12,7 @@
 }
 
 /* hover-revealed controls (edit…) at the card's top-right */
-.cmt-card__actions {
+.tlui-cmt-card__actions {
 	position: absolute;
 	top: 6px;
 	right: 6px;
@@ -20,65 +20,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;
+	align-items: center;
 	gap: 6px;
 }
 
-.cmt-author {
+.tlui-cmt-author {
 	font-weight: 600;
 	font-size: 13px;
 	color: var(--tl-color-text-1);
 }
 
-.cmt-time {
-	font-size: 11px;
+.tlui-cmt-time {
+	font-size: 10px;
 	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);
@@ -86,18 +89,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%;
@@ -111,7 +114,7 @@
 	flex-shrink: 0;
 }
 
-.cmt-avatar--image {
+.tlui-cmt-avatar--image {
 	object-fit: cover;
 	background: none;
 }
@@ -119,14 +122,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;
@@ -138,19 +141,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;
@@ -163,23 +194,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;
@@ -189,7 +220,7 @@
 	pointer-events: none;
 }
 
-.cmt-send {
+.tlui-cmt-send {
 	border: 0;
 	border-radius: var(--tl-radius-2);
 	background: var(--tl-color-selected);
@@ -202,33 +233,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;
@@ -242,33 +273,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%;
@@ -284,14 +321,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;
@@ -302,7 +339,7 @@
 	letter-spacing: 0.04em;
 }
 
-.cmt-badge {
+.tlui-cmt-badge {
 	font-size: 10px;
 	font-weight: 600;
 	text-transform: none;
@@ -314,12 +351,12 @@
 }
 
 /* reactions */
-.cmt-reactions {
+.tlui-cmt-reactions {
 	display: flex;
 	gap: 6px;
 }
 
-.cmt-reaction {
+.tlui-cmt-reaction {
 	display: inline-flex;
 	align-items: center;
 	gap: 5px;
@@ -333,27 +370,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);
@@ -362,7 +399,7 @@
 }
 
 /* mention picker */
-.cmt-mention-list {
+.tlui-cmt-mention-list {
 	display: flex;
 	flex-direction: column;
 	gap: 1px;
@@ -378,7 +415,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;
@@ -392,19 +429,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;
@@ -412,13 +449,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;
@@ -426,7 +463,7 @@
 	text-overflow: ellipsis;
 }
 
-.cmt-mention-list--empty {
+.tlui-cmt-mention-list--empty {
 	padding: 8px 10px;
 	width: 100%;
 	box-sizing: border-box;
@@ -435,13 +472,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;
@@ -451,11 +488,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;
@@ -464,7 +501,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;
@@ -474,22 +511,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;
@@ -504,25 +541,57 @@
 	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;
+}
+
+.tlui-cmt-thread .tlui-cmt-composer {
+	padding: 4px 0 0;
+}
+.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;
@@ -530,13 +599,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;
@@ -545,16 +614,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;
@@ -567,19 +634,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;
@@ -590,28 +662,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%;
@@ -623,22 +700,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);
@@ -647,9 +732,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;
@@ -657,20 +745,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;