@voila.dev/cliche 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Emilien Bidet and contributors
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,218 @@
+<img src="assets/og.png" alt="cliche — un cliché of every page. Front-end PRs you can SEE, and a photo album of your app by accident." width="100%">
+
+# cliche 📸
+
+**Take a _cliché_ of any page and get a shareable URL.** No Playwright, no
+browser download, no dependencies — just Bun. Ouistiti ! 🐒
+
+> _Un cliché_ is French for a snapshot. This one screenshots your app with
+> [`Bun.WebView`](https://bun.com/docs/runtime/webview), uploads it to any
+> S3-compatible bucket with `Bun.S3Client`, and hands you the URL (or the
+> markdown line) to paste into a pull request. **Everything runs on your
+> machine** — the only thing that leaves it is the upload to *your* bucket.
+>
+> This very image was captured by cliche, from an HTML file, in one command.
+> [cliche.voila.dev](https://cliche.voila.dev)
+
+```sh
+bunx @voila.dev/cliche https://localhost:4001/missions mission-list.png --upload --prefix pr-123
+```
+
+```
+Captured https://localhost:4001/missions -> mission-list.png
+Uploaded mission-list.png -> pr-123/2026-08-29-mission-list-d1cf773c.png
+https://assets.example.com/pr-123/2026-08-29-mission-list-d1cf773c.png
+```
+
+The URL is yours to paste anywhere; add `--markdown` to get a ready-made
+`![mission list](…)` line for `gh pr edit --body` instead.
+
+Or skip the CLI entirely and give the tools to your agent — `cliche` is also
+a local MCP server:
+
+```sh
+claude mcp add cliche -- bunx @voila.dev/cliche mcp
+```
+
+## Why you want this
+
+**1. Front-end PRs you can SEE.** A diff tells the reviewer what changed in
+the code; a before/after tells them what changed *for the user*. When every
+UI pull request ships with its pixels, review gets faster, regressions get
+caught at a glance, and "looks good to me" actually means someone looked.
+
+**2. You're building a photo album by accident.** Content-hashed keys mean
+every shot stays in your bucket forever, dated and browsable. Six months in,
+you own something no git history gives you: what your app *looked like*,
+release by release. Retrospectives, launch recaps, "remember when the
+dashboard looked like this?" — it's all just sitting in S3.
+
+The usual capture path drags in a Playwright install, a 100MB browser
+download, and a place to host the image. `cliche` is a single
+zero-dependency CLI (and MCP server):
+
+- **Capture** — `Bun.WebView`: the system WKWebView on macOS (nothing to
+  install), your installed Chrome via CDP on Linux/Windows. Retina-crisp PNGs.
+- **Upload** — `Bun.S3Client`: works with Cloudflare R2, AWS S3, MinIO,
+  anything that speaks S3. Keys are content-hashed, so re-uploads never break
+  old links.
+- **URL out** — one public URL per file on stdout (progress on stderr), or
+  `--markdown` for `![caption](url)` lines, so you can pipe it wherever the
+  review happens.
+- **MCP in** — `cliche mcp` serves the same two tools (`screenshot`, `upload`)
+  over stdio to any MCP client, hand-rolled JSON-RPC, still zero dependencies.
+  Everything runs locally.
+
+Requires Bun ≥ 1.4.0.
+
+## Capture
+
+```sh
+cliche <url> <out.png> [options]
+```
+
+| Option | What it does |
+| --- | --- |
+| `--viewport <WxH>` | Viewport, default `1440x900` (`390x844` for mobile shots). |
+| `--wait-for <css>` | Hold the shot until a selector exists — SPAs render late. |
+| `--scroll-to <css>` | Scroll a component into view before shooting. |
+| `--settle <ms>` | Let fonts/images/animations finish, default `1500`. |
+| `--full-page` | Grow the viewport to the full page height — the whole page in one shot. |
+| `--local-storage k=v` | Seed the target origin's localStorage (repeatable). |
+
+The `--local-storage` flag is the trick for authenticated screens: seed your
+app's session token and the page boots logged in — no login form scripting.
+
+```sh
+cliche http://localhost:4001/admin dashboard.png \
+  --local-storage "myapp.session-token=$TOKEN" \
+  --wait-for '[data-testid=dashboard]'
+```
+
+## Upload
+
+```sh
+cliche upload [--prefix pr-123] [--markdown] *.png   # or add --upload to a capture
+```
+
+Configuration is the standard environment variables `Bun.S3Client` already
+reads — if your shell can talk to your bucket, so can `cliche`:
+
+| Variable | Example |
+| --- | --- |
+| `S3_BUCKET` | `assets-dev` |
+| `S3_ENDPOINT` | `https://<account>.r2.cloudflarestorage.com` (R2) — omit for AWS |
+| `S3_ACCESS_KEY_ID` / `S3_SECRET_ACCESS_KEY` | your keys (`AWS_*` works too) |
+| `CLICHE_PUBLIC_URL` | `https://assets.example.com` — the bucket's public/custom domain |
+
+Objects are keyed `<prefix>/<yyyy-mm-dd>-<name>-<content-hash>.<ext>`: the
+hash makes re-uploads cache-safe, the date keeps the bucket browsable. The
+caption is derived from the file name — name files like you want them read:
+`mission-detail-after.png` → `![mission detail after](…)`.
+
+> [!WARNING]
+> The bucket you point `cliche` at should be one you're happy to have public
+> (PR descriptions live forever). Never capture real user data.
+
+## MCP server
+
+```sh
+cliche mcp        # stdio; nothing leaves your machine except the S3 upload
+```
+
+Registers two tools with any MCP client:
+
+- **`screenshot`** — `url` (required), `out`, `viewport` (`"390x844"`),
+  `wait_for`, `scroll_to`, `settle_ms`, `local_storage` (object), `upload`,
+  `prefix`, `markdown`. Without `out` the shot lands in a temp file; with
+  `upload: true` the result is the public URL.
+- **`upload`** — `files` (required), `prefix`, `markdown`.
+
+One-liners:
+
+```sh
+claude mcp add cliche -- bunx @voila.dev/cliche mcp    # Claude Code
+```
+
+or in a project's `.mcp.json`:
+
+```json
+{
+  "mcpServers": {
+    "cliche": { "command": "bunx", "args": ["@voila.dev/cliche", "mcp"] }
+  }
+}
+```
+
+## Programmatic API
+
+```ts
+import { capture, upload } from "@voila.dev/cliche";
+
+await capture({
+  url: "http://localhost:3000",
+  out: "home.png",
+  viewport: { width: 390, height: 844 },
+  waitFor: "main",
+});
+
+const [shot] = await upload({ files: ["home.png"], prefix: "pr-7" });
+console.log(shot.markdown);
+```
+
+## One-command S3 setup (Cloudflare R2)
+
+```sh
+bunx @voila.dev/cliche setup            # or: setup --bucket my-shots
+```
+
+Riding your existing `wrangler login`, this creates the R2 bucket, enables
+its managed public `*.r2.dev` URL, and writes `S3_BUCKET`, `S3_ENDPOINT` and
+`CLICHE_PUBLIC_URL` to `.env`. One thing wrangler can't mint: the two S3 API
+keys — the command prints the exact dashboard link, you paste two values,
+done. Any other S3-compatible service works too with the plain env vars.
+
+## The album 📔
+
+One command turns your bucket into a browsable photo album — every cliché,
+grouped by month, polaroid-style, with filtering and a lightbox. This is the
+retrospective machine:
+
+```sh
+bunx @voila.dev/cliche album            # reads the same S3_* env; demo album if none
+```
+
+It's a tiny Bun fullstack app (HTML imports, zero deps, of course) that
+ships inside the package — the source lives in `apps/album`.
+
+<img src="assets/album-preview.png" alt="album — real tries.care pages captured by cliche, grouped by month as polaroids" width="100%">
+
+*(Real example: [tries.care](https://tries.care)'s pages, captured by cliche,
+served from its PR-screenshots bucket.)*
+
+## Claude Code skill
+
+A ready-made [Claude Code](https://claude.com/claude-code) PR-screenshots
+skill ships with the package — one line installs it into your repo:
+
+```sh
+bunx @voila.dev/cliche skill            # writes .claude/skills/pr-screenshots/SKILL.md
+```
+
+(Also served at [cliche.voila.dev/skill.md](https://cliche.voila.dev/skill.md)
+if you'd rather `curl` it.) With the skill in place, Claude captures, uploads,
+and embeds before/after screenshots whenever a PR touches something visible.
+
+## Platform notes
+
+- **macOS** — WKWebView, zero setup. Shots come out at the display's scale
+  factor (2x on retina).
+- **Linux / Windows** — drives an installed Chrome, Chromium, Edge or Brave
+  over the Chrome DevTools Protocol (GitHub Actions runners ship Chrome, so
+  CI capture works out of the box).
+- `Bun.WebView` is marked experimental by Bun; `cliche` pins none of its
+  sharp edges and will track the API as it settles.
+
+## License
+
+MIT

package/apps/album/src/app.ts

@@ -0,0 +1,107 @@
+interface Shot {
+  key: string;
+  url: string;
+  size: number;
+  date: string;
+}
+
+const MONTH_LABELS = [
+  "January", "February", "March", "April", "May", "June",
+  "July", "August", "September", "October", "November", "December",
+];
+
+function monthOf(shot: Shot): string {
+  return shot.date.slice(0, 7);
+}
+
+function monthLabel(month: string): string {
+  const [year, index] = month.split("-");
+  return `${MONTH_LABELS[Number(index) - 1] ?? "Sometime"} ${year}`;
+}
+
+function captionOf(key: string): string {
+  const base = key.split("/").at(-1) ?? key;
+  return base
+    .replace(/\.\w+$/, "")
+    .replace(/^\d{4}-\d{2}-\d{2}-/, "")
+    .replace(/-[0-9a-f]{8}$/, "")
+    .replace(/[-_]+/g, " ");
+}
+
+function kilobytes(size: number): string {
+  return size > 0 ? `${Math.max(1, Math.round(size / 1024))} KB` : "";
+}
+
+const album = document.getElementById("album") as HTMLElement;
+const filterInput = document.getElementById("filter") as HTMLInputElement;
+const count = document.getElementById("count") as HTMLElement;
+const lightbox = document.getElementById("lightbox") as HTMLDialogElement;
+const lightboxImage = document.getElementById("lightbox-image") as HTMLImageElement;
+const lightboxKey = document.getElementById("lightbox-key") as HTMLElement;
+
+let allShots: Array<Shot> = [];
+
+function render(): void {
+  const query = filterInput.value.trim().toLowerCase();
+  const shots = allShots.filter((shot) => shot.key.toLowerCase().includes(query));
+  count.textContent = `${shots.length} cliché${shots.length === 1 ? "" : "s"}`;
+  album.replaceChildren();
+  if (shots.length === 0) {
+    const empty = document.createElement("p");
+    empty.className = "empty";
+    empty.textContent = "No clichés here (yet). Ouistiti ! 🐒";
+    album.append(empty);
+    return;
+  }
+  const byMonth = new Map<string, Array<Shot>>();
+  for (const shot of shots) {
+    const month = monthOf(shot);
+    byMonth.set(month, [...(byMonth.get(month) ?? []), shot]);
+  }
+  for (const [month, monthShots] of [...byMonth.entries()].sort((a, b) => b[0].localeCompare(a[0]))) {
+    const heading = document.createElement("h2");
+    heading.className = "month";
+    heading.innerHTML = `${monthLabel(month)} <span class="n">${monthShots.length}</span>`;
+    const grid = document.createElement("div");
+    grid.className = "grid";
+    for (const shot of monthShots.sort((a, b) => b.key.localeCompare(a.key))) {
+      const card = document.createElement("figure");
+      card.className = "polaroid";
+      const image = document.createElement("img");
+      image.src = shot.url;
+      image.alt = captionOf(shot.key);
+      image.loading = "lazy";
+      const caption = document.createElement("figcaption");
+      caption.className = "caption";
+      caption.textContent = captionOf(shot.key);
+      const meta = document.createElement("div");
+      meta.className = "meta";
+      meta.textContent = [shot.date, kilobytes(shot.size)].filter(Boolean).join(" · ");
+      card.append(image, caption, meta);
+      card.addEventListener("click", () => {
+        lightboxImage.src = shot.url;
+        lightboxImage.alt = captionOf(shot.key);
+        lightboxKey.textContent = shot.key;
+        lightbox.dataset.url = shot.url;
+        lightbox.showModal();
+      });
+      grid.append(card);
+    }
+    album.append(heading, grid);
+  }
+}
+
+document.getElementById("lightbox-close")?.addEventListener("click", () => lightbox.close());
+document.getElementById("lightbox-copy")?.addEventListener("click", () => {
+  void navigator.clipboard.writeText(lightbox.dataset.url ?? "");
+});
+lightbox.addEventListener("click", (event) => {
+  if (event.target === lightbox) lightbox.close();
+});
+filterInput.addEventListener("input", render);
+
+const response = await fetch("/api/shots");
+const payload = (await response.json()) as { demo: boolean; shots: Array<Shot> };
+allShots = payload.shots;
+(document.getElementById("demo-banner") as HTMLElement).hidden = !payload.demo;
+render();

package/apps/album/src/index.html

@@ -0,0 +1,38 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>album · cliche 📸</title>
+  <link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>📸</text></svg>">
+  <link rel="stylesheet" href="./styles.css">
+</head>
+<body>
+  <header>
+    <div class="brand">
+      <span class="camera">📸</span>
+      <div>
+        <h1>album<span class="accent">.</span></h1>
+        <p class="tagline">Your app, release by release. Every cliché in the bucket.</p>
+      </div>
+    </div>
+    <div class="controls">
+      <input id="filter" type="search" placeholder="Filter by key… (pr-123, checkout)">
+      <span id="count" class="count"></span>
+    </div>
+  </header>
+  <div id="demo-banner" class="demo-banner" hidden>
+    Demo album. No bucket configured yet: Run <code>bunx @voila.dev/cliche setup</code> to plug yours.
+  </div>
+  <main id="album"></main>
+  <dialog id="lightbox">
+    <img id="lightbox-image" alt="">
+    <div class="lightbox-bar">
+      <span id="lightbox-key"></span>
+      <button id="lightbox-copy">Copy URL</button>
+      <button id="lightbox-close">Close</button>
+    </div>
+  </dialog>
+  <script type="module" src="./app.ts"></script>
+</body>
+</html>

package/apps/album/src/index.ts

@@ -0,0 +1,12 @@
+import index from "./index.html";
+import { listShots } from "./shots.ts";
+
+const server = Bun.serve({
+  port: Number(process.env.PORT ?? 4949),
+  routes: {
+    "/": index,
+    "/api/shots": async () => Response.json(await listShots()),
+  },
+});
+
+console.error(`📸 l'album — ${server.url}`);

package/apps/album/src/shots.ts

@@ -0,0 +1,85 @@
+import { publicBaseUrl } from "../../../src/upload.ts";
+
+export interface Shot {
+  readonly key: string;
+  readonly url: string;
+  readonly size: number;
+  /** ISO date, from the object key when it carries one, else lastModified. */
+  readonly date: string;
+}
+
+const KEY_DATE = /(\d{4}-\d{2}-\d{2})/;
+
+function dateOf(key: string, lastModified: string | undefined): string {
+  return KEY_DATE.exec(key)?.[1] ?? (lastModified ?? "").slice(0, 10);
+}
+
+async function listBucket(baseUrl: string): Promise<Array<Shot>> {
+  const client = new Bun.S3Client();
+  const shots: Array<Shot> = [];
+  let continuationToken: string | undefined;
+  do {
+    const page = await client.list({
+      maxKeys: 1000,
+      ...(continuationToken === undefined ? {} : { continuationToken }),
+    });
+    for (const object of page.contents ?? []) {
+      if (!/\.(png|jpe?g|webp|gif)$/i.test(object.key)) continue;
+      shots.push({
+        key: object.key,
+        url: `${baseUrl}/${object.key}`,
+        size: object.size ?? 0,
+        date: dateOf(object.key, object.lastModified),
+      });
+    }
+    continuationToken = page.isTruncated ? page.nextContinuationToken : undefined;
+  } while (continuationToken !== undefined);
+  return shots;
+}
+
+function demoShot(prefix: string, name: string, date: string, hue: number): Shot {
+  const svg = `<svg xmlns='http://www.w3.org/2000/svg' width='640' height='400'><defs><linearGradient id='g' x1='0' y1='0' x2='1' y2='1'><stop offset='0' stop-color='hsl(${hue} 90% 72%)'/><stop offset='1' stop-color='hsl(${hue + 30} 85% 55%)'/></linearGradient></defs><rect width='640' height='400' fill='url(%23g)'/><rect x='24' y='24' width='250' height='22' rx='11' fill='rgba(255,255,255,0.75)'/><rect x='24' y='58' width='160' height='22' rx='11' fill='rgba(255,255,255,0.55)'/><rect x='24' y='330' width='140' height='40' rx='10' fill='rgba(29,26,20,0.8)'/></svg>`;
+  const key = `${prefix}/${date}-${name}-0000cafe.png`;
+  return { key, url: `data:image/svg+xml,${svg}`, size: 42_000, date };
+}
+
+function demoShots(): Array<Shot> {
+  const screens = ["home", "dashboard", "checkout", "settings", "profile"];
+  const shots: Array<Shot> = [];
+  let hue = 10;
+  for (const [index, month] of ["2026-03", "2026-05", "2026-08"].entries()) {
+    for (const [day, screen] of screens.entries()) {
+      shots.push(demoShot(`pr-${100 + index * 40 + day}`, `${screen}-after`, `${month}-${String(day * 5 + 2).padStart(2, "0")}`, hue));
+      hue += 37;
+    }
+  }
+  return shots;
+}
+
+/**
+ * The bucket's shots — or a JSON manifest (`CLICHE_ALBUM_MANIFEST`, an array
+ * of `{key, url, size?, date?}`) when listing credentials are not available,
+ * or a generated demo album when nothing is configured at all.
+ */
+export async function listShots(): Promise<{ demo: boolean; shots: Array<Shot> }> {
+  const manifestPath = process.env.CLICHE_ALBUM_MANIFEST;
+  if (manifestPath !== undefined) {
+    const entries = (await Bun.file(manifestPath).json()) as Array<Partial<Shot>>;
+    const shots = entries.map((entry) => ({
+      key: entry.key ?? "",
+      url: entry.url ?? "",
+      size: entry.size ?? 0,
+      date: entry.date ?? dateOf(entry.key ?? "", undefined),
+    }));
+    return { demo: false, shots };
+  }
+  try {
+    const baseUrl = publicBaseUrl();
+    return { demo: false, shots: await listBucket(baseUrl) };
+  } catch (error) {
+    console.error(
+      `No bucket configured (${error instanceof Error ? error.message.split(":")[0] : error}) — serving the demo album. Run \`bunx @voila.dev/cliche setup\` to plug a real one.`,
+    );
+    return { demo: true, shots: demoShots() };
+  }
+}

package/apps/album/src/styles.css

@@ -0,0 +1,66 @@
+* { margin: 0; box-sizing: border-box; }
+body {
+  font-family: -apple-system, "SF Pro Display", "Segoe UI", Helvetica, Arial, sans-serif;
+  background: #faf5ec; color: #1d1a14; padding-bottom: 80px;
+}
+header {
+  max-width: 1100px; margin: 0 auto; padding: 40px 24px 8px;
+  display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap;
+}
+.brand { display: flex; align-items: center; gap: 16px; }
+.camera { font-size: 48px; transform: rotate(-8deg); filter: drop-shadow(4px 6px 0 rgba(29,26,20,0.12)); }
+h1 { font-size: 52px; letter-spacing: -2px; font-weight: 800; }
+h1 .accent { color: #ff6600; }
+.tagline { color: #4a4438; font-size: 17px; }
+.controls { display: flex; align-items: center; gap: 14px; }
+#filter {
+  font: inherit; font-size: 16px; padding: 10px 16px; width: 300px;
+  border: 3px solid #1d1a14; border-radius: 12px; background: #fff;
+  box-shadow: 4px 4px 0 rgba(29,26,20,0.9); outline: none;
+}
+.count { font-weight: 700; color: #4a4438; white-space: nowrap; }
+.demo-banner {
+  max-width: 1100px; margin: 20px auto 0; padding: 12px 20px;
+  background: #ff6600; color: #fff; font-weight: 700; border-radius: 12px;
+  box-shadow: 4px 4px 0 rgba(29,26,20,0.9);
+}
+.demo-banner code { background: rgba(29,26,20,0.35); padding: 2px 8px; border-radius: 6px; font-weight: 400; }
+main { max-width: 1100px; margin: 0 auto; padding: 12px 24px; }
+h2.month {
+  font-size: 28px; letter-spacing: -1px; margin: 44px 0 4px;
+  display: flex; align-items: baseline; gap: 12px;
+}
+h2.month .n { font-size: 15px; color: #8d8471; font-weight: 700; }
+.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 26px; margin-top: 18px; }
+.polaroid {
+  background: #fff; border: 2px solid #1d1a14; border-radius: 8px;
+  padding: 8px 8px 6px; cursor: zoom-in;
+  box-shadow: 5px 5px 0 rgba(29,26,20,0.25);
+  transition: transform 0.15s ease;
+}
+.polaroid:nth-child(3n+1) { transform: rotate(-1.6deg); }
+.polaroid:nth-child(3n+2) { transform: rotate(1.2deg); }
+.polaroid:nth-child(4n+3) { transform: rotate(-0.7deg); }
+.polaroid:hover { transform: rotate(0deg) scale(1.04); box-shadow: 7px 7px 0 rgba(29,26,20,0.9); }
+.polaroid img { width: 100%; aspect-ratio: 8/5; object-fit: cover; object-position: top; border-radius: 4px; background: #eee7d8; display: block; }
+.polaroid .caption { font-size: 14px; font-weight: 700; padding: 8px 4px 2px; }
+.polaroid .meta { font-size: 12px; color: #8d8471; padding: 0 4px 2px; }
+.empty { text-align: center; color: #8d8471; font-size: 18px; padding: 80px 0; }
+dialog#lightbox {
+  /* The `* { margin: 0 }` reset kills the UA's `margin: auto` that centers
+     a <dialog>; restore it. */
+  margin: auto;
+  border: 3px solid #1d1a14; border-radius: 16px; padding: 12px;
+  max-width: min(1200px, 92vw); background: #fff;
+  box-shadow: 10px 10px 0 rgba(29,26,20,0.9);
+}
+dialog#lightbox::backdrop { background: rgba(29,26,20,0.55); }
+#lightbox-image { max-width: 100%; max-height: 76vh; border-radius: 8px; display: block; }
+.lightbox-bar { display: flex; align-items: center; gap: 12px; padding-top: 12px; }
+#lightbox-key { font-family: ui-monospace, Menlo, monospace; font-size: 13px; color: #4a4438; flex: 1; overflow-wrap: anywhere; }
+.lightbox-bar button {
+  font: inherit; font-weight: 700; font-size: 14px; cursor: pointer;
+  border: 2px solid #1d1a14; border-radius: 10px; padding: 8px 16px;
+  background: #ff6600; color: #fff; box-shadow: 3px 3px 0 rgba(29,26,20,0.9);
+}
+#lightbox-close { background: #fff; color: #1d1a14; }

package/dist/capture.d.ts

@@ -0,0 +1,28 @@
+export interface Viewport {
+    readonly width: number;
+    readonly height: number;
+}
+export interface CaptureOptions {
+    /** The page to screenshot. */
+    readonly url: string;
+    /** Where to write the PNG. */
+    readonly out: string;
+    /** Defaults to 1440×900. */
+    readonly viewport?: Viewport;
+    /**
+     * Entries seeded into the target origin's localStorage before the page
+     * loads — the way in for apps that keep their session token there.
+     */
+    readonly localStorage?: Readonly<Record<string, string>>;
+    /** CSS selector to wait for before shooting (15s timeout). */
+    readonly waitFor?: string;
+    /** CSS selector scrolled into view before shooting. */
+    readonly scrollTo?: string;
+    /** Milliseconds to let the page settle after load. Defaults to 1500. */
+    readonly settleMilliseconds?: number;
+    /** Grow the viewport to the full page height before shooting. */
+    readonly fullPage?: boolean;
+}
+/** Screenshot a page with Bun.WebView and write it to `options.out` as PNG. */
+export declare function capture(options: CaptureOptions): Promise<void>;
+//# sourceMappingURL=capture.d.ts.map

package/dist/capture.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"capture.d.ts","sourceRoot":"","sources":["../src/capture.ts"],"names":[],"mappings":"AAGA,MAAM,WAAW,QAAQ;IACvB,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,MAAM,EAAE,MAAM,CAAC;CACzB;AAED,MAAM,WAAW,cAAc;IAC7B,8BAA8B;IAC9B,QAAQ,CAAC,GAAG,EAAE,MAAM,CAAC;IACrB,8BAA8B;IAC9B,QAAQ,CAAC,GAAG,EAAE,MAAM,CAAC;IACrB,4BAA4B;IAC5B,QAAQ,CAAC,QAAQ,CAAC,EAAE,QAAQ,CAAC;IAC7B;;;OAGG;IACH,QAAQ,CAAC,YAAY,CAAC,EAAE,QAAQ,CAAC,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC,CAAC;IACzD,8DAA8D;IAC9D,QAAQ,CAAC,OAAO,CAAC,EAAE,MAAM,CAAC;IAC1B,uDAAuD;IACvD,QAAQ,CAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAC3B,wEAAwE;IACxE,QAAQ,CAAC,kBAAkB,CAAC,EAAE,MAAM,CAAC;IACrC,iEAAiE;IACjE,QAAQ,CAAC,QAAQ,CAAC,EAAE,OAAO,CAAC;CAC7B;AAoBD,+EAA+E;AAC/E,wBAAsB,OAAO,CAAC,OAAO,EAAE,cAAc,GAAG,OAAO,CAAC,IAAI,CAAC,CAmCpE"}