visual-comments 0.0.0-stage → 0.2.0

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/Connect.svelte

@@ -0,0 +1,128 @@
+<svelte:options css="injected" />
+
+<!--
+  Approving an agent. `visual-comments connect` sends the person to
+  `#vc-connect=<id>`; Allow adds the agent to the space, under its own name.
+  Signed out, it offers to sign in first; the address keeps the request.
+-->
+<script lang="ts">
+	import type { Agent, AgentRequest } from '../shared/types.js';
+	import { useComments } from './context.js';
+
+	let { id }: { id: string } = $props();
+
+	const vc = useComments();
+	const space = $derived(vc.store.spaceName || 'this space');
+	const signedIn = $derived(Boolean(vc.viewer));
+	let request = $state<AgentRequest>();
+	let joined = $state<Agent>();
+	let failed = $state<string>();
+	let busy = $state(false);
+
+	$effect(() => {
+		if (!signedIn) return;
+		let current = true;
+		request = undefined;
+		failed = undefined;
+		vc.store.agentRequest(id).then(
+			(found) => { if (current) request = found; },
+			(error: Error) => {
+				if (!current) return;
+				failed = error.message;
+				// The sign-in may have lapsed since the page loaded; then this offers it again.
+				void vc.store.refresh();
+			}
+		);
+		return () => { current = false; };
+	});
+
+	async function answer(allow: boolean) {
+		busy = true;
+		failed = undefined;
+		try {
+			if (allow) joined = await vc.store.approveAgent(id);
+			else {
+				await vc.store.denyAgent(id);
+				vc.endConnect();
+			}
+		} catch (error) {
+			failed = (error as Error).message;
+		} finally {
+			busy = false;
+		}
+	}
+</script>
+
+<dialog
+	{@attach (node) => node.showModal()}
+	onclose={() => vc.endConnect()}
+	aria-labelledby="vc-connect-title"
+	class="vc-ui pointer-events-auto m-auto w-[360px] max-w-[calc(100vw-24px)] rounded-[12px] bg-white p-5 text-[13px] text-vc-ink shadow-[0_8px_40px_rgb(0_0_0/0.28)] outline-none backdrop:bg-black/30"
+>
+	{#if !vc.viewer}
+		<h2 id="vc-connect-title" class="text-[15px] font-semibold">An agent wants to join</h2>
+		{#if vc.loading}
+			<p class="mt-2 text-vc-muted">Connecting…</p>
+		{:else}
+			<p class="mt-2 text-vc-muted">Sign in to see which agent asks, and to let it read and write comments here.</p>
+			<div class="mt-5 flex justify-end gap-2">
+				<form method="dialog"><button class="vc-dialog-button">Cancel</button></form>
+				<button type="button" class="vc-dialog-button vc-dialog-primary" onclick={() => vc.signIn()}>Sign in</button>
+			</div>
+		{/if}
+	{:else if joined}
+		<h2 id="vc-connect-title" class="text-[15px] font-semibold">{joined.name} joined {space}</h2>
+		<p class="mt-2 text-vc-muted">It sees new comments and replies under its own name. Remove it from your account menu at any time.</p>
+		<form method="dialog" class="mt-5 flex justify-end">
+			<button class="vc-dialog-button vc-dialog-primary">Done</button>
+		</form>
+	{:else if request}
+		<h2 id="vc-connect-title" class="text-[15px] font-semibold">{request.name} wants to join {space} as an agent</h2>
+		<p class="mt-2 text-vc-muted">
+			It will see every comment here, and may reply and act on them under its own name. Allow it only if you started it.
+		</p>
+		<p class="mt-4 text-vc-muted">The agent shows this code:</p>
+		<p class="mt-1 rounded-[8px] bg-vc-surface py-2 text-center font-mono text-xl tracking-[0.2em]">{request.code}</p>
+		{#if failed}<p role="alert" class="mt-3 text-red-600">{failed}</p>{/if}
+		<div class="mt-5 flex justify-end gap-2">
+			<button type="button" class="vc-dialog-button" disabled={busy} onclick={() => answer(false)}>Deny</button>
+			<button type="button" class="vc-dialog-button vc-dialog-primary" disabled={busy} onclick={() => answer(true)}>Allow</button>
+		</div>
+	{:else if failed}
+		<h2 id="vc-connect-title" class="text-[15px] font-semibold">This request cannot be answered</h2>
+		<p class="mt-2 text-vc-muted">{failed}</p>
+		<form method="dialog" class="mt-5 flex justify-end">
+			<button class="vc-dialog-button">Close</button>
+		</form>
+	{:else}
+		<h2 id="vc-connect-title" class="text-[15px] font-semibold">An agent wants to join</h2>
+		<p class="mt-2 text-vc-muted">Loading…</p>
+	{/if}
+</dialog>
+
+<style>
+	.vc-dialog-button {
+		height: 2rem;
+		border-radius: 9999px;
+		padding: 0 0.875rem;
+		font-weight: 500;
+		background: var(--color-vc-wash);
+		outline: none;
+	}
+	.vc-dialog-button:hover:not(:disabled) {
+		filter: brightness(0.96);
+	}
+	.vc-dialog-button:focus-visible {
+		box-shadow: 0 0 0 2px var(--color-vc-comment);
+	}
+	.vc-dialog-button:disabled {
+		opacity: 0.6;
+	}
+	.vc-dialog-primary {
+		background: var(--color-vc-comment);
+		color: white;
+	}
+	.vc-dialog-primary:focus-visible {
+		box-shadow: 0 0 0 2px white, 0 0 0 4px var(--color-vc-comment);
+	}
+</style>

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

@@ -0,0 +1,6 @@
+type $$ComponentProps = {
+    id: string;
+};
+declare const Connect: import("svelte").Component<$$ComponentProps, {}, "">;
+type Connect = ReturnType<typeof Connect>;
+export default Connect;

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,69 @@
+<!-- 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 = '',
+		onopen
+	}: {
+		/** Accessible name for the trigger. */
+		label: string;
+		trigger: Snippet;
+		children: Snippet<[close: () => void]>;
+		align?: 'start' | 'end';
+		tone?: 'light' | 'dark';
+		class?: string;
+		/** Called as it opens, e.g. to load what it lists. */
+		onopen?: () => void;
+	} = $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;
+		onopen?.();
+		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,15 @@
+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;
+    /** Called as it opens, e.g. to load what it lists. */
+    onopen?: () => void;
+};
+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;