web-comments 0.0.1 → 0.1.0

package/README.md

@@ -1,14 +1,196 @@
 # web-comments
 
-Figma-style comments for any web page: drop a comment on an element, reply in a thread, resolve it when it's done. Threads can become Linear issues, and coding agents can read and answer them over MCP.
+Figma-style comments for any web page. Press <kbd>C</kbd>, click an element, write. Teammates reply in the thread and resolve it when it's done. Comments stay attached to the element they were left on and follow it as the page scrolls or reflows.
 
-**Work in progress.** Nothing here is usable yet. The current release only exports a counter:
+Every comment thread records the element (selector, text, HTML, position), the URL, a screenshot of the element and one of the page as the commenter saw it.
 
-```js
-import { increment } from "web-comments";
+Three parts are open interfaces, so it fits whatever you already run:
 
-increment(); // 1
-increment(); // 2
+- **Sign-in**: auth plugins answer "who is this?" from what already sits in front of your app: your own session endpoint, Cloudflare Access, a bearer token, or anything you write. The server never stores passwords or sessions.
+- **Database**: a `CommentsStore`. Built in: Drizzle over SQLite (D1, libSQL/Turso), Postgres (PlanetScale Postgres, Neon, Supabase, ...) and MySQL (PlanetScale, ...), plus an in-memory store. Or implement the interface over anything.
+- **Screenshots**: an `AssetStore`. Built in: R2 and S3 (and S3-compatible), plus in-memory. Or implement `put`/`get` over any storage or HTTP API.
+
+The **widget** is a toolbar docked on the right of the page, built with [React Spectrum 2](https://react-spectrum.adobe.com/) and kept in a shadow root, so neither your CSS nor Spectrum's leaks across. Only people the API accepts see it; for everyone else the page is untouched.
+
+## Server
+
+A [Hono](https://hono.dev) app, so it runs on Cloudflare Workers, Node, Bun, Deno and anything else with `fetch`.
+
+```ts
+import { createComments } from "web-comments/server";
+import { sessionEndpoint } from "web-comments/auth/session-endpoint";
+import { d1Store } from "web-comments/store/d1";
+import { r2Assets } from "web-comments/store/r2";
+import widgetScript from "web-comments/widget.global.js"; // wrangler rule: { type: "Text", globs: ["**/*.global.js"] }
+
+const comments = createComments<Env>({
+  auth: [
+    sessionEndpoint({
+      url: (request) => new URL("/api/me", request.url),
+      identity: (me: any) => ({ id: `app:${me.id}`, name: me.name, email: me.email, kind: "human" }),
+    }),
+  ],
+  store: (env) => d1Store(env.DB),
+  assets: (env) => r2Assets(env.SCREENSHOTS),
+  widgetScript, // optional: serve the widget at /__comments/widget.js
+});
+
+export default {
+  fetch(request, env, ctx) {
+    if (comments.matches(request)) return comments.fetch(request, env, ctx);
+    return app.fetch(request, env, ctx);
+  },
+};
+```
+
+Mount it on the same origin as the pages being commented on, so the browser sends its cookies without any CORS setup. Other origins have to be listed in `allowedOrigins`; anything else is refused before it is read.
+
+| Option | |
+| --- | --- |
+| `auth` | Auth plugins, tried in order. The first one that recognises the request wins. |
+| `store` | `(env) => CommentsStore`: where comments are kept. |
+| `assets` | `(env) => AssetStore`: where screenshots are kept. Without it, threads keep none. |
+| `authorize` | Who may use comments once identified. Default: everyone identified. |
+| `basePath` | Default `/__comments`. |
+| `site` | `(request, env) => string`, to keep several sites apart in one store. |
+| `allowedOrigins` | Other origins that may call the API with credentials. |
+| `widgetScript` | The contents of `dist/widget.global.js`, served at `{basePath}/widget.js`. |
+| `maxScreenshotBytes` | Default 5 MB per screenshot. |
+| `onEvent` | Called after every change (`thread.created`, `comment.created`, `thread.resolved`, `thread.moved`, ...), for integrations. `thread.created` already carries the screenshots. |
+
+### Sign-in
+
+```ts
+interface AuthPlugin<Env> {
+  name: string;
+  authenticate(request: Request, env: Env): Promise<Identity | null>; // null: not mine, try the next one
+  loginUrl?(request: Request): string | undefined;
+}
+
+interface Identity {
+  id: string; // prefixed by its source, e.g. "app:42"
+  name: string;
+  email?: string;
+  avatarUrl?: string;
+  kind: "human" | "agent";
+}
+```
+
+Built in:
+
+- `sessionEndpoint` asks your app's own "who is signed in?" endpoint, passing along the request's cookie and authorization headers, and maps its answer to an identity. Any sign-in system that can say who is signed in works this way. Answers are cached briefly per credential; 401/403 means signed out.
+- `cloudflareAccess` verifies the JWT that Cloudflare Access adds to every request it lets through (signature, issuer, audience). Service tokens can be named and are treated as agents.
+- `bearerToken` matches `Authorization: Bearer <token>` against a list, for agents and scripts.
+- `devUser` treats every request as one fixed person. Local development only.
+
+Or write your own: a function that reads the request.
+
+### Database
+
+```ts
+import { drizzleStore } from "web-comments/store/drizzle";
+import { drizzle } from "drizzle-orm/neon-http"; // or d1, libsql, pglite, postgres-js, planetscale-serverless, mysql2, ...
+
+store: () => drizzleStore({ db: drizzle(process.env.DATABASE_URL!), dialect: "pg" }), // "sqlite" | "pg" | "mysql"
+```
+
+Uses [Drizzle ORM](https://orm.drizzle.team) 1.0 (a peer dependency). The tables (all prefixed `wc_`) are created on first use; to manage them in your own migrations instead, import the schema from `web-comments/store/drizzle/{sqlite,pg,mysql}` into your drizzle-kit config and pass `createTables: false`. The MySQL schema avoids foreign keys, which PlanetScale doesn't allow.
+
+`d1Store(env.DB)` is the same over a D1 binding. `memoryStore()` keeps everything in memory, for tests.
+
+To keep comments anywhere else, implement `CommentsStore` (exported from `web-comments/server`). It only saves and loads; the server owns the rules (permissions, ids, timestamps, what deleting a thread's first comment means). `web-comments/store/memory` is a complete implementation in about seventy lines.
+
+### Screenshots
+
+```ts
+import { s3Assets } from "web-comments/store/s3";
+
+assets: (env) =>
+  s3Assets({
+    endpoint: "https://s3.us-east-1.amazonaws.com", // or https://<account>.r2.cloudflarestorage.com, MinIO, ...
+    region: "us-east-1",
+    bucket: "comment-screenshots",
+    accessKeyId: env.S3_KEY_ID,
+    secretAccessKey: env.S3_SECRET,
+  }),
+```
+
+`r2Assets(bucket)` uses a Workers R2 binding; `s3Assets` signs requests with SigV4 over `fetch`, so it runs anywhere. Screenshots are served through the API (`{basePath}/assets/...`) to people it has identified, so buckets can stay private. To keep them elsewhere, implement `AssetStore`: `put(key, bytes, contentType)`, `get(key)` and optionally `delete(key)`.
+
+### What a thread records
+
+| | |
+| --- | --- |
+| `anchor` | CSS selector, the start of the element's text, its tag, and where inside it the comment was placed. |
+| `context.element` | The element's HTML (cut to 4 KB) and its box in the viewport. |
+| `context.page` | Title, viewport size, scroll position, device pixel ratio, user agent. |
+| `url`, `page` | The full address, and the page key the widget filed it under. |
+| `screenshots.element` | The element in its surroundings, outlined, cut from the page screenshot. |
+| `screenshots.page` | The viewport as it was when the comment was placed, without the widget. |
+
+Screenshots are drawn from the DOM in the browser (no screen-capture prompt). Cross-origin images that don't allow CORS can't be drawn and come out blank; a comment never waits more than a few seconds for its screenshots.
+
+## Widget
+
+The toolbar sits along the right edge: comment mode (<kbd>C</kbd>), this page's comments, and who you're signed in as. By default the page is moved over to make room for it (`margin-right` on `<html>`), so nothing is covered; `dock: "overlay"` draws it on top instead. The comments panel floats beside it. If the API answers 401 or 403, nothing is shown and the page is left alone.
+
+The widget bundles its own React 19 and Spectrum (about 200 KB gzipped), so it works next to any framework or React version. Spectrum's CSS is injected into the shadow root; its `@font-face` rules (Adobe Clean, from Adobe Fonts) go into the document, since fonts can't be declared inside a shadow root.
+
+Script tag, served by the server above:
+
+```html
+<script src="/__comments/widget.js" defer></script>
+```
+
+ES module:
+
+```ts
+import { mountComments } from "web-comments";
+
+const comments = mountComments({ endpoint: "/__comments" });
+// comments.open(threadId), comments.setCommentMode(true), comments.unmount()
+```
+
+React:
+
+```tsx
+import { Comments } from "web-comments/react";
+
+<Comments page={() => routePattern(location.pathname)} />
+```
+
+| Option | |
+| --- | --- |
+| `endpoint` | Where the API is mounted. Default `/__comments`. |
+| `page` | Which page a comment belongs to. Default: the path. Return a route pattern to share comments across ids. |
+| `headers` | Extra request headers, e.g. a bearer token your app holds. |
+| `dock` | `push` (default) moves the page over to make room for the toolbar; `overlay` draws it on top. |
+| `shortcut` | Key that toggles comment mode. Default `c`; `false` to turn it off. |
+| `theme` | `auto` (default), `light`, `dark`. |
+| `linkParam` | Query parameter of thread links. Default `comment`. |
+
+### How comments find their element
+
+When a comment is made, the widget records a CSS selector for the element, the start of its text, and where inside the element the click landed. It prefers names the page gave on purpose (`data-comment-anchor`, `data-testid`, `id`, form field `name`) and skips ids that look generated. If the selector later points at a different element, it falls back to the text. If neither finds anything, the comment is listed as "Not on the page" instead of being drawn in the wrong place. Authors can drag their pins onto another element to re-anchor them.
+
+## Demo
+
+`demo/` is a small dashboard on a Worker with D1 and R2, behind Cloudflare Access.
+
+```sh
+pnpm deploy:demo
+cp demo/.dev.vars.example demo/.dev.vars   # optional: direct local requests become "Local Developer"
+pnpm dev:demo                              # 127.0.0.1:$PORT (default 8795), with a local D1 and R2
+```
+
+## Development
+
+```sh
+pnpm install
+pnpm test        # the server against the memory, D1 (Miniflare) and Postgres (PGlite) stores; auth; assets; anchoring
+pnpm typecheck
+pnpm check       # biome
+pnpm build
 ```
 
 ## License

package/dist/auth/bearer-token.js

@@ -0,0 +1,43 @@
+import "../chunks/chunk-WSFCRVEQ.js";
+
+// src/auth/bearer-token.ts
+var MIN_TOKEN_LENGTH = 24;
+function bearerToken(tokens) {
+  return {
+    name: "bearer-token",
+    async authenticate(request, env) {
+      const header = request.headers.get("authorization");
+      const match = header?.match(/^Bearer\s+(\S+)$/i);
+      if (!match?.[1]) return null;
+      const presented = await digest(match[1]);
+      for (const entry of typeof tokens === "function" ? tokens(env) : tokens) {
+        if (entry.token.length < MIN_TOKEN_LENGTH) {
+          throw new Error(
+            `bearer token "${entry.name}" is shorter than ${MIN_TOKEN_LENGTH} characters`
+          );
+        }
+        if (equal(presented, await digest(entry.token))) {
+          return {
+            id: `token:${entry.name}`,
+            name: entry.name,
+            kind: entry.kind ?? "agent",
+            ...entry.email ? { email: entry.email } : {}
+          };
+        }
+      }
+      return null;
+    }
+  };
+}
+async function digest(value) {
+  return new Uint8Array(await crypto.subtle.digest("SHA-256", new TextEncoder().encode(value)));
+}
+function equal(a, b) {
+  if (a.length !== b.length) return false;
+  let diff = 0;
+  for (let i = 0; i < a.length; i++) diff |= (a[i] ?? 0) ^ (b[i] ?? 0);
+  return diff === 0;
+}
+export {
+  bearerToken
+};

package/dist/auth/cloudflare-access.js

@@ -0,0 +1,90 @@
+import "../chunks/chunk-WSFCRVEQ.js";
+
+// src/auth/cloudflare-access.ts
+import { createRemoteJWKSet, jwtVerify } from "jose";
+var IDENTITY_TTL_MS = 60 * 60 * 1e3;
+function cloudflareAccess(options) {
+  const verifiers = /* @__PURE__ */ new Map();
+  function verifierFor(env) {
+    const resolved = typeof options === "function" ? options(env) : options;
+    const key = `${resolved.teamDomain} ${[resolved.audience].flat().join(",")}`;
+    let verifier = verifiers.get(key);
+    if (!verifier) {
+      verifier = createVerifier(resolved);
+      verifiers.set(key, verifier);
+    }
+    return verifier;
+  }
+  return {
+    name: "cloudflare-access",
+    async authenticate(request, env) {
+      const token = request.headers.get("cf-access-jwt-assertion") ?? cookie(request, "CF_Authorization");
+      if (!token) return null;
+      return verifierFor(env)(request, token);
+    }
+  };
+}
+function createVerifier(options) {
+  const team = `https://${options.teamDomain.replace(/^https?:\/\//, "").replace(/\/+$/, "")}`;
+  const keys = options.keys ?? createRemoteJWKSet(new URL(`${team}/cdn-cgi/access/certs`));
+  const names = /* @__PURE__ */ new Map();
+  async function displayName(request, token, sub) {
+    const cached = names.get(sub);
+    if (cached && cached.until > Date.now()) return cached.name;
+    try {
+      const response = await fetch(new URL("/cdn-cgi/access/get-identity", request.url), {
+        headers: { cookie: `CF_Authorization=${token}` }
+      });
+      if (!response.ok) return void 0;
+      const identity = await response.json();
+      if (typeof identity.name !== "string" || !identity.name.trim()) return void 0;
+      const name = identity.name.trim();
+      names.set(sub, { name, until: Date.now() + IDENTITY_TTL_MS });
+      return name;
+    } catch {
+      return void 0;
+    }
+  }
+  return async (request, token) => {
+    let claims;
+    try {
+      ({ payload: claims } = await jwtVerify(token, keys, {
+        issuer: team,
+        audience: options.audience
+      }));
+    } catch {
+      return null;
+    }
+    if (claims.common_name) {
+      const service = options.serviceTokens?.[claims.common_name];
+      if (!service) return null;
+      return {
+        id: `access-service:${claims.common_name}`,
+        name: service.name,
+        kind: service.kind ?? "agent"
+      };
+    }
+    if (!claims.email || !claims.sub) return null;
+    const name = options.fetchIdentity && await displayName(request, token, claims.sub) || nameFromEmail(claims.email);
+    return { id: `access:${claims.sub}`, name, email: claims.email, kind: "human" };
+  };
+}
+function cookie(request, name) {
+  const header = request.headers.get("cookie");
+  if (!header) return void 0;
+  for (const part of header.split(";")) {
+    const [key, ...value] = part.trim().split("=");
+    if (key === name) return value.join("=");
+  }
+  return void 0;
+}
+function nameFromEmail(email) {
+  const local = email.split("@")[0] ?? email;
+  const words = local.split(/[._-]+/).filter(Boolean);
+  if (words.length === 0) return email;
+  return words.map((word) => word.charAt(0).toUpperCase() + word.slice(1)).join(" ");
+}
+export {
+  cloudflareAccess,
+  nameFromEmail
+};

package/dist/auth/dev-user.js

@@ -0,0 +1,21 @@
+import "../chunks/chunk-WSFCRVEQ.js";
+
+// src/auth/dev-user.ts
+function devUser(identity = {}) {
+  const who = {
+    id: identity.id ?? "dev:local",
+    name: identity.name ?? "Developer",
+    kind: identity.kind ?? "human",
+    ...identity.email ? { email: identity.email } : {},
+    ...identity.avatarUrl ? { avatarUrl: identity.avatarUrl } : {}
+  };
+  return {
+    name: "dev-user",
+    async authenticate() {
+      return who;
+    }
+  };
+}
+export {
+  devUser
+};

package/dist/auth/session-endpoint.js

@@ -0,0 +1,47 @@
+import "../chunks/chunk-WSFCRVEQ.js";
+
+// src/auth/session-endpoint.ts
+var DEFAULT_FORWARD = ["cookie", "authorization"];
+var MAX_CACHED = 1e3;
+function sessionEndpoint(options) {
+  const forward = (options.forward ?? DEFAULT_FORWARD).map((name) => name.toLowerCase());
+  const cacheFor = options.cacheFor ?? 3e4;
+  const cache = /* @__PURE__ */ new Map();
+  return {
+    name: "session-endpoint",
+    ...options.loginUrl ? { loginUrl: options.loginUrl } : {},
+    async authenticate(request, env) {
+      const headers = new Headers({ accept: "application/json" });
+      for (const name of forward) {
+        const value = request.headers.get(name);
+        if (value) headers.set(name, value);
+      }
+      if (!forward.some((name) => headers.has(name))) return null;
+      const key = cacheFor > 0 ? await digest(forward.map((name) => headers.get(name) ?? "").join("\n")) : "";
+      const cached = key ? cache.get(key) : void 0;
+      if (cached && cached.until > Date.now()) return cached.identity;
+      const url = typeof options.url === "function" ? options.url(request, env) : options.url;
+      const response = await fetch(url, { headers, redirect: "manual" });
+      let identity;
+      if (response.status === 401 || response.status === 403 || response.type === "opaqueredirect" || response.status >= 300 && response.status < 400) {
+        identity = null;
+      } else if (!response.ok) {
+        throw new Error(`session endpoint answered ${response.status}`);
+      } else {
+        identity = await options.identity(await response.json(), request);
+      }
+      if (key) {
+        if (cache.size >= MAX_CACHED) cache.delete(cache.keys().next().value);
+        cache.set(key, { identity, until: Date.now() + cacheFor });
+      }
+      return identity;
+    }
+  };
+}
+async function digest(value) {
+  const hash = await crypto.subtle.digest("SHA-256", new TextEncoder().encode(value));
+  return Array.from(new Uint8Array(hash), (b) => b.toString(16).padStart(2, "0")).join("");
+}
+export {
+  sessionEndpoint
+};

package/dist/chunks/chunk-6VWNCJ3A.js

@@ -0,0 +1,72 @@
+import {
+  __export
+} from "./chunk-WSFCRVEQ.js";
+
+// src/store/drizzle/pg.ts
+var pg_exports = {};
+__export(pg_exports, {
+  comments: () => comments,
+  createTablesSql: () => createTablesSql,
+  threads: () => threads,
+  users: () => users
+});
+import { index, pgTable, text } from "drizzle-orm/pg-core";
+var threads = pgTable(
+  "wc_threads",
+  {
+    id: text("id").primaryKey(),
+    site: text("site").notNull(),
+    page: text("page").notNull(),
+    url: text("url").notNull(),
+    anchor: text("anchor").notNull(),
+    context: text("context"),
+    screenshots: text("screenshots").notNull(),
+    status: text("status").notNull(),
+    authorId: text("author_id").notNull(),
+    authorName: text("author_name").notNull(),
+    authorAvatar: text("author_avatar"),
+    authorKind: text("author_kind").notNull(),
+    createdAt: text("created_at").notNull(),
+    updatedAt: text("updated_at").notNull(),
+    resolvedAt: text("resolved_at"),
+    resolvedBy: text("resolved_by")
+  },
+  (t) => [index("wc_threads_page").on(t.site, t.page, t.createdAt)]
+);
+var comments = pgTable(
+  "wc_comments",
+  {
+    id: text("id").primaryKey(),
+    threadId: text("thread_id").notNull(),
+    body: text("body").notNull(),
+    authorId: text("author_id").notNull(),
+    authorName: text("author_name").notNull(),
+    authorAvatar: text("author_avatar"),
+    authorKind: text("author_kind").notNull(),
+    createdAt: text("created_at").notNull()
+  },
+  (t) => [index("wc_comments_thread").on(t.threadId, t.createdAt)]
+);
+var users = pgTable("wc_users", {
+  id: text("id").primaryKey(),
+  name: text("name").notNull(),
+  email: text("email"),
+  avatarUrl: text("avatar_url"),
+  kind: text("kind").notNull(),
+  lastSeenAt: text("last_seen_at").notNull()
+});
+var createTablesSql = [
+  `CREATE TABLE IF NOT EXISTS wc_threads (id TEXT PRIMARY KEY, site TEXT NOT NULL, page TEXT NOT NULL, url TEXT NOT NULL, anchor TEXT NOT NULL, context TEXT, screenshots TEXT NOT NULL, status TEXT NOT NULL, author_id TEXT NOT NULL, author_name TEXT NOT NULL, author_avatar TEXT, author_kind TEXT NOT NULL, created_at TEXT NOT NULL, updated_at TEXT NOT NULL, resolved_at TEXT, resolved_by TEXT)`,
+  `CREATE INDEX IF NOT EXISTS wc_threads_page ON wc_threads (site, page, created_at)`,
+  `CREATE TABLE IF NOT EXISTS wc_comments (id TEXT PRIMARY KEY, thread_id TEXT NOT NULL, body TEXT NOT NULL, author_id TEXT NOT NULL, author_name TEXT NOT NULL, author_avatar TEXT, author_kind TEXT NOT NULL, created_at TEXT NOT NULL)`,
+  `CREATE INDEX IF NOT EXISTS wc_comments_thread ON wc_comments (thread_id, created_at)`,
+  `CREATE TABLE IF NOT EXISTS wc_users (id TEXT PRIMARY KEY, name TEXT NOT NULL, email TEXT, avatar_url TEXT, kind TEXT NOT NULL, last_seen_at TEXT NOT NULL)`
+];
+
+export {
+  threads,
+  comments,
+  users,
+  createTablesSql,
+  pg_exports
+};

package/dist/chunks/chunk-GHNSLFY2.js

@@ -0,0 +1,72 @@
+import {
+  __export
+} from "./chunk-WSFCRVEQ.js";
+
+// src/store/drizzle/sqlite.ts
+var sqlite_exports = {};
+__export(sqlite_exports, {
+  comments: () => comments,
+  createTablesSql: () => createTablesSql,
+  threads: () => threads,
+  users: () => users
+});
+import { index, sqliteTable, text } from "drizzle-orm/sqlite-core";
+var threads = sqliteTable(
+  "wc_threads",
+  {
+    id: text("id").primaryKey(),
+    site: text("site").notNull(),
+    page: text("page").notNull(),
+    url: text("url").notNull(),
+    anchor: text("anchor").notNull(),
+    context: text("context"),
+    screenshots: text("screenshots").notNull(),
+    status: text("status").notNull(),
+    authorId: text("author_id").notNull(),
+    authorName: text("author_name").notNull(),
+    authorAvatar: text("author_avatar"),
+    authorKind: text("author_kind").notNull(),
+    createdAt: text("created_at").notNull(),
+    updatedAt: text("updated_at").notNull(),
+    resolvedAt: text("resolved_at"),
+    resolvedBy: text("resolved_by")
+  },
+  (t) => [index("wc_threads_page").on(t.site, t.page, t.createdAt)]
+);
+var comments = sqliteTable(
+  "wc_comments",
+  {
+    id: text("id").primaryKey(),
+    threadId: text("thread_id").notNull(),
+    body: text("body").notNull(),
+    authorId: text("author_id").notNull(),
+    authorName: text("author_name").notNull(),
+    authorAvatar: text("author_avatar"),
+    authorKind: text("author_kind").notNull(),
+    createdAt: text("created_at").notNull()
+  },
+  (t) => [index("wc_comments_thread").on(t.threadId, t.createdAt)]
+);
+var users = sqliteTable("wc_users", {
+  id: text("id").primaryKey(),
+  name: text("name").notNull(),
+  email: text("email"),
+  avatarUrl: text("avatar_url"),
+  kind: text("kind").notNull(),
+  lastSeenAt: text("last_seen_at").notNull()
+});
+var createTablesSql = [
+  `CREATE TABLE IF NOT EXISTS wc_threads (id TEXT PRIMARY KEY, site TEXT NOT NULL, page TEXT NOT NULL, url TEXT NOT NULL, anchor TEXT NOT NULL, context TEXT, screenshots TEXT NOT NULL, status TEXT NOT NULL, author_id TEXT NOT NULL, author_name TEXT NOT NULL, author_avatar TEXT, author_kind TEXT NOT NULL, created_at TEXT NOT NULL, updated_at TEXT NOT NULL, resolved_at TEXT, resolved_by TEXT)`,
+  `CREATE INDEX IF NOT EXISTS wc_threads_page ON wc_threads (site, page, created_at)`,
+  `CREATE TABLE IF NOT EXISTS wc_comments (id TEXT PRIMARY KEY, thread_id TEXT NOT NULL, body TEXT NOT NULL, author_id TEXT NOT NULL, author_name TEXT NOT NULL, author_avatar TEXT, author_kind TEXT NOT NULL, created_at TEXT NOT NULL)`,
+  `CREATE INDEX IF NOT EXISTS wc_comments_thread ON wc_comments (thread_id, created_at)`,
+  `CREATE TABLE IF NOT EXISTS wc_users (id TEXT PRIMARY KEY, name TEXT NOT NULL, email TEXT, avatar_url TEXT, kind TEXT NOT NULL, last_seen_at TEXT NOT NULL)`
+];
+
+export {
+  threads,
+  comments,
+  users,
+  createTablesSql,
+  sqlite_exports
+};