visual-comments 0.0.0-stage → 0.2.0

package/dist/ui/Panel.svelte

@@ -0,0 +1,220 @@
+<!-- The threads of this page, or of every page. Choosing one shows it where it was placed. -->
+<script lang="ts">
+	import { fly } from 'svelte/transition';
+	import { useComments } from './context.js';
+	import Avatar from './Avatar.svelte';
+	import Icon from './Icon.svelte';
+	import Menu from './Menu.svelte';
+	import MenuItem from './MenuItem.svelte';
+	import { commentText } from './text.js';
+	import { ago, fullDate } from '../core/time.js';
+	import type { CommentThread } from '../shared/types.js';
+
+	let { onselect, onclose, class: className = '', style = '' }: {
+		onselect: (thread: CommentThread) => void;
+		onclose: () => void;
+		class?: string;
+		style?: string;
+	} = $props();
+
+	const vc = useComments();
+	const comments = vc.store;
+	const filters = $derived(vc.filters);
+	const viewer = $derived(vc.viewer);
+
+	const lastActivity = (thread: CommentThread) => thread.comments.at(-1)?.createdAt ?? thread.createdAt;
+	/** Threads on other pages, which the list shows only when asked. */
+	const elsewhere = $derived(comments.threads.filter((t) => t.page !== vc.page).length);
+	const here = $derived(comments.threads.filter((t) => filters.allPages || t.page === vc.page));
+	const resolvedCount = $derived(here.filter((t) => t.resolvedAt).length);
+
+	const visible = $derived.by(() => {
+		const query = filters.query.trim().toLocaleLowerCase();
+		const matches = (thread: CommentThread) =>
+			!query ||
+			`#${thread.id}` === query ||
+			vc.titleOf(thread).toLocaleLowerCase().includes(query) ||
+			thread.comments.some((c) =>
+				c.body.toLocaleLowerCase().includes(query) || c.author.name.toLocaleLowerCase().includes(query));
+		const list = here.filter((thread) =>
+			(filters.showResolved || !thread.resolvedAt) &&
+			(!filters.onlyMine || thread.comments.some((c) => c.author.sub === viewer?.sub)) &&
+			matches(thread));
+		// By page, then by the surface's place on it.
+		const order = (thread: CommentThread) => vc.orderOf(thread);
+		return filters.sort === 'place'
+			? list.sort((a, b) => a.page.localeCompare(b.page) || order(a) - order(b) || a.id - b.id)
+			: list.sort((a, b) => lastActivity(b) - lastActivity(a));
+	});
+
+	function copyLink(thread: CommentThread) {
+		void navigator.clipboard?.writeText(vc.linkOf(thread));
+	}
+</script>
+
+<aside
+	data-vc-ui
+	aria-label="Comments"
+	class={['pointer-events-auto flex min-h-0 flex-col overflow-hidden rounded border border-vc-line bg-white text-[13px] text-vc-ink shadow-[0_1px_3px_rgb(0_0_0/0.12)]', className]}
+	{style}
+	transition:fly={{ x: 16, duration: 160 }}
+>
+	<header class="flex h-11 shrink-0 items-center gap-0.5 pr-1.5 pl-3.5">
+		<h2 class="min-w-0 flex-1 truncate font-semibold" title={comments.spaceName || undefined}>Comments</h2>
+		{#if !vc.panelCollapsed}
+			<Menu label="Filter and sort" align="end" class="vc-tool-light size-7 rounded-full">
+				{#snippet trigger()}<Icon name="filter" />{/snippet}
+				{#snippet children(close)}
+					<MenuItem checked={filters.sort === 'date'} onselect={() => { close(); filters.sort = 'date'; }}>Sort by date</MenuItem>
+					<MenuItem checked={filters.sort === 'place'} onselect={() => { close(); filters.sort = 'place'; }}>Sort by place</MenuItem>
+					<div class="my-1 border-t border-vc-line"></div>
+					{#if elsewhere || filters.allPages}
+						<MenuItem checked={filters.allPages} onselect={() => { close(); filters.allPages = !filters.allPages; }}>
+							Show every page
+						</MenuItem>
+					{/if}
+					<MenuItem checked={filters.showResolved} onselect={() => { close(); filters.showResolved = !filters.showResolved; }}>
+						Show resolved comments
+					</MenuItem>
+					{#if viewer}
+						<MenuItem checked={filters.onlyMine} onselect={() => { close(); filters.onlyMine = !filters.onlyMine; }}>
+							Only your threads
+						</MenuItem>
+						<div class="my-1 border-t border-vc-line"></div>
+						<MenuItem checked={false} onselect={() => { close(); void comments.markAllRead(); }}>Mark all as read</MenuItem>
+					{/if}
+				{/snippet}
+			</Menu>
+		{/if}
+		<button
+			type="button"
+			class="vc-tool-light size-7 rounded-full"
+			title={vc.panelCollapsed ? 'Expand comments' : 'Collapse comments'}
+			aria-label={vc.panelCollapsed ? 'Expand comments' : 'Collapse comments'}
+			aria-expanded={!vc.panelCollapsed}
+			onclick={() => (vc.panelCollapsed = !vc.panelCollapsed)}
+		>
+			<Icon name={vc.panelCollapsed ? 'chevron-left' : 'chevron-right'} />
+		</button>
+		<button type="button" class="vc-tool-light size-7 rounded-full" title="Close comments (C)" aria-label="Close comments" onclick={onclose}>
+			<Icon name="close" />
+		</button>
+	</header>
+
+	{#if !vc.panelCollapsed}
+		<div class="shrink-0 border-b border-vc-line px-2.5 pb-2.5">
+			<label class="flex h-8 items-center gap-2 rounded-[6px] bg-vc-surface px-2.5 text-vc-muted focus-within:ring-1 focus-within:ring-vc-comment">
+				<Icon name="search" size={15} />
+				<input
+					type="search"
+					placeholder="Search"
+					aria-label="Search comments"
+					bind:value={filters.query}
+					onkeydown={(event) => { if (event.key === 'Escape') { filters.query = ''; (event.target as HTMLElement).blur(); } }}
+					class="min-w-0 flex-1 bg-transparent text-vc-ink outline-none placeholder:text-vc-muted/80"
+				/>
+			</label>
+		</div>
+
+		{#if !viewer && !comments.loading}
+			<div class="shrink-0 border-b border-vc-line px-3.5 py-3">
+				<p>Sign in to see comments and add your own.</p>
+				<button type="button" class="mt-2 h-7 rounded-full bg-vc-comment px-3 font-medium text-white hover:brightness-110"
+					onclick={() => vc.signIn()}>Sign in</button>
+			</div>
+		{/if}
+
+		<ol class="min-h-0 flex-1 space-y-1 overflow-y-auto overscroll-contain p-2">
+			{#each visible as thread (thread.id)}
+				{@const root = thread.comments[0]}
+				{@const replies = thread.comments.length - 1}
+				{@const selected = thread.id === vc.openId}
+				<li class={['group relative rounded-[8px] px-3 py-2.5', selected ? 'bg-vc-comment-soft' : 'hover:bg-vc-surface']}>
+					<button
+						type="button"
+						class="absolute inset-0 rounded-[8px] focus-visible:outline-2 focus-visible:outline-vc-comment"
+						aria-label="Show comment #{thread.id} on {vc.titleOf(thread)}"
+						aria-current={selected || undefined}
+						onclick={() => onselect(thread)}
+					></button>
+					<div class={['pointer-events-none relative', thread.resolvedAt && 'opacity-55']}>
+						<div class="flex h-7 items-center">
+							{#if thread.unread}
+								<span class="absolute top-3 -left-2 size-1.5 rounded-full bg-vc-comment" title="Unread"></span>
+							{/if}
+							<Avatar user={root.author} size={28} />
+						</div>
+						<p class="mt-1.5 truncate text-vc-muted">#{thread.id} · {vc.titleOf(thread)}</p>
+						<p class="truncate">
+							<span class="font-medium">{root.author.name}</span>
+							<time class="ml-1 text-vc-muted" title={fullDate(root.createdAt)}>{ago(root.createdAt, comments.now)}</time>
+						</p>
+						<p class={['line-clamp-3 break-words whitespace-pre-line', thread.unread && 'font-medium']}>{commentText(root)}</p>
+						{#if replies > 0}
+							<p class="mt-1 text-xs text-vc-muted">
+								{replies} {replies === 1 ? 'reply' : 'replies'}
+							</p>
+						{/if}
+					</div>
+					{#if viewer}
+						<div class="absolute top-2.5 right-2 flex items-center">
+							<div class={['transition-opacity', !selected && 'opacity-0 group-hover:opacity-100 focus-within:opacity-100 has-[[aria-expanded=true]]:opacity-100']}>
+								<Menu label="Thread options" align="end" class="vc-tool-light size-7 rounded-full">
+									{#snippet trigger()}<Icon name="more" />{/snippet}
+									{#snippet children(close)}
+										<MenuItem onselect={() => { close(); void comments.markRead(thread.id, !thread.unread); }}>
+											{thread.unread ? 'Mark as read' : 'Mark as unread'}
+										</MenuItem>
+										<MenuItem onselect={() => { close(); copyLink(thread); }}>Copy link</MenuItem>
+										{#if root.author.sub === viewer.sub}
+											<MenuItem onselect={() => {
+												close();
+												if (confirm('Delete this thread and all its replies?')) void comments.removeThread(thread.id);
+											}}>Delete thread…</MenuItem>
+										{/if}
+									{/snippet}
+								</Menu>
+							</div>
+							<button
+								type="button"
+								class={['vc-tool-light size-7 rounded-full', thread.resolvedAt && 'text-vc-comment']}
+								aria-pressed={Boolean(thread.resolvedAt)}
+								title={thread.resolvedAt ? 'Reopen' : 'Resolve'}
+								aria-label={thread.resolvedAt ? `Reopen #${thread.id}` : `Resolve #${thread.id}`}
+								onclick={() => comments.resolve(thread.id, !thread.resolvedAt)}
+							>
+								<Icon name="resolve" size={18} />
+							</button>
+						</div>
+					{/if}
+				</li>
+			{:else}
+				{#if viewer && !comments.loading}
+					<li class="px-3 py-6 text-center text-vc-muted">
+						{#if filters.query.trim()}
+							No comments match “{filters.query.trim()}”.
+						{:else if filters.onlyMine}
+							You have not started or replied to any threads.
+						{:else if resolvedCount && !filters.showResolved}
+							Every thread is resolved.
+							<button type="button" class="text-vc-comment hover:underline" onclick={() => (filters.showResolved = true)}>
+								Show resolved
+							</button>
+						{:else}
+							No comments yet. Click {vc.surfaces.some((s) => s.element) ? 'a frame' : 'anywhere on the page'} to add one.
+						{/if}
+					</li>
+				{/if}
+			{/each}
+		</ol>
+
+		{#if comments.error}
+			<div role="alert" class="m-2 mt-0 flex shrink-0 items-start gap-2 rounded-[8px] bg-vc-ink px-3 py-2 text-white">
+				<p class="flex-1">{comments.error}</p>
+				<button type="button" class="text-white/70 hover:text-white" aria-label="Dismiss" onclick={() => (comments.error = null)}>
+					<Icon name="close" size={14} />
+				</button>
+			</div>
+		{/if}
+	{/if}
+</aside>

package/dist/ui/Panel.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { CommentThread } from '../shared/types.js';
+type $$ComponentProps = {
+    onselect: (thread: CommentThread) => void;
+    onclose: () => void;
+    class?: string;
+    style?: string;
+};
+declare const Panel: import("svelte").Component<$$ComponentProps, {}, "">;
+type Panel = ReturnType<typeof Panel>;
+export default Panel;

package/dist/ui/Pin.svelte

@@ -0,0 +1,156 @@
+<svelte:options css="injected" />
+
+<!--
+  A thread's marker. Its bottom-left point sits on the spot that was clicked.
+  On hover it grows from that point into a preview of the first comment. It
+  pops out of that point when it appears (loaded, added, scrolled into view)
+  and shrinks back into it when it goes.
+-->
+<script lang="ts" module>
+	import { backOut, cubicIn } from 'svelte/easing';
+
+	/** Scales from the pin's point (its bottom-left corner), keeping its lift above it. */
+	function pop(_node: Element, { duration, easing }: { duration: number; easing: (t: number) => number }) {
+		const still = matchMedia('(prefers-reduced-motion: reduce)').matches;
+		return {
+			duration: still ? 0 : duration,
+			easing,
+			css: (t: number) =>
+				`transform-origin: 0 100%; transform: translateY(-100%) scale(${0.2 + 0.8 * t}); opacity: ${Math.min(1, t * 2)}`
+		};
+	}
+</script>
+
+<script lang="ts">
+	import Avatar from './Avatar.svelte';
+	import { commentText } from './text.js';
+	import { ago } from '../core/time.js';
+	import type { CommentThread } from '../shared/types.js';
+
+	let { thread, left, top, open, now, working, onopen }: {
+		thread: CommentThread;
+		/** The pin's point, in client pixels. */
+		left: number;
+		top: number;
+		open: boolean;
+		now: number;
+		/** Set while someone works on the thread: what they say they are doing. The pin pulses meanwhile. */
+		working?: string;
+		onopen: () => void;
+	} = $props();
+
+	const SIZE = 32;
+	const root = $derived(thread.comments[0]);
+	const text = $derived(commentText(root));
+	const replies = $derived(thread.comments.length - 1);
+
+	let hovered = $state(false);
+	let focused = $state(false);
+	let textWidth = $state(0);
+	let textHeight = $state(0);
+	const expanded = $derived((hovered || focused) && !open && textWidth > 0);
+</script>
+
+{#if working}
+	<span
+		class={['vc-pin-pulse vc-working pointer-events-none absolute', expanded ? 'z-30' : open ? 'z-20' : 'z-10']}
+		style:left="{left}px"
+		style:top="{top}px"
+		aria-hidden="true"
+	></span>
+{/if}
+<button
+	type="button"
+	data-vc-ui
+	class={[
+		'vc-pin pointer-events-auto absolute block overflow-hidden bg-white text-left outline-none',
+		expanded ? 'z-30' : open ? 'z-20' : 'z-10',
+		thread.resolvedAt && !expanded && !open && 'opacity-60',
+		expanded && 'vc-pin-expanded'
+	]}
+	style:left="{left}px"
+	style:top="{top}px"
+	style:width="{expanded ? textWidth + 54 : SIZE}px"
+	style:height="{expanded ? Math.max(44, textHeight + 20) : SIZE}px"
+	style:border-radius={expanded ? '18px 18px 18px 4px' : `${SIZE / 2}px ${SIZE / 2}px ${SIZE / 2}px 0`}
+	style:box-shadow={open
+		? '0 0 0 2px var(--color-vc-comment), 0 2px 8px rgb(0 0 0 / 0.25)'
+		: expanded
+			? '0 4px 18px rgb(0 0 0 / 0.22)'
+			: '0 1px 4px rgb(0 0 0 / 0.3)'}
+	aria-label="Comment #{thread.id} by {root.author.name}: {text}{working ? `. ${working}` : ''}"
+	aria-expanded={open}
+	in:pop={{ duration: 240, easing: backOut }}
+	out:pop={{ duration: 140, easing: cubicIn }}
+	onpointerenter={() => (hovered = true)}
+	onpointerleave={() => (hovered = false)}
+	onfocus={() => (focused = true)}
+	onblur={() => (focused = false)}
+	onclick={onopen}
+>
+	<Avatar
+		user={root.author}
+		size={24}
+		class="vc-pin-avatar absolute"
+	/>
+	<span
+		class="vc-pin-text absolute top-2.5 left-[42px] block w-max max-w-[240px] text-[13px] leading-[18px] text-vc-ink"
+		style:opacity={expanded ? 1 : 0}
+		bind:offsetWidth={textWidth}
+		bind:offsetHeight={textHeight}
+		aria-hidden="true"
+	>
+		<span class="block truncate whitespace-nowrap">
+			<span class="font-medium">{root.author.name}</span>
+			<span class="ml-1 text-vc-muted">{ago(root.createdAt, now)}</span>
+		</span>
+		<span class="line-clamp-2 block break-words whitespace-pre-line">{text}</span>
+		{#if replies > 0}
+			<span class="mt-0.5 block text-xs text-vc-muted">{replies} {replies === 1 ? 'reply' : 'replies'}</span>
+		{/if}
+		{#if working}
+			<span class="mt-0.5 block truncate text-xs text-vc-working">{working}</span>
+		{/if}
+	</span>
+	{#if thread.unread}
+		<span class="absolute top-0.5 right-0.5 size-2.5 rounded-full bg-vc-comment ring-2 ring-white"></span>
+	{/if}
+</button>
+
+<style>
+	.vc-pin {
+		transform: translateY(-100%);
+		transition:
+			width 220ms cubic-bezier(0.2, 0.9, 0.3, 1),
+			height 220ms cubic-bezier(0.2, 0.9, 0.3, 1),
+			border-radius 220ms ease,
+			box-shadow 160ms ease,
+			opacity 160ms ease;
+	}
+	.vc-pin :global(.vc-pin-avatar) {
+		top: 4px;
+		left: 4px;
+		transition: top 220ms cubic-bezier(0.2, 0.9, 0.3, 1), left 220ms cubic-bezier(0.2, 0.9, 0.3, 1);
+	}
+	.vc-pin-expanded :global(.vc-pin-avatar) {
+		top: 10px;
+		left: 10px;
+	}
+	/* The collapsed pin's shape, under it: its ring pulses out from the pin's edge. */
+	.vc-pin-pulse {
+		width: 32px;
+		height: 32px;
+		border-radius: 16px 16px 16px 0;
+		transform: translateY(-100%);
+	}
+	.vc-pin-text {
+		transition: opacity 140ms ease 60ms;
+	}
+	@media (prefers-reduced-motion: reduce) {
+		.vc-pin,
+		.vc-pin :global(.vc-pin-avatar),
+		.vc-pin-text {
+			transition: none;
+		}
+	}
+</style>

package/dist/ui/Pin.svelte.d.ts

@@ -0,0 +1,15 @@
+import type { CommentThread } from '../shared/types.js';
+type $$ComponentProps = {
+    thread: CommentThread;
+    /** The pin's point, in client pixels. */
+    left: number;
+    top: number;
+    open: boolean;
+    now: number;
+    /** Set while someone works on the thread: what they say they are doing. The pin pulses meanwhile. */
+    working?: string;
+    onopen: () => void;
+};
+declare const Pin: import("svelte").Component<$$ComponentProps, {}, "">;
+type Pin = ReturnType<typeof Pin>;
+export default Pin;

package/dist/ui/Presence.svelte

@@ -0,0 +1,43 @@
+<!--
+  Who else is here: an avatar for each other person and agent present, the
+  busiest first within each, beside the account button. Hover for what they do.
+-->
+<script lang="ts">
+	import type { VisualComments } from '../visual-comments.svelte.js';
+	import { activity, present, type Present } from '../core/presence.js';
+	import Avatar from './Avatar.svelte';
+	import { authorLabel } from './text.js';
+
+	let { vc, size = 24 }: { vc: VisualComments; size?: number } = $props();
+
+	const SHOWN = 4;
+	const others = $derived(present(vc.participants.filter((p) => p.author.sub !== vc.viewer?.sub)));
+	const shown = $derived(others.length > SHOWN ? others.slice(0, SHOWN - 1) : others);
+	const rest = $derived(others.slice(shown.length));
+
+	function describe(someone: Present) {
+		const doing = someone.participants.map(activity).filter(Boolean);
+		return [authorLabel(someone.author), ...doing].join('\n');
+	}
+</script>
+
+{#if others.length}
+	<ul class="flex items-center gap-1 px-1" aria-label="Here now">
+		{#each shown as someone (someone.author.sub)}
+			<li class="flex" aria-label={describe(someone)}>
+				<Avatar user={someone.author} {size} title={describe(someone)} class={someone.state === 'working' ? 'vc-working' : ''} />
+			</li>
+		{/each}
+		{#if rest.length}
+			<li
+				class="flex items-center justify-center rounded-full bg-current/15 text-[11px] font-medium"
+				style:width="{size}px"
+				style:height="{size}px"
+				title={rest.map(describe).join('\n\n')}
+				aria-label={rest.map(describe).join('\n\n')}
+			>
+				+{rest.length}
+			</li>
+		{/if}
+	</ul>
+{/if}

package/dist/ui/Presence.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { VisualComments } from '../visual-comments.svelte.js';
+type $$ComponentProps = {
+    vc: VisualComments;
+    size?: number;
+};
+declare const Presence: import("svelte").Component<$$ComponentProps, {}, "">;
+type Presence = ReturnType<typeof Presence>;
+export default Presence;

package/dist/ui/ThreadCard.svelte

@@ -0,0 +1,201 @@
+<!-- An open thread: its comments, a reply field, and resolve and delete actions. -->
+<script lang="ts">
+	import { tick } from 'svelte';
+	import { useComments } from './context.js';
+	import type { CommentThread } from '../shared/types.js';
+	import Avatar from './Avatar.svelte';
+	import Composer from './Composer.svelte';
+	import Icon from './Icon.svelte';
+	import Menu from './Menu.svelte';
+	import MenuItem from './MenuItem.svelte';
+	import { ago, fullDate } from '../core/time.js';
+	import { activity } from '../core/presence.js';
+	import { authorLabel } from './text.js';
+
+	let { thread, title, link, maxHeight, onclose }: {
+		thread: CommentThread;
+		/** Where it is: its surface's or page's title. */
+		title: string;
+		/** Absolute URL that opens this thread. */
+		link?: string;
+		maxHeight: number;
+		onclose: () => void;
+	} = $props();
+
+	const vc = useComments();
+	const comments = vc.store;
+	const viewer = $derived(vc.viewer);
+	const details = $derived(Object.entries(thread.context).map(([key, value]) => `${key}: ${value}`).join('\n'));
+	const isAuthor = $derived(thread.comments[0]?.author.sub === viewer?.sub);
+	let editing = $state<number>();
+	/** What others are doing in this thread, the working before the typing; the same line once. */
+	const doing = $derived([...new Set(vc.participants
+		.filter((p) => p.thread === thread.id && p.state !== 'viewing' && p.author.sub !== viewer?.sub)
+		.sort((a, b) => Number(b.state === 'working') - Number(a.state === 'working'))
+		.map(activity)
+		.filter((line): line is string => Boolean(line)))]);
+	let list = $state<HTMLOListElement>();
+
+	// Follow the conversation to its newest comment.
+	$effect(() => {
+		void thread.comments.length;
+		void tick().then(() => list?.scrollTo({ top: list.scrollHeight }));
+	});
+
+	async function remove(commentId: number, first: boolean) {
+		if (first && !confirm('Delete this thread and all its replies?')) return;
+		await comments.removeComment(commentId);
+	}
+
+	function copyLink() {
+		if (link) void navigator.clipboard?.writeText(link);
+	}
+</script>
+
+<div
+	data-vc-ui
+	role="dialog"
+	aria-label="Comment #{thread.id}"
+	class="pointer-events-auto flex w-[320px] cursor-default flex-col overflow-hidden rounded-[12px] bg-white text-[13px] text-vc-ink shadow-[0_4px_24px_rgb(0_0_0/0.22)]"
+	style:max-height="{maxHeight}px"
+>
+	<header class="flex h-11 shrink-0 items-center gap-0.5 border-b border-vc-line/70 pr-1.5 pl-3.5">
+		<p class="min-w-0 flex-1 truncate text-vc-muted" title={details || undefined}>#{thread.id} · {title}</p>
+		{#if viewer}
+			<Menu label="Thread options" align="end" class="vc-tool-light size-7 rounded-full">
+				{#snippet trigger()}<Icon name="more" />{/snippet}
+				{#snippet children(close)}
+					<MenuItem onselect={() => { close(); void comments.markRead(thread.id, false); onclose(); }}>Mark as unread</MenuItem>
+					{#if link}<MenuItem onselect={() => { close(); copyLink(); }}>Copy link</MenuItem>{/if}
+					{#if isAuthor}
+						<MenuItem onselect={() => { close(); void remove(thread.comments[0].id, true); }}>Delete thread…</MenuItem>
+					{/if}
+				{/snippet}
+			</Menu>
+			<button
+				type="button"
+				class={['vc-tool-light size-7 rounded-full', thread.resolvedAt && 'text-vc-comment']}
+				aria-pressed={Boolean(thread.resolvedAt)}
+				title={thread.resolvedAt ? 'Reopen' : 'Resolve'}
+				aria-label={thread.resolvedAt ? 'Reopen' : 'Resolve'}
+				onclick={() => {
+					const resolving = !thread.resolvedAt;
+					void comments.resolve(thread.id, resolving);
+					if (resolving) onclose();
+				}}
+			>
+				<Icon name="resolve" size={18} />
+			</button>
+		{/if}
+		<button type="button" class="vc-tool-light size-7 rounded-full" title="Close (Esc)" aria-label="Close" onclick={onclose}>
+			<Icon name="close" />
+		</button>
+	</header>
+
+	{#if thread.resolvedAt}
+		<p class="shrink-0 border-b border-vc-line/70 bg-vc-comment-soft px-3.5 py-1.5 text-xs text-vc-ink">
+			Resolved{thread.resolvedBy ? ` by ${thread.resolvedBy.name}` : ''}, {ago(thread.resolvedAt, comments.now)}
+		</p>
+	{/if}
+
+	<ol bind:this={list} data-vc-scroll class="min-h-0 flex-1 overflow-y-auto overscroll-contain px-3.5 py-1">
+		{#each thread.comments as comment, index (comment.id)}
+			{@const own = comment.author.sub === viewer?.sub}
+			<li class={['group flex gap-2.5 py-2.5', comment.pending && 'opacity-60']}>
+				<Avatar user={comment.author} size={24} />
+				<div class="min-w-0 flex-1">
+					<div class="flex h-6 items-center gap-1.5">
+						<p class="min-w-0 truncate">
+							<span class="font-medium" title={comment.author.agent ? authorLabel(comment.author) : undefined}>{comment.author.name}</span>
+							<time class="ml-1 text-vc-muted" datetime={new Date(comment.createdAt).toISOString()} title={fullDate(comment.createdAt)}>
+								{comment.pending ? 'sending…' : ago(comment.createdAt, comments.now)}
+							</time>
+							{#if comment.editedAt}<span class="text-vc-muted" title={fullDate(comment.editedAt)}> · edited</span>{/if}
+						</p>
+						{#if own && !comment.pending && editing !== comment.id}
+							<div class="ml-auto opacity-0 transition-opacity group-hover:opacity-100 focus-within:opacity-100 has-[[aria-expanded=true]]:opacity-100">
+								<Menu label="Comment options" align="end" class="vc-tool-light size-6 rounded-full">
+									{#snippet trigger()}<Icon name="more" size={14} />{/snippet}
+									{#snippet children(close)}
+										<MenuItem onselect={() => { close(); editing = comment.id; }}>Edit</MenuItem>
+										<MenuItem onselect={() => { close(); void remove(comment.id, index === 0); }}>
+											{index === 0 ? 'Delete thread…' : 'Delete'}
+										</MenuItem>
+									{/snippet}
+								</Menu>
+							</div>
+						{/if}
+					</div>
+					{#if editing === comment.id}
+						<div class="mt-1">
+							<Composer
+								variant="edit"
+								placeholder="Edit comment"
+								initial={comment.body}
+								initialImages={comment.images}
+								autofocus
+								oninput={() => vc.noteTyping()}
+								onsubmit={async (body, images) => {
+									vc.stopTyping();
+									await comments.edit(comment.id, body, images);
+									editing = undefined;
+								}}
+								oncancel={() => (editing = undefined)}
+							/>
+						</div>
+					{:else}
+						{#if comment.body}<p class="break-words whitespace-pre-wrap">{comment.body}</p>{/if}
+						{#if comment.images.length}
+							{@const several = comment.images.length > 1}
+							<div class={['mt-1.5 grid gap-1.5', several && 'grid-cols-2']}>
+								{#each comment.images as image, i (image.id)}
+									<a
+										href={comments.imageUrl(image)}
+										target="_blank"
+										rel="noopener"
+										title="Open full size"
+										class="block overflow-hidden rounded-lg border border-vc-line/70 bg-vc-surface hover:border-vc-line"
+									>
+										<img
+											src={comments.imageUrl(image)}
+											alt="Image {i + 1}"
+											width={image.width}
+											height={image.height}
+											loading="lazy"
+											class={['block w-full', several ? 'aspect-square object-cover' : 'h-auto max-h-64 object-contain']}
+										/>
+									</a>
+								{/each}
+							</div>
+						{/if}
+					{/if}
+				</div>
+			</li>
+		{/each}
+	</ol>
+
+	{#if doing.length}
+		<div class="shrink-0 space-y-0.5 px-3.5 pb-2 text-xs text-vc-muted" aria-live="polite">
+			{#each doing as line (line)}
+				<p class="truncate" title={line}>{line}</p>
+			{/each}
+		</div>
+	{/if}
+
+	{#if viewer}
+		<footer class="flex shrink-0 items-start gap-2.5 border-t border-vc-line/70 px-3.5 py-3">
+			<Avatar user={viewer} size={24} class="mt-[3px]" />
+			<div class="min-w-0 flex-1">
+				{#key thread.id}
+					<Composer
+						placeholder="Reply"
+						autofocus
+						oninput={() => vc.noteTyping()}
+						onsubmit={(body, images) => { vc.stopTyping(); return comments.reply(thread.id, body, images); }}
+						oncancel={onclose}
+					/>
+				{/key}
+			</div>
+		</footer>
+	{/if}
+</div>

package/dist/ui/ThreadCard.svelte.d.ts

@@ -0,0 +1,13 @@
+import type { CommentThread } from '../shared/types.js';
+type $$ComponentProps = {
+    thread: CommentThread;
+    /** Where it is: its surface's or page's title. */
+    title: string;
+    /** Absolute URL that opens this thread. */
+    link?: string;
+    maxHeight: number;
+    onclose: () => void;
+};
+declare const ThreadCard: import("svelte").Component<$$ComponentProps, {}, "">;
+type ThreadCard = ReturnType<typeof ThreadCard>;
+export default ThreadCard;