visual-comments 0.0.0-stage → 0.2.0

package/dist/sveltekit/ToolbarButton.svelte

@@ -0,0 +1,66 @@
+<!--
+  A tool of the comments' toolbar, for the app's own tools beside the
+  comment button: round, light on the toolbar's dark glass, and filled while
+  `pressed`. Give it an icon as its content and a `label`.
+-->
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLButtonAttributes } from 'svelte/elements';
+
+	let { label, pressed, children, ...rest }: HTMLButtonAttributes & {
+		/** What the tool does, for screen readers and as its tooltip. */
+		label: string;
+		/** For a tool that is on or off. */
+		pressed?: boolean;
+		children: Snippet;
+	} = $props();
+</script>
+
+<button type="button" class="vc-toolbar-button" aria-label={label} title={label} aria-pressed={pressed} {...rest}>
+	{@render children()}
+</button>
+
+<style>
+	.vc-toolbar-button {
+		position: relative;
+		display: inline-flex;
+		height: 2rem;
+		min-width: 2rem;
+		align-items: center;
+		justify-content: center;
+		gap: 0.375rem;
+		border: 0;
+		border-radius: 9999px;
+		padding: 0 0.5rem;
+		background: transparent;
+		color: inherit;
+		font: inherit;
+		cursor: pointer;
+		outline: none;
+	}
+	.vc-toolbar-button:hover {
+		background: var(--vc-island-hover, rgb(255 255 255 / 0.14));
+	}
+	.vc-toolbar-button[aria-pressed='true'] {
+		background: var(--vc-island-ink, #fff);
+		color: var(--vc-ink, #292524);
+	}
+	.vc-toolbar-button:focus-visible {
+		box-shadow: 0 0 0 2px rgb(255 255 255 / 0.6);
+	}
+	.vc-toolbar-button:disabled {
+		opacity: 0.5;
+		cursor: default;
+	}
+	/* Something is unread: a dot, as on the comments' own toolbar. */
+	.vc-toolbar-button[data-vc-unread]::after {
+		content: '';
+		position: absolute;
+		top: 0.25rem;
+		right: 0.25rem;
+		width: 0.5rem;
+		height: 0.5rem;
+		border-radius: 9999px;
+		background: var(--vc-comment, #0d99ff);
+	}
+</style>

package/dist/sveltekit/ToolbarButton.svelte.d.ts

@@ -0,0 +1,12 @@
+import type { Snippet } from 'svelte';
+import type { HTMLButtonAttributes } from 'svelte/elements';
+type $$ComponentProps = HTMLButtonAttributes & {
+    /** What the tool does, for screen readers and as its tooltip. */
+    label: string;
+    /** For a tool that is on or off. */
+    pressed?: boolean;
+    children: Snippet;
+};
+declare const ToolbarButton: import("svelte").Component<$$ComponentProps, {}, "">;
+type ToolbarButton = ReturnType<typeof ToolbarButton>;
+export default ToolbarButton;

package/dist/sveltekit/context.d.ts

@@ -0,0 +1,16 @@
+import type { Viewer } from '../shared/types.js';
+import type { VisualComments } from '../visual-comments.svelte.js';
+/** The comments of the app, as `<Comments>` provides them. Both fields are reactive. */
+export interface AppComments {
+    /** Whether comments are on for this deployment: `<Comments config>` is set. */
+    readonly enabled: boolean;
+    /** The comments, once they have started in the browser; undefined before, during server rendering, and while off. */
+    readonly current: VisualComments | undefined;
+    /** Who is signed in as the page loaded (`comments.load` on the server); undefined when it did not say. */
+    readonly viewer: Viewer | null | undefined;
+    /** Where the sign-in routes are, e.g. `/auth`. */
+    readonly auth: string;
+}
+export declare function setAppComments(comments: AppComments): void;
+/** The comments of the app, inside `<Comments>`; undefined outside it. */
+export declare function useComments(): AppComments | undefined;

package/dist/sveltekit/context.js

@@ -0,0 +1,9 @@
+import { getContext, setContext } from 'svelte';
+const KEY = Symbol('visual-comments/sveltekit');
+export function setAppComments(comments) {
+    setContext(KEY, comments);
+}
+/** The comments of the app, inside `<Comments>`; undefined outside it. */
+export function useComments() {
+    return getContext(KEY);
+}

package/dist/sveltekit/index.d.ts

@@ -0,0 +1,6 @@
+export { default as Comments, type CommentsProps } from './Comments.svelte';
+export { default as Toolbar } from './Toolbar.svelte';
+export { default as ToolbarButton } from './ToolbarButton.svelte';
+export { useComments, type AppComments } from './context.js';
+export type { CommentsClientConfig } from '../server/env.js';
+export type { VisualComments, VisualCommentsOptions } from '../visual-comments.svelte.js';

package/dist/sveltekit/index.js

@@ -0,0 +1,6 @@
+// `visual-comments/sveltekit`: comments in a SvelteKit app. The server side,
+// set up from environment variables, is `commentsFromEnv` of `visual-comments/server`.
+export { default as Comments } from './Comments.svelte';
+export { default as Toolbar } from './Toolbar.svelte';
+export { default as ToolbarButton } from './ToolbarButton.svelte';
+export { useComments } from './context.js';

package/dist/ui/Account.svelte

@@ -0,0 +1,106 @@
+<svelte:options css="injected" />
+
+<!--
+  The account button: the viewer's avatar with a menu to sign out and to see
+  the space's agents, or Sign in; beside it, who else is here. It sits in the
+  floating toolbar, or in a host's own toolbar where the host puts a
+  `data-vc-account` element; there it takes the host's text colour.
+-->
+<script lang="ts">
+	import type { VisualComments } from '../visual-comments.svelte.js';
+	import type { Agent } from '../shared/types.js';
+	import Avatar from './Avatar.svelte';
+	import { setComments } from './context.js';
+	import Icon from './Icon.svelte';
+	import Menu from './Menu.svelte';
+	import MenuItem from './MenuItem.svelte';
+	import Presence from './Presence.svelte';
+
+	let { vc, slot = false }: { vc: VisualComments; slot?: boolean } = $props();
+	// svelte-ignore state_referenced_locally
+	if (slot) setComments(vc);
+
+	const tool = $derived(slot ? 'vc-slot-tool' : 'vc-island-tool');
+	const signedIn = $derived(Boolean(vc.viewer));
+
+	// Listed ahead, so the menu opens at its full size.
+	$effect(() => {
+		if (signedIn) void vc.store.loadAgents();
+	});
+
+	function remove(agent: Agent) {
+		if (confirm(`Remove ${agent.name}? It will no longer see or write comments here.`)) void vc.store.removeAgent(agent.id);
+	}
+</script>
+
+<span class={['vc-ui inline-flex items-center', slot && 'vc-slot']}>
+	{#if vc.viewer}
+		<Presence {vc} />
+		<Menu label={`Account: ${vc.viewer.name}`} align="end" class="{tool} pr-2 pl-0.5" onopen={() => vc.store.loadAgents()}>
+			{#snippet trigger()}
+				{#if vc.viewer}<Avatar user={vc.viewer} size={28} />{/if}
+				<Icon name="chevron-down" size={14} />
+			{/snippet}
+			{#snippet children(close)}
+				<div class="max-w-72 border-b border-vc-line px-3 py-2">
+					<p class="truncate font-medium">{vc.viewer?.name}</p>
+					{#if vc.viewer?.email}<p class="mt-0.5 truncate text-xs text-vc-muted">{vc.viewer.email}</p>{/if}
+					{#if vc.store.spaceName}<p class="mt-0.5 truncate text-xs text-vc-muted">Comments in {vc.store.spaceName}</p>{/if}
+				</div>
+				{#if vc.store.agents}
+					<div class="max-w-72 border-b border-vc-line py-1.5">
+						<p class="px-3 pb-1 text-xs text-vc-muted">Agents</p>
+						{#each vc.store.agents as agent (agent.id)}
+							<div class="flex items-center gap-2 px-3 py-1">
+								<Avatar user={{ sub: `agent:${agent.id}`, name: agent.name, agent: { addedBy: agent.addedBy } }} size={22} />
+								<div class="min-w-0 flex-1">
+									<p class="truncate">{agent.name}</p>
+									<p class="truncate text-xs text-vc-muted">Added by {agent.addedBy.name}</p>
+								</div>
+								<button
+									type="button"
+									class="shrink-0 rounded-[2px] px-1.5 py-0.5 text-xs text-vc-muted outline-none hover:bg-vc-wash hover:text-vc-ink focus-visible:bg-vc-wash"
+									aria-label="Remove {agent.name}"
+									onclick={() => remove(agent)}
+								>Remove</button>
+							</div>
+						{:else}
+							<p class="px-3 pb-1 text-xs text-vc-muted">
+								None yet. An agent asks to join with <code class="font-mono">npx visual-comments connect</code>.
+							</p>
+						{/each}
+					</div>
+				{/if}
+				<MenuItem onselect={() => { close(); vc.signOut(); }}>Sign out</MenuItem>
+			{/snippet}
+		</Menu>
+	{:else}
+		<button type="button" part="button" class="{tool} px-3.5 font-medium" disabled={!vc.store.viewerKnown} onclick={() => vc.signIn()}>
+			{vc.store.viewerKnown ? 'Sign in' : 'Connecting…'}
+		</button>
+	{/if}
+</span>
+
+<style>
+	.vc-slot {
+		font-family: inherit;
+		font-size: inherit;
+		color: inherit;
+	}
+	:global(.vc-slot-tool) {
+		display: inline-flex;
+		height: 2rem;
+		align-items: center;
+		gap: 0.375rem;
+		border-radius: 9999px;
+		color: inherit;
+		outline: none;
+	}
+	:global(.vc-slot-tool:hover),
+	:global(.vc-slot-tool[aria-expanded='true']) {
+		background: color-mix(in srgb, currentColor 14%, transparent);
+	}
+	:global(.vc-slot-tool:focus-visible) {
+		box-shadow: 0 0 0 2px color-mix(in srgb, currentColor 50%, transparent);
+	}
+</style>

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

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

package/dist/ui/App.svelte

@@ -0,0 +1,77 @@
+<!--
+  Everything the comments draw over the page, in one shadow root: layers that
+  catch clicks over frames in comment mode, pins and cards, the list of
+  threads, the floating toolbar and the dialog that lets an agent join.
+-->
+<script lang="ts">
+	import type { VisualComments } from '../visual-comments.svelte.js';
+	import type { Surface } from '../core/surfaces.js';
+	import { setComments } from './context.js';
+	import Connect from './Connect.svelte';
+	import Overlay from './Overlay.svelte';
+	import Panel from './Panel.svelte';
+	import Toolbar from './Toolbar.svelte';
+
+	let { vc }: { vc: VisualComments } = $props();
+	// svelte-ignore state_referenced_locally
+	setComments(vc);
+
+	// A thread deleted, here or elsewhere, is no longer open.
+	$effect(() => {
+		if (vc.openId !== undefined && !vc.loading && !vc.open) vc.openId = undefined;
+	});
+
+	/** Frames take pointer events themselves; in comment mode a layer over each catches them first. */
+	const catchers = $derived(vc.active ? vc.surfaces.filter((surface) => surface.catches) : []);
+
+	function wheel(surface: Surface) {
+		return (node: HTMLElement) => {
+			const onwheel = (event: WheelEvent) => vc.wheel(surface, event);
+			node.addEventListener('wheel', onwheel, { passive: false });
+			return () => node.removeEventListener('wheel', onwheel);
+		};
+	}
+
+	const panel = $derived(vc.panelRect);
+</script>
+
+<div class="vc-ui pointer-events-none fixed inset-0 font-vc text-[13px] text-vc-ink">
+	{#each catchers as surface (surface.id)}
+		<!-- svelte-ignore a11y_click_events_have_key_events -->
+		<div
+			{@attach wheel(surface)}
+			role="presentation"
+			class={['pointer-events-auto absolute', vc.cursor ? 'cursor-none!' : 'vc-comment-cursor']}
+			style:left="{surface.clip.left}px"
+			style:top="{surface.clip.top}px"
+			style:width="{Math.max(0, surface.clip.right - surface.clip.left)}px"
+			style:height="{Math.max(0, surface.clip.bottom - surface.clip.top)}px"
+			onpointermove={(event) => vc.move({ x: event.clientX, y: event.clientY, alt: event.altKey })}
+			onpointerleave={() => vc.move(undefined)}
+			onclick={(event) => vc.place(surface, event.clientX, event.clientY, event.altKey)}
+		></div>
+	{/each}
+
+	<Overlay />
+
+	{#if vc.active}
+		<Panel
+			class={panel ? 'absolute z-20' : vc.panelCollapsed ? 'absolute top-3 right-3 z-20 w-40' : 'absolute top-3 right-3 bottom-3 z-20 w-80'}
+			style={panel ? vc.panelCollapsed
+				? `left:${Math.max(panel.left, panel.right - 160)}px;top:${panel.top}px;width:${Math.min(160, panel.right - panel.left)}px;height:46px`
+				: `left:${panel.left}px;top:${panel.top}px;width:${panel.right - panel.left}px;height:${panel.bottom - panel.top}px` : ''}
+			onselect={(thread) => vc.focus(thread)}
+			onclose={() => vc.toggle(false)}
+		/>
+	{/if}
+
+	{#if vc.showToolbar}
+		<Toolbar />
+	{/if}
+
+	{#if vc.connecting}
+		{#key vc.connecting}
+			<Connect id={vc.connecting} />
+		{/key}
+	{/if}
+</div>

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

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

package/dist/ui/Avatar.svelte

@@ -0,0 +1,64 @@
+<!--
+  A person's profile picture, or their initial on a colour of their own.
+  An agent's has a badge, and says who added it when hovered.
+-->
+<script lang="ts" module>
+	// Others get a stable colour from their id; the viewer keeps the account colour.
+	const COLORS = ['#7b61ff', '#f24822', '#14ae5c', '#ffa629', '#0d99ff', '#e5487d', '#667799'];
+
+	function colorFor(sub: string) {
+		let hash = 0;
+		for (const char of sub) hash = (hash * 31 + char.codePointAt(0)!) | 0;
+		return COLORS[Math.abs(hash) % COLORS.length];
+	}
+</script>
+
+<script lang="ts">
+	import type { Author } from '../shared/types.js';
+	import { useComments } from './context.js';
+	import { authorLabel } from './text.js';
+
+	let { user, size = 24, title, class: className = '' }: {
+		user: Author;
+		size?: number;
+		/** Default: an agent's name and who added it. */
+		title?: string;
+		class?: string;
+	} = $props();
+
+	const vc = useComments();
+	let failed = $state<string>();
+	const initial = $derived(Array.from(user.name.trim() || '?')[0].toLocaleUpperCase());
+	const self = $derived(vc?.viewer?.sub === user.sub);
+	const badge = $derived(Math.max(10, Math.round(size * 0.45)));
+</script>
+
+<span
+	class={['grid shrink-0 place-items-center rounded-full leading-none text-white select-none', className]}
+	style:width="{size}px"
+	style:height="{size}px"
+	style:font-size="{Math.round(size * 0.5)}px"
+	style:background={self ? 'var(--color-vc-avatar)' : colorFor(user.sub)}
+	title={title ?? (user.agent ? authorLabel(user) : undefined)}
+	aria-hidden="true"
+>
+	{#if user.picture && user.picture !== failed}
+		<img src={user.picture} alt="" referrerpolicy="no-referrer" class="size-full rounded-full object-cover [grid-area:1/1]" draggable="false"
+			onerror={() => { failed = user.picture; }} />
+	{:else}
+		<span class="[grid-area:1/1]">{initial}</span>
+	{/if}
+	{#if user.agent}
+		<!-- Past the corner, like a status dot; nothing clips it. -->
+		<span
+			class="grid place-items-center self-end justify-self-end rounded-full bg-vc-agent text-white ring-[1.5px] ring-white [grid-area:1/1]"
+			style:width="{badge}px"
+			style:height="{badge}px"
+			style:margin="0 {-badge / 4}px {-badge / 4}px 0"
+		>
+			<svg width={badge - 3} height={badge - 3} viewBox="0 0 24 24" fill="currentColor">
+				<path d="M12 2c.8 5.6 4.4 9.2 10 10-5.6.8-9.2 4.4-10 10-.8-5.6-4.4-9.2-10-10 5.6-.8 9.2-4.4 10-10z" />
+			</svg>
+		</span>
+	{/if}
+</span>

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

@@ -0,0 +1,11 @@
+import type { Author } from '../shared/types.js';
+type $$ComponentProps = {
+    user: Author;
+    size?: number;
+    /** Default: an agent's name and who added it. */
+    title?: string;
+    class?: string;
+};
+declare const Avatar: import("svelte").Component<$$ComponentProps, {}, "">;
+type Avatar = ReturnType<typeof Avatar>;
+export default Avatar;

package/dist/ui/Composer.svelte

@@ -0,0 +1,267 @@
+<!--
+  A comment field that grows with its text. Enter sends, Shift+Enter starts a
+  new line, Escape cancels. The text clears at once and comes back if sending fails.
+  Images dropped on it or pasted into it upload at once and show as thumbnails;
+  a comment can be images alone.
+-->
+<script lang="ts">
+	import { onDestroy, onMount } from 'svelte';
+	import { useComments } from './context.js';
+	import type { CommentImage } from '../shared/types.js';
+	import Icon from './Icon.svelte';
+	import { IMAGE_TYPES, MAX_BODY, MAX_IMAGE_BYTES, MAX_IMAGES } from '../shared/limits.js';
+
+	let {
+		variant = 'reply',
+		placeholder = 'Reply',
+		initial = '',
+		initialImages = [],
+		autofocus = false,
+		onsubmit,
+		oncancel,
+		oninput,
+		onimages
+	}: {
+		/** `new` floats beside its pin; `reply` and `edit` sit inside a thread. */
+		variant?: 'new' | 'reply' | 'edit';
+		placeholder?: string;
+		initial?: string;
+		/** The images of a comment being edited. */
+		initialImages?: CommentImage[];
+		autofocus?: boolean;
+		onsubmit: (body: string, images: CommentImage[]) => Promise<unknown> | unknown;
+		oncancel?: () => void;
+		oninput?: (value: string) => void;
+		/** How many images the field holds, as it changes. */
+		onimages?: (count: number) => void;
+	} = $props();
+
+	interface Attachment {
+		key: number;
+		/** A local object URL while it uploads, then wherever it is shown from. */
+		preview: string;
+		/** Set once uploaded. */
+		image?: CommentImage;
+		error?: string;
+	}
+
+	const comments = useComments().store;
+	// svelte-ignore state_referenced_locally
+	let value = $state(initial);
+	// svelte-ignore state_referenced_locally
+	let attachments = $state<Attachment[]>(initialImages.map((image, key) => ({ key, preview: comments.imageUrl(image), image })));
+	// svelte-ignore state_referenced_locally
+	let nextKey = initialImages.length;
+	let sending = $state(false);
+	let dragging = $state(false);
+	let field = $state<HTMLTextAreaElement>();
+	let form = $state<HTMLFormElement>();
+	const uploading = $derived(attachments.some((a) => !a.image && !a.error));
+	const empty = $derived(!value.trim() && !attachments.some((a) => a.image));
+	const blocked = $derived(empty || sending || uploading || attachments.some((a) => a.error));
+
+	$effect(() => onimages?.(attachments.length));
+
+	export function focus() {
+		field?.focus();
+	}
+
+	function fit() {
+		if (!field) return;
+		field.style.height = 'auto';
+		field.style.height = `${Math.min(field.scrollHeight, 160)}px`;
+	}
+
+	function add(files: Iterable<File>) {
+		for (const file of files) {
+			if (!IMAGE_TYPES.includes(file.type)) {
+				comments.error = 'Only PNG, JPEG, GIF and WebP images can be added.';
+				continue;
+			}
+			if (attachments.length >= MAX_IMAGES) {
+				comments.error = `A comment can have up to ${MAX_IMAGES} images.`;
+				break;
+			}
+			const key = nextKey++;
+			attachments.push({ key, preview: URL.createObjectURL(file) });
+			void upload(key, file);
+		}
+		field?.focus();
+	}
+
+	async function upload(key: number, file: File) {
+		const update = (change: Partial<Attachment>) => {
+			const attachment = attachments.find((a) => a.key === key);
+			if (attachment) Object.assign(attachment, change);
+		};
+		if (file.size > MAX_IMAGE_BYTES) {
+			update({ error: `Larger than ${MAX_IMAGE_BYTES / 1024 / 1024} MB` });
+			return;
+		}
+		try {
+			const bitmap = await createImageBitmap(file).catch(() => {
+				throw new Error('Not a readable image');
+			});
+			const { width, height } = bitmap;
+			bitmap.close();
+			update({ image: await comments.upload(file, width, height) });
+		} catch (error) {
+			update({ error: (error as Error).message });
+		}
+	}
+
+	function release(list: Attachment[]) {
+		for (const a of list) if (a.preview.startsWith('blob:')) URL.revokeObjectURL(a.preview);
+	}
+
+	function remove(key: number) {
+		release(attachments.filter((a) => a.key === key));
+		attachments = attachments.filter((a) => a.key !== key);
+		field?.focus();
+	}
+
+	onDestroy(() => release(attachments));
+
+	const carriesFiles = (event: DragEvent) => event.dataTransfer?.types.includes('Files') ?? false;
+
+	function ondragover(event: DragEvent) {
+		if (!carriesFiles(event)) return;
+		event.preventDefault();
+		event.dataTransfer!.dropEffect = 'copy';
+		dragging = true;
+	}
+
+	function ondragleave(event: DragEvent) {
+		if (!form?.contains(event.relatedTarget as Node | null)) dragging = false;
+	}
+
+	function ondrop(event: DragEvent) {
+		if (!carriesFiles(event)) return;
+		event.preventDefault();
+		dragging = false;
+		add(event.dataTransfer!.files);
+	}
+
+	function onpaste(event: ClipboardEvent) {
+		const files = [...(event.clipboardData?.files ?? [])].filter((file) => file.type.startsWith('image/'));
+		if (!files.length) return;
+		event.preventDefault();
+		add(files);
+	}
+
+	async function submit(event?: Event) {
+		event?.preventDefault();
+		if (blocked) return;
+		const body = value;
+		const sent = attachments;
+		sending = true;
+		if (variant !== 'edit') {
+			value = '';
+			attachments = [];
+		}
+		requestAnimationFrame(fit);
+		try {
+			await onsubmit(body.trim(), sent.map((a) => a.image!));
+			if (variant !== 'edit') release(sent);
+		} catch {
+			value = body;
+			attachments = sent;
+			requestAnimationFrame(fit);
+		} finally {
+			sending = false;
+			field?.focus();
+		}
+	}
+
+	function onkeydown(event: KeyboardEvent) {
+		if (event.isComposing) return;
+		if (event.key === 'Enter' && !event.shiftKey) {
+			event.preventDefault();
+			void submit();
+		} else if (event.key === 'Escape') {
+			event.preventDefault();
+			event.stopPropagation();
+			oncancel?.();
+		}
+	}
+
+	onMount(() => {
+		fit();
+		if (autofocus) {
+			field?.focus({ preventScroll: true });
+			field?.setSelectionRange(value.length, value.length);
+		}
+	});
+</script>
+
+<form
+	bind:this={form}
+	onsubmit={submit}
+	{ondragover}
+	ondragenter={ondragover}
+	{ondragleave}
+	{ondrop}
+	class={[
+		'flex flex-col bg-white text-[13px] text-vc-ink transition-colors',
+		variant === 'new'
+			? 'w-[296px] rounded-[18px] border border-vc-comment py-[5px] pr-[5px] pl-3.5 shadow-[0_2px_14px_rgb(0_0_0/0.18)]'
+			: 'rounded-[14px] border border-vc-line py-[3px] pr-[3px] pl-3 focus-within:border-vc-comment',
+		dragging && 'border-vc-comment! bg-vc-comment-soft ring-2 ring-vc-comment/30'
+	]}
+>
+	{#if attachments.length}
+		<ul class="flex flex-wrap gap-1.5 pt-1.5 pr-1.5 pb-1" aria-label="Images">
+			{#each attachments as attachment (attachment.key)}
+				<li class="relative size-14 overflow-hidden rounded-lg border border-vc-line bg-vc-surface" title={attachment.error}>
+					<img src={attachment.preview} alt="" class={['size-full object-cover', !attachment.image && 'opacity-50']} />
+					{#if attachment.error}
+						<span class="absolute inset-0 grid place-items-center bg-white/85 px-1 text-center text-[10px] leading-tight font-medium text-red-600">
+							Not added
+						</span>
+					{:else if !attachment.image}
+						<span class="absolute inset-0 m-auto size-4 animate-spin rounded-full border-2 border-vc-comment border-t-transparent" aria-label="Uploading"></span>
+					{/if}
+					<button
+						type="button"
+						class="absolute top-0.5 right-0.5 grid size-4 place-items-center rounded-full bg-black/60 text-white hover:bg-black/80"
+						aria-label="Remove image"
+						title="Remove"
+						onclick={() => remove(attachment.key)}
+					>
+						<Icon name="close" size={10} />
+					</button>
+				</li>
+			{/each}
+		</ul>
+	{/if}
+	<div class="flex items-end gap-2">
+		<textarea
+			bind:this={field}
+			bind:value
+			rows="1"
+			{placeholder}
+			aria-label={placeholder}
+			maxlength={MAX_BODY}
+			{onkeydown}
+			{onpaste}
+			oninput={() => { fit(); oninput?.(value); }}
+			class="max-h-40 min-w-0 flex-1 resize-none self-center bg-transparent py-1 leading-5 outline-none placeholder:text-vc-muted/70"
+		></textarea>
+		{#if variant === 'edit'}
+			<button type="button" class="h-6 rounded-full px-2 text-xs text-vc-muted hover:bg-vc-wash" onclick={() => oncancel?.()}>Cancel</button>
+		{/if}
+		<button
+			type="submit"
+			disabled={blocked}
+			aria-label={variant === 'edit' ? 'Save' : 'Send'}
+			title={uploading ? 'Uploading images…' : variant === 'edit' ? 'Save (Enter)' : 'Send (Enter)'}
+			class={[
+				'grid shrink-0 place-items-center rounded-full text-white transition-colors',
+				variant === 'new' ? 'size-7' : 'size-6',
+				blocked ? 'bg-[#d9d9d9]' : 'bg-vc-comment hover:brightness-110'
+			]}
+		>
+			<Icon name={variant === 'edit' ? 'check' : 'send'} size={variant === 'new' ? 16 : 14} />
+		</button>
+	</div>
+</form>