@tldraw/commenting 0.0.0-bootstrap

package/src/ui/comments.css

@@ -0,0 +1,678 @@
+/* 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 {
+	position: relative;
+	display: flex;
+	gap: 10px;
+	padding: 12px;
+	width: 260px;
+	background: var(--tl-color-panel);
+	border: 1px solid var(--tl-color-divider);
+	border-radius: 12px;
+}
+
+/* hover-revealed controls (edit…) at the card's top-right */
+.cmt-card__actions {
+	position: absolute;
+	top: 6px;
+	right: 6px;
+	display: flex;
+	gap: 2px;
+	opacity: 0;
+}
+.cmt-card:hover .cmt-card__actions,
+.cmt-card:focus-within .cmt-card__actions {
+	opacity: 1;
+}
+
+.cmt-body {
+	flex: 1;
+	min-width: 0;
+}
+
+.cmt-head {
+	display: flex;
+	align-items: baseline;
+	gap: 6px;
+}
+
+.cmt-author {
+	font-weight: 600;
+	font-size: 13px;
+	color: var(--tl-color-text-1);
+}
+
+.cmt-time {
+	font-size: 11px;
+	color: var(--tl-color-text-3);
+}
+
+.cmt-text {
+	margin: 3px 0 0;
+	font-size: 13px;
+	line-height: 1.4;
+	color: var(--tl-color-text-1);
+}
+
+.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 {
+	margin: 0;
+}
+
+.cmt-text p + p,
+.cmt-text p + ul,
+.cmt-text p + ol,
+.cmt-text ul + p,
+.cmt-text ol + p {
+	margin-top: 6px;
+}
+
+.cmt-text ul,
+.cmt-text ol {
+	margin: 0;
+	padding-left: 18px;
+}
+
+.cmt-text code {
+	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+	font-size: 0.92em;
+	background: var(--tl-color-muted-2);
+	border-radius: 3px;
+	padding: 0 3px;
+}
+
+.cmt-text mark {
+	background: color-mix(in srgb, #ffeb3b 60%, transparent);
+	color: inherit;
+	border-radius: 2px;
+}
+
+.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;
+}
+
+/* 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 {
+	display: flex;
+	align-items: flex-start;
+	gap: 10px;
+	padding: 4px 0 8px 4px;
+}
+
+.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);
+	border: 1px solid var(--tl-color-divider);
+	border-radius: var(--tl-radius-3);
+}
+
+.cmt-composer__field:focus-within {
+	border-color: var(--tl-color-selected);
+}
+
+/* the editable area, with the placeholder overlaid while it's empty */
+.cmt-composer__input-wrap {
+	position: relative;
+	flex: 1;
+	min-width: 0;
+	padding: 3px 0;
+}
+
+.cmt-input {
+	font: inherit;
+	font-size: 13px;
+	line-height: 1.4;
+	color: var(--tl-color-text-1);
+	outline: none;
+	min-height: 20px;
+	max-height: 40vh;
+	overflow-y: auto;
+	white-space: pre-wrap;
+	word-break: break-word;
+}
+
+.cmt-input p {
+	margin: 0;
+}
+
+.cmt-input p + p,
+.cmt-input p + ul,
+.cmt-input p + ol {
+	margin-top: 4px;
+}
+
+.cmt-input ul,
+.cmt-input ol {
+	margin: 0;
+	padding-left: 18px;
+}
+
+.cmt-input__placeholder {
+	position: absolute;
+	top: 3px;
+	left: 0;
+	font-size: 13px;
+	line-height: 1.4;
+	color: var(--tl-color-text-3);
+	pointer-events: none;
+}
+
+.cmt-send {
+	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;
+	cursor: pointer;
+	align-self: flex-end;
+}
+
+.cmt-send:hover,
+.pseudo-hover .cmt-send {
+	background: color-mix(in srgb, var(--tl-color-selected) 88%, black);
+}
+
+.cmt-send:active,
+.pseudo-active .cmt-send {
+	background: color-mix(in srgb, var(--tl-color-selected) 78%, black);
+}
+
+.cmt-send:focus-visible,
+.pseudo-focus-visible .cmt-send {
+	outline: 2px solid var(--tl-color-selected);
+	outline-offset: 2px;
+}
+
+.cmt-send:disabled {
+	opacity: 0.45;
+	cursor: not-allowed;
+}
+
+/* pin */
+.cmt-pin {
+	width: 34px;
+	height: 34px;
+	border-radius: 50% 50% 50% 3px;
+	background: var(--tl-color-selected);
+	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);
+}
+
+/* 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 {
+	background: #dfe0e1;
+	color: hsl(214, 8%, 42%);
+}
+.tl-theme__dark .cmt-pin--resolved {
+	background: hsl(240, 5%, 30%);
+	color: hsl(0, 0%, 72%);
+}
+
+/* count badge */
+.cmt-count-badge {
+	width: 34px;
+	height: 34px;
+	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-weight: 700;
+	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
+	user-select: none;
+}
+
+/* thread */
+.cmt-thread {
+	display: flex;
+	flex-direction: column;
+	gap: 8px;
+	width: 300px;
+}
+
+.cmt-thread__head {
+	display: flex;
+	align-items: center;
+	gap: 8px;
+	font-size: 12px;
+	font-weight: 600;
+	color: var(--tl-color-text-3);
+	text-transform: uppercase;
+	letter-spacing: 0.04em;
+}
+
+.cmt-badge {
+	font-size: 10px;
+	font-weight: 600;
+	text-transform: none;
+	letter-spacing: 0;
+	color: #fff;
+	background: var(--tl-color-muted-1);
+	padding: 1px 6px;
+	border-radius: 999px;
+}
+
+/* reactions */
+.cmt-reactions {
+	display: flex;
+	gap: 6px;
+}
+
+.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);
+	font: inherit;
+	font-size: 12px;
+	color: var(--tl-color-text-1);
+	cursor: pointer;
+}
+
+.cmt-reaction:hover,
+.pseudo-hover .cmt-reaction {
+	border-color: var(--tl-color-selected);
+}
+
+.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 {
+	color: var(--tl-color-text-3);
+}
+
+.cmt-reaction--add {
+	color: var(--tl-color-text-3);
+	font-weight: 600;
+}
+
+/* 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;
+}
+
+/* mention picker */
+.cmt-mention-list {
+	display: flex;
+	flex-direction: column;
+	gap: 1px;
+	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 {
+	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;
+}
+
+.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);
+}
+
+.cmt-mention-list__secondary {
+	font-size: 12px;
+	color: var(--tl-color-text-3);
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
+}
+
+.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 — caret-anchored above the page, positioned by the suggestion plugin */
+.cmt-mention-popup {
+	position: fixed;
+	z-index: var(--tl-layer-menus);
+}
+
+/* empty state */
+.cmt-empty {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	gap: 8px;
+	padding: 24px;
+	text-align: center;
+	width: 240px;
+}
+
+.cmt-empty__icon {
+	font-size: 28px;
+}
+
+.cmt-empty__message {
+	margin: 0;
+	color: var(--tl-color-text-3);
+	font-size: 13px;
+	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 {
+	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);
+}
+.cmt-thread__header {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	padding: 2px 2px 2px 4px;
+}
+.cmt-thread__title {
+	font-size: 12px;
+	font-weight: 600;
+	color: var(--tl-color-text-1);
+}
+.cmt-thread__actions {
+	display: flex;
+	gap: 2px;
+}
+.cmt-thread__action {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	width: 22px;
+	height: 22px;
+	padding: 0;
+	border: none;
+	border-radius: 6px;
+	background: transparent;
+	color: var(--tl-color-text-3);
+	font-size: 14px;
+	line-height: 1;
+	cursor: pointer;
+}
+.cmt-thread__action:hover {
+	background: var(--tl-color-muted-2);
+	color: var(--tl-color-text-1);
+}
+.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 {
+	display: flex;
+	flex-direction: column;
+	gap: 6px;
+}
+/* inside the panel, comments are plain content — no surrounding box; the composer's field carries
+   its own surface. */
+.cmt-thread .cmt-card {
+	width: 100%;
+	padding: 6px 0 6px 4px;
+	background: transparent;
+	border: none;
+}
+
+/* comments list — thread summaries, one per row (used by the canvas sidebar) */
+.cmt-list {
+	display: flex;
+	flex-direction: column;
+	width: 100%;
+	min-height: 0;
+}
+.cmt-list__header {
+	flex-shrink: 0;
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	gap: 8px;
+	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);
+}
+
+/* a small square icon button in the sidebar header (filter funnel, overflow …) */
+.cmt-header-btn {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	width: 26px;
+	height: 26px;
+	padding: 0;
+	border: none;
+	border-radius: 6px;
+	background: transparent;
+	color: var(--tl-color-text-2);
+	cursor: pointer;
+}
+.cmt-header-btn:hover,
+.cmt-header-btn[data-state='open'] {
+	background: var(--tl-color-muted-2);
+	color: var(--tl-color-text-1);
+}
+.cmt-list__header-actions {
+	display: flex;
+	align-items: center;
+	gap: 2px;
+}
+
+/* a menu row with a label and a right-aligned shortcut hint (overflow menu) */
+.cmt-menu-item {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	gap: 24px;
+	width: 100%;
+	padding: 6px 8px;
+	border: none;
+	border-radius: 6px;
+	background: transparent;
+	font: inherit;
+	font-size: 13px;
+	color: var(--tl-color-text-1);
+	cursor: pointer;
+}
+.cmt-menu-item:hover {
+	background: var(--tl-color-muted-2);
+}
+.cmt-menu-item__shortcut {
+	color: var(--tl-color-text-3);
+	font-size: 12px;
+}
+.cmt-list__items {
+	flex: 1;
+	min-height: 0;
+	overflow-y: auto;
+}
+.cmt-list__empty {
+	padding: 20px 14px;
+	color: var(--tl-color-text-3);
+	font-size: 13px;
+}
+.cmt-list__item {
+	display: flex;
+	gap: 10px;
+	width: 100%;
+	padding: 12px 14px;
+	border: none;
+	border-bottom: 1px solid var(--tl-color-divider);
+	background: transparent;
+	font: inherit;
+	text-align: left;
+	cursor: pointer;
+}
+.cmt-list__item:hover {
+	background: var(--tl-color-muted-2);
+}
+.cmt-list__item--selected {
+	background: var(--tl-color-muted-1);
+}
+/* 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 {
+	opacity: 0.55;
+}
+.cmt-list__item-body {
+	flex: 1;
+	min-width: 0;
+}
+.cmt-list__item-preview {
+	margin-top: 2px;
+	font-size: 13px;
+	color: var(--tl-color-text-1);
+	overflow: hidden;
+	text-overflow: ellipsis;
+	display: -webkit-box;
+	-webkit-line-clamp: 2;
+	-webkit-box-orient: vertical;
+}
+/* meta line under the preview: page label and/or a resolved marker */
+.cmt-list__item-meta {
+	display: flex;
+	align-items: center;
+	gap: 8px;
+	margin-top: 5px;
+	font-size: 11px;
+	color: var(--tl-color-text-3);
+}
+.cmt-list__item-resolved {
+	display: inline-flex;
+	align-items: center;
+	gap: 3px;
+	font-weight: 600;
+}
+.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;
+	font-size: 12px;
+	color: var(--tl-color-text-3);
+}

package/src/ui/count-badge.tsx

@@ -0,0 +1,9 @@
+/** @public */
+export interface CountBadgeProps {
+	count: number
+}
+
+/** @public @react */
+export function CountBadge({ count }: CountBadgeProps) {
+	return <div className="cmt-count-badge">{count}</div>
+}

package/src/ui/empty-state.tsx

@@ -0,0 +1,16 @@
+/** @public */
+export interface EmptyStateProps {
+	message: string
+}
+
+/** The empty state shown when a thread has no comments yet. @public @react */
+export function EmptyState({ message }: EmptyStateProps) {
+	return (
+		<div className="cmt-empty">
+			<div className="cmt-empty__icon" aria-hidden="true">
+				💬
+			</div>
+			<p className="cmt-empty__message">{message}</p>
+		</div>
+	)
+}

package/src/ui/format-time.ts

@@ -0,0 +1,29 @@
+const DIVISIONS = [
+	{ amount: 60, unit: 'second' },
+	{ amount: 60, unit: 'minute' },
+	{ amount: 24, unit: 'hour' },
+	{ amount: 7, unit: 'day' },
+	{ amount: 4.34524, unit: 'week' },
+	{ amount: 12, unit: 'month' },
+	{ amount: Number.POSITIVE_INFINITY, unit: 'year' },
+] as const
+
+/**
+ * Format an ISO datetime as relative time ("2 hours ago", "yesterday", "last week").
+ * Locale-aware via Intl.RelativeTimeFormat.
+ * @public
+ */
+export function formatRelativeTime(iso: string, locale = 'en'): string {
+	const then = new Date(iso).getTime()
+	if (Number.isNaN(then)) return ''
+
+	const rtf = new Intl.RelativeTimeFormat(locale, { numeric: 'auto' })
+	let duration = (then - Date.now()) / 1000
+	for (const division of DIVISIONS) {
+		if (Math.abs(duration) < division.amount) {
+			return rtf.format(Math.round(duration), division.unit)
+		}
+		duration /= division.amount
+	}
+	return ''
+}