visual-comments 0.0.0-stage → 0.2.0

package/dist/core/threads.svelte.js

@@ -0,0 +1,336 @@
+/**
+ * The space's threads, kept current with the server's event stream. Actions
+ * show their result at once and resync with the server when they fail.
+ */
+export class Threads {
+    viewer = $state(null);
+    threads = $state([]);
+    spaceName = $state('');
+    loading = $state(true);
+    /** Whether `viewer` is known: from the server's answer, or given when the page loaded. */
+    viewerKnown = $state(false);
+    /** A failed action, shown until dismissed. */
+    error = $state(null);
+    /** Ticks every 30 seconds so relative times stay current. */
+    now = $state(Date.now());
+    /** This tab's event stream, as the server named it, while it is open. */
+    connection = $state();
+    /** Everyone present in the space, this tab included, while the event stream is open. */
+    participants = $state.raw([]);
+    /** The space's agents once listed; undefined until then, or when the space has them turned off. */
+    agents = $state.raw();
+    api;
+    refreshing;
+    queued = false;
+    listening;
+    nextPending = -1;
+    presence;
+    /** The last presence sent, with its connection, so an unchanged one is not sent again. */
+    posted = '';
+    /** The participants as last received, so an unchanged list does not wake every listener. */
+    received = '[]';
+    /** `viewer`: who is signed in, when the page already knows it; undefined to wait for the server. */
+    constructor(api, viewer) {
+        this.api = api;
+        if (viewer !== undefined) {
+            this.viewer = viewer;
+            this.viewerKnown = true;
+        }
+    }
+    get unreadCount() {
+        return this.threads.filter((thread) => thread.unread && !thread.resolvedAt).length;
+    }
+    start() {
+        void this.refresh();
+        const onfocus = () => { void this.refresh(); };
+        window.addEventListener('focus', onfocus);
+        const timer = setInterval(() => { this.now = Date.now(); }, 30_000);
+        return () => {
+            window.removeEventListener('focus', onfocus);
+            clearInterval(timer);
+            this.stopListening();
+        };
+    }
+    /** Coalesces overlapping refreshes into at most one more request. */
+    refresh() {
+        if (this.refreshing) {
+            this.queued = true;
+            return this.refreshing;
+        }
+        this.refreshing = (async () => {
+            try {
+                const response = await this.api.fetch('');
+                if (!response.ok)
+                    throw new Error();
+                const snapshot = (await response.json());
+                this.viewer = snapshot.viewer;
+                this.viewerKnown = true;
+                this.spaceName = snapshot.space.name;
+                // Keep replies that are still on their way to the server.
+                const pending = new Map(this.threads.map((t) => [t.id, t.comments.filter((c) => c.pending)]));
+                this.threads = snapshot.threads.map((thread) => {
+                    const waiting = pending.get(thread.id);
+                    return waiting?.length ? { ...thread, comments: [...thread.comments, ...waiting] } : thread;
+                });
+                if (this.viewer)
+                    this.listen();
+                else
+                    this.stopListening();
+            }
+            catch {
+                // Keep what is shown; the next event or focus retries.
+            }
+            finally {
+                this.loading = false;
+                this.refreshing = undefined;
+                if (this.queued) {
+                    this.queued = false;
+                    void this.refresh();
+                }
+            }
+        })();
+        return this.refreshing;
+    }
+    stopListening() {
+        this.listening?.abort();
+        this.listening = undefined;
+        this.disconnected();
+    }
+    /** Without the stream, who is present is unknown, and the server has already let this tab go. */
+    disconnected() {
+        this.connection = undefined;
+        this.setParticipants([]);
+    }
+    setParticipants(participants) {
+        const json = JSON.stringify(participants);
+        if (json === this.received)
+            return;
+        this.received = json;
+        this.participants = participants;
+    }
+    /** Follows the event stream; after a dropped connection, catches up on anything missed. */
+    listen() {
+        if (this.listening)
+            return;
+        const controller = new AbortController();
+        this.listening = controller;
+        void (async () => {
+            let connected = false;
+            while (!controller.signal.aborted && this.viewer) {
+                try {
+                    const response = await this.api.fetch('/events', { signal: controller.signal });
+                    if (!response.ok || !response.body)
+                        break;
+                    if (connected)
+                        void this.refresh();
+                    connected = true;
+                    const reader = response.body.pipeThrough(new TextDecoderStream()).getReader();
+                    let buffer = '';
+                    for (;;) {
+                        const { value, done } = await reader.read();
+                        if (done)
+                            break;
+                        buffer += value;
+                        let end;
+                        while ((end = buffer.indexOf('\n\n')) !== -1) {
+                            this.receive(buffer.slice(0, end));
+                            buffer = buffer.slice(end + 2);
+                        }
+                    }
+                }
+                catch {
+                    // Dropped; try again shortly.
+                }
+                if (controller.signal.aborted)
+                    break;
+                this.disconnected();
+                await new Promise((done) => setTimeout(done, 3000));
+            }
+            if (this.listening === controller)
+                this.listening = undefined;
+        })();
+    }
+    /** One message of the event stream. Servers without presence send only `change`. */
+    receive(message) {
+        const event = /^event: (.*)$/m.exec(message)?.[1];
+        if (event === 'change')
+            return void this.refresh();
+        if (event !== 'hello' && event !== 'presence')
+            return;
+        let data;
+        try {
+            data = JSON.parse(message.match(/^data: ?(.*)$/gm)?.map((line) => line.replace(/^data: ?/, '')).join('\n') ?? '');
+        }
+        catch {
+            return;
+        }
+        if (event === 'hello' && typeof data?.connection === 'string') {
+            this.connection = data.connection;
+            // A new connection is a new participant: tell the server what this tab is doing.
+            void this.postPresence();
+        }
+        else if (event === 'presence' && Array.isArray(data?.participants)) {
+            this.setParticipants(data.participants);
+        }
+    }
+    /**
+     * Says what this tab is doing, unless it said so already. `again` sends it
+     * even so, as the heartbeat that keeps `typing` from lapsing.
+     */
+    setPresence(presence, again = false) {
+        this.presence = presence;
+        void this.postPresence(again);
+    }
+    async postPresence(again = false) {
+        const connection = this.connection;
+        if (!connection || !this.presence)
+            return;
+        const body = JSON.stringify({ connection, ...this.presence });
+        if (body === this.posted && !again)
+            return;
+        this.posted = body;
+        try {
+            const response = await this.api.fetch('/presence', {
+                method: 'POST', headers: { 'Content-Type': 'application/json' }, body
+            });
+            if (!response.ok && this.posted === body)
+                this.posted = '';
+        }
+        catch {
+            // The next change, or the next connection, sends it again.
+            if (this.posted === body)
+                this.posted = '';
+        }
+    }
+    async request(method, path, body) {
+        const response = await this.api.fetch(path, {
+            method,
+            headers: body === undefined ? undefined : { 'Content-Type': 'application/json' },
+            body: body === undefined ? undefined : JSON.stringify(body)
+        });
+        const result = await response.json().catch(() => ({}));
+        if (!response.ok) {
+            throw new Error(result.error ?? 'Something went wrong. Try again.');
+        }
+        return result;
+    }
+    apply(result) {
+        if (result.thread) {
+            const thread = result.thread;
+            const index = this.threads.findIndex((t) => t.id === thread.id);
+            if (index === -1)
+                this.threads.push(thread);
+            else
+                this.threads[index] = thread;
+        }
+        if (result.deleted !== undefined)
+            this.threads = this.threads.filter((t) => t.id !== result.deleted);
+    }
+    /** Runs an action, showing its error and resyncing with the server if it fails. */
+    async run(action, rethrow = false) {
+        try {
+            this.apply(await action());
+        }
+        catch (error) {
+            this.error = error.message;
+            void this.refresh();
+            if (rethrow)
+                throw error;
+        }
+    }
+    update(id, change) {
+        const index = this.threads.findIndex((t) => t.id === id);
+        if (index !== -1)
+            this.threads[index] = change(this.threads[index]);
+    }
+    imageUrl(image) {
+        return `${this.api.endpoint}/images/${image.id}/${image.key}`;
+    }
+    /** Uploads an image for a comment being written. Send its id with the comment. */
+    async upload(file, width, height) {
+        const response = await this.api.fetch(`/images?width=${width}&height=${height}`, {
+            method: 'POST',
+            headers: { 'Content-Type': file.type },
+            body: file
+        });
+        const result = await response.json().catch(() => ({}));
+        if (!response.ok) {
+            throw new Error(result.error ?? (response.status === 413 ? 'This image is too large.' : 'The image could not be uploaded.'));
+        }
+        return result.image;
+    }
+    async create(input, images = []) {
+        const { thread } = await this.request('POST', '/threads', { ...input, images: images.map((i) => i.id) });
+        this.apply({ thread });
+        return thread;
+    }
+    /** Shows the reply at once; throws if it could not be sent. */
+    async reply(threadId, body, images = []) {
+        const pending = {
+            id: this.nextPending--, author: this.viewer, body, images, createdAt: Date.now(), editedAt: null, pending: true
+        };
+        this.update(threadId, (t) => ({ ...t, resolvedAt: null, resolvedBy: null, comments: [...t.comments, pending] }));
+        try {
+            await this.run(() => this.request('POST', `/threads/${threadId}/comments`, { body, images: images.map((i) => i.id) }), true);
+        }
+        finally {
+            this.update(threadId, (t) => ({ ...t, comments: t.comments.filter((c) => c.id !== pending.id) }));
+        }
+    }
+    async edit(commentId, body, images) {
+        await this.run(() => this.request('PATCH', `/comments/${commentId}`, { body, images: images.map((i) => i.id) }), true);
+    }
+    async removeComment(commentId) {
+        await this.run(() => this.request('DELETE', `/comments/${commentId}`));
+    }
+    async removeThread(threadId) {
+        this.threads = this.threads.filter((t) => t.id !== threadId);
+        await this.run(() => this.request('DELETE', `/threads/${threadId}`));
+    }
+    async resolve(threadId, resolved) {
+        this.update(threadId, (t) => ({
+            ...t, resolvedAt: resolved ? Date.now() : null, resolvedBy: resolved ? this.viewer : null
+        }));
+        await this.run(() => this.request('PATCH', `/threads/${threadId}`, { resolved }));
+    }
+    async markRead(threadId, read) {
+        this.update(threadId, (t) => ({ ...t, unread: !read && t.comments.some((c) => c.author.sub !== this.viewer?.sub) }));
+        await this.run(() => this.request('POST', `/threads/${threadId}/read`, { read }));
+    }
+    async markAllRead() {
+        await Promise.all(this.threads.filter((t) => t.unread).map((t) => this.markRead(t.id, true)));
+    }
+    // Agents.
+    async loadAgents() {
+        try {
+            this.agents = (await this.request('GET', '/agents')).agents;
+        }
+        catch {
+            this.agents = undefined;
+        }
+    }
+    /** Takes an agent out of the space at once: its token stops working. */
+    async removeAgent(id) {
+        this.agents = this.agents?.filter((agent) => agent.id !== id);
+        try {
+            await this.request('DELETE', `/agents/${encodeURIComponent(id)}`);
+        }
+        catch (error) {
+            this.error = error.message;
+            void this.loadAgents();
+        }
+    }
+    /** An agent asking to join, for the person approving it. Throws when it has expired or was answered. */
+    async agentRequest(id) {
+        return (await this.request('GET', `/agents/requests/${encodeURIComponent(id)}`)).request;
+    }
+    async approveAgent(id) {
+        const { agent } = await this.request('POST', `/agents/requests/${encodeURIComponent(id)}/approve`);
+        if (this.agents)
+            this.agents = [...this.agents.filter((a) => a.id !== agent.id), agent];
+        return agent;
+    }
+    async denyAgent(id) {
+        await this.request('DELETE', `/agents/requests/${encodeURIComponent(id)}`);
+    }
+}

package/dist/core/time.d.ts

@@ -0,0 +1,3 @@
+/** "just now", "5 minutes ago", "yesterday", then a date. */
+export declare function ago(time: number, now: number): string;
+export declare function fullDate(time: number): string;

package/dist/core/time.js

@@ -0,0 +1,25 @@
+const relative = new Intl.RelativeTimeFormat(undefined, { numeric: 'auto' });
+const UNITS = [
+    ['minute', 60_000],
+    ['hour', 3_600_000],
+    ['day', 86_400_000]
+];
+/** "just now", "5 minutes ago", "yesterday", then a date. */
+export function ago(time, now) {
+    const elapsed = Math.max(0, now - time);
+    if (elapsed < 60_000)
+        return 'just now';
+    if (elapsed < 7 * 86_400_000) {
+        const [unit, size] = UNITS.findLast(([, size]) => elapsed >= size);
+        return relative.format(-Math.floor(elapsed / size), unit);
+    }
+    const date = new Date(time);
+    return date.toLocaleDateString(undefined, {
+        day: 'numeric',
+        month: 'short',
+        year: date.getFullYear() === new Date(now).getFullYear() ? undefined : 'numeric'
+    });
+}
+export function fullDate(time) {
+    return new Date(time).toLocaleString(undefined, { dateStyle: 'medium', timeStyle: 'short' });
+}

package/dist/index.d.ts

@@ -0,0 +1,5 @@
+export { VisualComments, pageOf, type VisualCommentsOptions, type SurfaceInfo, type CommentFilters, type PresenceLocation } from './visual-comments.svelte.js';
+export type * from './shared/types.js';
+import { VisualComments, type VisualCommentsOptions } from './visual-comments.svelte.js';
+/** Adds comments to the page. Call once, in the browser. */
+export declare function createVisualComments(options: VisualCommentsOptions, doc?: Document): VisualComments;

package/dist/index.js

@@ -0,0 +1,6 @@
+export { VisualComments, pageOf } from './visual-comments.svelte.js';
+import { VisualComments } from './visual-comments.svelte.js';
+/** Adds comments to the page. Call once, in the browser. */
+export function createVisualComments(options, doc) {
+    return new VisualComments(options, doc);
+}

package/dist/server/env.d.ts

@@ -0,0 +1,78 @@
+import type { Viewer } from '../shared/types.js';
+import { type CommentsUser, type Handle } from './index.js';
+import { type CommentsEnv } from './variables.js';
+export { commentsVariables, type CommentsEnv, type CommentsEnvName } from './variables.js';
+export interface CommentsSignInOptions {
+    /**
+     * More host names the development sign-in works on, besides localhost: e.g.
+     * the machine's address on a private network, to open the dev server from
+     * another machine. Whoever reaches the site there can sign in as anyone.
+     */
+    devHosts?: string[];
+}
+export interface CommentsEnvOptions {
+    /**
+     * Whether the dev server is running: `dev` from `$app/env` (`$app/environment`
+     * before SvelteKit 3). Needed for `VISUAL_COMMENTS_ENABLED=dev`, and for the
+     * development sign-in.
+     */
+    dev?: boolean;
+    /**
+     * Sign people in to the comments apart from the site's own accounts, with
+     * `@cnvx/sign-in` (install it beside this package): at the provider of
+     * the `VISUAL_COMMENTS_OIDC_*` variables, or, while the dev server runs without
+     * them, with any name on localhost. Its routes are at `VISUAL_COMMENTS_AUTH`;
+     * its session is the `visual_comments_session` cookie. Without it, the site's
+     * own sign-in says who comments (`sveltekit(user)`).
+     */
+    signIn?: boolean | CommentsSignInOptions;
+}
+/** What the browser needs to reach the comments, for `<Comments config>` of `visual-comments/sveltekit`. */
+export interface CommentsClientConfig {
+    /** Where this site answers comment requests, e.g. `/_comments`. */
+    endpoint: string;
+    /** Where this site's sign-in routes are, e.g. `/auth`. */
+    auth: string;
+    /**
+     * Who is signed in to the comments, as the server knows it when the page
+     * loads (`load`): null for nobody, so the toolbar shows them at once.
+     * Undefined: the browser asks.
+     */
+    viewer?: Viewer | null;
+}
+export interface CommentsFromEnv {
+    /** Whether comments are on. */
+    readonly enabled: boolean;
+    /** For the browser, e.g. returned by the root layout's `load`. Null while comments are off. */
+    readonly client: CommentsClientConfig | null;
+    /**
+     * `client` with who is signed in to the comments' own sign-in, for the root
+     * layout's `load`: `load: (event) => comments.load(event)`. Without the own
+     * sign-in, or while off, it is `client`.
+     */
+    load(event: {
+        request: Request;
+    }): Promise<CommentsClientConfig | null>;
+    /** Answers comment requests as `user`; undefined for any other request, and for every request while off. */
+    handle(request: Request, user: CommentsUser): Promise<Response | undefined>;
+    /**
+     * SvelteKit's `handle` hook. With the comments' own sign-in, it answers its
+     * routes and comments as the person signed in there; put it first. Otherwise
+     * put it after the site's sign-in: by default the person is
+     * `event.locals.user`. While off it passes every request on.
+     */
+    sveltekit<E extends {
+        request: Request;
+        locals: object;
+    }>(user?: (event: E) => CommentsUser | Promise<CommentsUser>): Handle<E>;
+}
+/**
+ * Sets up comments from `VISUAL_COMMENTS_*` variables. They are off unless
+ * `VISUAL_COMMENTS_ENABLED` is `true`, or `dev` while the dev server runs;
+ * on, `VISUAL_COMMENTS_SERVER`, `VISUAL_COMMENTS_SPACE` and
+ * `VISUAL_COMMENTS_SECRET` must be set, and with `signIn` outside the dev
+ * server the `VISUAL_COMMENTS_OIDC_*` ones and `VISUAL_COMMENTS_SESSION_SECRET`.
+ * Throws on a missing or invalid value, so a deployment fails at start rather
+ * than when someone comments.
+ */
+export declare function commentsFromEnv(env: CommentsEnv, options?: CommentsEnvOptions): CommentsFromEnv;

package/dist/server/env.js

@@ -0,0 +1,94 @@
+// Comments set up from environment variables, so each deployment turns them on
+// or off without a new build: on in development and staging, say, and absent
+// in production. Off, the site answers no comment requests and the browser
+// never loads the comments' code. (To leave them out of a build altogether, see
+// `visual-comments/vite`.)
+import { commentsProxy } from './index.js';
+import { invalid, read } from './variables.js';
+export { commentsVariables } from './variables.js';
+/** The comments' own sign-in's cookie. */
+const COOKIE = 'visual_comments_session';
+const OIDC = ['VISUAL_COMMENTS_OIDC_ISSUER', 'VISUAL_COMMENTS_OIDC_CLIENT_ID', 'VISUAL_COMMENTS_OIDC_CLIENT_SECRET'];
+/**
+ * Sets up comments from `VISUAL_COMMENTS_*` variables. They are off unless
+ * `VISUAL_COMMENTS_ENABLED` is `true`, or `dev` while the dev server runs;
+ * on, `VISUAL_COMMENTS_SERVER`, `VISUAL_COMMENTS_SPACE` and
+ * `VISUAL_COMMENTS_SECRET` must be set, and with `signIn` outside the dev
+ * server the `VISUAL_COMMENTS_OIDC_*` ones and `VISUAL_COMMENTS_SESSION_SECRET`.
+ * Throws on a missing or invalid value, so a deployment fails at start rather
+ * than when someone comments.
+ */
+export function commentsFromEnv(env, options = {}) {
+    const flag = read(env, 'VISUAL_COMMENTS_ENABLED') ?? 'false';
+    if (flag === 'dev' && options.dev === undefined) {
+        throw invalid('VISUAL_COMMENTS_ENABLED', 'is dev, so commentsFromEnv needs { dev }: `dev` from $app/env');
+    }
+    const enabled = flag === 'true' || (flag === 'dev' && options.dev === true);
+    if (!enabled) {
+        return {
+            enabled: false,
+            client: null,
+            load: async () => null,
+            handle: async () => undefined,
+            sveltekit: () => ({ event, resolve }) => Promise.resolve(resolve(event))
+        };
+    }
+    const required = (name) => read(env, name) ?? (() => { throw invalid(name, 'must be set while comments are on'); })();
+    const path = (read(env, 'VISUAL_COMMENTS_PATH') ?? '/_comments').replace(/(.)\/+$/, '$1');
+    const auth = (read(env, 'VISUAL_COMMENTS_AUTH') ?? '/auth').replace(/(.)\/+$/, '$1');
+    const proxy = commentsProxy({
+        server: required('VISUAL_COMMENTS_SERVER'),
+        space: required('VISUAL_COMMENTS_SPACE'),
+        secret: required('VISUAL_COMMENTS_SECRET'),
+        path
+    });
+    const client = { endpoint: path, auth };
+    if (!options.signIn)
+        return { enabled: true, client, load: async () => client, handle: proxy.handle, sveltekit: proxy.sveltekit };
+    // The comments' own sign-in: at the provider, or in development with any name.
+    const provider = OIDC.some((name) => read(env, name)) || !options.dev;
+    const [issuer, clientId, clientSecret] = OIDC.map((name) => (provider ? required(name) : undefined));
+    // In development the space's secret makes the key when there is no session secret, so the
+    // sessions outlast restarts of the dev server.
+    const secret = provider
+        ? required('VISUAL_COMMENTS_SESSION_SECRET')
+        : read(env, 'VISUAL_COMMENTS_SESSION_SECRET') ?? `visual-comments dev sign-in:${required('VISUAL_COMMENTS_SECRET')}`;
+    const devHosts = typeof options.signIn === 'object' ? options.signIn.devHosts : undefined;
+    let module;
+    // Loaded on the first request, so sites without it can use the rest of this module.
+    const load = () => (module ??= import('@cnvx/sign-in/server').then(({ createSignIn, withCookies }) => ({
+        signIn: createSignIn({ issuer, clientId, clientSecret, secret, path: auth, cookie: COOKIE, devLogin: !provider, devHosts }),
+        withCookies
+    }), (error) => { throw new Error('The comments’ own sign-in needs @cnvx/sign-in: install it beside visual-comments.', { cause: error }); }));
+    // One check per request: the layout's `load` and the hook share it, and the hook sets the
+    // cookies it renews.
+    const sessions = new WeakMap();
+    const check = (request) => {
+        let session = sessions.get(request);
+        if (!session)
+            sessions.set(request, (session = load().then(({ signIn }) => signIn.check(request))));
+        return session;
+    };
+    return {
+        enabled: true,
+        client,
+        load: async ({ request }) => ({ ...client, viewer: (await check(request)).user ?? null }),
+        handle: proxy.handle,
+        sveltekit: () => async ({ event, resolve }) => {
+            const { signIn, withCookies } = await load();
+            const answered = await signIn.handle(event.request);
+            if (answered)
+                return answered;
+            const { pathname } = new URL(event.request.url);
+            if (pathname === path || pathname.startsWith(`${path}/`)) {
+                const session = await check(event.request);
+                const response = await proxy.handle(event.request, session.user);
+                if (response)
+                    return withCookies(response, session.cookies);
+            }
+            const response = await resolve(event);
+            const session = sessions.get(event.request);
+            return session ? withCookies(response, (await session).cookies) : response;
+        }
+    };
+}

package/dist/server/index.d.ts

@@ -0,0 +1,34 @@
+export interface CommentsProxyOptions {
+    /** The comment server, e.g. `https://comments.convex.works`. */
+    server: string;
+    /** The site's space on it. */
+    space: string;
+    /** The space's secret. Keep it on the server. */
+    secret: string;
+    /** Where the browser reaches the comments on this site. Default `/_comments`. */
+    path?: string;
+}
+/** The person signed in on the site, as its sign-in knows them. Null or undefined when nobody is. */
+export type CommentsUser = {
+    sub: string;
+    name: string;
+    email?: string;
+    picture?: string;
+} | null | undefined;
+/** Matches SvelteKit's `Handle` without depending on SvelteKit. */
+export type Handle<E extends {
+    request: Request;
+    locals: object;
+}> = (input: {
+    event: E;
+    resolve: (event: E) => Response | Promise<Response>;
+}) => Promise<Response>;
+export declare function commentsProxy(options: CommentsProxyOptions): {
+    path: string;
+    handle: (request: Request, user: CommentsUser) => Promise<Response | undefined>;
+    sveltekit: <E extends {
+        request: Request;
+        locals: object;
+    }>(user?: (event: E) => CommentsUser | Promise<CommentsUser>) => Handle<E>;
+};
+export { commentsFromEnv, commentsVariables, type CommentsClientConfig, type CommentsEnv, type CommentsEnvName, type CommentsEnvOptions, type CommentsFromEnv, type CommentsSignInOptions } from './env.js';

package/dist/server/index.js

@@ -0,0 +1,74 @@
+// For the site's server: passes the browser's comment requests on to the
+// comment server, with the space's secret and the person signed in on the site,
+// or the token of an agent of the space.
+// Uses only the Fetch API, so it runs in Node, Bun, Deno and Workers.
+import { AGENT_HEADER, AGENT_TOKEN_PREFIX, USER_HEADER } from '../shared/protocol.js';
+const REQUEST_HEADERS = ['content-type', 'accept', 'last-event-id'];
+const RESPONSE_HEADERS = ['content-type', 'cache-control', 'content-security-policy', 'x-content-type-options', 'x-accel-buffering'];
+export function commentsProxy(options) {
+    const server = options.server.replace(/\/$/, '');
+    const path = (options.path ?? '/_comments').replace(/\/$/, '');
+    const space = encodeURIComponent(options.space);
+    /** Answers requests under `path`; undefined for any other request. */
+    async function handle(request, user) {
+        const url = new URL(request.url);
+        if (url.pathname !== path && !url.pathname.startsWith(`${path}/`))
+            return undefined;
+        const headers = new Headers({ Authorization: `Bearer ${options.secret}` });
+        for (const name of REQUEST_HEADERS) {
+            const value = request.headers.get(name);
+            if (value)
+                headers.set(name, value);
+        }
+        // An agent's token speaks for the agent, even from a browser where someone is signed in.
+        // Any other bearer token is the site's business and stays here.
+        const token = /^Bearer (\S+)$/.exec(request.headers.get('authorization') ?? '')?.[1];
+        if (token?.startsWith(AGENT_TOKEN_PREFIX))
+            headers.set(AGENT_HEADER, token);
+        else if (user) {
+            const { sub, name, email, picture } = user;
+            headers.set(USER_HEADER, base64url(JSON.stringify({ sub, name, email, picture })));
+        }
+        const hasBody = request.method !== 'GET' && request.method !== 'HEAD';
+        let response;
+        try {
+            response = await fetch(`${server}/v1/spaces/${space}${url.pathname.slice(path.length)}${url.search}`, {
+                method: request.method,
+                headers,
+                body: hasBody ? await request.arrayBuffer() : undefined,
+                signal: request.signal,
+                redirect: 'manual'
+            });
+        }
+        catch {
+            return Response.json({ error: 'The comments cannot be reached. Try again.' }, { status: 502, headers: { 'Cache-Control': 'no-store' } });
+        }
+        const out = new Headers();
+        for (const name of RESPONSE_HEADERS) {
+            const value = response.headers.get(name);
+            if (value)
+                out.set(name, value);
+        }
+        return new Response(response.body, { status: response.status, headers: out });
+    }
+    /**
+     * SvelteKit's `handle` hook. Put it after the sign-in's hook; by default the
+     * user is `event.locals.user`.
+     */
+    function sveltekit(user = (event) => event.locals.user) {
+        return async ({ event, resolve }) => {
+            const url = new URL(event.request.url);
+            if (url.pathname !== path && !url.pathname.startsWith(`${path}/`))
+                return resolve(event);
+            return (await handle(event.request, await user(event)));
+        };
+    }
+    return { path, handle, sveltekit };
+}
+function base64url(text) {
+    let binary = '';
+    for (const byte of new TextEncoder().encode(text))
+        binary += String.fromCharCode(byte);
+    return btoa(binary).replace(/\+/g, '-').replace(/\//g, '_').replace(/=+$/, '');
+}
+export { commentsFromEnv, commentsVariables } from './env.js';