web-comments 0.1.0 → 1.0.0

package/dist/chunks/chunk-RRSB326L.js

@@ -0,0 +1,720 @@
+// src/server/index.ts
+import { Hono } from "hono";
+
+// src/server/auth.ts
+async function identify(plugins, request, env) {
+  for (const plugin of plugins) {
+    const who = await plugin.authenticate(request, env);
+    if (who) return who;
+  }
+  return null;
+}
+function loginUrlFor(plugins, request) {
+  for (const plugin of plugins) {
+    const url = plugin.loginUrl?.(request);
+    if (url) return url;
+  }
+  return void 0;
+}
+
+// src/server/validate.ts
+var InvalidInput = class extends Error {
+};
+var MAX_BODY = 1e4;
+var MAX_PAGE = 512;
+var MAX_URL = 4096;
+var MAX_SELECTOR = 2048;
+var MAX_TEXT = 200;
+function record(value, what) {
+  if (typeof value !== "object" || value === null || Array.isArray(value)) {
+    throw new InvalidInput(`${what} must be an object`);
+  }
+  return value;
+}
+function string(value, what, max) {
+  if (typeof value !== "string") throw new InvalidInput(`${what} must be a string`);
+  if (value.length > max) throw new InvalidInput(`${what} is longer than ${max} characters`);
+  return value;
+}
+function fraction(value, what) {
+  if (typeof value !== "number" || !Number.isFinite(value) || value < 0 || value > 1) {
+    throw new InvalidInput(`${what} must be a number from 0 to 1`);
+  }
+  return value;
+}
+function commentBody(value) {
+  const body = string(value, "body", MAX_BODY).trim();
+  if (!body) throw new InvalidInput("body is empty");
+  return body;
+}
+function reply(value) {
+  return commentBody(record(value, "request body").body);
+}
+function anchor(value) {
+  const input = record(value, "anchor");
+  const selector = string(input.selector, "anchor.selector", MAX_SELECTOR);
+  if (!selector) throw new InvalidInput("anchor.selector is empty");
+  const viewportWidth = input.viewportWidth;
+  if (typeof viewportWidth !== "number" || !Number.isFinite(viewportWidth) || viewportWidth < 0) {
+    throw new InvalidInput("anchor.viewportWidth must be a positive number");
+  }
+  return {
+    selector,
+    tag: string(input.tag, "anchor.tag", 64).toLowerCase(),
+    x: fraction(input.x, "anchor.x"),
+    y: fraction(input.y, "anchor.y"),
+    viewportWidth: Math.round(viewportWidth),
+    ...input.text === void 0 ? {} : { text: string(input.text, "anchor.text", MAX_TEXT) }
+  };
+}
+function finite(value, what) {
+  if (typeof value !== "number" || !Number.isFinite(value)) {
+    throw new InvalidInput(`${what} must be a number`);
+  }
+  return value;
+}
+function size(value, what) {
+  const input = record(value, what);
+  const width = finite(input.width, `${what}.width`);
+  const height = finite(input.height, `${what}.height`);
+  if (width <= 0 || height <= 0 || width > 32768 || height > 32768) {
+    throw new InvalidInput(`${what} must be between 1 and 32768 pixels each way`);
+  }
+  return { width: Math.round(width), height: Math.round(height) };
+}
+function context(value) {
+  const input = record(value, "context");
+  const element = record(input.element, "context.element");
+  const rect = record(element.rect, "context.element.rect");
+  const page = record(input.page, "context.page");
+  const viewport = size(page.viewport, "context.page.viewport");
+  const scroll = record(page.scroll, "context.page.scroll");
+  return {
+    element: {
+      html: string(element.html, "context.element.html", 4096),
+      rect: {
+        x: finite(rect.x, "context.element.rect.x"),
+        y: finite(rect.y, "context.element.rect.y"),
+        width: finite(rect.width, "context.element.rect.width"),
+        height: finite(rect.height, "context.element.rect.height")
+      }
+    },
+    page: {
+      title: string(page.title, "context.page.title", 512),
+      viewport,
+      scroll: {
+        x: finite(scroll.x, "context.page.scroll.x"),
+        y: finite(scroll.y, "context.page.scroll.y")
+      },
+      devicePixelRatio: finite(page.devicePixelRatio, "context.page.devicePixelRatio"),
+      userAgent: string(page.userAgent, "context.page.userAgent", 512)
+    }
+  };
+}
+var SCREENSHOT_KINDS = ["element", "page"];
+function createThread(value) {
+  const input = record(value, "request body");
+  const page = string(input.page, "page", MAX_PAGE);
+  if (!page) throw new InvalidInput("page is empty");
+  const url = string(input.url, "url", MAX_URL);
+  if (!URL.canParse(url)) throw new InvalidInput("url is not an absolute URL");
+  const screenshots = {};
+  if (input.screenshots !== void 0) {
+    const given = record(input.screenshots, "screenshots");
+    for (const kind of SCREENSHOT_KINDS) {
+      if (given[kind] !== void 0) screenshots[kind] = size(given[kind], `screenshots.${kind}`);
+    }
+  }
+  return {
+    page,
+    url,
+    anchor: anchor(input.anchor),
+    body: commentBody(input.body),
+    ...input.context === void 0 ? {} : { context: context(input.context) },
+    screenshots
+  };
+}
+function threadUpdate(value) {
+  const input = record(value, "request body");
+  const update = {};
+  if (input.status !== void 0) {
+    if (input.status !== "open" && input.status !== "resolved") {
+      throw new InvalidInput(`status must be "open" or "resolved"`);
+    }
+    update.status = input.status;
+  }
+  if (input.anchor !== void 0) update.anchor = anchor(input.anchor);
+  if (!update.status && !update.anchor)
+    throw new InvalidInput("nothing to change: send status or anchor");
+  return update;
+}
+
+// src/server/service.ts
+var CommentsError = class extends Error {
+  constructor(status, code, message) {
+    super(message);
+    this.status = status;
+    this.code = code;
+  }
+  status;
+  code;
+};
+var SCREENSHOT_TYPES = {
+  "image/png": "png",
+  "image/jpeg": "jpg",
+  "image/webp": "webp"
+};
+var ID_ALPHABET = "0123456789abcdefghijklmnopqrstuvwxyz";
+function newId() {
+  const bytes = crypto.getRandomValues(new Uint8Array(14));
+  return Array.from(bytes, (b) => ID_ALPHABET[b % ID_ALPHABET.length]).join("");
+}
+var lastTime = 0;
+function now() {
+  lastTime = Math.max(Date.now(), lastTime + 1);
+  return new Date(lastTime).toISOString();
+}
+function authorOf(who) {
+  return {
+    id: who.id,
+    name: who.name,
+    kind: who.kind,
+    ...who.avatarUrl ? { avatarUrl: who.avatarUrl } : {}
+  };
+}
+var notFound = (what) => new CommentsError(404, "not_found", `no such ${what}`);
+function createService(options) {
+  const { basePath, maxScreenshotBytes } = options;
+  function present(thread, links = []) {
+    const { site: _, screenshots, ...rest } = thread;
+    const shown = {};
+    for (const [kind, shot] of Object.entries(screenshots)) {
+      shown[kind] = {
+        url: `${basePath}/assets/${shot.key.split("/").map(encodeURIComponent).join("/")}`,
+        contentType: shot.contentType,
+        width: shot.width,
+        height: shot.height
+      };
+    }
+    return {
+      ...rest,
+      screenshots: shown,
+      links: links.filter((link) => link.threadId === thread.id && link.commentId === null && link.url).map((link) => ({ connector: link.connector, url: link.url, title: link.title }))
+    };
+  }
+  async function presentAll(scope, threads) {
+    const links = threads.length > 0 && scope.store.listLinks ? await scope.store.listLinks(
+      scope.site,
+      threads.map((thread) => thread.id)
+    ) : [];
+    return threads.map((thread) => present(thread, links));
+  }
+  async function presentOne(scope, thread) {
+    const links = scope.store.listLinks ? await scope.store.listLinks(scope.site, [thread.id]) : [];
+    return present(thread, links);
+  }
+  async function stored(scope, id) {
+    const thread = await scope.store.getThread(scope.site, id);
+    if (!thread) throw notFound("thread");
+    return thread;
+  }
+  async function list(scope, query = {}) {
+    const limit = Math.min(query.limit ?? (query.page === void 0 ? 200 : 500), 500);
+    const threads = await scope.store.listThreads(scope.site, {
+      ...query.page === void 0 ? {} : { page: query.page },
+      limit: query.status ? 500 : limit
+    });
+    const kept = query.status ? threads.filter((t) => t.status === query.status) : threads;
+    return presentAll(scope, kept.slice(0, limit));
+  }
+  async function get(scope, id) {
+    const thread = await scope.store.getThread(scope.site, id);
+    return thread ? presentOne(scope, thread) : null;
+  }
+  async function saveScreenshots(scope, threadId, files, sizes) {
+    const saved = {};
+    const kinds = Object.keys(files);
+    if (kinds.length === 0) return saved;
+    if (!scope.assets) {
+      throw new CommentsError(501, "not_configured", "this server keeps no screenshots");
+    }
+    for (const kind of kinds) {
+      const file = files[kind];
+      const extension = SCREENSHOT_TYPES[file.type];
+      if (!extension) {
+        throw new CommentsError(
+          415,
+          "unsupported_media_type",
+          "screenshots must be PNG, JPEG or WebP"
+        );
+      }
+      if (file.size > maxScreenshotBytes) {
+        throw new CommentsError(413, "too_large", "request body is too large");
+      }
+      const size2 = sizes[kind];
+      if (!size2) throw new InvalidInput(`screenshots.${kind} needs a width and height`);
+      const key = `${scope.site}/${threadId}/${kind}-${newId()}.${extension}`;
+      await scope.assets.put(key, await file.arrayBuffer(), file.type);
+      saved[kind] = { key, contentType: file.type, ...size2 };
+    }
+    return saved;
+  }
+  async function create(scope, actor, input, files = {}) {
+    const time = now();
+    const author = authorOf(actor);
+    const threadId = newId();
+    const screenshots = await saveScreenshots(scope, threadId, files, input.screenshots);
+    const thread = {
+      id: threadId,
+      site: scope.site,
+      page: input.page,
+      url: input.url,
+      anchor: input.anchor,
+      context: input.context ?? null,
+      screenshots,
+      status: "open",
+      author,
+      createdAt: time,
+      updatedAt: time,
+      resolvedAt: null,
+      resolvedBy: null,
+      comments: []
+    };
+    const first = { id: newId(), threadId, body: input.body, author, createdAt: time };
+    await scope.store.insertThread(thread, first);
+    const shown = present({ ...thread, comments: [first] });
+    scope.announce({ type: "thread.created", thread: shown, actor });
+    return shown;
+  }
+  async function reply2(scope, actor, threadId, body) {
+    const text = commentBody(body);
+    const thread = await stored(scope, threadId);
+    const time = now();
+    const comment = {
+      id: newId(),
+      threadId,
+      body: text,
+      author: authorOf(actor),
+      createdAt: time
+    };
+    await scope.store.insertComment(scope.site, comment);
+    await scope.store.updateThread(scope.site, threadId, { updatedAt: time });
+    const shown = await presentOne(scope, {
+      ...thread,
+      updatedAt: time,
+      comments: [...thread.comments, comment]
+    });
+    scope.announce({ type: "comment.created", thread: shown, comment, actor });
+    return { thread: shown, comment };
+  }
+  async function update(scope, actor, threadId, change) {
+    const before = await stored(scope, threadId);
+    if (change.anchor && before.author.id !== actor.id) {
+      throw new CommentsError(403, "forbidden", "only the author can move a comment");
+    }
+    const time = now();
+    const events = [];
+    const changes = {};
+    if (change.anchor) {
+      changes.anchor = change.anchor;
+      events.push("thread.moved");
+    }
+    if (change.status && change.status !== before.status) {
+      const resolved = change.status === "resolved";
+      changes.status = change.status;
+      changes.resolvedAt = resolved ? time : null;
+      changes.resolvedBy = resolved ? authorOf(actor) : null;
+      events.push(resolved ? "thread.resolved" : "thread.reopened");
+    }
+    if (events.length === 0) return presentOne(scope, before);
+    changes.updatedAt = time;
+    await scope.store.updateThread(scope.site, before.id, changes);
+    const thread = await presentOne(scope, { ...before, ...changes });
+    for (const type of events) scope.announce({ type, thread, actor });
+    return thread;
+  }
+  async function deleteComment(scope, actor, commentId) {
+    const comment = await scope.store.getComment(scope.site, commentId);
+    if (!comment) throw notFound("comment");
+    if (comment.author.id !== actor.id) {
+      throw new CommentsError(403, "forbidden", "only the author can delete a comment");
+    }
+    const thread = await scope.store.getThread(scope.site, comment.threadId);
+    if (!thread) throw notFound("comment");
+    if (thread.comments[0]?.id === commentId) {
+      await scope.store.deleteThread(scope.site, thread.id);
+      const assets = scope.assets;
+      if (assets?.delete) {
+        const keys = Object.values(thread.screenshots).map((shot) => shot.key);
+        scope.waitUntil(Promise.all(keys.map((key) => assets.delete?.(key))));
+      }
+      scope.announce({ type: "thread.deleted", threadId: thread.id, actor });
+      return { deleted: "thread", threadId: thread.id };
+    }
+    await scope.store.deleteComment(scope.site, commentId);
+    scope.announce({ type: "comment.deleted", threadId: thread.id, commentId, actor });
+    return { deleted: "comment", threadId: thread.id };
+  }
+  function assetKey(scope, path) {
+    const prefix = `${basePath}/assets/`;
+    if (!path.startsWith(prefix)) return null;
+    const key = decodeURIComponent(path.slice(prefix.length));
+    if (!key.startsWith(`${scope.site}/`) || key.includes("..")) return null;
+    return key;
+  }
+  return { list, get, create, reply: reply2, update, deleteComment, assetKey };
+}
+
+// src/server/index.ts
+var MAX_JSON_BYTES = 64 * 1024;
+var SEEN_EVERY_MS = 10 * 60 * 1e3;
+var RESERVED = /* @__PURE__ */ new Set(["me", "threads", "comments", "assets", "widget.js"]);
+function createComments(options) {
+  const basePath = (options.basePath ?? "/__comments").replace(/\/+$/, "");
+  const allowedOrigins = new Set(options.allowedOrigins ?? []);
+  const linkParam = options.linkParam ?? "comment";
+  const connectors = options.connectors ?? [];
+  const service = createService({
+    basePath,
+    maxScreenshotBytes: options.maxScreenshotBytes ?? 5 * 1024 * 1024
+  });
+  const stores = /* @__PURE__ */ new WeakMap();
+  const lastSeen = /* @__PURE__ */ new Map();
+  const names = /* @__PURE__ */ new Set();
+  for (const connector of connectors) {
+    if (!/^[a-z][a-z0-9-]*$/.test(connector.name) || RESERVED.has(connector.name)) {
+      throw new Error(`web-comments: a connector can't be called "${connector.name}"`);
+    }
+    if (names.has(connector.name)) {
+      throw new Error(`web-comments: two connectors are called "${connector.name}"`);
+    }
+    names.add(connector.name);
+  }
+  const rootPaths = /* @__PURE__ */ new Map();
+  for (const connector of connectors) {
+    for (const path of connector.rootPaths?.(basePath) ?? []) rootPaths.set(path, connector);
+  }
+  async function storeFor(env) {
+    let entry = stores.get(env);
+    if (!entry) {
+      const store = options.store(env);
+      const ready = Promise.resolve(store.setup?.());
+      entry = { store, ready };
+      stores.set(env, entry);
+      ready.catch(() => stores.delete(env));
+    }
+    await entry.ready;
+    return entry.store;
+  }
+  function siteOf(request, env) {
+    return options.site?.(request, env) ?? "default";
+  }
+  function keepAlive(ctx, work) {
+    const logged = work.catch((error) => console.error("web-comments:", error));
+    try {
+      ctx?.waitUntil(logged);
+    } catch {
+    }
+  }
+  function executionOf(c) {
+    try {
+      return c.executionCtx;
+    } catch {
+      return void 0;
+    }
+  }
+  async function scopeFor(env, site, ctx, source) {
+    const store = await storeFor(env);
+    const scope = {
+      site,
+      store,
+      assets: options.assets?.(env) ?? null,
+      waitUntil: (work) => keepAlive(ctx, work),
+      announce: (event) => {
+        const announced = source ? { ...event, source } : event;
+        if (options.onEvent) keepAlive(ctx, Promise.resolve(options.onEvent(announced, env)));
+        for (const connector of connectors) {
+          if (!connector.onEvent || connector.name === source) continue;
+          const context2 = contextFor(connector, env, scope, ctx);
+          keepAlive(
+            ctx,
+            Promise.resolve().then(() => connector.onEvent?.(announced, context2))
+          );
+        }
+      }
+    };
+    return scope;
+  }
+  function actionsFor(scope, actor) {
+    return {
+      listThreads: (query) => service.list(scope, query),
+      getThread: (id) => service.get(scope, id),
+      reply: (threadId, body) => service.reply(scope, actor, threadId, body),
+      setStatus: (threadId, status) => service.update(scope, actor, threadId, { status }),
+      deleteComment: async (commentId) => {
+        await service.deleteComment(scope, actor, commentId);
+      }
+    };
+  }
+  function threadUrl(thread) {
+    const url = new URL(thread.url);
+    url.searchParams.set(linkParam, thread.id);
+    return url.href;
+  }
+  function contextFor(connector, env, scope, ctx) {
+    const { store, site } = scope;
+    const needs = (method) => {
+      const fn = store[method];
+      if (typeof fn !== "function") {
+        throw new Error(
+          `web-comments: the ${connector.name} connector needs a store with ${method}()`
+        );
+      }
+      return fn.bind(store);
+    };
+    const key = (name) => `${connector.name}:${name}`;
+    let own;
+    return {
+      env,
+      site,
+      basePath,
+      as(actor) {
+        own ??= scopeFor(env, site, ctx, connector.name);
+        const scope2 = own;
+        const act = (pick) => async (...args) => pick(actionsFor(await scope2, actor))(...args);
+        return {
+          listThreads: act((a) => a.listThreads),
+          getThread: act((a) => a.getThread),
+          reply: act((a) => a.reply),
+          setStatus: act((a) => a.setStatus),
+          deleteComment: act((a) => a.deleteComment)
+        };
+      },
+      links: {
+        find: (externalId) => needs("findLink")(site, connector.name, externalId),
+        forThread: async (threadId) => (await needs("listLinks")(site, [threadId])).filter(
+          (link) => link.connector === connector.name
+        ),
+        save: (link) => needs("saveLink")(site, {
+          connector: connector.name,
+          externalId: link.externalId,
+          threadId: link.threadId,
+          commentId: link.commentId ?? null,
+          url: link.url ?? null,
+          title: link.title ?? null,
+          createdAt: (/* @__PURE__ */ new Date()).toISOString()
+        })
+      },
+      storage: {
+        get: (name) => needs("getValue")(key(name)),
+        set: (name, value, { ttlSeconds } = {}) => needs("setValue")(
+          key(name),
+          value,
+          ttlSeconds === void 0 ? null : new Date(Date.now() + ttlSeconds * 1e3).toISOString()
+        ),
+        delete: (name) => needs("deleteValue")(key(name))
+      },
+      async screenshot(thread, kind) {
+        const shot = thread.screenshots[kind];
+        const assetKey = shot && service.assetKey(scope, shot.url);
+        if (!assetKey || !scope.assets) return null;
+        const asset = await scope.assets.get(assetKey);
+        if (!asset) return null;
+        const body = asset.body instanceof ArrayBuffer ? asset.body : await new Response(asset.body).arrayBuffer();
+        return { body, contentType: asset.contentType };
+      },
+      threadUrl,
+      waitUntil: (work) => keepAlive(ctx, work)
+    };
+  }
+  async function identifyAllowed(request, env) {
+    const who = await identify(options.auth, request, env);
+    if (!who) return null;
+    if (options.authorize && !await options.authorize(who, request, env)) return null;
+    return who;
+  }
+  function fail(status, code, message) {
+    return Response.json({ error: { code, message } }, { status });
+  }
+  const app = new Hono();
+  async function toConnector(connector, c) {
+    if (!connector.fetch) return fail(404, "not_found", "no such route");
+    const request = c.req.raw;
+    const ctx = executionOf(c);
+    const scope = await scopeFor(c.env, siteOf(request, c.env), ctx);
+    const context2 = {
+      ...contextFor(connector, c.env, scope, ctx),
+      url: `${new URL(request.url).origin}${basePath}/${connector.name}`,
+      identify: (other) => identifyAllowed(other, c.env),
+      loginUrl: (other) => loginUrlFor(options.auth, other)
+    };
+    return connector.fetch(request, context2);
+  }
+  for (const connector of connectors) {
+    app.all(`${basePath}/${connector.name}`, (c) => toConnector(connector, c));
+    app.all(`${basePath}/${connector.name}/*`, (c) => toConnector(connector, c));
+  }
+  for (const [path, connector] of rootPaths) app.all(path, (c) => toConnector(connector, c));
+  const api = new Hono();
+  api.use("*", async (c, next) => {
+    const origin = c.req.header("origin");
+    const ownOrigin = new URL(c.req.url).origin;
+    const foreign = origin !== void 0 && origin !== ownOrigin;
+    if (foreign && !allowedOrigins.has(origin)) {
+      return fail(403, "origin_not_allowed", `requests from ${origin} are not allowed`);
+    }
+    if (foreign) {
+      c.header("access-control-allow-origin", origin);
+      c.header("access-control-allow-credentials", "true");
+      c.header("vary", "origin");
+      if (c.req.method === "OPTIONS") {
+        c.header("access-control-allow-methods", "GET, POST, PATCH, DELETE");
+        c.header("access-control-allow-headers", "authorization, content-type");
+        c.header("access-control-max-age", "86400");
+        return c.body(null, 204);
+      }
+    }
+    await next();
+  });
+  if (options.widgetScript !== void 0) {
+    const script = options.widgetScript;
+    let etag;
+    api.get("/widget.js", async (c) => {
+      etag ??= crypto.subtle.digest("SHA-256", new TextEncoder().encode(script)).then(
+        (hash) => `"${Array.from(new Uint8Array(hash).slice(0, 12), (b) => b.toString(16).padStart(2, "0")).join("")}"`
+      );
+      const tag = await etag;
+      c.header("etag", tag);
+      c.header("cache-control", "no-cache");
+      if (c.req.header("if-none-match") === tag) return c.body(null, 304);
+      c.header("content-type", "text/javascript; charset=utf-8");
+      return c.body(script);
+    });
+  }
+  api.use("*", async (c, next) => {
+    const who = await identify(options.auth, c.req.raw, c.env);
+    if (!who) {
+      const loginUrl = loginUrlFor(options.auth, c.req.raw);
+      return Response.json(
+        { error: { code: "unauthenticated", message: "sign in to use comments" }, loginUrl },
+        { status: 401 }
+      );
+    }
+    if (options.authorize && !await options.authorize(who, c.req.raw, c.env)) {
+      return fail(403, "forbidden", `${who.email ?? who.name} may not use comments here`);
+    }
+    const ctx = executionOf(c);
+    const scope = await scopeFor(c.env, siteOf(c.req.raw, c.env), ctx);
+    const seen = Date.now();
+    if (scope.store.saveUser && seen - (lastSeen.get(who.id) ?? 0) > SEEN_EVERY_MS) {
+      lastSeen.set(who.id, seen);
+      keepAlive(ctx, scope.store.saveUser(who, new Date(seen).toISOString()));
+    }
+    c.set("who", who);
+    c.set("scope", scope);
+    await next();
+  });
+  async function readJson(request) {
+    if (!request.headers.get("content-type")?.toLowerCase().startsWith("application/json")) {
+      throw new CommentsError(415, "unsupported_media_type", "send the body as application/json");
+    }
+    const text = await request.text();
+    if (text.length > MAX_JSON_BYTES) throw tooLarge();
+    return parseJson(text);
+  }
+  api.onError((error) => {
+    if (error instanceof CommentsError) return fail(error.status, error.code, error.message);
+    if (error instanceof InvalidInput) return fail(400, "invalid_input", error.message);
+    console.error("web-comments:", error);
+    return fail(500, "internal", "something went wrong");
+  });
+  api.get("/me", (c) => c.json({ me: c.var.who }));
+  api.get("/threads", async (c) => {
+    const page = c.req.query("page");
+    const threads = await service.list(c.var.scope, page === void 0 ? {} : { page });
+    return c.json({ threads });
+  });
+  api.get("/threads/:id", async (c) => {
+    const thread = await service.get(c.var.scope, c.req.param("id"));
+    return thread ? c.json({ thread }) : fail(404, "not_found", "no such thread");
+  });
+  api.post("/threads", async (c) => {
+    const type = c.req.header("content-type")?.toLowerCase() ?? "";
+    let input;
+    const files = {};
+    if (type.startsWith("multipart/form-data")) {
+      const length = Number(c.req.header("content-length") ?? 0);
+      const maxScreenshotBytes = options.maxScreenshotBytes ?? 5 * 1024 * 1024;
+      if (length > MAX_JSON_BYTES + 2 * maxScreenshotBytes) throw tooLarge();
+      const form = await c.req.raw.formData();
+      const thread2 = form.get("thread");
+      if (typeof thread2 !== "string") throw new InvalidInput('missing the "thread" field');
+      if (thread2.length > MAX_JSON_BYTES) throw tooLarge();
+      input = createThread(parseJson(thread2));
+      for (const kind of SCREENSHOT_KINDS) {
+        const file = form.get(kind);
+        if (file instanceof File) files[kind] = file;
+      }
+    } else {
+      input = createThread(await readJson(c.req.raw));
+    }
+    const thread = await service.create(c.var.scope, c.var.who, input, files);
+    return c.json({ thread }, 201);
+  });
+  api.get("/assets/*", async (c) => {
+    const { assets } = c.var.scope;
+    const key = service.assetKey(c.var.scope, c.req.path);
+    const asset = key && assets ? await assets.get(key) : null;
+    if (!asset) return fail(404, "not_found", "no such screenshot");
+    return new Response(asset.body, {
+      headers: {
+        "content-type": asset.contentType,
+        // Keys never change content; the API checks who's asking before serving.
+        "cache-control": "private, max-age=31536000, immutable"
+      }
+    });
+  });
+  api.post("/threads/:id/comments", async (c) => {
+    const body = reply(await readJson(c.req.raw));
+    const result = await service.reply(c.var.scope, c.var.who, c.req.param("id"), body);
+    return c.json(result, 201);
+  });
+  api.patch("/threads/:id", async (c) => {
+    const update = threadUpdate(await readJson(c.req.raw));
+    const thread = await service.update(c.var.scope, c.var.who, c.req.param("id"), update);
+    return c.json({ thread });
+  });
+  api.delete("/comments/:id", async (c) => {
+    const result = await service.deleteComment(c.var.scope, c.var.who, c.req.param("id"));
+    return c.json(result);
+  });
+  app.route(basePath, api);
+  return {
+    app,
+    /** Answers requests under basePath (and connectors' root paths); anything else gets a 404. */
+    fetch(request, env, ctx) {
+      return Promise.resolve(app.fetch(request, env, ctx));
+    },
+    /** Whether a request belongs here, to route it from a larger worker. */
+    matches(request) {
+      const { pathname } = new URL(request.url);
+      return pathname === basePath || pathname.startsWith(`${basePath}/`) || rootPaths.has(pathname);
+    }
+  };
+}
+function parseJson(text) {
+  try {
+    return JSON.parse(text);
+  } catch {
+    throw new InvalidInput("request body is not valid JSON");
+  }
+}
+function tooLarge() {
+  return new CommentsError(413, "too_large", "request body is too large");
+}
+
+export {
+  CommentsError,
+  newId,
+  createComments
+};