visual-comments 0.0.0-stage → 0.1.0

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>

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

@@ -0,0 +1,20 @@
+import type { CommentImage } from '../shared/types.js';
+type $$ComponentProps = {
+    /** `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;
+};
+declare const Composer: import("svelte").Component<$$ComponentProps, {
+    focus: () => void;
+}, "">;
+type Composer = ReturnType<typeof Composer>;
+export default Composer;

package/dist/ui/Icon.svelte

@@ -0,0 +1,44 @@
+<script lang="ts" module>
+	// 24×24 stroke icons.
+	const PATHS = {
+		canvas:
+			'M3 6.5a3.5 3.5 0 1 0 7 0a3.5 3.5 0 1 0-7 0M14 6.5a3.5 3.5 0 1 0 7 0a3.5 3.5 0 1 0-7 0M3 17.5a3.5 3.5 0 1 0 7 0a3.5 3.5 0 1 0-7 0M14 17.5a3.5 3.5 0 1 0 7 0a3.5 3.5 0 1 0-7 0',
+		'chevron-left': 'M15 6l-6 6 6 6',
+		'chevron-right': 'M9 6l6 6-6 6',
+		'chevron-down': 'M6 9l6 6 6-6',
+		'chevron-up': 'M6 15l6-6 6 6',
+		play: 'M7 5l12 7-12 7z',
+		external: 'M14 4h6v6M20 4l-9 9M18 14v5a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h5',
+		restart: 'M4 12a8 8 0 1 0 2.4-5.7M4 4v4h4',
+		check: 'M5 12.5l4.5 4.5L19 7.5',
+		plus: 'M12 5v14M5 12h14',
+		minus: 'M5 12h14',
+		fit: 'M4 9V4h5M20 9V4h-5M4 15v5h5M20 15v5h-5',
+		comment: 'M12 3.5a8.5 8.5 0 1 1 0 17H3.5V12A8.5 8.5 0 0 1 12 3.5z',
+		search: 'M11 4.5a6.5 6.5 0 1 0 0 13a6.5 6.5 0 1 0 0-13zM20 20l-4.4-4.4',
+		filter: 'M4 7h16M7 12h10M10 17h4',
+		more: 'M5 11a1 1 0 1 0 0 2a1 1 0 1 0 0-2zM12 11a1 1 0 1 0 0 2a1 1 0 1 0 0-2zM19 11a1 1 0 1 0 0 2a1 1 0 1 0 0-2z',
+		resolve: 'M12 3a9 9 0 1 0 0 18a9 9 0 1 0 0-18zM8 12.2l2.7 2.7L16 9.6',
+		close: 'M6 6l12 12M18 6L6 18',
+		send: 'M12 19V5M6.5 10.5L12 5l5.5 5.5'
+	} as const;
+	export type IconName = keyof typeof PATHS;
+</script>
+
+<script lang="ts">
+	let { name, size = 16 }: { name: IconName; size?: number } = $props();
+</script>
+
+<svg
+	width={size}
+	height={size}
+	viewBox="0 0 24 24"
+	fill="none"
+	stroke="currentColor"
+	stroke-width="1.75"
+	stroke-linecap="round"
+	stroke-linejoin="round"
+	aria-hidden="true"
+>
+	<path d={PATHS[name]} />
+</svg>

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

@@ -0,0 +1,29 @@
+declare const PATHS: {
+    readonly canvas: "M3 6.5a3.5 3.5 0 1 0 7 0a3.5 3.5 0 1 0-7 0M14 6.5a3.5 3.5 0 1 0 7 0a3.5 3.5 0 1 0-7 0M3 17.5a3.5 3.5 0 1 0 7 0a3.5 3.5 0 1 0-7 0M14 17.5a3.5 3.5 0 1 0 7 0a3.5 3.5 0 1 0-7 0";
+    readonly 'chevron-left': "M15 6l-6 6 6 6";
+    readonly 'chevron-right': "M9 6l6 6-6 6";
+    readonly 'chevron-down': "M6 9l6 6 6-6";
+    readonly 'chevron-up': "M6 15l6-6 6 6";
+    readonly play: "M7 5l12 7-12 7z";
+    readonly external: "M14 4h6v6M20 4l-9 9M18 14v5a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h5";
+    readonly restart: "M4 12a8 8 0 1 0 2.4-5.7M4 4v4h4";
+    readonly check: "M5 12.5l4.5 4.5L19 7.5";
+    readonly plus: "M12 5v14M5 12h14";
+    readonly minus: "M5 12h14";
+    readonly fit: "M4 9V4h5M20 9V4h-5M4 15v5h5M20 15v5h-5";
+    readonly comment: "M12 3.5a8.5 8.5 0 1 1 0 17H3.5V12A8.5 8.5 0 0 1 12 3.5z";
+    readonly search: "M11 4.5a6.5 6.5 0 1 0 0 13a6.5 6.5 0 1 0 0-13zM20 20l-4.4-4.4";
+    readonly filter: "M4 7h16M7 12h10M10 17h4";
+    readonly more: "M5 11a1 1 0 1 0 0 2a1 1 0 1 0 0-2zM12 11a1 1 0 1 0 0 2a1 1 0 1 0 0-2zM19 11a1 1 0 1 0 0 2a1 1 0 1 0 0-2z";
+    readonly resolve: "M12 3a9 9 0 1 0 0 18a9 9 0 1 0 0-18zM8 12.2l2.7 2.7L16 9.6";
+    readonly close: "M6 6l12 12M18 6L6 18";
+    readonly send: "M12 19V5M6.5 10.5L12 5l5.5 5.5";
+};
+export type IconName = keyof typeof PATHS;
+type $$ComponentProps = {
+    name: IconName;
+    size?: number;
+};
+declare const Icon: import("svelte").Component<$$ComponentProps, {}, "">;
+type Icon = ReturnType<typeof Icon>;
+export default Icon;

package/dist/ui/Menu.svelte

@@ -0,0 +1,65 @@
+<!-- A button that opens a popover menu below it. Items close the menu with `close()`. -->
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+
+	let {
+		label,
+		trigger,
+		children,
+		align = 'start',
+		tone = 'light',
+		class: className = ''
+	}: {
+		/** Accessible name for the trigger. */
+		label: string;
+		trigger: Snippet;
+		children: Snippet<[close: () => void]>;
+		align?: 'start' | 'end';
+		tone?: 'light' | 'dark';
+		class?: string;
+	} = $props();
+
+	const id = $props.id();
+	let button = $state<HTMLButtonElement>();
+	let popover = $state<HTMLDivElement>();
+	let open = $state(false);
+
+	function place(event: ToggleEvent) {
+		open = event.newState === 'open';
+		if (event.newState !== 'open' || !button || !popover) return;
+		const rect = button.getBoundingClientRect();
+		const gutter = 12;
+		const left = align === 'start' ? rect.left : rect.right - popover.offsetWidth;
+		popover.style.left = `${Math.max(gutter, Math.min(left, window.innerWidth - popover.offsetWidth - gutter))}px`;
+		popover.style.top = `${Math.max(gutter, Math.min(rect.bottom + 6, window.innerHeight - popover.offsetHeight - gutter))}px`;
+	}
+
+	const close = () => popover?.hidePopover();
+</script>
+
+<button
+	bind:this={button}
+	type="button"
+	popovertarget="vc-menu-{id}"
+	aria-label={label}
+	aria-expanded={open}
+	aria-controls="vc-menu-{id}"
+	title={label}
+	class={className}
+>
+	{@render trigger()}
+</button>
+<div
+	bind:this={popover}
+	id="vc-menu-{id}"
+	popover="auto"
+	ontoggle={place}
+	class={[
+		'vc-menu vc-ui fixed inset-auto m-0 max-h-[min(70vh,560px)] w-max min-w-52 max-w-[calc(100vw-24px)] overflow-y-auto rounded border p-1 text-[13px] shadow-lg',
+		tone === 'dark'
+			? 'border-white/10 bg-vc-ink text-white/90'
+			: 'border-vc-line bg-vc-surface text-vc-ink'
+	]}
+>
+	{@render children(close)}
+</div>

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

@@ -0,0 +1,13 @@
+import type { Snippet } from 'svelte';
+type $$ComponentProps = {
+    /** Accessible name for the trigger. */
+    label: string;
+    trigger: Snippet;
+    children: Snippet<[close: () => void]>;
+    align?: 'start' | 'end';
+    tone?: 'light' | 'dark';
+    class?: string;
+};
+declare const Menu: import("svelte").Component<$$ComponentProps, {}, "">;
+type Menu = ReturnType<typeof Menu>;
+export default Menu;

package/dist/ui/MenuItem.svelte

@@ -0,0 +1,38 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import Icon from './Icon.svelte';
+
+	let {
+		onselect,
+		checked,
+		children,
+		hint,
+		tone = 'light'
+	}: {
+		onselect: () => void;
+		/** Shows a check mark column when not undefined. */
+		checked?: boolean;
+		children: Snippet;
+		hint?: string;
+		tone?: 'light' | 'dark';
+	} = $props();
+</script>
+
+<button
+	type="button"
+	role="menuitem"
+	onclick={onselect}
+	class={[
+		'flex w-full items-center gap-2 rounded-[2px] px-2 py-1.5 text-left',
+		tone === 'dark' ? 'hover:bg-white/10 focus-visible:bg-white/10' : 'hover:bg-vc-wash focus-visible:bg-vc-wash',
+		'outline-none'
+	]}
+>
+	{#if checked !== undefined}
+		<span class="w-4 shrink-0 text-vc-accent">
+			{#if checked}<Icon name="check" size={14} />{/if}
+		</span>
+	{/if}
+	<span class="min-w-0 flex-1 truncate">{@render children()}</span>
+	{#if hint}<span class="shrink-0 opacity-50">{hint}</span>{/if}
+</button>

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

@@ -0,0 +1,12 @@
+import type { Snippet } from 'svelte';
+type $$ComponentProps = {
+    onselect: () => void;
+    /** Shows a check mark column when not undefined. */
+    checked?: boolean;
+    children: Snippet;
+    hint?: string;
+    tone?: 'light' | 'dark';
+};
+declare const MenuItem: import("svelte").Component<$$ComponentProps, {}, "">;
+type MenuItem = ReturnType<typeof MenuItem>;
+export default MenuItem;