From e97a41cc2e1dfbc845408ec9e17d56f3827ee51a Mon Sep 17 00:00:00 2001
From: Ivo <ivoisalinas@gmail.com>
Date: Thu, 15 Oct 2026 11:21:28 +0200
Subject: [PATCH 1/6] feat(preview): add @unlayer/elements-preview, a local
 preview for Elements templates

`elements-preview dev` previews a folder of templates in the browser with live reload, rendering
them with the project's own Elements and React (Vite SSR with the project as root, so its
imports, aliases and React resolve as in the app). The UI shows desktop and phone widths, dark
mode as Gmail and Apple Mail apply it, the code, an Editor view that opens the design in the
Unlayer editor, and a checks drawer: render problems, email-client support with source lines
(caniemail), and links and images.

Commands: dev, export (HTML, plain text, design JSON), build and start (a static preview to
share), check (--json, exit codes for agents and CI), screenshot (desktop, phone, dark PNGs with
the system browser) and render (--json). Copy for AI turns a template and its problems into a
prompt. Binds to localhost and checks Host and Origin.

Co-Authored-By: Claude Code (Claude Opus 5.5 xhigh) <noreply@anthropic.com>
---
 CLAUDE.md                                     |    1 +
 README.md                                     |    3 +
 packages/preview/.gitignore                   |    1 +
 packages/preview/README.md                    |  317 ++++
 packages/preview/THIRD_PARTY_NOTICES.md       |   33 +
 packages/preview/package.json                 |   73 +
 packages/preview/shared/darkMode.ts           |  223 +++
 packages/preview/shared/findings.ts           |  198 ++
 packages/preview/src/bin.ts                   |   18 +
 packages/preview/src/cli.ts                   |  447 +++++
 packages/preview/src/index.ts                 |   25 +
 packages/preview/src/server/browser.ts        |  106 ++
 packages/preview/src/server/build.ts          |  152 ++
 packages/preview/src/server/check.ts          |  197 ++
 packages/preview/src/server/checks.ts         |   43 +
 packages/preview/src/server/compat.ts         |  279 +++
 packages/preview/src/server/dev-server.ts     |  200 ++
 packages/preview/src/server/discover.ts       |  119 ++
 packages/preview/src/server/errors.ts         |  124 ++
 packages/preview/src/server/export.ts         |  102 +
 packages/preview/src/server/http.ts           |  117 ++
 packages/preview/src/server/links.ts          |  268 +++
 packages/preview/src/server/loader.ts         |  307 +++
 packages/preview/src/server/paths.ts          |    7 +
 packages/preview/src/server/project.ts        |   88 +
 packages/preview/src/server/render.ts         |  116 ++
 packages/preview/src/server/screenshot.ts     |  278 +++
 packages/preview/test/build.test.ts           |   99 +
 packages/preview/test/check.test.ts           |  105 ++
 packages/preview/test/dev-server.test.ts      |  211 +++
 packages/preview/test/export.test.ts          |   57 +
 .../basic/emails/_components/footer.tsx       |    5 +
 .../fixtures/basic/emails/billing/receipt.jsx |   16 +
 .../test/fixtures/basic/emails/helpers.ts     |    1 +
 .../test/fixtures/basic/emails/landing.tsx    |   13 +
 .../test/fixtures/basic/emails/lib/format.ts  |    1 +
 .../test/fixtures/basic/emails/plain.js       |    9 +
 .../fixtures/basic/emails/static/logo.png     |    2 +
 .../test/fixtures/basic/emails/welcome.tsx    |   25 +
 .../preview/test/fixtures/basic/package.json  |    1 +
 .../preview/test/fixtures/basic/tsconfig.json |    1 +
 packages/preview/test/helpers.ts              |   17 +
 packages/preview/test/links.test.ts           |  113 ++
 packages/preview/test/render.test.ts          |  144 ++
 packages/preview/test/screenshot.test.ts      |  109 ++
 packages/preview/test/unit.test.ts            |  411 ++++
 packages/preview/tsconfig.json                |   10 +
 packages/preview/tsup.config.ts               |   17 +
 packages/preview/ui/App.tsx                   |  239 +++
 packages/preview/ui/api.ts                    |  135 ++
 packages/preview/ui/components/CodeView.tsx   |   91 +
 packages/preview/ui/components/EditorView.tsx |   63 +
 packages/preview/ui/components/ErrorView.tsx  |   21 +
 .../preview/ui/components/NoTemplates.tsx     |   40 +
 .../preview/ui/components/PreviewFrame.tsx    |  100 +
 .../preview/ui/components/PropsEditor.tsx     |   90 +
 packages/preview/ui/components/Sidebar.tsx    |  135 ++
 packages/preview/ui/components/Tip.tsx        |   24 +
 packages/preview/ui/components/aiPrompt.ts    |   63 +
 .../ui/components/checks/ChecksDrawer.tsx     |   42 +
 .../ui/components/checks/ClientChecks.tsx     |  124 ++
 .../ui/components/checks/LinkChecks.tsx       |   91 +
 .../ui/components/checks/RenderingChecks.tsx  |   33 +
 .../preview/ui/components/checks/Section.tsx  |   42 +
 .../preview/ui/components/checks/summary.ts   |   56 +
 packages/preview/ui/components/files.ts       |   34 +
 packages/preview/ui/components/highlight.ts   |   29 +
 packages/preview/ui/components/icons.tsx      |  151 ++
 .../ui/components/topbar/ChecksButton.tsx     |   18 +
 .../ui/components/topbar/DarkToggle.tsx       |   67 +
 .../ui/components/topbar/DeviceToggle.tsx     |   25 +
 .../ui/components/topbar/ExportMenu.tsx       |   93 +
 .../ui/components/topbar/TemplateTitle.tsx    |   58 +
 .../preview/ui/components/topbar/TopBar.tsx   |   50 +
 .../ui/components/topbar/ViewSwitch.tsx       |   27 +
 packages/preview/ui/editor/prepareDesign.ts   |   44 +
 packages/preview/ui/editor/staticUrls.ts      |   58 +
 packages/preview/ui/editor/unlayerEmbed.ts    |   54 +
 .../preview/ui/editor/useUnlayerEditor.ts     |  114 ++
 packages/preview/ui/hooks/useCheck.ts         |   71 +
 packages/preview/ui/hooks/useDismiss.ts       |   26 +
 packages/preview/ui/hooks/useLiveChanges.ts   |   38 +
 .../preview/ui/hooks/useSelectedTemplate.ts   |   35 +
 packages/preview/ui/hooks/useShortcuts.ts     |   26 +
 packages/preview/ui/hooks/useStoredState.ts   |   32 +
 packages/preview/ui/index.html                |   13 +
 packages/preview/ui/main.tsx                  |   10 +
 packages/preview/ui/styles.css                | 1646 +++++++++++++++++
 packages/preview/vite.ui.config.ts            |   16 +
 packages/preview/vitest.config.ts             |   10 +
 pnpm-lock.yaml                                | 1179 +++++++++++-
 91 files changed, 10434 insertions(+), 88 deletions(-)
 create mode 100644 packages/preview/.gitignore
 create mode 100644 packages/preview/README.md
 create mode 100644 packages/preview/THIRD_PARTY_NOTICES.md
 create mode 100644 packages/preview/package.json
 create mode 100644 packages/preview/shared/darkMode.ts
 create mode 100644 packages/preview/shared/findings.ts
 create mode 100644 packages/preview/src/bin.ts
 create mode 100644 packages/preview/src/cli.ts
 create mode 100644 packages/preview/src/index.ts
 create mode 100644 packages/preview/src/server/browser.ts
 create mode 100644 packages/preview/src/server/build.ts
 create mode 100644 packages/preview/src/server/check.ts
 create mode 100644 packages/preview/src/server/checks.ts
 create mode 100644 packages/preview/src/server/compat.ts
 create mode 100644 packages/preview/src/server/dev-server.ts
 create mode 100644 packages/preview/src/server/discover.ts
 create mode 100644 packages/preview/src/server/errors.ts
 create mode 100644 packages/preview/src/server/export.ts
 create mode 100644 packages/preview/src/server/http.ts
 create mode 100644 packages/preview/src/server/links.ts
 create mode 100644 packages/preview/src/server/loader.ts
 create mode 100644 packages/preview/src/server/paths.ts
 create mode 100644 packages/preview/src/server/project.ts
 create mode 100644 packages/preview/src/server/render.ts
 create mode 100644 packages/preview/src/server/screenshot.ts
 create mode 100644 packages/preview/test/build.test.ts
 create mode 100644 packages/preview/test/check.test.ts
 create mode 100644 packages/preview/test/dev-server.test.ts
 create mode 100644 packages/preview/test/export.test.ts
 create mode 100644 packages/preview/test/fixtures/basic/emails/_components/footer.tsx
 create mode 100644 packages/preview/test/fixtures/basic/emails/billing/receipt.jsx
 create mode 100644 packages/preview/test/fixtures/basic/emails/helpers.ts
 create mode 100644 packages/preview/test/fixtures/basic/emails/landing.tsx
 create mode 100644 packages/preview/test/fixtures/basic/emails/lib/format.ts
 create mode 100644 packages/preview/test/fixtures/basic/emails/plain.js
 create mode 100644 packages/preview/test/fixtures/basic/emails/static/logo.png
 create mode 100644 packages/preview/test/fixtures/basic/emails/welcome.tsx
 create mode 100644 packages/preview/test/fixtures/basic/package.json
 create mode 100644 packages/preview/test/fixtures/basic/tsconfig.json
 create mode 100644 packages/preview/test/helpers.ts
 create mode 100644 packages/preview/test/links.test.ts
 create mode 100644 packages/preview/test/render.test.ts
 create mode 100644 packages/preview/test/screenshot.test.ts
 create mode 100644 packages/preview/test/unit.test.ts
 create mode 100644 packages/preview/tsconfig.json
 create mode 100644 packages/preview/tsup.config.ts
 create mode 100644 packages/preview/ui/App.tsx
 create mode 100644 packages/preview/ui/api.ts
 create mode 100644 packages/preview/ui/components/CodeView.tsx
 create mode 100644 packages/preview/ui/components/EditorView.tsx
 create mode 100644 packages/preview/ui/components/ErrorView.tsx
 create mode 100644 packages/preview/ui/components/NoTemplates.tsx
 create mode 100644 packages/preview/ui/components/PreviewFrame.tsx
 create mode 100644 packages/preview/ui/components/PropsEditor.tsx
 create mode 100644 packages/preview/ui/components/Sidebar.tsx
 create mode 100644 packages/preview/ui/components/Tip.tsx
 create mode 100644 packages/preview/ui/components/aiPrompt.ts
 create mode 100644 packages/preview/ui/components/checks/ChecksDrawer.tsx
 create mode 100644 packages/preview/ui/components/checks/ClientChecks.tsx
 create mode 100644 packages/preview/ui/components/checks/LinkChecks.tsx
 create mode 100644 packages/preview/ui/components/checks/RenderingChecks.tsx
 create mode 100644 packages/preview/ui/components/checks/Section.tsx
 create mode 100644 packages/preview/ui/components/checks/summary.ts
 create mode 100644 packages/preview/ui/components/files.ts
 create mode 100644 packages/preview/ui/components/highlight.ts
 create mode 100644 packages/preview/ui/components/icons.tsx
 create mode 100644 packages/preview/ui/components/topbar/ChecksButton.tsx
 create mode 100644 packages/preview/ui/components/topbar/DarkToggle.tsx
 create mode 100644 packages/preview/ui/components/topbar/DeviceToggle.tsx
 create mode 100644 packages/preview/ui/components/topbar/ExportMenu.tsx
 create mode 100644 packages/preview/ui/components/topbar/TemplateTitle.tsx
 create mode 100644 packages/preview/ui/components/topbar/TopBar.tsx
 create mode 100644 packages/preview/ui/components/topbar/ViewSwitch.tsx
 create mode 100644 packages/preview/ui/editor/prepareDesign.ts
 create mode 100644 packages/preview/ui/editor/staticUrls.ts
 create mode 100644 packages/preview/ui/editor/unlayerEmbed.ts
 create mode 100644 packages/preview/ui/editor/useUnlayerEditor.ts
 create mode 100644 packages/preview/ui/hooks/useCheck.ts
 create mode 100644 packages/preview/ui/hooks/useDismiss.ts
 create mode 100644 packages/preview/ui/hooks/useLiveChanges.ts
 create mode 100644 packages/preview/ui/hooks/useSelectedTemplate.ts
 create mode 100644 packages/preview/ui/hooks/useShortcuts.ts
 create mode 100644 packages/preview/ui/hooks/useStoredState.ts
 create mode 100644 packages/preview/ui/index.html
 create mode 100644 packages/preview/ui/main.tsx
 create mode 100644 packages/preview/ui/styles.css
 create mode 100644 packages/preview/vite.ui.config.ts
 create mode 100644 packages/preview/vitest.config.ts

diff --git a/CLAUDE.md b/CLAUDE.md
index 5d6d7ade..bae904e2 100644
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -31,6 +31,7 @@ cd packages/react && pnpm storybook         # Storybook dev server
 | `@unlayer/from-react-email` | `packages/from-react-email` | No (private, bundled into migrate; API at `@unlayer/migrate/react-email`) | React Email → Elements converter (codemod, runtime with merge tags, check against the original); fidelity benchmark in `bench/`, results in `FIDELITY.md` |
 | `@unlayer/migrate` | `packages/migrate` | Yes (npm) | React Email converter API at `@unlayer/migrate/react-email`; `npx @unlayer/migrate` CLI: migrate React Email templates, check them, write a report; `compare` for templates migrated by hand |
 | `@unlayer/convert-core` | `packages/convert-core` | No (private, bundled into the converters) | Elements tree, conversion report, TSX printer and content check that converters share |
+| `@unlayer/elements-preview` | `packages/preview` | Yes (npm) | `elements-preview dev` / `export` / `build` / `start` / `check` / `screenshot` (the Unlayer CLI's `unlayer elements …`): a Vite SSR loader renders the project's templates with the project's own Elements and React; preview app in `ui/` (built to `dist/ui`, also served as a static build); caniemail compatibility check that separates the template's CSS from Elements' own; link and image checks; emulated dark mode. `shared/` holds what the app and the server both use: the findings' levels (`check` and the Checks drawer) and the dark mode (`screenshot --dark` loads `dist/dark-mode.js` into the page). `screenshot` drives an installed Chrome/Chromium/Edge/Brave with `puppeteer-core` |
 
 ### Component Hierarchy (strict)
 
diff --git a/README.md b/README.md
index 03adc8df..9811291d 100644
--- a/README.md
+++ b/README.md
@@ -89,6 +89,8 @@ const html = renderToHtml(<WelcomeEmail />);
 
 **Try it in your browser:** the [Elements Playground](https://examples.unlayer.com/examples/elements-playground/) renders Elements code as an email, page, or document with nothing to install. Write plain JSX, export the HTML or design JSON, and open the result in the Unlayer builder.
 
+**Preview your templates while you edit them:** [`@unlayer/elements-preview`](./packages/preview) lists the templates in your `emails` folder, renders them with your project's Elements as you save, and checks them against email clients. `npm install -D @unlayer/elements-preview && npx elements-preview dev`, or `unlayer elements dev` with the [Unlayer CLI](https://github.com/unlayer/cli).
+
 ## Email Client Compatibility Notes
 
 ### Targeted Clients
@@ -267,6 +269,7 @@ For the full API reference, component props, design patterns, and common mistake
 |---------|-------------|-----------|
 | [`@unlayer/react-elements`](./packages/react) | React components and renderers | [![npm](https://img.shields.io/npm/v/@unlayer/react-elements.svg)](https://www.npmjs.com/package/@unlayer/react-elements) |
 | [`@unlayer/migrate`](./packages/migrate) | Migrate React Email templates to Elements, checked against the originals | Not yet |
+| [`@unlayer/elements-preview`](./packages/preview) | Preview templates in the browser as you edit them, check email client support, export to HTML | Not yet |
 | [`@unlayer/from-react-email`](./packages/from-react-email) | The React Email → Elements converter, as a library | Private (bundled into `@unlayer/migrate`, API at `@unlayer/migrate/react-email`) |
 | [`@unlayer/convert-core`](./packages/convert-core) | Shared model for converters (Elements tree, report, TSX printer, layout check) | Internal |
 | [`@unlayer-internal/shared-elements`](./packages/shared) | Framework-agnostic shared logic | Internal |
diff --git a/packages/preview/.gitignore b/packages/preview/.gitignore
new file mode 100644
index 00000000..acf3bb67
--- /dev/null
+++ b/packages/preview/.gitignore
@@ -0,0 +1 @@
+test/.tmp/
diff --git a/packages/preview/README.md b/packages/preview/README.md
new file mode 100644
index 00000000..0a4e7bca
--- /dev/null
+++ b/packages/preview/README.md
@@ -0,0 +1,317 @@
+# @unlayer/elements-preview
+
+Preview your [Unlayer Elements](https://github.com/unlayer/elements) templates in the browser while you edit them, check them against email clients (in the browser, or from a terminal, CI or a coding agent), take screenshots, and export them to HTML.
+
+```bash
+npm install -D @unlayer/elements-preview
+npx elements-preview dev
+```
+
+Open http://localhost:3000. Every template in `./emails` is listed, rendered with your project's own Elements and React, and updated as you save.
+
+With the [Unlayer CLI](https://github.com/unlayer/cli), the same commands are `unlayer elements dev`, `check`, `screenshot`, `export`, `build` and `start`, and `unlayer elements init` sets a project up with starter templates and an `AGENTS.md` section for coding agents. `unlayer elements push` uses `render` to create and update the templates in an Unlayer project.
+
+## Templates
+
+A template is a `.tsx`, `.jsx` or `.js` file with an `export default` component (or element). These are the same rules as React Email's preview, so an `emails` folder moved from it works as it is:
+
+- Folders starting with `_` aren't listed: put shared components in `_components/`.
+- Files in `static/` are served at `/static/`: `<Image src="/static/logo.png" />`. Host them elsewhere for the emails you send.
+- `PreviewProps` on the component are the props it previews and exports with:
+
+```tsx
+import { Email, Row, Column, Heading, Button } from "@unlayer/react-elements";
+
+export default function Welcome({ name }: { name: string }) {
+  return (
+    <Email>
+      <Row>
+        <Column>
+          <Heading>Welcome, {name}</Heading>
+          <Button href="https://example.com">Get started</Button>
+        </Column>
+      </Row>
+    </Email>
+  );
+}
+
+Welcome.PreviewProps = { name: "Ada" };
+```
+
+TypeScript, JSX, your `tsconfig.json` path aliases (`@/components/...`) and imports of your other files all work as in your project.
+
+## The preview
+
+The top bar has the template's name (its render time and whether it's live are in the tooltip), the views in the middle, and on the right the preview's width and dark mode, **Checks** and **Export**.
+
+- **Preview**: the template as an email, page or document, at desktop or phone width. Drag the frame's edges for any width (it shows the width as you drag); double-click an edge to go back.
+- **Dark mode** (the sun and moon): what email clients do to an email's colors for readers in dark mode. By default every color flips, as in the Gmail apps and Outlook.com; the arrow next to it switches to light colors only, as in Apple Mail and Outlook on phones. It catches unreadable text and logos that vanish.
+- **Editor**: the template's design JSON in the [Unlayer editor](https://unlayer.com), to check how it opens there. Each render loads it again; changes made in the editor aren't saved to your file. The editor comes from `editor.unlayer.com`, so this view needs an internet connection (the others don't). Images from `static/` are copied into the design it gets, since the editor's page can't load them from localhost. It opens without an Unlayer project; pass `--project-id` (or set `UNLAYER_PROJECT_ID`) to open it in yours, with your project's settings.
+- **Code**: the template's source, the HTML, the plain text and the design JSON, highlighted, to copy or download.
+- **Checks**: the button says "All clear", or how many things there are to fix (something broken) or to check, in the color of the worst. It opens a drawer with three sections:
+  - **Rendering**: what Elements and React report while rendering (a column too many, a block left out), and a design JSON (the template then won't open in the Unlayer editor) or plain text that can't be made. A template that doesn't compile or throws shows its error, with the file, line and code, in place of the preview; the preview keeps running and recovers when you fix the file.
+  - **Email clients**: the HTML and CSS the email uses that Gmail, Outlook, Apple Mail, Yahoo Mail, Samsung Email or Thunderbird don't support, from [caniemail.com](https://www.caniemail.com), with the block it's on and the template lines it likely comes from. Elements' own email HTML uses some CSS on purpose, with fallbacks for the clients that ignore it; those are listed apart, as handled by Elements.
+  - **Links & images**: links that go nowhere, relative or `http:` URLs, links to localhost, images without alt text, SVG and `data:` images most clients block, `/static/` images to host before sending, and HTML over Gmail's 102 KB clipping limit. Each URL is requested, so broken links (404), hosts that don't exist, non-images and large images show too.
+- **Props** (the drawer's other tab): render with other props than `PreviewProps`, without changing the file.
+- **Export**: download the HTML, plain text or design JSON (it opens in the Unlayer builder with `loadDesign()`), copy the HTML, or **Copy for AI**: the template, its problems, compatibility and link findings as one prompt to paste into an AI assistant.
+
+`elements-preview check` runs the same checks from a terminal, and `elements-preview screenshot --dark` takes the same dark mode.
+
+Keyboard shortcuts (also in the tooltips): <kbd>/</kbd> filters the templates, <kbd>1</kbd> <kbd>2</kbd> <kbd>3</kbd> switch to Preview, Editor and Code, <kbd>D</kbd> switches between desktop and phone width, <kbd>T</kbd> turns dark mode on and off, and <kbd>.</kbd> opens and closes the checks.
+
+The preview follows your system's light or dark appearance.
+
+## Commands
+
+### `elements-preview dev`
+
+| Option | Default | |
+| --- | --- | --- |
+| `--dir <path>` | `emails` | The templates folder |
+| `--port <number>` | `3000` | The port. When it's taken, the next free one is used, unless you set it. |
+| `--open` | | Open the preview in your browser |
+| `--project-id <id>` | `UNLAYER_PROJECT_ID`, or none | The Unlayer project the Editor view opens designs in |
+
+The server listens on localhost only and answers only requests addressed to localhost.
+
+### `elements-preview export`
+
+Renders every template with its `PreviewProps` to `out/<path>.html` (`emails/billing/receipt.tsx` → `out/billing/receipt.html`), and copies `static/`. Existing files with the same names are replaced; nothing else in the folder is deleted.
+
+| Option | Default | |
+| --- | --- | --- |
+| `--dir <path>` | `emails` | The templates folder |
+| `--outDir <path>` | `out` | Where to write the files |
+| `--pretty` | | Format the HTML for reading |
+| `--plainText` | | Write plain text instead of HTML |
+| `--design` | | Also write each template's design JSON (`<name>.design.json`) for the Unlayer builder |
+| `--extension <ext>` | `html` | The file extension, e.g. `blade.php` (`txt` with `--plainText`) |
+
+It exits with 1 when a template fails, after exporting the others. Export is for backends that can't run JavaScript, or platforms that only take HTML; when your code can call Elements, render at send time with the real data instead (`renderToHtml`).
+
+### `elements-preview check`
+
+Renders templates with their `PreviewProps` and checks them as the preview's **Checks** do, without a browser: for a terminal, a CI job or a coding agent that just edited a template.
+
+```bash
+npx elements-preview check                          # every template
+npx elements-preview check welcome.tsx --json       # one, as JSON
+```
+
+For each template it reports render errors (with the file and line), what Elements and React warn about, a design JSON that can't be made (the template won't open in the Unlayer editor) or plain text that can't, the CSS and HTML the template brings in that email clients don't support (with the template lines it likely comes from), links and images, and HTML over Gmail's clipping size. The levels are the preview's: **to fix** is something broken (a render error, a block Elements left out, no design JSON, a link that goes nowhere or answers 404, a `javascript:` or relative URL); **to check** is worth a look (warnings, compatibility, placeholder or `http:` URLs, Gmail clipping); notes are for information.
+
+```
+✗ showcase/needs-fixes.tsx (email, 10 KB): 3 to fix, 5 to check, 1 note
+    fix    Paragraph 1 · “terms” → # · This link goes nowhere: give it a URL.
+    fix    Button 1 · “Click me” → javascript:alert(1) · Email clients don't run javascript: links.
+    check  Html 1 · line 13 · `display:flex` isn't supported in Outlook (2 clients) and only partly in Gmail (1 client): remove it or add a fallback.
+✓ receipt.tsx (email, 16 KB): 1 note
+
+Checked 2 templates: 3 to fix, 5 to check. (2 notes: --json lists them)
+```
+
+Name templates by their path in the templates folder (`welcome.tsx`) or from the working directory (`emails/welcome.tsx`), with or without the extension, or name a folder of them (`billing`). With none, it checks every template.
+
+| Option | Default | |
+| --- | --- | --- |
+| `--dir <path>` | `emails` | The templates folder |
+| `--json` | | Print the report as JSON (below) |
+| `--strict` | | Fail on what's to check too, not only on what's to fix |
+| `--offline` | | Don't request the links' and images' URLs; check the HTML only |
+
+| Exit code | |
+| --- | --- |
+| `0` | Nothing to fix (with `--strict`, nothing to check either) |
+| `1` | Something to fix (with `--strict`, or to check) |
+| `2` | The check couldn't run: an option, folder or template that isn't right, or Elements not installed. With `--json`, stderr has `{"error": "…"}` |
+
+#### The JSON report
+
+```json
+{
+  "ok": false,
+  "strict": false,
+  "network": true,
+  "templates": [
+    {
+      "path": "showcase/needs-fixes.tsx",
+      "file": "emails/showcase/needs-fixes.tsx",
+      "ok": false,
+      "mode": "email",
+      "bytes": 10342,
+      "toFix": [
+        {
+          "kind": "link",
+          "level": "error",
+          "message": "Email clients don't run javascript: links.",
+          "block": "Button 1",
+          "url": "javascript:alert(1)",
+          "label": "Click me"
+        }
+      ],
+      "toCheck": [
+        {
+          "kind": "client",
+          "level": "warning",
+          "message": "`display:flex` isn't supported in Outlook (2 clients) and only partly in Gmail (1 client): remove it or add a fallback.",
+          "block": "Html 1",
+          "line": 13,
+          "lines": [13],
+          "url": "https://www.caniemail.com/features/css-display-flex/",
+          "feature": "display:flex",
+          "support": "none",
+          "clients": [{ "client": "outlook.windows", "label": "Outlook (Windows)", "support": "none" }]
+        }
+      ],
+      "notes": []
+    }
+  ],
+  "summary": { "templates": 1, "toFix": 3, "toCheck": 5, "notes": 1 }
+}
+```
+
+- `ok`: what the exit code says (`true` is 0). Each template's `ok` is the same for it.
+- `templates`: worst first. `path` is in the templates folder, `file` from the working directory. `mode` is `email`, `web` (a `Page`) or `document`, and `bytes` the size of the HTML; both are `null` when the template doesn't render.
+- `toFix`, `toCheck` and `notes` hold findings of `level` `error`, `warning` and `info`. Each has a `kind` and a `message`, and when they apply:
+
+| Field | |
+| --- | --- |
+| `kind` | `render` (doesn't compile or throws, or Elements left a block out), `warning` (from Elements or React), `log` (other console output), `design` (no design JSON), `text` (no plain text), `client` (email client compatibility), `link`, `image`, `size` (Gmail clipping) |
+| `block` | The Elements block: `Button 1`, `Html 2` (a `client` finding lists every block, comma-separated) |
+| `file`, `line`, `column`, `frame` | A `render` error's file (from the working directory), position and surrounding code |
+| `line`, `lines` | A `client` finding's first template line, and every line that likely brings it in |
+| `url`, `label`, `status` | A link or image: its URL, its text or alt text, and the HTTP status it answered with. For a `client` finding, `url` is its caniemail.com page |
+| `feature`, `support`, `clients` | A `client` finding: caniemail's name for it, `none` or `partial`, and each client with its support |
+
+New fields may be added; existing ones keep their meaning.
+
+### `elements-preview screenshot`
+
+Saves full-length PNGs of templates rendered with their `PreviewProps`, to look at the layout without opening the preview: `screenshots/<template path>.<variant>.png`, and prints each file.
+
+```bash
+npx elements-preview screenshot welcome.tsx --all
+# screenshots/welcome.desktop.png
+# screenshots/welcome.phone.png
+# screenshots/welcome.dark.png
+```
+
+| Option | Default | |
+| --- | --- | --- |
+| `--dir <path>` | `emails` | The templates folder |
+| `--out <path>` | `screenshots` | Where to write the PNGs |
+| `--phone` | | Also at phone width (375 px) |
+| `--dark` | | Also in dark mode: the preview's simulation, with every color flipped as in the Gmail apps and Outlook.com |
+| `--all` | | Desktop, phone and dark |
+| `--width <px>` | `680` | The desktop (and dark) width. A `Document` is taken at its page's width (A4: 794 px) unless you set one |
+| `--browser <path>` | `CHROME_PATH`, or the one found | The browser to use |
+| `--json` | | Print `{ ok, browser, outDir, templates: [{ path, ok, mode, screenshots: [{ variant, width, height, file }], warnings, error? }] }` |
+
+Templates are named as for `check` (`.` takes them all). Each page loads the templates folder's `static/` files as the preview does, and waits for its images and web fonts; an image that doesn't load is reported. Templates are taken one at a time, in one browser tab.
+
+It uses a browser already installed, never downloads one: Chrome, Chromium, Microsoft Edge or Brave, in their usual places on macOS, Windows and Linux. Point to another with `--browser` or `CHROME_PATH`. It exits with `1` when a template fails to render, and `2` when it can't run (no browser, or an option, folder or template that isn't right).
+
+### `elements-preview render`
+
+Renders templates with their `PreviewProps` and prints what a program needs to use them elsewhere: the mode, the HTML and the design JSON the Unlayer editor opens. `unlayer elements push` runs it to send templates to an Unlayer project.
+
+```bash
+npx elements-preview render welcome.tsx --json      # one JSON object
+npx elements-preview render . --json --check        # every template, a line each, with check's findings
+npx elements-preview render welcome.tsx > out.html  # without --json: one template's HTML
+```
+
+With `--json`, it prints one JSON object per template, a line each (one template: one object):
+
+```json
+{ "path": "welcome.tsx", "file": "emails/welcome.tsx", "ok": true, "mode": "email", "html": "<!DOCTYPE html …", "design": { "body": { "rows": […] } }, "warnings": [] }
+```
+
+- `path` is the template's path in the templates folder, `file` its path from the working directory, and `mode` is `email`, `web` (a `Page`) or `document`.
+- `design` is the design JSON; it's `null` when it can't be made, with the reason in `designError`.
+- A template that doesn't render has `ok: false`, `mode`, `html` and `design` `null`, and an `error` with its `message`, `file`, `line`, `column` and `frame`.
+- `warnings` are what Elements and React warned about while rendering.
+- With `--check`, `check` holds the template's findings as `check --json` reports them (`toFix`, `toCheck`, `notes`) and `ok` (nothing to fix); the template's `ok` is then `false` when there's something to fix.
+
+Templates are named as for `check` (`.` takes them all); name at least one.
+
+| Option | Default | |
+| --- | --- | --- |
+| `--dir <path>` | `emails` | The templates folder |
+| `--json` | | Print each template as a line of JSON (without it: one template's HTML) |
+| `--check` | | Also run `check`'s checks on each template |
+| `--offline` | | With `--check`, don't request the links' and images' URLs |
+
+| Exit code | |
+| --- | --- |
+| `0` | Every template rendered (with `--check`, with nothing to fix) |
+| `1` | One didn't, or has something to fix (`--check`) |
+| `2` | It couldn't run: an option, folder or template that isn't right, or Elements not installed. With `--json`, stderr has `{"error": "…"}` |
+
+New fields may be added; existing ones keep their meaning.
+
+### `elements-preview build` and `start`
+
+`build` writes the preview as static files to share, for example with teammates who review emails without running the project: every template rendered with its `PreviewProps`, with its compatibility and link checks (link checks from the HTML only: a build doesn't request URLs). Host the folder on any static host, under any path, or serve it on localhost with `start`.
+
+| Option | Default | |
+| --- | --- | --- |
+| `--dir <path>` | `emails` | The templates folder (`build`) |
+| `--outDir <path>` | `.elements-preview` | Where to write the build (`build`), or the build to serve (`start`) |
+| `--project-id <id>` | `UNLAYER_PROJECT_ID`, or none | The Unlayer project the Editor view opens designs in (`build`) |
+| `--port <number>` | `3000` | The port (`start`) |
+| `--open` | | Open it in your browser (`start`) |
+
+A build can't render with other props or update as you edit: that's what `dev` is for. Its Editor view works as in `dev`.
+
+#### Deploy a build
+
+A build is plain static files with relative paths, so it works on any static host, under any path. Every host needs the same two settings: the build command `npx elements-preview build` and the output folder `.elements-preview`.
+
+- **Vercel**: in the project settings, set the build command and the output directory, or add a `vercel.json`:
+
+  ```json
+  { "buildCommand": "npx elements-preview build", "outputDirectory": ".elements-preview" }
+  ```
+
+- **Netlify**: add a `netlify.toml`:
+
+  ```toml
+  [build]
+    command = "npx elements-preview build"
+    publish = ".elements-preview"
+  ```
+
+- **Cloudflare Pages**: set the build command to `npx elements-preview build` and the build output directory to `.elements-preview`.
+- **GitHub Pages**: build in a workflow and publish the folder with the official Pages actions, in a job with `pages: write` and `id-token: write` permissions (see GitHub's [custom workflows for Pages](https://docs.github.com/en/pages/getting-started-with-github-pages/using-custom-workflows-with-github-pages)):
+
+  ```yaml
+  - run: npm ci && npx elements-preview build
+  - uses: actions/upload-pages-artifact@v3
+    with:
+      path: .elements-preview
+  - uses: actions/deploy-pages@v4
+  ```
+
+A build contains each template's source code and its `PreviewProps`, so whoever can open it can read them. Keep real customer data and secrets out of `PreviewProps`, and put the deployment behind your host's access protection when the templates are private.
+
+### Vite plugins
+
+`dev`, `check`, `screenshot`, `render`, `export` and `build` load templates with [Vite](https://vite.dev). For a file type your templates import that Vite doesn't load by itself (SVG as components, MDX, YAML), pass plugins with `--vite-plugins <path>`: a module whose default export is an array of Vite plugins, or a function that returns one.
+
+```js
+// preview-plugins.js
+import svgr from "vite-plugin-svgr";
+
+export default [svgr()];
+```
+
+```bash
+npx elements-preview dev --vite-plugins ./preview-plugins.js
+```
+
+## Requirements
+
+- Node.js 20.19 or later, or 22.12 or later
+- `@unlayer/react-elements` 0.2.0 or later, and React 18 or 19, installed in your project
+- For `screenshot`: Chrome, Chromium, Microsoft Edge or Brave
diff --git a/packages/preview/THIRD_PARTY_NOTICES.md b/packages/preview/THIRD_PARTY_NOTICES.md
new file mode 100644
index 00000000..5f51b0d6
--- /dev/null
+++ b/packages/preview/THIRD_PARTY_NOTICES.md
@@ -0,0 +1,33 @@
+# Third-party software
+
+The preview app (`dist/ui`) bundles the packages below.
+
+## React, React DOM and Scheduler
+
+MIT License
+
+Copyright (c) Facebook, Inc. and its affiliates.
+
+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.
+
+## Compatibility data
+
+The compatibility check uses data from [caniemail.com](https://www.caniemail.com)
+through the [`caniemail`](https://github.com/shellscape/caniemail) package (a
+dependency, not bundled).
diff --git a/packages/preview/package.json b/packages/preview/package.json
new file mode 100644
index 00000000..d132f3be
--- /dev/null
+++ b/packages/preview/package.json
@@ -0,0 +1,73 @@
+{
+  "name": "@unlayer/elements-preview",
+  "version": "0.1.0",
+  "description": "Preview Unlayer Elements templates in your browser as you edit them, check them against email clients, and export them to HTML.",
+  "license": "MIT",
+  "type": "module",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/unlayer/elements.git",
+    "directory": "packages/preview"
+  },
+  "homepage": "https://github.com/unlayer/elements/tree/main/packages/preview",
+  "keywords": [
+    "email",
+    "preview",
+    "dev-server",
+    "react-email",
+    "unlayer",
+    "elements"
+  ],
+  "bin": {
+    "elements-preview": "./dist/bin.js"
+  },
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist",
+    "THIRD_PARTY_NOTICES.md"
+  ],
+  "engines": {
+    "node": "^20.19.0 || >=22.12.0"
+  },
+  "scripts": {
+    "build": "tsup && vite build --config vite.ui.config.ts",
+    "dev:ui": "vite --config vite.ui.config.ts",
+    "test": "vitest",
+    "typecheck": "tsc --noEmit"
+  },
+  "dependencies": {
+    "caniemail": "2.0.2",
+    "htmlparser2": "10.1.0",
+    "prettier": "3.6.2",
+    "puppeteer-core": "24.43.1",
+    "vite": "8.3.4"
+  },
+  "peerDependencies": {
+    "@unlayer/react-elements": ">=0.2.0",
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0"
+  },
+  "devDependencies": {
+    "@types/node": "24.9.1",
+    "@types/prismjs": "1.26.6",
+    "@types/react": "18.3.3",
+    "@types/react-dom": "18.3.0",
+    "@unlayer/react-elements": "workspace:*",
+    "prismjs": "1.30.0",
+    "react": "18.3.1",
+    "react-dom": "18.3.1",
+    "tsup": "8.5.0",
+    "typescript": "5.9.3",
+    "vitest": "3.2.4"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}
diff --git a/packages/preview/shared/darkMode.ts b/packages/preview/shared/darkMode.ts
new file mode 100644
index 00000000..cb70fcc8
--- /dev/null
+++ b/packages/preview/shared/darkMode.ts
@@ -0,0 +1,223 @@
+/**
+ * Emulated dark mode: what an email client does to an email's colors for a
+ * reader in dark mode. Clients do it two ways, and the preview shows both:
+ *
+ * - "partial": only light backgrounds get dark and only dark text gets light
+ *   (Apple Mail, Outlook on phones); colors already readable on dark stay;
+ * - "full": every background and text color has its lightness flipped (the
+ *   Gmail apps, Outlook.com, Outlook on Windows in dark mode).
+ *
+ * Lightness is changed in OKLab, so hues stay recognizable, and images aren't
+ * touched (clients don't recolor them): a dark logo on a transparent
+ * background is exactly what this is for spotting.
+ *
+ * Shared: the preview app applies it to its frame, and `screenshot --dark`
+ * loads this module into the page it captures (built as dist/dark-mode.js), so
+ * both show the same colors. It runs in a browser and imports nothing.
+ */
+
+export type DarkMode = "off" | "partial" | "full";
+
+type Rgba = [number, number, number, number];
+
+const NAMED: Record<string, string> = {
+  black: "#000000",
+  white: "#ffffff",
+  red: "#ff0000",
+  green: "#008000",
+  blue: "#0000ff",
+  yellow: "#ffff00",
+  orange: "#ffa500",
+  purple: "#800080",
+  gray: "#808080",
+  grey: "#808080",
+  silver: "#c0c0c0",
+  navy: "#000080",
+  teal: "#008080",
+  maroon: "#800000",
+  olive: "#808000",
+  lime: "#00ff00",
+  aqua: "#00ffff",
+  fuchsia: "#ff00ff",
+  whitesmoke: "#f5f5f5",
+  gainsboro: "#dcdcdc",
+  lightgray: "#d3d3d3",
+  lightgrey: "#d3d3d3",
+  darkgray: "#a9a9a9",
+  darkgrey: "#a9a9a9",
+  dimgray: "#696969",
+  dimgrey: "#696969",
+  snow: "#fffafa",
+  ivory: "#fffff0",
+  beige: "#f5f5dc",
+  linen: "#faf0e6",
+};
+
+function parseHex(hex: string): Rgba | undefined {
+  const h = hex.slice(1);
+  const expand = h.length <= 4 ? h.split("").map((c) => c + c).join("") : h;
+  if (!/^[0-9a-f]{6}([0-9a-f]{2})?$/i.test(expand)) return undefined;
+  const n = (i: number) => Number.parseInt(expand.slice(i, i + 2), 16);
+  return [n(0) / 255, n(2) / 255, n(4) / 255, expand.length === 8 ? n(6) / 255 : 1];
+}
+
+function channel(value: string, max: number): number {
+  const v = value.trim();
+  return v.endsWith("%") ? Number.parseFloat(v) / 100 : Number.parseFloat(v) / max;
+}
+
+function hslToRgb(h: number, s: number, l: number): [number, number, number] {
+  const k = (n: number) => (n + h / 30) % 12;
+  const a = s * Math.min(l, 1 - l);
+  const f = (n: number) => l - a * Math.max(-1, Math.min(k(n) - 3, Math.min(9 - k(n), 1)));
+  return [f(0), f(8), f(4)];
+}
+
+/** An sRGB color (0–1 channels and alpha) from a CSS color, or undefined for what this doesn't read (oklch(), currentColor…). */
+export function parseColor(input: string): Rgba | undefined {
+  const value = input.trim().toLowerCase();
+  if (value.startsWith("#")) return parseHex(value);
+  if (NAMED[value]) return parseHex(NAMED[value]);
+  const fn = /^(rgba?|hsla?)\(([^)]*)\)$/.exec(value);
+  if (!fn) return undefined;
+  const parts = fn[2].split(/[\s,/]+/).filter(Boolean);
+  if (parts.length < 3) return undefined;
+  const alpha = parts[3] !== undefined ? channel(parts[3], 1) : 1;
+  if (fn[1].startsWith("rgb")) return [channel(parts[0], 255), channel(parts[1], 255), channel(parts[2], 255), alpha];
+  const [r, g, b] = hslToRgb(Number.parseFloat(parts[0]), channel(parts[1], 100), channel(parts[2], 100));
+  return [r, g, b, alpha];
+}
+
+// sRGB ↔ OKLab (Björn Ottosson's published matrices).
+const toLinear = (c: number) => (c <= 0.04045 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4);
+const fromLinear = (c: number) => (c <= 0.0031308 ? 12.92 * c : 1.055 * c ** (1 / 2.4) - 0.055);
+
+function rgbToOklab([r, g, b]: number[]): [number, number, number] {
+  const [lr, lg, lb] = [toLinear(r), toLinear(g), toLinear(b)];
+  const l = Math.cbrt(0.4122214708 * lr + 0.5363325363 * lg + 0.0514459929 * lb);
+  const m = Math.cbrt(0.2119034982 * lr + 0.6806995451 * lg + 0.1073969566 * lb);
+  const s = Math.cbrt(0.0883024619 * lr + 0.2817188376 * lg + 0.6299787005 * lb);
+  return [
+    0.2104542553 * l + 0.793617785 * m - 0.0040720468 * s,
+    1.9779984951 * l - 2.428592205 * m + 0.4505937099 * s,
+    0.0259040371 * l + 0.7827717662 * m - 0.808675766 * s,
+  ];
+}
+
+function oklabToRgb([L, a, b]: number[]): [number, number, number] {
+  const l = (L + 0.3963377774 * a + 0.2158037573 * b) ** 3;
+  const m = (L - 0.1055613458 * a - 0.0638541728 * b) ** 3;
+  const s = (L - 0.0894841775 * a - 1.291485548 * b) ** 3;
+  const clamp = (c: number) => Math.min(1, Math.max(0, fromLinear(c)));
+  return [
+    clamp(4.0767416621 * l - 3.3077115913 * m + 0.2309699292 * s),
+    clamp(-1.2684380046 * l + 2.6097574011 * m - 0.3413193965 * s),
+    clamp(-0.0041960863 * l - 0.7034186147 * m + 1.707614701 * s),
+  ];
+}
+
+function toCss([r, g, b, alpha]: Rgba): string {
+  const hex = (c: number) => Math.round(c * 255).toString(16).padStart(2, "0");
+  return alpha >= 1 ? `#${hex(r)}${hex(g)}${hex(b)}` : `rgba(${Math.round(r * 255)}, ${Math.round(g * 255)}, ${Math.round(b * 255)}, ${Number(alpha.toFixed(3))})`;
+}
+
+type Role = "background" | "text";
+
+/** The color a client in dark `mode` would show for `color` used as `role`. */
+export function darkColor(color: string, role: Role, mode: Exclude<DarkMode, "off">): string {
+  const rgba = parseColor(color);
+  if (!rgba) return color;
+  const [L, a, b] = rgbToOklab(rgba);
+  let next = L;
+  let chroma = 1;
+  if (mode === "full") {
+    // Flip lightness, keeping backgrounds a little off black and text a little off white.
+    next = role === "background" ? Math.max(0.16, 1 - L) : Math.min(0.94, 1 - L + 0.06);
+    chroma = 0.85;
+  } else if (role === "background" && L >= 0.62) {
+    // Only light backgrounds: white ends near 0.2 lightness, a pale tint a little lighter.
+    next = 0.2 + (1 - L) * 0.5;
+    chroma = 0.85;
+  } else if (role === "text" && L <= 0.5) {
+    // Only dark text: black ends near 0.9.
+    next = 0.9 - L * 0.3;
+    chroma = 0.9;
+  } else {
+    return color;
+  }
+  const [r, g, bl] = oklabToRgb([next, a * chroma, b * chroma]);
+  return toCss([r, g, bl, rgba[3]]);
+}
+
+const COLOR_TOKEN = new RegExp(`#[0-9a-f]{3,8}\\b|(?:rgba?|hsla?)\\([^)]*\\)|\\b(?:${Object.keys(NAMED).join("|")})\\b`, "gi");
+
+function darkValue(value: string, role: Role, mode: Exclude<DarkMode, "off">): string {
+  return value.replace(COLOR_TOKEN, (token) => darkColor(token, role, mode));
+}
+
+// Longhands only: a shorthand (`background`, `border-color`) reads back the longhands it sets, which would
+// otherwise be changed twice.
+const STYLE_ROLES: Array<[string, Role]> = [
+  ["background-color", "background"],
+  ["border-top-color", "background"],
+  ["border-right-color", "background"],
+  ["border-bottom-color", "background"],
+  ["border-left-color", "background"],
+  ["color", "text"],
+];
+
+const ATTRIBUTE_ROLES: Array<[string, Role]> = [
+  ["bgcolor", "background"],
+  ["color", "text"],
+];
+
+const ORIGINAL = "data-preview-original-";
+
+/** Removes any emulated dark mode from `doc`, then applies `mode` (or nothing for "off"). */
+export function setDarkMode(doc: Document, mode: DarkMode): void {
+  const body = doc.body;
+  if (!body) return;
+  if ((body.getAttribute("data-preview-dark") ?? "off") === mode) return;
+  for (const element of Array.from(doc.querySelectorAll<HTMLElement>("*"))) {
+    for (const attribute of Array.from(element.attributes)) {
+      if (!attribute.name.startsWith(ORIGINAL)) continue;
+      const name = attribute.name.slice(ORIGINAL.length);
+      if (name.startsWith("style-")) {
+        const property = name.slice("style-".length);
+        if (attribute.value) element.style.setProperty(property, attribute.value);
+        else element.style.removeProperty(property);
+      } else {
+        element.setAttribute(name, attribute.value);
+      }
+      element.removeAttribute(attribute.name);
+    }
+  }
+  body.removeAttribute("data-preview-dark");
+  if (mode === "off") return;
+  body.setAttribute("data-preview-dark", mode);
+
+  // Clients start from a white page with black text when the email sets none.
+  if (!body.style.backgroundColor && !body.style.background && !body.getAttribute("bgcolor")) {
+    body.setAttribute(`${ORIGINAL}style-background-color`, "");
+    body.style.backgroundColor = "#ffffff";
+  }
+  if (!body.style.color) {
+    body.setAttribute(`${ORIGINAL}style-color`, "");
+    body.style.color = "#000000";
+  }
+
+  for (const element of Array.from(doc.querySelectorAll<HTMLElement>("*"))) {
+    for (const [property, role] of STYLE_ROLES) {
+      const value = element.style.getPropertyValue(property);
+      if (!value) continue;
+      if (!element.hasAttribute(`${ORIGINAL}style-${property}`)) element.setAttribute(`${ORIGINAL}style-${property}`, value);
+      element.style.setProperty(property, darkValue(value, role, mode), element.style.getPropertyPriority(property));
+    }
+    for (const [attribute, role] of ATTRIBUTE_ROLES) {
+      const value = element.getAttribute(attribute);
+      if (!value || (attribute === "color" && element.tagName !== "FONT")) continue;
+      element.setAttribute(`${ORIGINAL}${attribute}`, value);
+      element.setAttribute(attribute, darkValue(value, role, mode));
+    }
+  }
+}
diff --git a/packages/preview/shared/findings.ts b/packages/preview/shared/findings.ts
new file mode 100644
index 00000000..d842ffaa
--- /dev/null
+++ b/packages/preview/shared/findings.ts
@@ -0,0 +1,198 @@
+/**
+ * What the checks found, in one list and with one meaning for the preview's
+ * Checks drawer and for `elements-preview check`:
+ *
+ * - "error": to fix. The template doesn't render, a block is left out, the
+ *   design JSON can't be made (it won't open in the Unlayer editor), or a link
+ *   or image is broken;
+ * - "warning": to check. Elements and React warnings, no plain text, CSS some
+ *   email clients don't support, a placeholder or http: URL, Gmail clipping;
+ * - "info": a note.
+ *
+ * Shared by the preview app and the server, so it imports nothing and takes
+ * the API's shapes structurally.
+ */
+
+export type FindingLevel = "error" | "warning" | "info";
+
+export type FindingKind =
+  /** The template doesn't compile or throws, or Elements left a block out because it failed. */
+  | "render"
+  /** A warning from Elements or React, or about the project. */
+  | "warning"
+  /** Other console output while rendering. */
+  | "log"
+  /** The design JSON couldn't be made: it won't open in the Unlayer editor. */
+  | "design"
+  /** The plain text couldn't be made. */
+  | "text"
+  /** CSS or HTML the template brings in that some email clients don't support. */
+  | "client"
+  | "link"
+  | "image"
+  /** The HTML is over Gmail's clipping size. */
+  | "size";
+
+export interface FindingClient {
+  /** caniemail's id: `outlook.windows`. */
+  client: string;
+  /** `Outlook (Windows)`. */
+  label: string;
+  support: "none" | "partial";
+}
+
+export interface Finding {
+  kind: FindingKind;
+  level: FindingLevel;
+  message: string;
+  /** The Elements block it's in: `Button 1`, `Html 2` (several, comma-separated, for a client finding). */
+  block?: string;
+  /** For a render error: the file it points at, relative to the project. */
+  file?: string;
+  /** For a render error, the line in `file`; for a client finding, the template's first line that likely brings it in. */
+  line?: number;
+  column?: number;
+  /** For a client finding: every template line that likely brings it in. */
+  lines?: number[];
+  /** For a render error: the lines around it. */
+  frame?: string;
+  /** The link or image URL; for a client finding, the feature's page on caniemail.com. */
+  url?: string;
+  /** The link's text or the image's alt text. */
+  label?: string;
+  /** The HTTP status a URL answered with. */
+  status?: number;
+  /** For a client finding: caniemail's name for the feature (`display:flex`). */
+  feature?: string;
+  /** For a client finding: "none" when some clients ignore it entirely, "partial" when they only partly support it. */
+  support?: "none" | "partial";
+  clients?: FindingClient[];
+}
+
+interface LogInput {
+  level: "error" | "warn" | "info" | "log";
+  message: string;
+}
+
+/** A render, as the loader returns it and the API sends it. */
+export type RenderInput =
+  | { ok: true; jsonError?: string; textError?: string; logs: LogInput[] }
+  | {
+      ok: false;
+      error: { message: string; file?: string; line?: number; column?: number; frame?: string; phase: "load" | "render" };
+      logs: LogInput[];
+    };
+
+interface CompatIssueInput {
+  feature: string;
+  url?: string;
+  support: "none" | "partial";
+  source: "template" | "elements";
+  clients: Array<{ client: string; label: string; support: "none" | "partial" }>;
+  locations: Array<{ block: string; line?: number }>;
+  sourceLines?: number[];
+}
+
+export type CompatInput = { applicable: true; issues: CompatIssueInput[] } | { applicable: false; reason: string };
+
+interface LinkFindingInput {
+  kind: "link" | "image" | "email";
+  level: FindingLevel;
+  url: string;
+  message: string;
+  block?: string;
+  label?: string;
+  status?: number;
+}
+
+export type LinksInput = { applicable: true; findings: LinkFindingInput[] } | { applicable: false; reason: string };
+
+const LOG_LEVEL: Record<LogInput["level"], FindingLevel> = { error: "error", warn: "warning", info: "info", log: "info" };
+
+/**
+ * What rendering reported: the project's warnings, a render error, no design
+ * JSON or plain text, and what Elements and React wrote to the console (an
+ * error there means Elements left a block out).
+ */
+export function renderingFindings(result: RenderInput | undefined, projectWarnings: string[] = []): Finding[] {
+  const findings: Finding[] = projectWarnings.map((message) => ({ kind: "warning", level: "warning", message }));
+  if (!result) return findings;
+  if (!result.ok) {
+    const { message, file, line, column, frame } = result.error;
+    findings.push({ kind: "render", level: "error", message, file, line, column, frame });
+  } else {
+    if (result.jsonError) findings.push({ kind: "design", level: "error", message: `No design JSON, so it won't open in the Unlayer editor: ${result.jsonError}` });
+    if (result.textError) findings.push({ kind: "text", level: "warning", message: `No plain text version: ${result.textError}` });
+  }
+  for (const log of result.logs) {
+    findings.push({ kind: log.level === "error" ? "render" : log.level === "warn" ? "warning" : "log", level: LOG_LEVEL[log.level], message: log.message });
+  }
+  return findings;
+}
+
+/** "Gmail, Outlook and Yahoo Mail": the client families, from labels such as "Outlook (Windows)". */
+function families(clients: FindingClient[]): string {
+  const names = [...new Set(clients.map((c) => c.label.replace(/ \(.*\)$/, "")))];
+  return names.length > 1 ? `${names.slice(0, -1).join(", ")} and ${names[names.length - 1]}` : names.join("");
+}
+
+function clientMessage(issue: CompatIssueInput): string {
+  const none = issue.clients.filter((c) => c.support === "none");
+  const partial = issue.clients.filter((c) => c.support === "partial");
+  const count = (list: FindingClient[]) => `${list.length} ${list.length === 1 ? "client" : "clients"}`;
+  const parts = [
+    none.length ? `isn't supported in ${families(none)} (${count(none)})` : "",
+    partial.length ? `${none.length ? "and only partly in" : "is only partly supported in"} ${families(partial)} (${count(partial)})` : "",
+  ].filter(Boolean);
+  return `\`${issue.feature}\` ${parts.join(" ")}: remove it or add a fallback.`;
+}
+
+/**
+ * Email client compatibility: what the template brings in that some clients
+ * don't support. What Elements' own HTML uses, with its fallbacks, isn't listed.
+ */
+export function clientFindings(compat: CompatInput | undefined): Finding[] {
+  if (!compat?.applicable) return [];
+  return compat.issues
+    .filter((issue) => issue.source === "template")
+    .map((issue) => ({
+      kind: "client" as const,
+      level: "warning" as const,
+      message: clientMessage(issue),
+      block: [...new Set(issue.locations.map((l) => l.block))].join(", ") || undefined,
+      line: issue.sourceLines?.[0],
+      lines: issue.sourceLines?.length ? issue.sourceLines : undefined,
+      url: issue.url,
+      feature: issue.feature,
+      support: issue.support,
+      clients: issue.clients.map(({ client, label, support }) => ({ client, label, support })),
+    }));
+}
+
+/** Links and images, and Gmail's clipping size. */
+export function linkFindings(links: LinksInput | undefined): Finding[] {
+  if (!links?.applicable) return [];
+  return links.findings.map((f) => ({
+    kind: f.kind === "email" ? "size" : f.kind,
+    level: f.level,
+    message: f.message,
+    block: f.block,
+    url: f.url || undefined,
+    label: f.label,
+    status: f.status,
+  }));
+}
+
+export interface GroupedFindings {
+  toFix: Finding[];
+  toCheck: Finding[];
+  notes: Finding[];
+}
+
+export function groupFindings(findings: Finding[]): GroupedFindings {
+  return {
+    toFix: findings.filter((f) => f.level === "error"),
+    toCheck: findings.filter((f) => f.level === "warning"),
+    notes: findings.filter((f) => f.level === "info"),
+  };
+}
diff --git a/packages/preview/src/bin.ts b/packages/preview/src/bin.ts
new file mode 100644
index 00000000..2cc3cc29
--- /dev/null
+++ b/packages/preview/src/bin.ts
@@ -0,0 +1,18 @@
+#!/usr/bin/env node
+/**
+ * The `elements-preview` command. It checks the Node.js version first, in
+ * code any version runs, because Vite fails with a cryptic import error on
+ * older ones.
+ */
+
+var version = String(process.versions.node);
+var parts = version.split(".").map(Number);
+var supported = (parts[0] === 20 && parts[1] >= 19) || (parts[0] === 22 && parts[1] >= 12) || parts[0] > 22;
+if (!supported) {
+  process.stderr.write("@unlayer/elements-preview needs Node.js 20.19 or later, or 22.12 or later (you have " + version + ").\n");
+  process.exitCode = 1;
+} else {
+  import("./cli.js").then(function (cli) {
+    return cli.run(process.argv.slice(2));
+  });
+}
diff --git a/packages/preview/src/cli.ts b/packages/preview/src/cli.ts
new file mode 100644
index 00000000..3541f261
--- /dev/null
+++ b/packages/preview/src/cli.ts
@@ -0,0 +1,447 @@
+/**
+ * `elements-preview dev`, `export`, `build`, `start`, `check`, `screenshot`
+ * and `render`. The Unlayer CLI runs these as `unlayer elements dev`,
+ * `unlayer elements check` and so on (`render` for `unlayer elements push`).
+ */
+
+import { spawn } from "node:child_process";
+import { readFileSync } from "node:fs";
+import path from "node:path";
+import { parseArgs } from "node:util";
+import { buildPreview, startStaticServer } from "./server/build.js";
+import { checkTemplates, formatCheckReport } from "./server/check.js";
+import { startDevServer } from "./server/dev-server.js";
+import { UsageError, type TemplateError } from "./server/errors.js";
+import { exportTemplates } from "./server/export.js";
+import { loadVitePlugins } from "./server/loader.js";
+import { shown } from "./server/paths.js";
+import { renderTemplates } from "./server/render.js";
+import { screenshotVariants, takeScreenshots } from "./server/screenshot.js";
+
+const VITE_PLUGINS_HELP = `  --vite-plugins <path> A module whose default export is an array of Vite plugins
+                        (or a function returning one) to load templates with`;
+
+const PROJECT_ID_HELP = `  --project-id <id>     The Unlayer project the Editor view opens designs in
+                        (default: UNLAYER_PROJECT_ID, or none)`;
+
+/** Each command's own help: `elements-preview help <command>` or `elements-preview <command> --help`. */
+const COMMAND_HELP: Record<string, string> = {
+  dev: `Usage: elements-preview dev [options]
+
+Preview the templates in your browser, updated as you edit them.
+
+Options:
+  --dir <path>          The templates folder (default: emails)
+  --port <number>       The port (default: 3000, or the next free one)
+  --open                Open the preview in your browser
+${PROJECT_ID_HELP}
+${VITE_PLUGINS_HELP}
+`,
+  export: `Usage: elements-preview export [options]
+
+Render every template, with its PreviewProps, to an HTML (or plain text) file.
+
+Options:
+  --dir <path>          The templates folder (default: emails)
+  --outDir <path>       Where to write the files (default: out)
+  --pretty              Format the HTML for reading
+  --plainText           Write plain text instead of HTML
+  --design              Also write each template's design JSON (<name>.design.json, opens in the Unlayer builder)
+  --extension <ext>     The file extension (default: html, or txt with --plainText)
+${VITE_PLUGINS_HELP}
+`,
+  build: `Usage: elements-preview build [options]
+
+Build the preview as static files to share or host anywhere.
+
+Options:
+  --dir <path>          The templates folder (default: emails)
+  --outDir <path>       Where to write the build (default: .elements-preview)
+${PROJECT_ID_HELP}
+${VITE_PLUGINS_HELP}
+`,
+  start: `Usage: elements-preview start [options]
+
+Serve a build on localhost.
+
+Options:
+  --outDir <path>       The build to serve (default: .elements-preview)
+  --port <number>       The port (default: 3000, or the next free one)
+  --open                Open it in your browser
+`,
+  check: `Usage: elements-preview check [templates...] [options]
+
+Render templates and check them as the preview's Checks do: render errors,
+Elements and React warnings, the design JSON and plain text, email client
+compatibility, links and images, and Gmail's clipping size. Errors are to fix,
+warnings to check. With no templates, it checks every one.
+
+Name templates by their path in the templates folder (welcome.tsx) or from
+here (emails/welcome.tsx), or a folder of them.
+
+Options:
+  --dir <path>          The templates folder (default: emails)
+  --json                Print the report as JSON (its shape is in the README)
+  --strict              Fail on what's to check too, not only on what's to fix
+  --offline             Don't request the links and images; check the HTML only
+${VITE_PLUGINS_HELP}
+
+Exit codes: 0 nothing to fix; 1 something to fix (with --strict, or to check);
+2 the check couldn't run (an option, folder or template that isn't right,
+Elements not installed); with --json, stderr then has {"error": "..."}.
+`,
+  screenshot: `Usage: elements-preview screenshot <templates...> [options]
+
+Save full-length PNGs of templates rendered with their PreviewProps, to
+<out>/<template path>.<variant>.png, with Chrome, Chromium, Edge or Brave
+(one already installed: nothing is downloaded).
+
+Name templates by their path in the templates folder (welcome.tsx) or from
+here (emails/welcome.tsx), or a folder of them (. for all).
+
+Options:
+  --dir <path>          The templates folder (default: emails)
+  --out <path>          Where to write the PNGs (default: screenshots)
+  --phone               Also at phone width (375 px)
+  --dark                Also in dark mode, as the preview shows it (every color flipped)
+  --all                 Desktop, phone and dark
+  --width <px>          The desktop width (default: 680; a Document: its page width)
+  --browser <path>      The browser (default: CHROME_PATH, or the first one found)
+  --json                Print the result as JSON
+${VITE_PLUGINS_HELP}
+
+Exit codes: 0 every screenshot taken; 1 a template failed to render or shoot;
+2 it couldn't run (an option, folder or template that isn't right, no browser).
+`,
+  render: `Usage: elements-preview render <templates...> [options]
+
+Render templates with their PreviewProps and print what a program needs to use
+them elsewhere: with --json, one JSON object per template, a line each:
+{ path, file, ok, mode, html, design, warnings }, with designError when there's
+no design JSON, error when it doesn't render, and check with --check. Without
+--json, it prints one template's HTML.
+
+Name templates by their path in the templates folder (welcome.tsx) or from
+here (emails/welcome.tsx), or a folder of them (. for all).
+
+Options:
+  --dir <path>          The templates folder (default: emails)
+  --json                Print each template as a line of JSON
+  --check               Also run check's checks: check { ok, toFix, toCheck, notes }
+  --offline             With --check, don't request the links and images
+${VITE_PLUGINS_HELP}
+
+Exit codes: 0 every template rendered (with --check, nothing to fix); 1 one
+didn't (or has something to fix); 2 it couldn't run (an option, folder or
+template that isn't right, Elements not installed); with --json, stderr then
+has {"error": "..."}.
+`,
+};
+
+const HELP = `Usage: elements-preview <command> [options]
+
+Commands:
+  dev         Preview the templates in your browser, updated as you edit them
+  export      Render every template to an HTML (or plain text) file
+  build       Build the preview as static files to share or host
+  start       Serve a build on localhost
+  check       Check templates as the preview's Checks do (--json for agents and CI)
+  screenshot  Save PNG screenshots of templates: desktop, phone, dark mode
+  render      Render templates to their HTML and design JSON (--json for programs)
+  help        Show a command's options: elements-preview help <command>
+
+  -h, --help            Show this help (with a command: that command's help)
+  -v, --version         Show the version
+`;
+
+function version(): string {
+  return JSON.parse(readFileSync(new URL("../package.json", import.meta.url), "utf8")).version;
+}
+
+function openBrowser(url: string): void {
+  const [command, args] =
+    process.platform === "darwin" ? ["open", [url]] : process.platform === "win32" ? ["cmd", ["/c", "start", "", url]] : ["xdg-open", [url]];
+  const child = spawn(command, args as string[], { stdio: "ignore", detached: true });
+  child.on("error", () => undefined);
+  child.unref();
+}
+
+/** The command the user typed to get here: the Unlayer CLI runs this one as `unlayer elements`. */
+const COMMAND = process.env.ELEMENTS_PREVIEW_COMMAND || "elements-preview";
+
+function fail(message: string): never {
+  process.stderr.write(`${message}\n`);
+  process.exit(1);
+}
+
+/**
+ * Ends `check` or `screenshot` when it can't run (a UsageError, or anything
+ * else that stops it before its report) with 2, so 1 always means a report
+ * that found something. With --json the message is JSON on stderr, as the
+ * Unlayer CLI writes its errors.
+ */
+function failCommand(error: unknown, json: boolean | undefined): never {
+  const message = error instanceof Error ? error.message : String(error);
+  process.stderr.write(json ? `${JSON.stringify({ error: message })}\n` : `${message}\n`);
+  process.exit(2);
+}
+
+function useColor(): boolean {
+  return Boolean(process.stdout.isTTY) && !process.env.NO_COLOR && process.env.TERM !== "dumb";
+}
+
+/** A render error for JSON: what it says and where, without the stack. */
+function errorJson({ message, file, line, column, frame }: TemplateError) {
+  return { message, file, line, column, frame };
+}
+
+function errorLine(error: TemplateError): string {
+  const where = error.file ? ` (${error.file}${error.line ? `:${error.line}:${error.column ?? 0}` : ""})` : "";
+  return `${error.message.split("\n")[0]}${where}`;
+}
+
+/** The Unlayer project the Editor view opens designs in: --project-id, or UNLAYER_PROJECT_ID; none by default. */
+function projectIdFrom(option: string | undefined): number | undefined {
+  const [value, name] = option !== undefined ? [option, "--project-id"] : [process.env.UNLAYER_PROJECT_ID, "UNLAYER_PROJECT_ID"];
+  if (value === undefined || value.trim() === "") return undefined;
+  const id = Number(value.trim());
+  if (!Number.isSafeInteger(id) || id < 1) fail(`${name} must be an Unlayer project id (a number), not ${value}`);
+  return id;
+}
+
+export async function run(argv: string[]): Promise<void> {
+  let parsed;
+  try {
+    parsed = parseArgs({
+      args: argv,
+      allowPositionals: true,
+      options: {
+        dir: { type: "string", default: "emails" },
+        port: { type: "string" },
+        open: { type: "boolean", default: false },
+        outDir: { type: "string" },
+        "vite-plugins": { type: "string" },
+        "project-id": { type: "string" },
+        pretty: { type: "boolean", default: false },
+        plainText: { type: "boolean", default: false },
+        design: { type: "boolean", default: false },
+        extension: { type: "string" },
+        json: { type: "boolean", default: false },
+        check: { type: "boolean", default: false },
+        strict: { type: "boolean", default: false },
+        offline: { type: "boolean", default: false },
+        out: { type: "string" },
+        phone: { type: "boolean", default: false },
+        dark: { type: "boolean", default: false },
+        all: { type: "boolean", default: false },
+        width: { type: "string" },
+        browser: { type: "string" },
+        help: { type: "boolean", short: "h", default: false },
+        version: { type: "boolean", short: "v", default: false },
+      },
+    });
+  } catch (error) {
+    // An option that isn't one: a usage error.
+    const message = (error as Error).message;
+    process.stderr.write(argv.includes("--json") ? `${JSON.stringify({ error: message })}\n` : `${message}\n\n${HELP}`);
+    process.exit(2);
+  }
+  const { values, positionals } = parsed;
+  if (values.version) return void process.stdout.write(`${version()}\n`);
+  const command = positionals[0];
+  if (command === "help") {
+    const topic = positionals[1];
+    if (topic && !COMMAND_HELP[topic]) fail(`No command ${topic}.\n\n${HELP}`);
+    return void process.stdout.write(topic ? COMMAND_HELP[topic] : HELP);
+  }
+  if (values.help || !command) return void process.stdout.write((command && COMMAND_HELP[command]) || HELP);
+
+  const port = values.port === undefined ? undefined : Number(values.port);
+  if (port !== undefined && (!Number.isInteger(port) || port < 1 || port > 65535)) fail(`--port must be a port number, not ${values.port}`);
+  const projectId = command === "dev" || command === "build" ? projectIdFrom(values["project-id"]) : undefined;
+  const oneOff = command === "check" || command === "screenshot" || command === "render";
+  let plugins: unknown[] | undefined;
+  if (values["vite-plugins"]) {
+    try {
+      plugins = await loadVitePlugins(values["vite-plugins"]);
+    } catch (error) {
+      const message = `Couldn't load the Vite plugins in ${values["vite-plugins"]}: ${(error as Error).message}`;
+      if (oneOff) failCommand(message, values.json);
+      fail(message);
+    }
+  }
+
+  if (command === "check") {
+    let report;
+    try {
+      report = await checkTemplates({ dir: values.dir, templates: positionals.slice(1), network: !values.offline, strict: values.strict, plugins });
+    } catch (error) {
+      failCommand(error, values.json);
+    }
+    process.stdout.write(values.json ? `${JSON.stringify(report, null, 2)}\n` : formatCheckReport(report, { color: useColor(), dir: shown(path.resolve(values.dir)) }));
+    process.exitCode = report.ok ? 0 : 1;
+    return;
+  }
+
+  if (command === "render") {
+    const templates = positionals.slice(1);
+    let result;
+    try {
+      if (!templates.length) throw new UsageError("Name the templates to render (. for all): elements-preview render welcome.tsx --json");
+      result = await renderTemplates({
+        dir: values.dir,
+        templates,
+        check: values.check,
+        network: !values.offline,
+        plugins,
+        // With --json each template is printed as soon as it's done.
+        onTemplate: values.json ? (template) => process.stdout.write(`${JSON.stringify(template)}\n`) : undefined,
+      });
+      if (!values.json && result.templates.length !== 1) {
+        throw new UsageError(`${templates.join(" ")} names ${result.templates.length} templates. Name one to print its HTML, or pass --json.`);
+      }
+    } catch (error) {
+      failCommand(error, values.json);
+    }
+    if (!values.json) {
+      const [template] = result.templates;
+      if (template.html !== null) process.stdout.write(template.html);
+      if (template.error) process.stderr.write(`  ✗ ${template.path}: ${errorLine({ ...template.error, phase: "render" })}\n`);
+      for (const finding of template.check?.toFix ?? []) process.stderr.write(`  ✗ ${template.path}: ${finding.message.split("\n")[0]}\n`);
+    }
+    process.exitCode = result.failed ? 1 : 0;
+    return;
+  }
+
+  if (command === "screenshot") {
+    const width = values.width === undefined ? undefined : Number(values.width);
+    if (width !== undefined && (!Number.isInteger(width) || width < 200 || width > 4000)) {
+      failCommand(new UsageError(`--width must be a width in pixels between 200 and 4000, not ${values.width}`), values.json);
+    }
+    let result;
+    try {
+      result = await takeScreenshots({
+        dir: values.dir,
+        templates: positionals.slice(1),
+        outDir: values.out,
+        variants: screenshotVariants(values),
+        width,
+        browser: values.browser,
+        plugins,
+        onScreenshot: values.json ? undefined : (_, screenshot) => process.stdout.write(`${screenshot.file}\n`),
+      });
+    } catch (error) {
+      failCommand(error, values.json);
+    }
+    if (values.json) {
+      const templates = result.templates.map(({ error, ...template }) => ({ ...template, ...(error ? { error: errorJson(error) } : {}) }));
+      process.stdout.write(`${JSON.stringify({ ok: result.failed === 0, browser: result.browser.path, outDir: shown(result.outDir), templates }, null, 2)}\n`);
+    } else {
+      for (const template of result.templates) {
+        if (template.error) process.stderr.write(`  ✗ ${template.path}: ${errorLine(template.error)}\n`);
+        for (const warning of template.warnings) process.stderr.write(`  ! ${template.path}: ${warning}\n`);
+      }
+    }
+    process.exitCode = result.failed ? 1 : 0;
+    return;
+  }
+
+  if (command === "dev") {
+    let server;
+    try {
+      server = await startDevServer({ dir: values.dir, port, strictPort: port !== undefined, plugins, projectId });
+    } catch (error) {
+      fail((error as Error).message);
+    }
+    const { project } = server;
+    process.stdout.write(
+      [
+        "",
+        `  Elements preview  ${server.url}`,
+        "",
+        `  Templates  ${shown(path.resolve(values.dir))}`,
+        `  Elements   ${project.elementsVersion ?? "not installed"}    React ${project.reactVersion ?? "not installed"}`,
+        ...project.warnings.map((w) => `\n  ! ${w}`),
+        "",
+        "",
+      ].join("\n")
+    );
+    if (values.open) openBrowser(server.url);
+    const stop = async () => {
+      await server.close();
+      process.exit(0);
+    };
+    process.once("SIGINT", stop);
+    process.once("SIGTERM", stop);
+    return;
+  }
+
+  if (command === "export") {
+    let result;
+    try {
+      result = await exportTemplates({
+        dir: values.dir,
+        outDir: values.outDir ?? "out",
+        plugins,
+        pretty: values.pretty,
+        plainText: values.plainText,
+        design: values.design,
+        extension: values.extension,
+      });
+    } catch (error) {
+      fail((error as Error).message);
+    }
+    for (const template of result.templates) {
+      if (template.error) {
+        const where = template.error.file ? ` (${template.error.file}${template.error.line ? `:${template.error.line}:${template.error.column ?? 0}` : ""})` : "";
+        process.stderr.write(`  ✗ ${template.template}: ${template.error.message.split("\n")[0]}${where}\n`);
+      } else {
+        process.stdout.write(`  ✓ ${template.template} → ${template.files.join(", ")}\n`);
+      }
+      for (const warning of template.warnings) process.stdout.write(`    ! ${warning.split("\n")[0]}\n`);
+    }
+    const done = result.templates.length - result.failed;
+    process.stdout.write(`\n${done} of ${result.templates.length} templates exported to ${shown(result.outDir)}\n`);
+    if (result.templates.length === 0) process.stdout.write(`No templates found in ${values.dir}. Templates are .tsx, .jsx or .js files with an export default.\n`);
+    if (result.failed) process.exitCode = 1;
+    return;
+  }
+
+  if (command === "build") {
+    let result;
+    try {
+      result = await buildPreview({ dir: values.dir, outDir: values.outDir, plugins, projectId });
+    } catch (error) {
+      fail((error as Error).message);
+    }
+    for (const { template, error } of result.failed) {
+      process.stderr.write(`  ✗ ${template}: ${error.message.split("\n")[0]}${error.file ? ` (${error.file}${error.line ? `:${error.line}` : ""})` : ""}\n`);
+    }
+    const where = shown(result.outDir);
+    process.stdout.write(
+      `\n${result.templates} templates built to ${where}${result.failed.length ? `, ${result.failed.length} with errors (shown in the preview)` : ""}.\n` +
+        `Host the folder on any static host, or run: ${COMMAND} start${values.outDir && values.outDir !== ".elements-preview" ? ` --outDir ${where}` : ""}\n`
+    );
+    return;
+  }
+
+  if (command === "start") {
+    let server;
+    try {
+      server = await startStaticServer({ outDir: values.outDir, port, strictPort: port !== undefined });
+    } catch (error) {
+      fail((error as Error).message);
+    }
+    process.stdout.write(`\n  Elements preview (build)  ${server.url}\n\n`);
+    if (values.open) openBrowser(server.url);
+    const stop = async () => {
+      await server.close();
+      process.exit(0);
+    };
+    process.once("SIGINT", stop);
+    process.once("SIGTERM", stop);
+    return;
+  }
+
+  fail(`Unknown command: ${command}\n\n${HELP}`);
+}
diff --git a/packages/preview/src/index.ts b/packages/preview/src/index.ts
new file mode 100644
index 00000000..b425a8d9
--- /dev/null
+++ b/packages/preview/src/index.ts
@@ -0,0 +1,25 @@
+export { startDevServer, type DevServer, type DevServerOptions } from "./server/dev-server.js";
+export { exportTemplates, type ExportOptions, type ExportResult, type ExportedTemplate } from "./server/export.js";
+export { discoverTemplates, type TemplateEntry } from "./server/discover.js";
+export { checkCompatibility, baselineFeatures, CLIENT_GROUPS, type CompatIssue, type CompatReport } from "./server/compat.js";
+export { MINIMUM_ELEMENTS } from "./server/project.js";
+export { run } from "./cli.js";
+export { buildPreview, startStaticServer, type BuildOptions, type BuildResult } from "./server/build.js";
+export { checkLinks, type LinkFinding, type LinkReport } from "./server/links.js";
+export { loadVitePlugins } from "./server/loader.js";
+export { checkTemplates, formatCheckReport, type CheckOptions, type CheckReport, type CheckedTemplate } from "./server/check.js";
+export { renderTemplates, type RenderTemplatesOptions, type RenderTemplatesResult, type RenderedTemplateJson } from "./server/render.js";
+export type { Finding, FindingKind, FindingLevel, FindingClient } from "../shared/findings.js";
+export {
+  takeScreenshots,
+  screenshotFile,
+  screenshotVariants,
+  documentPageWidth,
+  type ScreenshotOptions,
+  type ScreenshotResult,
+  type ScreenshotTemplate,
+  type Screenshot,
+  type Variant,
+} from "./server/screenshot.js";
+export { findBrowser, browserCandidates, type FoundBrowser } from "./server/browser.js";
+export { UsageError } from "./server/errors.js";
diff --git a/packages/preview/src/server/browser.ts b/packages/preview/src/server/browser.ts
new file mode 100644
index 00000000..402cb6dc
--- /dev/null
+++ b/packages/preview/src/server/browser.ts
@@ -0,0 +1,106 @@
+/**
+ * The browser `screenshot` drives: one already installed (Chrome, Chromium,
+ * Edge or Brave), never a download. `--browser` or `CHROME_PATH` picks one;
+ * otherwise the usual install locations are searched, per operating system.
+ */
+
+import { existsSync } from "node:fs";
+import path from "node:path";
+import { UsageError } from "./errors.js";
+
+export interface BrowserCandidate {
+  name: string;
+  path: string;
+}
+
+export interface FoundBrowser extends BrowserCandidate {
+  /** Where it came from. */
+  from: "--browser" | "CHROME_PATH" | "detected";
+}
+
+export interface BrowserLookup {
+  platform?: NodeJS.Platform;
+  env?: Record<string, string | undefined>;
+  /** Whether a file exists (tests pass their own). */
+  exists?: (file: string) => boolean;
+}
+
+const LINUX_COMMANDS: BrowserCandidate[] = [
+  { name: "Chrome", path: "google-chrome-stable" },
+  { name: "Chrome", path: "google-chrome" },
+  { name: "Chromium", path: "chromium" },
+  { name: "Chromium", path: "chromium-browser" },
+  { name: "Edge", path: "microsoft-edge-stable" },
+  { name: "Edge", path: "microsoft-edge" },
+  { name: "Brave", path: "brave-browser" },
+  { name: "Brave", path: "brave" },
+];
+
+/** Where each browser is usually installed, most likely first. */
+export function browserCandidates(platform: NodeJS.Platform, env: Record<string, string | undefined>): BrowserCandidate[] {
+  if (platform === "darwin") {
+    const apps: Array<[string, string]> = [
+      ["Chrome", "Google Chrome.app/Contents/MacOS/Google Chrome"],
+      ["Chromium", "Chromium.app/Contents/MacOS/Chromium"],
+      ["Edge", "Microsoft Edge.app/Contents/MacOS/Microsoft Edge"],
+      ["Brave", "Brave Browser.app/Contents/MacOS/Brave Browser"],
+    ];
+    const folders = ["/Applications", ...(env.HOME ? [path.posix.join(env.HOME, "Applications")] : [])];
+    return apps.flatMap(([name, app]) => folders.map((folder) => ({ name, path: path.posix.join(folder, app) })));
+  }
+  if (platform === "win32") {
+    const programFiles = env.PROGRAMFILES ?? env.ProgramFiles ?? "C:\\Program Files";
+    const programFilesX86 = env["PROGRAMFILES(X86)"] ?? env["ProgramFiles(x86)"] ?? "C:\\Program Files (x86)";
+    const local = env.LOCALAPPDATA;
+    const under = (name: string, relative: string, roots: Array<string | undefined>) =>
+      roots.filter((root): root is string => Boolean(root)).map((root) => ({ name, path: path.win32.join(root, relative) }));
+    return [
+      ...under("Chrome", "Google\\Chrome\\Application\\chrome.exe", [programFiles, programFilesX86, local]),
+      ...under("Chromium", "Chromium\\Application\\chrome.exe", [local, programFiles]),
+      ...under("Edge", "Microsoft\\Edge\\Application\\msedge.exe", [programFilesX86, programFiles]),
+      ...under("Brave", "BraveSoftware\\Brave-Browser\\Application\\brave.exe", [programFiles, programFilesX86, local]),
+    ];
+  }
+  // Linux and the other Unixes: the commands on PATH, then the usual places outside it.
+  const dirs = (env.PATH ?? "").split(":").filter(Boolean);
+  const onPath = LINUX_COMMANDS.flatMap(({ name, path: command }) => dirs.map((dir) => ({ name, path: path.posix.join(dir, command) })));
+  return [...onPath, { name: "Chrome", path: "/opt/google/chrome/chrome" }, { name: "Chromium", path: "/snap/bin/chromium" }, { name: "Edge", path: "/opt/microsoft/msedge/msedge" }, { name: "Brave", path: "/opt/brave.com/brave/brave" }];
+}
+
+function notFound(): UsageError {
+  const command = process.env.ELEMENTS_PREVIEW_COMMAND || "elements-preview";
+  return new UsageError(
+    [
+      "Screenshots need Chrome, Chromium, Edge or Brave, and none was found. Install one (https://www.google.com/chrome/), or point to the one you have:",
+      "",
+      `  ${command} screenshot <template> --browser "/path/to/chrome"`,
+      `  CHROME_PATH="/path/to/chrome" ${command} screenshot <template>`,
+    ].join("\n")
+  );
+}
+
+/** The browser to use: `explicit` (--browser), then CHROME_PATH, then the first one installed. Throws a UsageError saying how to get one. */
+export function findBrowser(explicit: string | undefined, lookup: BrowserLookup = {}): FoundBrowser {
+  const platform = lookup.platform ?? process.platform;
+  const env = lookup.env ?? process.env;
+  const exists = lookup.exists ?? existsSync;
+  const given: Array<[string | undefined, FoundBrowser["from"]]> = [
+    [explicit, "--browser"],
+    [env.CHROME_PATH, "CHROME_PATH"],
+  ];
+  for (const [value, from] of given) {
+    if (!value?.trim()) continue;
+    const wanted = value.trim();
+    // A macOS app bundle (/Applications/Chromium.app): its executable.
+    const bundle = platform === "darwin" && /\.app\/?$/.test(wanted) ? path.posix.join(wanted, "Contents", "MacOS", path.posix.basename(wanted.replace(/\/$/, ""), ".app")) : undefined;
+    // A command name (chromium): from PATH.
+    const join = platform === "win32" ? path.win32.join : path.posix.join;
+    const onPath = /[\\/]/.test(wanted) ? [] : (env.PATH ?? "").split(platform === "win32" ? ";" : ":").filter(Boolean).map((dir) => join(dir, wanted));
+    const found = (bundle ? [bundle] : [wanted, ...onPath]).find((file) => exists(file));
+    if (found) return { name: (platform === "win32" ? path.win32 : path.posix).basename(found), path: found, from };
+    throw new UsageError(`There's no browser at ${wanted} (from ${from}). Give the path to Chrome, Chromium, Edge or Brave's executable.`);
+  }
+  const detected = browserCandidates(platform, env).find((candidate) => exists(candidate.path));
+  if (!detected) throw notFound();
+  return { ...detected, from: "detected" };
+}
diff --git a/packages/preview/src/server/build.ts b/packages/preview/src/server/build.ts
new file mode 100644
index 00000000..2210f053
--- /dev/null
+++ b/packages/preview/src/server/build.ts
@@ -0,0 +1,152 @@
+/**
+ * `build`: the preview as static files to share, e.g. with teammates who
+ * review emails without running the project. Every template is rendered with
+ * its PreviewProps and checked (compatibility, and links and images as far as
+ * the HTML shows), and the app reads those results instead of a server. Host
+ * the folder anywhere (any static host, any path), or run `start`.
+ *
+ * What a static preview can't do: render with other props, update live, or
+ * request the URLs in the emails.
+ */
+
+import { existsSync, statSync } from "node:fs";
+import { cp, mkdir, readFile, writeFile } from "node:fs/promises";
+import http from "node:http";
+import path from "node:path";
+import { createChecks } from "./checks.js";
+import { defaultUiDir } from "./dev-server.js";
+import { discoverTemplates } from "./discover.js";
+import { inside, listenFrom, requestAllowed, sendFile } from "./http.js";
+import { createLoader, readSource } from "./loader.js";
+import { inspectProject } from "./project.js";
+import type { TemplateError } from "./errors.js";
+
+export interface BuildOptions {
+  dir: string;
+  /** Default: `.elements-preview`. */
+  outDir?: string;
+  uiDir?: string;
+  /** Vite plugins for loading templates (see LoaderOptions.plugins). */
+  plugins?: unknown[];
+  /** The Unlayer project the Editor view opens designs in (none: the editor's defaults). */
+  projectId?: number;
+}
+
+export interface BuildResult {
+  outDir: string;
+  templates: number;
+  failed: Array<{ template: string; error: TemplateError }>;
+}
+
+/** Where a template's data goes: its path as folders, so any static host serves it. */
+function dataFile(outDir: string, kind: string, template: string): string {
+  return path.join(outDir, "api", kind, ...template.split("/")) + ".json";
+}
+
+async function writeJson(file: string, value: unknown): Promise<void> {
+  await mkdir(path.dirname(file), { recursive: true });
+  await writeFile(file, JSON.stringify(value));
+}
+
+/** /static/ URLs relative to the page, so the build works under any path. */
+function relativeStatic(html: string): string {
+  return html.replace(/(\s(?:src|href|background)=["'])\/static\//g, "$1./static/").replace(/url\((["']?)\/static\//g, "url($1./static/");
+}
+
+export async function buildPreview(options: BuildOptions): Promise<BuildResult> {
+  const dir = path.resolve(options.dir);
+  if (!existsSync(dir) || !statSync(dir).isDirectory()) {
+    throw new Error(`The templates folder ${dir} doesn't exist. Point the build at the folder with your templates: --dir ./emails`);
+  }
+  const outDir = path.resolve(options.outDir ?? ".elements-preview");
+  if (dir === outDir || dir.startsWith(outDir + path.sep)) throw new Error(`The output folder ${outDir} holds the templates. Pick another one: --outDir .elements-preview`);
+  const uiDir = options.uiDir ?? defaultUiDir();
+  if (!existsSync(path.join(uiDir, "index.html"))) throw new Error("The preview app isn't built. Run the package's build first.");
+  const project = inspectProject(dir);
+  if (!project.canRender) throw new Error(project.warnings.join("\n"));
+
+  const templates = await discoverTemplates(dir);
+  const loader = await createLoader({ project, watch: false, plugins: options.plugins });
+  const checks = createChecks(loader, dir);
+  const failed: BuildResult["failed"] = [];
+  try {
+    await mkdir(outDir, { recursive: true });
+    // The app, with relative asset paths and a flag that tells it to read the files written here.
+    await cp(uiDir, outDir, { recursive: true });
+    const index = (await readFile(path.join(uiDir, "index.html"), "utf8"))
+      .replace(/(src|href)="\/assets\//g, '$1="./assets/')
+      .replace("</head>", '  <script>window.__ELEMENTS_PREVIEW_STATIC__ = true;</script>\n  </head>');
+    await writeFile(path.join(outDir, "index.html"), index);
+
+    await writeJson(path.join(outDir, "api", "meta.json"), {
+      dir: path.relative(project.root, dir) || ".",
+      elementsVersion: project.elementsVersion,
+      reactVersion: project.reactVersion,
+      tailwind: project.tailwind,
+      warnings: project.warnings,
+      projectId: options.projectId,
+      static: true,
+      builtAt: new Date().toISOString(),
+    });
+    await writeJson(path.join(outDir, "api", "templates.json"), { templates });
+
+    for (const template of templates) {
+      const file = path.join(dir, template.path);
+      const source = await readSource(file);
+      const result = await loader.render(file);
+      if (!result.ok) {
+        failed.push({ template: template.path, error: result.error });
+        await writeJson(dataFile(outDir, "render", template.path), { ...result, source });
+        continue;
+      }
+      await writeJson(dataFile(outDir, "render", template.path), { ...result, html: relativeStatic(result.html), source });
+      await writeJson(dataFile(outDir, "compat", template.path), await checks.compat(result, source));
+      await writeJson(dataFile(outDir, "links", template.path), await checks.links(result, { network: false }));
+    }
+    const staticDir = path.join(dir, "static");
+    if (existsSync(staticDir)) await cp(staticDir, path.join(outDir, "static"), { recursive: true });
+  } finally {
+    await loader.close();
+  }
+  return { outDir, templates: templates.length, failed };
+}
+
+export interface StaticServer {
+  url: string;
+  close(): Promise<void>;
+}
+
+/** `start`: serves a build on localhost. */
+export async function startStaticServer(options: { outDir?: string; port?: number; strictPort?: boolean }): Promise<StaticServer> {
+  const outDir = path.resolve(options.outDir ?? ".elements-preview");
+  if (!existsSync(path.join(outDir, "index.html")) || !existsSync(path.join(outDir, "api", "meta.json"))) {
+    throw new Error(`There's no preview build in ${outDir}. Build one first: ${process.env.ELEMENTS_PREVIEW_COMMAND || "elements-preview"} build`);
+  }
+  const server = http.createServer(async (req, res) => {
+    if (!requestAllowed(req)) {
+      res.writeHead(403, { "content-type": "text/plain" });
+      return res.end("This preview only answers requests from localhost.");
+    }
+    const url = new URL(req.url ?? "/", "http://localhost");
+    let relative: string;
+    try {
+      relative = decodeURIComponent(url.pathname).replace(/^\/+/, "") || "index.html";
+    } catch {
+      res.writeHead(400);
+      return res.end();
+    }
+    const file = inside(outDir, relative);
+    if (file && (await sendFile(res, file))) return;
+    res.writeHead(404, { "content-type": "text/plain" });
+    res.end("Not found");
+  });
+  const port = await listenFrom(server, options.port ?? 3000, options.strictPort ?? false);
+  return {
+    url: `http://localhost:${port}`,
+    close: () =>
+      new Promise<void>((resolve) => {
+        server.close(() => resolve());
+        server.closeAllConnections();
+      }),
+  };
+}
diff --git a/packages/preview/src/server/check.ts b/packages/preview/src/server/check.ts
new file mode 100644
index 00000000..24d4fc2c
--- /dev/null
+++ b/packages/preview/src/server/check.ts
@@ -0,0 +1,197 @@
+/**
+ * `check`: renders templates and runs the preview's checks on each, for a
+ * terminal, a CI job or a coding agent: render errors, Elements and React
+ * warnings, the design JSON and plain text, email client compatibility, links
+ * and images, and Gmail's clipping size. The findings and their levels are the
+ * Checks drawer's (shared/findings.ts): errors are to fix, warnings to check.
+ */
+
+import { existsSync, statSync } from "node:fs";
+import path from "node:path";
+import { clientFindings, groupFindings, linkFindings, renderingFindings, type Finding, type GroupedFindings } from "../../shared/findings.js";
+import { createChecks, type TemplateChecks } from "./checks.js";
+import { discoverTemplates, selectTemplates, unknownTemplatesMessage, type TemplateEntry } from "./discover.js";
+import { UsageError } from "./errors.js";
+import { createLoader, readSource, type RenderMode, type RenderResult } from "./loader.js";
+import { shown } from "./paths.js";
+import { inspectProject, type ProjectInfo } from "./project.js";
+
+export interface CheckOptions {
+  /** The templates folder. */
+  dir: string;
+  /** The templates to check (see selectTemplates); none: every template. */
+  templates?: string[];
+  /** Request each link and image URL (default true). */
+  network?: boolean;
+  /** What's to check fails the check too, not only what's to fix. */
+  strict?: boolean;
+  /** More Vite plugins for loading templates (see loadVitePlugins). */
+  plugins?: unknown[];
+  /** How long each URL has to answer (default: the link check's). */
+  timeoutMs?: number;
+  fetch?: typeof fetch;
+}
+
+export interface CheckedTemplate extends GroupedFindings {
+  /** The template's path in the templates folder. */
+  path: string;
+  /** Its file, from the working directory. */
+  file: string;
+  /** Nothing to fix (with strict, nothing to check either). */
+  ok: boolean;
+  /** null when it doesn't render. */
+  mode: RenderMode | null;
+  /** The size of its HTML; null when it doesn't render. */
+  bytes: number | null;
+}
+
+export interface CheckReport {
+  /** Every template is ok: the command exits with 0. */
+  ok: boolean;
+  strict: boolean;
+  /** Whether link and image URLs were requested. */
+  network: boolean;
+  /** Worst first: the most to fix, then the most to check, then by path. */
+  templates: CheckedTemplate[];
+  summary: { templates: number; toFix: number; toCheck: number; notes: number };
+}
+
+/**
+ * The project and the templates a one-off command (`check`, `render`) works on:
+ * the templates folder must exist, Elements and React must be installed, and
+ * every template named must be there; otherwise a UsageError.
+ */
+export async function selectProjectTemplates(
+  dirOption: string,
+  requested: string[],
+  command: string
+): Promise<{ dir: string; project: ProjectInfo; selected: TemplateEntry[] }> {
+  const dir = path.resolve(dirOption);
+  if (!existsSync(dir) || !statSync(dir).isDirectory()) {
+    throw new UsageError(`The templates folder ${shown(dir)} doesn't exist. Point the ${command} at the folder with your templates: --dir ./emails`);
+  }
+  const project = inspectProject(dir);
+  if (!project.canRender) throw new UsageError(project.warnings.join("\n"));
+  const all = await discoverTemplates(dir);
+  const { selected, unknown } = selectTemplates(dir, requested, all);
+  if (unknown.length) throw new UsageError(unknownTemplatesMessage(unknown, shown(dir), all));
+  return { dir, project, selected };
+}
+
+export interface FindingsContext {
+  project: ProjectInfo;
+  checks: TemplateChecks;
+  /** Request each link and image URL. */
+  network: boolean;
+  timeoutMs?: number;
+  fetch?: typeof fetch;
+}
+
+/**
+ * What check reports for one template rendered from `file`: rendering, email
+ * client and link findings, grouped by level (errors are to fix). Render
+ * errors point at their file from the working directory.
+ */
+export async function templateFindings(result: RenderResult, file: string, context: FindingsContext): Promise<GroupedFindings> {
+  const findings: Finding[] = renderingFindings(result, context.project.warnings);
+  if (result.ok) {
+    findings.push(...clientFindings(await context.checks.compat(result, await readSource(file))));
+    findings.push(...linkFindings(await context.checks.links(result, { network: context.network, timeoutMs: context.timeoutMs, fetch: context.fetch })));
+  }
+  // Render errors point at files relative to the project: show them from here, like the template.
+  for (const finding of findings) if (finding.file) finding.file = shown(path.resolve(context.project.root, finding.file));
+  return groupFindings(findings);
+}
+
+export async function checkTemplates(options: CheckOptions): Promise<CheckReport> {
+  const { dir, project, selected } = await selectProjectTemplates(options.dir, options.templates ?? [], "check");
+  const network = options.network !== false;
+  const strict = options.strict === true;
+  const loader = await createLoader({ project, watch: false, plugins: options.plugins });
+  const context: FindingsContext = { project, checks: createChecks(loader, dir), network, timeoutMs: options.timeoutMs, fetch: options.fetch };
+  const templates: CheckedTemplate[] = [];
+  try {
+    for (const template of selected) {
+      const file = path.join(dir, template.path);
+      const result = await loader.render(file);
+      const grouped = await templateFindings(result, file, context);
+      templates.push({
+        path: template.path,
+        file: shown(file),
+        ok: grouped.toFix.length === 0 && (!strict || grouped.toCheck.length === 0),
+        mode: result.ok ? result.mode : null,
+        bytes: result.ok ? Buffer.byteLength(result.html, "utf8") : null,
+        ...grouped,
+      });
+    }
+  } finally {
+    await loader.close();
+  }
+  templates.sort((a, b) => b.toFix.length - a.toFix.length || b.toCheck.length - a.toCheck.length || a.path.localeCompare(b.path));
+  const total = (key: keyof GroupedFindings) => templates.reduce((sum, t) => sum + t[key].length, 0);
+  return {
+    ok: templates.every((t) => t.ok),
+    strict,
+    network,
+    templates,
+    summary: { templates: templates.length, toFix: total("toFix"), toCheck: total("toCheck"), notes: total("notes") },
+  };
+}
+
+function truncate(text: string, max: number): string {
+  return text.length > max ? `${text.slice(0, max - 1)}…` : text;
+}
+
+/** Where a finding is, for its line: the file and line of a render error, the template lines of a client finding, a link's text and URL. */
+function where(finding: Finding): string | undefined {
+  if (finding.kind === "render" && finding.file) {
+    return `${finding.file}${finding.line ? `:${finding.line}${finding.column ? `:${finding.column}` : ""}` : ""}`;
+  }
+  if (finding.kind === "client" && finding.lines?.length) return `line${finding.lines.length > 1 ? "s" : ""} ${finding.lines.join(", ")}`;
+  if (finding.kind === "link") return `${finding.label ? `“${truncate(finding.label, 30)}” → ` : ""}${finding.url ? truncate(finding.url, 60) : "(no URL)"}`;
+  if (finding.kind === "image") return finding.url ? truncate(finding.url, 60) : "(no src)";
+  return undefined;
+}
+
+/** One line per finding: `Button 1 · “Click me” → javascript:alert(1) · Email clients don't run javascript: links.` */
+export function findingLine(finding: Finding): string {
+  return [finding.block, where(finding), finding.message.split("\n")[0].trim()].filter(Boolean).join(" · ");
+}
+
+function count(n: number, word: string): string {
+  return `${n} ${word}${n === 1 ? "" : "s"}`;
+}
+
+/** The report for a terminal: each template, worst first, with a line for each thing to fix or check, then a summary. */
+export function formatCheckReport(report: CheckReport, options: { color?: boolean; dir?: string } = {}): string {
+  const paint = (code: number) => (text: string) => (options.color ? `\u001b[${code}m${text}\u001b[0m` : text);
+  const red = paint(31);
+  const yellow = paint(33);
+  const green = paint(32);
+  const dim = paint(2);
+  const lines: string[] = [];
+  for (const template of report.templates) {
+    const icon = template.toFix.length ? red("✗") : template.toCheck.length ? yellow("!") : green("✓");
+    const about = template.mode ? `${template.mode}, ${Math.max(1, Math.round((template.bytes ?? 0) / 1024))} KB` : "doesn't render";
+    const found = [
+      template.toFix.length ? red(`${template.toFix.length} to fix`) : "",
+      template.toCheck.length ? yellow(`${template.toCheck.length} to check`) : "",
+      template.notes.length ? dim(count(template.notes.length, "note")) : "",
+    ].filter(Boolean);
+    lines.push(`${icon} ${template.path} ${dim(`(${about})`)}${found.length ? `: ${found.join(", ")}` : ""}`);
+    for (const finding of template.toFix) lines.push(`    ${red("fix  ")}  ${findingLine(finding)}`);
+    for (const finding of template.toCheck) lines.push(`    ${yellow("check")}  ${findingLine(finding)}`);
+  }
+  const { summary } = report;
+  if (!summary.templates) {
+    lines.push(`No templates${options.dir ? ` in ${options.dir}` : ""}. Templates are .tsx, .jsx or .js files with an export default.`);
+    return `${lines.join("\n")}\n`;
+  }
+  const found =
+    summary.toFix || summary.toCheck ? `${red(`${summary.toFix} to fix`)}, ${yellow(`${summary.toCheck} to check`)}` : green("nothing to fix or check");
+  const notes = summary.notes ? ` ${dim(`(${count(summary.notes, "note")}: --json lists them)`)}` : "";
+  const offline = report.network ? "" : " Links and images weren't requested (--offline).";
+  const strict = report.strict && !summary.toFix && summary.toCheck ? " With --strict, what's to check fails the check too." : "";
+  lines.push("", `Checked ${count(summary.templates, "template")}: ${found}.${notes}${offline}${strict}`);
+  return `${lines.join("\n")}\n`;
+}
diff --git a/packages/preview/src/server/checks.ts b/packages/preview/src/server/checks.ts
new file mode 100644
index 00000000..9c5b3728
--- /dev/null
+++ b/packages/preview/src/server/checks.ts
@@ -0,0 +1,43 @@
+/**
+ * The checks of a rendered template, as the dev server, `build` and `check`
+ * all run them: email client compatibility (with the template lines each
+ * finding likely comes from) and links and images.
+ */
+
+import { baselineFeatures, checkCompatibility, sourceLines, type CompatReport } from "./compat.js";
+import { checkLinks, type LinkReport } from "./links.js";
+import type { RenderedTemplate, TemplateLoader } from "./loader.js";
+
+export const NOT_AN_EMAIL = "Email client compatibility applies to emails. This template is a page or a document.";
+
+export type CompatResult = ({ applicable: true } & CompatReport) | { applicable: false; reason: string };
+export type LinksResult = ({ applicable: true } & LinkReport) | { applicable: false; reason: string };
+
+export interface TemplateChecks {
+  /** Email client compatibility, for an email; `source` is the template's source, for the lines each finding comes from. */
+  compat(result: RenderedTemplate, source: string): Promise<CompatResult>;
+  /** Links and images; `network: false` checks the HTML only. */
+  links(result: RenderedTemplate, options?: { network?: boolean; timeoutMs?: number; fetch?: typeof fetch }): Promise<LinksResult>;
+  /** Measure Elements' own HTML again on the next compatibility check (the project's packages changed). */
+  reset(): void;
+}
+
+/** The checks for templates in `dir` rendered by `loader`, which also renders the reference email Elements' own HTML is measured with. */
+export function createChecks(loader: TemplateLoader, dir: string): TemplateChecks {
+  let baseline: Set<string> | undefined;
+  return {
+    async compat(result, source) {
+      if (result.mode !== "email") return { applicable: false, reason: NOT_AN_EMAIL };
+      baseline ??= baselineFeatures(await loader.referenceHtml());
+      const report = checkCompatibility(result.html, baseline);
+      for (const issue of report.issues) if (issue.source === "template") issue.sourceLines = sourceLines(issue.feature, source);
+      return { applicable: true, ...report };
+    },
+    async links(result, options = {}) {
+      return { applicable: true, ...(await checkLinks(result.html, { dir, ...options })) };
+    },
+    reset() {
+      baseline = undefined;
+    },
+  };
+}
diff --git a/packages/preview/src/server/compat.ts b/packages/preview/src/server/compat.ts
new file mode 100644
index 00000000..ed1ab7db
--- /dev/null
+++ b/packages/preview/src/server/compat.ts
@@ -0,0 +1,279 @@
+/**
+ * Email client compatibility: the HTML and CSS a rendered email uses that
+ * email clients don't support, from caniemail.com's data (the `caniemail`
+ * package).
+ *
+ * Elements' own email HTML deliberately uses CSS some clients ignore, with
+ * fallbacks for them (media queries for phones, Outlook conditionals). Checked
+ * raw, every email lists those, so each finding is sorted:
+ *
+ * - "template": something this template brought in: anything inside an `Html`
+ *   block, and features Elements' own HTML doesn't use (a web font, a
+ *   background image, CSS from a prop value);
+ * - "elements": a feature Elements' own HTML also uses, found outside `Html`
+ *   blocks: handled by Elements, listed for reference.
+ *
+ * What Elements uses is measured, not listed by hand: a reference email with
+ * every block is rendered with the project's Elements and checked the same way.
+ */
+
+import { caniemail, rawData } from "caniemail";
+import { Parser } from "htmlparser2";
+
+/** An issue as caniemail reports it (its type isn't exported from the package root). */
+interface FeatureIssue {
+  notes: string[];
+  title: string;
+  position?: { start: { line: number; column: number }; end: { line: number; column: number } };
+  support: string;
+}
+
+export interface ClientGroup {
+  id: string;
+  label: string;
+  clients: string[];
+}
+
+/** The clients checked, by family. */
+export const CLIENT_GROUPS: ClientGroup[] = [
+  { id: "gmail", label: "Gmail", clients: ["gmail.desktop-webmail", "gmail.ios", "gmail.android", "gmail.mobile-webmail"] },
+  { id: "outlook", label: "Outlook", clients: ["outlook.windows", "outlook.windows-mail", "outlook.macos", "outlook.outlook-com", "outlook.ios", "outlook.android"] },
+  { id: "apple-mail", label: "Apple Mail", clients: ["apple-mail.macos", "apple-mail.ios"] },
+  { id: "yahoo", label: "Yahoo Mail", clients: ["yahoo.desktop-webmail", "yahoo.ios", "yahoo.android"] },
+  { id: "samsung-email", label: "Samsung Email", clients: ["samsung-email.android"] },
+  { id: "thunderbird", label: "Thunderbird", clients: ["thunderbird.macos", "thunderbird.windows"] },
+];
+
+const PLATFORM_LABELS: Record<string, string> = {
+  "desktop-webmail": "web",
+  "mobile-webmail": "mobile web",
+  ios: "iOS",
+  android: "Android",
+  macos: "macOS",
+  windows: "Windows",
+  "windows-mail": "Windows Mail",
+  "outlook-com": "Outlook.com",
+};
+
+export function clientLabel(client: string): string {
+  const [family, platform] = client.split(".");
+  const group = CLIENT_GROUPS.find((g) => g.clients.includes(client));
+  return `${group?.label ?? family} (${PLATFORM_LABELS[platform] ?? platform})`;
+}
+
+export interface IssueLocation {
+  /** The Elements block the CSS is on: "Button 2", "Column 1", "Row 3"; "Head styles" for a <style> rule. */
+  block: string;
+  /** Line in the rendered HTML. */
+  line?: number;
+}
+
+export interface CompatIssue {
+  feature: string;
+  url?: string;
+  /** "none" anywhere it's flagged beats "partial". */
+  support: "none" | "partial";
+  source: "template" | "elements";
+  clients: Array<{ client: string; label: string; support: "none" | "partial"; notes: string[] }>;
+  locations: IssueLocation[];
+  /** Lines of the template's source that likely bring it in (see sourceLines). */
+  sourceLines?: number[];
+}
+
+export interface CompatReport {
+  issues: CompatIssue[];
+  /** How many issues are the template's own. */
+  templateCount: number;
+  checkedClients: string[];
+  durationMs: number;
+}
+
+const FEATURE_URLS = new Map<string, string>(
+  ((rawData as { data?: Array<{ title: string; url: string }> }).data ?? []).map((f) => [f.title, f.url])
+);
+
+const BLOCK_ID = /^u_(content_([a-z]+)|column|row|body)_(\d+)$/;
+
+interface Region {
+  start: number;
+  end: number;
+  label: string;
+  html: boolean;
+}
+
+function blockLabel(match: RegExpExecArray): string {
+  const kind = match[2] ?? match[1];
+  const label: Record<string, string> = { column: "Column", row: "Row", body: "Body", text: "Paragraph" };
+  return `${label[kind] ?? kind.charAt(0).toUpperCase() + kind.slice(1)} ${match[3]}`;
+}
+
+/**
+ * Each element with an Elements block id, by its character range in the HTML,
+ * and inside each `Html` block the HTML the template wrote: Elements wraps it
+ * in its own markup (a table cell with padding, then a plain `<div>`), and only
+ * what's in that `<div>` is the template's.
+ */
+function blockRegions(html: string): Region[] {
+  const regions: Region[] = [];
+  const stack: Array<{ name: string; start: number; id?: RegExpExecArray; userContent?: string }> = [];
+  // The label of the Html block whose wrapper <div> is next, if any.
+  let awaitingUserDiv: string | undefined;
+  const parser = new Parser(
+    {
+      onopentag(name, attributes) {
+        const id = attributes.id ? BLOCK_ID.exec(attributes.id) ?? undefined : undefined;
+        let userContent: string | undefined;
+        if (id?.[2] === "html") awaitingUserDiv = blockLabel(id);
+        else if (awaitingUserDiv && name === "div" && Object.keys(attributes).length === 0) {
+          userContent = awaitingUserDiv;
+          awaitingUserDiv = undefined;
+        }
+        stack.push({ name, start: userContent ? parser.endIndex + 1 : parser.startIndex, id, userContent });
+      },
+      onclosetag(name) {
+        for (let i = stack.length - 1; i >= 0; i--) {
+          if (stack[i].name !== name) continue;
+          const [open] = stack.splice(i, 1);
+          if (open.id) regions.push({ start: open.start, end: parser.endIndex, label: blockLabel(open.id), html: false });
+          if (open.userContent) regions.push({ start: open.start, end: parser.startIndex, label: open.userContent, html: true });
+          break;
+        }
+      },
+    },
+    { decodeEntities: false }
+  );
+  parser.write(html);
+  parser.end();
+  return regions;
+}
+
+function lineOffsets(html: string): number[] {
+  const offsets = [0];
+  for (let i = 0; i < html.length; i++) if (html[i] === "\n") offsets.push(i + 1);
+  return offsets;
+}
+
+function locate(issue: FeatureIssue, regions: Region[], lines: number[]): { location: IssueLocation; inHtmlBlock: boolean } {
+  const start = issue.position?.start;
+  if (!start) return { location: { block: "Head styles" }, inHtmlBlock: false };
+  const offset = (lines[start.line - 1] ?? 0) + Math.max(0, start.column - 1);
+  let inner: Region | undefined;
+  for (const region of regions) {
+    if (offset < region.start || offset > region.end) continue;
+    if (!inner || region.end - region.start < inner.end - inner.start) inner = region;
+  }
+  const inHtmlBlock = regions.some((r) => r.html && offset >= r.start && offset <= r.end);
+  return { location: { block: inner?.label ?? "Head styles", line: start.line }, inHtmlBlock };
+}
+
+interface Finding {
+  client: string;
+  type: "error" | "warning";
+  issue: FeatureIssue;
+}
+
+/** Every finding for `html`, one client at a time (the package throws for some clients' data). */
+function check(html: string, clients: string[]): Finding[] {
+  const findings: Finding[] = [];
+  for (const client of clients) {
+    let result;
+    try {
+      result = caniemail({ clients: [client as never], html });
+    } catch {
+      continue;
+    }
+    for (const [type, map] of [["error", result.issues.errors], ["warning", result.issues.warnings]] as const) {
+      for (const [, issues] of map) for (const issue of issues) findings.push({ client, type, issue });
+    }
+  }
+  return findings;
+}
+
+const ALL_CLIENTS = CLIENT_GROUPS.flatMap((g) => g.clients);
+
+/** The features Elements' own email HTML uses, per client, from a reference email. */
+export function baselineFeatures(referenceHtml: string, clients = ALL_CLIENTS): Set<string> {
+  return new Set(check(referenceHtml, clients).map((f) => `${f.client}|${f.issue.title}`));
+}
+
+export function checkCompatibility(html: string, baseline: Set<string>, clients = ALL_CLIENTS): CompatReport {
+  const started = performance.now();
+  const regions = blockRegions(html);
+  const lines = lineOffsets(html);
+  const byKey = new Map<string, CompatIssue>();
+  for (const { client, issue } of check(html, clients)) {
+    const { location, inHtmlBlock } = locate(issue, regions, lines);
+    const source = inHtmlBlock || !baseline.has(`${client}|${issue.title}`) ? "template" : "elements";
+    const key = `${source}|${issue.title}`;
+    let entry = byKey.get(key);
+    if (!entry) {
+      entry = { feature: issue.title, url: FEATURE_URLS.get(issue.title), support: "partial", source, clients: [], locations: [] };
+      byKey.set(key, entry);
+    }
+    const support = issue.support === "none" ? "none" : "partial";
+    if (support === "none") entry.support = "none";
+    const existing = entry.clients.find((c) => c.client === client);
+    if (existing) {
+      if (support === "none") existing.support = "none";
+      for (const note of issue.notes) if (!existing.notes.includes(note)) existing.notes.push(note);
+    } else {
+      entry.clients.push({ client, label: clientLabel(client), support, notes: [...issue.notes] });
+    }
+    if (!entry.locations.some((l) => l.block === location.block && l.line === location.line)) entry.locations.push(location);
+  }
+  const issues = [...byKey.values()].sort(
+    (a, b) =>
+      (a.source === b.source ? 0 : a.source === "template" ? -1 : 1) ||
+      (a.support === b.support ? 0 : a.support === "none" ? -1 : 1) ||
+      b.clients.length - a.clients.length ||
+      a.feature.localeCompare(b.feature)
+  );
+  for (const issue of issues) issue.locations.sort((a, b) => (a.line ?? 0) - (b.line ?? 0));
+  return {
+    issues,
+    templateCount: issues.filter((i) => i.source === "template").length,
+    checkedClients: clients,
+    durationMs: Math.round(performance.now() - started),
+  };
+}
+
+const camel = (name: string) => name.replace(/-([a-z])/g, (_, c: string) => c.toUpperCase());
+
+/**
+ * What to look for in a template's source for a caniemail feature: its CSS
+ * property in both spellings (`background-image`, `backgroundImage`), a
+ * property:value pair's value (`display:flex` → `flex`), or an HTML element or
+ * attribute (`<body> element` → `<body`, `role attribute` → `role=`).
+ */
+export function featureTokens(feature: string): string[] {
+  const tokens = new Set<string>();
+  for (const part of feature.split(/,\s*/)) {
+    const element = /^<([a-z0-9-]+)>/i.exec(part);
+    const attribute = /^([a-z-]+) attribute$/i.exec(part);
+    if (element) tokens.add(`<${element[1]}`);
+    else if (attribute) tokens.add(`${attribute[1]}=`);
+    else {
+      const [property, value] = part.replace(/ (property|function|unit|values?)$/i, "").split(":").map((x) => x.trim());
+      if (/^[a-z-]+$/i.test(property) && property.length > 2) {
+        tokens.add(property);
+        tokens.add(camel(property));
+      }
+      if (value && /^[a-z-]+$/i.test(value)) tokens.add(value);
+      if (part.startsWith("@")) tokens.add(part.split(" ")[0]);
+    }
+  }
+  return [...tokens];
+}
+
+/** The 1-based lines of `source` that mention a feature (at most `limit`), skipping import lines. */
+export function sourceLines(feature: string, source: string, limit = 5): number[] {
+  const tokens = featureTokens(feature);
+  if (!tokens.length || !source) return [];
+  const escaped = tokens.map((t) => t.replace(/[.*+?^${}()|[\]\\]/g, "\\$&"));
+  const pattern = new RegExp(`(^|[^a-zA-Z0-9-])(${escaped.join("|")})(?![a-zA-Z0-9])`, "i");
+  const lines: number[] = [];
+  source.split(/\r?\n/).forEach((line, i) => {
+    if (lines.length < limit && !/^\s*(import|export \* from)\b/.test(line) && pattern.test(line)) lines.push(i + 1);
+  });
+  return lines;
+}
diff --git a/packages/preview/src/server/dev-server.ts b/packages/preview/src/server/dev-server.ts
new file mode 100644
index 00000000..c98d3bbb
--- /dev/null
+++ b/packages/preview/src/server/dev-server.ts
@@ -0,0 +1,200 @@
+/**
+ * The preview server: the preview app, an API that lists and renders the
+ * templates, live updates when a file changes, and the templates folder's
+ * `static/` files.
+ *
+ * It listens on localhost only and answers only requests addressed to
+ * localhost, so a web page can't reach it through another host name (DNS
+ * rebinding): it runs the project's code.
+ */
+
+import { createHash } from "node:crypto";
+import { existsSync, statSync } from "node:fs";
+import { readFile } from "node:fs/promises";
+import http, { type IncomingMessage, type ServerResponse } from "node:http";
+import { inside, json, listenFrom, readBody, requestAllowed, sendFile } from "./http.js";
+import path from "node:path";
+import { fileURLToPath } from "node:url";
+import { createChecks } from "./checks.js";
+import { discoverTemplates, resolveTemplatePath, type TemplateEntry } from "./discover.js";
+import { createLoader, readSource, type TemplateLoader } from "./loader.js";
+import { inspectProject, type ProjectInfo } from "./project.js";
+
+export interface DevServerOptions {
+  /** The templates folder. */
+  dir: string;
+  /** The port to listen on. When it's taken, the next free one is used unless `strictPort` is set. */
+  port?: number;
+  strictPort?: boolean;
+  /** Where the built preview app is (defaults to the one next to this file). */
+  uiDir?: string;
+  /** More Vite plugins for loading templates (see loadVitePlugins). */
+  plugins?: unknown[];
+  /** The Unlayer project the Editor view opens designs in (none: the editor's defaults). */
+  projectId?: number;
+}
+
+export interface DevServer {
+  url: string;
+  port: number;
+  project: ProjectInfo;
+  close(): Promise<void>;
+}
+
+export function defaultUiDir(): string {
+  return fileURLToPath(new URL("./ui/", import.meta.url));
+}
+
+export async function startDevServer(options: DevServerOptions): Promise<DevServer> {
+  const dir = path.resolve(options.dir);
+  if (!existsSync(dir) || !statSync(dir).isDirectory()) {
+    throw new Error(`The templates folder ${dir} doesn't exist. Point the preview at the folder with your templates: --dir ./emails`);
+  }
+  const uiDir = options.uiDir ?? defaultUiDir();
+  const project = inspectProject(dir);
+  const loader: TemplateLoader = await createLoader({ project, watch: true, plugins: options.plugins });
+  const checks = createChecks(loader, dir);
+
+  let templates: TemplateEntry[] = await discoverTemplates(dir);
+  const events = new Set<ServerResponse>();
+  const hashes = new Map<string, string>();
+
+  function broadcast(event: string, data: unknown): void {
+    const payload = `event: ${event}\ndata: ${JSON.stringify(data)}\n\n`;
+    for (const res of events) res.write(payload);
+  }
+
+  // Changes: forget loaded modules, list templates again when files in the folder come or go, and tell the app.
+  let pending: NodeJS.Timeout | undefined;
+  const changed = new Set<string>();
+  async function onFileEvent(event: string, file: string): Promise<void> {
+    if (event === "change") {
+      // Editors and macOS send several events for one save: skip those that didn't change the file.
+      const content = await readFile(file).catch(() => undefined);
+      const hash = content ? createHash("sha1").update(content).digest("hex") : "";
+      if (hashes.get(file) === hash) return;
+      hashes.set(file, hash);
+    } else if (event === "unlink") {
+      hashes.delete(file);
+    }
+    if (file.includes(`${path.sep}node_modules${path.sep}`)) checks.reset();
+    changed.add(file);
+    clearTimeout(pending);
+    pending = setTimeout(async () => {
+      const files = [...changed];
+      changed.clear();
+      loader.invalidate();
+      const inDir = files.filter((f) => f.startsWith(dir + path.sep));
+      if (inDir.length) templates = await discoverTemplates(dir);
+      broadcast("change", {
+        files: files.map((f) => path.relative(dir, f)),
+        templates,
+      });
+    }, 40);
+  }
+  loader.server.watcher.add(dir);
+  loader.server.watcher.on("all", (event, file) => {
+    void onFileEvent(event, path.resolve(file));
+  });
+
+  async function handleApi(req: IncomingMessage, res: ServerResponse, url: URL): Promise<void> {
+    if (url.pathname === "/api/meta") {
+      return json(res, 200, {
+        dir: path.relative(process.cwd(), dir) || ".",
+        root: project.root,
+        elementsVersion: project.elementsVersion,
+        reactVersion: project.reactVersion,
+        tailwind: project.tailwind,
+        warnings: project.warnings,
+        projectId: options.projectId,
+      });
+    }
+    if (url.pathname === "/api/templates") return json(res, 200, { templates });
+    if (url.pathname === "/api/events") {
+      res.writeHead(200, { "content-type": "text/event-stream", "cache-control": "no-store", connection: "keep-alive" });
+      res.write("retry: 1000\n\n");
+      events.add(res);
+      const keepAlive = setInterval(() => res.write(": keep-alive\n\n"), 20_000);
+      req.on("close", () => {
+        clearInterval(keepAlive);
+        events.delete(res);
+      });
+      return;
+    }
+    if ((url.pathname === "/api/render" || url.pathname === "/api/compat" || url.pathname === "/api/links") && req.method === "POST") {
+      let body: { path?: string; props?: unknown };
+      try {
+        body = (await readBody(req)) as typeof body;
+      } catch (error) {
+        return json(res, 400, { error: String((error as Error).message) });
+      }
+      const file = body.path ? resolveTemplatePath(dir, body.path) : undefined;
+      if (!file || !templates.some((t) => t.path === body.path)) return json(res, 404, { error: `No template ${body.path}` });
+      if (!project.canRender) return json(res, 200, { ok: false, logs: [], durationMs: 0, error: { message: project.warnings.join("\n"), phase: "load" } });
+      const result = await loader.render(file, { props: body.props });
+      if (url.pathname === "/api/render") {
+        return json(res, 200, { ...result, source: await readSource(file) });
+      }
+      if (!result.ok) return json(res, 200, { applicable: false, reason: "The template doesn't render." });
+      if (url.pathname === "/api/links") return json(res, 200, await checks.links(result));
+      return json(res, 200, await checks.compat(result, await readSource(file)));
+    }
+    return json(res, 404, { error: "Not found" });
+  }
+
+  const server = http.createServer(async (req, res) => {
+    try {
+      if (!requestAllowed(req)) {
+        res.writeHead(403, { "content-type": "text/plain" });
+        return res.end("The preview server only answers requests from localhost.");
+      }
+      const url = new URL(req.url ?? "/", "http://localhost");
+      if (url.pathname.startsWith("/api/")) return await handleApi(req, res, url);
+      if (req.method !== "GET" && req.method !== "HEAD") {
+        res.writeHead(405);
+        return res.end();
+      }
+      // The templates folder's static/ files, as React Email's preview serves them: <img src="/static/logo.png">.
+      if (url.pathname.startsWith("/static/")) {
+        const file = inside(path.join(dir, "static"), decodeURIComponent(url.pathname.slice("/static/".length)));
+        if (file && (await sendFile(res, file))) return;
+        res.writeHead(404, { "content-type": "text/plain" });
+        return res.end("Not found");
+      }
+      const asset = url.pathname !== "/" ? inside(uiDir, decodeURIComponent(url.pathname.slice(1))) : undefined;
+      if (asset && (await sendFile(res, asset))) return;
+      // Anything else is a page of the app (/preview/<template>).
+      if (await sendFile(res, path.join(uiDir, "index.html"))) return;
+      res.writeHead(500, { "content-type": "text/plain" });
+      res.end("The preview app isn't built. Run the package's build first.");
+    } catch (error) {
+      if (!res.headersSent) json(res, 500, { error: String((error as Error)?.message ?? error) });
+      else res.end();
+    }
+  });
+
+  let port: number;
+  try {
+    port = await listenFrom(server, options.port ?? 3000, options.strictPort ?? false);
+  } catch (error) {
+    // Close the loader too, or its file watcher keeps the process alive.
+    await loader.close();
+    throw error;
+  }
+
+  return {
+    url: `http://localhost:${port}`,
+    port,
+    project,
+    async close() {
+      clearTimeout(pending);
+      for (const res of events) res.end();
+      events.clear();
+      const closed = new Promise<void>((resolve) => server.close(() => resolve()));
+      server.closeAllConnections();
+      await closed;
+      await loader.close();
+    },
+  };
+}
+
diff --git a/packages/preview/src/server/discover.ts b/packages/preview/src/server/discover.ts
new file mode 100644
index 00000000..3c65d1f8
--- /dev/null
+++ b/packages/preview/src/server/discover.ts
@@ -0,0 +1,119 @@
+/**
+ * Which files in the templates folder are templates. The same rules as React
+ * Email's preview, so a folder moved from it lists the same templates:
+ *
+ * - `.js`, `.jsx` and `.tsx` files with an `export default`;
+ * - folders whose name starts with `_` are skipped (`_components`), as are
+ *   `static/` (files the preview serves), `node_modules` and dot folders.
+ */
+
+import { readdir, readFile } from "node:fs/promises";
+import path from "node:path";
+
+export const TEMPLATE_EXTENSIONS = new Set([".js", ".jsx", ".tsx"]);
+const EXPORT_DEFAULT = /\bexport\s+default\b/;
+
+export interface TemplateEntry {
+  /** Path relative to the templates folder, with `/` separators: `onboarding/welcome.tsx`. */
+  path: string;
+  /** File name without its extension: `welcome`. */
+  name: string;
+}
+
+function skipFolder(name: string): boolean {
+  return name.startsWith("_") || name.startsWith(".") || name === "node_modules" || name === "static";
+}
+
+/** Whether `source` is a template's source (has an `export default`). */
+export function isTemplateSource(source: string): boolean {
+  return EXPORT_DEFAULT.test(source);
+}
+
+/** Whether a file at `relative` (to the templates folder) could be a template, by its name and folders alone. */
+export function isTemplatePath(relative: string): boolean {
+  const parts = relative.split(/[\\/]/);
+  if (parts.slice(0, -1).some(skipFolder)) return false;
+  return TEMPLATE_EXTENSIONS.has(path.extname(relative));
+}
+
+/** The templates in `dir`, sorted by path. */
+export async function discoverTemplates(dir: string): Promise<TemplateEntry[]> {
+  const found: TemplateEntry[] = [];
+  async function walk(folder: string, prefix: string): Promise<void> {
+    let entries;
+    try {
+      entries = await readdir(folder, { withFileTypes: true });
+    } catch {
+      return;
+    }
+    for (const entry of entries) {
+      const relative = prefix ? `${prefix}/${entry.name}` : entry.name;
+      if (entry.isDirectory()) {
+        if (!skipFolder(entry.name)) await walk(path.join(folder, entry.name), relative);
+        continue;
+      }
+      if (!entry.isFile() || !TEMPLATE_EXTENSIONS.has(path.extname(entry.name))) continue;
+      const source = await readFile(path.join(folder, entry.name), "utf8").catch(() => "");
+      if (!isTemplateSource(source)) continue;
+      found.push({ path: relative, name: entry.name.slice(0, -path.extname(entry.name).length) });
+    }
+  }
+  await walk(dir, "");
+  return found.sort((a, b) => a.path.localeCompare(b.path));
+}
+
+/**
+ * The absolute file for a template path from a request, or undefined when it
+ * isn't inside the templates folder (`../`, absolute paths, skipped folders).
+ */
+export function resolveTemplatePath(dir: string, relative: string): string | undefined {
+  if (typeof relative !== "string" || relative === "" || relative.includes("\0")) return undefined;
+  if (path.isAbsolute(relative) || !isTemplatePath(relative)) return undefined;
+  const file = path.resolve(dir, relative);
+  const root = path.resolve(dir) + path.sep;
+  return file.startsWith(root) ? file : undefined;
+}
+
+export interface TemplateSelection {
+  selected: TemplateEntry[];
+  /** What was asked for that names no template. */
+  unknown: string[];
+}
+
+/**
+ * The templates the command line names: paths relative to the templates folder
+ * (`welcome.tsx`) or to the working directory (`emails/welcome.tsx`), with or
+ * without the extension, or folders of templates (`billing`). Nothing named:
+ * every template. They stay in the folder's order.
+ */
+export function selectTemplates(dir: string, requested: string[], templates: TemplateEntry[], cwd = process.cwd()): TemplateSelection {
+  if (!requested.length) return { selected: templates, unknown: [] };
+  const root = path.resolve(dir);
+  const chosen = new Set<string>();
+  const unknown: string[] = [];
+  for (const arg of requested) {
+    let hits: TemplateEntry[] = [];
+    for (const file of [path.resolve(root, arg), path.resolve(cwd, arg)]) {
+      const relative = path.relative(root, file).split(path.sep).join("/");
+      if (relative.startsWith("..") || path.isAbsolute(relative)) continue;
+      hits =
+        relative === ""
+          ? templates
+          : templates.filter((t) => t.path === relative || t.path.startsWith(`${relative}/`) || t.path.slice(0, -path.extname(t.path).length) === relative);
+      if (hits.length) break;
+    }
+    if (hits.length) for (const t of hits) chosen.add(t.path);
+    else unknown.push(arg);
+  }
+  return { selected: templates.filter((t) => chosen.has(t.path)), unknown };
+}
+
+/** What to say when the command line names templates that aren't there. */
+export function unknownTemplatesMessage(unknown: string[], dirShown: string, templates: TemplateEntry[]): string {
+  const names = templates.map((t) => t.path);
+  const listed = names.length > 8 ? `${names.slice(0, 8).join(", ")} and ${names.length - 8} more` : names.join(", ");
+  return [
+    `No template ${unknown.join(", ")} in ${dirShown}. Name templates by their path in the templates folder (or from here), or a folder of them.`,
+    names.length ? `Its templates: ${listed}` : `It has no templates: they're .tsx, .jsx or .js files with an export default.`,
+  ].join("\n");
+}
diff --git a/packages/preview/src/server/errors.ts b/packages/preview/src/server/errors.ts
new file mode 100644
index 00000000..1cbf5798
--- /dev/null
+++ b/packages/preview/src/server/errors.ts
@@ -0,0 +1,124 @@
+/**
+ * Errors from loading or rendering a template, as the preview shows them: a
+ * message, the file, line and column it points at, and the lines around it.
+ */
+
+import { readFileSync } from "node:fs";
+import path from "node:path";
+import { fileURLToPath } from "node:url";
+
+export interface TemplateError {
+  message: string;
+  /** Path relative to the project root. */
+  file?: string;
+  line?: number;
+  column?: number;
+  /** The source lines around the error, with a marker under the column. */
+  frame?: string;
+  stack?: string;
+  /** Whether loading the module failed (a syntax or import error) rather than rendering it. */
+  phase: "load" | "render";
+}
+
+// eslint-disable-next-line no-control-regex
+const ANSI = /\u001b\[[0-9;]*[A-Za-z]/g;
+
+export function stripAnsi(text: string): string {
+  return text.replace(ANSI, "");
+}
+
+function toPath(file: string): string {
+  return file.startsWith("file://") ? fileURLToPath(file) : file;
+}
+
+/** The lines around `line` (1-based) of `file`, with a `^` under `column` (1-based). */
+export function codeFrame(file: string, line: number, column?: number): string | undefined {
+  let source: string;
+  try {
+    source = readFileSync(file, "utf8");
+  } catch {
+    return undefined;
+  }
+  const lines = source.split(/\r?\n/);
+  const start = Math.max(1, line - 3);
+  const end = Math.min(lines.length, line + 2);
+  const width = String(end).length;
+  const out: string[] = [];
+  for (let n = start; n <= end; n++) {
+    out.push(`${n === line ? ">" : " "} ${String(n).padStart(width)} | ${lines[n - 1]}`);
+    if (n === line && column && column > 0) out.push(`  ${" ".repeat(width)} | ${" ".repeat(column - 1)}^`);
+  }
+  return out.join("\n");
+}
+
+/** The first stack frame in the project's own files (not node_modules, not the preview). */
+function projectFrame(stack: string, root: string): { file: string; line: number; column: number } | undefined {
+  for (const match of stack.matchAll(/\(?((?:file:\/\/)?\/[^():\s]+|[A-Za-z]:\\[^():]+):(\d+):(\d+)\)?/g)) {
+    const file = toPath(match[1]);
+    if (!file.startsWith(root + path.sep) || file.includes(`${path.sep}node_modules${path.sep}`)) continue;
+    return { file, line: Number(match[2]), column: Number(match[3]) };
+  }
+  return undefined;
+}
+
+/**
+ * A syntax error as Vite's compiler (Oxc) writes it: "Transform failed with 1
+ * error:", then "[PARSE_ERROR] Expected …" and a drawing of the lines that
+ * starts with ╭─[ emails/welcome.tsx:15:37 ] (the path relative to the root).
+ */
+const OXC_ERROR = /\[([A-Z_]+)\]\s*([^\n]+)\n(\s*╭─\[\s*([^\]]+?):(\d+):(\d+)\s*\][\s\S]*?)(?=\n\s*\n\[[A-Z_]+\]|\n*$)/;
+
+export function formatError(error: unknown, root: string, phase: TemplateError["phase"]): TemplateError {
+  const err = (error ?? {}) as { message?: unknown; stack?: unknown; loc?: { file?: string; line?: number; column?: number }; id?: string; frame?: string };
+  const message = stripAnsi(String(err.message ?? error)).trim();
+  const stack = typeof err.stack === "string" ? stripAnsi(err.stack) : undefined;
+  let file: string | undefined;
+  let line: number | undefined;
+  let column: number | undefined;
+  const oxc = OXC_ERROR.exec(message);
+  if (oxc) {
+    return {
+      message: oxc[2].trim(),
+      // Oxc writes the path relative to the working directory.
+      file: path.relative(root, path.resolve(oxc[4])) || oxc[4],
+      line: Number(oxc[5]),
+      column: Number(oxc[6]),
+      frame: oxc[3].replace(/^\n+|\s+$/g, ""),
+      stack,
+      phase,
+    };
+  }
+  if (err.loc?.line) {
+    file = toPath(err.loc.file ?? err.id ?? "");
+    line = err.loc.line;
+    // Vite reports 0-based columns for transform errors.
+    column = (err.loc.column ?? 0) + 1;
+  } else {
+    const fromMessage = /(?:^|[\s(])((?:\/|[A-Za-z]:\\)[^\s:()]+\.(?:tsx|jsx|ts|js|mjs)):(\d+):(\d+)/.exec(message);
+    // Elements wraps an error a template throws; the original (its cause) has the template's line.
+    const causeStack = (err as { cause?: { stack?: unknown } }).cause?.stack;
+    const found = fromMessage
+      ? { file: fromMessage[1], line: Number(fromMessage[2]), column: Number(fromMessage[3]) }
+      : (typeof causeStack === "string" ? projectFrame(stripAnsi(causeStack), root) : undefined) ?? (stack ? projectFrame(stack, root) : undefined);
+    if (found) ({ file, line, column } = found);
+  }
+  const frame = file && line ? (err.frame ? stripAnsi(err.frame) : codeFrame(file, line, column)) : undefined;
+  return {
+    message,
+    file: file ? path.relative(root, file) || file : undefined,
+    line,
+    column,
+    frame,
+    stack,
+    phase,
+  };
+}
+
+/**
+ * A command that can't run as asked: a folder or template that isn't there, a
+ * project without Elements, no browser for screenshots. The commands exit
+ * with 2 for these, and 1 for what they found.
+ */
+export class UsageError extends Error {
+  override name = "UsageError";
+}
diff --git a/packages/preview/src/server/export.ts b/packages/preview/src/server/export.ts
new file mode 100644
index 00000000..d8fa44b3
--- /dev/null
+++ b/packages/preview/src/server/export.ts
@@ -0,0 +1,102 @@
+/**
+ * Renders every template to a file: `out/onboarding/welcome.html` for
+ * `emails/onboarding/welcome.tsx`, with its `PreviewProps`. For backends that
+ * can't run JavaScript, or platforms that only take HTML; when your code can
+ * call Elements, render at send time with the real data instead.
+ */
+
+import { cp, mkdir, writeFile } from "node:fs/promises";
+import { existsSync, statSync } from "node:fs";
+import path from "node:path";
+import { discoverTemplates } from "./discover.js";
+import { createLoader } from "./loader.js";
+import { inspectProject } from "./project.js";
+import type { TemplateError } from "./errors.js";
+
+export interface ExportOptions {
+  /** The templates folder. */
+  dir: string;
+  /** Where to write the files. Existing files with the same names are replaced; nothing else is deleted. Default: `out`. */
+  outDir?: string;
+  /** Format the HTML for reading (Prettier). */
+  pretty?: boolean;
+  /** Write plain text instead of HTML. */
+  plainText?: boolean;
+  /** Also write each template's design JSON (`<name>.design.json`), which the Unlayer builder opens with `loadDesign()`. */
+  design?: boolean;
+  /** The extension of the files written, without the dot: `html` (default), `txt` with plainText, or e.g. `blade.php`. */
+  extension?: string;
+  /** More Vite plugins for loading templates (see loadVitePlugins). */
+  plugins?: unknown[];
+}
+
+export interface ExportedTemplate {
+  template: string;
+  files: string[];
+  error?: TemplateError;
+  warnings: string[];
+}
+
+export interface ExportResult {
+  outDir: string;
+  templates: ExportedTemplate[];
+  failed: number;
+}
+
+async function prettyHtml(html: string): Promise<string> {
+  const prettier = await import("prettier");
+  return prettier.format(html, { parser: "html", printWidth: 120, htmlWhitespaceSensitivity: "ignore" });
+}
+
+export async function exportTemplates(options: ExportOptions): Promise<ExportResult> {
+  const dir = path.resolve(options.dir);
+  if (!existsSync(dir) || !statSync(dir).isDirectory()) {
+    throw new Error(`The templates folder ${dir} doesn't exist. Point the export at the folder with your templates: --dir ./emails`);
+  }
+  const outDir = path.resolve(options.outDir ?? "out");
+  if (dir === outDir || dir.startsWith(outDir + path.sep)) {
+    throw new Error(`The output folder ${outDir} holds the templates. Pick another one: --outDir out`);
+  }
+  const project = inspectProject(dir);
+  if (!project.canRender) throw new Error(project.warnings.join("\n"));
+  const extension = (options.extension ?? (options.plainText ? "txt" : "html")).replace(/^\./, "");
+  const templates = await discoverTemplates(dir);
+  const loader = await createLoader({ project, watch: false, plugins: options.plugins });
+  const results: ExportedTemplate[] = [];
+  try {
+    await mkdir(outDir, { recursive: true });
+    for (const template of templates) {
+      const result = await loader.render(path.join(dir, template.path));
+      const warnings = result.logs.filter((log) => log.level === "error" || log.level === "warn").map((log) => log.message);
+      if (!result.ok) {
+        results.push({ template: template.path, files: [], error: result.error, warnings });
+        continue;
+      }
+      const base = template.path.slice(0, -path.extname(template.path).length);
+      const files: string[] = [];
+      const write = async (relative: string, content: string) => {
+        const file = path.join(outDir, relative);
+        await mkdir(path.dirname(file), { recursive: true });
+        await writeFile(file, content);
+        const shown = path.relative(process.cwd(), file);
+        files.push(shown.startsWith("..") ? file : shown);
+      };
+      if (options.plainText) {
+        await write(`${base}.${extension}`, result.text);
+      } else {
+        await write(`${base}.${extension}`, options.pretty ? await prettyHtml(result.html) : result.html);
+      }
+      if (options.design) {
+        if (result.json) await write(`${base}.design.json`, `${JSON.stringify(result.json, null, 2)}\n`);
+        else if (result.jsonError) warnings.push(`No design JSON: ${result.jsonError}`);
+      }
+      results.push({ template: template.path, files, warnings });
+    }
+    // Images and other files the templates use, at the same /static/ path as in the preview.
+    const staticDir = path.join(dir, "static");
+    if (existsSync(staticDir)) await cp(staticDir, path.join(outDir, "static"), { recursive: true });
+  } finally {
+    await loader.close();
+  }
+  return { outDir, templates: results, failed: results.filter((r) => r.error).length };
+}
diff --git a/packages/preview/src/server/http.ts b/packages/preview/src/server/http.ts
new file mode 100644
index 00000000..267e5243
--- /dev/null
+++ b/packages/preview/src/server/http.ts
@@ -0,0 +1,117 @@
+/** HTTP helpers the preview servers share: file types, files inside a folder, and localhost-only requests. */
+
+import { statSync } from "node:fs";
+import { readFile } from "node:fs/promises";
+import type { IncomingMessage, Server, ServerResponse } from "node:http";
+import path from "node:path";
+
+export const MIME: Record<string, string> = {
+  ".html": "text/html; charset=utf-8",
+  ".js": "text/javascript; charset=utf-8",
+  ".mjs": "text/javascript; charset=utf-8",
+  ".css": "text/css; charset=utf-8",
+  ".json": "application/json; charset=utf-8",
+  ".svg": "image/svg+xml",
+  ".png": "image/png",
+  ".jpg": "image/jpeg",
+  ".jpeg": "image/jpeg",
+  ".gif": "image/gif",
+  ".webp": "image/webp",
+  ".avif": "image/avif",
+  ".ico": "image/x-icon",
+  ".woff": "font/woff",
+  ".woff2": "font/woff2",
+  ".ttf": "font/ttf",
+  ".otf": "font/otf",
+  ".mp4": "video/mp4",
+  ".webm": "video/webm",
+  ".pdf": "application/pdf",
+  ".txt": "text/plain; charset=utf-8",
+};
+
+export const LOCAL_HOSTS = new Set(["localhost", "127.0.0.1", "[::1]", "::1"]);
+
+export function json(res: ServerResponse, status: number, body: unknown): void {
+  res.writeHead(status, { "content-type": "application/json; charset=utf-8", "cache-control": "no-store" });
+  res.end(JSON.stringify(body));
+}
+
+/** A file inside `root`, or undefined for paths that leave it. */
+export function inside(root: string, relative: string): string | undefined {
+  const file = path.resolve(root, `.${path.sep}${relative}`);
+  return file.startsWith(path.resolve(root) + path.sep) ? file : undefined;
+}
+
+export async function sendFile(res: ServerResponse, file: string): Promise<boolean> {
+  try {
+    if (!statSync(file).isFile()) return false;
+    const body = await readFile(file);
+    res.writeHead(200, { "content-type": MIME[path.extname(file).toLowerCase()] ?? "application/octet-stream", "cache-control": "no-store" });
+    res.end(body);
+    return true;
+  } catch {
+    return false;
+  }
+}
+
+export async function readBody(req: IncomingMessage, limit = 2_000_000): Promise<unknown> {
+  const chunks: Buffer[] = [];
+  let size = 0;
+  for await (const chunk of req) {
+    size += (chunk as Buffer).length;
+    if (size > limit) throw new Error("Request body too large");
+    chunks.push(chunk as Buffer);
+  }
+  const text = Buffer.concat(chunks).toString("utf8");
+  return text ? JSON.parse(text) : {};
+}
+
+function hostName(host: string): string {
+  return (host.startsWith("[") ? host.slice(0, host.indexOf("]") + 1) : host.split(":")[0]).toLowerCase();
+}
+
+/**
+ * Whether a request is addressed to localhost (Host) and, when a browser sends
+ * one, comes from a localhost page (Origin): other web pages can't use the API.
+ */
+export function requestAllowed(req: IncomingMessage): boolean {
+  const host = req.headers.host;
+  if (!host || !LOCAL_HOSTS.has(hostName(host))) return false;
+  const origin = req.headers.origin;
+  if (origin === undefined) return true;
+  try {
+    // An opaque origin ("null") throws here, and is refused.
+    return LOCAL_HOSTS.has(hostName(new URL(origin).host));
+  } catch {
+    return false;
+  }
+}
+
+function listen(server: Server, port: number): Promise<number> {
+  return new Promise((resolve, reject) => {
+    const onError = (error: Error) => {
+      server.off("listening", onListening);
+      reject(error);
+    };
+    const onListening = () => {
+      server.off("error", onError);
+      resolve((server.address() as { port: number }).port);
+    };
+    server.once("error", onError);
+    server.once("listening", onListening);
+    server.listen(port, "localhost");
+  });
+}
+
+/** Listens on `first`, or (unless `strict`) the next free port after it; resolves with the port. */
+export async function listenFrom(server: Server, first: number, strict: boolean): Promise<number> {
+  for (let attempt = 0; ; attempt++) {
+    try {
+      return await listen(server, first + attempt);
+    } catch (error) {
+      const code = (error as NodeJS.ErrnoException).code;
+      if (code === "EADDRINUSE" && !strict && first !== 0 && attempt < 20) continue;
+      throw code === "EADDRINUSE" ? new Error(`Port ${first + attempt} is in use. Pick another one: --port ${first + attempt + 1}`) : error;
+    }
+  }
+}
diff --git a/packages/preview/src/server/links.ts b/packages/preview/src/server/links.ts
new file mode 100644
index 00000000..70abcd69
--- /dev/null
+++ b/packages/preview/src/server/links.ts
@@ -0,0 +1,268 @@
+/**
+ * Checks the links and images in a rendered email: what's wrong in the HTML
+ * itself (a link that goes nowhere, a relative URL, an image without alt text,
+ * a size Gmail clips) and, unless asked not to, whether each URL answers.
+ */
+
+import { existsSync, statSync } from "node:fs";
+import path from "node:path";
+import { Parser } from "htmlparser2";
+
+export type FindingLevel = "error" | "warning" | "info";
+
+export interface LinkFinding {
+  kind: "link" | "image" | "email";
+  level: FindingLevel;
+  /** The link or image URL (empty for the email as a whole). */
+  url: string;
+  message: string;
+  /** The Elements block it's in: "Button 1", "Image 2". */
+  block?: string;
+  /** The link's text or the image's alt text. */
+  label?: string;
+  status?: number;
+}
+
+export interface LinkReport {
+  findings: LinkFinding[];
+  links: number;
+  images: number;
+  /** Whether URLs were requested (false: only the HTML was checked). */
+  network: boolean;
+  durationMs: number;
+}
+
+export interface LinkCheckOptions {
+  /** The templates folder, to check /static/ files. */
+  dir: string;
+  /** Request each URL (default true). */
+  network?: boolean;
+  timeoutMs?: number;
+  fetch?: typeof fetch;
+}
+
+/** Gmail clips messages whose HTML is larger than this, hiding the rest behind "View entire message". */
+export const GMAIL_CLIP_BYTES = 102 * 1024;
+const LARGE_IMAGE_BYTES = 1024 * 1024;
+
+const BLOCK_ID = /^u_(content_([a-z]+)|column|row)_(\d+)$/;
+
+interface Found {
+  kind: "link" | "image";
+  url: string;
+  block?: string;
+  label?: string;
+  alt?: string | null;
+  width?: string;
+  height?: string;
+}
+
+function blockName(id: RegExpExecArray): string {
+  const kind = id[2] ?? id[1];
+  const names: Record<string, string> = { text: "Paragraph", column: "Column", row: "Row" };
+  return `${names[kind] ?? kind.charAt(0).toUpperCase() + kind.slice(1)} ${id[3]}`;
+}
+
+/** Every link and image in the HTML, with the block it's in. Conditional comments (Outlook-only copies) are skipped. */
+export function extractLinks(html: string): Found[] {
+  const found: Found[] = [];
+  const blocks: Array<{ name: string; label: string }> = [];
+  let link: Found | undefined;
+  let linkDepth = 0;
+  const parser = new Parser(
+    {
+      onopentag(name, attributes) {
+        const id = attributes.id ? BLOCK_ID.exec(attributes.id) : null;
+        blocks.push({ name, label: id ? blockName(id) : blocks[blocks.length - 1]?.label ?? "" });
+        const block = blocks[blocks.length - 1].label || undefined;
+        if (name === "a" && attributes.href !== undefined) {
+          link = { kind: "link", url: attributes.href.trim(), block, label: "" };
+          linkDepth = blocks.length;
+          found.push(link);
+        } else if (name === "a") {
+          found.push({ kind: "link", url: "", block, label: "" });
+        }
+        if (name === "img") {
+          found.push({ kind: "image", url: (attributes.src ?? "").trim(), block, alt: attributes.alt ?? null, width: attributes.width, height: attributes.height });
+        }
+      },
+      ontext(text) {
+        if (link) link.label = `${link.label ?? ""}${text}`.replace(/\s+/g, " ");
+      },
+      onclosetag(name) {
+        if (name === "a" && link && blocks.length === linkDepth) link = undefined;
+        blocks.pop();
+      },
+    },
+    { decodeEntities: true }
+  );
+  parser.write(html);
+  parser.end();
+  for (const f of found) f.label = f.label?.trim() || undefined;
+  return found;
+}
+
+const PRIVATE_HOST = /^(localhost|127\.\d+\.\d+\.\d+|0\.0\.0\.0|\[::1\]|10\.\d+\.\d+\.\d+|192\.168\.\d+\.\d+|172\.(1[6-9]|2\d|3[01])\.\d+\.\d+|[^.]+\.local)$/i;
+
+/** Hosts reserved for examples (RFC 2606, RFC 6761): a template's placeholder, not a link to check. */
+const PLACEHOLDER_HOST = /(^|\.)(example\.(com|net|org)|[^.]+\.(example|test|invalid))$/i;
+
+export function isPlaceholderUrl(url: string): boolean {
+  try {
+    return PLACEHOLDER_HOST.test(new URL(url).hostname);
+  } catch {
+    return false;
+  }
+}
+
+/** What's wrong with a URL from the HTML alone. */
+function staticFindings(item: Found, dir: string): LinkFinding[] {
+  const base = { kind: item.kind, url: item.url, block: item.block, label: item.kind === "image" ? item.alt ?? undefined : item.label };
+  const out: LinkFinding[] = [];
+  const url = item.url;
+  // Merge tags and placeholders an email service fills in ({{url}}, *|UNSUB|*, %recipient.url%).
+  if (/\{\{|\}\}|\*\||\|\*|%[a-z_.]+%|\[\[/i.test(url)) {
+    return [{ ...base, level: "info", message: "A merge tag: filled in when the email is sent, so not checked." }];
+  }
+  // Not requested (see checkLinks), but still checked for what the HTML alone shows.
+  if (isPlaceholderUrl(url)) {
+    out.push({ ...base, level: "warning", message: "A placeholder address (reserved for examples): replace it with the real URL before you send." });
+  }
+  if (item.kind === "link") {
+    if (url === "" || url === "#") return [{ ...base, level: "error", message: "This link goes nowhere: give it a URL." }];
+    if (/^javascript:/i.test(url)) return [{ ...base, level: "error", message: "Email clients don't run javascript: links." }];
+    if (/^mailto:/i.test(url)) {
+      if (!/^mailto:[^@\s]+@[^@\s]+\.[^@\s]+/i.test(url)) out.push({ ...base, level: "error", message: "This mailto: link has no valid address." });
+      return out;
+    }
+    if (/^(tel|sms):/i.test(url)) return out;
+  } else {
+    if (url === "") return [{ ...base, level: "error", message: "This image has no src." }];
+    if (/^data:/i.test(url)) out.push({ ...base, level: "warning", message: "Images embedded as data: URLs are blocked by Gmail and Outlook.com: host the image and link it." });
+    if (/\.svg(\?|#|$)/i.test(url) || /^data:image\/svg/i.test(url)) out.push({ ...base, level: "warning", message: "Gmail and Outlook don't show SVG images: use PNG or JPEG." });
+    if (item.alt === null || item.alt === undefined) {
+      out.push({ ...base, level: "warning", message: "No alt text: it's what readers see while images are blocked, and what screen readers read." });
+    } else if (item.alt.trim() === "") {
+      // Elements writes alt="" for an Image without alt, so this is how a missing one shows up.
+      out.push({ ...base, level: "info", message: "Empty alt text: right for a decorative image. Otherwise describe it (alt=\"…\"): it's what readers see while images are blocked." });
+    }
+    if (url.startsWith("/static/")) {
+      const file = path.join(dir, "static", decodeURIComponent(url.slice("/static/".length).split(/[?#]/)[0]));
+      if (!existsSync(file)) out.push({ ...base, level: "error", message: `There's no ${path.join("static", url.slice("/static/".length))} in the templates folder.` });
+      else {
+        const size = statSync(file).size;
+        if (size > LARGE_IMAGE_BYTES) out.push({ ...base, level: "warning", message: `A large image (${(size / 1024 / 1024).toFixed(1)} MB): it loads slowly on phones.` });
+      }
+      out.push({ ...base, level: "info", message: "Only the preview serves /static/ files: host the image and use its full URL in the emails you send." });
+      return out;
+    }
+  }
+  if (/^data:/i.test(url)) return out;
+  if (!/^[a-z][a-z0-9+.-]*:/i.test(url)) {
+    out.push({ ...base, level: "error", message: "A relative URL: email has no page to resolve it against. Use a full URL (https://…)." });
+    return out;
+  }
+  let parsed: URL;
+  try {
+    parsed = new URL(url);
+  } catch {
+    return [...out, { ...base, level: "error", message: "This URL isn't valid." }];
+  }
+  if (PRIVATE_HOST.test(parsed.hostname)) out.push({ ...base, level: "error", message: `It points to ${parsed.hostname}, which readers can't reach.` });
+  else if (parsed.protocol === "http:") out.push({ ...base, level: "warning", message: "Not HTTPS: some clients warn about it or block the image." });
+  return out;
+}
+
+interface UrlResult {
+  status?: number;
+  contentType?: string;
+  size?: number;
+  finalUrl?: string;
+  error?: string;
+}
+
+async function request(url: string, doFetch: typeof fetch, timeoutMs: number): Promise<UrlResult> {
+  const attempt = async (method: "HEAD" | "GET"): Promise<Response> => {
+    const controller = new AbortController();
+    const timer = setTimeout(() => controller.abort(), timeoutMs);
+    try {
+      return await doFetch(url, { method, redirect: "follow", signal: controller.signal, headers: { "user-agent": "elements-preview link check" } });
+    } finally {
+      clearTimeout(timer);
+    }
+  };
+  try {
+    let res = await attempt("HEAD");
+    // Some servers don't answer HEAD: ask for the page itself.
+    if (res.status === 405 || res.status === 501 || res.status === 403) res = await attempt("GET");
+    const length = res.headers.get("content-length");
+    // A GET's body isn't needed.
+    await res.body?.cancel().catch(() => undefined);
+    return { status: res.status, contentType: res.headers.get("content-type") ?? undefined, size: length ? Number(length) : undefined, finalUrl: res.url };
+  } catch (error) {
+    const err = error as Error & { cause?: { code?: string } };
+    if (err.name === "AbortError") return { error: `No answer in ${timeoutMs / 1000} seconds.` };
+    return { error: err.cause?.code === "ENOTFOUND" ? "The host doesn't exist." : `Couldn't connect (${err.cause?.code ?? err.message}).` };
+  }
+}
+
+/** Runs `fn` on each item, at most `limit` at a time. */
+async function eachLimited<T>(items: T[], limit: number, fn: (item: T) => Promise<void>): Promise<void> {
+  let next = 0;
+  await Promise.all(
+    Array.from({ length: Math.min(limit, items.length) }, async () => {
+      while (next < items.length) await fn(items[next++]);
+    })
+  );
+}
+
+export async function checkLinks(html: string, options: LinkCheckOptions): Promise<LinkReport> {
+  const started = performance.now();
+  const items = extractLinks(html);
+  const findings: LinkFinding[] = [];
+  const bytes = Buffer.byteLength(html, "utf8");
+  if (bytes > GMAIL_CLIP_BYTES) {
+    findings.push({
+      kind: "email",
+      level: "warning",
+      url: "",
+      message: `The HTML is ${(bytes / 1024).toFixed(0)} KB: Gmail clips emails over 102 KB, hiding the rest (often the unsubscribe link) behind "View entire message".`,
+    });
+  }
+  const toRequest = new Map<string, Found[]>();
+  for (const item of items) {
+    const found = staticFindings(item, options.dir);
+    findings.push(...found);
+    const skip = found.some((f) => f.level === "error" || f.level === "info") || isPlaceholderUrl(item.url);
+    if (!skip && /^https?:/i.test(item.url)) toRequest.set(item.url, [...(toRequest.get(item.url) ?? []), item]);
+  }
+  const network = options.network !== false;
+  if (network) {
+    const doFetch = options.fetch ?? fetch;
+    await eachLimited([...toRequest.keys()], 8, async (url) => {
+      const result = await request(url, doFetch, options.timeoutMs ?? 6000);
+      for (const item of toRequest.get(url)!) {
+        const base = { kind: item.kind, url, block: item.block, label: item.kind === "image" ? item.alt ?? undefined : item.label, status: result.status };
+        if (result.error) findings.push({ ...base, level: "error", message: result.error });
+        else if (result.status !== undefined && result.status >= 400) findings.push({ ...base, level: "error", message: `It answers ${result.status}.` });
+        else if (item.kind === "image" && result.contentType && !result.contentType.startsWith("image/")) {
+          findings.push({ ...base, level: "error", message: `It isn't an image (${result.contentType.split(";")[0]}).` });
+        } else if (item.kind === "image" && result.size !== undefined && result.size > LARGE_IMAGE_BYTES) {
+          findings.push({ ...base, level: "warning", message: `A large image (${(result.size / 1024 / 1024).toFixed(1)} MB): it loads slowly on phones.` });
+        }
+        if (result.finalUrl && result.finalUrl !== url && !result.error && (result.status ?? 0) < 400) {
+          findings.push({ ...base, level: "info", message: `It redirects to ${result.finalUrl}.` });
+        }
+      }
+    });
+  }
+  const order: Record<FindingLevel, number> = { error: 0, warning: 1, info: 2 };
+  findings.sort((a, b) => order[a.level] - order[b.level]);
+  return {
+    findings,
+    links: items.filter((i) => i.kind === "link").length,
+    images: items.filter((i) => i.kind === "image").length,
+    network,
+    durationMs: Math.round(performance.now() - started),
+  };
+}
diff --git a/packages/preview/src/server/loader.ts b/packages/preview/src/server/loader.ts
new file mode 100644
index 00000000..763858d9
--- /dev/null
+++ b/packages/preview/src/server/loader.ts
@@ -0,0 +1,307 @@
+/**
+ * Loads templates and renders them with the project's own Elements and React.
+ *
+ * Templates are loaded through Vite's SSR module loader with the project as its
+ * root: TypeScript, JSX, tsconfig path aliases and imports of the project's
+ * other files work as in the project, and packages (React, Elements) are loaded
+ * from the project's node_modules. A virtual module re-exports the renderers
+ * from the project's Elements, so the preview renders with exactly the
+ * Elements and React the project sends with, never copies of its own.
+ */
+
+import { createServer, transformWithOxc, type Plugin, type ViteDevServer } from "vite";
+import { readFile } from "node:fs/promises";
+import path from "node:path";
+import { formatError, type TemplateError } from "./errors.js";
+import type { ProjectInfo } from "./project.js";
+
+const RENDER_MODULE = "virtual:elements-preview/render";
+const RESOLVED_RENDER_MODULE = `\0${RENDER_MODULE}`;
+
+export type RenderMode = "email" | "web" | "document";
+
+export interface LogEntry {
+  level: "error" | "warn" | "info" | "log";
+  message: string;
+}
+
+export interface RenderedTemplate {
+  ok: true;
+  html: string;
+  text: string;
+  /** The design JSON the Unlayer builder opens, or null when it couldn't be made (see jsonError). */
+  json: unknown;
+  jsonError?: string;
+  textError?: string;
+  mode: RenderMode;
+  logs: LogEntry[];
+  durationMs: number;
+  /** The template's `PreviewProps`, when it has them. */
+  previewProps?: unknown;
+  /** The props it rendered with. */
+  props?: unknown;
+}
+
+export interface FailedTemplate {
+  ok: false;
+  error: TemplateError;
+  logs: LogEntry[];
+  durationMs: number;
+  previewProps?: unknown;
+}
+
+export type RenderResult = RenderedTemplate | FailedTemplate;
+
+export interface RenderOptions {
+  /** Props to render with instead of the template's `PreviewProps`. */
+  props?: unknown;
+}
+
+/** The mode a rendered document is in, from its shell (see Elements' document layouts). */
+export function detectMode(html: string): RenderMode {
+  if (/^\s*<!doctype html>/i.test(html)) return "web";
+  if (/xmlns:v="urn:schemas-microsoft-com:vml"/.test(html)) return "email";
+  return "document";
+}
+
+function renderModule(project: ProjectInfo): Plugin {
+  return {
+    name: "elements-preview:render",
+    resolveId(id) {
+      return id === RENDER_MODULE ? RESOLVED_RENDER_MODULE : undefined;
+    },
+    load(id) {
+      if (id !== RESOLVED_RENDER_MODULE) return undefined;
+      return [
+        `import * as Elements from "@unlayer/react-elements";`,
+        `import { createElement, isValidElement } from "react";`,
+        // The async renderers resolve async components and <Tailwind> configs; older releases have only the sync ones.
+        project.asyncEntry
+          ? `export const loadAsyncRenderers = () => import(${JSON.stringify(project.asyncEntry)});`
+          : `export const loadAsyncRenderers = undefined;`,
+        `export { Elements, createElement, isValidElement };`,
+      ].join("\n");
+    },
+  };
+}
+
+/** JSX in `.js` templates (React Email allows it): Vite only reads JSX in `.jsx` and `.tsx` files. */
+function jsxInJs(): Plugin {
+  return {
+    name: "elements-preview:jsx-in-js",
+    enforce: "pre",
+    async transform(code, id) {
+      if (!/\.m?js$/.test(id) || id.includes("/node_modules/") || !/<\/|\/>/.test(code)) return undefined;
+      const result = await transformWithOxc(code, `${id}x`, { jsx: { runtime: "automatic" } });
+      return { code: result.code, map: result.map };
+    },
+  };
+}
+
+function formatLogArg(arg: unknown): string {
+  if (arg instanceof Error) return arg.message;
+  if (typeof arg === "string") return arg;
+  try {
+    return JSON.stringify(arg);
+  } catch {
+    return String(arg);
+  }
+}
+
+/** Runs `fn` with console output captured (Elements reports render problems through the console). */
+async function captureConsole<T>(fn: () => Promise<T>): Promise<{ value: T; logs: LogEntry[] }> {
+  const logs: LogEntry[] = [];
+  const levels = ["error", "warn", "info", "log"] as const;
+  const originals = Object.fromEntries(levels.map((level) => [level, console[level]])) as Record<(typeof levels)[number], (...args: unknown[]) => void>;
+  for (const level of levels) {
+    console[level] = (...args: unknown[]) => {
+      // React formats its warnings with %s placeholders.
+      let message = args.map(formatLogArg).join(" ");
+      if (typeof args[0] === "string" && args[0].includes("%s")) {
+        let i = 1;
+        message = args[0].replace(/%[sdo]/g, () => formatLogArg(args[i++]));
+      }
+      // Each output renders the template again, so the same message can repeat.
+      if (!logs.some((log) => log.level === level && log.message === message)) logs.push({ level, message });
+    };
+  }
+  try {
+    return { value: await fn(), logs };
+  } finally {
+    for (const level of levels) console[level] = originals[level];
+  }
+}
+
+/**
+ * An email with every block and the row options that change Elements' CSS
+ * (layouts, device hiding), made with the project's Elements: the
+ * compatibility check measures what Elements' own HTML uses with it.
+ */
+function referenceEmail(runtime: Record<string, any>): unknown {
+  const { Elements: E, createElement: h } = runtime;
+  const link = "https://example.com";
+  const blocks = () => [
+    h(E.Heading, { key: "h" }, "Heading"),
+    h(E.Paragraph, { key: "p" }, "Paragraph"),
+    h(E.Button, { key: "b", href: link }, "Button"),
+    h(E.Image, { key: "i", src: `${link}/image.png`, alt: "Image" }),
+    h(E.Divider, { key: "d" }),
+    h(E.Menu, { key: "m", items: [{ text: "Home", href: link }] }),
+    h(E.Social, { key: "s", icons: [{ name: "Facebook", url: link }] }),
+    h(E.Table, { key: "t", headers: ["A", "B"], data: [["1", "2"]] }),
+  ];
+  const layouts = E.ColumnLayouts ?? {};
+  return h(
+    E.Email,
+    { previewText: "Preview" },
+    h(E.Row, { key: "one" }, h(E.Column, null, ...blocks())),
+    h(E.Row, { key: "two", layout: layouts.TwoEqual }, h(E.Column, { key: 1 }, ...blocks()), h(E.Column, { key: 2 }, ...blocks())),
+    h(E.Row, { key: "phone", hideOnDesktop: true }, h(E.Column, null, h(E.Paragraph, null, "Phone"))),
+    h(E.Row, { key: "desktop", hideOnMobile: true }, h(E.Column, null, h(E.Paragraph, null, "Desktop")))
+  );
+}
+
+export interface TemplateLoader {
+  server: ViteDevServer;
+  render(file: string, options?: RenderOptions): Promise<RenderResult>;
+  /** The reference email (see referenceEmail) rendered to HTML with the project's Elements. */
+  referenceHtml(): Promise<string>;
+  /** Forget every loaded module, so the next render reads files again. */
+  invalidate(): void;
+  close(): Promise<void>;
+}
+
+export interface LoaderOptions {
+  project: ProjectInfo;
+  /** Watch files (the dev server); off for a one-off export. */
+  watch: boolean;
+  /** More Vite plugins for loading templates (e.g. to import SVGs, MDX or a custom file type). */
+  plugins?: unknown[];
+}
+
+/**
+ * The Vite plugins in a module (`--vite-plugins ./preview-plugins.js`): its
+ * default export, an array of plugins or a function that returns one (or a
+ * Promise of one).
+ */
+export async function loadVitePlugins(file: string): Promise<unknown[]> {
+  const { pathToFileURL } = await import("node:url");
+  const mod = await import(pathToFileURL(path.resolve(file)).href);
+  const exported = mod.default ?? mod.plugins;
+  const plugins = typeof exported === "function" ? await exported() : exported;
+  if (!Array.isArray(plugins)) throw new Error(`${file} must export an array of Vite plugins (or a function that returns one) as its default export.`);
+  return plugins.flat();
+}
+
+export async function createLoader({ project, watch, plugins = [] }: LoaderOptions): Promise<TemplateLoader> {
+  const server = await createServer({
+    root: project.root,
+    configFile: false,
+    envFile: false,
+    logLevel: "silent",
+    clearScreen: false,
+    appType: "custom",
+    server: {
+      middlewareMode: true,
+      hmr: false,
+      ws: false,
+      watch: watch ? { ignored: ["**/node_modules/**", "**/.git/**", "**/dist/**", "**/out/**", "**/.next/**"] } : null,
+    },
+    resolve: { tsconfigPaths: true },
+    optimizeDeps: { noDiscovery: true, include: [] },
+    plugins: [renderModule(project), jsxInJs(), ...(plugins as Plugin[])],
+  });
+
+  // One render at a time: renders capture the console, which is global.
+  let queue: Promise<unknown> = Promise.resolve();
+
+  async function renderNow(file: string, options: RenderOptions): Promise<RenderResult> {
+    const started = performance.now();
+    const elapsed = () => Math.round(performance.now() - started);
+    let mod: Record<string, unknown>;
+    let runtime: Record<string, any>;
+    try {
+      runtime = await server.ssrLoadModule(RENDER_MODULE);
+      mod = await server.ssrLoadModule(file);
+    } catch (error) {
+      if (error instanceof Error) server.ssrFixStacktrace(error);
+      return { ok: false, error: formatError(error, project.root, "load"), logs: [], durationMs: elapsed() };
+    }
+    const exported = mod.default as any;
+    // A function component, or a memo/forwardRef one (an object), can carry PreviewProps.
+    const previewProps = exported !== null && (typeof exported === "function" || typeof exported === "object") ? exported.PreviewProps : undefined;
+    if (exported === undefined || exported === null) {
+      return {
+        ok: false,
+        error: { message: "This file has no default export. Export the template: export default function Welcome() { … }", phase: "load", file: path.relative(project.root, file) },
+        logs: [],
+        durationMs: elapsed(),
+      };
+    }
+    const props = options.props !== undefined ? options.props : previewProps;
+    const { value, logs } = await captureConsole(async () => {
+      try {
+        const element = runtime.isValidElement(exported) ? exported : runtime.createElement(exported, (props ?? {}) as object);
+        // Prefer the async renderers: they render async components and load the <Tailwind> configs a template uses.
+        const renderers = runtime.loadAsyncRenderers ? await runtime.loadAsyncRenderers() : runtime.Elements;
+        const html: string = await renderers.renderToHtml(element);
+        let text = "";
+        let textError: string | undefined;
+        try {
+          text = await renderers.renderToPlainText(element);
+        } catch (error) {
+          textError = formatError(error, project.root, "render").message;
+        }
+        let json: unknown = null;
+        let jsonError: string | undefined;
+        try {
+          json = await renderers.renderToJson(element);
+        } catch (error) {
+          jsonError = formatError(error, project.root, "render").message;
+        }
+        return { ok: true as const, html, text, textError, json, jsonError };
+      } catch (error) {
+        if (error instanceof Error) {
+          server.ssrFixStacktrace(error);
+          if (error.cause instanceof Error) server.ssrFixStacktrace(error.cause);
+        }
+        return { ok: false as const, error: formatError(error, project.root, "render") };
+      }
+    });
+    if (!value.ok) return { ok: false, error: value.error, logs, durationMs: elapsed(), previewProps };
+    return {
+      ...value,
+      mode: detectMode(value.html),
+      logs,
+      durationMs: elapsed(),
+      previewProps,
+      props,
+    };
+  }
+
+  function enqueue<T>(fn: () => Promise<T>): Promise<T> {
+    const next = queue.then(fn);
+    queue = next.catch(() => undefined);
+    return next;
+  }
+
+  return {
+    server,
+    render: (file, options = {}) => enqueue(() => renderNow(file, options)),
+    referenceHtml: () =>
+      enqueue(async () => {
+        const runtime = await server.ssrLoadModule(RENDER_MODULE);
+        const { value } = await captureConsole(async () => runtime.Elements.renderToHtml(referenceEmail(runtime)) as string);
+        return value;
+      }),
+    invalidate() {
+      server.moduleGraph.invalidateAll();
+    },
+    close: () => server.close(),
+  };
+}
+
+/** The template's source, for the code view. */
+export async function readSource(file: string): Promise<string> {
+  return readFile(file, "utf8").catch(() => "");
+}
diff --git a/packages/preview/src/server/paths.ts b/packages/preview/src/server/paths.ts
new file mode 100644
index 00000000..77596e80
--- /dev/null
+++ b/packages/preview/src/server/paths.ts
@@ -0,0 +1,7 @@
+import path from "node:path";
+
+/** A path as the user would type it: relative to `cwd` when it's inside, absolute otherwise. */
+export function shown(file: string, cwd = process.cwd()): string {
+  const relative = path.relative(cwd, file);
+  return relative === "" ? "." : relative.startsWith("..") || path.isAbsolute(relative) ? file : relative;
+}
diff --git a/packages/preview/src/server/project.ts b/packages/preview/src/server/project.ts
new file mode 100644
index 00000000..97f473ef
--- /dev/null
+++ b/packages/preview/src/server/project.ts
@@ -0,0 +1,88 @@
+/**
+ * The project the templates belong to: its root, and the versions of Elements
+ * and React it has installed. Templates render with the project's own copies,
+ * so what the preview can do depends on them.
+ */
+
+import { existsSync, readFileSync } from "node:fs";
+import { createRequire } from "node:module";
+import path from "node:path";
+
+/** The oldest Elements the preview supports. Older releases render a template component with the wrong document shell. */
+export const MINIMUM_ELEMENTS = "0.2.0";
+
+export interface ProjectInfo {
+  /** The folder with the project's package.json (where its packages resolve from). */
+  root: string;
+  elementsVersion?: string;
+  reactVersion?: string;
+  /** Whether the installed Elements has `@unlayer/react-elements/tailwind`. */
+  tailwind: boolean;
+  /**
+   * The installed Elements' asynchronous renderers, which render async components and load
+   * `<Tailwind>` configs: `@unlayer/react-elements/async`, or on releases before it, `/tailwind`.
+   */
+  asyncEntry?: "@unlayer/react-elements/async" | "@unlayer/react-elements/tailwind";
+  /** Problems to show: Elements or React missing, or an Elements older than the minimum. */
+  warnings: string[];
+  /** Whether templates can render at all (Elements and React are installed). */
+  canRender: boolean;
+}
+
+/** The nearest folder at or above `from` with a package.json, or `from` itself. */
+export function findProjectRoot(from: string): string {
+  let dir = path.resolve(from);
+  for (;;) {
+    if (existsSync(path.join(dir, "package.json"))) return dir;
+    const parent = path.dirname(dir);
+    if (parent === dir) return path.resolve(from);
+    dir = parent;
+  }
+}
+
+function readPackage(require: NodeRequire, name: string): { version?: string; exports?: unknown } | undefined {
+  try {
+    return JSON.parse(readFileSync(require.resolve(`${name}/package.json`), "utf8"));
+  } catch {
+    return undefined;
+  }
+}
+
+/** -1, 0 or 1 as `a` is older than, the same as or newer than `b` (major.minor.patch, prerelease tags ignored). */
+export function compareVersions(a: string, b: string): number {
+  const parse = (v: string) => v.split("-")[0].split(".").map((n) => Number.parseInt(n, 10) || 0);
+  const [x, y] = [parse(a), parse(b)];
+  for (let i = 0; i < 3; i++) {
+    if ((x[i] ?? 0) !== (y[i] ?? 0)) return (x[i] ?? 0) < (y[i] ?? 0) ? -1 : 1;
+  }
+  return 0;
+}
+
+export function inspectProject(templatesDir: string): ProjectInfo {
+  const root = findProjectRoot(templatesDir);
+  // Resolve from the templates folder, so a workspace package's own node_modules count.
+  const require = createRequire(path.join(path.resolve(templatesDir), "noop.js"));
+  const elements = readPackage(require, "@unlayer/react-elements");
+  const react = readPackage(require, "react");
+  const warnings: string[] = [];
+  if (!elements) warnings.push("@unlayer/react-elements isn't installed in this project. Install it: npm install @unlayer/react-elements");
+  if (!react) warnings.push("react isn't installed in this project. Install it: npm install react react-dom");
+  if (elements?.version && compareVersions(elements.version, MINIMUM_ELEMENTS) < 0) {
+    warnings.push(
+      `This project has @unlayer/react-elements ${elements.version}. The preview needs ${MINIMUM_ELEMENTS} or later to render templates written as components correctly: npm install @unlayer/react-elements@latest`
+    );
+  }
+  const exportsField = elements?.exports;
+  const hasExport = (name: string) => Boolean(exportsField && typeof exportsField === "object" && name in (exportsField as Record<string, unknown>));
+  const tailwind = hasExport("./tailwind");
+  const asyncEntry = hasExport("./async") ? "@unlayer/react-elements/async" : tailwind ? "@unlayer/react-elements/tailwind" : undefined;
+  return {
+    root,
+    elementsVersion: elements?.version,
+    reactVersion: react?.version,
+    tailwind,
+    asyncEntry,
+    warnings,
+    canRender: Boolean(elements && react),
+  };
+}
diff --git a/packages/preview/src/server/render.ts b/packages/preview/src/server/render.ts
new file mode 100644
index 00000000..56e31498
--- /dev/null
+++ b/packages/preview/src/server/render.ts
@@ -0,0 +1,116 @@
+/**
+ * `render`: renders templates with their `PreviewProps` and gives back what a
+ * program needs to use them elsewhere: the mode, the HTML and the design JSON
+ * the Unlayer editor opens. The Unlayer CLI's `unlayer elements push` runs it
+ * to create and update templates in an Unlayer project; with `check`, each
+ * template also carries the findings `check` reports for it.
+ */
+
+import path from "node:path";
+import type { GroupedFindings } from "../../shared/findings.js";
+import { selectProjectTemplates, templateFindings, type FindingsContext } from "./check.js";
+import { createChecks } from "./checks.js";
+import { createLoader, type RenderMode } from "./loader.js";
+import { shown } from "./paths.js";
+
+export interface RenderTemplatesOptions {
+  /** The templates folder. */
+  dir: string;
+  /** The templates to render (see selectTemplates): `.` for every one. */
+  templates: string[];
+  /** Also run check's checks on each template. */
+  check?: boolean;
+  /** With check: request each link and image URL (default true). */
+  network?: boolean;
+  /** More Vite plugins for loading templates (see loadVitePlugins). */
+  plugins?: unknown[];
+  timeoutMs?: number;
+  fetch?: typeof fetch;
+  /** Called with each template as soon as it's rendered (and checked). */
+  onTemplate?: (template: RenderedTemplateJson) => void;
+}
+
+export interface RenderedTemplateJson {
+  /** The template's path in the templates folder. */
+  path: string;
+  /** Its file, from the working directory. */
+  file: string;
+  /** It rendered, and with check, has nothing to fix. */
+  ok: boolean;
+  /** null when it doesn't render. */
+  mode: RenderMode | null;
+  /** null when it doesn't render. */
+  html: string | null;
+  /** The design JSON the Unlayer editor opens; null when it couldn't be made (see designError) or the template doesn't render. */
+  design: unknown;
+  designError?: string;
+  /** Why it doesn't render, with the file (from the working directory), line and code around it. */
+  error?: { message: string; file?: string; line?: number; column?: number; frame?: string };
+  /** What Elements and React warned about while rendering. */
+  warnings: string[];
+  /** With check: check's findings for the template, and whether it has nothing to fix. */
+  check?: { ok: boolean } & GroupedFindings;
+}
+
+export interface RenderTemplatesResult {
+  templates: RenderedTemplateJson[];
+  /** How many didn't render, or with check, have something to fix. */
+  failed: number;
+}
+
+/** Renders the templates named (a UsageError when one isn't there, or when Elements isn't installed). */
+export async function renderTemplates(options: RenderTemplatesOptions): Promise<RenderTemplatesResult> {
+  const { dir, project, selected } = await selectProjectTemplates(options.dir, options.templates, "render");
+  const loader = await createLoader({ project, watch: false, plugins: options.plugins });
+  const context: FindingsContext = {
+    project,
+    checks: createChecks(loader, dir),
+    network: options.network !== false,
+    timeoutMs: options.timeoutMs,
+    fetch: options.fetch,
+  };
+  const templates: RenderedTemplateJson[] = [];
+  try {
+    for (const template of selected) {
+      const file = path.join(dir, template.path);
+      const result = await loader.render(file);
+      const warnings = result.logs.filter((log) => log.level === "error" || log.level === "warn").map((log) => log.message);
+      let rendered: RenderedTemplateJson;
+      if (result.ok) {
+        rendered = {
+          path: template.path,
+          file: shown(file),
+          ok: true,
+          mode: result.mode,
+          html: result.html,
+          design: result.json ?? null,
+          ...(result.jsonError ? { designError: result.jsonError } : {}),
+          warnings,
+        };
+      } else {
+        const { message, file: errorFile, line, column, frame } = result.error;
+        rendered = {
+          path: template.path,
+          file: shown(file),
+          ok: false,
+          mode: null,
+          html: null,
+          design: null,
+          error: { message, file: errorFile ? shown(path.resolve(project.root, errorFile)) : undefined, line, column, frame },
+          warnings,
+        };
+      }
+      if (options.check) {
+        const grouped = await templateFindings(result, file, context);
+        const checkOk = grouped.toFix.length === 0;
+        rendered.check = { ok: checkOk, ...grouped };
+        rendered.ok = rendered.ok && checkOk;
+      }
+      templates.push(rendered);
+      options.onTemplate?.(rendered);
+    }
+  } finally {
+    await loader.close();
+  }
+  return { templates, failed: templates.filter((t) => !t.ok).length };
+}
diff --git a/packages/preview/src/server/screenshot.ts b/packages/preview/src/server/screenshot.ts
new file mode 100644
index 00000000..575aea02
--- /dev/null
+++ b/packages/preview/src/server/screenshot.ts
@@ -0,0 +1,278 @@
+/**
+ * `screenshot`: full-length PNGs of rendered templates, taken with a browser
+ * already installed (see browser.ts), for a person or an agent to look at the
+ * layout without opening the preview.
+ *
+ * Each template is rendered with its PreviewProps and served from a local
+ * server with the templates folder's `static/` files, as in the preview, so
+ * `/static/` images load. The page waits for its images and web fonts before
+ * each shot. Dark mode is the preview's own simulation (shared/darkMode.ts),
+ * loaded into the page. One page, one template and one shot at a time: a
+ * browser rendering many large emails at once can load the GPU heavily.
+ */
+
+import { existsSync, statSync } from "node:fs";
+import { mkdir, readFile, writeFile } from "node:fs/promises";
+import http from "node:http";
+import path from "node:path";
+import { fileURLToPath } from "node:url";
+import type { DarkMode } from "../../shared/darkMode.js";
+import { findBrowser, type FoundBrowser } from "./browser.js";
+import { discoverTemplates, selectTemplates, unknownTemplatesMessage } from "./discover.js";
+import { UsageError, type TemplateError } from "./errors.js";
+import { inside, listenFrom, requestAllowed, sendFile } from "./http.js";
+import { createLoader, type RenderMode } from "./loader.js";
+import { shown } from "./paths.js";
+import { inspectProject } from "./project.js";
+
+export type Variant = "desktop" | "phone" | "dark";
+
+export const DESKTOP_WIDTH = 680;
+export const PHONE_WIDTH = 375;
+/** The dark mode `--dark` shows: the preview's default, where every color flips (the Gmail apps, Outlook.com). */
+export const SCREENSHOT_DARK_MODE: Exclude<DarkMode, "off"> = "full";
+
+/** The variants to take: desktop always, phone and dark when asked (`all`: both). */
+export function screenshotVariants(options: { phone?: boolean; dark?: boolean; all?: boolean }): Variant[] {
+  const variants: Variant[] = ["desktop"];
+  if (options.phone || options.all) variants.push("phone");
+  if (options.dark || options.all) variants.push("dark");
+  return variants;
+}
+
+/** Where a template's screenshot goes: `<outDir>/<its path without the extension>.<variant>.png`. */
+export function screenshotFile(outDir: string, template: string, variant: Variant): string {
+  const base = template.slice(0, template.length - path.extname(template).length);
+  return path.join(outDir, ...`${base}.${variant}.png`.split("/"));
+}
+
+/** Paper sizes in millimeters, short side first: the sizes Elements' Document takes. */
+const PAGE_SIZES: Record<string, [number, number]> = {
+  A3: [297, 420],
+  A4: [210, 297],
+  A5: [148, 210],
+  Letter: [215.9, 279.4],
+  Legal: [215.9, 355.6],
+  Tabloid: [279.4, 431.8],
+};
+
+/** A Document's page width in CSS pixels (96 per inch), from its design JSON; A4 portrait, Elements' default, when it doesn't say. */
+export function documentPageWidth(design: unknown): number {
+  const values = (design as { body?: { values?: { documentSize?: string; documentOrientation?: string } } } | null | undefined)?.body?.values;
+  const [short, long] = PAGE_SIZES[values?.documentSize ?? "A4"] ?? PAGE_SIZES.A4;
+  return Math.round(((values?.documentOrientation === "landscape" ? long : short) / 25.4) * 96);
+}
+
+export interface ScreenshotOptions {
+  /** The templates folder. */
+  dir: string;
+  /** The templates to take (see selectTemplates). */
+  templates: string[];
+  /** Default: `screenshots`. */
+  outDir?: string;
+  /** Default: desktop only. */
+  variants?: Variant[];
+  /** The desktop (and dark) width; default 680, or a Document's page width. */
+  width?: number;
+  /** The browser's executable (see findBrowser). */
+  browser?: string;
+  /** More Vite plugins for loading templates (see loadVitePlugins). */
+  plugins?: unknown[];
+  /** How long a page has to load its images and fonts (default 15 s). */
+  timeoutMs?: number;
+  /** Called with each screenshot written. */
+  onScreenshot?(template: string, screenshot: Screenshot): void;
+}
+
+export interface Screenshot {
+  variant: Variant;
+  width: number;
+  height: number;
+  /** The PNG, from the working directory. */
+  file: string;
+}
+
+export interface ScreenshotTemplate {
+  path: string;
+  ok: boolean;
+  mode: RenderMode | null;
+  screenshots: Screenshot[];
+  /** Images that didn't load, or images and fonts still loading when a shot was taken. */
+  warnings: string[];
+  /** Why it has no screenshots (its file is from the working directory). */
+  error?: TemplateError;
+}
+
+export interface ScreenshotResult {
+  outDir: string;
+  browser: FoundBrowser;
+  templates: ScreenshotTemplate[];
+  failed: number;
+}
+
+const DARK_MODE_PATH = "/__elements-preview/dark-mode.js";
+
+/** The dark mode module for the page: dist/dark-mode.js, or, from the sources (the tests), shared/darkMode.ts compiled. */
+async function darkModeScript(): Promise<string> {
+  const built = fileURLToPath(new URL("./dark-mode.js", import.meta.url));
+  if (existsSync(built)) return readFile(built, "utf8");
+  const source = fileURLToPath(new URL("../../shared/darkMode.ts", import.meta.url));
+  const { transformWithOxc } = await import("vite");
+  return (await transformWithOxc(await readFile(source, "utf8"), source)).code;
+}
+
+interface PageServer {
+  url: string;
+  /** The HTML the page loads next. */
+  html: string;
+  close(): Promise<void>;
+}
+
+/** Serves the template being taken, the templates folder's static/ files and the dark mode module, on localhost. */
+async function startPageServer(dir: string, darkMode: string): Promise<PageServer> {
+  const pages: PageServer = { url: "", html: "", close: async () => undefined };
+  const server = http.createServer(async (req, res) => {
+    if (!requestAllowed(req)) {
+      res.writeHead(403);
+      return res.end();
+    }
+    const url = new URL(req.url ?? "/", "http://localhost");
+    if (url.pathname === "/") {
+      res.writeHead(200, { "content-type": "text/html; charset=utf-8", "cache-control": "no-store" });
+      return res.end(pages.html);
+    }
+    if (url.pathname === DARK_MODE_PATH) {
+      res.writeHead(200, { "content-type": "text/javascript; charset=utf-8" });
+      return res.end(darkMode);
+    }
+    if (url.pathname.startsWith("/static/")) {
+      let relative: string | undefined;
+      try {
+        relative = decodeURIComponent(url.pathname.slice("/static/".length));
+      } catch {
+        relative = undefined;
+      }
+      const file = relative !== undefined ? inside(path.join(dir, "static"), relative) : undefined;
+      if (file && (await sendFile(res, file))) return;
+    }
+    res.writeHead(404);
+    res.end();
+  });
+  const port = await listenFrom(server, 0, true);
+  pages.url = `http://localhost:${port}`;
+  pages.close = () =>
+    new Promise<void>((resolve) => {
+      server.close(() => resolve());
+      server.closeAllConnections();
+    });
+  return pages;
+}
+
+// Run in the page, as strings: a test runner's transforms can't reach them.
+/**
+ * Lazy images load now; resolves with whether images or fonts were still
+ * loading after `ms`, and the images that didn't load.
+ */
+const WAIT_FOR_IMAGES_AND_FONTS = (ms: number) => `(async () => {
+  for (const img of Array.from(document.images)) if (img.loading === "lazy") img.loading = "eager";
+  const images = Array.from(document.images).filter((img) => !img.complete).map((img) => new Promise((resolve) => {
+    img.addEventListener("load", resolve, { once: true });
+    img.addEventListener("error", resolve, { once: true });
+  }));
+  const done = Promise.all([...images, document.fonts.ready]).then(() => false);
+  const slow = await Promise.race([done, new Promise((resolve) => setTimeout(() => resolve(true), ${ms}))]);
+  const broken = Array.from(document.images).filter((img) => img.complete && img.naturalWidth === 0 && img.getAttribute("src")).map((img) => img.getAttribute("src"));
+  return { slow, broken: Array.from(new Set(broken)) };
+})()`;
+
+const APPLY_DARK_MODE = (url: string, mode: string) => `import(${JSON.stringify(url)}).then((m) => m.setDarkMode(document, ${JSON.stringify(mode)}))`;
+
+/** A PNG's height, from its header. */
+function pngHeight(png: Uint8Array): number {
+  return Buffer.from(png.buffer, png.byteOffset, png.byteLength).readUInt32BE(20);
+}
+
+export async function takeScreenshots(options: ScreenshotOptions): Promise<ScreenshotResult> {
+  const dir = path.resolve(options.dir);
+  if (!existsSync(dir) || !statSync(dir).isDirectory()) {
+    throw new UsageError(`The templates folder ${shown(dir)} doesn't exist. Point the command at the folder with your templates: --dir ./emails`);
+  }
+  if (!options.templates.length) throw new UsageError("Name the templates to take: screenshot welcome.tsx (a folder of templates, or . for all of them).");
+  const project = inspectProject(dir);
+  if (!project.canRender) throw new UsageError(project.warnings.join("\n"));
+  const all = await discoverTemplates(dir);
+  const { selected, unknown } = selectTemplates(dir, options.templates, all);
+  if (unknown.length) throw new UsageError(unknownTemplatesMessage(unknown, shown(dir), all));
+  const browser = findBrowser(options.browser);
+  const variants = options.variants?.length ? options.variants : (["desktop"] as Variant[]);
+  const outDir = path.resolve(options.outDir ?? "screenshots");
+  const timeoutMs = options.timeoutMs ?? 15_000;
+
+  const { default: puppeteer } = await import("puppeteer-core");
+  const loader = await createLoader({ project, watch: false, plugins: options.plugins });
+  const server = await startPageServer(dir, await darkModeScript());
+  const templates: ScreenshotTemplate[] = [];
+  let instance: Awaited<ReturnType<typeof puppeteer.launch>> | undefined;
+  try {
+    try {
+      instance = await puppeteer.launch({
+        executablePath: browser.path,
+        headless: true,
+        // Colors as the template sets them, whatever the display's profile; root (a container) needs no sandbox.
+        args: ["--hide-scrollbars", "--force-color-profile=srgb", ...(process.getuid?.() === 0 ? ["--no-sandbox"] : [])],
+      });
+    } catch (error) {
+      throw new Error(`Couldn't start ${browser.path}: ${(error as Error).message.split("\n")[0]}. Pick another browser with --browser or CHROME_PATH.`);
+    }
+    const page = await instance.newPage();
+    let loads = 0;
+    for (const template of selected) {
+      const result = await loader.render(path.join(dir, template.path));
+      if (!result.ok) {
+        // Its file from here, like the screenshots.
+        const error = { ...result.error, file: result.error.file ? shown(path.resolve(project.root, result.error.file)) : undefined };
+        templates.push({ path: template.path, ok: false, mode: null, screenshots: [], warnings: [], error });
+        continue;
+      }
+      const entry: ScreenshotTemplate = { path: template.path, ok: true, mode: result.mode, screenshots: [], warnings: [] };
+      templates.push(entry);
+      const desktop = options.width ?? (result.mode === "document" ? documentPageWidth(result.json) : DESKTOP_WIDTH);
+      try {
+        for (const variant of variants) {
+          const width = variant === "phone" ? PHONE_WIDTH : desktop;
+          await page.setViewport({ width, height: variant === "phone" ? 812 : 900, deviceScaleFactor: 1 });
+          server.html = result.html;
+          let slow = false;
+          try {
+            await page.goto(`${server.url}/?load=${++loads}`, { waitUntil: "networkidle0", timeout: timeoutMs });
+          } catch (error) {
+            if ((error as Error).name !== "TimeoutError") throw error;
+            slow = true;
+          }
+          const loaded = (await page.evaluate(WAIT_FOR_IMAGES_AND_FONTS(Math.min(timeoutMs, 10_000)))) as { slow: boolean; broken: string[] };
+          const warnings = [
+            ...(slow || loaded.slow ? [`Images or fonts were still loading after ${timeoutMs / 1000} s: the ${variant} screenshot may miss some.`] : []),
+            ...loaded.broken.map((src) => `The image ${src} didn't load: the screenshot shows it broken.`),
+          ];
+          for (const warning of warnings) if (!entry.warnings.includes(warning)) entry.warnings.push(warning);
+          if (variant === "dark") await page.evaluate(APPLY_DARK_MODE(`${server.url}${DARK_MODE_PATH}`, SCREENSHOT_DARK_MODE));
+          const png = await page.screenshot({ type: "png", fullPage: true });
+          const file = screenshotFile(outDir, template.path, variant);
+          await mkdir(path.dirname(file), { recursive: true });
+          await writeFile(file, png);
+          const screenshot: Screenshot = { variant, width, height: pngHeight(png), file: shown(file) };
+          entry.screenshots.push(screenshot);
+          options.onScreenshot?.(template.path, screenshot);
+        }
+      } catch (error) {
+        entry.ok = false;
+        entry.error = { message: `Couldn't take the screenshot: ${(error as Error).message.split("\n")[0]}`, phase: "render" };
+      }
+    }
+  } finally {
+    await instance?.close().catch(() => undefined);
+    await server.close();
+    await loader.close();
+  }
+  return { outDir, browser, templates, failed: templates.filter((t) => !t.ok).length };
+}
diff --git a/packages/preview/test/build.test.ts b/packages/preview/test/build.test.ts
new file mode 100644
index 00000000..7e63d366
--- /dev/null
+++ b/packages/preview/test/build.test.ts
@@ -0,0 +1,99 @@
+import { existsSync } from "node:fs";
+import { readFile, writeFile } from "node:fs/promises";
+import http from "node:http";
+import path from "node:path";
+import { afterAll, beforeAll, describe, expect, it } from "vitest";
+import { buildPreview, startStaticServer } from "../src/server/build";
+import { exportTemplates } from "../src/server/export";
+import { loadVitePlugins } from "../src/server/loader";
+import { fixtureCopy } from "./helpers";
+
+let fixture: Awaited<ReturnType<typeof fixtureCopy>>;
+const UI = path.join(path.dirname(new URL(import.meta.url).pathname), "..", "dist", "ui");
+
+beforeAll(async () => {
+  fixture = await fixtureCopy("build");
+});
+
+afterAll(async () => {
+  await fixture?.cleanup();
+});
+
+describe("static build", () => {
+  it.skipIf(!existsSync(path.join(UI, "index.html")))("writes the app and every template's render and checks, with relative paths", async () => {
+    const outDir = path.join(fixture.root, "preview-build");
+    const result = await buildPreview({ dir: fixture.emails, outDir, uiDir: UI, projectId: 167 });
+    expect(result).toMatchObject({ templates: 4, failed: [] });
+
+    const index = await readFile(path.join(outDir, "index.html"), "utf8");
+    expect(index).toContain("window.__ELEMENTS_PREVIEW_STATIC__ = true");
+    expect(index).not.toMatch(/(src|href)="\/assets\//);
+
+    const meta = JSON.parse(await readFile(path.join(outDir, "api", "meta.json"), "utf8"));
+    expect(meta).toMatchObject({ static: true, dir: "emails", projectId: 167 });
+    expect(meta.root).toBeUndefined();
+
+    const welcome = JSON.parse(await readFile(path.join(outDir, "api", "render", "welcome.tsx.json"), "utf8"));
+    expect(welcome).toMatchObject({ ok: true, mode: "email", previewProps: { name: "Ada", company: "Acme" } });
+    expect(welcome.html).toContain('src="./static/logo.png"');
+    expect(welcome.source).toContain("export default function Welcome");
+
+    const receiptCompat = JSON.parse(await readFile(path.join(outDir, "api", "compat", "billing", "receipt.jsx.json"), "utf8"));
+    const flex = receiptCompat.issues.find((i: any) => i.feature === "display:flex");
+    expect(flex).toMatchObject({ source: "template" });
+    expect(flex.sourceLines.length).toBeGreaterThan(0);
+    const landingCompat = JSON.parse(await readFile(path.join(outDir, "api", "compat", "landing.tsx.json"), "utf8"));
+    expect(landingCompat.applicable).toBe(false);
+
+    const links = JSON.parse(await readFile(path.join(outDir, "api", "links", "welcome.tsx.json"), "utf8"));
+    expect(links).toMatchObject({ applicable: true, network: false });
+    expect(existsSync(path.join(outDir, "static", "logo.png"))).toBe(true);
+
+    // `start` serves it on localhost, and nothing outside it.
+    const server = await startStaticServer({ outDir, port: 0 });
+    try {
+      expect((await fetch(`${server.url}/api/templates.json`)).status).toBe(200);
+      expect((await fetch(`${server.url}/`)).headers.get("content-type")).toMatch(/text\/html/);
+      expect((await fetch(`${server.url}/..%2F..%2Fpackage.json`)).status).toBe(404);
+      const foreign = await new Promise<number>((resolve, reject) => {
+        const req = http.request(`${server.url}/`, { headers: { host: "attacker.example" } }, (res) => resolve(res.statusCode ?? 0));
+        req.on("error", reject);
+        req.end();
+      });
+      expect(foreign).toBe(403);
+    } finally {
+      await server.close();
+    }
+  });
+
+  it("refuses to start without a build", async () => {
+    await expect(startStaticServer({ outDir: path.join(fixture.root, "nothing-here"), port: 0 })).rejects.toThrow(/no preview build/);
+  });
+});
+
+describe("Vite plugins", () => {
+  it("loads plugins from a module and uses them to load templates", async () => {
+    const pluginsFile = path.join(fixture.root, "preview-plugins.mjs");
+    // A plugin that serves a virtual module, which a template imports.
+    await writeFile(
+      pluginsFile,
+      `export default () => [{ name: "greeting", resolveId: (id) => (id === "virtual:greeting" ? "\\0greeting" : undefined), load: (id) => (id === "\\0greeting" ? 'export default "Hello from a plugin"' : undefined) }];\n`
+    );
+    await writeFile(
+      path.join(fixture.emails, "plugin.tsx"),
+      'import greeting from "virtual:greeting";\nimport { Email, Row, Column, Paragraph } from "@unlayer/react-elements";\nexport default function Plugin() { return <Email><Row><Column><Paragraph>{greeting}</Paragraph></Column></Row></Email>; }\n'
+    );
+    const plugins = await loadVitePlugins(pluginsFile);
+    expect(plugins).toHaveLength(1);
+    const outDir = path.join(fixture.root, "out-plugins");
+    const result = await exportTemplates({ dir: fixture.emails, outDir, plugins, plainText: true });
+    expect(result.templates.find((t) => t.template === "plugin.tsx")?.error).toBeUndefined();
+    expect(await readFile(path.join(outDir, "plugin.txt"), "utf8")).toContain("Hello from a plugin");
+  });
+
+  it("says what a plugins module must export", async () => {
+    const bad = path.join(fixture.root, "bad-plugins.mjs");
+    await writeFile(bad, "export default 42;\n");
+    await expect(loadVitePlugins(bad)).rejects.toThrow(/must export an array of Vite plugins/);
+  });
+});
diff --git a/packages/preview/test/check.test.ts b/packages/preview/test/check.test.ts
new file mode 100644
index 00000000..e0c7353c
--- /dev/null
+++ b/packages/preview/test/check.test.ts
@@ -0,0 +1,105 @@
+import { writeFile } from "node:fs/promises";
+import path from "node:path";
+import { afterAll, beforeAll, describe, expect, it } from "vitest";
+import { checkTemplates, formatCheckReport } from "../src/server/check";
+import { UsageError } from "../src/server/errors";
+import { fixtureCopy } from "./helpers";
+
+let fixture: Awaited<ReturnType<typeof fixtureCopy>>;
+
+// The problems needs-fixes.tsx in the showcase has: links that go nowhere, run script or are relative, and flexbox.
+const NEEDS_FIXES = `import { Email, Row, Column, Heading, Paragraph, Button, Html } from "@unlayer/react-elements";
+
+export default function NeedsFixes() {
+  return (
+    <Email>
+      <Row>
+        <Column>
+          <Heading>Problems</Heading>
+          <Paragraph html={'Read the <a href="#">terms</a> or <a href="/pricing">see pricing</a>.'} />
+          <Button href="javascript:alert(1)">Click me</Button>
+          <Html html={'<div style="display:flex;gap:12px"><span>A</span><span>B</span></div>'} />
+        </Column>
+      </Row>
+    </Email>
+  );
+}
+`;
+
+beforeAll(async () => {
+  fixture = await fixtureCopy("check");
+  await writeFile(path.join(fixture.emails, "needs-fixes.tsx"), NEEDS_FIXES);
+  await writeFile(path.join(fixture.emails, "broken.tsx"), "export default function Broken() { return <Email>; }\n");
+});
+
+afterAll(async () => {
+  await fixture?.cleanup();
+});
+
+describe("check", () => {
+  it("reports what to fix and what to check in a template, as the preview's Checks do", async () => {
+    const report = await checkTemplates({ dir: fixture.emails, templates: ["needs-fixes.tsx"], network: false });
+    expect(report.ok).toBe(false);
+    expect(report.network).toBe(false);
+    const [template] = report.templates;
+    expect(template).toMatchObject({ path: "needs-fixes.tsx", ok: false, mode: "email" });
+    expect(template.file).toBe(path.relative(process.cwd(), path.join(fixture.emails, "needs-fixes.tsx")));
+    expect(template.bytes).toBeGreaterThan(1000);
+    expect(template.toFix.map((f) => [f.kind, f.block, f.url])).toEqual([
+      ["link", "Paragraph 1", "#"],
+      ["link", "Paragraph 1", "/pricing"],
+      ["link", "Button 1", "javascript:alert(1)"],
+    ]);
+    const flex = template.toCheck.find((f) => f.feature === "display:flex");
+    expect(flex).toMatchObject({ kind: "client", level: "warning", block: "Html 1", line: 11 });
+    expect(flex?.clients?.some((c) => c.client === "outlook.windows" && c.support === "none")).toBe(true);
+    // Elements' own CSS (its media queries, its Outlook markup) isn't the template's to fix.
+    expect(template.toCheck.some((f) => f.feature?.startsWith("@media"))).toBe(false);
+    expect(report.summary).toEqual({ templates: 1, toFix: 3, toCheck: template.toCheck.length, notes: template.notes.length });
+    // The report is what --json prints.
+    expect(JSON.parse(JSON.stringify(report))).toEqual(report);
+  });
+
+  it("passes a template with only things to check, unless it's strict", async () => {
+    // welcome.tsx links to example.com: a placeholder to replace before sending, which is to check.
+    const report = await checkTemplates({ dir: fixture.emails, templates: [path.join(fixture.emails, "welcome.tsx")], network: false });
+    expect(report.templates[0].toFix).toEqual([]);
+    expect(report.templates[0].toCheck.some((f) => f.kind === "link" && /placeholder/.test(f.message))).toBe(true);
+    expect(report.ok).toBe(true);
+    const strict = await checkTemplates({ dir: fixture.emails, templates: ["welcome.tsx"], network: false, strict: true });
+    expect(strict.ok).toBe(false);
+    expect(strict.strict).toBe(true);
+  });
+
+  it("checks every template, worst first, and points a render error at its file and line", async () => {
+    const report = await checkTemplates({ dir: fixture.emails, network: false });
+    expect(report.templates.map((t) => t.path).slice(0, 2)).toEqual(["needs-fixes.tsx", "broken.tsx"]);
+    expect(report.templates).toHaveLength(6);
+    const broken = report.templates.find((t) => t.path === "broken.tsx")!;
+    expect(broken).toMatchObject({ ok: false, mode: null, bytes: null });
+    expect(broken.toFix[0]).toMatchObject({ kind: "render", level: "error", line: 1 });
+    expect(broken.toFix[0].file).toBe(path.relative(process.cwd(), path.join(fixture.emails, "broken.tsx")));
+    // A page isn't checked against email clients.
+    expect(report.templates.find((t) => t.path === "landing.tsx")?.toCheck.some((f) => f.kind === "client")).toBe(false);
+  });
+
+  it("prints each template, a line per thing to fix or check, and a summary", async () => {
+    const report = await checkTemplates({ dir: fixture.emails, templates: ["needs-fixes.tsx", "landing.tsx"], network: false });
+    const text = formatCheckReport(report);
+    const lines = text.trimEnd().split("\n");
+    expect(lines[0]).toMatch(/^✗ needs-fixes\.tsx \(email, \d+ KB\): 3 to fix, \d+ to check/);
+    expect(lines).toContain("    fix    Button 1 · “Click me” → javascript:alert(1) · Email clients don't run javascript: links.");
+    expect(lines).toContain("    fix    Paragraph 1 · “terms” → # · This link goes nowhere: give it a URL.");
+    expect(lines.some((line) => /^ {4}check {2}Html 1 · line 11 · `display:flex` isn't supported in /.test(line))).toBe(true);
+    expect(lines.some((line) => /^✓ landing\.tsx \(web, \d+ KB\)/.test(line))).toBe(true);
+    expect(lines[lines.length - 1]).toMatch(/^Checked 2 templates: 3 to fix, \d+ to check\..* Links and images weren't requested \(--offline\)\.$/);
+    expect(text).not.toContain("\u001b[");
+    expect(formatCheckReport(report, { color: true })).toContain("\u001b[31m");
+  });
+
+  it("refuses templates and folders that aren't there", async () => {
+    await expect(checkTemplates({ dir: fixture.emails, templates: ["nope.tsx"], network: false })).rejects.toThrow(UsageError);
+    await expect(checkTemplates({ dir: fixture.emails, templates: ["nope.tsx"], network: false })).rejects.toThrow(/No template nope\.tsx in .*Its templates: billing\/receipt\.jsx/s);
+    await expect(checkTemplates({ dir: path.join(fixture.root, "missing") })).rejects.toThrow(/doesn't exist/);
+  });
+});
diff --git a/packages/preview/test/dev-server.test.ts b/packages/preview/test/dev-server.test.ts
new file mode 100644
index 00000000..05cbab25
--- /dev/null
+++ b/packages/preview/test/dev-server.test.ts
@@ -0,0 +1,211 @@
+import { readFile, writeFile } from "node:fs/promises";
+import http from "node:http";
+import { createRequire } from "node:module";
+import path from "node:path";
+import { afterAll, beforeAll, describe, expect, it } from "vitest";
+import { startDevServer, type DevServer } from "../src/server/dev-server";
+import { fixtureCopy } from "./helpers";
+
+let server: DevServer;
+let fixture: Awaited<ReturnType<typeof fixtureCopy>>;
+
+beforeAll(async () => {
+  fixture = await fixtureCopy("dev");
+  server = await startDevServer({ dir: fixture.emails, port: 0, uiDir: path.join(fixture.root, "no-ui") });
+});
+
+afterAll(async () => {
+  await server?.close();
+  await fixture?.cleanup();
+});
+
+async function post(route: string, body: unknown) {
+  const res = await fetch(server.url + route, { method: "POST", body: JSON.stringify(body) });
+  return { status: res.status, body: (await res.json()) as any };
+}
+
+/** Resolves with the next `change` event's data. */
+function nextChange(): Promise<{ files: string[]; templates: Array<{ path: string }> }> {
+  return new Promise((resolve, reject) => {
+    const req = http.get(`${server.url}/api/events`, (res) => {
+      let buffer = "";
+      res.setEncoding("utf8");
+      res.on("data", (chunk: string) => {
+        buffer += chunk;
+        const match = /event: change\ndata: (.*)\n\n/.exec(buffer);
+        if (match) {
+          req.destroy();
+          resolve(JSON.parse(match[1]));
+        }
+      });
+    });
+    req.on("error", (error) => {
+      if ((error as NodeJS.ErrnoException).code !== "ECONNRESET") reject(error);
+    });
+  });
+}
+
+describe("dev server", () => {
+  it("lists the templates", async () => {
+    const res = await fetch(`${server.url}/api/templates`);
+    const { templates } = (await res.json()) as { templates: Array<{ path: string }> };
+    expect(templates.map((t) => t.path)).toEqual(["billing/receipt.jsx", "landing.tsx", "plain.js", "welcome.tsx"]);
+  });
+
+  it("renders a template with its PreviewProps, in its mode, with HTML, text and design JSON", async () => {
+    const { body } = await post("/api/render", { path: "welcome.tsx" });
+    expect(body.ok).toBe(true);
+    expect(body.mode).toBe("email");
+    expect(body.previewProps).toEqual({ name: "Ada", company: "Acme" });
+    expect(body.html).toContain("Welcome, Ada");
+    expect(body.text).toContain("WELCOME, ADA");
+    expect(body.json?.body?.rows?.length).toBe(1);
+    expect(body.source).toContain("export default function Welcome");
+    const landing = (await post("/api/render", { path: "landing.tsx" })).body;
+    expect(landing.mode).toBe("web");
+  });
+
+  it("renders exactly what the project's Elements renders", async () => {
+    const { body } = await post("/api/render", { path: "plain.js" });
+    const require = createRequire(path.join(fixture.root, "package.json"));
+    const React = require("react");
+    const Elements = require("@unlayer/react-elements");
+    const { default: Plain } = await import(path.join(fixture.emails, "plain.js"));
+    const element = React.createElement(Plain, Plain.PreviewProps);
+    expect(body.html).toBe(Elements.renderToHtml(element));
+    expect(body.text).toBe(Elements.renderToPlainText(element));
+  });
+
+  it("renders with other props without changing the file", async () => {
+    const { body } = await post("/api/render", { path: "welcome.tsx", props: { name: "Grace", company: "Initech" } });
+    expect(body.html).toContain("Welcome, Grace");
+    expect(body.props).toEqual({ name: "Grace", company: "Initech" });
+  });
+
+  it("resolves tsconfig path aliases and imports of the project's files", async () => {
+    const { body } = await post("/api/render", { path: "billing/receipt.jsx" });
+    expect(body.ok).toBe(true);
+    expect(body.text).toContain("Total: $42.00");
+  });
+
+  it("only renders listed templates", async () => {
+    expect((await post("/api/render", { path: "../package.json" })).status).toBe(404);
+    expect((await post("/api/render", { path: "_components/footer.tsx" })).status).toBe(404);
+    expect((await post("/api/render", { path: "helpers.ts" })).status).toBe(404);
+  });
+
+  it("serves the templates folder's static files, and nothing outside it", async () => {
+    const ok = await fetch(`${server.url}/static/logo.png`);
+    expect(ok.status).toBe(200);
+    expect(ok.headers.get("content-type")).toBe("image/png");
+    expect((await fetch(`${server.url}/static/..%2F..%2Fpackage.json`)).status).toBe(404);
+    expect((await fetch(`${server.url}/static/../package.json`)).status).not.toBe(200);
+  });
+
+  it("answers only requests addressed to localhost", async () => {
+    const status = await new Promise<number>((resolve, reject) => {
+      const req = http.request(`${server.url}/api/templates`, { headers: { host: "attacker.example" } }, (res) => resolve(res.statusCode ?? 0));
+      req.on("error", reject);
+      req.end();
+    });
+    expect(status).toBe(403);
+  });
+
+  it("refuses requests from other web pages", async () => {
+    const other = await fetch(`${server.url}/api/templates`, { headers: { origin: "https://attacker.example" } });
+    expect(other.status).toBe(403);
+    const own = await fetch(`${server.url}/api/templates`, { headers: { origin: server.url } });
+    expect(own.status).toBe(200);
+  });
+
+  it("serves static files to another site's images (the Unlayer editor's), but not the API", async () => {
+    // An <img> on editor.unlayer.com sends no Origin, and its page as the Referer.
+    const referer = { referer: "https://editor.unlayer.com/" };
+    const image = await fetch(`${server.url}/static/logo.png`, { headers: referer });
+    expect(image.status).toBe(200);
+    expect(image.headers.get("content-type")).toBe("image/png");
+    const api = await fetch(`${server.url}/api/templates`, { headers: { ...referer, origin: "https://editor.unlayer.com" } });
+    expect(api.status).toBe(403);
+    const render = await fetch(`${server.url}/api/render`, { method: "POST", body: "{}", headers: { ...referer, origin: "https://editor.unlayer.com" } });
+    expect(render.status).toBe(403);
+  });
+
+  it("has no Unlayer project for the editor unless it's given one", async () => {
+    const meta = (await (await fetch(`${server.url}/api/meta`)).json()) as { projectId?: number };
+    expect(meta.projectId).toBeUndefined();
+  });
+
+  it("checks email client compatibility, separating the template's own CSS from Elements'", async () => {
+    const receipt = (await post("/api/compat", { path: "billing/receipt.jsx" })).body;
+    expect(receipt.applicable).toBe(true);
+    const yours = receipt.issues.filter((i: any) => i.source === "template");
+    expect(yours.map((i: any) => i.feature)).toEqual(expect.arrayContaining(["display:flex", "background-image"]));
+    for (const issue of yours) expect(issue.locations.every((l: any) => l.block === "Html 1")).toBe(true);
+    expect(receipt.issues.some((i: any) => i.source === "elements")).toBe(true);
+
+    const welcome = (await post("/api/compat", { path: "welcome.tsx" })).body;
+    expect(welcome.templateCount).toBe(0);
+
+    const landing = (await post("/api/compat", { path: "landing.tsx" })).body;
+    expect(landing.applicable).toBe(false);
+  });
+
+  it("tells the app when a file changes, and renders the new version", async () => {
+    const footer = path.join(fixture.emails, "_components", "footer.tsx");
+    const change = nextChange();
+    await new Promise((r) => setTimeout(r, 100));
+    await writeFile(footer, (await readFile(footer, "utf8")).replace("Sent by", "Sent with care by"));
+    const event = await change;
+    expect(event.files).toContain(path.join("_components", "footer.tsx"));
+    const { body } = await post("/api/render", { path: "welcome.tsx" });
+    expect(body.text).toContain("Sent with care by Acme");
+  });
+
+  it("lists a new template and drops a deleted one", async () => {
+    const file = path.join(fixture.emails, "added.tsx");
+    let change = nextChange();
+    await new Promise((r) => setTimeout(r, 100));
+    await writeFile(file, 'import { Email } from "@unlayer/react-elements";\nexport default function Added() { return <Email />; }\n');
+    expect((await change).templates.map((t) => t.path)).toContain("added.tsx");
+    change = nextChange();
+    await new Promise((r) => setTimeout(r, 100));
+    const { rm } = await import("node:fs/promises");
+    await rm(file);
+    expect((await change).templates.map((t) => t.path)).not.toContain("added.tsx");
+  });
+
+  it("reports a syntax error with its position, stays up, and recovers when it's fixed", async () => {
+    const file = path.join(fixture.emails, "welcome.tsx");
+    const original = await readFile(file, "utf8");
+    let change = nextChange();
+    await new Promise((r) => setTimeout(r, 100));
+    await writeFile(file, original.replace("<Heading>Welcome, {name}</Heading>", "<Heading>Welcome, {name}</Headin>"));
+    await change;
+    const broken = (await post("/api/render", { path: "welcome.tsx" })).body;
+    expect(broken.ok).toBe(false);
+    expect(broken.error).toMatchObject({ phase: "load", file: "emails/welcome.tsx" });
+    expect(broken.error.line).toBeGreaterThan(0);
+    expect(broken.error.message).toMatch(/closing tag/i);
+
+    change = nextChange();
+    await new Promise((r) => setTimeout(r, 100));
+    await writeFile(file, original);
+    await change;
+    expect((await post("/api/render", { path: "welcome.tsx" })).body.ok).toBe(true);
+  });
+
+  it("reports an error a template throws while rendering, pointing at its line", async () => {
+    const file = path.join(fixture.emails, "throws.tsx");
+    const change = nextChange();
+    await new Promise((r) => setTimeout(r, 100));
+    await writeFile(file, 'import { Email } from "@unlayer/react-elements";\n\nexport default function Throws(): never {\n  throw new Error("No data");\n}\n');
+    await change;
+    const { body } = await post("/api/render", { path: "throws.tsx" });
+    // Elements leaves out a root that throws and says so; or React's error reaches the preview.
+    if (body.ok) {
+      expect(body.logs.map((l: any) => l.message).join("\n")).toMatch(/No data/);
+    } else {
+      expect(body.error).toMatchObject({ phase: "render", file: "emails/throws.tsx", line: 4 });
+    }
+  });
+});
diff --git a/packages/preview/test/export.test.ts b/packages/preview/test/export.test.ts
new file mode 100644
index 00000000..bc9b3981
--- /dev/null
+++ b/packages/preview/test/export.test.ts
@@ -0,0 +1,57 @@
+import { existsSync } from "node:fs";
+import { readFile, writeFile } from "node:fs/promises";
+import path from "node:path";
+import { afterAll, beforeAll, describe, expect, it } from "vitest";
+import { exportTemplates } from "../src/server/export";
+import { fixtureCopy } from "./helpers";
+
+let fixture: Awaited<ReturnType<typeof fixtureCopy>>;
+
+beforeAll(async () => {
+  fixture = await fixtureCopy("export");
+});
+
+afterAll(async () => {
+  await fixture?.cleanup();
+});
+
+describe("export", () => {
+  it("writes each template's HTML at its path, and copies static files", async () => {
+    const outDir = path.join(fixture.root, "out");
+    const result = await exportTemplates({ dir: fixture.emails, outDir });
+    expect(result.failed).toBe(0);
+    expect(result.templates.map((t) => t.template)).toEqual(["billing/receipt.jsx", "landing.tsx", "plain.js", "welcome.tsx"]);
+    const html = await readFile(path.join(outDir, "billing", "receipt.html"), "utf8");
+    expect(html).toMatch(/^<!DOCTYPE HTML PUBLIC/);
+    expect(html).toContain("Total: $42.00");
+    expect(existsSync(path.join(outDir, "welcome.html"))).toBe(true);
+    expect(existsSync(path.join(outDir, "static", "logo.png"))).toBe(true);
+  });
+
+  it("writes plain text, design JSON, pretty HTML and custom extensions", async () => {
+    const text = path.join(fixture.root, "out-text");
+    await exportTemplates({ dir: fixture.emails, outDir: text, plainText: true });
+    expect(await readFile(path.join(text, "welcome.txt"), "utf8")).toContain("WELCOME, ADA");
+
+    const json = path.join(fixture.root, "out-json");
+    await exportTemplates({ dir: fixture.emails, outDir: json, design: true, pretty: true, extension: "blade.php" });
+    expect(JSON.parse(await readFile(path.join(json, "welcome.design.json"), "utf8")).body.rows).toHaveLength(1);
+    const pretty = await readFile(path.join(json, "welcome.blade.php"), "utf8");
+    expect(pretty).toContain("Welcome, Ada");
+    expect(pretty.split("\n").length).toBeGreaterThan(20);
+  });
+
+  it("keeps going past a template that fails, and reports it", async () => {
+    await writeFile(path.join(fixture.emails, "broken.tsx"), "export default function Broken() { return <Email>; }\n");
+    const outDir = path.join(fixture.root, "out-broken");
+    const result = await exportTemplates({ dir: fixture.emails, outDir });
+    expect(result.failed).toBe(1);
+    const broken = result.templates.find((t) => t.template === "broken.tsx");
+    expect(broken?.error?.file).toBe("emails/broken.tsx");
+    expect(existsSync(path.join(outDir, "welcome.html"))).toBe(true);
+  });
+
+  it("refuses to write into the templates folder", async () => {
+    await expect(exportTemplates({ dir: fixture.emails, outDir: fixture.emails })).rejects.toThrow(/holds the templates/);
+  });
+});
diff --git a/packages/preview/test/fixtures/basic/emails/_components/footer.tsx b/packages/preview/test/fixtures/basic/emails/_components/footer.tsx
new file mode 100644
index 00000000..44e3f64d
--- /dev/null
+++ b/packages/preview/test/fixtures/basic/emails/_components/footer.tsx
@@ -0,0 +1,5 @@
+import { Paragraph } from "@unlayer/react-elements";
+
+export function Footer({ company }: { company: string }) {
+  return <Paragraph color="#71717a">Sent with care by {company}</Paragraph>;
+}
diff --git a/packages/preview/test/fixtures/basic/emails/billing/receipt.jsx b/packages/preview/test/fixtures/basic/emails/billing/receipt.jsx
new file mode 100644
index 00000000..63bc8f59
--- /dev/null
+++ b/packages/preview/test/fixtures/basic/emails/billing/receipt.jsx
@@ -0,0 +1,16 @@
+import { Email, Row, Column, Heading, Paragraph, Html } from "@unlayer/react-elements";
+import { money } from "@/lib/format";
+
+export default function Receipt({ total = 4200 }) {
+  return (
+    <Email>
+      <Row>
+        <Column>
+          <Heading>Receipt</Heading>
+          <Paragraph>Total: {money(total)}</Paragraph>
+          <Html html={'<div style="display:flex;gap:8px;background-image:linear-gradient(#fff,#eee)">Paid</div>'} />
+        </Column>
+      </Row>
+    </Email>
+  );
+}
diff --git a/packages/preview/test/fixtures/basic/emails/helpers.ts b/packages/preview/test/fixtures/basic/emails/helpers.ts
new file mode 100644
index 00000000..5ca438d4
--- /dev/null
+++ b/packages/preview/test/fixtures/basic/emails/helpers.ts
@@ -0,0 +1 @@
+export default function helper() { return 1; }
diff --git a/packages/preview/test/fixtures/basic/emails/landing.tsx b/packages/preview/test/fixtures/basic/emails/landing.tsx
new file mode 100644
index 00000000..b09f46c8
--- /dev/null
+++ b/packages/preview/test/fixtures/basic/emails/landing.tsx
@@ -0,0 +1,13 @@
+import { Page, Row, Column, Heading } from "@unlayer/react-elements";
+
+export default function Landing() {
+  return (
+    <Page>
+      <Row>
+        <Column>
+          <Heading>Landing page</Heading>
+        </Column>
+      </Row>
+    </Page>
+  );
+}
diff --git a/packages/preview/test/fixtures/basic/emails/lib/format.ts b/packages/preview/test/fixtures/basic/emails/lib/format.ts
new file mode 100644
index 00000000..db9dfe7d
--- /dev/null
+++ b/packages/preview/test/fixtures/basic/emails/lib/format.ts
@@ -0,0 +1 @@
+export const money = (cents: number) => `$${(cents / 100).toFixed(2)}`;
diff --git a/packages/preview/test/fixtures/basic/emails/plain.js b/packages/preview/test/fixtures/basic/emails/plain.js
new file mode 100644
index 00000000..36e1891c
--- /dev/null
+++ b/packages/preview/test/fixtures/basic/emails/plain.js
@@ -0,0 +1,9 @@
+// A template without JSX: the tests render it directly with Elements too, to compare.
+import { createElement as h } from "react";
+import { Email, Row, Column, Heading, Paragraph } from "@unlayer/react-elements";
+
+export default function Plain({ title = "Plain" }) {
+  return h(Email, null, h(Row, null, h(Column, null, h(Heading, null, title), h(Paragraph, null, "No JSX here."))));
+}
+
+Plain.PreviewProps = { title: "Plain template" };
diff --git a/packages/preview/test/fixtures/basic/emails/static/logo.png b/packages/preview/test/fixtures/basic/emails/static/logo.png
new file mode 100644
index 00000000..0dd1608e
--- /dev/null
+++ b/packages/preview/test/fixtures/basic/emails/static/logo.png
@@ -0,0 +1,2 @@
+�PNG
+
diff --git a/packages/preview/test/fixtures/basic/emails/welcome.tsx b/packages/preview/test/fixtures/basic/emails/welcome.tsx
new file mode 100644
index 00000000..abcc9e18
--- /dev/null
+++ b/packages/preview/test/fixtures/basic/emails/welcome.tsx
@@ -0,0 +1,25 @@
+import { Email, Row, Column, Heading, Paragraph, Button, Image } from "@unlayer/react-elements";
+import { Footer } from "./_components/footer";
+
+interface WelcomeProps {
+  name: string;
+  company: string;
+}
+
+export default function Welcome({ name, company }: WelcomeProps) {
+  return (
+    <Email backgroundColor="#f4f4f5" previewText={`Welcome, ${name}`}>
+      <Row padding="24px">
+        <Column>
+          <Image src="/static/logo.png" alt={company} />
+          <Heading>Welcome, {name}</Heading>
+          <Paragraph>Thanks for joining {company}.</Paragraph>
+          <Button href="https://example.com/start" backgroundColor="#4f46e5">Get started</Button>
+          <Footer company={company} />
+        </Column>
+      </Row>
+    </Email>
+  );
+}
+
+Welcome.PreviewProps = { name: "Ada", company: "Acme" } satisfies WelcomeProps;
diff --git a/packages/preview/test/fixtures/basic/package.json b/packages/preview/test/fixtures/basic/package.json
new file mode 100644
index 00000000..10a6da25
--- /dev/null
+++ b/packages/preview/test/fixtures/basic/package.json
@@ -0,0 +1 @@
+{ "name": "preview-fixture-basic", "private": true, "type": "module" }
diff --git a/packages/preview/test/fixtures/basic/tsconfig.json b/packages/preview/test/fixtures/basic/tsconfig.json
new file mode 100644
index 00000000..ff7086ce
--- /dev/null
+++ b/packages/preview/test/fixtures/basic/tsconfig.json
@@ -0,0 +1 @@
+{ "compilerOptions": { "jsx": "react-jsx", "allowJs": true, "baseUrl": ".", "paths": { "@/*": ["emails/*"] } } }
diff --git a/packages/preview/test/helpers.ts b/packages/preview/test/helpers.ts
new file mode 100644
index 00000000..ad3bf47d
--- /dev/null
+++ b/packages/preview/test/helpers.ts
@@ -0,0 +1,17 @@
+import { cp, mkdir, rm } from "node:fs/promises";
+import path from "node:path";
+import { fileURLToPath } from "node:url";
+
+export const FIXTURE = fileURLToPath(new URL("./fixtures/basic/", import.meta.url));
+const TMP = fileURLToPath(new URL("./.tmp/", import.meta.url));
+
+/**
+ * A copy of the fixture project the test can change. It's inside this package,
+ * so its imports of React and Elements resolve to this package's dependencies.
+ */
+export async function fixtureCopy(name: string): Promise<{ root: string; emails: string; cleanup(): Promise<void> }> {
+  const root = path.join(TMP, `${name}-${process.pid}-${Date.now()}`);
+  await mkdir(TMP, { recursive: true });
+  await cp(FIXTURE, root, { recursive: true });
+  return { root, emails: path.join(root, "emails"), cleanup: () => rm(root, { recursive: true, force: true }) };
+}
diff --git a/packages/preview/test/links.test.ts b/packages/preview/test/links.test.ts
new file mode 100644
index 00000000..42bd2b7a
--- /dev/null
+++ b/packages/preview/test/links.test.ts
@@ -0,0 +1,113 @@
+import path from "node:path";
+import { describe, expect, it } from "vitest";
+import { checkLinks, extractLinks, GMAIL_CLIP_BYTES } from "../src/server/links";
+import { FIXTURE } from "./helpers";
+
+const DIR = path.join(FIXTURE, "emails");
+
+/** A fetch that answers from a table: status, content type and size per URL; unknown URLs fail to connect. */
+function fakeFetch(table: Record<string, { status: number; type?: string; size?: number; url?: string }>): typeof fetch {
+  return (async (input: string | URL | Request) => {
+    const url = String(input);
+    const entry = table[url];
+    if (!entry) throw Object.assign(new TypeError("fetch failed"), { cause: { code: "ENOTFOUND" } });
+    const headers = new Headers();
+    if (entry.type) headers.set("content-type", entry.type);
+    if (entry.size !== undefined) headers.set("content-length", String(entry.size));
+    const res = new Response(null, { status: entry.status, headers });
+    Object.defineProperty(res, "url", { value: entry.url ?? url });
+    return res;
+  }) as typeof fetch;
+}
+
+const html = (body: string) => `<!doctype html><html><body>${body}</body></html>`;
+
+describe("link and image checks", () => {
+  it("finds links and images with the block they're in, and skips Outlook-only copies", () => {
+    const found = extractLinks(
+      html(
+        '<table id="u_content_button_1"><tr><td><!--[if mso]><v:roundrect href="https://example.com/x"></v:roundrect><![endif]--><a href="https://example.com/x">Go <b>now</b></a></td></tr></table>' +
+          '<table id="u_content_image_2"><tr><td><img src="https://example.com/a.png" alt="Logo"></td></tr></table>'
+      )
+    );
+    expect(found).toEqual([
+      expect.objectContaining({ kind: "link", url: "https://example.com/x", block: "Button 1", label: "Go now" }),
+      expect.objectContaining({ kind: "image", url: "https://example.com/a.png", block: "Image 2", alt: "Logo" }),
+    ]);
+  });
+
+  it("reports what's wrong in the HTML itself without requesting anything", async () => {
+    const report = await checkLinks(
+      html(
+        '<a href="#">A</a><a href="">B</a><a href="/pricing">C</a><a href="http://example.com">D</a><a href="http://localhost:3000/x">E</a>' +
+          '<a href="mailto:nobody">F</a><a href="{{unsubscribe_url}}">G</a><a href="https://example.com/start">H</a><a href="https://shop.example/cart">I</a><img src="https://example.com/a.svg"><img src="/static/missing.png" alt="">'
+      ),
+      { dir: DIR, network: false }
+    );
+    const messages = report.findings.map((f) => `${f.level}: ${f.url} ${f.message}`);
+    expect(messages).toEqual(
+      expect.arrayContaining([
+        expect.stringMatching(/^error: # This link goes nowhere/),
+        expect.stringMatching(/^error:  This link goes nowhere/),
+        expect.stringMatching(/^error: \/pricing A relative URL/),
+        expect.stringMatching(/^warning: http:\/\/example.com Not HTTPS/),
+        expect.stringMatching(/^error: http:\/\/localhost:3000\/x It points to localhost/),
+        expect.stringMatching(/^error: mailto:nobody This mailto/),
+        expect.stringMatching(/^info: \{\{unsubscribe_url\}\} A merge tag/),
+        expect.stringMatching(/^warning: https:\/\/example.com\/a.svg Gmail and Outlook don't show SVG/),
+        expect.stringMatching(/^warning: https:\/\/example.com\/a.svg No alt text/),
+        expect.stringMatching(/^info: \/static\/missing.png Empty alt text/),
+        expect.stringMatching(/^warning: https:\/\/example.com\/start A placeholder address/),
+        expect.stringMatching(/^warning: https:\/\/shop.example\/cart A placeholder address/),
+        expect.stringMatching(/^error: \/static\/missing.png There's no static\/missing.png/),
+      ])
+    );
+    expect(report.network).toBe(false);
+    // Errors first.
+    expect(report.findings[0].level).toBe("error");
+  });
+
+  it("accepts the templates folder's static files, and says to host them", async () => {
+    const report = await checkLinks(html('<img src="/static/logo.png" alt="Acme">'), { dir: DIR, network: false });
+    expect(report.findings).toEqual([expect.objectContaining({ level: "info", message: expect.stringMatching(/host the image/) })]);
+  });
+
+  it("requests each URL once (not placeholders), and reports broken links, wrong image types, large images and redirects", async () => {
+    let requests = 0;
+    const table = {
+      "https://acme.dev/ok": { status: 200, type: "text/html" },
+      "https://acme.dev/gone": { status: 404, type: "text/html" },
+      "https://acme.dev/logo.png": { status: 200, type: "text/html" },
+      "https://acme.dev/huge.jpg": { status: 200, type: "image/jpeg", size: 3 * 1024 * 1024 },
+      "https://acme.dev/old": { status: 200, type: "text/html", url: "https://acme.dev/new" },
+    };
+    const fetchTable = fakeFetch(table);
+    const counting: typeof fetch = (input, init) => {
+      requests++;
+      return fetchTable(input, init);
+    };
+    const report = await checkLinks(
+      html(
+        '<a href="https://acme.dev/ok">1</a><a href="https://acme.dev/ok">2</a><a href="https://acme.dev/gone">3</a>' +
+          '<a href="https://nowhere.acme.dev/">4</a><a href="https://acme.dev/old">5</a><a href="https://example.org/plans">6</a>' +
+          '<img src="https://acme.dev/logo.png" alt="Logo"><img src="https://acme.dev/huge.jpg" alt="Huge">'
+      ),
+      { dir: DIR, fetch: counting }
+    );
+    expect(requests).toBe(6);
+    const byUrl = (url: string) => report.findings.filter((f) => f.url === url).map((f) => f.message);
+    expect(byUrl("https://acme.dev/ok")).toEqual([]);
+    expect(byUrl("https://acme.dev/gone")).toEqual(["It answers 404."]);
+    expect(byUrl("https://nowhere.acme.dev/")).toEqual(["The host doesn't exist."]);
+    expect(byUrl("https://acme.dev/logo.png")).toEqual(["It isn't an image (text/html)."]);
+    expect(byUrl("https://acme.dev/huge.jpg")[0]).toMatch(/A large image \(3.0 MB\)/);
+    expect(byUrl("https://acme.dev/old")).toEqual(["It redirects to https://acme.dev/new."]);
+    // A placeholder isn't requested.
+    expect(byUrl("https://example.org/plans")).toEqual([expect.stringMatching(/^A placeholder address/)]);
+  });
+
+  it("warns when Gmail would clip the email", async () => {
+    const report = await checkLinks(html(`<p>${"x".repeat(GMAIL_CLIP_BYTES)}</p>`), { dir: DIR, network: false });
+    expect(report.findings[0]).toMatchObject({ kind: "email", level: "warning", message: expect.stringMatching(/Gmail clips/) });
+  });
+});
diff --git a/packages/preview/test/render.test.ts b/packages/preview/test/render.test.ts
new file mode 100644
index 00000000..e89725ff
--- /dev/null
+++ b/packages/preview/test/render.test.ts
@@ -0,0 +1,144 @@
+import { writeFile } from "node:fs/promises";
+import path from "node:path";
+import { afterAll, afterEach, beforeAll, describe, expect, it, vi } from "vitest";
+import { run } from "../src/cli";
+import { renderTemplates } from "../src/server/render";
+import { UsageError } from "../src/server/errors";
+import { fixtureCopy } from "./helpers";
+
+let fixture: Awaited<ReturnType<typeof fixtureCopy>>;
+
+const NEEDS_FIXES = `import { Email, Row, Column, Button } from "@unlayer/react-elements";
+
+export default function NeedsFixes() {
+  return (
+    <Email>
+      <Row>
+        <Column>
+          <Button href="javascript:alert(1)">Click me</Button>
+        </Column>
+      </Row>
+    </Email>
+  );
+}
+`;
+
+beforeAll(async () => {
+  fixture = await fixtureCopy("render");
+  await writeFile(path.join(fixture.emails, "needs-fixes.tsx"), NEEDS_FIXES);
+  await writeFile(path.join(fixture.emails, "broken.tsx"), "export default function Broken() { return <Email>; }\n");
+});
+
+afterAll(async () => {
+  await fixture?.cleanup();
+});
+
+/** Runs `elements-preview <args>` in-process: what it writes to stdout and stderr, and its exit code. */
+async function cli(args: string[]): Promise<{ stdout: string; stderr: string; code: number }> {
+  let stdout = "";
+  let stderr = "";
+  const out = vi.spyOn(process.stdout, "write").mockImplementation((chunk) => ((stdout += String(chunk)), true));
+  const err = vi.spyOn(process.stderr, "write").mockImplementation((chunk) => ((stderr += String(chunk)), true));
+  const exit = vi.spyOn(process, "exit").mockImplementation(((code?: number) => {
+    throw Object.assign(new Error("exit"), { exitCode: code ?? 0 });
+  }) as never);
+  let code: number;
+  try {
+    await run(args);
+    code = Number(process.exitCode ?? 0);
+  } catch (error) {
+    const exitCode = (error as { exitCode?: number }).exitCode;
+    if (exitCode === undefined) throw error;
+    code = exitCode;
+  } finally {
+    out.mockRestore();
+    err.mockRestore();
+    exit.mockRestore();
+    process.exitCode = undefined;
+  }
+  return { stdout, stderr, code };
+}
+
+afterEach(() => {
+  process.exitCode = undefined;
+});
+
+describe("render", () => {
+  it("gives each template's mode, HTML and design JSON", async () => {
+    const { templates, failed } = await renderTemplates({ dir: fixture.emails, templates: ["welcome.tsx", "landing.tsx"] });
+    expect(failed).toBe(0);
+    expect(templates.map((t) => [t.path, t.mode, t.ok])).toEqual([
+      ["landing.tsx", "web", true],
+      ["welcome.tsx", "email", true],
+    ]);
+    const welcome = templates[1];
+    expect(welcome.file).toBe(path.relative(process.cwd(), path.join(fixture.emails, "welcome.tsx")));
+    expect(welcome.html).toContain("Welcome, Ada");
+    expect(welcome.design).toMatchObject({ body: { rows: expect.any(Array) } });
+    expect(welcome.check).toBeUndefined();
+    expect(welcome.error).toBeUndefined();
+  });
+
+  it("with check, carries check's findings and fails a template with something to fix", async () => {
+    const { templates, failed } = await renderTemplates({ dir: fixture.emails, templates: ["needs-fixes.tsx", "welcome.tsx"], check: true, network: false });
+    expect(failed).toBe(1);
+    const [needsFixes, welcome] = templates;
+    expect(needsFixes).toMatchObject({ path: "needs-fixes.tsx", ok: false, mode: "email", check: { ok: false } });
+    expect(needsFixes.html).toContain("javascript:alert(1)");
+    expect(needsFixes.check?.toFix.map((f) => [f.kind, f.url])).toEqual([["link", "javascript:alert(1)"]]);
+    expect(welcome).toMatchObject({ ok: true, check: { ok: true, toFix: [] } });
+  });
+
+  it("reports a template that doesn't render, with its file and line", async () => {
+    const { templates, failed } = await renderTemplates({ dir: fixture.emails, templates: ["broken.tsx"] });
+    expect(failed).toBe(1);
+    expect(templates[0]).toMatchObject({ path: "broken.tsx", ok: false, mode: null, html: null, design: null, error: { line: 1 } });
+    expect(templates[0].error?.file).toBe(path.relative(process.cwd(), path.join(fixture.emails, "broken.tsx")));
+  });
+
+  it("refuses templates that aren't there", async () => {
+    await expect(renderTemplates({ dir: fixture.emails, templates: ["nope.tsx"] })).rejects.toThrow(UsageError);
+  });
+});
+
+describe("elements-preview render", () => {
+  it("prints one template as one JSON object with --json", async () => {
+    const { stdout, code } = await cli(["render", "welcome.tsx", "--dir", fixture.emails, "--json"]);
+    expect(code).toBe(0);
+    const lines = stdout.trimEnd().split("\n");
+    expect(lines).toHaveLength(1);
+    const template = JSON.parse(lines[0]);
+    expect(Object.keys(template)).toEqual(expect.arrayContaining(["path", "file", "ok", "mode", "html", "design", "warnings"]));
+    expect(template).toMatchObject({ path: "welcome.tsx", ok: true, mode: "email" });
+    expect(template.html).toContain("Welcome, Ada");
+    expect(template.design.body.rows.length).toBeGreaterThan(0);
+  });
+
+  it("prints a line per template for a folder, and exits with 1 when one has something to fix", async () => {
+    const { stdout, code } = await cli(["render", ".", "--dir", fixture.emails, "--json", "--check", "--offline"]);
+    expect(code).toBe(1);
+    const templates = stdout.trimEnd().split("\n").map((line) => JSON.parse(line));
+    expect(templates.map((t) => t.path)).toContain("welcome.tsx");
+    expect(templates.find((t) => t.path === "needs-fixes.tsx")).toMatchObject({ ok: false, check: { ok: false } });
+    expect(templates.find((t) => t.path === "broken.tsx")).toMatchObject({ ok: false, error: { line: 1 } });
+  });
+
+  it("prints one template's HTML without --json", async () => {
+    const { stdout, code } = await cli(["render", "welcome.tsx", "--dir", fixture.emails]);
+    expect(code).toBe(0);
+    expect(stdout).toMatch(/^<!DOCTYPE html PUBLIC/i);
+    expect(stdout).toContain("Welcome, Ada");
+  });
+
+  it("exits with 2 and a JSON error when it can't run", async () => {
+    const missing = await cli(["render", "nope.tsx", "--dir", fixture.emails, "--json"]);
+    expect(missing.code).toBe(2);
+    expect(JSON.parse(missing.stderr).error).toMatch(/No template nope\.tsx/);
+    const none = await cli(["render", "--dir", fixture.emails, "--json"]);
+    expect(none.code).toBe(2);
+    expect(JSON.parse(none.stderr).error).toMatch(/Name the templates to render/);
+    const several = await cli(["render", ".", "--dir", fixture.emails]);
+    expect(several.code).toBe(2);
+    expect(several.stderr).toMatch(/Name one to print its HTML, or pass --json/);
+  });
+});
diff --git a/packages/preview/test/screenshot.test.ts b/packages/preview/test/screenshot.test.ts
new file mode 100644
index 00000000..8de82b30
--- /dev/null
+++ b/packages/preview/test/screenshot.test.ts
@@ -0,0 +1,109 @@
+import { existsSync } from "node:fs";
+import { readFile, writeFile } from "node:fs/promises";
+import path from "node:path";
+import { afterAll, beforeAll, describe, expect, it } from "vitest";
+import { findBrowser } from "../src/server/browser";
+import { takeScreenshots } from "../src/server/screenshot";
+import { fixtureCopy } from "./helpers";
+
+/** A browser on this machine (or CHROME_PATH), or none: the tests below then skip. */
+function installedBrowser(): string | undefined {
+  try {
+    return findBrowser(undefined).path;
+  } catch {
+    return undefined;
+  }
+}
+
+const browser = installedBrowser();
+
+/** A 1×1 PNG. */
+const PNG = Buffer.from("iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8z8BQDwAEhQGAhKmMIQAAAABJRU5ErkJggg==", "base64");
+
+function pngSize(png: Buffer): { width: number; height: number } {
+  expect(png.subarray(1, 4).toString("latin1")).toBe("PNG");
+  return { width: png.readUInt32BE(16), height: png.readUInt32BE(20) };
+}
+
+let fixture: Awaited<ReturnType<typeof fixtureCopy>>;
+
+beforeAll(async () => {
+  fixture = await fixtureCopy("screenshot");
+  // The fixture's logo isn't a real image: one that loads, and a template whose image doesn't.
+  await writeFile(path.join(fixture.emails, "static", "logo.png"), PNG);
+  await writeFile(
+    path.join(fixture.emails, "missing-image.tsx"),
+    `import { Email, Row, Column, Image } from "@unlayer/react-elements";
+export default function MissingImage() {
+  return <Email><Row><Column><Image src="/static/missing.png" alt="Missing" /></Column></Row></Email>;
+}
+`
+  );
+  await writeFile(
+    path.join(fixture.emails, "invoice.tsx"),
+    `import { Document, Row, Column, Heading } from "@unlayer/react-elements";
+export default function Invoice() {
+  return <Document documentSize="Letter" documentOrientation="landscape"><Row><Column><Heading>Invoice</Heading></Column></Row></Document>;
+}
+`
+  );
+});
+
+afterAll(async () => {
+  await fixture?.cleanup();
+});
+
+describe.skipIf(!browser)(`screenshots with ${browser ?? "no browser (skipped)"}`, () => {
+  it("takes desktop, phone and dark mode, full length, with /static/ images", async () => {
+    const outDir = path.join(fixture.root, "shots");
+    const written: string[] = [];
+    const result = await takeScreenshots({
+      dir: fixture.emails,
+      templates: ["welcome.tsx"],
+      outDir,
+      variants: ["desktop", "phone", "dark"],
+      onScreenshot: (_, screenshot) => written.push(screenshot.variant),
+    });
+    expect(result.failed).toBe(0);
+    const [welcome] = result.templates;
+    expect(welcome).toMatchObject({ path: "welcome.tsx", ok: true, mode: "email", warnings: [] });
+    expect(written).toEqual(["desktop", "phone", "dark"]);
+    const files = Object.fromEntries(welcome.screenshots.map((s) => [s.variant, path.resolve(s.file)]));
+    expect(files.desktop).toBe(path.join(outDir, "welcome.desktop.png"));
+    const [desktop, phone, dark] = await Promise.all([readFile(files.desktop), readFile(files.phone), readFile(files.dark)]);
+    expect(pngSize(desktop)).toEqual({ width: 680, height: welcome.screenshots[0].height });
+    expect(pngSize(desktop).height).toBeGreaterThanOrEqual(900);
+    expect(pngSize(phone).width).toBe(375);
+    expect(pngSize(dark).width).toBe(680);
+    // The dark one has the preview's dark colors.
+    expect(dark.equals(desktop)).toBe(false);
+  });
+
+  it("takes a Document at its page width and a page at desktop width, and says when an image doesn't load", async () => {
+    const outDir = path.join(fixture.root, "shots-2");
+    const result = await takeScreenshots({ dir: fixture.emails, templates: ["invoice.tsx", "landing.tsx", "missing-image"], outDir });
+    expect(result.templates.map((t) => [t.path, t.mode, t.screenshots.map((s) => s.width)])).toEqual([
+      ["invoice.tsx", "document", [1056]],
+      ["landing.tsx", "web", [680]],
+      ["missing-image.tsx", "email", [680]],
+    ]);
+    expect(result.templates[2].warnings).toEqual(["The image /static/missing.png didn't load: the screenshot shows it broken."]);
+    expect(existsSync(path.join(outDir, "invoice.desktop.png"))).toBe(true);
+  });
+
+  it("reports a template that doesn't render and takes the others", async () => {
+    await writeFile(path.join(fixture.emails, "broken.tsx"), "export default function Broken() { return <Email>; }\n");
+    const result = await takeScreenshots({ dir: fixture.emails, templates: ["broken.tsx", "plain.js"], outDir: path.join(fixture.root, "shots-3"), width: 600 });
+    expect(result.failed).toBe(1);
+    expect(result.templates[0]).toMatchObject({ path: "broken.tsx", ok: false, screenshots: [] });
+    expect(result.templates[0].error?.line).toBe(1);
+    expect(result.templates[1].screenshots.map((s) => s.width)).toEqual([600]);
+  });
+});
+
+describe("screenshots without what they need", () => {
+  it("refuses a browser that isn't there, and no templates", async () => {
+    await expect(takeScreenshots({ dir: fixture.emails, templates: ["welcome.tsx"], browser: "/nowhere/chrome" })).rejects.toThrow(/There's no browser at \/nowhere\/chrome/);
+    await expect(takeScreenshots({ dir: fixture.emails, templates: [] })).rejects.toThrow(/Name the templates/);
+  });
+});
diff --git a/packages/preview/test/unit.test.ts b/packages/preview/test/unit.test.ts
new file mode 100644
index 00000000..64769c71
--- /dev/null
+++ b/packages/preview/test/unit.test.ts
@@ -0,0 +1,411 @@
+import path from "node:path";
+import { describe, expect, it } from "vitest";
+import { browserCandidates, findBrowser } from "../src/server/browser";
+import { findingLine } from "../src/server/check";
+import { discoverTemplates, isTemplatePath, isTemplateSource, resolveTemplatePath, selectTemplates } from "../src/server/discover";
+import { codeFrame, formatError, stripAnsi, UsageError } from "../src/server/errors";
+import { documentPageWidth, screenshotFile, screenshotVariants } from "../src/server/screenshot";
+import { clientFindings, groupFindings, linkFindings, renderingFindings } from "../shared/findings";
+import { detectMode } from "../src/server/loader";
+import { compareVersions, inspectProject } from "../src/server/project";
+import { featureTokens, sourceLines } from "../src/server/compat";
+import { darkColor, parseColor } from "../shared/darkMode";
+import { aiPrompt } from "../ui/components/aiPrompt";
+import { prepareDesign } from "../ui/editor/prepareDesign";
+import { absoluteStaticUrls, staticPaths } from "../ui/editor/staticUrls";
+import { FIXTURE } from "./helpers";
+
+const EMAILS = path.join(FIXTURE, "emails");
+
+describe("template discovery", () => {
+  it("lists files with an export default, as React Email's preview does", async () => {
+    const templates = await discoverTemplates(EMAILS);
+    expect(templates.map((t) => t.path)).toEqual(["billing/receipt.jsx", "landing.tsx", "plain.js", "welcome.tsx"]);
+    expect(templates.find((t) => t.path === "billing/receipt.jsx")?.name).toBe("receipt");
+  });
+
+  it("skips _ folders, static/, node_modules and .ts files", () => {
+    expect(isTemplatePath("_components/footer.tsx")).toBe(false);
+    expect(isTemplatePath("static/logo.tsx")).toBe(false);
+    expect(isTemplatePath("node_modules/x/index.js")).toBe(false);
+    expect(isTemplatePath("helpers.ts")).toBe(false);
+    expect(isTemplatePath("a/b/c.tsx")).toBe(true);
+    expect(isTemplateSource("export default function A() {}")).toBe(true);
+    expect(isTemplateSource("export function A() {}")).toBe(false);
+  });
+
+  it("only resolves paths inside the templates folder", () => {
+    expect(resolveTemplatePath(EMAILS, "welcome.tsx")).toBe(path.join(EMAILS, "welcome.tsx"));
+    expect(resolveTemplatePath(EMAILS, "../package.json")).toBeUndefined();
+    expect(resolveTemplatePath(EMAILS, "../../outside.tsx")).toBeUndefined();
+    expect(resolveTemplatePath(EMAILS, "/etc/passwd.tsx")).toBeUndefined();
+    expect(resolveTemplatePath(EMAILS, "_components/footer.tsx")).toBeUndefined();
+    expect(resolveTemplatePath(EMAILS, "welcome.tsx\0")).toBeUndefined();
+  });
+});
+
+describe("template selection", () => {
+  const templates = [
+    { path: "billing/receipt.jsx", name: "receipt" },
+    { path: "billing/refund.tsx", name: "refund" },
+    { path: "welcome.tsx", name: "welcome" },
+  ];
+  const root = path.join(path.sep, "project");
+  const dir = path.join(root, "emails");
+
+  it("takes paths in the templates folder or from the working directory, folders, and names without the extension", () => {
+    expect(selectTemplates(dir, [], templates, root).selected).toEqual(templates);
+    expect(selectTemplates(dir, ["welcome.tsx"], templates, root).selected.map((t) => t.path)).toEqual(["welcome.tsx"]);
+    expect(selectTemplates(dir, ["emails/welcome.tsx"], templates, root).selected.map((t) => t.path)).toEqual(["welcome.tsx"]);
+    expect(selectTemplates(dir, [path.join(dir, "welcome.tsx")], templates, root).selected.map((t) => t.path)).toEqual(["welcome.tsx"]);
+    expect(selectTemplates(dir, ["billing"], templates, root).selected.map((t) => t.path)).toEqual(["billing/receipt.jsx", "billing/refund.tsx"]);
+    expect(selectTemplates(dir, ["billing/refund"], templates, root).selected.map((t) => t.path)).toEqual(["billing/refund.tsx"]);
+    expect(selectTemplates(dir, ["."], templates, root).selected).toEqual(templates);
+  });
+
+  it("reports what names no template, including paths outside the folder", () => {
+    expect(selectTemplates(dir, ["welcom.tsx", "welcome.tsx"], templates, root)).toEqual({ selected: [templates[2]], unknown: ["welcom.tsx"] });
+    expect(selectTemplates(dir, ["../package.json"], templates, root).unknown).toEqual(["../package.json"]);
+    // "bill" is a prefix of the folder's name, not a folder.
+    expect(selectTemplates(dir, ["bill"], templates, root).unknown).toEqual(["bill"]);
+  });
+});
+
+describe("check findings", () => {
+  it("sorts what rendering reports: errors to fix, warnings to check, the rest notes", () => {
+    const failed = renderingFindings({ ok: false, error: { message: "boom", file: "emails/a.tsx", line: 3, column: 5, phase: "render" }, logs: [] });
+    expect(failed).toEqual([{ kind: "render", level: "error", message: "boom", file: "emails/a.tsx", line: 3, column: 5, frame: undefined }]);
+    const rendered = renderingFindings(
+      {
+        ok: true,
+        jsonError: "no JSON",
+        textError: "no text",
+        logs: [
+          { level: "error", message: "[Unlayer] <Chart> threw while rendering, so it's left out" },
+          { level: "warn", message: "Column: a column too many" },
+          { level: "log", message: "hello" },
+        ],
+      },
+      ["Elements is old"]
+    );
+    expect(rendered.map((f) => [f.kind, f.level])).toEqual([
+      ["warning", "warning"],
+      ["design", "error"],
+      ["text", "warning"],
+      ["render", "error"],
+      ["warning", "warning"],
+      ["log", "info"],
+    ]);
+    expect(rendered[1].message).toMatch(/won't open in the Unlayer editor: no JSON/);
+    const grouped = groupFindings(rendered);
+    expect([grouped.toFix.length, grouped.toCheck.length, grouped.notes.length]).toEqual([2, 3, 1]);
+  });
+
+  it("lists the template's own compatibility issues to check, with their lines and clients, and links at their level", () => {
+    const clients = [
+      { client: "outlook.windows", label: "Outlook (Windows)", support: "none" as const, notes: [] },
+      { client: "gmail.ios", label: "Gmail (iOS)", support: "partial" as const, notes: ["note"] },
+    ];
+    const compat = {
+      applicable: true as const,
+      issues: [
+        { feature: "display:flex", url: "https://www.caniemail.com/features/css-display-flex/", support: "none" as const, source: "template" as const, clients, locations: [{ block: "Html 1", line: 40 }], sourceLines: [13, 20] },
+        { feature: "@media", support: "partial" as const, source: "elements" as const, clients, locations: [{ block: "Head styles" }] },
+      ],
+    };
+    const [flex, ...rest] = clientFindings(compat);
+    expect(rest).toEqual([]);
+    expect(flex).toMatchObject({ kind: "client", level: "warning", block: "Html 1", line: 13, lines: [13, 20], feature: "display:flex", support: "none" });
+    expect(flex.clients).toEqual([
+      { client: "outlook.windows", label: "Outlook (Windows)", support: "none" },
+      { client: "gmail.ios", label: "Gmail (iOS)", support: "partial" },
+    ]);
+    expect(flex.message).toBe("`display:flex` isn't supported in Outlook (1 client) and only partly in Gmail (1 client): remove it or add a fallback.");
+    expect(clientFindings({ applicable: false, reason: "a page" })).toEqual([]);
+
+    const links = linkFindings({
+      applicable: true,
+      findings: [
+        { kind: "link", level: "error", url: "javascript:alert(1)", message: "Email clients don't run javascript: links.", block: "Button 1", label: "Click me" },
+        { kind: "email", level: "warning", url: "", message: "The HTML is 120 KB" },
+        { kind: "image", level: "info", url: "/static/a.png", message: "Only the preview serves /static/ files" },
+      ],
+    });
+    expect(links.map((f) => [f.kind, f.level, f.url])).toEqual([
+      ["link", "error", "javascript:alert(1)"],
+      ["size", "warning", undefined],
+      ["image", "info", "/static/a.png"],
+    ]);
+    expect(findingLine(links[0])).toBe("Button 1 · “Click me” → javascript:alert(1) · Email clients don't run javascript: links.");
+    expect(findingLine(flex)).toMatch(/^Html 1 · lines 13, 20 · `display:flex` isn't supported/);
+    const [renderError] = renderingFindings({ ok: false, error: { message: "boom\n  at x", file: "emails/a.tsx", line: 3, column: 5, phase: "render" }, logs: [] });
+    expect(findingLine(renderError)).toBe("emails/a.tsx:3:5 · boom");
+  });
+});
+
+describe("Copy for AI", () => {
+  it("lists what's to fix and to check, as the checks count them, and not the notes", () => {
+    const failed = aiPrompt("a.tsx", { ok: false, error: { message: "boom", file: "emails/a.tsx", line: 3, column: 5, phase: "render" }, logs: [{ level: "warn", message: "careful" }], durationMs: 1, source: "x" });
+    expect(failed).toContain("- It throws while rendering (emails/a.tsx:3:5): boom");
+    expect(failed.match(/boom/g)).toHaveLength(1);
+    expect(failed).toContain("- Warning: careful");
+
+    const ok = aiPrompt(
+      "b.tsx",
+      { ok: true, html: "", text: "", json: null, jsonError: "bad", mode: "email", logs: [{ level: "log", message: "hello" }], durationMs: 1, source: "y" },
+      { applicable: true, issues: [{ feature: "display:flex", support: "none", source: "template", clients: [{ client: "outlook.windows", label: "Outlook (Windows)", support: "none", notes: [] }], locations: [{ block: "Html 1" }], sourceLines: [4] }], templateCount: 1, checkedClients: [], durationMs: 1 },
+      { applicable: true, findings: [{ kind: "link", level: "error", url: "#", message: "Goes nowhere.", block: "Button 1" }, { kind: "image", level: "info", url: "/static/a.png", message: "A note." }], links: 1, images: 1, network: false, durationMs: 1 }
+    );
+    expect(ok).toContain("- Error: No design JSON, so it won't open in the Unlayer editor: bad");
+    expect(ok).not.toContain("hello");
+    expect(ok).toContain("- `display:flex` in Html 1 (source lines 4): not supported in Outlook (Windows)");
+    expect(ok).toContain("- Broken: Goes nowhere. (#) in Button 1");
+    expect(ok).not.toContain("A note.");
+  });
+});
+
+describe("browser detection", () => {
+  const only = (...files: string[]) => (file: string) => files.includes(file);
+
+  it("finds Chrome, Chromium, Edge or Brave where each OS installs them", () => {
+    const mac = findBrowser(undefined, { platform: "darwin", env: { HOME: "/Users/ada" }, exists: only("/Applications/Brave Browser.app/Contents/MacOS/Brave Browser") });
+    expect(mac).toMatchObject({ name: "Brave", path: "/Applications/Brave Browser.app/Contents/MacOS/Brave Browser", from: "detected" });
+    expect(findBrowser(undefined, { platform: "darwin", env: { HOME: "/Users/ada" }, exists: only("/Users/ada/Applications/Chromium.app/Contents/MacOS/Chromium") }).name).toBe("Chromium");
+    // Chrome first when there are several.
+    const both = only("/Applications/Google Chrome.app/Contents/MacOS/Google Chrome", "/Applications/Microsoft Edge.app/Contents/MacOS/Microsoft Edge");
+    expect(findBrowser(undefined, { platform: "darwin", env: {}, exists: both }).name).toBe("Chrome");
+
+    const linux = findBrowser(undefined, { platform: "linux", env: { PATH: "/usr/local/bin:/usr/bin" }, exists: only("/usr/bin/chromium-browser") });
+    expect(linux).toMatchObject({ name: "Chromium", path: "/usr/bin/chromium-browser" });
+    expect(findBrowser(undefined, { platform: "linux", env: { PATH: "/usr/bin" }, exists: only("/snap/bin/chromium") }).path).toBe("/snap/bin/chromium");
+
+    const windows = findBrowser(undefined, {
+      platform: "win32",
+      env: { PROGRAMFILES: "C:\\Program Files", "PROGRAMFILES(X86)": "C:\\Program Files (x86)", LOCALAPPDATA: "C:\\Users\\ada\\AppData\\Local" },
+      exists: only("C:\\Program Files (x86)\\Microsoft\\Edge\\Application\\msedge.exe"),
+    });
+    expect(windows).toMatchObject({ name: "Edge", path: "C:\\Program Files (x86)\\Microsoft\\Edge\\Application\\msedge.exe" });
+    expect(browserCandidates("win32", { LOCALAPPDATA: "C:\\L" }).map((c) => c.path)).toContain("C:\\L\\Google\\Chrome\\Application\\chrome.exe");
+  });
+
+  it("uses --browser, then CHROME_PATH: a path, a macOS app or a command on PATH", () => {
+    const chrome = "/Applications/Google Chrome.app/Contents/MacOS/Google Chrome";
+    const env = { CHROME_PATH: "/opt/chrome/chrome", PATH: "/usr/bin" };
+    const exists = only(chrome, "/opt/chrome/chrome", "/opt/edge/msedge", "/usr/bin/chromium");
+    expect(findBrowser("/opt/edge/msedge", { platform: "linux", env, exists })).toMatchObject({ path: "/opt/edge/msedge", from: "--browser" });
+    expect(findBrowser(undefined, { platform: "linux", env, exists })).toMatchObject({ path: "/opt/chrome/chrome", from: "CHROME_PATH" });
+    expect(findBrowser("chromium", { platform: "linux", env, exists }).path).toBe("/usr/bin/chromium");
+    expect(findBrowser("/Applications/Google Chrome.app", { platform: "darwin", env: {}, exists }).path).toBe(chrome);
+    // One that isn't there is an error, not a silent fallback to another browser.
+    expect(() => findBrowser("/nowhere/chrome", { platform: "linux", env, exists })).toThrow(/There's no browser at \/nowhere\/chrome \(from --browser\)/);
+  });
+
+  it("says how to get one when none is installed, without downloading any", () => {
+    let error: unknown;
+    try {
+      findBrowser(undefined, { platform: "linux", env: { PATH: "/usr/bin" }, exists: () => false });
+    } catch (e) {
+      error = e;
+    }
+    expect(error).toBeInstanceOf(UsageError);
+    expect((error as Error).message).toMatch(/Chrome, Chromium, Edge or Brave/);
+    expect((error as Error).message).toMatch(/--browser "\/path\/to\/chrome"/);
+    expect((error as Error).message).toMatch(/CHROME_PATH=/);
+  });
+});
+
+describe("screenshot files", () => {
+  it("names each PNG after the template's path and the variant", () => {
+    expect(screenshotFile("shots", "welcome.tsx", "desktop")).toBe(path.join("shots", "welcome.desktop.png"));
+    expect(screenshotFile("shots", "billing/receipt.jsx", "phone")).toBe(path.join("shots", "billing", "receipt.phone.png"));
+    expect(screenshotFile("/abs/out", "a.b/c.d.tsx", "dark")).toBe(path.join("/abs/out", "a.b", "c.d.dark.png"));
+  });
+
+  it("takes desktop, and phone and dark when asked", () => {
+    expect(screenshotVariants({})).toEqual(["desktop"]);
+    expect(screenshotVariants({ phone: true })).toEqual(["desktop", "phone"]);
+    expect(screenshotVariants({ dark: true })).toEqual(["desktop", "dark"]);
+    expect(screenshotVariants({ all: true })).toEqual(["desktop", "phone", "dark"]);
+  });
+
+  it("takes a Document at its page's width", () => {
+    expect(documentPageWidth({ body: { values: { documentSize: "A4", documentOrientation: "portrait" } } })).toBe(794);
+    expect(documentPageWidth({ body: { values: { documentSize: "Letter", documentOrientation: "landscape" } } })).toBe(1056);
+    expect(documentPageWidth({ body: { values: { documentSize: "Legal" } } })).toBe(816);
+    expect(documentPageWidth(null)).toBe(794);
+  });
+});
+
+describe("project", () => {
+  it("finds the project's Elements and React", () => {
+    const project = inspectProject(EMAILS);
+    expect(project.root).toBe(FIXTURE.replace(/\/$/, ""));
+    expect(project.elementsVersion).toMatch(/^\d+\.\d+\.\d+/);
+    expect(project.reactVersion).toMatch(/^18\./);
+    expect(project.canRender).toBe(true);
+    expect(project.warnings).toEqual([]);
+  });
+
+  it("compares versions", () => {
+    expect(compareVersions("0.1.22", "0.2.0")).toBe(-1);
+    expect(compareVersions("0.2.0", "0.2.0")).toBe(0);
+    expect(compareVersions("0.10.0", "0.2.0")).toBe(1);
+    expect(compareVersions("0.2.0-beta.1", "0.2.0")).toBe(0);
+  });
+});
+
+describe("errors", () => {
+  it("reads Oxc's syntax errors: the message, the file and position, and its drawing of the lines", () => {
+    const message = [
+      "Transform failed with 1 error:",
+      "",
+      "[PARSE_ERROR] Expected corresponding JSX closing tag for 'Heading'.",
+      "    ╭─[ emails/welcome.tsx:15:37 ]",
+      "    │",
+      " 15 │           <Heading>Welcome, {name}</Headin>",
+      "────╯",
+    ].join("\n");
+    // Oxc writes the path relative to the working directory; the preview shows it relative to the project.
+    const error = formatError(new Error(message), process.cwd(), "load");
+    expect(error).toMatchObject({ message: "Expected corresponding JSX closing tag for 'Heading'.", file: "emails/welcome.tsx", line: 15, column: 37, phase: "load" });
+    expect(error.frame).toContain("<Heading>Welcome, {name}</Headin>");
+  });
+
+  it("points a runtime error at the first frame in the project's files", () => {
+    const error = new Error("boom");
+    error.stack = [
+      "Error: boom",
+      "    at render (/project/node_modules/react-dom/server.js:10:5)",
+      "    at Welcome (/project/emails/welcome.tsx:27:21)",
+    ].join("\n");
+    expect(formatError(error, "/project", "render")).toMatchObject({ file: "emails/welcome.tsx", line: 27, column: 21 });
+  });
+
+  it("strips terminal colors and draws code frames", () => {
+    expect(stripAnsi("\u001b[31mred\u001b[39m")).toBe("red");
+    const frame = codeFrame(path.join(EMAILS, "welcome.tsx"), 3, 5);
+    expect(frame).toContain("> 3 |");
+    expect(frame).toMatch(/\|\s{5}\^/);
+  });
+});
+
+describe("modes", () => {
+  it("tells the mode from the document Elements renders", () => {
+    expect(detectMode('<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional //EN"><html xmlns:v="urn:schemas-microsoft-com:vml">')).toBe("email");
+    expect(detectMode("<!doctype html>\n<html>")).toBe("web");
+    expect(detectMode('<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional //EN"><html xmlns="http://www.w3.org/1999/xhtml">')).toBe("document");
+  });
+});
+
+describe("emulated dark mode", () => {
+  const lightness = (color: string) => {
+    const [r, g, b] = parseColor(color)!;
+    return 0.2126 * r + 0.7152 * g + 0.0722 * b;
+  };
+
+  it("reads the CSS colors emails use", () => {
+    expect(parseColor("#fff")).toEqual([1, 1, 1, 1]);
+    expect(parseColor("#00000080")?.[3]).toBeCloseTo(0.5, 2);
+    expect(parseColor("rgb(255, 0, 0)")).toEqual([1, 0, 0, 1]);
+    expect(parseColor("rgba(0 0 0 / 50%)")).toEqual([0, 0, 0, 0.5]);
+    expect(parseColor("hsl(0, 100%, 50%)")?.slice(0, 3).map((c) => Math.round(c * 255))).toEqual([255, 0, 0]);
+    expect(parseColor("white")).toEqual([1, 1, 1, 1]);
+    expect(parseColor("currentColor")).toBeUndefined();
+  });
+
+  it("partial: darkens light backgrounds and lightens dark text, and leaves the rest", () => {
+    expect(lightness(darkColor("#ffffff", "background", "partial"))).toBeLessThan(0.1);
+    expect(lightness(darkColor("#000000", "text", "partial"))).toBeGreaterThan(0.7);
+    // A dark brand background and light text are already readable on dark: unchanged.
+    expect(darkColor("#1e1b4b", "background", "partial")).toBe("#1e1b4b");
+    expect(darkColor("#ffffff", "text", "partial")).toBe("#ffffff");
+  });
+
+  it("full: flips every background and text color", () => {
+    expect(lightness(darkColor("#1e1b4b", "background", "full"))).toBeGreaterThan(0.5);
+    expect(lightness(darkColor("#ffffff", "text", "full"))).toBeLessThan(0.1);
+    expect(lightness(darkColor("#ffffff", "background", "full"))).toBeLessThan(0.1);
+  });
+
+  it("keeps the hue and the transparency", () => {
+    const [r, g, b, a] = parseColor(darkColor("rgba(79, 70, 229, 0.5)", "background", "full"))!;
+    expect(a).toBeCloseTo(0.5, 2);
+    expect(b).toBeGreaterThan(r);
+    expect(b).toBeGreaterThan(g);
+  });
+});
+
+describe("compatibility source lines", () => {
+  it("looks for a feature's property in both spellings, a value, or an element", () => {
+    expect(featureTokens("background-image")).toEqual(expect.arrayContaining(["background-image", "backgroundImage"]));
+    expect(featureTokens("display:flex")).toEqual(expect.arrayContaining(["display", "flex"]));
+    expect(featureTokens("gap, column-gap, row-gap")).toEqual(expect.arrayContaining(["gap", "columnGap", "row-gap"]));
+    expect(featureTokens("<body> element")).toEqual(["<body"]);
+    expect(featureTokens("role attribute")).toEqual(["role="]);
+  });
+
+  it("finds the template lines that bring a feature in", () => {
+    const source = ['import { Html } from "@unlayer/react-elements";', "", "<Html html={'<div style=\"display:flex;gap:8px\">'} />", "<Row backgroundImage={hero} />"].join("\n");
+    expect(sourceLines("display:flex", source)).toEqual([3]);
+    expect(sourceLines("gap, column-gap, row-gap", source)).toEqual([3]);
+    expect(sourceLines("background-image", source)).toEqual([4]);
+    expect(sourceLines("border-radius", source)).toEqual([]);
+  });
+});
+
+describe("the design the editor gets", () => {
+  const design = {
+    body: {
+      rows: [
+        {
+          values: { backgroundImage: { url: "/static/hero.png", fullWidth: true } },
+          columns: [
+            {
+              contents: [
+                { type: "image", values: { src: { url: "/static/logo.png", width: 120 }, altText: "/static/ in alt text stays" } },
+                { type: "image", values: { src: { url: "https://cdn.example.com/static/remote.png" } } },
+                { type: "html", values: { html: '<img src="/static/logo.png" alt=""><div style="background-image: url(\'/static/hero.png\')">' } },
+              ],
+            },
+          ],
+        },
+      ],
+      values: { backgroundColor: "#ffffff" },
+    },
+  };
+
+  it("makes the /static/ URLs absolute on the preview, and nothing else", () => {
+    const rewritten = absoluteStaticUrls(design, "http://localhost:3000/");
+    const row = rewritten.body.rows[0];
+    expect(row.values.backgroundImage).toEqual({ url: "http://localhost:3000/static/hero.png", fullWidth: true });
+    const [image, remote, html] = row.columns[0].contents;
+    expect(image.values.src).toEqual({ url: "http://localhost:3000/static/logo.png", width: 120 });
+    expect(image.values.altText).toBe("/static/ in alt text stays");
+    expect(remote.values.src?.url).toBe("https://cdn.example.com/static/remote.png");
+    expect(html.values.html).toBe('<img src="http://localhost:3000/static/logo.png" alt=""><div style="background-image: url(\'http://localhost:3000/static/hero.png\')">');
+    expect(rewritten.body.values).toEqual({ backgroundColor: "#ffffff" });
+    // A copy: the render's design is unchanged.
+    expect(design.body.rows[0].values.backgroundImage.url).toBe("/static/hero.png");
+  });
+
+  it("resolves them next to a static build, under any path", () => {
+    const rewritten = absoluteStaticUrls(design, "https://example.com/emails/preview/");
+    expect(rewritten.body.rows[0].values.backgroundImage.url).toBe("https://example.com/emails/preview/static/hero.png");
+    expect(staticPaths(design)).toEqual(["/static/hero.png", "/static/logo.png"]);
+  });
+
+  it("copies the static files in as data: URLs, keeping the absolute URL of one it can't read", async () => {
+    const requested: string[] = [];
+    const fetcher = (async (url: string) => {
+      requested.push(url);
+      if (url.endsWith("/logo.png")) return new Response(new Uint8Array([137, 80, 78, 71]), { headers: { "content-type": "image/png" } });
+      return new Response("Not found", { status: 404 });
+    }) as typeof fetch;
+    const prepared = await prepareDesign(design, "http://localhost:3000/", fetcher);
+    expect(requested.sort()).toEqual(["http://localhost:3000/static/hero.png", "http://localhost:3000/static/logo.png"]);
+    const [image, , html] = prepared.body.rows[0].columns[0].contents;
+    expect(image.values.src?.url).toBe("data:image/png;base64,iVBORw==");
+    expect(html.values.html).toContain('<img src="data:image/png;base64,iVBORw=="');
+    expect(prepared.body.rows[0].values.backgroundImage.url).toBe("http://localhost:3000/static/hero.png");
+  });
+});
diff --git a/packages/preview/tsconfig.json b/packages/preview/tsconfig.json
new file mode 100644
index 00000000..c30a050d
--- /dev/null
+++ b/packages/preview/tsconfig.json
@@ -0,0 +1,10 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "compilerOptions": {
+    "jsx": "react-jsx",
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "target": "ES2022",
+    "types": ["node"]
+  },
+  "include": ["src/**/*", "shared/**/*", "ui/**/*", "test/**/*.ts", "*.config.ts"]
+}
diff --git a/packages/preview/tsup.config.ts b/packages/preview/tsup.config.ts
new file mode 100644
index 00000000..b9f01ca1
--- /dev/null
+++ b/packages/preview/tsup.config.ts
@@ -0,0 +1,17 @@
+import { defineConfig } from "tsup";
+
+export default defineConfig({
+  // dark-mode.js is the preview's dark mode simulation as a module on its own: `screenshot --dark` loads it into
+  // the page it captures (nothing else imports it, so it stays one self-contained file).
+  entry: { bin: "src/bin.ts", cli: "src/cli.ts", index: "src/index.ts", "dark-mode": "shared/darkMode.ts" },
+  format: ["esm"],
+  target: "node20",
+  platform: "node",
+  dts: { entry: "src/index.ts" },
+  splitting: true,
+  // The preview app builds into dist/ui after this: keep it out of tsup's clean.
+  clean: ["!ui/**"],
+  // Loaded at run time: Vite, Prettier, caniemail and Puppeteer from this package's
+  // dependencies; Elements and React only ever from the project.
+  external: ["vite", "prettier", "caniemail", "htmlparser2", "puppeteer-core", "react", "react-dom", "@unlayer/react-elements", "./cli.js"],
+});
diff --git a/packages/preview/ui/App.tsx b/packages/preview/ui/App.tsx
new file mode 100644
index 00000000..b7f55435
--- /dev/null
+++ b/packages/preview/ui/App.tsx
@@ -0,0 +1,239 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+import { api, STATIC, type Meta, type RenderOk, type RenderResponse, type TemplateEntry } from "./api";
+import { aiPrompt } from "./components/aiPrompt";
+import { ChecksDrawer, type DrawerTab } from "./components/checks/ChecksDrawer";
+import { ClientChecks } from "./components/checks/ClientChecks";
+import { LinkChecks } from "./components/checks/LinkChecks";
+import { RenderingChecks } from "./components/checks/RenderingChecks";
+import { clientsSummary, combine, linksSummary, renderingSummary } from "./components/checks/summary";
+import { CodeView, type CodeTab } from "./components/CodeView";
+import { EditorView } from "./components/EditorView";
+import { ErrorView } from "./components/ErrorView";
+import { copyText } from "./components/files";
+import { NoTemplates } from "./components/NoTemplates";
+import { PreviewFrame } from "./components/PreviewFrame";
+import { PropsEditor } from "./components/PropsEditor";
+import { Sidebar } from "./components/Sidebar";
+import type { DarkVariant } from "./components/topbar/DarkToggle";
+import { DEVICE_WIDTH, type Device } from "./components/topbar/DeviceToggle";
+import { TopBar } from "./components/topbar/TopBar";
+import { VIEWS, type View } from "./components/topbar/ViewSwitch";
+import { useCheck } from "./hooks/useCheck";
+import { useLiveChanges } from "./hooks/useLiveChanges";
+import { useSelectedTemplate } from "./hooks/useSelectedTemplate";
+import { useShortcuts } from "./hooks/useShortcuts";
+import { oneOf, useStoredState } from "./hooks/useStoredState";
+
+export function App() {
+  const [meta, setMeta] = useState<Meta>();
+  const [templates, setTemplates] = useState<TemplateEntry[]>();
+  const [selected, select] = useSelectedTemplate();
+  const [result, setResult] = useState<RenderResponse>();
+  const [rendering, setRendering] = useState(false);
+  const [overrides, setOverrides] = useState<Record<string, unknown>>({});
+  // Each template's last successful render: its props stay editable while the file doesn't compile.
+  const [lastOk, setLastOk] = useState<Record<string, RenderOk>>({});
+  const renderSeq = useRef(0);
+  const [version, setVersion] = useState(0);
+
+  const [view, setView] = useStoredState<View>("view", "preview", oneOf(["preview", "editor", "code"]));
+  const [codeTab, setCodeTab] = useStoredState<CodeTab>("codeTab", "html", oneOf(["source", "html", "text", "json"]));
+  const [device, setDevice] = useStoredState<Device>("device", "desktop", oneOf(["desktop", "phone"]));
+  const [width, setWidth] = useStoredState<number>("frameWidth", 0, (v) => typeof v === "number" && v >= 0);
+  const [dark, setDark] = useStoredState<boolean>("dark", false, (v) => typeof v === "boolean");
+  const [darkVariant, setDarkVariant] = useStoredState<DarkVariant>("darkVariant", "full", oneOf(["full", "partial"]));
+  // Closed on every load: the checks never open by themselves.
+  const [drawerOpen, setDrawerOpen] = useState(false);
+  const [drawerTab, setDrawerTab] = useState<DrawerTab>("checks");
+  // The editor loads the first time its view opens, then stays loaded.
+  const [editorOpened, setEditorOpened] = useState(view === "editor");
+  const filterRef = useRef<HTMLInputElement>(null);
+
+  useEffect(() => {
+    api.meta().then(setMeta).catch(() => undefined);
+    api.templates().then((r) => setTemplates(r.templates)).catch(() => setTemplates([]));
+  }, []);
+
+  // Open the first template when none is selected (or the selected one is gone).
+  useEffect(() => {
+    if (!templates?.length) return;
+    if (!selected || !templates.some((t) => t.path === selected)) select(templates[0].path, true);
+  }, [templates, selected, select]);
+
+  const render = useCallback(async (path: string, props: unknown) => {
+    const seq = ++renderSeq.current;
+    setRendering(true);
+    try {
+      const next = await api.render(path, props);
+      if (seq !== renderSeq.current) return;
+      setResult(next);
+      if (next.ok) setLastOk((all) => ({ ...all, [path]: next }));
+      setVersion((v) => v + 1);
+    } catch (error) {
+      if (seq !== renderSeq.current) return;
+      setResult({ ok: false, logs: [], durationMs: 0, error: { message: (error as Error).message, phase: "load" } });
+    } finally {
+      if (seq === renderSeq.current) setRendering(false);
+    }
+  }, []);
+
+  const override = selected ? overrides[selected] : undefined;
+  useEffect(() => {
+    if (selected && templates?.some((t) => t.path === selected)) void render(selected, override);
+  }, [selected, override, templates, render]);
+
+  // Any file can change what a template renders (a shared component, a data file): a new template list renders
+  // the selected template again (the effect above).
+  const live = useLiveChanges((event) => setTemplates(event.templates));
+
+  // The checks of each successful render run by themselves, for the Checks button's count.
+  const checkKey = selected && result?.ok ? `${selected}|${version}` : undefined;
+  const compat = useCheck(() => api.compat(selected!, override), checkKey, selected, true);
+  const links = useCheck(() => api.links(selected!, override), checkKey, selected, true);
+
+  const okResult = result?.ok ? result : undefined;
+  const warnings = meta?.warnings ?? [];
+  const rendered = renderingSummary(result, warnings);
+  const checks = okResult ? combine([rendered, clientsSummary(compat.report), linksSummary(links.report)]) : rendered;
+
+  const copyForAi = async (): Promise<boolean> => {
+    if (!selected || !result) return false;
+    const [compatReport, linksReport] = await Promise.all([compat.run(), links.run()]);
+    return copyText(aiPrompt(selected, result, compatReport, linksReport));
+  };
+
+  const showView = useCallback(
+    (next: View) => {
+      if (next === "editor") setEditorOpened(true);
+      setView(next);
+    },
+    [setView]
+  );
+  const showDevice = (next: Device) => {
+    setDevice(next);
+    setWidth(DEVICE_WIDTH[next]);
+  };
+
+  useShortcuts({
+    "/": () => filterRef.current?.focus(),
+    ...Object.fromEntries(VIEWS.map((v) => [v.key, () => showView(v.id)])),
+    d: () => view === "preview" && showDevice(device === "desktop" ? "phone" : "desktop"),
+    t: () => view === "preview" && setDark(!dark),
+    ".": () => setDrawerOpen(!drawerOpen),
+    ...(drawerOpen ? { Escape: () => setDrawerOpen(false) } : {}),
+  });
+
+  useEffect(() => {
+    const name = selected?.split("/").pop()?.replace(/\.[^.]+$/, "");
+    document.title = name ? `${name} · Elements preview` : "Elements preview";
+  }, [selected]);
+
+  const loadingFirst = !result && (rendering || !templates);
+  const failed = result && !result.ok ? result : undefined;
+
+  return (
+    <div className="app">
+      <Sidebar templates={templates} selected={selected} dir={meta?.dir} onSelect={(path) => select(path)} filterRef={filterRef} />
+      <main className="main">
+        <TopBar
+          templatePath={selected}
+          result={result}
+          mode={(okResult ?? (selected ? lastOk[selected] : undefined))?.mode}
+          live={live}
+          builtAt={meta?.builtAt}
+          view={view}
+          onView={showView}
+          device={device}
+          onDevice={showDevice}
+          dark={dark}
+          onDarkToggle={() => setDark(!dark)}
+          darkVariant={darkVariant}
+          onDarkVariant={(variant) => {
+            setDarkVariant(variant);
+            setDark(true);
+          }}
+          checks={checks}
+          drawerOpen={drawerOpen}
+          onDrawer={() => setDrawerOpen(!drawerOpen)}
+          onCopyForAi={result ? copyForAi : undefined}
+        />
+        {warnings.length > 0 && (
+          <div className="banner" role="status">
+            {warnings.map((w) => (
+              <div key={w}>{w}</div>
+            ))}
+          </div>
+        )}
+        <div className="workspace">
+          <div className="content">
+            {rendering && <div className="progress" aria-hidden />}
+            {templates && templates.length === 0 ? (
+              <NoTemplates dir={meta?.dir} />
+            ) : loadingFirst ? (
+              <div className="empty muted">
+                <span className="spinner" aria-hidden /> Rendering…
+              </div>
+            ) : failed ? (
+              <ErrorView error={failed.error} />
+            ) : okResult && selected ? (
+              view === "code" ? (
+                <CodeView result={okResult} templatePath={selected} tab={codeTab} onTab={setCodeTab} />
+              ) : view === "preview" ? (
+                <PreviewFrame
+                  html={okResult.html}
+                  width={width}
+                  dark={dark ? darkVariant : "off"}
+                  onWidthChange={setWidth}
+                  onResetWidth={() => setWidth(DEVICE_WIDTH[device])}
+                />
+              ) : null
+            ) : null}
+            {editorOpened && <EditorView result={okResult} projectId={meta?.projectId} active={view === "editor" && !failed && !!okResult} />}
+          </div>
+          {drawerOpen && (
+            <ChecksDrawer
+              tab={drawerTab}
+              onTab={setDrawerTab}
+              onClose={() => setDrawerOpen(false)}
+              checks={
+                <div className="checks">
+                  <RenderingChecks result={result} warnings={warnings} />
+                  {okResult && (
+                    <>
+                      <ClientChecks report={compat.report} stale={compat.stale} loading={compat.loading} error={compat.error} />
+                      <LinkChecks
+                        report={links.report}
+                        stale={links.stale}
+                        loading={links.loading}
+                        error={links.error}
+                        onRecheck={STATIC ? undefined : () => void links.run(true)}
+                      />
+                    </>
+                  )}
+                </div>
+              }
+              props={
+                <PropsEditor
+                  props={selected ? (overrides[selected] ?? lastOk[selected]?.props) : undefined}
+                  previewProps={selected ? (lastOk[selected]?.previewProps ?? result?.previewProps) : undefined}
+                  edited={selected !== undefined && overrides[selected] !== undefined}
+                  rendered={selected !== undefined && lastOk[selected] !== undefined}
+                  readOnly={STATIC}
+                  onApply={(props) => selected && setOverrides((o) => ({ ...o, [selected]: props }))}
+                  onReset={() =>
+                    selected &&
+                    setOverrides((o) => {
+                      const next = { ...o };
+                      delete next[selected];
+                      return next;
+                    })
+                  }
+                />
+              }
+            />
+          )}
+        </div>
+      </main>
+    </div>
+  );
+}
diff --git a/packages/preview/ui/api.ts b/packages/preview/ui/api.ts
new file mode 100644
index 00000000..09e705dd
--- /dev/null
+++ b/packages/preview/ui/api.ts
@@ -0,0 +1,135 @@
+/** The preview server's API, as the app uses it. */
+
+export interface TemplateEntry {
+  path: string;
+  name: string;
+}
+
+export interface Meta {
+  dir: string;
+  root?: string;
+  /** A static build (no server): no live updates, no other props, no URL requests. */
+  static?: boolean;
+  builtAt?: string;
+  elementsVersion?: string;
+  reactVersion?: string;
+  tailwind: boolean;
+  warnings: string[];
+  /** The Unlayer project the Editor view opens designs in (`--project-id`); none: the editor's defaults. */
+  projectId?: number;
+}
+
+export interface LogEntry {
+  level: "error" | "warn" | "info" | "log";
+  message: string;
+}
+
+export interface TemplateError {
+  message: string;
+  file?: string;
+  line?: number;
+  column?: number;
+  frame?: string;
+  stack?: string;
+  phase: "load" | "render";
+}
+
+export type RenderMode = "email" | "web" | "document";
+
+export interface RenderOk {
+  ok: true;
+  html: string;
+  text: string;
+  json: unknown;
+  jsonError?: string;
+  textError?: string;
+  mode: RenderMode;
+  logs: LogEntry[];
+  durationMs: number;
+  previewProps?: unknown;
+  props?: unknown;
+  source: string;
+}
+
+export interface RenderFailed {
+  ok: false;
+  error: TemplateError;
+  logs: LogEntry[];
+  durationMs: number;
+  previewProps?: unknown;
+  source?: string;
+}
+
+export type RenderResponse = RenderOk | RenderFailed;
+
+export interface CompatIssue {
+  feature: string;
+  url?: string;
+  support: "none" | "partial";
+  source: "template" | "elements";
+  clients: Array<{ client: string; label: string; support: "none" | "partial"; notes: string[] }>;
+  locations: Array<{ block: string; line?: number }>;
+  sourceLines?: number[];
+}
+
+export type CompatResponse =
+  | { applicable: true; issues: CompatIssue[]; templateCount: number; checkedClients: string[]; durationMs: number }
+  | { applicable: false; reason: string };
+
+export interface LinkFinding {
+  kind: "link" | "image" | "email";
+  level: "error" | "warning" | "info";
+  url: string;
+  message: string;
+  block?: string;
+  label?: string;
+  status?: number;
+}
+
+export type LinksResponse =
+  | { applicable: true; findings: LinkFinding[]; links: number; images: number; network: boolean; durationMs: number }
+  | { applicable: false; reason: string };
+
+/** Whether this is a static build of the preview (see `elements-preview build`). */
+export const STATIC = (window as unknown as { __ELEMENTS_PREVIEW_STATIC__?: boolean }).__ELEMENTS_PREVIEW_STATIC__ === true;
+
+/**
+ * Where the preview is: the server's address, or the folder a static build is
+ * hosted in (its static/ folder sits next to index.html, under any path).
+ */
+export function previewRoot(): string {
+  return STATIC ? new URL("./", window.location.href).href : `${window.location.origin}/`;
+}
+
+/** A template's data file in a static build: api/<kind>/<path>.json. */
+function staticFile(kind: string, path: string): string {
+  return `./api/${kind}/${path.split("/").map(encodeURIComponent).join("/")}.json`;
+}
+
+async function getJson<T>(url: string): Promise<T> {
+  const res = await fetch(url);
+  if (!res.ok) throw new Error(`${res.status} ${res.statusText}`);
+  return res.json();
+}
+
+async function post<T>(path: string, body: unknown): Promise<T> {
+  const res = await fetch(path, { method: "POST", headers: { "content-type": "application/json" }, body: JSON.stringify(body) });
+  if (!res.ok) throw new Error((await res.json().catch(() => ({})))?.error ?? `${res.status} ${res.statusText}`);
+  return res.json();
+}
+
+export const api = STATIC
+  ? {
+      meta: (): Promise<Meta> => getJson("./api/meta.json"),
+      templates: (): Promise<{ templates: TemplateEntry[] }> => getJson("./api/templates.json"),
+      render: (path: string): Promise<RenderResponse> => getJson(staticFile("render", path)),
+      compat: (path: string): Promise<CompatResponse> => getJson(staticFile("compat", path)),
+      links: (path: string): Promise<LinksResponse> => getJson(staticFile("links", path)),
+    }
+  : {
+      meta: (): Promise<Meta> => getJson("/api/meta"),
+      templates: (): Promise<{ templates: TemplateEntry[] }> => getJson("/api/templates"),
+      render: (path: string, props?: unknown): Promise<RenderResponse> => post("/api/render", { path, props }),
+      compat: (path: string, props?: unknown): Promise<CompatResponse> => post("/api/compat", { path, props }),
+      links: (path: string, props?: unknown): Promise<LinksResponse> => post("/api/links", { path, props }),
+    };
diff --git a/packages/preview/ui/components/CodeView.tsx b/packages/preview/ui/components/CodeView.tsx
new file mode 100644
index 00000000..5cea44fc
--- /dev/null
+++ b/packages/preview/ui/components/CodeView.tsx
@@ -0,0 +1,91 @@
+import { useMemo, useState } from "react";
+import type { RenderOk } from "../api";
+import { copyText, downloadText, formatJson } from "./files";
+import { CopyIcon, DownloadIcon } from "./icons";
+import { Tip } from "./Tip";
+import { highlight, sourceLanguage, type CodeLanguage } from "./highlight";
+
+export type CodeTab = "source" | "html" | "text" | "json";
+
+interface CodeViewProps {
+  result: RenderOk;
+  templatePath: string;
+  tab: CodeTab;
+  onTab(tab: CodeTab): void;
+}
+
+const TABS: Array<{ id: CodeTab; label: string }> = [
+  { id: "source", label: "Source" },
+  { id: "html", label: "HTML" },
+  { id: "text", label: "Plain text" },
+  { id: "json", label: "Design JSON" },
+];
+
+export function codeFor(result: RenderOk, tab: CodeTab): { text: string; ext: string; type: string; note?: string } {
+  switch (tab) {
+    case "source":
+      return { text: result.source, ext: "", type: "text/plain" };
+    case "html":
+      return { text: result.html, ext: "html", type: "text/html" };
+    case "text":
+      return { text: result.text, ext: "txt", type: "text/plain", note: result.textError };
+    case "json":
+      return { text: formatJson(result.json), ext: "json", type: "application/json", note: result.jsonError };
+  }
+}
+
+export function CodeView({ result, templatePath, tab, onTab }: CodeViewProps) {
+  const [copied, setCopied] = useState(false);
+  const code = codeFor(result, tab);
+  const base = templatePath.split("/").pop() ?? "template";
+  const filename = tab === "source" ? base : `${base.replace(/\.[^.]+$/, "")}.${code.ext}`;
+  const lines = code.text.split("\n");
+  const language: CodeLanguage = tab === "source" ? sourceLanguage(templatePath) : tab === "html" ? "html" : tab === "json" ? "json" : "text";
+  const html = useMemo(() => highlight(code.text, language), [code.text, language]);
+
+  return (
+    <div className="code-view">
+      <div className="code-bar">
+        <div className="tabs" role="tablist" aria-label="Code">
+          {TABS.map((t) => (
+            <button key={t.id} role="tab" aria-selected={tab === t.id} onClick={() => onTab(t.id)}>
+              {t.label}
+            </button>
+          ))}
+        </div>
+        <div className="spacer" />
+        <Tip label={copied ? "Copied" : "Copy to the clipboard"} align="end">
+          <button
+            className="button"
+            aria-label={copied ? "Copied" : "Copy"}
+            onClick={async () => {
+              if (await copyText(code.text)) {
+                setCopied(true);
+                setTimeout(() => setCopied(false), 1200);
+              }
+            }}
+          >
+            <CopyIcon />
+            <span className="label">{copied ? "Copied" : "Copy"}</span>
+          </button>
+        </Tip>
+        <Tip label={`Download ${filename}`} align="end">
+          <button className="button" aria-label="Download" onClick={() => downloadText(filename, code.text, code.type)}>
+            <DownloadIcon />
+            <span className="label">Download</span>
+          </button>
+        </Tip>
+      </div>
+      {code.note && <div className="code-note">{code.note}</div>}
+      <div className="code">
+        <pre className="code-gutter" aria-hidden>
+          {lines.map((_, i) => i + 1).join("\n")}
+        </pre>
+        {/* Prism escapes the code; the markup is only its token spans. */}
+        <pre className={`code-text language-${language}`}>
+          <code dangerouslySetInnerHTML={{ __html: html }} />
+        </pre>
+      </div>
+    </div>
+  );
+}
diff --git a/packages/preview/ui/components/EditorView.tsx b/packages/preview/ui/components/EditorView.tsx
new file mode 100644
index 00000000..eb6ef4c2
--- /dev/null
+++ b/packages/preview/ui/components/EditorView.tsx
@@ -0,0 +1,63 @@
+import { useMemo, useRef } from "react";
+import { previewRoot, type RenderOk } from "../api";
+import { EMBED_URL } from "../editor/unlayerEmbed";
+import { useUnlayerEditor } from "../editor/useUnlayerEditor";
+import { AlertIcon, InfoIcon } from "./icons";
+
+interface EditorViewProps {
+  /** The template's current render, when it succeeded. */
+  result?: RenderOk;
+  projectId?: number;
+  /** Whether the view is on screen (it stays loaded, hidden, while another view is). */
+  active: boolean;
+}
+
+/** The template's design JSON in the Unlayer editor, to check how it opens there. */
+export function EditorView({ result, projectId, active }: EditorViewProps) {
+  const host = useRef<HTMLDivElement>(null);
+  const root = useMemo(previewRoot, []);
+  const design = result && !result.jsonError ? result.json : undefined;
+  const { state, error, retry } = useUnlayerEditor(host, { mode: result?.mode, design, projectId, active, root });
+
+  return (
+    <div className="editor-view" hidden={!active}>
+      <div className="editor-note" role="note">
+        <InfoIcon />
+        <span>
+          Changes here aren't saved to your file. <span className="muted">Each render loads the template's design again.</span>
+        </span>
+      </div>
+      <div className="editor-stage">
+        <div className="editor-host" ref={host} />
+        {result?.jsonError ? (
+          <div className="editor-overlay">
+            <div className="notice">
+              <AlertIcon />
+              <h2>This template has no design JSON</h2>
+              <p>The editor opens what Elements' renderToJson makes, and it failed for this template:</p>
+              <pre>{result.jsonError}</pre>
+            </div>
+          </div>
+        ) : state === "error" ? (
+          <div className="editor-overlay">
+            <div className="notice">
+              <AlertIcon />
+              <h2>The editor couldn't load</h2>
+              <p>
+                It comes from <code>{new URL(EMBED_URL).host}</code>, so it needs an internet connection. Preview and Code work without one.
+              </p>
+              {error && <p className="muted">{error}</p>}
+              <button className="button" onClick={retry}>
+                Try again
+              </button>
+            </div>
+          </div>
+        ) : state !== "ready" ? (
+          <div className="editor-overlay quiet">
+            <span className="spinner" aria-hidden /> Starting the editor…
+          </div>
+        ) : null}
+      </div>
+    </div>
+  );
+}
diff --git a/packages/preview/ui/components/ErrorView.tsx b/packages/preview/ui/components/ErrorView.tsx
new file mode 100644
index 00000000..a0e896d5
--- /dev/null
+++ b/packages/preview/ui/components/ErrorView.tsx
@@ -0,0 +1,21 @@
+import type { TemplateError } from "../api";
+
+export function ErrorView({ error }: { error: TemplateError }) {
+  const where = error.file ? `${error.file}${error.line ? `:${error.line}:${error.column ?? 1}` : ""}` : undefined;
+  return (
+    <div className="error-view" role="alert">
+      <div className="error-kind">{error.phase === "load" ? "The template doesn't compile" : "The template threw while rendering"}</div>
+      <h2 className="error-message">{error.message.split("\n")[0]}</h2>
+      {where && <div className="error-where">{where}</div>}
+      {error.frame && <pre className="error-frame">{error.frame}</pre>}
+      {error.message.includes("\n") && <pre className="error-detail">{error.message.split("\n").slice(1).join("\n")}</pre>}
+      {error.stack && (
+        <details className="error-stack">
+          <summary>Stack trace</summary>
+          <pre>{error.stack}</pre>
+        </details>
+      )}
+      <p className="error-hint">Fix the file and save: the preview updates by itself.</p>
+    </div>
+  );
+}
diff --git a/packages/preview/ui/components/NoTemplates.tsx b/packages/preview/ui/components/NoTemplates.tsx
new file mode 100644
index 00000000..3f165c9d
--- /dev/null
+++ b/packages/preview/ui/components/NoTemplates.tsx
@@ -0,0 +1,40 @@
+import { useState } from "react";
+import { copyText } from "./files";
+import { CopyIcon } from "./icons";
+
+/** The command that adds starter templates to the folder (it never overwrites a file). */
+export function initCommand(dir?: string): string {
+  return `npx @unlayer/cli elements init${dir && dir !== "emails" ? ` --dir ${dir}` : ""}`;
+}
+
+/** What to do when the folder has no templates: the command that adds some, or how to write one. */
+export function NoTemplates({ dir, compact = false }: { dir?: string; compact?: boolean }) {
+  const [copied, setCopied] = useState(false);
+  const command = initCommand(dir);
+  return (
+    <div className={compact ? "no-templates compact" : "no-templates"}>
+      {compact ? <p>No templates yet.</p> : <h2>No templates in {dir ?? "this folder"} yet</h2>}
+      <p className="muted">Add starter templates with:</p>
+      <div className="command">
+        <code>{command}</code>
+        <button
+          className="icon-button small"
+          aria-label="Copy the command"
+          title={copied ? "Copied" : "Copy the command"}
+          onClick={async () => {
+            if (await copyText(command)) {
+              setCopied(true);
+              setTimeout(() => setCopied(false), 1200);
+            }
+          }}
+        >
+          <CopyIcon />
+        </button>
+      </div>
+      <p className="muted">
+        Or add a <code>.tsx</code> file with an <code>export default</code> component that returns <code>&lt;Email&gt;</code>, <code>&lt;Page&gt;</code> or{" "}
+        <code>&lt;Document&gt;</code>. It shows up here as soon as you save it.
+      </p>
+    </div>
+  );
+}
diff --git a/packages/preview/ui/components/PreviewFrame.tsx b/packages/preview/ui/components/PreviewFrame.tsx
new file mode 100644
index 00000000..e0786a69
--- /dev/null
+++ b/packages/preview/ui/components/PreviewFrame.tsx
@@ -0,0 +1,100 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+import { setDarkMode, type DarkMode } from "../../shared/darkMode";
+
+// Widths a drag snaps to when it comes close: phones, a tablet, a laptop.
+const SNAP_WIDTHS = [320, 375, 430, 768, 1024];
+const SNAP = 12;
+const MIN_WIDTH = 240;
+
+interface PreviewFrameProps {
+  html: string;
+  /** 0 = the full width available. */
+  width: number;
+  dark: DarkMode;
+  onWidthChange(width: number): void;
+  /** A double-click on a handle: back to the device's width. */
+  onResetWidth(): void;
+}
+
+export function PreviewFrame({ html, width, dark, onWidthChange, onResetWidth }: PreviewFrameProps) {
+  const iframe = useRef<HTMLIFrameElement>(null);
+  const stage = useRef<HTMLDivElement>(null);
+  const frame = useRef<HTMLDivElement>(null);
+  const darkRef = useRef(dark);
+  darkRef.current = dark;
+  // The width while a handle is dragged, shown over the frame.
+  const [dragging, setDragging] = useState<number>();
+
+  const syncDark = useCallback(() => {
+    const doc = iframe.current?.contentDocument;
+    if (doc) setDarkMode(doc, darkRef.current);
+  }, []);
+
+  useEffect(syncDark, [dark, syncDark]);
+
+  // Drag either edge to resize: the frame stays centered, so it grows by twice the drag.
+  const startResize = (event: React.PointerEvent, side: 1 | -1) => {
+    if (event.button !== 0) return;
+    event.preventDefault();
+    const startX = event.clientX;
+    const area = stage.current;
+    const padding = area ? Number.parseFloat(getComputedStyle(area).paddingLeft) + Number.parseFloat(getComputedStyle(area).paddingRight) : 0;
+    const available = area ? area.clientWidth - padding : 1200;
+    const startWidth = width || frame.current?.clientWidth || available;
+    // Over the iframe while dragging, so it doesn't take the pointer; only once it moves, so a double-click reaches the handle.
+    let shield: HTMLDivElement | undefined;
+    const move = (e: PointerEvent) => {
+      if (!shield) {
+        if (Math.abs(e.clientX - startX) < 3) return;
+        shield = document.createElement("div");
+        shield.className = "drag-shield";
+        document.body.append(shield);
+      }
+      let next = Math.round(startWidth + (e.clientX - startX) * 2 * side);
+      next = Math.max(MIN_WIDTH, Math.min(next, available));
+      const snap = SNAP_WIDTHS.find((w) => Math.abs(w - next) <= SNAP);
+      if (snap && snap <= available) next = snap;
+      setDragging(next);
+      onWidthChange(next >= available ? 0 : next);
+    };
+    const up = () => {
+      shield?.remove();
+      setDragging(undefined);
+      window.removeEventListener("pointermove", move);
+      window.removeEventListener("pointerup", up);
+    };
+    window.addEventListener("pointermove", move);
+    window.addEventListener("pointerup", up);
+  };
+
+  const handle = (side: "left" | "right") => (
+    <div
+      className={`resize-handle ${side}`}
+      onPointerDown={(e) => startResize(e, side === "left" ? -1 : 1)}
+      onDoubleClick={onResetWidth}
+      role="separator"
+      aria-orientation="vertical"
+      aria-label="Resize the preview"
+      title="Drag to resize · double-click to reset"
+    />
+  );
+
+  return (
+    <div className={`stage${dark !== "off" ? " stage-dark" : ""}`} ref={stage}>
+      <div className="frame-wrap" ref={frame} style={{ width: width ? width : "100%" }}>
+        {handle("left")}
+        <iframe
+          ref={iframe}
+          className="frame"
+          title="Template preview"
+          srcDoc={html}
+          // srcdoc pages share this app's origin: no scripts, forms or navigation of the app, but links can open new tabs.
+          sandbox="allow-same-origin allow-popups allow-popups-to-escape-sandbox"
+          onLoad={syncDark}
+        />
+        {handle("right")}
+        {dragging !== undefined && <div className="width-readout">{dragging} px</div>}
+      </div>
+    </div>
+  );
+}
diff --git a/packages/preview/ui/components/PropsEditor.tsx b/packages/preview/ui/components/PropsEditor.tsx
new file mode 100644
index 00000000..7762fe5e
--- /dev/null
+++ b/packages/preview/ui/components/PropsEditor.tsx
@@ -0,0 +1,90 @@
+import { useEffect, useState } from "react";
+import { formatJson } from "./files";
+
+interface PropsEditorProps {
+  /** The props the template rendered with. */
+  props: unknown;
+  previewProps: unknown;
+  /** Whether the props shown are edited ones, not the template's PreviewProps. */
+  edited: boolean;
+  /** Whether the template has rendered since the page opened (so whether its PreviewProps are known). */
+  rendered: boolean;
+  /** A static build: shows the props, which can't change. */
+  readOnly?: boolean;
+  onApply(props: unknown): void;
+  onReset(): void;
+}
+
+export function PropsEditor({ props, previewProps, edited, rendered, readOnly, onApply, onReset }: PropsEditorProps) {
+  const [text, setText] = useState(() => formatJson(props ?? previewProps ?? {}));
+  const [error, setError] = useState<string>();
+
+  useEffect(() => {
+    setText(formatJson(props ?? previewProps ?? {}));
+    setError(undefined);
+  }, [props, previewProps]);
+
+  const apply = () => {
+    try {
+      onApply(text.trim() ? JSON.parse(text) : {});
+      setError(undefined);
+    } catch (e) {
+      setError((e as Error).message);
+    }
+  };
+
+  if (readOnly) {
+    return (
+      <div className="props-editor">
+        <p className="check-intro">
+          The props this build rendered with (the template's <code>PreviewProps</code>). To try other props, run the preview with <code>elements-preview dev</code>.
+        </p>
+        <pre className="props-text">{formatJson(previewProps ?? {}) || "{}"}</pre>
+      </div>
+    );
+  }
+
+  return (
+    <div className="props-editor">
+      <p className="check-intro">
+        {!rendered && !edited ? (
+          <>The template hasn't rendered yet, so its <code>PreviewProps</code> aren't known. You can still try props here.</>
+        ) : previewProps === undefined && !edited ? (
+          <>
+            This template has no <code>PreviewProps</code>. Add them to the component to preview it with sample data:{" "}
+            <code>Welcome.PreviewProps = {"{ name: \"Ada\" }"}</code>. You can also try props here.
+          </>
+        ) : edited ? (
+          <>Rendered with the props below instead of the template's <code>PreviewProps</code>. Only the preview uses them; the file isn't changed.</>
+        ) : (
+          <>The template's <code>PreviewProps</code>. Edit them to try other data; the file isn't changed.</>
+        )}
+      </p>
+      <textarea
+        className="props-text"
+        spellCheck={false}
+        value={text}
+        onChange={(e) => setText(e.target.value)}
+        onKeyDown={(e) => {
+          if (e.key === "Enter" && (e.metaKey || e.ctrlKey)) {
+            e.preventDefault();
+            apply();
+          }
+        }}
+        aria-label="Props as JSON"
+      />
+      {error && <div className="props-error">Not valid JSON: {error}</div>}
+      <div className="props-actions">
+        <button className="button primary" onClick={apply}>
+          Render with these props
+        </button>
+        {edited && (
+          <button className="button" onClick={onReset}>
+            Back to PreviewProps
+          </button>
+        )}
+        <span className="muted"><kbd>⌘/Ctrl</kbd> <kbd>Enter</kbd></span>
+      </div>
+    </div>
+  );
+}
diff --git a/packages/preview/ui/components/Sidebar.tsx b/packages/preview/ui/components/Sidebar.tsx
new file mode 100644
index 00000000..b6cbd896
--- /dev/null
+++ b/packages/preview/ui/components/Sidebar.tsx
@@ -0,0 +1,135 @@
+import { useMemo, useState, type RefObject } from "react";
+import type { TemplateEntry } from "../api";
+import { ChevronRightIcon } from "./icons";
+import { NoTemplates } from "./NoTemplates";
+
+interface Folder {
+  name: string;
+  path: string;
+  folders: Folder[];
+  templates: TemplateEntry[];
+}
+
+function buildTree(templates: TemplateEntry[]): Folder {
+  const root: Folder = { name: "", path: "", folders: [], templates: [] };
+  for (const template of templates) {
+    const parts = template.path.split("/");
+    let folder = root;
+    for (const part of parts.slice(0, -1)) {
+      const path = folder.path ? `${folder.path}/${part}` : part;
+      let next = folder.folders.find((f) => f.name === part);
+      if (!next) {
+        next = { name: part, path, folders: [], templates: [] };
+        folder.folders.push(next);
+      }
+      folder = next;
+    }
+    folder.templates.push(template);
+  }
+  return root;
+}
+
+interface SidebarProps {
+  /** Undefined while the list loads. */
+  templates?: TemplateEntry[];
+  selected?: string;
+  dir?: string;
+  onSelect(path: string): void;
+  filterRef: RefObject<HTMLInputElement>;
+}
+
+export function Sidebar({ templates, selected, dir, onSelect, filterRef }: SidebarProps) {
+  const [filter, setFilter] = useState("");
+  const [closed, setClosed] = useState<Set<string>>(new Set());
+  const visible = useMemo(() => {
+    const q = filter.trim().toLowerCase();
+    return q ? (templates ?? []).filter((t) => t.path.toLowerCase().includes(q)) : (templates ?? []);
+  }, [templates, filter]);
+  const tree = useMemo(() => buildTree(visible), [visible]);
+
+  const toggle = (path: string) =>
+    setClosed((current) => {
+      const next = new Set(current);
+      if (next.has(path)) next.delete(path);
+      else next.add(path);
+      return next;
+    });
+
+  const renderFolder = (folder: Folder, depth: number) => (
+    <ul className="tree" role={depth === 0 ? "tree" : "group"} aria-label={depth === 0 ? "Templates" : undefined}>
+      {folder.folders.map((child) => {
+        const open = !closed.has(child.path) || filter !== "";
+        return (
+          <li key={child.path} role="treeitem" aria-expanded={open}>
+            <button className="tree-row tree-folder" style={{ paddingLeft: 8 + depth * 12 }} onClick={() => toggle(child.path)}>
+              <span className={`disclosure${open ? " open" : ""}`}>
+                <ChevronRightIcon />
+              </span>
+              {child.name}
+            </button>
+            {open && renderFolder(child, depth + 1)}
+          </li>
+        );
+      })}
+      {folder.templates.map((template) => (
+        <li key={template.path} role="treeitem" aria-selected={template.path === selected}>
+          <button
+            className={`tree-row tree-item${template.path === selected ? " selected" : ""}`}
+            style={{ paddingLeft: 26 + depth * 12 }}
+            onClick={() => onSelect(template.path)}
+            title={template.path}
+            aria-current={template.path === selected ? "page" : undefined}
+          >
+            {template.name}
+          </button>
+        </li>
+      ))}
+    </ul>
+  );
+
+  return (
+    <aside className="sidebar">
+      <div className="sidebar-header">
+        <div className="brand">
+          <span className="brand-mark" aria-hidden />
+          Elements preview
+        </div>
+        {dir && (
+          <div className="sidebar-dir" title={dir}>
+            {dir}
+          </div>
+        )}
+      </div>
+      <div className="filter">
+        <input
+          ref={filterRef}
+          className="input"
+          type="search"
+          placeholder="Filter templates"
+          value={filter}
+          onChange={(e) => setFilter(e.target.value)}
+          onKeyDown={(e) => {
+            if (e.key === "Escape") {
+              setFilter("");
+              e.currentTarget.blur();
+            } else if (e.key === "Enter" && visible.length > 0) {
+              onSelect(visible[0].path);
+            }
+          }}
+          aria-label="Filter templates"
+          aria-keyshortcuts="/"
+        />
+        {!filter && <kbd className="filter-kbd">/</kbd>}
+      </div>
+      <nav className="sidebar-list" aria-label="Templates">
+        {templates === undefined ? null : templates.length === 0 ? (
+          <NoTemplates dir={dir} compact />
+        ) : visible.length === 0 ? (
+          <p className="sidebar-empty">No template matches “{filter}”.</p>
+        ) : (
+          renderFolder(tree, 0)
+        )}
+      </nav>
+    </aside>
+  );
+}
diff --git a/packages/preview/ui/components/Tip.tsx b/packages/preview/ui/components/Tip.tsx
new file mode 100644
index 00000000..c1ba6c55
--- /dev/null
+++ b/packages/preview/ui/components/Tip.tsx
@@ -0,0 +1,24 @@
+import type { ReactNode } from "react";
+
+interface TipProps {
+  /** What the control does. Give the control the same words as its aria-label. */
+  label: ReactNode;
+  /** Its keyboard shortcut. */
+  kbd?: string;
+  /** Which edge of the control the tooltip lines up with, so it stays on the screen. */
+  align?: "center" | "start" | "end";
+  children: ReactNode;
+}
+
+/** A tooltip under a control, on hover and keyboard focus. */
+export function Tip({ label, kbd, align = "center", children }: TipProps) {
+  return (
+    <span className="tip-wrap">
+      {children}
+      <span className={`tip tip-${align}`} aria-hidden>
+        {label}
+        {kbd && <kbd>{kbd}</kbd>}
+      </span>
+    </span>
+  );
+}
diff --git a/packages/preview/ui/components/aiPrompt.ts b/packages/preview/ui/components/aiPrompt.ts
new file mode 100644
index 00000000..9028b280
--- /dev/null
+++ b/packages/preview/ui/components/aiPrompt.ts
@@ -0,0 +1,63 @@
+/**
+ * "Copy for AI": everything the preview knows about the template, as one
+ * Markdown prompt to paste into an AI assistant: the source, what Elements and
+ * React reported, the email client compatibility findings, and the link
+ * checks, with what to do about them.
+ */
+
+import { clientFindings, linkFindings, renderingFindings } from "../../shared/findings";
+import type { CompatResponse, LinksResponse, RenderResponse } from "../api";
+
+function fence(text: string, language = ""): string {
+  const ticks = text.includes("```") ? "````" : "```";
+  return `${ticks}${language}\n${text}\n${ticks}`;
+}
+
+const LANGUAGE: Record<string, string> = { tsx: "tsx", jsx: "jsx", js: "js" };
+
+export function aiPrompt(templatePath: string, result: RenderResponse, compat?: CompatResponse, links?: LinksResponse): string {
+  const ext = templatePath.split(".").pop() ?? "tsx";
+  const parts: string[] = [
+    `I'm writing an email template with Unlayer Elements (@unlayer/react-elements: React components that render email-safe HTML; structure: Email > Row > Column > blocks such as Heading, Paragraph, Button, Image). Fix the problems below and give me the whole updated file. Keep using Elements components and props, and don't add CSS that email clients ignore.`,
+    `## ${templatePath}`,
+    fence(result.source ?? "", LANGUAGE[ext] ?? ""),
+  ];
+
+  // What to fix and to check, as the Checks drawer and `elements-preview check` count them (notes left out).
+  const problems: string[] = [];
+  if (!result.ok) {
+    const where = result.error.file ? ` (${result.error.file}${result.error.line ? `:${result.error.line}:${result.error.column ?? 1}` : ""})` : "";
+    problems.push(`- ${result.error.phase === "load" ? "It doesn't compile" : "It throws while rendering"}${where}: ${result.error.message}`);
+  }
+  const rendering = renderingFindings(result).filter((f) => f.level !== "info");
+  // A render error comes first, and is written above with where it happened.
+  if (!result.ok) rendering.shift();
+  for (const finding of rendering) problems.push(`- ${finding.level === "error" ? "Error" : "Warning"}: ${finding.message}`);
+  if (problems.length) parts.push("## Problems Elements and React report", problems.join("\n"));
+
+  const clients = clientFindings(compat);
+  if (clients.length) {
+    parts.push(
+      "## Email client compatibility (caniemail.com)",
+      "Features this template uses that some email clients don't support. Remove them or add a fallback that still reads well where they're ignored:",
+      clients
+        .map((finding) => {
+          const names = (finding.clients ?? []).map((c) => `${c.label}${c.support === "partial" ? " (partly)" : ""}`).join(", ");
+          const where = finding.lines?.length ? ` (source lines ${finding.lines.join(", ")})` : "";
+          return `- \`${finding.feature}\` in ${finding.block}${where}: not supported in ${names}`;
+        })
+        .join("\n")
+    );
+  }
+
+  const linkProblems = linkFindings(links).filter((f) => f.level !== "info");
+  if (linkProblems.length) {
+    parts.push(
+      "## Links and images",
+      linkProblems.map((f) => `- ${f.level === "error" ? "Broken" : "Check"}: ${f.message}${f.url ? ` (${f.url})` : ""}${f.block ? ` in ${f.block}` : ""}`).join("\n")
+    );
+  }
+
+  if (parts.length === 3) parts.push("The preview found no problems. Review it for email best practices: alt text, link text, readable sizes on phones, and dark mode.");
+  return parts.join("\n\n");
+}
diff --git a/packages/preview/ui/components/checks/ChecksDrawer.tsx b/packages/preview/ui/components/checks/ChecksDrawer.tsx
new file mode 100644
index 00000000..c0b1c5a9
--- /dev/null
+++ b/packages/preview/ui/components/checks/ChecksDrawer.tsx
@@ -0,0 +1,42 @@
+import type { ReactNode } from "react";
+import { CloseIcon } from "../icons";
+import { Tip } from "../Tip";
+
+export type DrawerTab = "checks" | "props";
+
+interface ChecksDrawerProps {
+  tab: DrawerTab;
+  onTab(tab: DrawerTab): void;
+  onClose(): void;
+  checks: ReactNode;
+  props: ReactNode;
+}
+
+/** The drawer on the right: the template's checks, and the props it renders with. */
+export function ChecksDrawer({ tab, onTab, onClose, checks, props }: ChecksDrawerProps) {
+  const tabs: Array<{ id: DrawerTab; label: string }> = [
+    { id: "checks", label: "Checks" },
+    { id: "props", label: "Props" },
+  ];
+  return (
+    <aside className="drawer" aria-label="Checks and props">
+      <div className="drawer-head">
+        <div className="tabs" role="tablist">
+          {tabs.map((t) => (
+            <button key={t.id} role="tab" id={`drawer-tab-${t.id}`} aria-selected={tab === t.id} aria-controls="drawer-panel" onClick={() => onTab(t.id)}>
+              {t.label}
+            </button>
+          ))}
+        </div>
+        <Tip label="Close" kbd="." align="end">
+          <button className="icon-button" onClick={onClose} aria-label="Close" aria-keyshortcuts=".">
+            <CloseIcon />
+          </button>
+        </Tip>
+      </div>
+      <div className="drawer-body" id="drawer-panel" role="tabpanel" aria-labelledby={`drawer-tab-${tab}`}>
+        {tab === "checks" ? checks : props}
+      </div>
+    </aside>
+  );
+}
diff --git a/packages/preview/ui/components/checks/ClientChecks.tsx b/packages/preview/ui/components/checks/ClientChecks.tsx
new file mode 100644
index 00000000..29593cc5
--- /dev/null
+++ b/packages/preview/ui/components/checks/ClientChecks.tsx
@@ -0,0 +1,124 @@
+import { useState } from "react";
+import type { CompatIssue, CompatResponse } from "../../api";
+import { ChevronRightIcon } from "../icons";
+import { Section } from "./Section";
+import { clientsSummary } from "./summary";
+
+function supportLabel(support: "none" | "partial"): string {
+  return support === "none" ? "Not supported" : "Partly supported";
+}
+
+function clientSummary(issue: CompatIssue): string {
+  const names = issue.clients.map((c) => c.label);
+  return names.length > 3 ? `${names.slice(0, 3).join(", ")} and ${names.length - 3} more` : names.join(", ");
+}
+
+function IssueRow({ issue }: { issue: CompatIssue }) {
+  const [open, setOpen] = useState(false);
+  const notes = [...new Set(issue.clients.flatMap((c) => c.notes))];
+  const blocks = [...new Set(issue.locations.map((l) => l.block))].join(", ");
+  return (
+    <li className="finding compat-issue">
+      <button className="compat-head" onClick={() => setOpen(!open)} aria-expanded={open}>
+        <span className={`disclosure${open ? " open" : ""}`}>
+          <ChevronRightIcon />
+        </span>
+        <span className="compat-main">
+          <span className="compat-title">
+            <span className="compat-feature">{issue.feature}</span>
+            <span className={`badge ${issue.support}`}>{supportLabel(issue.support)}</span>
+          </span>
+          <span className="finding-meta">
+            {blocks}
+            {issue.sourceLines?.length ? ` · line ${issue.sourceLines[0]}` : ""} · {clientSummary(issue)}
+          </span>
+        </span>
+      </button>
+      {open && (
+        <div className="compat-body">
+          <ul className="compat-client-list">
+            {issue.clients.map((c) => (
+              <li key={c.client}>
+                <span className={`dot ${c.support}`} aria-hidden /> {c.label}: {supportLabel(c.support).toLowerCase()}
+              </li>
+            ))}
+          </ul>
+          {notes.length > 0 && (
+            <ul className="compat-notes">
+              {notes.map((n) => (
+                <li key={n}>{n}</li>
+              ))}
+            </ul>
+          )}
+          {issue.sourceLines && issue.sourceLines.length > 0 && (
+            <div className="compat-source">
+              Likely from the template's line{issue.sourceLines.length > 1 ? "s" : ""} {issue.sourceLines.join(", ")}
+            </div>
+          )}
+          <div className="compat-lines">Lines in the HTML: {issue.locations.map((l) => (l.line ? `${l.line} (${l.block})` : l.block)).join(", ")}</div>
+          {issue.url && (
+            <a href={issue.url} target="_blank" rel="noreferrer">
+              {issue.feature} on caniemail.com
+            </a>
+          )}
+        </div>
+      )}
+    </li>
+  );
+}
+
+interface ClientChecksProps {
+  report?: CompatResponse;
+  /** The report is from the previous render, while this one is checked. */
+  stale: boolean;
+  loading: boolean;
+  error?: string;
+}
+
+/** "Email clients": what the email uses that Gmail, Outlook, Apple Mail… don't support, from caniemail.com. */
+export function ClientChecks({ report, stale, loading, error }: ClientChecksProps) {
+  const [showElements, setShowElements] = useState(false);
+  const about = "HTML and CSS this email uses that Gmail, Outlook, Apple Mail, Yahoo Mail, Samsung Email or Thunderbird don't support, from caniemail.com";
+  const summary = clientsSummary(report);
+  if (error) return <Section title="Email clients" about={about} summary={summary} status={<span className="bad-text">Couldn't check: {error}</span>} />;
+  if (!report) return <Section title="Email clients" about={about} summary={{ ...summary, pending: true }} />;
+  if (!report.applicable) return <Section title="Email clients" about={about} summary={summary} status={<span className="muted" title={report.reason}>{/\bpage\b|\bdocument\b/.test(report.reason) ? "Emails only" : report.reason}</span>} />;
+
+  const yours = report.issues.filter((i) => i.source === "template");
+  const elements = report.issues.filter((i) => i.source === "elements");
+  return (
+    <Section title="Email clients" about={about} summary={summary}>
+      {yours.length > 0 && (
+        <>
+          <p className="check-intro">
+            {yours.length === 1 ? "A feature" : `${yours.length} features`} this template uses that some email clients don't support. Data from{" "}
+            <a href="https://www.caniemail.com" target="_blank" rel="noreferrer">
+              caniemail.com
+            </a>
+            .{(loading || stale) && <span className="muted"> Checking again…</span>}
+          </p>
+          <ul className="findings">
+            {yours.map((issue) => (
+              <IssueRow key={`${issue.source}|${issue.feature}`} issue={issue} />
+            ))}
+          </ul>
+        </>
+      )}
+      {elements.length > 0 && (
+        <div className="check-more">
+          <button className="link" onClick={() => setShowElements(!showElements)} aria-expanded={showElements}>
+            {showElements ? "Hide" : "Show"} {elements.length} handled by Elements
+          </button>
+          <span className="muted"> CSS Elements' email HTML uses on purpose, with fallbacks for the clients that ignore it.</span>
+          {showElements && (
+            <ul className="findings">
+              {elements.map((issue) => (
+                <IssueRow key={`${issue.source}|${issue.feature}`} issue={issue} />
+              ))}
+            </ul>
+          )}
+        </div>
+      )}
+    </Section>
+  );
+}
diff --git a/packages/preview/ui/components/checks/LinkChecks.tsx b/packages/preview/ui/components/checks/LinkChecks.tsx
new file mode 100644
index 00000000..17e7ced7
--- /dev/null
+++ b/packages/preview/ui/components/checks/LinkChecks.tsx
@@ -0,0 +1,91 @@
+import { useState } from "react";
+import type { LinkFinding, LinksResponse } from "../../api";
+import { RefreshIcon } from "../icons";
+import { Section } from "./Section";
+import { linksSummary } from "./summary";
+
+const LEVEL_LABEL: Record<LinkFinding["level"], string> = { error: "Broken", warning: "Check", info: "Note" };
+const LEVEL_TONE: Record<LinkFinding["level"], string> = { error: "none", warning: "partial", info: "info" };
+
+function FindingRow({ finding }: { finding: LinkFinding }) {
+  return (
+    <li className="finding">
+      <span className={`badge ${LEVEL_TONE[finding.level]}`}>{LEVEL_LABEL[finding.level]}</span>
+      <div className="finding-text">
+        <div>{finding.message}</div>
+        <div className="finding-meta">
+          {finding.kind === "image" ? "Image" : finding.kind === "link" ? "Link" : "Email"}
+          {finding.block ? ` · ${finding.block}` : ""}
+          {finding.label ? ` · “${finding.label}”` : ""}
+          {finding.url && (
+            <>
+              {" · "}
+              <a href={finding.url} target="_blank" rel="noreferrer" className="finding-url">
+                {finding.url.length > 90 ? `${finding.url.slice(0, 87)}…` : finding.url}
+              </a>
+            </>
+          )}
+        </div>
+      </div>
+    </li>
+  );
+}
+
+interface LinkChecksProps {
+  report?: LinksResponse;
+  stale: boolean;
+  loading: boolean;
+  error?: string;
+  /** Requests the URLs again (not in a static build, which doesn't request them). */
+  onRecheck?(): void;
+}
+
+/** "Links & images": links that go nowhere, images without alt text, /static/ images, Gmail's size limit; each URL requested. */
+export function LinkChecks({ report, stale, loading, error, onRecheck }: LinkChecksProps) {
+  const [showNotes, setShowNotes] = useState(false);
+  const about = "Links that go nowhere, relative or http: URLs, images without alt text, images most clients block, and HTML over Gmail's clipping limit";
+  const summary = linksSummary(report);
+  const recheck = onRecheck && report && (
+    <button className="text-button" onClick={onRecheck} disabled={loading} title="Request every link and image again">
+      <RefreshIcon /> Check again
+    </button>
+  );
+  if (error) return <Section title="Links & images" about={about} summary={summary} status={<span className="bad-text">Couldn't check: {error}</span>} />;
+  if (!report) return <Section title="Links & images" about={about} summary={{ ...summary, pending: true }} />;
+  if (!report.applicable) return <Section title="Links & images" about={about} summary={summary} status={<span className="muted">{report.reason}</span>} />;
+
+  const problems = report.findings.filter((f) => f.level !== "info");
+  const notes = report.findings.filter((f) => f.level === "info");
+  return (
+    <Section title="Links & images" about={about} summary={summary} action={recheck}>
+      {(problems.length > 0 || loading || stale) && (
+        <p className="check-intro">
+          {report.links} {report.links === 1 ? "link" : "links"} and {report.images} {report.images === 1 ? "image" : "images"}
+          {report.network ? ", each requested." : ", checked in the HTML only (a static build doesn't request them)."}
+          {(loading || stale) && <span className="muted"> Checking again…</span>}
+        </p>
+      )}
+      {problems.length > 0 && (
+        <ul className="findings">
+          {problems.map((finding, i) => (
+            <FindingRow key={i} finding={finding} />
+          ))}
+        </ul>
+      )}
+      {notes.length > 0 && (
+        <div className="check-more">
+          <button className="link" onClick={() => setShowNotes(!showNotes)} aria-expanded={showNotes}>
+            {showNotes ? "Hide" : "Show"} {notes.length} {notes.length === 1 ? "note" : "notes"}
+          </button>
+          {showNotes && (
+            <ul className="findings">
+              {notes.map((finding, i) => (
+                <FindingRow key={i} finding={finding} />
+              ))}
+            </ul>
+          )}
+        </div>
+      )}
+    </Section>
+  );
+}
diff --git a/packages/preview/ui/components/checks/RenderingChecks.tsx b/packages/preview/ui/components/checks/RenderingChecks.tsx
new file mode 100644
index 00000000..a6b758f5
--- /dev/null
+++ b/packages/preview/ui/components/checks/RenderingChecks.tsx
@@ -0,0 +1,33 @@
+import type { Finding } from "../../../shared/findings";
+import type { RenderResponse } from "../../api";
+import { Section } from "./Section";
+import { renderingItems, renderingSummary } from "./summary";
+
+const BADGE: Record<Finding["level"], { tone: string; label: string }> = {
+  error: { tone: "none", label: "error" },
+  warning: { tone: "partial", label: "warning" },
+  info: { tone: "info", label: "info" },
+};
+
+/** "Rendering": what Elements and React reported (a column too many, a block left out), render errors, and no design JSON or plain text. */
+export function RenderingChecks({ result, warnings }: { result?: RenderResponse; warnings: string[] }) {
+  const items = renderingItems(result, warnings);
+  return (
+    <Section
+      title="Rendering"
+      about="What Elements and React report while rendering: a column too many, a block left out, an error"
+      summary={renderingSummary(result, warnings)}
+    >
+      {items.length > 0 && (
+        <ul className="findings">
+          {items.map((item, i) => (
+            <li key={i} className="finding">
+              <span className={`badge ${BADGE[item.level].tone}`}>{item.kind === "log" ? "log" : BADGE[item.level].label}</span>
+              <pre className="finding-log">{item.message}</pre>
+            </li>
+          ))}
+        </ul>
+      )}
+    </Section>
+  );
+}
diff --git a/packages/preview/ui/components/checks/Section.tsx b/packages/preview/ui/components/checks/Section.tsx
new file mode 100644
index 00000000..4239490e
--- /dev/null
+++ b/packages/preview/ui/components/checks/Section.tsx
@@ -0,0 +1,42 @@
+import type { ReactNode } from "react";
+import { CheckCircleIcon } from "../icons";
+import { verb, type SectionSummary } from "./summary";
+
+interface SectionProps {
+  title: string;
+  /** What the section checks, for its tooltip. */
+  about: string;
+  summary: SectionSummary;
+  /** Shown instead of "Nothing to fix" (a check that doesn't apply, or failed). */
+  status?: ReactNode;
+  /** A control in the header ("Check again"). */
+  action?: ReactNode;
+  /** The findings; nothing collapses the section to its header line. */
+  children?: ReactNode;
+}
+
+/** One section of the Checks tab: a header line with its status, and what it found under it. */
+export function Section({ title, about, summary, status, action, children }: SectionProps) {
+  const label = `${summary.count} ${verb(summary)}`;
+  return (
+    <section className="check-section" aria-label={title}>
+      <header className="check-head">
+        <h3 title={about}>{title}</h3>
+        <span className="check-status">
+          {status ??
+            (summary.pending ? (
+              <span className="muted">Checking…</span>
+            ) : summary.count ? (
+              <span className={`pill ${summary.tone}`}>{label}</span>
+            ) : (
+              <span className="all-clear">
+                <CheckCircleIcon /> Nothing to fix
+              </span>
+            ))}
+        </span>
+        {action}
+      </header>
+      {children && <div className="check-body">{children}</div>}
+    </section>
+  );
+}
diff --git a/packages/preview/ui/components/checks/summary.ts b/packages/preview/ui/components/checks/summary.ts
new file mode 100644
index 00000000..33f61700
--- /dev/null
+++ b/packages/preview/ui/components/checks/summary.ts
@@ -0,0 +1,56 @@
+import { clientFindings, linkFindings, renderingFindings, type Finding } from "../../../shared/findings";
+import type { CompatResponse, LinksResponse, RenderResponse } from "../../api";
+
+/** How bad what a check found is: nothing, something to look at, or something broken. */
+export type Tone = "ok" | "warn" | "bad";
+
+/** What Elements and React reported for a render, and the project's warnings: the "Rendering" section. */
+export function renderingItems(result: RenderResponse | undefined, warnings: string[]): Finding[] {
+  return renderingFindings(result, warnings);
+}
+
+export interface SectionSummary {
+  /** What to fix and to check: 0 when there's nothing (notes don't count). */
+  count: number;
+  tone: Tone;
+  /** Not known yet: the check hasn't answered for this template. */
+  pending: boolean;
+}
+
+/** A section's summary from its findings, with the same levels as `elements-preview check`: errors to fix, warnings to check. */
+function summarize(findings: Finding[], pending: boolean): SectionSummary {
+  const counted = findings.filter((f) => f.level !== "info");
+  const tone: Tone = counted.some((f) => f.level === "error") ? "bad" : counted.length ? "warn" : "ok";
+  return { count: counted.length, tone, pending };
+}
+
+export function renderingSummary(result: RenderResponse | undefined, warnings: string[]): SectionSummary {
+  return summarize(renderingFindings(result, warnings), !result);
+}
+
+export function clientsSummary(report: CompatResponse | undefined): SectionSummary {
+  return summarize(clientFindings(report), !report);
+}
+
+export function linksSummary(report: LinksResponse | undefined): SectionSummary {
+  return summarize(linkFindings(report), !report);
+}
+
+/** "to fix" when something is broken, "to check" when it's only worth a look (a client that partly supports a feature). */
+export function verb(summary: SectionSummary): string {
+  return summary.tone === "bad" ? "to fix" : "to check";
+}
+
+const RANK: Record<Tone, number> = { ok: 0, warn: 1, bad: 2 };
+
+/** All the sections together, for the Checks button: the total, and the worst tone. */
+export function combine(sections: SectionSummary[]): SectionSummary {
+  return sections.reduce<SectionSummary>(
+    (all, s) => ({
+      count: all.count + s.count,
+      tone: RANK[s.tone] > RANK[all.tone] ? s.tone : all.tone,
+      pending: all.pending || s.pending,
+    }),
+    { count: 0, tone: "ok", pending: false }
+  );
+}
diff --git a/packages/preview/ui/components/files.ts b/packages/preview/ui/components/files.ts
new file mode 100644
index 00000000..11463fde
--- /dev/null
+++ b/packages/preview/ui/components/files.ts
@@ -0,0 +1,34 @@
+/** Copy and download helpers for the code view and the export menu. */
+
+export async function copyText(text: string): Promise<boolean> {
+  try {
+    await navigator.clipboard.writeText(text);
+    return true;
+  } catch {
+    // Older browsers, or a page without clipboard permission.
+    const area = document.createElement("textarea");
+    area.value = text;
+    area.style.position = "fixed";
+    area.style.opacity = "0";
+    document.body.append(area);
+    area.select();
+    const ok = document.execCommand("copy");
+    area.remove();
+    return ok;
+  }
+}
+
+export function downloadText(filename: string, text: string, type = "text/plain"): void {
+  const url = URL.createObjectURL(new Blob([text], { type: `${type};charset=utf-8` }));
+  const link = document.createElement("a");
+  link.href = url;
+  link.download = filename;
+  document.body.append(link);
+  link.click();
+  link.remove();
+  setTimeout(() => URL.revokeObjectURL(url), 1000);
+}
+
+export function formatJson(value: unknown): string {
+  return value === undefined || value === null ? "" : JSON.stringify(value, null, 2);
+}
diff --git a/packages/preview/ui/components/highlight.ts b/packages/preview/ui/components/highlight.ts
new file mode 100644
index 00000000..145bef76
--- /dev/null
+++ b/packages/preview/ui/components/highlight.ts
@@ -0,0 +1,29 @@
+import Prism from "prismjs";
+import "prismjs/components/prism-jsx";
+import "prismjs/components/prism-typescript";
+import "prismjs/components/prism-tsx";
+import "prismjs/components/prism-json";
+
+export type CodeLanguage = "html" | "tsx" | "jsx" | "js" | "json" | "text";
+
+const GRAMMARS: Record<Exclude<CodeLanguage, "text">, string> = { html: "markup", tsx: "tsx", jsx: "jsx", js: "javascript", json: "json" };
+
+// Past this size highlighting slows the page more than it helps.
+const MAX_HIGHLIGHT = 400_000;
+
+function escape(text: string): string {
+  return text.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+}
+
+/** The code as HTML with Prism's token spans (escaped either way). */
+export function highlight(code: string, language: CodeLanguage): string {
+  if (language === "text" || code.length > MAX_HIGHLIGHT) return escape(code);
+  const grammar = Prism.languages[GRAMMARS[language]];
+  return grammar ? Prism.highlight(code, grammar, GRAMMARS[language]) : escape(code);
+}
+
+/** The language of a template file, by its extension. */
+export function sourceLanguage(path: string): CodeLanguage {
+  const ext = path.split(".").pop();
+  return ext === "tsx" ? "tsx" : ext === "jsx" ? "jsx" : "js";
+}
diff --git a/packages/preview/ui/components/icons.tsx b/packages/preview/ui/components/icons.tsx
new file mode 100644
index 00000000..817bf078
--- /dev/null
+++ b/packages/preview/ui/components/icons.tsx
@@ -0,0 +1,151 @@
+/** The app's icons: 16px line drawings in the text color. */
+
+import type { ReactNode } from "react";
+
+function Svg({ children, size = 16 }: { children: ReactNode; size?: number }) {
+  return (
+    <svg
+      className="icon"
+      width={size}
+      height={size}
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth={2}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      aria-hidden
+      focusable="false"
+    >
+      {children}
+    </svg>
+  );
+}
+
+export const EyeIcon = () => (
+  <Svg>
+    <path d="M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7S2 12 2 12Z" />
+    <circle cx="12" cy="12" r="3" />
+  </Svg>
+);
+
+export const EditorIcon = () => (
+  <Svg>
+    <rect x="3" y="3" width="18" height="18" rx="2" />
+    <path d="M15 3v18M3 9h12" />
+  </Svg>
+);
+
+export const CodeIcon = () => (
+  <Svg>
+    <path d="m16 18 6-6-6-6M8 6l-6 6 6 6" />
+  </Svg>
+);
+
+export const DesktopIcon = () => (
+  <Svg>
+    <rect x="2" y="4" width="20" height="13" rx="2" />
+    <path d="M8 21h8M12 17v4" />
+  </Svg>
+);
+
+export const PhoneIcon = () => (
+  <Svg>
+    <rect x="6" y="2" width="12" height="20" rx="2.5" />
+    <path d="M11 18h2" />
+  </Svg>
+);
+
+export const SunIcon = () => (
+  <Svg>
+    <circle cx="12" cy="12" r="4" />
+    <path d="M12 2v2M12 20v2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M2 12h2M20 12h2M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4" />
+  </Svg>
+);
+
+export const MoonIcon = () => (
+  <Svg>
+    <path d="M20 14.5A8 8 0 0 1 9.5 4a8 8 0 1 0 10.5 10.5Z" />
+  </Svg>
+);
+
+export const ChevronDownIcon = ({ size = 12 }: { size?: number }) => (
+  <Svg size={size}>
+    <path d="m6 9 6 6 6-6" />
+  </Svg>
+);
+
+export const ChevronRightIcon = ({ size = 12 }: { size?: number }) => (
+  <Svg size={size}>
+    <path d="m9 6 6 6-6 6" />
+  </Svg>
+);
+
+export const CheckCircleIcon = () => (
+  <Svg>
+    <circle cx="12" cy="12" r="9" />
+    <path d="m8.5 12 2.5 2.5 4.5-5" />
+  </Svg>
+);
+
+export const AlertIcon = () => (
+  <Svg>
+    <path d="M10.3 3.9 2.4 17.5A2 2 0 0 0 4.1 20.5h15.8a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0Z" />
+    <path d="M12 9v4M12 17h.01" />
+  </Svg>
+);
+
+export const ChecksIcon = () => (
+  <Svg>
+    <path d="M9 6h11M9 12h11M9 18h11" />
+    <path d="m3 6 1 1 2-2M3 12l1 1 2-2M3 18l1 1 2-2" />
+  </Svg>
+);
+
+export const ExportIcon = () => (
+  <Svg>
+    <path d="M12 15V3M7 8l5-5 5 5" />
+    <path d="M5 14v5a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-5" />
+  </Svg>
+);
+
+export const DownloadIcon = () => (
+  <Svg>
+    <path d="M12 3v12M7 10l5 5 5-5" />
+    <path d="M5 21h14" />
+  </Svg>
+);
+
+export const CopyIcon = () => (
+  <Svg>
+    <rect x="9" y="9" width="12" height="12" rx="2" />
+    <path d="M5 15H4a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h10a1 1 0 0 1 1 1v1" />
+  </Svg>
+);
+
+export const SparkleIcon = () => (
+  <Svg>
+    <path d="M12 3l1.9 5.1L19 10l-5.1 1.9L12 17l-1.9-5.1L5 10l5.1-1.9L12 3Z" />
+    <path d="M19 16v4M17 18h4" />
+  </Svg>
+);
+
+export const CloseIcon = () => (
+  <Svg>
+    <path d="M18 6 6 18M6 6l12 12" />
+  </Svg>
+);
+
+export const InfoIcon = () => (
+  <Svg>
+    <circle cx="12" cy="12" r="9" />
+    <path d="M12 16v-4M12 8h.01" />
+  </Svg>
+);
+
+export const RefreshIcon = () => (
+  <Svg>
+    <path d="M21 12a9 9 0 1 1-2.6-6.4L21 8" />
+    <path d="M21 3v5h-5" />
+  </Svg>
+);
diff --git a/packages/preview/ui/components/topbar/ChecksButton.tsx b/packages/preview/ui/components/topbar/ChecksButton.tsx
new file mode 100644
index 00000000..6805b125
--- /dev/null
+++ b/packages/preview/ui/components/topbar/ChecksButton.tsx
@@ -0,0 +1,18 @@
+import { verb, type SectionSummary } from "../checks/summary";
+import { AlertIcon, CheckCircleIcon } from "../icons";
+import { Tip } from "../Tip";
+
+/** Opens the checks drawer; shows "All clear", or how much there is to fix (something broken) or to check, in the color of the worst. */
+export function ChecksButton({ summary, open, onClick }: { summary: SectionSummary; open: boolean; onClick(): void }) {
+  const text = summary.count ? `${summary.count} ${verb(summary)}` : summary.pending ? "Checking…" : "All clear";
+  const tone = summary.count ? summary.tone : summary.pending ? "pending" : "ok";
+  return (
+    <Tip label={open ? "Hide checks" : "Checks: rendering, email clients, links and images"} kbd="." align="end">
+      <button className={`button checks-button ${tone}`} aria-expanded={open} aria-label={`Checks: ${text}`} aria-keyshortcuts="." onClick={onClick}>
+        {summary.count ? <AlertIcon /> : summary.pending ? <span className="spinner" aria-hidden /> : <CheckCircleIcon />}
+        <span className="label">{text}</span>
+        {summary.count > 0 && <span className="short-count">{summary.count}</span>}
+      </button>
+    </Tip>
+  );
+}
diff --git a/packages/preview/ui/components/topbar/DarkToggle.tsx b/packages/preview/ui/components/topbar/DarkToggle.tsx
new file mode 100644
index 00000000..e55ee0cb
--- /dev/null
+++ b/packages/preview/ui/components/topbar/DarkToggle.tsx
@@ -0,0 +1,67 @@
+import { useCallback, useRef, useState } from "react";
+import { useDismiss } from "../../hooks/useDismiss";
+import { ChevronDownIcon, MoonIcon, SunIcon } from "../icons";
+import { Tip } from "../Tip";
+
+/** How an email client recolors an email for a reader in dark mode (see shared/darkMode.ts). */
+export type DarkVariant = "full" | "partial";
+
+const VARIANTS: Array<{ id: DarkVariant; label: string; clients: string }> = [
+  { id: "full", label: "Every color", clients: "Gmail apps, Outlook.com, Outlook on Windows" },
+  { id: "partial", label: "Light colors only", clients: "Apple Mail, Outlook on phones" },
+];
+
+interface DarkToggleProps {
+  on: boolean;
+  onToggle(): void;
+  variant: DarkVariant;
+  onVariant(variant: DarkVariant): void;
+}
+
+/** Emulated dark mode: on or off, and, behind the caret, which way clients do it. */
+export function DarkToggle({ on, onToggle, variant, onVariant }: DarkToggleProps) {
+  const [open, setOpen] = useState(false);
+  const ref = useRef<HTMLDivElement>(null);
+  const close = useCallback(() => setOpen(false), []);
+  useDismiss(ref, open, close);
+  const label = on ? "Dark mode: on" : "Dark mode: off";
+  return (
+    <div className="split" ref={ref}>
+      <Tip label={on ? "Turn dark mode off" : "Show it in dark mode"} kbd="T">
+        <button className={`icon-button${on ? " on" : ""}`} aria-pressed={on} aria-label={label} aria-keyshortcuts="t" onClick={onToggle}>
+          {on ? <MoonIcon /> : <SunIcon />}
+        </button>
+      </Tip>
+      <Tip label="How clients darken it">
+        <button className="icon-button caret" aria-label="Dark mode options" aria-haspopup="dialog" aria-expanded={open} onClick={() => setOpen(!open)}>
+          <ChevronDownIcon />
+        </button>
+      </Tip>
+      {open && (
+        <div className="popover" role="dialog" aria-label="Dark mode">
+          <div className="popover-title">Dark mode recolors</div>
+          <div role="radiogroup" aria-label="How clients darken it">
+            {VARIANTS.map((v) => (
+              <button
+                key={v.id}
+                role="radio"
+                aria-checked={variant === v.id}
+                className="option"
+                onClick={() => {
+                  onVariant(v.id);
+                  setOpen(false);
+                }}
+              >
+                <span className="radio" aria-hidden />
+                <span>
+                  <span className="option-label">{v.label}</span>
+                  <span className="option-hint">{v.clients}</span>
+                </span>
+              </button>
+            ))}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/packages/preview/ui/components/topbar/DeviceToggle.tsx b/packages/preview/ui/components/topbar/DeviceToggle.tsx
new file mode 100644
index 00000000..0f017488
--- /dev/null
+++ b/packages/preview/ui/components/topbar/DeviceToggle.tsx
@@ -0,0 +1,25 @@
+import { DesktopIcon, PhoneIcon } from "../icons";
+import { Tip } from "../Tip";
+
+export type Device = "desktop" | "phone";
+
+/** The width each device starts at (0: all the width there is). */
+export const DEVICE_WIDTH: Record<Device, number> = { desktop: 0, phone: 375 };
+
+/** Desktop or phone width for the preview. */
+export function DeviceToggle({ device, onDevice }: { device: Device; onDevice(device: Device): void }) {
+  return (
+    <div className="segmented icons" role="radiogroup" aria-label="Width">
+      <Tip label="Desktop width" kbd="D">
+        <button role="radio" aria-checked={device === "desktop"} aria-label="Desktop width" aria-keyshortcuts="d" onClick={() => onDevice("desktop")}>
+          <DesktopIcon />
+        </button>
+      </Tip>
+      <Tip label={`Phone width (${DEVICE_WIDTH.phone} px)`} kbd="D">
+        <button role="radio" aria-checked={device === "phone"} aria-label="Phone width" aria-keyshortcuts="d" onClick={() => onDevice("phone")}>
+          <PhoneIcon />
+        </button>
+      </Tip>
+    </div>
+  );
+}
diff --git a/packages/preview/ui/components/topbar/ExportMenu.tsx b/packages/preview/ui/components/topbar/ExportMenu.tsx
new file mode 100644
index 00000000..0bc5a34b
--- /dev/null
+++ b/packages/preview/ui/components/topbar/ExportMenu.tsx
@@ -0,0 +1,93 @@
+import { useCallback, useRef, useState, type ReactNode } from "react";
+import type { RenderOk } from "../../api";
+import { useDismiss } from "../../hooks/useDismiss";
+import { copyText, downloadText, formatJson } from "../files";
+import { ChevronDownIcon, CopyIcon, DownloadIcon, ExportIcon, SparkleIcon } from "../icons";
+import { Tip } from "../Tip";
+
+interface ExportMenuProps {
+  templatePath?: string;
+  /** The current render, when it succeeded. */
+  result?: RenderOk;
+  /** Copies a prompt with the template and its problems for an AI assistant; undefined before the first render. */
+  onCopyForAi?(): Promise<boolean>;
+}
+
+interface Item {
+  label: string;
+  icon: ReactNode;
+  disabled?: boolean;
+  hint?: string;
+  done: string;
+  run(): unknown;
+}
+
+/** Download or copy what the template renders, or copy it with its checks for an AI assistant. */
+export function ExportMenu({ templatePath, result, onCopyForAi }: ExportMenuProps) {
+  const [open, setOpen] = useState(false);
+  const [status, setStatus] = useState<string>();
+  const ref = useRef<HTMLDivElement>(null);
+  const close = useCallback(() => setOpen(false), []);
+  useDismiss(ref, open, close);
+
+  const base = (templatePath?.split("/").pop() ?? "template").replace(/\.[^.]+$/, "");
+  const json = result ? formatJson(result.json) : "";
+  const items: Item[] = [
+    { label: "Download HTML", icon: <DownloadIcon />, disabled: !result, done: "Downloaded", run: () => result && downloadText(`${base}.html`, result.html, "text/html") },
+    { label: "Download plain text", icon: <DownloadIcon />, disabled: !result, done: "Downloaded", run: () => result && downloadText(`${base}.txt`, result.text) },
+    {
+      label: "Download design JSON",
+      icon: <DownloadIcon />,
+      disabled: !json,
+      hint: result?.jsonError ? `No design JSON: ${result.jsonError}` : "Opens in the Unlayer builder with loadDesign()",
+      done: "Downloaded",
+      run: () => downloadText(`${base}.json`, json, "application/json"),
+    },
+    { label: "Copy HTML", icon: <CopyIcon />, disabled: !result, done: "Copied", run: () => result && copyText(result.html) },
+    {
+      label: "Copy for AI",
+      icon: <SparkleIcon />,
+      disabled: !onCopyForAi,
+      hint: "The template, its problems and checks, as a prompt for an AI assistant",
+      done: "Copied",
+      run: async () => {
+        setStatus("Checking…");
+        const ok = await onCopyForAi?.();
+        if (!ok) throw new Error("Couldn't copy");
+      },
+    },
+  ];
+
+  const act = async (item: Item) => {
+    setOpen(false);
+    try {
+      await item.run();
+      setStatus(item.done);
+    } catch {
+      setStatus("Couldn't copy");
+    }
+    setTimeout(() => setStatus(undefined), 1400);
+  };
+
+  return (
+    <div className="menu" ref={ref}>
+      <Tip label="Download or copy" align="end">
+        <button className={`button${status ? " has-status" : ""}`} aria-haspopup="menu" aria-expanded={open} aria-label={status ? `Export: ${status}` : "Export"} onClick={() => setOpen(!open)}>
+          <ExportIcon />
+          <span className="label">{status ?? "Export"}</span>
+          <ChevronDownIcon />
+        </button>
+      </Tip>
+      {open && (
+        <div className="popover menu-items" role="menu">
+          {items.map((item) => (
+            <button key={item.label} role="menuitem" disabled={item.disabled} title={item.hint} onClick={() => act(item)}>
+              {item.icon}
+              {item.label}
+            </button>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/packages/preview/ui/components/topbar/TemplateTitle.tsx b/packages/preview/ui/components/topbar/TemplateTitle.tsx
new file mode 100644
index 00000000..8e188a16
--- /dev/null
+++ b/packages/preview/ui/components/topbar/TemplateTitle.tsx
@@ -0,0 +1,58 @@
+import type { RenderMode, RenderResponse } from "../../api";
+import type { LiveState } from "../../hooks/useLiveChanges";
+import { Tip } from "../Tip";
+
+const MODE_LABEL: Record<RenderMode, string> = { email: "Email", web: "Page", document: "Document" };
+
+interface TemplateTitleProps {
+  path?: string;
+  result?: RenderResponse;
+  /** The mode of the template's last successful render (kept while it fails). */
+  mode?: RenderMode;
+  live: LiveState;
+  builtAt?: string;
+}
+
+/** The template's name, its folder before it, and its mode; render time and live updates in the tooltip. */
+export function TemplateTitle({ path, result, mode, live, builtAt }: TemplateTitleProps) {
+  if (!path) return <div className="title muted">No template</div>;
+  const slash = path.lastIndexOf("/");
+  const folder = slash >= 0 ? path.slice(0, slash + 1) : "";
+  const name = path.slice(slash + 1).replace(/\.[^.]+$/, "");
+  const details = [
+    path,
+    result ? (result.ok ? `Rendered in ${result.durationMs} ms` : "Doesn't render") : "Rendering…",
+    live === "static"
+      ? `A static build${builtAt ? ` from ${new Date(builtAt).toLocaleString()}` : ""}: it doesn't update`
+      : live === "live"
+        ? "Updates as you save"
+        : live === "reconnecting"
+          ? "Not connected to the preview server: reconnecting"
+          : "Connecting…",
+  ];
+  return (
+    <div className="title">
+      <Tip
+        align="start"
+        label={
+          <span className="tip-lines">
+            {details.map((line) => (
+              <span key={line}>{line}</span>
+            ))}
+          </span>
+        }
+      >
+        <span className="title-text" tabIndex={0} aria-label={details.join(". ")}>
+          {folder && <span className="title-folder">{folder}</span>}
+          <span className="title-name">{name}</span>
+        </span>
+      </Tip>
+      {mode && <span className="title-mode">{MODE_LABEL[mode]}</span>}
+      {live === "reconnecting" && (
+        <span className="reconnecting" role="status">
+          <span className="spinner" aria-hidden /> Reconnecting…
+        </span>
+      )}
+    </div>
+  );
+}
diff --git a/packages/preview/ui/components/topbar/TopBar.tsx b/packages/preview/ui/components/topbar/TopBar.tsx
new file mode 100644
index 00000000..5a4cc67e
--- /dev/null
+++ b/packages/preview/ui/components/topbar/TopBar.tsx
@@ -0,0 +1,50 @@
+import type { RenderMode, RenderOk, RenderResponse } from "../../api";
+import type { LiveState } from "../../hooks/useLiveChanges";
+import type { SectionSummary } from "../checks/summary";
+import { ChecksButton } from "./ChecksButton";
+import { DarkToggle, type DarkVariant } from "./DarkToggle";
+import { DeviceToggle, type Device } from "./DeviceToggle";
+import { ExportMenu } from "./ExportMenu";
+import { TemplateTitle } from "./TemplateTitle";
+import { ViewSwitch, type View } from "./ViewSwitch";
+
+interface TopBarProps {
+  templatePath?: string;
+  result?: RenderResponse;
+  mode?: RenderMode;
+  live: LiveState;
+  builtAt?: string;
+  view: View;
+  onView(view: View): void;
+  device: Device;
+  onDevice(device: Device): void;
+  dark: boolean;
+  onDarkToggle(): void;
+  darkVariant: DarkVariant;
+  onDarkVariant(variant: DarkVariant): void;
+  checks: SectionSummary;
+  drawerOpen: boolean;
+  onDrawer(): void;
+  onCopyForAi?(): Promise<boolean>;
+}
+
+/** The template's name, the view switch in the middle, and the preview's controls, checks and export on the right. */
+export function TopBar(props: TopBarProps) {
+  const okResult: RenderOk | undefined = props.result?.ok ? props.result : undefined;
+  return (
+    <header className="topbar">
+      <TemplateTitle path={props.templatePath} result={props.result} mode={props.mode} live={props.live} builtAt={props.builtAt} />
+      <ViewSwitch view={props.view} onView={props.onView} />
+      <div className="topbar-end">
+        {props.view === "preview" && (
+          <>
+            <DeviceToggle device={props.device} onDevice={props.onDevice} />
+            <DarkToggle on={props.dark} onToggle={props.onDarkToggle} variant={props.darkVariant} onVariant={props.onDarkVariant} />
+          </>
+        )}
+        <ChecksButton summary={props.checks} open={props.drawerOpen} onClick={props.onDrawer} />
+        <ExportMenu templatePath={props.templatePath} result={okResult} onCopyForAi={props.onCopyForAi} />
+      </div>
+    </header>
+  );
+}
diff --git a/packages/preview/ui/components/topbar/ViewSwitch.tsx b/packages/preview/ui/components/topbar/ViewSwitch.tsx
new file mode 100644
index 00000000..e5ee0b4a
--- /dev/null
+++ b/packages/preview/ui/components/topbar/ViewSwitch.tsx
@@ -0,0 +1,27 @@
+import type { ReactNode } from "react";
+import { CodeIcon, EditorIcon, EyeIcon } from "../icons";
+import { Tip } from "../Tip";
+
+export type View = "preview" | "editor" | "code";
+
+export const VIEWS: Array<{ id: View; label: string; key: string; tip: string; icon: ReactNode }> = [
+  { id: "preview", label: "Preview", key: "1", tip: "Preview", icon: <EyeIcon /> },
+  { id: "editor", label: "Editor", key: "2", tip: "Open the design in the Unlayer editor", icon: <EditorIcon /> },
+  { id: "code", label: "Code", key: "3", tip: "Source, HTML, plain text and design JSON", icon: <CodeIcon /> },
+];
+
+/** Preview · Editor · Code. */
+export function ViewSwitch({ view, onView }: { view: View; onView(view: View): void }) {
+  return (
+    <div className="segmented view-switch" role="radiogroup" aria-label="View">
+      {VIEWS.map((v) => (
+        <Tip key={v.id} label={v.tip} kbd={v.key}>
+          <button role="radio" aria-checked={view === v.id} aria-label={v.label} aria-keyshortcuts={v.key} onClick={() => onView(v.id)}>
+            {v.icon}
+            <span className="label">{v.label}</span>
+          </button>
+        </Tip>
+      ))}
+    </div>
+  );
+}
diff --git a/packages/preview/ui/editor/prepareDesign.ts b/packages/preview/ui/editor/prepareDesign.ts
new file mode 100644
index 00000000..e20b4d79
--- /dev/null
+++ b/packages/preview/ui/editor/prepareDesign.ts
@@ -0,0 +1,44 @@
+import { rewriteStaticUrls, staticPaths, staticUrl } from "./staticUrls";
+
+// Files larger than this keep their URL instead of being copied into the design.
+const MAX_INLINE_BYTES = 8 * 1024 * 1024;
+
+function base64(bytes: Uint8Array): string {
+  let binary = "";
+  for (let i = 0; i < bytes.length; i += 0x8000) binary += String.fromCharCode(...bytes.subarray(i, i + 0x8000));
+  return btoa(binary);
+}
+
+async function dataUrl(url: string, fetcher: typeof fetch): Promise<string | undefined> {
+  try {
+    const res = await fetcher(url);
+    if (!res.ok) return undefined;
+    const bytes = new Uint8Array(await res.arrayBuffer());
+    if (bytes.length > MAX_INLINE_BYTES) return undefined;
+    const type = res.headers.get("content-type")?.split(";")[0].trim() || "application/octet-stream";
+    return `data:${type};base64,${base64(bytes)}`;
+  } catch {
+    return undefined;
+  }
+}
+
+/**
+ * The design to load in the editor: its /static/ files copied in as data:
+ * URLs, from the preview at `root`.
+ *
+ * Absolute URLs on the preview aren't enough: browsers don't let a site's page
+ * (the editor, on editor.unlayer.com) load images from localhost (Chrome's
+ * Local Network Access), and a hosted build's access protection doesn't apply
+ * to another site's requests. A file that can't be read keeps its absolute URL.
+ */
+export async function prepareDesign<T>(design: T, root: string, fetcher: typeof fetch = fetch): Promise<T> {
+  const paths = staticPaths(design);
+  const inlined = new Map<string, string>();
+  await Promise.all(
+    paths.map(async (path) => {
+      const url = await dataUrl(staticUrl(path, root), fetcher);
+      if (url) inlined.set(path, url);
+    })
+  );
+  return rewriteStaticUrls(design, (path) => inlined.get(path) ?? staticUrl(path, root));
+}
diff --git a/packages/preview/ui/editor/staticUrls.ts b/packages/preview/ui/editor/staticUrls.ts
new file mode 100644
index 00000000..6ecf3aa1
--- /dev/null
+++ b/packages/preview/ui/editor/staticUrls.ts
@@ -0,0 +1,58 @@
+/**
+ * Templates point at the templates folder's static/ files with root-relative
+ * URLs (`/static/logo.png`), which the preview serves. The Unlayer editor runs
+ * in an iframe on editor.unlayer.com, where those URLs mean nothing, so the
+ * design it gets has them rewritten first.
+ */
+
+const PREFIX = "/static/";
+
+// A value that is a /static/ URL (not text that starts with the words).
+const WHOLE = /^\/static\/[^\s"'<>]*$/;
+
+// A /static/ URL inside HTML or CSS text in a value (an HTML block, a text block's markup).
+const EMBEDDED = /(\s(?:src|href|background)=["']|url\(\s*(?:&quot;|["'])?)(\/static\/[^"'()\s>&]*)/g;
+
+/**
+ * A copy of `design` with each /static/ URL in it replaced by what `to`
+ * returns for it: a value that is one (an image's `src.url`, a row's
+ * `backgroundImage.url`), and one inside HTML or CSS text.
+ */
+export function rewriteStaticUrls<T>(design: T, to: (path: string) => string): T {
+  const visit = (value: unknown): unknown => {
+    if (typeof value === "string") {
+      if (WHOLE.test(value)) return to(value);
+      return value.includes(PREFIX) ? value.replace(EMBEDDED, (_, lead: string, path: string) => lead + to(path)) : value;
+    }
+    if (Array.isArray(value)) return value.map(visit);
+    if (value !== null && typeof value === "object") {
+      return Object.fromEntries(Object.entries(value).map(([key, item]) => [key, visit(item)]));
+    }
+    return value;
+  };
+  return visit(design) as T;
+}
+
+/** The distinct /static/ URLs in `design`. */
+export function staticPaths(design: unknown): string[] {
+  const paths = new Set<string>();
+  rewriteStaticUrls(design, (path) => {
+    paths.add(path);
+    return path;
+  });
+  return [...paths];
+}
+
+/**
+ * The URL of a /static/ path on the preview, from `root`: the preview's own
+ * address (`http://localhost:3000/`), or the folder a static build is hosted
+ * in (`https://example.com/emails/`, where static/ sits next to index.html).
+ */
+export function staticUrl(path: string, root: string): string {
+  return new URL(path.slice(1), root).href;
+}
+
+/** A copy of `design` with its /static/ URLs made absolute on the preview at `root`. */
+export function absoluteStaticUrls<T>(design: T, root: string): T {
+  return rewriteStaticUrls(design, (path) => staticUrl(path, root));
+}
diff --git a/packages/preview/ui/editor/unlayerEmbed.ts b/packages/preview/ui/editor/unlayerEmbed.ts
new file mode 100644
index 00000000..1e613f52
--- /dev/null
+++ b/packages/preview/ui/editor/unlayerEmbed.ts
@@ -0,0 +1,54 @@
+/**
+ * The Unlayer editor, from https://editor.unlayer.com/embed.js, as the
+ * Elements Playground and react-email-editor load it. The script, and the
+ * editor in the iframe it makes, come from the network: the rest of the
+ * preview works without them.
+ */
+
+import type { RenderMode } from "../api";
+
+export const EMBED_URL = "https://editor.unlayer.com/embed.js";
+
+/** The editor's display mode for each Elements mode. */
+export const DISPLAY_MODE: Record<RenderMode, string> = { email: "email", web: "web", document: "document" };
+
+export interface UnlayerEditor {
+  addEventListener(event: string, callback: (data?: unknown) => void): void;
+  loadDesign(design: unknown): void;
+  destroy(): void;
+}
+
+interface Unlayer {
+  createEditor(options: Record<string, unknown>): UnlayerEditor;
+}
+
+let loading: Promise<Unlayer> | undefined;
+
+function current(): Unlayer | undefined {
+  const unlayer = (window as unknown as { unlayer?: Unlayer }).unlayer;
+  return typeof unlayer?.createEditor === "function" ? unlayer : undefined;
+}
+
+/** Loads embed.js once; a failed load can be tried again. */
+export function loadUnlayer(): Promise<Unlayer> {
+  const ready = current();
+  if (ready) return Promise.resolve(ready);
+  loading ??= new Promise<Unlayer>((resolve, reject) => {
+    const script = document.createElement("script");
+    script.src = EMBED_URL;
+    script.async = true;
+    const failed = () => {
+      script.remove();
+      loading = undefined;
+      reject(new Error(`Couldn't load ${EMBED_URL}`));
+    };
+    script.onload = () => {
+      const unlayer = current();
+      if (unlayer) resolve(unlayer);
+      else failed();
+    };
+    script.onerror = failed;
+    document.head.append(script);
+  });
+  return loading;
+}
diff --git a/packages/preview/ui/editor/useUnlayerEditor.ts b/packages/preview/ui/editor/useUnlayerEditor.ts
new file mode 100644
index 00000000..df8f3e74
--- /dev/null
+++ b/packages/preview/ui/editor/useUnlayerEditor.ts
@@ -0,0 +1,114 @@
+import { useCallback, useEffect, useRef, useState, type RefObject } from "react";
+import type { RenderMode } from "../api";
+import { prepareDesign } from "./prepareDesign";
+import { DISPLAY_MODE, loadUnlayer, type UnlayerEditor } from "./unlayerEmbed";
+
+// How long the editor may take to say it's ready before the view says it didn't start.
+const READY_TIMEOUT_MS = 45_000;
+
+export type EditorState = "idle" | "loading" | "ready" | "error";
+
+interface Options {
+  /** The template's mode: the editor's display mode. */
+  mode?: RenderMode;
+  /** The design JSON to show. */
+  design?: unknown;
+  projectId?: number;
+  /** Whether the editor is on screen: it starts, and takes new designs, only then. */
+  active: boolean;
+  /** The preview's address, for the design's /static/ files. */
+  root: string;
+}
+
+let instances = 0;
+
+/**
+ * An Unlayer editor in `host` showing `design`, one way: each new design is
+ * loaded into it, and nothing done in it comes back. It starts again when the
+ * display mode changes, which an editor can't switch.
+ */
+export function useUnlayerEditor(host: RefObject<HTMLDivElement>, { mode, design, projectId, active, root }: Options) {
+  const [state, setState] = useState<EditorState>("idle");
+  const [error, setError] = useState<string>();
+  const [attempt, setAttempt] = useState(0);
+  const editor = useRef<UnlayerEditor>();
+  const loaded = useRef<string>();
+
+  // What the editor shows changes only while it's on screen.
+  const [target, setTarget] = useState<{ mode: RenderMode; design?: unknown }>();
+  useEffect(() => {
+    if (active && mode) setTarget({ mode, design });
+  }, [active, mode, design]);
+
+  const targetMode = target?.mode;
+  useEffect(() => {
+    const container = host.current;
+    if (!targetMode || !container) return;
+    let cancelled = false;
+    let instance: UnlayerEditor | undefined;
+    const element = document.createElement("div");
+    element.id = `unlayer-editor-${++instances}`;
+    element.className = "unlayer-editor";
+    container.replaceChildren(element);
+    loaded.current = undefined;
+    setState("loading");
+    setError(undefined);
+    const fail = (message: string) => {
+      if (cancelled) return;
+      setState("error");
+      setError(message);
+    };
+    const timer = setTimeout(() => fail("The editor didn't start."), READY_TIMEOUT_MS);
+    loadUnlayer().then(
+      (unlayer) => {
+        if (cancelled) return;
+        instance = unlayer.createEditor({
+          id: element.id,
+          displayMode: DISPLAY_MODE[targetMode],
+          version: "latest",
+          ...(projectId ? { projectId } : {}),
+        });
+        editor.current = instance;
+        instance.addEventListener("editor:ready", () => {
+          if (cancelled) return;
+          clearTimeout(timer);
+          setState("ready");
+        });
+      },
+      (reason: Error) => {
+        clearTimeout(timer);
+        fail(reason.message);
+      }
+    );
+    return () => {
+      cancelled = true;
+      clearTimeout(timer);
+      editor.current = undefined;
+      try {
+        instance?.destroy();
+      } catch {
+        // Already gone with its iframe.
+      }
+      element.remove();
+    };
+  }, [targetMode, projectId, attempt, host]);
+
+  const targetDesign = target?.design;
+  useEffect(() => {
+    if (state !== "ready" || targetDesign === undefined || targetDesign === null) return;
+    const json = JSON.stringify(targetDesign);
+    if (json === loaded.current) return;
+    let cancelled = false;
+    void prepareDesign(targetDesign, root).then((prepared) => {
+      if (cancelled || !editor.current) return;
+      editor.current.loadDesign(prepared);
+      loaded.current = json;
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [state, targetDesign, root]);
+
+  const retry = useCallback(() => setAttempt((n) => n + 1), []);
+  return { state, error, retry };
+}
diff --git a/packages/preview/ui/hooks/useCheck.ts b/packages/preview/ui/hooks/useCheck.ts
new file mode 100644
index 00000000..c7025bc0
--- /dev/null
+++ b/packages/preview/ui/hooks/useCheck.ts
@@ -0,0 +1,71 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+
+export interface CheckState<T> {
+  /**
+   * The report for the current key; while the check runs again for a new key
+   * of the same group (the same template, rendered again), the last one.
+   */
+  report?: T;
+  /** Whether `report` is from an earlier render, while the check runs again. */
+  stale: boolean;
+  loading: boolean;
+  error?: string;
+  /** Run the check now (or reuse the result for the current key), resolving with its report. */
+  run(force?: boolean): Promise<T | undefined>;
+}
+
+interface Stored<T> {
+  report?: T;
+  error?: string;
+  key?: string;
+  group?: string;
+}
+
+/**
+ * A check of a render (compatibility, links): for the current `key` (a
+ * template and its render) when `active`, or when `run` is called. `group`
+ * (the template) decides which earlier report stays shown while it runs again.
+ */
+export function useCheck<T>(fetcher: () => Promise<T>, key: string | undefined, group: string | undefined, active: boolean): CheckState<T> {
+  const [state, setState] = useState<Stored<T>>({});
+  const [loading, setLoading] = useState(false);
+  const seq = useRef(0);
+  const latest = useRef(state);
+  latest.current = state;
+  const fetcherRef = useRef(fetcher);
+  fetcherRef.current = fetcher;
+
+  const run = useCallback(
+    async (force = false): Promise<T | undefined> => {
+      if (!key) return undefined;
+      if (!force && latest.current.key === key && latest.current.report !== undefined) return latest.current.report;
+      const mine = ++seq.current;
+      setLoading(true);
+      try {
+        const report = await fetcherRef.current();
+        if (mine === seq.current) setState({ report, key, group });
+        return report;
+      } catch (error) {
+        if (mine === seq.current) setState({ error: (error as Error).message, key, group });
+        return undefined;
+      } finally {
+        if (mine === seq.current) setLoading(false);
+      }
+    },
+    [key, group]
+  );
+
+  useEffect(() => {
+    if (active && key && latest.current.key !== key) void run();
+  }, [active, key, run]);
+
+  const current = state.key === key;
+  const sameGroup = !current && group !== undefined && state.group === group;
+  return {
+    report: current || sameGroup ? state.report : undefined,
+    stale: sameGroup && state.report !== undefined,
+    loading,
+    error: current ? state.error : undefined,
+    run,
+  };
+}
diff --git a/packages/preview/ui/hooks/useDismiss.ts b/packages/preview/ui/hooks/useDismiss.ts
new file mode 100644
index 00000000..532fd8a4
--- /dev/null
+++ b/packages/preview/ui/hooks/useDismiss.ts
@@ -0,0 +1,26 @@
+import { useEffect, type RefObject } from "react";
+
+/** Closes a menu or popover on a click outside `ref`, or Escape. */
+export function useDismiss(ref: RefObject<HTMLElement>, open: boolean, close: () => void): void {
+  useEffect(() => {
+    if (!open) return;
+    const onPointer = (event: PointerEvent) => {
+      if (!ref.current?.contains(event.target as Node)) close();
+    };
+    const onKey = (event: KeyboardEvent) => {
+      if (event.key !== "Escape") return;
+      event.stopPropagation();
+      close();
+    };
+    // A click in the preview or the editor iframe doesn't reach this page: leaving it counts as outside.
+    const onBlur = () => close();
+    window.addEventListener("pointerdown", onPointer);
+    window.addEventListener("keydown", onKey, true);
+    window.addEventListener("blur", onBlur);
+    return () => {
+      window.removeEventListener("pointerdown", onPointer);
+      window.removeEventListener("keydown", onKey, true);
+      window.removeEventListener("blur", onBlur);
+    };
+  }, [ref, open, close]);
+}
diff --git a/packages/preview/ui/hooks/useLiveChanges.ts b/packages/preview/ui/hooks/useLiveChanges.ts
new file mode 100644
index 00000000..60a47958
--- /dev/null
+++ b/packages/preview/ui/hooks/useLiveChanges.ts
@@ -0,0 +1,38 @@
+import { useEffect, useRef, useState } from "react";
+import { STATIC, type TemplateEntry } from "../api";
+
+export interface ChangeEvent {
+  files: string[];
+  templates: TemplateEntry[];
+}
+
+/**
+ * - "connecting": the page just opened;
+ * - "live": the preview updates as files are saved;
+ * - "reconnecting": the connection to the server dropped (it's stopped, or restarting);
+ * - "static": a static build, which nothing updates.
+ */
+export type LiveState = "connecting" | "live" | "reconnecting" | "static";
+
+/** Live updates from the server. */
+export function useLiveChanges(onChange: (event: ChangeEvent) => void): LiveState {
+  const [state, setState] = useState<LiveState>(STATIC ? "static" : "connecting");
+  const handler = useRef(onChange);
+  handler.current = onChange;
+  useEffect(() => {
+    // A static build has no server to tell it about changes.
+    if (STATIC) return;
+    const source = new EventSource("/api/events");
+    source.onopen = () => setState("live");
+    source.onerror = () => setState("reconnecting");
+    source.addEventListener("change", (event) => {
+      try {
+        handler.current(JSON.parse((event as MessageEvent).data));
+      } catch {
+        // A malformed event: the next one brings the current state.
+      }
+    });
+    return () => source.close();
+  }, []);
+  return state;
+}
diff --git a/packages/preview/ui/hooks/useSelectedTemplate.ts b/packages/preview/ui/hooks/useSelectedTemplate.ts
new file mode 100644
index 00000000..99954ad5
--- /dev/null
+++ b/packages/preview/ui/hooks/useSelectedTemplate.ts
@@ -0,0 +1,35 @@
+import { useCallback, useEffect, useState } from "react";
+import { STATIC } from "../api";
+
+const PREFIX = "/preview/";
+
+/**
+ * The template in the URL: /preview/billing/receipt.tsx from the server, or
+ * #/preview/billing/receipt.tsx in a static build (any host, any path).
+ */
+function currentTemplate(): string | undefined {
+  const where = STATIC ? window.location.hash.replace(/^#/, "") : window.location.pathname;
+  return where.startsWith(PREFIX) ? decodeURIComponent(where.slice(PREFIX.length)) : undefined;
+}
+
+/** The selected template, kept in the URL (/preview/billing/receipt.tsx) so reloads and links keep it. */
+export function useSelectedTemplate(): [string | undefined, (path: string, replace?: boolean) => void] {
+  const [selected, setSelected] = useState(currentTemplate);
+  useEffect(() => {
+    const onPop = () => setSelected(currentTemplate());
+    window.addEventListener("popstate", onPop);
+    window.addEventListener("hashchange", onPop);
+    return () => {
+      window.removeEventListener("popstate", onPop);
+      window.removeEventListener("hashchange", onPop);
+    };
+  }, []);
+  const select = useCallback((path: string, replace = false) => {
+    const route = PREFIX + path.split("/").map(encodeURIComponent).join("/");
+    const url = STATIC ? `#${route}` : route;
+    if (replace) window.history.replaceState(null, "", url);
+    else window.history.pushState(null, "", url);
+    setSelected(path);
+  }, []);
+  return [selected, select];
+}
diff --git a/packages/preview/ui/hooks/useShortcuts.ts b/packages/preview/ui/hooks/useShortcuts.ts
new file mode 100644
index 00000000..b3e89013
--- /dev/null
+++ b/packages/preview/ui/hooks/useShortcuts.ts
@@ -0,0 +1,26 @@
+import { useEffect, useRef } from "react";
+
+/** Whether a key press is someone typing: in a field, or with a modifier (the browser's own shortcuts). */
+function typing(event: KeyboardEvent): boolean {
+  if (event.metaKey || event.ctrlKey || event.altKey || event.isComposing) return true;
+  const target = event.target as HTMLElement | null;
+  if (!target) return false;
+  return target.isContentEditable || target.tagName === "INPUT" || target.tagName === "TEXTAREA" || target.tagName === "SELECT";
+}
+
+/** Single-key shortcuts for the whole page (`/`, `1`, `d`…), skipped while typing in a field. */
+export function useShortcuts(keys: Record<string, () => void>): void {
+  const current = useRef(keys);
+  current.current = keys;
+  useEffect(() => {
+    const onKey = (event: KeyboardEvent) => {
+      if (event.defaultPrevented || typing(event)) return;
+      const action = current.current[event.key.length === 1 ? event.key.toLowerCase() : event.key];
+      if (!action) return;
+      event.preventDefault();
+      action();
+    };
+    window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
+  }, []);
+}
diff --git a/packages/preview/ui/hooks/useStoredState.ts b/packages/preview/ui/hooks/useStoredState.ts
new file mode 100644
index 00000000..4419ad00
--- /dev/null
+++ b/packages/preview/ui/hooks/useStoredState.ts
@@ -0,0 +1,32 @@
+import { useCallback, useState } from "react";
+
+/** State kept across reloads for this browser (view, width, dark mode), when storage is available. */
+export function useStoredState<T>(key: string, initial: T, valid?: (value: unknown) => boolean): [T, (value: T) => void] {
+  const [value, setValue] = useState<T>(() => {
+    try {
+      const stored = window.localStorage.getItem(`elements-preview:${key}`);
+      if (stored === null) return initial;
+      const parsed = JSON.parse(stored) as unknown;
+      return valid && !valid(parsed) ? initial : (parsed as T);
+    } catch {
+      return initial;
+    }
+  });
+  const set = useCallback(
+    (next: T) => {
+      setValue(next);
+      try {
+        window.localStorage.setItem(`elements-preview:${key}`, JSON.stringify(next));
+      } catch {
+        // Storage blocked: the setting lasts until the page reloads.
+      }
+    },
+    [key]
+  );
+  return [value, set];
+}
+
+/** A validator for useStoredState: one of `options`. */
+export function oneOf<T>(options: readonly T[]): (value: unknown) => boolean {
+  return (value) => options.includes(value as T);
+}
diff --git a/packages/preview/ui/index.html b/packages/preview/ui/index.html
new file mode 100644
index 00000000..3aaedda1
--- /dev/null
+++ b/packages/preview/ui/index.html
@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>Elements preview</title>
+    <link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect width='32' height='32' rx='7' fill='%234f46e5'/%3E%3Crect x='8' y='9' width='16' height='4' rx='1.5' fill='white'/%3E%3Crect x='8' y='15' width='7' height='8' rx='1.5' fill='white'/%3E%3Crect x='17' y='15' width='7' height='8' rx='1.5' fill='white' opacity='.7'/%3E%3C/svg%3E" />
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="./main.tsx"></script>
+  </body>
+</html>
diff --git a/packages/preview/ui/main.tsx b/packages/preview/ui/main.tsx
new file mode 100644
index 00000000..33837d78
--- /dev/null
+++ b/packages/preview/ui/main.tsx
@@ -0,0 +1,10 @@
+import { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
+import { App } from "./App";
+import "./styles.css";
+
+createRoot(document.getElementById("root")!).render(
+  <StrictMode>
+    <App />
+  </StrictMode>
+);
diff --git a/packages/preview/ui/styles.css b/packages/preview/ui/styles.css
new file mode 100644
index 00000000..4be76b1f
--- /dev/null
+++ b/packages/preview/ui/styles.css
@@ -0,0 +1,1646 @@
+/*
+ * The preview app. Spacing is on an 8px grid (4px for the tightest gaps),
+ * controls are 32px high, and there's one accent color. Light and dark follow
+ * the system setting.
+ */
+
+:root {
+  --bg: #ffffff;
+  --bg-subtle: #f8f8f9;
+  --bg-muted: #f0f0f2;
+  --bg-stage: #f2f2f4;
+  --bg-hover: rgb(24 24 27 / 5%);
+  --bg-pressed: rgb(24 24 27 / 8%);
+  --bg-raised: #ffffff;
+  --border: #e5e5ea;
+  --border-faint: #efeff2;
+  --text: #18181b;
+  --text-muted: #67676f;
+  --text-faint: #9b9ba3;
+  --accent: #4f46e5;
+  --accent-soft: #eef0ff;
+  --accent-text: #ffffff;
+  --focus-ring: rgb(79 70 229 / 25%);
+  --ok: #16803c;
+  --ok-bg: #edfbf2;
+  --warn: #a6550b;
+  --warn-bg: #fff6e8;
+  --warn-border: #f6deb6;
+  --bad: #d12f2f;
+  --bad-bg: #fff1f1;
+  --bad-border: #f7cccc;
+  --info-bg: #eef0ff;
+  --code-bg: #fbfbfc;
+  --tip-bg: #18181b;
+  --tip-text: #fafafa;
+  --shadow-sm: 0 1px 2px rgb(0 0 0 / 6%);
+  --shadow-lg: 0 8px 24px rgb(0 0 0 / 10%), 0 1px 3px rgb(0 0 0 / 8%);
+  --frame-shadow: 0 0 0 1px rgb(0 0 0 / 6%), 0 4px 16px rgb(0 0 0 / 6%);
+  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  --tok-tag: #b4235b;
+  --tok-attr: #7c4dff;
+  --tok-string: #0a7a47;
+  --tok-keyword: #1d4ed8;
+  --tok-number: #b45309;
+  --tok-comment: #8a8a96;
+  --tok-function: #6d28d9;
+  --tok-punct: #6b6b76;
+  color-scheme: light;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --bg: #161618;
+    --bg-subtle: #1a1a1d;
+    --bg-muted: #232327;
+    --bg-stage: #101012;
+    --bg-hover: rgb(255 255 255 / 6%);
+    --bg-pressed: rgb(255 255 255 / 10%);
+    --bg-raised: #1f1f23;
+    --border: #2b2b31;
+    --border-faint: #232328;
+    --text: #ececf0;
+    --text-muted: #a0a0aa;
+    --text-faint: #6f6f79;
+    --accent: #8b85ff;
+    --accent-soft: #25244a;
+    --accent-text: #101012;
+    --focus-ring: rgb(139 133 255 / 30%);
+    --ok: #4ade80;
+    --ok-bg: #11261a;
+    --warn: #f5b13d;
+    --warn-bg: #2a2011;
+    --warn-border: #4a3817;
+    --bad: #f87171;
+    --bad-bg: #2b1515;
+    --bad-border: #552626;
+    --info-bg: #1f1f3a;
+    --code-bg: #131315;
+    --tip-bg: #f4f4f5;
+    --tip-text: #18181b;
+    --shadow-sm: 0 1px 2px rgb(0 0 0 / 40%);
+    --shadow-lg: 0 8px 24px rgb(0 0 0 / 45%), 0 0 0 1px rgb(255 255 255 / 4%);
+    --frame-shadow: 0 0 0 1px rgb(255 255 255 / 6%), 0 4px 16px rgb(0 0 0 / 40%);
+    --tok-tag: #f472b6;
+    --tok-attr: #c4b5fd;
+    --tok-string: #86efac;
+    --tok-keyword: #93c5fd;
+    --tok-number: #fcd34d;
+    --tok-comment: #71717a;
+    --tok-function: #d8b4fe;
+    --tok-punct: #a1a1aa;
+    color-scheme: dark;
+  }
+}
+
+* {
+  box-sizing: border-box;
+}
+
+html,
+body,
+#root {
+  height: 100%;
+  margin: 0;
+  overflow: hidden;
+}
+
+body {
+  background: var(--bg);
+  color: var(--text);
+  font: 13px/1.5 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+}
+
+button,
+input,
+select,
+textarea {
+  font: inherit;
+  color: inherit;
+}
+
+button {
+  cursor: pointer;
+  background: none;
+  border: 0;
+  padding: 0;
+}
+
+button:disabled {
+  opacity: 0.45;
+  cursor: default;
+}
+
+:focus-visible {
+  outline: 2px solid var(--accent);
+  outline-offset: 2px;
+}
+
+code {
+  font-family: var(--mono);
+  font-size: 0.92em;
+  background: var(--bg-muted);
+  padding: 1px 4px;
+  border-radius: 4px;
+}
+
+kbd {
+  display: inline-block;
+  min-width: 16px;
+  padding: 0 4px;
+  font: 11px/16px var(--mono);
+  text-align: center;
+  color: var(--text-muted);
+  background: var(--bg-subtle);
+  border: 1px solid var(--border);
+  border-radius: 4px;
+}
+
+a {
+  color: var(--accent);
+}
+
+h2,
+h3 {
+  margin: 0;
+}
+
+.muted {
+  color: var(--text-muted);
+}
+
+.bad-text {
+  color: var(--bad);
+}
+
+.spacer {
+  flex: 1;
+}
+
+.icon {
+  flex: none;
+}
+
+.spinner {
+  display: inline-block;
+  flex: none;
+  width: 12px;
+  height: 12px;
+  border: 2px solid currentColor;
+  border-right-color: transparent;
+  border-radius: 50%;
+  opacity: 0.7;
+  animation: spin 0.8s linear infinite;
+}
+
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+/* Controls */
+
+.button {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  height: 32px;
+  padding: 0 12px;
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  background: var(--bg);
+  font-weight: 500;
+  white-space: nowrap;
+}
+
+.button:hover:not(:disabled) {
+  background: var(--bg-subtle);
+  border-color: var(--text-faint);
+}
+
+.button.primary {
+  background: var(--accent);
+  border-color: var(--accent);
+  color: var(--accent-text);
+}
+
+.button.primary:hover:not(:disabled) {
+  background: var(--accent);
+  filter: brightness(1.08);
+}
+
+.icon-button {
+  display: inline-grid;
+  place-items: center;
+  width: 32px;
+  height: 32px;
+  border-radius: 8px;
+  color: var(--text-muted);
+}
+
+.icon-button:hover:not(:disabled) {
+  background: var(--bg-hover);
+  color: var(--text);
+}
+
+.icon-button.small {
+  width: 24px;
+  height: 24px;
+  border-radius: 6px;
+}
+
+.icon-button.on {
+  color: var(--accent);
+  background: var(--accent-soft);
+}
+
+.text-button {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  height: 24px;
+  padding: 0 8px;
+  border-radius: 6px;
+  color: var(--accent);
+  font-weight: 500;
+  white-space: nowrap;
+}
+
+.text-button:hover:not(:disabled) {
+  background: var(--accent-soft);
+}
+
+.text-button .icon {
+  width: 14px;
+  height: 14px;
+}
+
+.link {
+  color: var(--accent);
+  font-weight: 500;
+}
+
+.link:hover {
+  text-decoration: underline;
+}
+
+.segmented {
+  display: inline-flex;
+  gap: 2px;
+  height: 32px;
+  padding: 2px;
+  border-radius: 8px;
+  background: var(--bg-muted);
+}
+
+.segmented button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  height: 28px;
+  padding: 0 12px;
+  border-radius: 6px;
+  color: var(--text-muted);
+  font-weight: 500;
+  white-space: nowrap;
+}
+
+.segmented button:hover {
+  color: var(--text);
+}
+
+.segmented button[aria-checked="true"] {
+  background: var(--bg);
+  color: var(--text);
+  box-shadow: var(--shadow-sm), 0 0 0 1px var(--border);
+}
+
+.segmented button:focus-visible {
+  outline-offset: 0;
+}
+
+.segmented.icons button {
+  width: 32px;
+  padding: 0;
+}
+
+.input {
+  width: 100%;
+  height: 32px;
+  padding: 0 32px 0 12px;
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  background: var(--bg);
+  outline: none;
+  -webkit-appearance: none;
+  appearance: none;
+}
+
+.input::placeholder {
+  color: var(--text-faint);
+}
+
+.input::-webkit-search-cancel-button {
+  display: none;
+}
+
+.input:focus {
+  border-color: var(--accent);
+  box-shadow: 0 0 0 3px var(--focus-ring);
+}
+
+.badge {
+  display: inline-block;
+  flex: none;
+  padding: 0 8px;
+  border-radius: 999px;
+  font-size: 11px;
+  font-weight: 500;
+  line-height: 18px;
+  white-space: nowrap;
+}
+
+.badge.none {
+  background: var(--bad-bg);
+  color: var(--bad);
+}
+
+.badge.partial {
+  background: var(--warn-bg);
+  color: var(--warn);
+}
+
+.badge.info {
+  background: var(--info-bg);
+  color: var(--accent);
+}
+
+.dot {
+  display: inline-block;
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+}
+
+.dot.none {
+  background: var(--bad);
+}
+
+.dot.partial {
+  background: var(--warn);
+}
+
+.disclosure {
+  display: inline-grid;
+  place-items: center;
+  flex: none;
+  width: 16px;
+  height: 16px;
+  color: var(--text-faint);
+  transition: transform 120ms;
+}
+
+.disclosure.open {
+  transform: rotate(90deg);
+}
+
+/* Tooltips */
+
+.tip-wrap {
+  position: relative;
+  display: inline-flex;
+  min-width: 0;
+}
+
+.tip {
+  position: absolute;
+  top: calc(100% + 8px);
+  left: 50%;
+  z-index: 50;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 4px 8px;
+  border-radius: 6px;
+  background: var(--tip-bg);
+  color: var(--tip-text);
+  font-size: 12px;
+  font-weight: 400;
+  line-height: 16px;
+  white-space: nowrap;
+  pointer-events: none;
+  opacity: 0;
+  visibility: hidden;
+  transform: translateX(-50%);
+  transition: opacity 80ms, visibility 0s 80ms;
+}
+
+.tip-start {
+  left: 0;
+  transform: none;
+}
+
+.tip-end {
+  left: auto;
+  right: 0;
+  transform: none;
+}
+
+.tip-wrap:hover > .tip,
+.tip-wrap:has(:focus-visible) > .tip {
+  opacity: 1;
+  visibility: visible;
+  transition: opacity 80ms 400ms, visibility 0s 400ms;
+}
+
+.tip-wrap:has([aria-expanded="true"]) > .tip {
+  display: none;
+}
+
+.tip kbd {
+  color: inherit;
+  background: transparent;
+  border-color: color-mix(in srgb, var(--tip-text) 30%, transparent);
+}
+
+.tip-lines {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+/* Menus and popovers */
+
+.menu,
+.split {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+}
+
+.popover {
+  position: absolute;
+  top: calc(100% + 8px);
+  right: 0;
+  z-index: 60;
+  min-width: 224px;
+  padding: 4px;
+  border: 1px solid var(--border);
+  border-radius: 10px;
+  background: var(--bg-raised);
+  box-shadow: var(--shadow-lg);
+}
+
+.popover-title {
+  padding: 8px 8px 4px;
+  color: var(--text-muted);
+  font-size: 12px;
+}
+
+.menu-items {
+  display: flex;
+  flex-direction: column;
+}
+
+.menu-items button,
+.option {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  width: 100%;
+  min-height: 32px;
+  padding: 4px 8px;
+  border-radius: 6px;
+  text-align: left;
+  white-space: nowrap;
+}
+
+.menu-items button .icon {
+  color: var(--text-muted);
+}
+
+.menu-items button:hover:not(:disabled),
+.option:hover {
+  background: var(--bg-hover);
+}
+
+.option {
+  align-items: flex-start;
+  padding: 8px;
+}
+
+.option-label,
+.option-hint {
+  display: block;
+}
+
+.option-hint {
+  color: var(--text-muted);
+  font-size: 12px;
+}
+
+.radio {
+  flex: none;
+  width: 14px;
+  height: 14px;
+  margin-top: 3px;
+  border: 1.5px solid var(--text-faint);
+  border-radius: 50%;
+}
+
+.option[aria-checked="true"] .radio {
+  border: 4px solid var(--accent);
+}
+
+.split .caret {
+  width: 20px;
+  margin-left: -2px;
+}
+
+/* Layout */
+
+.app {
+  display: grid;
+  grid-template-columns: 240px minmax(0, 1fr);
+  height: 100%;
+}
+
+.main {
+  container: main / inline-size;
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  min-height: 0;
+}
+
+.workspace {
+  position: relative;
+  flex: 1;
+  display: flex;
+  min-height: 0;
+}
+
+.content {
+  position: relative;
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  min-height: 0;
+}
+
+.progress {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  z-index: 5;
+  height: 2px;
+  overflow: hidden;
+  pointer-events: none;
+}
+
+.progress::after {
+  content: "";
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  width: 30%;
+  background: var(--accent);
+  animation: progress 1s ease-in-out infinite;
+}
+
+@keyframes progress {
+  from {
+    left: -30%;
+  }
+  to {
+    left: 100%;
+  }
+}
+
+.banner {
+  padding: 8px 16px;
+  border-bottom: 1px solid var(--warn-border);
+  background: var(--warn-bg);
+  color: var(--warn);
+  font-size: 12px;
+}
+
+.empty {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin: auto;
+  padding: 40px 24px;
+}
+
+/* Sidebar */
+
+.sidebar {
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  border-right: 1px solid var(--border);
+  background: var(--bg-subtle);
+}
+
+.sidebar-header {
+  padding: 12px 16px 4px;
+}
+
+.brand {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  height: 24px;
+  font-size: 14px;
+  font-weight: 600;
+}
+
+.brand-mark {
+  width: 18px;
+  height: 18px;
+  border-radius: 5px;
+  background: var(--accent);
+  box-shadow: inset 0 -6px 0 rgb(255 255 255 / 25%);
+}
+
+.sidebar-dir {
+  overflow: hidden;
+  padding-left: 26px;
+  color: var(--text-faint);
+  font: 11px/16px var(--mono);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.filter {
+  position: relative;
+  margin: 8px 12px;
+}
+
+.filter-kbd {
+  position: absolute;
+  top: 50%;
+  right: 8px;
+  transform: translateY(-50%);
+  pointer-events: none;
+}
+
+.sidebar-list {
+  flex: 1;
+  overflow: auto;
+  padding: 0 8px 16px;
+}
+
+.sidebar-empty {
+  padding: 8px;
+  margin: 0;
+  color: var(--text-muted);
+}
+
+.tree {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.tree-row {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  width: 100%;
+  height: 28px;
+  padding-right: 8px;
+  overflow: hidden;
+  border-radius: 6px;
+  text-align: left;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.tree-row:hover {
+  background: var(--bg-hover);
+}
+
+.tree-row:focus-visible {
+  outline-offset: -2px;
+}
+
+.tree-folder {
+  color: var(--text-muted);
+  font-weight: 500;
+}
+
+.tree-item {
+  display: block;
+  line-height: 28px;
+}
+
+.tree-item.selected {
+  background: var(--accent-soft);
+  color: var(--accent);
+  font-weight: 500;
+}
+
+.no-templates {
+  max-width: 480px;
+  margin: auto;
+  padding: 40px 24px;
+  text-align: center;
+}
+
+.no-templates h2 {
+  margin-bottom: 8px;
+  font-size: 16px;
+}
+
+.no-templates p {
+  margin: 0 0 8px;
+}
+
+.no-templates.compact {
+  margin: 0;
+  padding: 8px;
+  font-size: 12px;
+  text-align: left;
+}
+
+.no-templates.compact p:first-child {
+  font-weight: 600;
+  color: var(--text);
+}
+
+.command {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin: 0 0 16px;
+  padding: 4px 4px 4px 12px;
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  background: var(--bg);
+  text-align: left;
+}
+
+.command code {
+  flex: 1;
+  padding: 0;
+  background: none;
+  font-size: 12px;
+  overflow-wrap: anywhere;
+}
+
+/* Top bar */
+
+.topbar {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto minmax(max-content, 1fr);
+  align-items: center;
+  gap: 16px;
+  min-height: 48px;
+  padding: 0 16px;
+  border-bottom: 1px solid var(--border);
+  background: var(--bg);
+}
+
+.title {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  min-width: 0;
+}
+
+.title-text {
+  display: flex;
+  min-width: 0;
+  border-radius: 4px;
+  font-size: 14px;
+  font-weight: 600;
+  white-space: nowrap;
+}
+
+/* When it doesn't fit, the folder gives way before the name. */
+.title-folder,
+.title-name {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.title-folder {
+  flex: 0 1000 auto;
+  min-width: 1.5em;
+  color: var(--text-faint);
+  font-weight: 400;
+}
+
+.title-name {
+  flex: 0 1 auto;
+}
+
+.title-mode {
+  flex: none;
+  padding: 0 8px;
+  border: 1px solid var(--border);
+  border-radius: 999px;
+  color: var(--text-muted);
+  font-size: 11px;
+  line-height: 18px;
+}
+
+.reconnecting {
+  display: inline-flex;
+  align-items: center;
+  flex: none;
+  gap: 8px;
+  color: var(--warn);
+  font-size: 12px;
+}
+
+.topbar-end {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 8px;
+}
+
+.checks-button.ok .icon {
+  color: var(--ok);
+}
+
+.checks-button.pending {
+  color: var(--text-muted);
+}
+
+.checks-button.warn {
+  border-color: var(--warn-border);
+  background: var(--warn-bg);
+  color: var(--warn);
+}
+
+.checks-button.bad {
+  border-color: var(--bad-border);
+  background: var(--bad-bg);
+  color: var(--bad);
+}
+
+.checks-button.warn:hover,
+.checks-button.bad:hover {
+  border-color: currentColor !important;
+  background: var(--bg) !important;
+}
+
+.checks-button[aria-expanded="true"] {
+  box-shadow: inset 0 0 0 1px currentColor;
+}
+
+.short-count {
+  display: none;
+  font-weight: 600;
+}
+
+/* What Export just did shows even where its label is hidden. */
+.menu .button.has-status .label {
+  display: inline !important;
+}
+
+/* Preview */
+
+.stage {
+  flex: 1;
+  display: flex;
+  justify-content: center;
+  min-height: 0;
+  padding: 16px 24px;
+  overflow: auto;
+  background: var(--bg-stage);
+}
+
+.stage-dark {
+  background: #0b0b0d;
+}
+
+.frame-wrap {
+  position: relative;
+  display: flex;
+  max-width: 100%;
+  height: 100%;
+}
+
+.frame {
+  flex: 1;
+  width: 100%;
+  height: 100%;
+  border: 0;
+  border-radius: 8px;
+  background: #ffffff;
+  box-shadow: var(--frame-shadow);
+}
+
+.resize-handle {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  z-index: 2;
+  width: 16px;
+  cursor: ew-resize;
+}
+
+.resize-handle::after {
+  content: "";
+  position: absolute;
+  top: 50%;
+  left: 6px;
+  width: 4px;
+  height: 40px;
+  margin-top: -20px;
+  border-radius: 4px;
+  background: var(--text-faint);
+  opacity: 0.5;
+  transition: opacity 120ms;
+}
+
+.resize-handle:hover::after {
+  opacity: 1;
+}
+
+.resize-handle.left {
+  left: -20px;
+}
+
+.resize-handle.right {
+  right: -20px;
+}
+
+.width-readout {
+  position: absolute;
+  top: 8px;
+  left: 50%;
+  z-index: 3;
+  padding: 2px 8px;
+  border-radius: 6px;
+  background: var(--tip-bg);
+  color: var(--tip-text);
+  font: 12px/16px var(--mono);
+  transform: translateX(-50%);
+  pointer-events: none;
+}
+
+.drag-shield {
+  position: fixed;
+  inset: 0;
+  z-index: 100;
+  cursor: ew-resize;
+}
+
+/* Editor */
+
+.editor-view {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  flex-direction: column;
+  background: var(--bg-stage);
+}
+
+.editor-view[hidden] {
+  display: none;
+}
+
+.editor-note {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  min-height: 32px;
+  padding: 4px 16px;
+  border-bottom: 1px solid var(--border);
+  background: var(--bg-subtle);
+  font-size: 12px;
+}
+
+.editor-note .icon {
+  color: var(--accent);
+}
+
+.editor-stage {
+  position: relative;
+  flex: 1;
+  min-height: 0;
+}
+
+.editor-host,
+.unlayer-editor {
+  position: absolute;
+  inset: 0;
+}
+
+.editor-overlay {
+  position: absolute;
+  inset: 0;
+  z-index: 2;
+  display: grid;
+  place-items: center;
+  overflow: auto;
+  background: var(--bg-stage);
+}
+
+.editor-overlay.quiet {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  color: var(--text-muted);
+}
+
+.notice {
+  max-width: 480px;
+  padding: 24px;
+  text-align: center;
+}
+
+.notice > .icon {
+  width: 24px;
+  height: 24px;
+  color: var(--warn);
+}
+
+.notice h2 {
+  margin: 8px 0;
+  font-size: 15px;
+}
+
+.notice p {
+  margin: 0 0 16px;
+}
+
+.notice pre {
+  margin: 0;
+  padding: 12px;
+  overflow: auto;
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  background: var(--bg);
+  font: 12px/1.6 var(--mono);
+  text-align: left;
+  white-space: pre-wrap;
+}
+
+/* Code */
+
+.code-view {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+}
+
+.code-bar {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  min-height: 48px;
+  padding: 0 16px;
+  border-bottom: 1px solid var(--border);
+}
+
+.code-bar .tabs {
+  min-width: 0;
+  overflow-x: auto;
+}
+
+.tabs {
+  display: inline-flex;
+  gap: 4px;
+}
+
+.tabs [role="tab"] {
+  height: 32px;
+  padding: 0 12px;
+  border-radius: 8px;
+  color: var(--text-muted);
+  font-weight: 500;
+  white-space: nowrap;
+}
+
+.tabs [role="tab"]:hover {
+  color: var(--text);
+}
+
+.tabs [role="tab"][aria-selected="true"] {
+  color: var(--text);
+  background: var(--bg-muted);
+}
+
+.code-note {
+  padding: 8px 16px;
+  background: var(--warn-bg);
+  color: var(--warn);
+}
+
+.code {
+  flex: 1;
+  display: flex;
+  overflow: auto;
+  background: var(--code-bg);
+  font: 12px/1.6 var(--mono);
+  tab-size: 2;
+}
+
+.code pre {
+  margin: 0;
+  padding: 12px 0;
+  font: inherit;
+}
+
+.code-gutter {
+  position: sticky;
+  left: 0;
+  flex: none;
+  min-width: 56px;
+  padding-right: 16px !important;
+  background: var(--code-bg);
+  color: var(--text-faint);
+  text-align: right;
+  user-select: none;
+}
+
+.code-text {
+  flex: 1;
+  padding-right: 16px !important;
+  white-space: pre;
+}
+
+.code-text code {
+  padding: 0;
+  border-radius: 0;
+  background: none;
+  font-size: inherit;
+}
+
+.token.tag,
+.token.selector {
+  color: var(--tok-tag);
+}
+
+.token.attr-name,
+.token.property {
+  color: var(--tok-attr);
+}
+
+.token.string,
+.token.attr-value,
+.token.template-string {
+  color: var(--tok-string);
+}
+
+.token.keyword,
+.token.boolean,
+.token.builtin {
+  color: var(--tok-keyword);
+}
+
+.token.number,
+.token.constant {
+  color: var(--tok-number);
+}
+
+.token.comment,
+.token.prolog,
+.token.doctype,
+.token.cdata {
+  color: var(--tok-comment);
+  font-style: italic;
+}
+
+.token.function,
+.token.class-name {
+  color: var(--tok-function);
+}
+
+.token.punctuation,
+.token.operator {
+  color: var(--tok-punct);
+}
+
+/* Render errors */
+
+.error-view {
+  margin: 24px;
+  padding: 24px;
+  overflow: auto;
+  border: 1px solid var(--bad-border);
+  border-radius: 12px;
+  background: var(--bad-bg);
+}
+
+.error-kind {
+  color: var(--bad);
+  font-size: 12px;
+  font-weight: 600;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+}
+
+.error-message {
+  margin: 8px 0;
+  font-family: var(--mono);
+  font-size: 15px;
+  white-space: pre-wrap;
+}
+
+.error-where {
+  color: var(--text-muted);
+  font-family: var(--mono);
+}
+
+.error-frame,
+.error-detail,
+.error-stack pre {
+  margin: 16px 0 0;
+  padding: 12px;
+  overflow: auto;
+  border-radius: 8px;
+  background: var(--bg);
+  font: 12px/1.6 var(--mono);
+}
+
+.error-stack summary {
+  margin-top: 16px;
+  color: var(--text-muted);
+  cursor: pointer;
+}
+
+.error-hint {
+  margin: 16px 0 0;
+  color: var(--text-muted);
+}
+
+/* Checks drawer */
+
+.drawer {
+  display: flex;
+  flex: none;
+  flex-direction: column;
+  width: 384px;
+  min-height: 0;
+  border-left: 1px solid var(--border);
+  background: var(--bg);
+}
+
+.drawer-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  min-height: 48px;
+  padding: 0 8px 0 12px;
+  border-bottom: 1px solid var(--border);
+}
+
+.drawer-body {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  overflow: auto;
+  padding: 0 16px 24px;
+}
+
+.check-section {
+  padding: 12px 0;
+  border-bottom: 1px solid var(--border);
+}
+
+.check-section:last-child {
+  border-bottom: 0;
+}
+
+.check-head {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  min-height: 24px;
+}
+
+.check-head h3 {
+  flex: 1;
+  font-size: 13px;
+  font-weight: 600;
+}
+
+.check-status {
+  font-size: 12px;
+  text-align: right;
+}
+
+.all-clear {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  color: var(--text-muted);
+}
+
+.all-clear .icon {
+  width: 14px;
+  height: 14px;
+  color: var(--ok);
+}
+
+.pill {
+  display: inline-block;
+  padding: 0 8px;
+  border-radius: 999px;
+  font-size: 11px;
+  font-weight: 600;
+  line-height: 20px;
+  white-space: nowrap;
+}
+
+.pill.warn {
+  background: var(--warn-bg);
+  color: var(--warn);
+}
+
+.pill.bad {
+  background: var(--bad-bg);
+  color: var(--bad);
+}
+
+.check-body {
+  margin-top: 8px;
+}
+
+.check-intro {
+  margin: 0 0 8px;
+  color: var(--text-muted);
+}
+
+.check-more {
+  margin-top: 8px;
+}
+
+.findings {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.finding {
+  display: flex;
+  align-items: baseline;
+  gap: 8px;
+  padding: 8px 0;
+  border-top: 1px solid var(--border-faint);
+}
+
+.finding:first-child {
+  border-top: 0;
+}
+
+.finding-log {
+  min-width: 0;
+  margin: 0;
+  font: 12px/1.5 var(--mono);
+  overflow-wrap: anywhere;
+  white-space: pre-wrap;
+}
+
+.finding-text {
+  min-width: 0;
+}
+
+.finding-meta {
+  margin-top: 2px;
+  color: var(--text-muted);
+  font-size: 12px;
+  overflow-wrap: anywhere;
+}
+
+.finding-url {
+  font-family: var(--mono);
+}
+
+.compat-issue {
+  display: block;
+  padding: 0;
+}
+
+.compat-head {
+  display: flex;
+  align-items: flex-start;
+  gap: 4px;
+  width: 100%;
+  padding: 8px 4px;
+  border-radius: 6px;
+  text-align: left;
+}
+
+.compat-head:hover {
+  background: var(--bg-hover);
+}
+
+.compat-head .disclosure {
+  margin-top: 2px;
+}
+
+.compat-main {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  min-width: 0;
+}
+
+.compat-title {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 8px;
+}
+
+.compat-feature {
+  font-weight: 500;
+}
+
+.compat-body {
+  padding: 0 4px 12px 24px;
+}
+
+.compat-client-list,
+.compat-notes {
+  margin: 0 0 8px;
+  padding-left: 0;
+  list-style: none;
+}
+
+.compat-notes li {
+  margin-bottom: 4px;
+  color: var(--text-muted);
+}
+
+.compat-source,
+.compat-lines {
+  margin-bottom: 8px;
+  color: var(--text-muted);
+  font-size: 12px;
+}
+
+.compat-source {
+  font-family: var(--mono);
+}
+
+.props-editor {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  min-height: 320px;
+  padding-top: 16px;
+}
+
+.props-text {
+  flex: 1;
+  min-height: 160px;
+  margin: 0;
+  padding: 12px;
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  background: var(--code-bg);
+  font: 12px/1.6 var(--mono);
+  outline: none;
+  resize: none;
+  overflow: auto;
+}
+
+.props-text:focus {
+  border-color: var(--accent);
+  box-shadow: 0 0 0 3px var(--focus-ring);
+}
+
+.props-error {
+  margin-top: 8px;
+  color: var(--bad);
+}
+
+.props-actions {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 8px;
+  margin-top: 8px;
+}
+
+/* Narrow: labels collapse to icons, the drawer goes over the preview, and on phones the bar takes two rows. */
+
+@container main (max-width: 999px) {
+  .drawer {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    z-index: 20;
+    width: min(384px, 100%);
+    box-shadow: var(--shadow-lg);
+  }
+}
+
+@container main (max-width: 999px) {
+  .menu .button .label {
+    display: none;
+  }
+
+  .menu .button {
+    padding: 0 8px;
+    gap: 4px;
+  }
+}
+
+@container main (max-width: 819px) {
+  .view-switch .label,
+  .topbar-end .button .label {
+    display: none;
+  }
+
+  .view-switch button {
+    width: 36px;
+    padding: 0;
+  }
+
+  .topbar-end .button {
+    padding: 0 8px;
+    gap: 4px;
+  }
+
+  .checks-button .short-count {
+    display: inline;
+  }
+
+  .code-bar .button .label {
+    display: none;
+  }
+
+  .code-bar .button {
+    padding: 0 8px;
+  }
+}
+
+@container main (max-width: 559px) {
+  .topbar {
+    grid-template-columns: auto minmax(0, 1fr);
+    grid-template-areas:
+      "title title"
+      "views end";
+    row-gap: 8px;
+    padding: 8px 12px;
+  }
+
+  .title {
+    grid-area: title;
+  }
+
+  .view-switch {
+    grid-area: views;
+  }
+
+  .topbar-end {
+    grid-area: end;
+  }
+
+  .code-bar {
+    padding: 0 8px;
+  }
+}
+
+@media (max-width: 760px) {
+  .app {
+    grid-template-columns: minmax(0, 1fr);
+    grid-template-rows: auto minmax(0, 1fr);
+  }
+
+  .sidebar {
+    max-height: 30vh;
+    border-right: 0;
+    border-bottom: 1px solid var(--border);
+  }
+}
+
+@media (max-width: 960px) and (min-width: 761px) {
+  .app {
+    grid-template-columns: 208px minmax(0, 1fr);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .spinner,
+  .progress::after {
+    animation-duration: 2.4s;
+  }
+
+  .tip,
+  .disclosure {
+    transition: none;
+  }
+}
diff --git a/packages/preview/vite.ui.config.ts b/packages/preview/vite.ui.config.ts
new file mode 100644
index 00000000..e29adff1
--- /dev/null
+++ b/packages/preview/vite.ui.config.ts
@@ -0,0 +1,16 @@
+import { defineConfig } from "vite";
+
+// The preview app: built into dist/ui, which the preview server serves.
+// `pnpm dev:ui` runs it against a preview server on port 3000 (start one with `elements-preview dev`).
+export default defineConfig({
+  root: "ui",
+  base: "/",
+  build: {
+    outDir: "../dist/ui",
+    emptyOutDir: true,
+    assetsDir: "assets",
+  },
+  server: {
+    proxy: { "/api": "http://localhost:3000", "/static": "http://localhost:3000" },
+  },
+});
diff --git a/packages/preview/vitest.config.ts b/packages/preview/vitest.config.ts
new file mode 100644
index 00000000..bd3bc0a4
--- /dev/null
+++ b/packages/preview/vitest.config.ts
@@ -0,0 +1,10 @@
+import { defineConfig } from "vitest/config";
+
+export default defineConfig({
+  test: {
+    environment: "node",
+    include: ["test/**/*.test.ts"],
+    testTimeout: 60000,
+    hookTimeout: 60000,
+  },
+});
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index d657802d..309d733a 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -139,7 +139,7 @@ importers:
         version: 5.9.3
       vitest:
         specifier: ^3.2.4
-        version: 3.2.4(@types/node@25.3.5)(happy-dom@20.8.3)(jiti@2.6.1)(jsdom@24.1.3)(less@4.4.2)(lightningcss@1.31.1)(sass@1.93.2)(terser@5.44.0)(tsx@4.21.0)
+        version: 3.2.4(@types/node@25.3.5)(happy-dom@20.8.3)(jiti@2.6.1)(jsdom@24.1.3)(less@4.4.2)(lightningcss@1.33.0)(sass@1.93.2)(terser@5.44.0)(tsx@4.21.0)
 
   packages/demo:
     dependencies:
@@ -158,7 +158,7 @@ importers:
     devDependencies:
       '@tailwindcss/vite':
         specifier: ^4.1.0
-        version: 4.2.1(vite@6.4.1(@types/node@25.3.5)(jiti@2.6.1)(less@4.4.2)(lightningcss@1.31.1)(sass@1.93.2)(terser@5.44.0)(tsx@4.21.0))
+        version: 4.2.1(vite@6.4.1(@types/node@25.3.5)(jiti@2.6.1)(less@4.4.2)(lightningcss@1.33.0)(sass@1.93.2)(terser@5.44.0)(tsx@4.21.0))
       '@types/react':
         specifier: ^18.3.12
         version: 18.3.26
@@ -167,7 +167,7 @@ importers:
         version: 18.3.7(@types/react@18.3.26)
       '@vitejs/plugin-react':
         specifier: ^4.3.4
-        version: 4.7.0(vite@6.4.1(@types/node@25.3.5)(jiti@2.6.1)(less@4.4.2)(lightningcss@1.31.1)(sass@1.93.2)(terser@5.44.0)(tsx@4.21.0))
+        version: 4.7.0(vite@6.4.1(@types/node@25.3.5)(jiti@2.6.1)(less@4.4.2)(lightningcss@1.33.0)(sass@1.93.2)(terser@5.44.0)(tsx@4.21.0))
       tailwindcss:
         specifier: ^4.1.0
         version: 4.2.1
@@ -176,7 +176,7 @@ importers:
         version: 5.8.3
       vite:
         specifier: ^6.0.0
-        version: 6.4.1(@types/node@25.3.5)(jiti@2.6.1)(less@4.4.2)(lightningcss@1.31.1)(sass@1.93.2)(terser@5.44.0)(tsx@4.21.0)
+        version: 6.4.1(@types/node@25.3.5)(jiti@2.6.1)(less@4.4.2)(lightningcss@1.33.0)(sass@1.93.2)(terser@5.44.0)(tsx@4.21.0)
 
   packages/from-react-email:
     dependencies:
@@ -234,7 +234,7 @@ importers:
         version: 4.21.0
       vitest:
         specifier: ^3.2.4
-        version: 3.2.4(@types/node@24.9.1)(happy-dom@20.8.3)(jiti@2.6.1)(jsdom@24.1.3)(less@4.4.2)(lightningcss@1.31.1)(sass@1.93.2)(terser@5.44.0)(tsx@4.21.0)
+        version: 3.2.4(@types/node@24.9.1)(happy-dom@20.8.3)(jiti@2.6.1)(jsdom@24.1.3)(less@4.4.2)(lightningcss@1.33.0)(sass@1.93.2)(terser@5.44.0)(tsx@4.21.0)
 
   packages/migrate:
     dependencies:
@@ -286,7 +286,59 @@ importers:
         version: 8.5.0(@swc/core@1.15.40)(jiti@2.6.1)(postcss@8.5.30)(tsx@4.21.0)(typescript@5.9.3)
       vitest:
         specifier: ^3.2.4
-        version: 3.2.4(@types/node@24.9.1)(happy-dom@20.8.3)(jiti@2.6.1)(jsdom@24.1.3)(less@4.4.2)(lightningcss@1.31.1)(sass@1.93.2)(terser@5.44.0)(tsx@4.21.0)
+        version: 3.2.4(@types/node@24.9.1)(happy-dom@20.8.3)(jiti@2.6.1)(jsdom@24.1.3)(less@4.4.2)(lightningcss@1.33.0)(sass@1.93.2)(terser@5.44.0)(tsx@4.21.0)
+
+  packages/preview:
+    dependencies:
+      caniemail:
+        specifier: 2.0.2
+        version: 2.0.2(prettier@3.6.2)
+      htmlparser2:
+        specifier: 10.1.0
+        version: 10.1.0
+      prettier:
+        specifier: 3.6.2
+        version: 3.6.2
+      puppeteer-core:
+        specifier: 24.43.1
+        version: 24.43.1
+      vite:
+        specifier: 8.3.4
+        version: 8.3.4(@types/node@24.9.1)(esbuild@0.27.3)(jiti@2.6.1)(less@4.4.2)(sass@1.93.2)(terser@5.44.0)(tsx@4.21.0)
+    devDependencies:
+      '@types/node':
+        specifier: 24.9.1
+        version: 24.9.1
+      '@types/prismjs':
+        specifier: 1.26.6
+        version: 1.26.6
+      '@types/react':
+        specifier: 18.3.3
+        version: 18.3.3
+      '@types/react-dom':
+        specifier: 18.3.0
+        version: 18.3.0
+      '@unlayer/react-elements':
+        specifier: workspace:*
+        version: link:../react
+      prismjs:
+        specifier: 1.30.0
+        version: 1.30.0
+      react:
+        specifier: 18.3.1
+        version: 18.3.1
+      react-dom:
+        specifier: 18.3.1
+        version: 18.3.1(react@18.3.1)
+      tsup:
+        specifier: 8.5.0
+        version: 8.5.0(@swc/core@1.15.40)(jiti@2.6.1)(postcss@8.5.30)(tsx@4.21.0)(typescript@5.9.3)
+      typescript:
+        specifier: 5.9.3
+        version: 5.9.3
+      vitest:
+        specifier: 3.2.4
+        version: 3.2.4(@types/node@24.9.1)(happy-dom@20.8.3)(jiti@2.6.1)(jsdom@24.1.3)(less@4.4.2)(lightningcss@1.33.0)(sass@1.93.2)(terser@5.44.0)(tsx@4.21.0)
 
   packages/react:
     dependencies:
@@ -305,16 +357,16 @@ importers:
     devDependencies:
       '@storybook/addon-docs':
         specifier: ^9.1.1
-        version: 9.1.16(@types/react@18.3.26)(storybook@9.1.16(@testing-library/dom@10.4.1)(prettier@3.6.2)(vite@7.1.12(@types/node@24.9.1)(jiti@2.6.1)(less@4.4.2)(lightningcss@1.31.1)(sass@1.93.2)(terser@5.44.0)(tsx@4.21.0)))
+        version: 9.1.16(@types/react@18.3.26)(storybook@9.1.16(@testing-library/dom@10.4.1)(prettier@3.6.2)(vite@8.3.4(@types/node@24.9.1)(esbuild@0.25.11)(jiti@2.6.1)(less@4.4.2)(sass@1.93.2)(terser@5.44.0)(tsx@4.21.0)))
       '@storybook/addon-onboarding':
         specifier: ^9.1.1
-        version: 9.1.16(storybook@9.1.16(@testing-library/dom@10.4.1)(prettier@3.6.2)(vite@7.1.12(@types/node@24.9.1)(jiti@2.6.1)(less@4.4.2)(lightningcss@1.31.1)(sass@1.93.2)(terser@5.44.0)(tsx@4.21.0)))
+        version: 9.1.16(storybook@9.1.16(@testing-library/dom@10.4.1)(prettier@3.6.2)(vite@8.3.4(@types/node@24.9.1)(esbuild@0.25.11)(jiti@2.6.1)(less@4.4.2)(sass@1.93.2)(terser@5.44.0)(tsx@4.21.0)))
       '@storybook/react-vite':
         specifier: ^9.1.1
-        version: 9.1.16(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(rollup@4.52.5)(storybook@9.1.16(@testing-library/dom@10.4.1)(prettier@3.6.2)(vite@7.1.12(@types/node@24.9.1)(jiti@2.6.1)(less@4.4.2)(lightningcss@1.31.1)(sass@1.93.2)(terser@5.44.0)(tsx@4.21.0)))(typescript@5.9.3)(vite@7.1.12(@types/node@24.9.1)(jiti@2.6.1)(less@4.4.2)(lightningcss@1.31.1)(sass@1.93.2)(terser@5.44.0)(tsx@4.21.0))
+        version: 9.1.16(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(rollup@4.52.5)(storybook@9.1.16(@testing-library/dom@10.4.1)(prettier@3.6.2)(vite@8.3.4(@types/node@24.9.1)(esbuild@0.25.11)(jiti@2.6.1)(less@4.4.2)(sass@1.93.2)(terser@5.44.0)(tsx@4.21.0)))(typescript@5.9.3)(vite@8.3.4(@types/node@24.9.1)(esbuild@0.25.11)(jiti@2.6.1)(less@4.4.2)(sass@1.93.2)(terser@5.44.0)(tsx@4.21.0))
       '@storybook/test-runner':
         specifier: 0.23.0
-        version: 0.23.0(@types/node@24.9.1)(storybook@9.1.16(@testing-library/dom@10.4.1)(prettier@3.6.2)(vite@7.1.12(@types/node@24.9.1)(jiti@2.6.1)(less@4.4.2)(lightningcss@1.31.1)(sass@1.93.2)(terser@5.44.0)(tsx@4.21.0)))
+        version: 0.23.0(@types/node@24.9.1)(storybook@9.1.16(@testing-library/dom@10.4.1)(prettier@3.6.2)(vite@8.3.4(@types/node@24.9.1)(esbuild@0.25.11)(jiti@2.6.1)(less@4.4.2)(sass@1.93.2)(terser@5.44.0)(tsx@4.21.0)))
       '@testing-library/jest-dom':
         specifier: ^6.4.2
         version: 6.9.1
@@ -338,10 +390,10 @@ importers:
         version: '@unlayer/react-elements@0.1.22(react-dom@18.3.1(react@18.3.1))(react@18.3.1)'
       '@vitejs/plugin-react':
         specifier: ^4.2.0
-        version: 4.7.0(vite@7.1.12(@types/node@24.9.1)(jiti@2.6.1)(less@4.4.2)(lightningcss@1.31.1)(sass@1.93.2)(terser@5.44.0)(tsx@4.21.0))
+        version: 4.7.0(vite@8.3.4(@types/node@24.9.1)(esbuild@0.25.11)(jiti@2.6.1)(less@4.4.2)(sass@1.93.2)(terser@5.44.0)(tsx@4.21.0))
       '@vitest/coverage-v8':
         specifier: ^3.2.4
-        version: 3.2.4(vitest@3.2.4(@types/node@24.9.1)(happy-dom@20.8.3)(jiti@2.6.1)(jsdom@24.1.3)(less@4.4.2)(lightningcss@1.31.1)(sass@1.93.2)(terser@5.44.0)(tsx@4.21.0))
+        version: 3.2.4(vitest@3.2.4(@types/node@24.9.1)(happy-dom@20.8.3)(jiti@2.6.1)(jsdom@24.1.3)(less@4.4.2)(lightningcss@1.33.0)(sass@1.93.2)(terser@5.44.0)(tsx@4.21.0))
       concurrently:
         specifier: 9.2.1
         version: 9.2.1
@@ -365,7 +417,7 @@ importers:
         version: 3.6.2
       storybook:
         specifier: ^9.1.1
-        version: 9.1.16(@testing-library/dom@10.4.1)(prettier@3.6.2)(vite@7.1.12(@types/node@24.9.1)(jiti@2.6.1)(less@4.4.2)(lightningcss@1.31.1)(sass@1.93.2)(terser@5.44.0)(tsx@4.21.0))
+        version: 9.1.16(@testing-library/dom@10.4.1)(prettier@3.6.2)(vite@8.3.4(@types/node@24.9.1)(esbuild@0.25.11)(jiti@2.6.1)(less@4.4.2)(sass@1.93.2)(terser@5.44.0)(tsx@4.21.0))
       tailwindcss:
         specifier: 4.2.1
         version: 4.2.1
@@ -374,7 +426,7 @@ importers:
         version: 8.5.0(@swc/core@1.15.40)(jiti@2.6.1)(postcss@8.5.30)(tsx@4.21.0)(typescript@5.9.3)
       vitest:
         specifier: ^3.2.4
-        version: 3.2.4(@types/node@24.9.1)(happy-dom@20.8.3)(jiti@2.6.1)(jsdom@24.1.3)(less@4.4.2)(lightningcss@1.31.1)(sass@1.93.2)(terser@5.44.0)(tsx@4.21.0)
+        version: 3.2.4(@types/node@24.9.1)(happy-dom@20.8.3)(jiti@2.6.1)(jsdom@24.1.3)(less@4.4.2)(lightningcss@1.33.0)(sass@1.93.2)(terser@5.44.0)(tsx@4.21.0)
       wait-on:
         specifier: 9.0.10
         version: 9.0.10
@@ -390,7 +442,7 @@ importers:
         version: 8.5.0(@swc/core@1.15.40)(jiti@2.6.1)(postcss@8.5.30)(tsx@4.21.0)(typescript@5.9.3)
       vitest:
         specifier: ^3.2.4
-        version: 3.2.4(@types/node@25.3.5)(happy-dom@20.8.3)(jiti@2.6.1)(jsdom@24.1.3)(less@4.4.2)(lightningcss@1.31.1)(sass@1.93.2)(terser@5.44.0)(tsx@4.21.0)
+        version: 3.2.4(@types/node@25.3.5)(happy-dom@20.8.3)(jiti@2.6.1)(jsdom@24.1.3)(less@4.4.2)(lightningcss@1.33.0)(sass@1.93.2)(terser@5.44.0)(tsx@4.21.0)
 
 packages:
 
@@ -1189,6 +1241,9 @@ packages:
       '@types/react': '>=16'
       react: '>=16'
 
+  '@oxc-project/types@0.154.0':
+    resolution: {integrity: sha512-KYOUGQFlLWR+s4QMV2Q9ko38TZm7EdO87Qm7rvZLqk/webse/cDjtyxKhg/47l0byCbs/k46LT8qc4PKjAikzA==}
+
   '@parcel/watcher-android-arm64@2.5.6':
     resolution: {integrity: sha512-YQxSS34tPF/6ZG7r/Ih9xy+kP/WwediEUsqmtf0cuCV5TPPKw/PQHRhueUo6JdeFJaqV3pyjm0GdYjZotbRt/A==}
     engines: {node: '>= 10.0.0'}
@@ -1278,6 +1333,11 @@ packages:
   '@preact/signals-core@1.13.0':
     resolution: {integrity: sha512-slT6XeTCAbdql61GVLlGU4x7XHI7kCZV5Um5uhE4zLX4ApgiiXc0UYFvVOKq06xcovzp7p+61l68oPi563ARKg==}
 
+  '@puppeteer/browsers@2.13.2':
+    resolution: {integrity: sha512-5EUZSUIc37H6aIXyWO0Z4y8NlF8NnjgmqeQgOGiswAU7pY0HOo16ho4+alIWmSfdZnjqBRawMsP3I5YqLSn6kw==}
+    engines: {node: '>=18'}
+    hasBin: true
+
   '@react-email/body@0.3.0':
     resolution: {integrity: sha512-uGo0BOOzjbMUo3lu+BIDWayvn5o6Xyfmnlla5VGf05n8gHMvO1ll7U4FtzWe3hxMLwt53pmc4iE0M+B5slG+Ug==}
     engines: {node: '>=20.0.0'}
@@ -1457,9 +1517,102 @@ packages:
     peerDependencies:
       react: ^18.0 || ^19.0 || ^19.0.0-rc
 
+  '@rolldown/binding-android-arm-eabi@1.2.14':
+    resolution: {integrity: sha512-aWR+XKH9+rW7m5fWq/5360J3mHycrx/o6xZM2DQFdJnTMdyP7/WzxPjhtLbVWdKo2y612/4U1bWqb3HQhiF7vg==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm]
+    os: [android]
+
+  '@rolldown/binding-android-arm64@1.2.14':
+    resolution: {integrity: sha512-QiVxHofl6A8lQU7WAtOUY4QMVZXohxwz7WJJoeh8NBEUyKfIkMRKhYyq8az/1RypNiIXzNTtiS6KwHz0erxYRQ==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm64]
+    os: [android]
+
+  '@rolldown/binding-darwin-arm64@1.2.14':
+    resolution: {integrity: sha512-lTQOzHuBIooh3jIr5XINQkjPGEuGy+Dsy0meXDr6Sjty0b99kYgGh4uBC/8mJX1T0kC8d6S0aPP1Y+bHkh6aBw==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm64]
+    os: [darwin]
+
+  '@rolldown/binding-darwin-x64@1.2.14':
+    resolution: {integrity: sha512-hyMKEGatjmBYCs/Q4sbIcL/GqpFEqsX3wc+HYVQ/85A4rxc1o7rPm4DUI4GV4k/h0ITddwFSGpqQunI14GXjTA==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [x64]
+    os: [darwin]
+
+  '@rolldown/binding-freebsd-x64@1.2.14':
+    resolution: {integrity: sha512-u371GbXoVXrEgP20PwzoGNOdAOqAMhzo19JzzY+V4YmmnC+DTOoqdbMu+O+54emM59Mik/UdrtWgcuEDKWRPKA==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [x64]
+    os: [freebsd]
+
+  '@rolldown/binding-linux-arm-gnueabihf@1.2.14':
+    resolution: {integrity: sha512-BqwKsdZQf6EqVWr8fv2MrDYzAvOZ7+NYFSJESRGs87fkseEhs0TU9TXgRJTkZoRRkxTizyEg1LKUXfU3/78uqg==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm]
+    os: [linux]
+
+  '@rolldown/binding-linux-arm64-gnu@1.2.14':
+    resolution: {integrity: sha512-SD9kY8M009x/7s57Z1dgUVlP5+uYBgKQK0Tkr1WIWngrtUJmRCW1RJFMY7QDla2khXhmg2i5Io7MUjcmZNZ/KQ==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm64]
+    os: [linux]
+
+  '@rolldown/binding-linux-arm64-musl@1.2.14':
+    resolution: {integrity: sha512-BJ2CL19M6uuWesMgnqJzgxoI+N+eV7b0A9O9vLV42y+gitC41fNa8KElau1tHVzuLWX5GzEuxMPhAO0tQXQMkg==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm64]
+    os: [linux]
+
+  '@rolldown/binding-linux-ppc64-gnu@1.2.14':
+    resolution: {integrity: sha512-4+Kl8daPV8NDHaD7mfCcc1pRM+Qg7ab8DyMm5FG5WoZgv4h2i3KFN1CybYBNbQqmuYm7ftJLvmMI1eHYJ22S/Q==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [ppc64]
+    os: [linux]
+
+  '@rolldown/binding-linux-s390x-gnu@1.2.14':
+    resolution: {integrity: sha512-V/h8ePq1fKDrmtFMz6xcCN3DKvuvMRrwwD1q0PkBeeo4DpK64biaKvqWGVxqCeYKqeRk7gE7/iKPxLCn08O97A==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [s390x]
+    os: [linux]
+
+  '@rolldown/binding-linux-x64-gnu@1.2.14':
+    resolution: {integrity: sha512-WxalXzgrLVpKC93xfpaJ3gCXUWzeCr+FRCbDVD2mUAy4L6Vo3lNVz0epUEUpxPWJkLNYUwM4OSIikv36OJ9mLg==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [x64]
+    os: [linux]
+
+  '@rolldown/binding-linux-x64-musl@1.2.14':
+    resolution: {integrity: sha512-3G3tnAmTpdk9jO3GQtyHXqeFD2SlecfTws/Y3M2mmj9nMBwwuLT4kur8sZKeu7ENUHSpVO3cIsm5A52LEWWwlg==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [x64]
+    os: [linux]
+
+  '@rolldown/binding-openharmony-arm64@1.2.14':
+    resolution: {integrity: sha512-qyr5XiNGxm2ytx17vvtcJ9nXn6v1gENETi503bJx3OGwZ1tSonj7BosxbMa/xeAfSl5iS9X6KjEWYXLu6v1L7Q==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm64]
+    os: [openharmony]
+
+  '@rolldown/binding-win32-arm64-msvc@1.2.14':
+    resolution: {integrity: sha512-oA4o5o0S2yB199YyYXDzKUv1Z56Rc+mgOjwm7Z/vJ9Z8igiDPYvoOuDyo6g7AK/ZaF09nPhDKVnGBcYHO11GXA==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [arm64]
+    os: [win32]
+
+  '@rolldown/binding-win32-x64-msvc@1.2.14':
+    resolution: {integrity: sha512-9mE94bf2GZUaR/fUSXCMpBoWkctu421Mi0ORpm4zqfbkjKep7RxzPFa5etcGs5h+2KApoWBOA/hAJa/7saGgEQ==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    cpu: [x64]
+    os: [win32]
+
   '@rolldown/pluginutils@1.0.0-beta.27':
     resolution: {integrity: sha512-+d0F4MKMCbeVUJwG96uQ4SgAznZNSq93I3V+9NHA4OpvqG8mRCpGdKmK8l/dl02h2CCDHwW2FqilnTyDcAnqjA==}
 
+  '@rolldown/pluginutils@1.0.1':
+    resolution: {integrity: sha512-2j9bGt5Jh8hj+vPtgzPtl72j0yRxHAyumoo6TNfAjsLB04UtpSvPbPcDcBMxz7n+9CYB0c1GxQFxYRg2jimqGw==}
+
   '@rollup/pluginutils@5.3.0':
     resolution: {integrity: sha512-5EdhGZtnu3V88ces7s53hhfK5KSASnJZv8Lulpc04cWO3REESroJXg73DFsOmgbU2BhwV0E20bu2IDZb3VKW4Q==}
     engines: {node: '>=14.0.0'}
@@ -1919,6 +2072,25 @@ packages:
     peerDependencies:
       '@testing-library/dom': '>=7.21.4'
 
+  '@tootallnate/quickjs-emscripten@0.23.0':
+    resolution: {integrity: sha512-C5Mc6rdnsaJDjO3UpGW/CQTHtCKaYlScZTly4JIu97Jxo/odCiH0ITnDXSJPTOrEKk/ycSZ0AOgTmkDtkOsvIA==}
+
+  '@trivago/prettier-plugin-sort-imports@5.2.2':
+    resolution: {integrity: sha512-fYDQA9e6yTNmA13TLVSA+WMQRc5Bn/c0EUBditUHNfMMxN7M82c38b1kEggVE3pLpZ0FwkwJkUEKMiOi52JXFA==}
+    engines: {node: '>18.12'}
+    peerDependencies:
+      '@vue/compiler-sfc': 3.x
+      prettier: 2.x - 3.x
+      prettier-plugin-svelte: 3.x
+      svelte: 4.x || 5.x
+    peerDependenciesMeta:
+      '@vue/compiler-sfc':
+        optional: true
+      prettier-plugin-svelte:
+        optional: true
+      svelte:
+        optional: true
+
   '@types/aria-query@5.0.4':
     resolution: {integrity: sha512-rfT93uj5s0PRL7EzccGMs3brplhcrghnDoV26NqKhCAS1hVo+WdNsPvE/yb6ilfr5hi2MEk6d5EWJTKdxg8jVw==}
 
@@ -1982,6 +2154,9 @@ packages:
   '@types/prop-types@15.7.15':
     resolution: {integrity: sha512-F6bEyamV9jKGAFBEmlQnesRPGOQqS2+Uwi0Em15xenOxHaf2hv6L8YCVn3rPdPJOiJfPiCnLIRyvwVaqMY3MIw==}
 
+  '@types/react-dom@18.3.0':
+    resolution: {integrity: sha512-EhwApuTmMBmXuFOikhQLIBUn6uFg81SwLMOAUgodJF14SOBOCMdU04gDoYi0WOJJHD144TL32z4yDqCW3dnkQg==}
+
   '@types/react-dom@18.3.7':
     resolution: {integrity: sha512-MEe3UeoENYVFXzoXEWsvcpg6ZvlrFNlOQ7EOsvhI3CfAXwzPfO8Qwuxd40nepsYKqyyVQnTdEfv68q91yLcKrQ==}
     peerDependencies:
@@ -1990,6 +2165,9 @@ packages:
   '@types/react@18.3.26':
     resolution: {integrity: sha512-RFA/bURkcKzx/X9oumPG9Vp3D3JUgus/d0b67KB0t5S/raciymilkOa66olh78MUI92QLbEJevO7rvqU/kjwKA==}
 
+  '@types/react@18.3.3':
+    resolution: {integrity: sha512-hti/R0pS0q1/xx+TsI73XIqk26eBsISZ2R0wUijXIngRK9R/e7Xw/cXVxQK7R5JjW+SV4zGcn5hXjudkN/pLIw==}
+
   '@types/resolve@1.20.6':
     resolution: {integrity: sha512-A4STmOXPhMUtHH+S6ymgE2GiBSMqf4oTvcQZMcHzokuTLVYzXTB8ttjcgxOVaAp2lGwEdzZ0J+cRbbeevQj1UQ==}
 
@@ -2014,6 +2192,9 @@ packages:
   '@types/yargs@17.0.35':
     resolution: {integrity: sha512-qUHkeCyQFxMXg79wQfTtfndEC+N9ZZg76HJftDJp+qH2tV7Gj4OJi7l+PiWwJ+pWtW8GwSmqsDj/oymhrTWXjg==}
 
+  '@types/yauzl@2.10.3':
+    resolution: {integrity: sha512-oJoftv0LSuaDZE3Le4DbKX+KS9G36NzOeSap90UIK0yMA/NhKJhqlSGtNDORNRaIbQfzjXDrQa0ytJ6mNRGz/Q==}
+
   '@unlayer/exporters@1.497.0':
     resolution: {integrity: sha512-erm4UsZcZkBTtbSkBehZ/pmhHKHDKT4kDISZ3JzzSi25ehZQpBJzEyiIQzEp135/7NDnAchbPgMask9qBo5X8g==}
     engines: {node: '>=14.0.0'}
@@ -2162,6 +2343,10 @@ packages:
     resolution: {integrity: sha512-Izi8RQcffqCeNVgFigKli1ssklIbpHnCYc6AknXGYoB6grJqyeby7jv12JUQgmTAnIDnbck1uxksT4dzN3PWBA==}
     engines: {node: '>=12'}
 
+  ast-types@0.13.4:
+    resolution: {integrity: sha512-x1FCFnFifvYDDzTaLII71vG5uvDwgtmDTEVWAxrgeiR8VjMONcCXJx7E+USjDtHlwFmt9MysbqgF9b9Vjr6w+w==}
+    engines: {node: '>=4'}
+
   ast-types@0.16.1:
     resolution: {integrity: sha512-6t10qk83GOG8p0vKmaCr8eiilZwO171AvbROMtvvNiwrTly62t+7XkA8RdIIVbpMhCASAsxgAzdRSwh6nw/5Dg==}
     engines: {node: '>=4'}
@@ -2182,6 +2367,14 @@ packages:
   axios@1.16.1:
     resolution: {integrity: sha512-caYkukvroVPO8KrzuJEb50Hm07KwfBZPEC3VeFHTsqWHvKTsy54hjJz9BS/cdaypROE2rH6xvm9mHX4fgWkr3A==}
 
+  b4a@1.9.0:
+    resolution: {integrity: sha512-dpfcF9fDNR6++cthXR67iyhgqWy9CBouAvIWhIntzBG6cvK/cnIPiZQjBwi/ZqjjBEDGfoNDtmB0kTjroOJ3pQ==}
+    peerDependencies:
+      react-native-b4a: '*'
+    peerDependenciesMeta:
+      react-native-b4a:
+        optional: true
+
   babel-jest@29.7.0:
     resolution: {integrity: sha512-BrvGY3xZSwEcCzKvKsCi2GgHqDqsYkOP4/by5xCgIwGXQxIEh+8ew3gmrE1y7XRR6LHZIj6yLYnUi/mm2KXKBg==}
     engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
@@ -2210,6 +2403,43 @@ packages:
   balanced-match@1.0.2:
     resolution: {integrity: sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==}
 
+  bare-events@2.9.2:
+    resolution: {integrity: sha512-AIPKioV7/Y/8KfZ3AAhjPJxLLbY49S64Ym5DakZlUg75qQiTgUq9hEJoEwa4eUezPUlXRy/i5NpsKvo9jgKmoA==}
+    peerDependencies:
+      bare-abort-controller: '*'
+    peerDependenciesMeta:
+      bare-abort-controller:
+        optional: true
+
+  bare-fs@4.8.4:
+    resolution: {integrity: sha512-MPC2eyrpbk3A873sK4y6rk+Iv4o2enxTjHZ8zH3HO0mjrpm5XjnguY2XmfidIsDV6vnjpbMBKUAJpV0ISD2SsQ==}
+    engines: {bare: '>=1.28.0'}
+    peerDependencies:
+      bare-buffer: '*'
+    peerDependenciesMeta:
+      bare-buffer:
+        optional: true
+
+  bare-path@3.1.2:
+    resolution: {integrity: sha512-ZyKbsuuqK6Ag0K8pX6V5Txq6XeJRvY+wXucnFGRjiyVYP9YWDpIQugk/b+enRYrEYBJaqLzghRQpXPMR7341Nw==}
+
+  bare-stream@2.13.4:
+    resolution: {integrity: sha512-PcrQ8lVLbiJscNm1Kez+Yp4Gy4AHGcN1lzwjvf5NybWen7VvEgUfyfnXYJ2zNqWnzOfCb1Abq6lH8ti0syQszA==}
+    peerDependencies:
+      bare-abort-controller: '*'
+      bare-buffer: '*'
+      bare-events: '*'
+    peerDependenciesMeta:
+      bare-abort-controller:
+        optional: true
+      bare-buffer:
+        optional: true
+      bare-events:
+        optional: true
+
+  bare-url@2.5.5:
+    resolution: {integrity: sha512-iM9qJCruvpt2rPaLsrumVDru9pogI7PHziHIa9kTNRFt8C8HuSa+kI9kFezK+NvHEFnnz71rKGZ1EAilq/3V/Q==}
+
   baseline-browser-mapping@2.8.20:
     resolution: {integrity: sha512-JMWsdF+O8Orq3EMukbUN1QfbLK9mX2CkUmQBcW2T0s8OmdAUL5LLM/6wFwSrqXzlXB13yhyK9gTKS1rIizOduQ==}
     hasBin: true
@@ -2218,10 +2448,17 @@ packages:
     resolution: {integrity: sha512-NF+epuEdnUYVlGuhaxbbq+dvJttwLnGY+YixlXlME5KpQ5W3CnXA5cVTneY3SPbPDRkcjMbifrwmFYcClgOZeg==}
     engines: {node: '>= 0.8'}
 
+  basic-ftp@5.3.1:
+    resolution: {integrity: sha512-bopVNp6ugyA150DDuZfPFdt1KZ5a94ZDiwX4hMgZDzF+GttD80lEy8kj98kbyhLXnPvhtIo93mdnLIjpCAeeOw==}
+    engines: {node: '>=10.0.0'}
+
   better-opn@3.0.2:
     resolution: {integrity: sha512-aVNobHnJqLiUelTaHat9DZ1qM2w0C0Eym4LPI/3JxOnSokGVdsl1T1kN7TFvsEAD8G47A6VKQ0TVHqbBnYMJlQ==}
     engines: {node: '>=12.0.0'}
 
+  binary-search@1.3.6:
+    resolution: {integrity: sha512-nbE1WxOTTrUWIfsfZ4aHGYu5DOuNkbxGokjV6Z2kxfJK3uaAb8zNK1muzOeipoLHZjInT4Br88BHpzevc681xA==}
+
   bowser@2.14.1:
     resolution: {integrity: sha512-tzPjzCxygAKWFOJP011oxFHs57HzIhOEracIgAePE4pqB3LikALKnSzUyU4MGs9/iCEUuHlAJTjTc5M+u7YEGg==}
 
@@ -2243,6 +2480,9 @@ packages:
   bser@2.1.1:
     resolution: {integrity: sha512-gQxTNE/GAfIIrmHLUE3oJyp5FO6HRBfhjnw4/wMmA63ZGDJnWBmgY/lyQBpnDUkGmAhbSe39tx2d/iTOAfglwQ==}
 
+  buffer-crc32@0.2.13:
+    resolution: {integrity: sha512-VO9Ht/+p3SN7SKWqcrgEzjGbRSJYTx+Q1pTQC0wrWqHx0vpJraQ6GtHx8tvcg1rlK1byhU5gccxgOgj7B0TDkQ==}
+
   buffer-from@1.1.2:
     resolution: {integrity: sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ==}
 
@@ -2284,6 +2524,10 @@ packages:
     resolution: {integrity: sha512-Gmy6FhYlCY7uOElZUSbxo2UCDH8owEk996gkbrpsgGtrJLM3J7jGxl9Ic7Qwwj4ivOE5AWZWRMecDdF7hqGjFA==}
     engines: {node: '>=10'}
 
+  caniemail@2.0.2:
+    resolution: {integrity: sha512-lvhn4RrF2Ae3PQA3HMOVGxFPqPAxfv8HWp+xUSqJPumbzFUzQGVgFG0nl8s0sjSoBd2PgmAqB5xRF0wcPbrVcA==}
+    engines: {node: '>=22.0.0'}
+
   caniuse-lite@1.0.30001751:
     resolution: {integrity: sha512-A0QJhug0Ly64Ii3eIqHu5X51ebln3k4yTUkY1j8drqpWHVreg/VLijN48cZ1bYPiqOQuqpkIKnzr/Ul8V+p6Cw==}
 
@@ -2319,6 +2563,11 @@ packages:
     resolution: {integrity: sha512-Qgzu8kfBvo+cA4962jnP1KkS6Dop5NS6g7R5LFYJr4b8Ub94PPQXUksCw9PvXoeXPRRddRNC5C1JQUR2SMGtnA==}
     engines: {node: '>= 14.16.0'}
 
+  chromium-bidi@14.0.0:
+    resolution: {integrity: sha512-9gYlLtS6tStdRWzrtXaTMnqcM4dudNegMXJxkR0I/CXObHalYeYcAMPrL19eroNZHtJ8DQmu1E+ZNOYu/IXMXw==}
+    peerDependencies:
+      devtools-protocol: '*'
+
   ci-info@3.9.0:
     resolution: {integrity: sha512-NIxF55hv4nSqQswkAeiOi1r83xy8JldOFDTWiug55KBu9Jnblncd2U6ViHmYgHf01TPZS77NJBhBMKdWj9HQMQ==}
     engines: {node: '>=8'}
@@ -2419,6 +2668,10 @@ packages:
     resolution: {integrity: sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==}
     engines: {node: '>= 8'}
 
+  css-what@6.2.2:
+    resolution: {integrity: sha512-u/O3vwbptzhMs3L1fQE82ZSLHQQfto5gyZzwteVIEyeaY5Fc7R4dapF/BvRoSYFeqfBk4m0V1Vafq5Pjv25wvA==}
+    engines: {node: '>= 6'}
+
   css.escape@1.5.1:
     resolution: {integrity: sha512-YUifsXXuknHlUsmlgyY0PKzgPOr7/FjCePfHNt0jxm83wHZi44VDMQ7/fGNkjY3/jV1MC+1CmZbaHzugyeRtpg==}
 
@@ -2433,6 +2686,10 @@ packages:
     resolution: {integrity: sha512-YGZxdTTL9lmLkCUTpg4j0zQ7IhRB5ZmqNBbGCl3Tg6MP/d5/6sY7L5mmTjzbc6JKgVZYiqTQTNhPFsbXNGlRaA==}
     engines: {node: '>=0.8'}
 
+  data-uri-to-buffer@6.0.2:
+    resolution: {integrity: sha512-7hvf7/GW8e86rW0ptuwS3OcBGDjIi6SZva7hCyWC0yYry2cOPmLIjXAUHI6DK2HsnwJd9ifmt57i8eV2n4YNpw==}
+    engines: {node: '>= 14'}
+
   data-urls@5.0.0:
     resolution: {integrity: sha512-ZYP5VBHshaDAiVZxjbRVcFJpc+4xGgT0bK3vzy1HLN8jTO975HEbuYzZJcHoQEY5K1a0z8YayJkyVETa08eNTg==}
     engines: {node: '>=18'}
@@ -2489,6 +2746,10 @@ packages:
     resolution: {integrity: sha512-8QmQKqEASLd5nx0U1B1okLElbUuuttJ/AnYmRXbbbGDWh6uS208EjD4Xqq/I9wK7u0v6O08XhTWnt5XtEbR6Dg==}
     engines: {node: '>= 0.4'}
 
+  degenerator@5.0.1:
+    resolution: {integrity: sha512-TllpMR/t0M5sqCXfj85i4XaAzxmS5tVA16dqvdkMwGmzI+dXLXnw3J+3Vdv7VKw+ThlTMboK6i9rnZ6Nntj5CQ==}
+    engines: {node: '>= 14'}
+
   delayed-stream@1.0.0:
     resolution: {integrity: sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==}
     engines: {node: '>=0.4.0'}
@@ -2505,6 +2766,9 @@ packages:
     resolution: {integrity: sha512-TLz+x/vEXm/Y7P7wn1EJFNLxYpUD4TgMosxY6fAVJUnJMbupHBOncxyWUG9OpTaH9EBD7uFI5LfEgmMOc54DsA==}
     engines: {node: '>=8'}
 
+  devtools-protocol@0.0.1608973:
+    resolution: {integrity: sha512-Tpm17fxYzt+J7VrGdc1k8YdRqS3YV7se/M6KeemEqvUbq/n7At1rWVuXMxQgpWkdwSdIEKYbU//Bve+Shm4YNQ==}
+
   diff-sequences@29.6.3:
     resolution: {integrity: sha512-EjePK1srD3P08o2j4f0ExnylqRs5B9tJjcp9t1krH2qRi8CCdsYfwe9JgSLurFBWwq4uOlipzfk5fHNvwFKr8Q==}
     engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
@@ -2547,6 +2811,10 @@ packages:
   domutils@3.2.2:
     resolution: {integrity: sha512-6kZKyUajlDuqlHKVX1w7gyslj9MPIXzIFiz/rGu35uC1wMi+kMhQwGhl4lt9unC9Vb9INnY9Z3/ZA3+FhASLaw==}
 
+  dot-prop@9.0.0:
+    resolution: {integrity: sha512-1gxPBJpI/pcjQhKgIU91II6Wkay+dLcN3M6rf2uwP8hRur3HtQXjVrdAK3sjC0piaEuxzMwjXChcETiJl47lAQ==}
+    engines: {node: '>=18'}
+
   dunder-proto@1.0.1:
     resolution: {integrity: sha512-KIN/nDJBQRcXw0MLVhZE9iQHmG68qAVIBg9CqmUYjmQIhgij9U5MFvrqkUL5FbtyyzZuOeOt0zdeRe4UY7ct+A==}
     engines: {node: '>= 0.4'}
@@ -2567,6 +2835,9 @@ packages:
   emoji-regex@9.2.2:
     resolution: {integrity: sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==}
 
+  end-of-stream@1.4.5:
+    resolution: {integrity: sha512-ooEGc6HP26xXq/N+GCGOT0JKCLDGrq2bQUZrQ7gyrJiZANJ/8YDTxTpQBXGMn+WbIQXNVpyWymm7KYVICQnyOg==}
+
   enhanced-resolve@5.20.0:
     resolution: {integrity: sha512-/ce7+jQ1PQ6rVXwe+jKEg5hW5ciicHwIQUagZkp6IufBoY3YDgdTTY1azVs0qoRgVmvsNB+rbjLJxDAeHHtwsQ==}
     engines: {node: '>=10.13.0'}
@@ -2648,11 +2919,20 @@ packages:
     resolution: {integrity: sha512-UpzcLCXolUWcNu5HtVMHYdXJjArjsF9C0aNnquZYY4uW/Vu0miy5YoWvbV345HauVvcAUnpRuhMMcqTcGOY2+w==}
     engines: {node: '>=8'}
 
+  escodegen@2.1.0:
+    resolution: {integrity: sha512-2NlIDTwUWJN0mRPQOdtQBzbUHvdGY2P1VXSyU83Q3xKxM7WHX2Ql8dKq782Q9TgQUNOLEzEYu9bzLNj1q88I5w==}
+    engines: {node: '>=6.0'}
+    hasBin: true
+
   esprima@4.0.1:
     resolution: {integrity: sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A==}
     engines: {node: '>=4'}
     hasBin: true
 
+  estraverse@5.3.0:
+    resolution: {integrity: sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==}
+    engines: {node: '>=4.0'}
+
   estree-walker@2.0.2:
     resolution: {integrity: sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==}
 
@@ -2666,6 +2946,9 @@ packages:
   eventemitter3@4.0.7:
     resolution: {integrity: sha512-8guHBZCwKnFhYdHr2ysuRWErTwhoN2X8XELRlrRwpmfeY2jjuUN4taQMsULKUVo1K4DvZl+0pgfyoysHxvmvEw==}
 
+  events-universal@1.0.1:
+    resolution: {integrity: sha512-LUd5euvbMLpwOF8m6ivPCbhQeSiYVNb8Vs0fQ8QjXo0JTkEHpz8pxdQf0gStltaPpw0Cca8b39KxvK9cfKRiAw==}
+
   execa@5.1.1:
     resolution: {integrity: sha512-8uSpZZocAZRBAPIEINJj3Lo9HyGitllczc27Eh5YYojjMFMn8yHMDMaUHE2Jqfq05D/wucwI4JGURyXt1vchyg==}
     engines: {node: '>=10'}
@@ -2690,6 +2973,14 @@ packages:
     resolution: {integrity: sha512-2Zks0hf1VLFYI1kbh0I5jP3KHHyCHpkfyHBzsSXRFgl/Bg9mWYfMW8oD+PdMPlEwy5HNsR9JutYy6pMeOh61nw==}
     engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
 
+  extract-zip@2.0.1:
+    resolution: {integrity: sha512-GDhU9ntwuKyGXdZBUgTIe+vXnWj0fppUEtMDL0+idd5Sta8TGpHssn/eusA9mrPr9qNDym6SxAYZjNvCn/9RBg==}
+    engines: {node: '>= 10.17.0'}
+    hasBin: true
+
+  fast-fifo@1.3.2:
+    resolution: {integrity: sha512-/d9sfos4yxzpwkDkuN7k2SqFKtYNmCTzgfEpz82x34IM9/zc8KGxQoXg1liNC/izpRM/MBdt44Nmx41ZWqk+FQ==}
+
   fast-json-stable-stringify@2.1.0:
     resolution: {integrity: sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==}
 
@@ -2699,6 +2990,9 @@ packages:
   fb-watchman@2.0.2:
     resolution: {integrity: sha512-p5161BqbuCaSnB8jIbzQHOlpgsPmK5rJVDfDKO91Axs5NC1uu3HRQm6wt9cd9/+GtQQIO53JdGXXoyDpTAsgYA==}
 
+  fd-slicer@1.1.0:
+    resolution: {integrity: sha512-cE1qsB/VwyQozZ+q1dGxR8LBYNZeofhEdUNGSMbQD3Gw2lAzX9Zb3uIU6Ebc/Fmyjo9AWWfnn0AUCHqtevs/8g==}
+
   fdir@6.5.0:
     resolution: {integrity: sha512-tIbYtZbucOs0BRGqPJkshJUYdL+SDH7dVM8gjy+ERp3WAUjLEFJE+02kanyHtwjWOnwrKYBiwAmM0p4kLJAnXg==}
     engines: {node: '>=12.0.0'}
@@ -2814,6 +3108,10 @@ packages:
     resolution: {integrity: sha512-sTSfBjoXBp89JvIKIefqw7U2CCebsc74kiY6awiGogKtoSGbgjYE/G/+l9sF3MWFPNc9IcoOC4ODfKHfxFmp0g==}
     engines: {node: '>= 0.4'}
 
+  get-stream@5.2.0:
+    resolution: {integrity: sha512-nBF+F1rAZVCu/p7rjzgA+Yb4lfYXrpl7a6VmJrU8wF9I1CKvP/QwPNZHnOlwbTkY6dvtFIzFMSyQXbLoTQPRpA==}
+    engines: {node: '>=8'}
+
   get-stream@6.0.1:
     resolution: {integrity: sha512-ts6Wi+2j3jQjqi70w5AlN8DFnkSwC+MqmxEzdEALB2qXZYV3X/b1CTfgPLGJNMeAWxdPfU8FO1ms3NUfaHCPYg==}
     engines: {node: '>=10'}
@@ -2821,6 +3119,10 @@ packages:
   get-tsconfig@4.13.6:
     resolution: {integrity: sha512-shZT/QMiSHc/YBLxxOkMtgSid5HFoauqCE3/exfsEcwg1WkeqjG+V40yBbBrsD+jW2HDXcs28xOfcbm2jI8Ddw==}
 
+  get-uri@6.0.5:
+    resolution: {integrity: sha512-b1O07XYq8eRuVzBNgJLstU6FYc1tS6wnMtF1I1D9lE8LxZSOGZ7LhxN54yPP6mGw5f2CkXY2BQUL9Fx41qvcIg==}
+    engines: {node: '>= 14'}
+
   glob@10.4.5:
     resolution: {integrity: sha512-7Bv8RF0k6xjo7d4A/PxYLbUCfb6c+Vpd2/mB2yRDlew7Jb5hEXiCD9ibfO7wpk8i4sevK6DFny9h7EYbM3/sHg==}
     deprecated: Old versions of glob are not supported, and contain widely publicized security vulnerabilities, which have been fixed in the current version. Please update. Support for old versions may be purchased (at exorbitant rates) by contacting i@izs.me
@@ -2907,6 +3209,9 @@ packages:
     resolution: {integrity: sha512-qY60FjREgVZL03vJU6IfMV4GDjGBIoOyvuFdpBDIX9yTlDw0TjxVBQp+P8NvpdIXNJvfWBTNul7fsAQJq2FNpg==}
     engines: {node: '>=14'}
 
+  htmlparser2@10.1.0:
+    resolution: {integrity: sha512-VTZkM9GWRAtEpveh7MSF6SjjrpNVNNVJfFup7xTY3UpFtm67foy9HDVXneLtFVt4pMz5kZtgNcvCniNFb1hlEQ==}
+
   htmlparser2@3.10.1:
     resolution: {integrity: sha512-IgieNijUMbkDovyoKObU1DUhm1iwNYE/fuifEoEHfd1oZKZDaONBSkal7Y01shxsM49R4XaMdGez3WnF9UfiCQ==}
 
@@ -2973,10 +3278,17 @@ packages:
   ini@1.3.8:
     resolution: {integrity: sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew==}
 
+  inline-style-parser@0.2.7:
+    resolution: {integrity: sha512-Nb2ctOyNR8DqQoR0OwRG95uNWIC0C1lCgf5Naz5H6Ji72KZ8OcFZLz2P5sNgwlyoJ8Yif11oMuYs5pBQa86csA==}
+
   internal-slot@1.1.0:
     resolution: {integrity: sha512-4gd7VpWNQNB4UKKCFFVcp1AVv+FMOgs9NKzjHKusc8jTMhd5eL1NqQqOpE0KzMds804/yHlglp3uxgluOqAPLw==}
     engines: {node: '>= 0.4'}
 
+  ip-address@10.7.4:
+    resolution: {integrity: sha512-DWBMKyeM25D70nrIiTkgQth59/G+naKOTep6huF9j+GmeK3DMD60Zvxg5d5qQnz+38AHgou6ean2LECX+lrKDg==}
+    engines: {node: '>= 12'}
+
   is-arguments@1.2.0:
     resolution: {integrity: sha512-7bVbi0huj/wrIAOzb8U1aszg9kdi3KN/CyU19CTI7tAoZYEZoL9yCDXpbXN+uPsuWnP02cyug1gleqq+TU+YCA==}
     engines: {node: '>= 0.4'}
@@ -3143,6 +3455,9 @@ packages:
   jackspeak@3.4.3:
     resolution: {integrity: sha512-OGlZQpz2yfahA/Rd1Y8Cd9SIEsqvXkLVoSw/cgwhnhFMDbsQFeZYoJJ7bIZBS9BcamUW96asq/npPWugM+RQBw==}
 
+  javascript-natural-sort@0.7.1:
+    resolution: {integrity: sha512-nO6jcEfZWQXDhOiBtG2KvKyEptz7RVbpGP4vTD2hLBdmNQSsCiicO2Ioinv6UI4y9ukqnBpy+XZ9H6uLNgJTlw==}
+
   jest-changed-files@29.7.0:
     resolution: {integrity: sha512-fEArFiwf1BpQ+4bXSprcDc3/x4HSzL4al2tozwVpDFpsxALjLYdyiIK4e5Vz66GQJIbXJ82+35PtysofptNX2w==}
     engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
@@ -3377,70 +3692,140 @@ packages:
     cpu: [arm64]
     os: [android]
 
+  lightningcss-android-arm64@1.33.0:
+    resolution: {integrity: sha512-gEpRTalKdosp4Bb8qWtc2iOgE5SeIHlpS1up9bFq2wAyYhl1UdTObYiHe98zEM9SQvSoqQZ1IQD0JNpg3Ml5pg==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm64]
+    os: [android]
+
   lightningcss-darwin-arm64@1.31.1:
     resolution: {integrity: sha512-02uTEqf3vIfNMq3h/z2cJfcOXnQ0GRwQrkmPafhueLb2h7mqEidiCzkE4gBMEH65abHRiQvhdcQ+aP0D0g67sg==}
     engines: {node: '>= 12.0.0'}
     cpu: [arm64]
     os: [darwin]
 
+  lightningcss-darwin-arm64@1.33.0:
+    resolution: {integrity: sha512-Sciaz8eenNTKn9b3t7+xr0ipTp9YxKQY4npwQ3mrRuL0BAVHBLyZxofhaKBAVtzmtRZ/zTyo0/to4B1uWG/Djg==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm64]
+    os: [darwin]
+
   lightningcss-darwin-x64@1.31.1:
     resolution: {integrity: sha512-1ObhyoCY+tGxtsz1lSx5NXCj3nirk0Y0kB/g8B8DT+sSx4G9djitg9ejFnjb3gJNWo7qXH4DIy2SUHvpoFwfTA==}
     engines: {node: '>= 12.0.0'}
     cpu: [x64]
     os: [darwin]
 
+  lightningcss-darwin-x64@1.33.0:
+    resolution: {integrity: sha512-Z5UPAxzrjlWNNyGy6i65cJzzvgJ5D3T6wMvs+gWpY9d7qRhANrxqAp6LhxIgZhWEw18RfJTGcRxjuLIBr+m8XQ==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [x64]
+    os: [darwin]
+
   lightningcss-freebsd-x64@1.31.1:
     resolution: {integrity: sha512-1RINmQKAItO6ISxYgPwszQE1BrsVU5aB45ho6O42mu96UiZBxEXsuQ7cJW4zs4CEodPUioj/QrXW1r9pLUM74A==}
     engines: {node: '>= 12.0.0'}
     cpu: [x64]
     os: [freebsd]
 
+  lightningcss-freebsd-x64@1.33.0:
+    resolution: {integrity: sha512-QQM/Ti/hQajJwCY+RiWuCZ9sdtI/XQk7nDK5vC8kkdwixezOlDgvDx7+RT+QjK6FcFT4MpsuoBnHIo/O3StRRg==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [x64]
+    os: [freebsd]
+
   lightningcss-linux-arm-gnueabihf@1.31.1:
     resolution: {integrity: sha512-OOCm2//MZJ87CdDK62rZIu+aw9gBv4azMJuA8/KB74wmfS3lnC4yoPHm0uXZ/dvNNHmnZnB8XLAZzObeG0nS1g==}
     engines: {node: '>= 12.0.0'}
     cpu: [arm]
     os: [linux]
 
+  lightningcss-linux-arm-gnueabihf@1.33.0:
+    resolution: {integrity: sha512-N7FVBe6iS24MlM6R/4RBTxGhQheZGs7tiQ9U32UtF75NzP5Q7xWPRqLBCKxlRQRk3rY1jCIPLzx7WzOhuUIRLQ==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm]
+    os: [linux]
+
   lightningcss-linux-arm64-gnu@1.31.1:
     resolution: {integrity: sha512-WKyLWztD71rTnou4xAD5kQT+982wvca7E6QoLpoawZ1gP9JM0GJj4Tp5jMUh9B3AitHbRZ2/H3W5xQmdEOUlLg==}
     engines: {node: '>= 12.0.0'}
     cpu: [arm64]
     os: [linux]
 
+  lightningcss-linux-arm64-gnu@1.33.0:
+    resolution: {integrity: sha512-j2v/itmy4HlNxlc6voKXYgBqNi0Ng2LShg4z7GufpEgs05P+2suBVyi9I6YHq5uoVFx9ETin3eCEhLVyXGQnKg==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm64]
+    os: [linux]
+
   lightningcss-linux-arm64-musl@1.31.1:
     resolution: {integrity: sha512-mVZ7Pg2zIbe3XlNbZJdjs86YViQFoJSpc41CbVmKBPiGmC4YrfeOyz65ms2qpAobVd7WQsbW4PdsSJEMymyIMg==}
     engines: {node: '>= 12.0.0'}
     cpu: [arm64]
     os: [linux]
 
+  lightningcss-linux-arm64-musl@1.33.0:
+    resolution: {integrity: sha512-yiO5ROMuYQgXbC60yjZU5CYSFZGKXL0HFATXt9mHJn1+zW55oCtMI9NfcVhYLMFDL7gV7oBPon/EmMMGg2OvtQ==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm64]
+    os: [linux]
+
   lightningcss-linux-x64-gnu@1.31.1:
     resolution: {integrity: sha512-xGlFWRMl+0KvUhgySdIaReQdB4FNudfUTARn7q0hh/V67PVGCs3ADFjw+6++kG1RNd0zdGRlEKa+T13/tQjPMA==}
     engines: {node: '>= 12.0.0'}
     cpu: [x64]
     os: [linux]
 
+  lightningcss-linux-x64-gnu@1.33.0:
+    resolution: {integrity: sha512-ar+Ju7LmcN0Jo4FpL4hpFybwNG9/3A/Br5KW2n2jyODg3MEZXaDYADdemoNS+BDNfMgKvylJLj4S5tyRActuAg==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [x64]
+    os: [linux]
+
   lightningcss-linux-x64-musl@1.31.1:
     resolution: {integrity: sha512-eowF8PrKHw9LpoZii5tdZwnBcYDxRw2rRCyvAXLi34iyeYfqCQNA9rmUM0ce62NlPhCvof1+9ivRaTY6pSKDaA==}
     engines: {node: '>= 12.0.0'}
     cpu: [x64]
     os: [linux]
 
+  lightningcss-linux-x64-musl@1.33.0:
+    resolution: {integrity: sha512-RYiYbkokw0trfKqqzfF55lginwEPrD3OJDfTuJzFs1MK6iFnDenaz1fqLLtX4ITG3OktJQXOeTaw1awrBAlZPw==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [x64]
+    os: [linux]
+
   lightningcss-win32-arm64-msvc@1.31.1:
     resolution: {integrity: sha512-aJReEbSEQzx1uBlQizAOBSjcmr9dCdL3XuC/6HLXAxmtErsj2ICo5yYggg1qOODQMtnjNQv2UHb9NpOuFtYe4w==}
     engines: {node: '>= 12.0.0'}
     cpu: [arm64]
     os: [win32]
 
+  lightningcss-win32-arm64-msvc@1.33.0:
+    resolution: {integrity: sha512-1K+MPfLSFVpphzpdbfkhlWk6wBrTObBzS2T6db10PNOZgR9GoVsAWzwNyuhUYYbTp23j+4RrncfujZ4uAzXvwA==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [arm64]
+    os: [win32]
+
   lightningcss-win32-x64-msvc@1.31.1:
     resolution: {integrity: sha512-I9aiFrbd7oYHwlnQDqr1Roz+fTz61oDDJX7n9tYF9FJymH1cIN1DtKw3iYt6b8WZgEjoNwVSncwF4wx/ZedMhw==}
     engines: {node: '>= 12.0.0'}
     cpu: [x64]
     os: [win32]
 
+  lightningcss-win32-x64-msvc@1.33.0:
+    resolution: {integrity: sha512-OlEICDx/Xl0FqSp4bry8zFnCvGpig3Gl4gCquvYwHuqJKEC1+n9NgDniFvqHGmMv1ZkqDJrDqKKSykTDX+ehuA==}
+    engines: {node: '>= 12.0.0'}
+    cpu: [x64]
+    os: [win32]
+
   lightningcss@1.31.1:
     resolution: {integrity: sha512-l51N2r93WmGUye3WuFoN5k10zyvrVs0qfKBhyC5ogUQ6Ew6JUSswh78mbSO+IU3nTWsyOArqPCcShdQSadghBQ==}
     engines: {node: '>= 12.0.0'}
 
+  lightningcss@1.33.0:
+    resolution: {integrity: sha512-WkUDrojuJs0xkgGf2udWxa3yGBRxPtxUkB79i6aCZLRgc7PM8fZe9TosfPDcvEpQZbuFASnHYmRLBLUbmLOIIA==}
+    engines: {node: '>= 12.0.0'}
+
   lilconfig@3.1.3:
     resolution: {integrity: sha512-/vlFKAoH5Cgt3Ie+JLhRbwOsCQePABiU3tJ1egGvyQ+33R/vcwM2Zl2QR/LzjsBeItPt3oSVXapn+m4nQDvpzw==}
     engines: {node: '>=14'}
@@ -3486,6 +3871,10 @@ packages:
   lru-cache@5.1.1:
     resolution: {integrity: sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==}
 
+  lru-cache@7.18.3:
+    resolution: {integrity: sha512-jumlc0BIUrS3qJGgIkWZsyfAM7NCWiBcCDhnd+3NNM5KbBmLTgHVfWBcg6W+rLUsIpzpERPsvwUP7CckAQSOoA==}
+    engines: {node: '>=12'}
+
   lz-string@1.5.0:
     resolution: {integrity: sha512-h5bgJWpxJNswbU7qCrV0tIKQCaS3blPDrqKWx+QxzuzL1zGUzij9XCWLrSLsJPu5t+eWA/ycetzYAO5IOMcWAQ==}
     hasBin: true
@@ -3549,6 +3938,10 @@ packages:
     resolution: {integrity: sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg==}
     engines: {node: '>=6'}
 
+  mimic-function@5.0.1:
+    resolution: {integrity: sha512-VP79XUPxV2CigYP3jWwAUFSku2aKqBH7uTAapFWCBqutsbmDo96KY5o8uh6U+/YSIn5OxJnXp73beVkpqMIGhA==}
+    engines: {node: '>=18'}
+
   min-indent@1.0.1:
     resolution: {integrity: sha512-I9jwMn07Sy/IwOj3zVkVik2JTvgpaykDZEigL6Rx6N9LbMywwUSMtxET+7lVoDLLd3O3IXwJwvuuns8UB/HeAg==}
     engines: {node: '>=4'}
@@ -3567,6 +3960,9 @@ packages:
     resolution: {integrity: sha512-qOOzS1cBTWYF4BH8fVePDBOO9iptMnGUEZwNc/cMWnTV2nVLZ7VoNWEPHkYczZA0pdoA7dl6e7FL659nX9S2aw==}
     engines: {node: '>=16 || 14 >=14.17'}
 
+  mitt@3.0.1:
+    resolution: {integrity: sha512-vKivATfr97l2/QBCYAkXYDbrIWPM2IIKEl7YPhjCvKlG3kE2gm+uBo6nEXK3M5/Ffh/FLpKExzOQ3JJoJGFKBw==}
+
   mkdirp@1.0.4:
     resolution: {integrity: sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw==}
     engines: {node: '>=10'}
@@ -3599,6 +3995,10 @@ packages:
     engines: {node: '>= 4.4.x'}
     hasBin: true
 
+  netmask@2.1.1:
+    resolution: {integrity: sha512-eonl3sLUha+S1GzTPxychyhnUzKyeQkZ7jLjKrBagJgPla13F+uQ71HgpFefyHgqrjEbCPkDArxYsjY8/+gLKA==}
+    engines: {node: '>= 0.4.0'}
+
   node-addon-api@7.1.1:
     resolution: {integrity: sha512-5m3bsyrjFWE1xf7nz7YXdN4udnVtXK6/Yfgn5qnahL6bCkf2yKt4k3nuTKAtT4r3IG8JNR2ncsIMdZuAzJjHQQ==}
 
@@ -3659,6 +4059,10 @@ packages:
     resolution: {integrity: sha512-kbpaSSGJTWdAY5KPVeMOKXSrPtr8C8C7wodJbcsd51jRnmD+GZu8Y0VoU6Dm5Z4vWr0Ig/1NKuWRKf7j5aaYSg==}
     engines: {node: '>=6'}
 
+  onetime@7.0.0:
+    resolution: {integrity: sha512-VXJjc87FScF88uafS3JllDgvAm+c/Slfz06lorj2uAY34rlUu0Nt+v8wreiImcrgAjjIHp1rXpTDlLOGw29WwQ==}
+    engines: {node: '>=18'}
+
   open@8.4.2:
     resolution: {integrity: sha512-7x81NCL719oNbsq/3mh+hVrAWmFuEYUqrq/Iw3kUzH8ReypT9QQ0BLoJS7/G9k6N81XjW4qHWtjWwe/9eLy1EQ==}
     engines: {node: '>=12'}
@@ -3699,6 +4103,14 @@ packages:
     resolution: {integrity: sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==}
     engines: {node: '>=6'}
 
+  pac-proxy-agent@7.2.0:
+    resolution: {integrity: sha512-TEB8ESquiLMc0lV8vcd5Ql/JAKAoyzHFXaStwjkzpOpC5Yv+pIzLfHvjTSdf3vpa2bMiUQrg9i6276yn8666aA==}
+    engines: {node: '>= 14'}
+
+  pac-resolver@7.0.1:
+    resolution: {integrity: sha512-5NPgf87AT2STgwa2ntRMr45jTKrYBGkVU36yT0ig/n/GMAa3oPqhZfIQ2kMEimReg0+t9kZViDVZ83qfVUlckg==}
+    engines: {node: '>= 14'}
+
   package-hash@4.0.0:
     resolution: {integrity: sha512-whdkPIooSu/bASggZ96BWVvZTRMOFxnyUG5PnTSGKoJE2gd5mbVNmR2Nj20QFzxYYgAXpoqC+AiXzl+UMRh7zQ==}
     engines: {node: '>=8'}
@@ -3757,6 +4169,9 @@ packages:
   peberminta@0.9.0:
     resolution: {integrity: sha512-XIxfHpEuSJbITd1H3EeQwpcZbTLHc+VVr8ANI9t5sit565tsI4/xK3KWTUFE2e6QiangUkh3B0jihzmGnNrRsQ==}
 
+  pend@1.2.0:
+    resolution: {integrity: sha512-F3asv42UuXchdzt+xXqfW1OGlVBe+mxa2mqI0pg5yAHZPvFmY3Y6drSf/GQ1A86WgWEN9Kzh/WrgKa6iGcHXLg==}
+
   picocolors@1.1.1:
     resolution: {integrity: sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==}
 
@@ -3768,6 +4183,10 @@ packages:
     resolution: {integrity: sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==}
     engines: {node: '>=12'}
 
+  picomatch@4.0.7:
+    resolution: {integrity: sha512-qcJu88Q2IWqJsDD529JKMdwGm/dvInW4HvQnRwiH9JtihJvzGOscDtHE3x1pBKeUOTysQ8kVmLnJ2kJu7yhcGA==}
+    engines: {node: '>=12'}
+
   pify@4.0.1:
     resolution: {integrity: sha512-uB80kBFb/tfd68bVleG9T5GGsGPjJrLAUpR5PZIrhBnIaRTQRjqdJSsIKkOP6OAIFbj7GOrcudc5pNjZ+geV2g==}
     engines: {node: '>=6'}
@@ -3867,10 +4286,21 @@ packages:
     resolution: {integrity: sha512-JOnOPQ/8TZgjs1JIH/m9ni7FfimjNa/PRx7y/Wb5qdItsnhO0jE4AT7fC0HjC28DUQWDr50dwSYZLdRMlqDq3Q==}
     engines: {node: '>=8'}
 
+  progress@2.0.3:
+    resolution: {integrity: sha512-7PiHtLll5LdnKIMw100I+8xJXR5gW2QwWYkT6iJva0bXitZKa/XMrSbdmg3r2Xnaidz9Qumd0VPaMrZlF9V9sA==}
+    engines: {node: '>=0.4.0'}
+
   prompts@2.4.2:
     resolution: {integrity: sha512-NxNv/kLguCA7p3jE8oL2aEBsrJWgAakBpgmgK6lpPWV+WuOmY6r2/zbAVnP+T8bQlA0nzHXSJSJW0Hq7ylaD2Q==}
     engines: {node: '>= 6'}
 
+  proxy-agent@6.5.0:
+    resolution: {integrity: sha512-TmatMXdr2KlRiA2CyDu8GqR8EjahTG3aY3nXjdzFyoZbmB8hrBsTyMezhULIXKnC0jpfjlmiZ3+EaCzoInSu/A==}
+    engines: {node: '>= 14'}
+
+  proxy-from-env@1.1.0:
+    resolution: {integrity: sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==}
+
   proxy-from-env@2.1.0:
     resolution: {integrity: sha512-cJ+oHTW1VAEa8cJslgmUZrc+sjRKgAKl3Zyse6+PV38hZe/V6Z14TbCuXcan9F9ghlz4QrFr2c92TNF82UkYHA==}
     engines: {node: '>=10'}
@@ -3881,10 +4311,17 @@ packages:
   psl@1.15.0:
     resolution: {integrity: sha512-JZd3gMVBAVQkSs6HdNZo9Sdo0LNcQeMNP3CozBJb3JYC/QUYZTnKxP+f8oWRX4rHP5EurWxqAHTSwUCjlNKa1w==}
 
+  pump@3.0.4:
+    resolution: {integrity: sha512-VS7sjc6KR7e1ukRFhQSY5LM2uBWAUPiOPa/A3mkKmiMwSmRFUITt0xuj+/lesgnCv+dPIEYlkzrcyXgquIHMcA==}
+
   punycode@2.3.1:
     resolution: {integrity: sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==}
     engines: {node: '>=6'}
 
+  puppeteer-core@24.43.1:
+    resolution: {integrity: sha512-T5ScUMAsmhdNbgDR41AGESYeS6V9MSgetkSnVhhW+gXvzC42VesKCn5ld87gAZDJ6vLHL9GkRvY9WtQWSnwFbw==}
+    engines: {node: '>=18'}
+
   pure-rand@6.1.0:
     resolution: {integrity: sha512-bVWawvoZoBYpp6yIoQtQXHZjmz35RSVHnUOTefl8Vcjr8snTPY1wnpSPMWekcFwbxI6gtmT7rSYPFvz71ldiOA==}
 
@@ -4004,6 +4441,11 @@ packages:
     deprecated: Rimraf versions prior to v4 are no longer supported
     hasBin: true
 
+  rolldown@1.2.14:
+    resolution: {integrity: sha512-eTBTTqMR6uHKLgcUqpJP8ntzDI6V4LYA8negAMBEI7gkgVvOdrx6VsvS2Ym+83KhOPdLCHWJu0w7UQFJZhHKNw==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    hasBin: true
+
   rollup@4.52.5:
     resolution: {integrity: sha512-3GuObel8h7Kqdjt0gxkEzaifHTqLVW56Y/bjN7PSQtkKr0w3V/QYSdt6QWYtd7A1xUtYQigtdUfgj1RvWVtorw==}
     engines: {node: '>=18.0.0', npm: '>=8.0.0'}
@@ -4069,6 +4511,11 @@ packages:
     engines: {node: '>=10'}
     hasBin: true
 
+  semver@7.8.5:
+    resolution: {integrity: sha512-Y7/KDsb8LjooZpwaqGyulO6DQlksgCncchHGk+sZIY4SBvUocMBEFH5Ur1fI4dV+Jvl0w6cjvucaIi40puRioA==}
+    engines: {node: '>=10'}
+    hasBin: true
+
   set-blocking@2.0.0:
     resolution: {integrity: sha512-KiKBS8AnWGEyLzofFfmvKwpdPzqiy16LvQfK3yv/fVH7Bj13/wl3JSR1J+rfgRE9q7xUJK4qvgS8raSOeLUehw==}
 
@@ -4129,6 +4576,18 @@ packages:
     resolution: {integrity: sha512-ZA6oR3T/pEyuqwMgAKT0/hAv8oAXckzbkmR0UkUosQ+Mc4RxGoJkRmwHgHufaenlyAgE1Mxgpdcrf75y6XcnDg==}
     engines: {node: '>=14.16'}
 
+  smart-buffer@4.2.0:
+    resolution: {integrity: sha512-94hK0Hh8rPqQl2xXc3HsaBoOXKV20MToPkcXvwbISWLEs+64sBq5kFgn2kJDHb1Pry9yrP0dxrCI9RRci7RXKg==}
+    engines: {node: '>= 6.0.0', npm: '>= 3.0.0'}
+
+  socks-proxy-agent@8.0.5:
+    resolution: {integrity: sha512-HehCEsotFqbPW9sJ8WVYB6UbmIMv7kUUORIF2Nncq4VQvBfNBLibW9YZR5dlYCSUhwcD628pRllm7n+E+YTzJw==}
+    engines: {node: '>= 14'}
+
+  socks@2.8.10:
+    resolution: {integrity: sha512-e0VyvkVTwVYViNovRkZ9aodhxVlyoMn7eJhVUPxZ+eK9P/7CBkxvvsBOHqFPEH416726W8tLXXXjKwqgTErrCQ==}
+    engines: {node: '>= 10.0.0', npm: '>= 3.0.0'}
+
   source-map-js@1.2.1:
     resolution: {integrity: sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==}
     engines: {node: '>=0.10.0'}
@@ -4159,6 +4618,10 @@ packages:
   spawnd@5.0.0:
     resolution: {integrity: sha512-28+AJr82moMVWolQvlAIv3JcYDkjkFTEmfDc503wxrF5l2rQ3dFz6DpbXp3kD4zmgGGldfM4xM4v1sFj/ZaIOA==}
 
+  split-lines@3.0.0:
+    resolution: {integrity: sha512-d0TpRBL/VfKDXsk8JxPF7zgF5pCUDdBMSlEL36xBgVeaX448t+yGXcJaikUyzkoKOJ0l6KpMfygzJU9naIuivw==}
+    engines: {node: '>=12'}
+
   sprintf-js@1.0.3:
     resolution: {integrity: sha512-D9cPgkvLlV3t3IzL0D0YLvGA9Ahk4PcvVwUbN0dSGr1aP0Nrt4AEnTUbuGvquEC0mA64Gqt1fzirlRs5ibXx8g==}
 
@@ -4188,6 +4651,9 @@ packages:
       prettier:
         optional: true
 
+  streamx@2.28.1:
+    resolution: {integrity: sha512-zEzXb0s5Cds7tqMH6rhZ05lcJydCWiQPEwiNngVqzsxCc962vLY4Uw+mW7od8kDH258k2Uz/JrOkdIAAhSh9VA==}
+
   string-length@4.0.2:
     resolution: {integrity: sha512-+l6rNN5fYHNhZZy41RXsYptCjA2Igmq4EG7kZAYFQI1E1VTXarr6ZPXBg6eq7Y6eK4FEhY6AJlyuFIb/v/S0VQ==}
     engines: {node: '>=10'}
@@ -4242,6 +4708,9 @@ packages:
   strip-literal@3.1.0:
     resolution: {integrity: sha512-8r3mkIM/2+PpjHoOtiAW8Rg3jJLHaV7xPwG+YRGrv6FP0wwk/toTpATxWYOW0BKdWwl82VT2tFYi5DlROa0Mxg==}
 
+  style-to-object@1.0.14:
+    resolution: {integrity: sha512-LIN7rULI0jBscWQYaSswptyderlarFkjQ+t79nzty8tcIAceVomEVlLzH5VP4Cmsv6MtKhs7qaAiwlcp+Mgaxw==}
+
   sucrase@3.35.0:
     resolution: {integrity: sha512-8EbVDiu9iN/nESwxeSxDKe0dunta1GOlHufmSSXxMD2z2/tMZpDMpvXQGsc+ajGo8y2uYUmixaSRUc/QPoQ0GA==}
     engines: {node: '>=16 || 14 >=14.17'}
@@ -4273,6 +4742,15 @@ packages:
     resolution: {integrity: sha512-g9ljZiwki/LfxmQADO3dEY1CbpmXT5Hm2fJ+QaGKwSXUylMybePR7/67YW7jOrrvjEgL1Fmz5kzyAjWVWLlucg==}
     engines: {node: '>=6'}
 
+  tar-fs@3.1.3:
+    resolution: {integrity: sha512-/hU4AXnIdZu+Gvl1pk0oI5f5HxWsCJRtY2aFaJdk9VvyL48DWU6iU5WAIPG+wIi1YvWA6eTJvIviP/tMAZZNwQ==}
+
+  tar-stream@3.2.2:
+    resolution: {integrity: sha512-+8NeqHRjQWH9nYlwo2gamAMImZCVzI4UoEgDpWorBt9OEfppiZn+uSkskzQKPWIZyji/C8fpWO7u69G0DX0tbg==}
+
+  teex@1.0.1:
+    resolution: {integrity: sha512-eYE6iEI62Ni1H8oIa7KlDU6uQBtqr4Eajni3wX7rpfXD8ysFx8z0+dri+KWEPWpBsxXfxu58x/0jvTVT1ekOSg==}
+
   terser@5.44.0:
     resolution: {integrity: sha512-nIVck8DK+GM/0Frwd+nIhZ84pR/BX7rmXMfYwyg+Sri5oGVE99/E3KvXqpC2xHFxyqXyGHTKBSioxxplrO4I4w==}
     engines: {node: '>=10'}
@@ -4286,6 +4764,9 @@ packages:
     resolution: {integrity: sha512-pFYqmTw68LXVjeWJMST4+borgQP2AyMNbg1BpZh9LbyhUeNkeaPF9gzfPGUAnSMV3qPYdWUwDIjjCLiSDOl7vg==}
     engines: {node: '>=18'}
 
+  text-decoder@1.2.7:
+    resolution: {integrity: sha512-vlLytXkeP4xvEq2otHeJfSQIRyWxo/oZGEbXrtEEF9Hnmrdly59sUbzZ/QgyWuLYHctCHxFF4tRQZNQ9k60ExQ==}
+
   thenify-all@1.6.0:
     resolution: {integrity: sha512-RNxQH/qI8/t3thXJDwcstUO4zeqo64+Uy/+sNVRBx4Xn2OX+OZ9oP+iJnNFqplFra2ZUVeKCSa2oVWi3T4uVmA==}
     engines: {node: '>=0.8'}
@@ -4306,6 +4787,10 @@ packages:
     resolution: {integrity: sha512-j2Zq4NyQYG5XMST4cbs02Ak8iJUdxRM0XI5QyxXuZOzKOINmWurp3smXu3y5wDcJrptwpSjgXHzIQxR0omXljQ==}
     engines: {node: '>=12.0.0'}
 
+  tinyglobby@0.2.17:
+    resolution: {integrity: sha512-wXR/dYpcqKmfWpEdZjiKJOwCNFndD0DMnrW/cYjVGttEkBfVgcLFHoNrlj47mjOVic9yyNu65alsgF4NQyTa2g==}
+    engines: {node: '>=12.0.0'}
+
   tinypool@1.1.1:
     resolution: {integrity: sha512-Zba82s87IFq9A9XmjiX5uZA/ARWDrB03OHlq+Vw1fSdt0I+4/Kutwy8BP4Y/y/aORMo61FQ0vIb5j44vSo5Pkg==}
     engines: {node: ^18.0.0 || >=20.0.0}
@@ -4390,6 +4875,13 @@ packages:
     resolution: {integrity: sha512-4dbzIzqvjtgiM5rw1k5rEHtBANKmdudhGyBEajN01fEyhaAIhsoKNy6y7+IN93IfpFtwY9iqi7kD+xwKhQsNJA==}
     engines: {node: '>=8'}
 
+  type-fest@4.41.0:
+    resolution: {integrity: sha512-TeTSQ6H5YHvpqVwBRcnLDCBnDOHWYu7IvGbHT6N8AOymcr9PJGjc1GTtiWZTYg0NCgYwvnYWEkVChQAr9bjfwA==}
+    engines: {node: '>=16'}
+
+  typed-query-selector@2.12.3:
+    resolution: {integrity: sha512-/dtuMZyutHLlrxWhhC1uib00ELUr2dZ8C9B8YzZYsJmeE3V56OxRblrSM2UaF142pcMtak7ehZ6+poWGeehNIg==}
+
   typedarray-to-buffer@3.1.5:
     resolution: {integrity: sha512-zdu8XMNEDepKKR+XYOXAVPtWui0ly0NtohUscw+UmaHiAWT8hrV1rr//H6V+0DvJ3OQ19S979M0laLfX8rm82Q==}
 
@@ -4497,15 +4989,16 @@ packages:
       yaml:
         optional: true
 
-  vite@7.1.12:
-    resolution: {integrity: sha512-ZWyE8YXEXqJrrSLvYgrRP7p62OziLW7xI5HYGWFzOvupfAlrLvURSzv/FyGyy0eidogEM3ujU+kUG1zuHgb6Ug==}
+  vite@8.3.4:
+    resolution: {integrity: sha512-IftLE8phJhdNRIGNEV4JCCvfNScoZQVfcXaN8TQropWGJtOHcu+iAB9pHcuGvmEb/kddw0LBe/jS8ztdC6xdiQ==}
     engines: {node: ^20.19.0 || >=22.12.0}
     hasBin: true
     peerDependencies:
       '@types/node': ^20.19.0 || >=22.12.0
+      '@vitejs/devtools': ^0.7.1
+      esbuild: ^0.27.0 || ^0.28.0
       jiti: '>=1.21.0'
       less: ^4.0.0
-      lightningcss: ^1.21.0
       sass: ^1.70.0
       sass-embedded: ^1.70.0
       stylus: '>=0.54.8'
@@ -4516,12 +5009,14 @@ packages:
     peerDependenciesMeta:
       '@types/node':
         optional: true
+      '@vitejs/devtools':
+        optional: true
+      esbuild:
+        optional: true
       jiti:
         optional: true
       less:
         optional: true
-      lightningcss:
-        optional: true
       sass:
         optional: true
       sass-embedded:
@@ -4587,6 +5082,9 @@ packages:
   walker@1.0.8:
     resolution: {integrity: sha512-ts/8E8l5b7kY0vlWLewOkDXMmPdLcVV4GmOQLyxuSswIJsweeFZtAsMF7k1Nszz+TYBQrlYRmzOnr398y1JemQ==}
 
+  webdriver-bidi-protocol@0.4.1:
+    resolution: {integrity: sha512-ARrjNjtWRRs2w4Tk7nqrf2gBI0QXWuOmMCx2hU+1jUt6d00MjMxURrhxhGbrsoiZKJrhTSTzbIrc554iKI10qw==}
+
   webidl-conversions@4.0.2:
     resolution: {integrity: sha512-YQ+BmxuTgd6UXZW3+ICGfyqRyHXVlD5GtQr5+qjiNW7bF0cqrzX500HVXPBOvgXb5YnzDd+h0zqyv61KUD7+Sg==}
 
@@ -4697,9 +5195,21 @@ packages:
       utf-8-validate:
         optional: true
 
-  xml-name-validator@5.0.0:
-    resolution: {integrity: sha512-EvGK8EJ3DhaHfbRlETOWAS5pO9MZITeauHKJyb8wyajUfQUenkIg2MvLDTZ4T/TgIcm3HU0TFBgWWboAZ30UHg==}
-    engines: {node: '>=18'}
+  ws@8.22.0:
+    resolution: {integrity: sha512-Ydggc987+RO0AnWtZ/7Wq9FtNvcrL1b/RO0ud9mWjUPgDrsAAwQSF51sm2hm1XofbU/4jkpGEsLFsZZxU+1DOg==}
+    engines: {node: '>=10.0.0'}
+    peerDependencies:
+      bufferutil: ^4.0.1
+      utf-8-validate: '>=5.0.2'
+    peerDependenciesMeta:
+      bufferutil:
+        optional: true
+      utf-8-validate:
+        optional: true
+
+  xml-name-validator@5.0.0:
+    resolution: {integrity: sha512-EvGK8EJ3DhaHfbRlETOWAS5pO9MZITeauHKJyb8wyajUfQUenkIg2MvLDTZ4T/TgIcm3HU0TFBgWWboAZ30UHg==}
+    engines: {node: '>=18'}
 
   xml@1.0.1:
     resolution: {integrity: sha512-huCv9IH9Tcf95zuYCsQraZtWnJvBtLVE0QHMOs8bWyZAFZNDcYjsPq1nEx8jKA9y+Beo9v+7OBPRisQTjinQMw==}
@@ -4733,6 +5243,9 @@ packages:
     resolution: {integrity: sha512-7dSzzRQ++CKnNI/krKnYRV7JKKPUXMEh61soaHKg9mrWEhzFWhFnxPxGl+69cD1Ou63C13NUPCnmIcrvqCuM6w==}
     engines: {node: '>=12'}
 
+  yauzl@2.10.0:
+    resolution: {integrity: sha512-p4a9I6X6nu6IhoGmBqAcbJy1mlC4j27vEPZX9F4L4/vZT3Lyq1VkFHw/V/PUcB9Buo+DG3iHkT0x3Qya58zc3g==}
+
   yocto-queue@0.1.0:
     resolution: {integrity: sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==}
     engines: {node: '>=10'}
@@ -4741,6 +5254,9 @@ packages:
     resolution: {integrity: sha512-AyeEbWOu/TAXdxlV9wmGcR0+yh2j3vYPGOECcIj2S7MkrLyC7ne+oye2BKTItt0ii2PHk4cDy+95+LshzbXnGg==}
     engines: {node: '>=12.20'}
 
+  zod@3.25.76:
+    resolution: {integrity: sha512-gzUt/qt81nXsFGKIFcC3YnfEAx5NkunCfnDlvuBSSFS02bcXu4Lmea0AFIUwbLWxWPx3d9p8S5QoaujKcNQxcQ==}
+
 snapshots:
 
   '@adobe/css-tools@4.4.4': {}
@@ -5519,12 +6035,12 @@ snapshots:
       '@types/yargs': 17.0.35
       chalk: 4.1.2
 
-  '@joshwooding/vite-plugin-react-docgen-typescript@0.6.1(typescript@5.9.3)(vite@7.1.12(@types/node@24.9.1)(jiti@2.6.1)(less@4.4.2)(lightningcss@1.31.1)(sass@1.93.2)(terser@5.44.0)(tsx@4.21.0))':
+  '@joshwooding/vite-plugin-react-docgen-typescript@0.6.1(typescript@5.9.3)(vite@8.3.4(@types/node@24.9.1)(esbuild@0.25.11)(jiti@2.6.1)(less@4.4.2)(sass@1.93.2)(terser@5.44.0)(tsx@4.21.0))':
     dependencies:
       glob: 10.4.5
       magic-string: 0.30.21
       react-docgen-typescript: 2.4.0(typescript@5.9.3)
-      vite: 7.1.12(@types/node@24.9.1)(jiti@2.6.1)(less@4.4.2)(lightningcss@1.31.1)(sass@1.93.2)(terser@5.44.0)(tsx@4.21.0)
+      vite: 8.3.4(@types/node@24.9.1)(esbuild@0.25.11)(jiti@2.6.1)(less@4.4.2)(sass@1.93.2)(terser@5.44.0)(tsx@4.21.0)
     optionalDependencies:
       typescript: 5.9.3
 
@@ -5622,6 +6138,8 @@ snapshots:
       '@types/react': 18.3.26
       react: 18.3.1
 
+  '@oxc-project/types@0.154.0': {}
+
   '@parcel/watcher-android-arm64@2.5.6':
     optional: true
 
@@ -5688,6 +6206,21 @@ snapshots:
 
   '@preact/signals-core@1.13.0': {}
 
+  '@puppeteer/browsers@2.13.2':
+    dependencies:
+      debug: 4.4.3
+      extract-zip: 2.0.1
+      progress: 2.0.3
+      proxy-agent: 6.5.0
+      semver: 7.8.5
+      tar-fs: 3.1.3
+      yargs: 17.7.2
+    transitivePeerDependencies:
+      - bare-abort-controller
+      - bare-buffer
+      - react-native-b4a
+      - supports-color
+
   '@react-email/body@0.3.0(react@18.3.1)':
     dependencies:
       react: 18.3.1
@@ -5812,8 +6345,55 @@ snapshots:
     dependencies:
       react: 18.3.1
 
+  '@rolldown/binding-android-arm-eabi@1.2.14':
+    optional: true
+
+  '@rolldown/binding-android-arm64@1.2.14':
+    optional: true
+
+  '@rolldown/binding-darwin-arm64@1.2.14':
+    optional: true
+
+  '@rolldown/binding-darwin-x64@1.2.14':
+    optional: true
+
+  '@rolldown/binding-freebsd-x64@1.2.14':
+    optional: true
+
+  '@rolldown/binding-linux-arm-gnueabihf@1.2.14':
+    optional: true
+
+  '@rolldown/binding-linux-arm64-gnu@1.2.14':
+    optional: true
+
+  '@rolldown/binding-linux-arm64-musl@1.2.14':
+    optional: true
+
+  '@rolldown/binding-linux-ppc64-gnu@1.2.14':
+    optional: true
+
+  '@rolldown/binding-linux-s390x-gnu@1.2.14':
+    optional: true
+
+  '@rolldown/binding-linux-x64-gnu@1.2.14':
+    optional: true
+
+  '@rolldown/binding-linux-x64-musl@1.2.14':
+    optional: true
+
+  '@rolldown/binding-openharmony-arm64@1.2.14':
+    optional: true
+
+  '@rolldown/binding-win32-arm64-msvc@1.2.14':
+    optional: true
+
+  '@rolldown/binding-win32-x64-msvc@1.2.14':
+    optional: true
+
   '@rolldown/pluginutils@1.0.0-beta.27': {}
 
+  '@rolldown/pluginutils@1.0.1': {}
+
   '@rollup/pluginutils@5.3.0(rollup@4.52.5)':
     dependencies:
       '@types/estree': 1.0.8
@@ -5970,33 +6550,33 @@ snapshots:
 
   '@standard-schema/spec@1.1.0': {}
 
-  '@storybook/addon-docs@9.1.16(@types/react@18.3.26)(storybook@9.1.16(@testing-library/dom@10.4.1)(prettier@3.6.2)(vite@7.1.12(@types/node@24.9.1)(jiti@2.6.1)(less@4.4.2)(lightningcss@1.31.1)(sass@1.93.2)(terser@5.44.0)(tsx@4.21.0)))':
+  '@storybook/addon-docs@9.1.16(@types/react@18.3.26)(storybook@9.1.16(@testing-library/dom@10.4.1)(prettier@3.6.2)(vite@8.3.4(@types/node@24.9.1)(esbuild@0.25.11)(jiti@2.6.1)(less@4.4.2)(sass@1.93.2)(terser@5.44.0)(tsx@4.21.0)))':
     dependencies:
       '@mdx-js/react': 3.1.1(@types/react@18.3.26)(react@18.3.1)
-      '@storybook/csf-plugin': 9.1.16(storybook@9.1.16(@testing-library/dom@10.4.1)(prettier@3.6.2)(vite@7.1.12(@types/node@24.9.1)(jiti@2.6.1)(less@4.4.2)(lightningcss@1.31.1)(sass@1.93.2)(terser@5.44.0)(tsx@4.21.0)))
+      '@storybook/csf-plugin': 9.1.16(storybook@9.1.16(@testing-library/dom@10.4.1)(prettier@3.6.2)(vite@8.3.4(@types/node@24.9.1)(esbuild@0.25.11)(jiti@2.6.1)(less@4.4.2)(sass@1.93.2)(terser@5.44.0)(tsx@4.21.0)))
       '@storybook/icons': 1.6.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@storybook/react-dom-shim': 9.1.16(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(storybook@9.1.16(@testing-library/dom@10.4.1)(prettier@3.6.2)(vite@7.1.12(@types/node@24.9.1)(jiti@2.6.1)(less@4.4.2)(lightningcss@1.31.1)(sass@1.93.2)(terser@5.44.0)(tsx@4.21.0)))
+      '@storybook/react-dom-shim': 9.1.16(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(storybook@9.1.16(@testing-library/dom@10.4.1)(prettier@3.6.2)(vite@8.3.4(@types/node@24.9.1)(esbuild@0.25.11)(jiti@2.6.1)(less@4.4.2)(sass@1.93.2)(terser@5.44.0)(tsx@4.21.0)))
       react: 18.3.1
       react-dom: 18.3.1(react@18.3.1)
-      storybook: 9.1.16(@testing-library/dom@10.4.1)(prettier@3.6.2)(vite@7.1.12(@types/node@24.9.1)(jiti@2.6.1)(less@4.4.2)(lightningcss@1.31.1)(sass@1.93.2)(terser@5.44.0)(tsx@4.21.0))
+      storybook: 9.1.16(@testing-library/dom@10.4.1)(prettier@3.6.2)(vite@8.3.4(@types/node@24.9.1)(esbuild@0.25.11)(jiti@2.6.1)(less@4.4.2)(sass@1.93.2)(terser@5.44.0)(tsx@4.21.0))
       ts-dedent: 2.2.0
     transitivePeerDependencies:
       - '@types/react'
 
-  '@storybook/addon-onboarding@9.1.16(storybook@9.1.16(@testing-library/dom@10.4.1)(prettier@3.6.2)(vite@7.1.12(@types/node@24.9.1)(jiti@2.6.1)(less@4.4.2)(lightningcss@1.31.1)(sass@1.93.2)(terser@5.44.0)(tsx@4.21.0)))':
+  '@storybook/addon-onboarding@9.1.16(storybook@9.1.16(@testing-library/dom@10.4.1)(prettier@3.6.2)(vite@8.3.4(@types/node@24.9.1)(esbuild@0.25.11)(jiti@2.6.1)(less@4.4.2)(sass@1.93.2)(terser@5.44.0)(tsx@4.21.0)))':
     dependencies:
-      storybook: 9.1.16(@testing-library/dom@10.4.1)(prettier@3.6.2)(vite@7.1.12(@types/node@24.9.1)(jiti@2.6.1)(less@4.4.2)(lightningcss@1.31.1)(sass@1.93.2)(terser@5.44.0)(tsx@4.21.0))
+      storybook: 9.1.16(@testing-library/dom@10.4.1)(prettier@3.6.2)(vite@8.3.4(@types/node@24.9.1)(esbuild@0.25.11)(jiti@2.6.1)(less@4.4.2)(sass@1.93.2)(terser@5.44.0)(tsx@4.21.0))
 
-  '@storybook/builder-vite@9.1.16(storybook@9.1.16(@testing-library/dom@10.4.1)(prettier@3.6.2)(vite@7.1.12(@types/node@24.9.1)(jiti@2.6.1)(less@4.4.2)(lightningcss@1.31.1)(sass@1.93.2)(terser@5.44.0)(tsx@4.21.0)))(vite@7.1.12(@types/node@24.9.1)(jiti@2.6.1)(less@4.4.2)(lightningcss@1.31.1)(sass@1.93.2)(terser@5.44.0)(tsx@4.21.0))':
+  '@storybook/builder-vite@9.1.16(storybook@9.1.16(@testing-library/dom@10.4.1)(prettier@3.6.2)(vite@8.3.4(@types/node@24.9.1)(esbuild@0.25.11)(jiti@2.6.1)(less@4.4.2)(sass@1.93.2)(terser@5.44.0)(tsx@4.21.0)))(vite@8.3.4(@types/node@24.9.1)(esbuild@0.25.11)(jiti@2.6.1)(less@4.4.2)(sass@1.93.2)(terser@5.44.0)(tsx@4.21.0))':
     dependencies:
-      '@storybook/csf-plugin': 9.1.16(storybook@9.1.16(@testing-library/dom@10.4.1)(prettier@3.6.2)(vite@7.1.12(@types/node@24.9.1)(jiti@2.6.1)(less@4.4.2)(lightningcss@1.31.1)(sass@1.93.2)(terser@5.44.0)(tsx@4.21.0)))
-      storybook: 9.1.16(@testing-library/dom@10.4.1)(prettier@3.6.2)(vite@7.1.12(@types/node@24.9.1)(jiti@2.6.1)(less@4.4.2)(lightningcss@1.31.1)(sass@1.93.2)(terser@5.44.0)(tsx@4.21.0))
+      '@storybook/csf-plugin': 9.1.16(storybook@9.1.16(@testing-library/dom@10.4.1)(prettier@3.6.2)(vite@8.3.4(@types/node@24.9.1)(esbuild@0.25.11)(jiti@2.6.1)(less@4.4.2)(sass@1.93.2)(terser@5.44.0)(tsx@4.21.0)))
+      storybook: 9.1.16(@testing-library/dom@10.4.1)(prettier@3.6.2)(vite@8.3.4(@types/node@24.9.1)(esbuild@0.25.11)(jiti@2.6.1)(less@4.4.2)(sass@1.93.2)(terser@5.44.0)(tsx@4.21.0))
       ts-dedent: 2.2.0
-      vite: 7.1.12(@types/node@24.9.1)(jiti@2.6.1)(less@4.4.2)(lightningcss@1.31.1)(sass@1.93.2)(terser@5.44.0)(tsx@4.21.0)
+      vite: 8.3.4(@types/node@24.9.1)(esbuild@0.25.11)(jiti@2.6.1)(less@4.4.2)(sass@1.93.2)(terser@5.44.0)(tsx@4.21.0)
 
-  '@storybook/csf-plugin@9.1.16(storybook@9.1.16(@testing-library/dom@10.4.1)(prettier@3.6.2)(vite@7.1.12(@types/node@24.9.1)(jiti@2.6.1)(less@4.4.2)(lightningcss@1.31.1)(sass@1.93.2)(terser@5.44.0)(tsx@4.21.0)))':
+  '@storybook/csf-plugin@9.1.16(storybook@9.1.16(@testing-library/dom@10.4.1)(prettier@3.6.2)(vite@8.3.4(@types/node@24.9.1)(esbuild@0.25.11)(jiti@2.6.1)(less@4.4.2)(sass@1.93.2)(terser@5.44.0)(tsx@4.21.0)))':
     dependencies:
-      storybook: 9.1.16(@testing-library/dom@10.4.1)(prettier@3.6.2)(vite@7.1.12(@types/node@24.9.1)(jiti@2.6.1)(less@4.4.2)(lightningcss@1.31.1)(sass@1.93.2)(terser@5.44.0)(tsx@4.21.0))
+      storybook: 9.1.16(@testing-library/dom@10.4.1)(prettier@3.6.2)(vite@8.3.4(@types/node@24.9.1)(esbuild@0.25.11)(jiti@2.6.1)(less@4.4.2)(sass@1.93.2)(terser@5.44.0)(tsx@4.21.0))
       unplugin: 1.16.1
 
   '@storybook/global@5.0.0': {}
@@ -6006,43 +6586,43 @@ snapshots:
       react: 18.3.1
       react-dom: 18.3.1(react@18.3.1)
 
-  '@storybook/react-dom-shim@9.1.16(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(storybook@9.1.16(@testing-library/dom@10.4.1)(prettier@3.6.2)(vite@7.1.12(@types/node@24.9.1)(jiti@2.6.1)(less@4.4.2)(lightningcss@1.31.1)(sass@1.93.2)(terser@5.44.0)(tsx@4.21.0)))':
+  '@storybook/react-dom-shim@9.1.16(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(storybook@9.1.16(@testing-library/dom@10.4.1)(prettier@3.6.2)(vite@8.3.4(@types/node@24.9.1)(esbuild@0.25.11)(jiti@2.6.1)(less@4.4.2)(sass@1.93.2)(terser@5.44.0)(tsx@4.21.0)))':
     dependencies:
       react: 18.3.1
       react-dom: 18.3.1(react@18.3.1)
-      storybook: 9.1.16(@testing-library/dom@10.4.1)(prettier@3.6.2)(vite@7.1.12(@types/node@24.9.1)(jiti@2.6.1)(less@4.4.2)(lightningcss@1.31.1)(sass@1.93.2)(terser@5.44.0)(tsx@4.21.0))
+      storybook: 9.1.16(@testing-library/dom@10.4.1)(prettier@3.6.2)(vite@8.3.4(@types/node@24.9.1)(esbuild@0.25.11)(jiti@2.6.1)(less@4.4.2)(sass@1.93.2)(terser@5.44.0)(tsx@4.21.0))
 
-  '@storybook/react-vite@9.1.16(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(rollup@4.52.5)(storybook@9.1.16(@testing-library/dom@10.4.1)(prettier@3.6.2)(vite@7.1.12(@types/node@24.9.1)(jiti@2.6.1)(less@4.4.2)(lightningcss@1.31.1)(sass@1.93.2)(terser@5.44.0)(tsx@4.21.0)))(typescript@5.9.3)(vite@7.1.12(@types/node@24.9.1)(jiti@2.6.1)(less@4.4.2)(lightningcss@1.31.1)(sass@1.93.2)(terser@5.44.0)(tsx@4.21.0))':
+  '@storybook/react-vite@9.1.16(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(rollup@4.52.5)(storybook@9.1.16(@testing-library/dom@10.4.1)(prettier@3.6.2)(vite@8.3.4(@types/node@24.9.1)(esbuild@0.25.11)(jiti@2.6.1)(less@4.4.2)(sass@1.93.2)(terser@5.44.0)(tsx@4.21.0)))(typescript@5.9.3)(vite@8.3.4(@types/node@24.9.1)(esbuild@0.25.11)(jiti@2.6.1)(less@4.4.2)(sass@1.93.2)(terser@5.44.0)(tsx@4.21.0))':
     dependencies:
-      '@joshwooding/vite-plugin-react-docgen-typescript': 0.6.1(typescript@5.9.3)(vite@7.1.12(@types/node@24.9.1)(jiti@2.6.1)(less@4.4.2)(lightningcss@1.31.1)(sass@1.93.2)(terser@5.44.0)(tsx@4.21.0))
+      '@joshwooding/vite-plugin-react-docgen-typescript': 0.6.1(typescript@5.9.3)(vite@8.3.4(@types/node@24.9.1)(esbuild@0.25.11)(jiti@2.6.1)(less@4.4.2)(sass@1.93.2)(terser@5.44.0)(tsx@4.21.0))
       '@rollup/pluginutils': 5.3.0(rollup@4.52.5)
-      '@storybook/builder-vite': 9.1.16(storybook@9.1.16(@testing-library/dom@10.4.1)(prettier@3.6.2)(vite@7.1.12(@types/node@24.9.1)(jiti@2.6.1)(less@4.4.2)(lightningcss@1.31.1)(sass@1.93.2)(terser@5.44.0)(tsx@4.21.0)))(vite@7.1.12(@types/node@24.9.1)(jiti@2.6.1)(less@4.4.2)(lightningcss@1.31.1)(sass@1.93.2)(terser@5.44.0)(tsx@4.21.0))
-      '@storybook/react': 9.1.16(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(storybook@9.1.16(@testing-library/dom@10.4.1)(prettier@3.6.2)(vite@7.1.12(@types/node@24.9.1)(jiti@2.6.1)(less@4.4.2)(lightningcss@1.31.1)(sass@1.93.2)(terser@5.44.0)(tsx@4.21.0)))(typescript@5.9.3)
+      '@storybook/builder-vite': 9.1.16(storybook@9.1.16(@testing-library/dom@10.4.1)(prettier@3.6.2)(vite@8.3.4(@types/node@24.9.1)(esbuild@0.25.11)(jiti@2.6.1)(less@4.4.2)(sass@1.93.2)(terser@5.44.0)(tsx@4.21.0)))(vite@8.3.4(@types/node@24.9.1)(esbuild@0.25.11)(jiti@2.6.1)(less@4.4.2)(sass@1.93.2)(terser@5.44.0)(tsx@4.21.0))
+      '@storybook/react': 9.1.16(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(storybook@9.1.16(@testing-library/dom@10.4.1)(prettier@3.6.2)(vite@8.3.4(@types/node@24.9.1)(esbuild@0.25.11)(jiti@2.6.1)(less@4.4.2)(sass@1.93.2)(terser@5.44.0)(tsx@4.21.0)))(typescript@5.9.3)
       find-up: 7.0.0
       magic-string: 0.30.21
       react: 18.3.1
       react-docgen: 8.0.2
       react-dom: 18.3.1(react@18.3.1)
       resolve: 1.22.11
-      storybook: 9.1.16(@testing-library/dom@10.4.1)(prettier@3.6.2)(vite@7.1.12(@types/node@24.9.1)(jiti@2.6.1)(less@4.4.2)(lightningcss@1.31.1)(sass@1.93.2)(terser@5.44.0)(tsx@4.21.0))
+      storybook: 9.1.16(@testing-library/dom@10.4.1)(prettier@3.6.2)(vite@8.3.4(@types/node@24.9.1)(esbuild@0.25.11)(jiti@2.6.1)(less@4.4.2)(sass@1.93.2)(terser@5.44.0)(tsx@4.21.0))
       tsconfig-paths: 4.2.0
-      vite: 7.1.12(@types/node@24.9.1)(jiti@2.6.1)(less@4.4.2)(lightningcss@1.31.1)(sass@1.93.2)(terser@5.44.0)(tsx@4.21.0)
+      vite: 8.3.4(@types/node@24.9.1)(esbuild@0.25.11)(jiti@2.6.1)(less@4.4.2)(sass@1.93.2)(terser@5.44.0)(tsx@4.21.0)
     transitivePeerDependencies:
       - rollup
       - supports-color
       - typescript
 
-  '@storybook/react@9.1.16(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(storybook@9.1.16(@testing-library/dom@10.4.1)(prettier@3.6.2)(vite@7.1.12(@types/node@24.9.1)(jiti@2.6.1)(less@4.4.2)(lightningcss@1.31.1)(sass@1.93.2)(terser@5.44.0)(tsx@4.21.0)))(typescript@5.9.3)':
+  '@storybook/react@9.1.16(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(storybook@9.1.16(@testing-library/dom@10.4.1)(prettier@3.6.2)(vite@8.3.4(@types/node@24.9.1)(esbuild@0.25.11)(jiti@2.6.1)(less@4.4.2)(sass@1.93.2)(terser@5.44.0)(tsx@4.21.0)))(typescript@5.9.3)':
     dependencies:
       '@storybook/global': 5.0.0
-      '@storybook/react-dom-shim': 9.1.16(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(storybook@9.1.16(@testing-library/dom@10.4.1)(prettier@3.6.2)(vite@7.1.12(@types/node@24.9.1)(jiti@2.6.1)(less@4.4.2)(lightningcss@1.31.1)(sass@1.93.2)(terser@5.44.0)(tsx@4.21.0)))
+      '@storybook/react-dom-shim': 9.1.16(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(storybook@9.1.16(@testing-library/dom@10.4.1)(prettier@3.6.2)(vite@8.3.4(@types/node@24.9.1)(esbuild@0.25.11)(jiti@2.6.1)(less@4.4.2)(sass@1.93.2)(terser@5.44.0)(tsx@4.21.0)))
       react: 18.3.1
       react-dom: 18.3.1(react@18.3.1)
-      storybook: 9.1.16(@testing-library/dom@10.4.1)(prettier@3.6.2)(vite@7.1.12(@types/node@24.9.1)(jiti@2.6.1)(less@4.4.2)(lightningcss@1.31.1)(sass@1.93.2)(terser@5.44.0)(tsx@4.21.0))
+      storybook: 9.1.16(@testing-library/dom@10.4.1)(prettier@3.6.2)(vite@8.3.4(@types/node@24.9.1)(esbuild@0.25.11)(jiti@2.6.1)(less@4.4.2)(sass@1.93.2)(terser@5.44.0)(tsx@4.21.0))
     optionalDependencies:
       typescript: 5.9.3
 
-  '@storybook/test-runner@0.23.0(@types/node@24.9.1)(storybook@9.1.16(@testing-library/dom@10.4.1)(prettier@3.6.2)(vite@7.1.12(@types/node@24.9.1)(jiti@2.6.1)(less@4.4.2)(lightningcss@1.31.1)(sass@1.93.2)(terser@5.44.0)(tsx@4.21.0)))':
+  '@storybook/test-runner@0.23.0(@types/node@24.9.1)(storybook@9.1.16(@testing-library/dom@10.4.1)(prettier@3.6.2)(vite@8.3.4(@types/node@24.9.1)(esbuild@0.25.11)(jiti@2.6.1)(less@4.4.2)(sass@1.93.2)(terser@5.44.0)(tsx@4.21.0)))':
     dependencies:
       '@babel/core': 7.28.5
       '@babel/generator': 7.28.5
@@ -6062,7 +6642,7 @@ snapshots:
       jest-watch-typeahead: 2.2.2(jest@29.7.0(@types/node@24.9.1))
       nyc: 15.1.0
       playwright: 1.60.0
-      storybook: 9.1.16(@testing-library/dom@10.4.1)(prettier@3.6.2)(vite@7.1.12(@types/node@24.9.1)(jiti@2.6.1)(less@4.4.2)(lightningcss@1.31.1)(sass@1.93.2)(terser@5.44.0)(tsx@4.21.0))
+      storybook: 9.1.16(@testing-library/dom@10.4.1)(prettier@3.6.2)(vite@8.3.4(@types/node@24.9.1)(esbuild@0.25.11)(jiti@2.6.1)(less@4.4.2)(sass@1.93.2)(terser@5.44.0)(tsx@4.21.0))
     transitivePeerDependencies:
       - '@swc/helpers'
       - '@types/node'
@@ -6200,12 +6780,12 @@ snapshots:
       '@tailwindcss/oxide-win32-arm64-msvc': 4.2.1
       '@tailwindcss/oxide-win32-x64-msvc': 4.2.1
 
-  '@tailwindcss/vite@4.2.1(vite@6.4.1(@types/node@25.3.5)(jiti@2.6.1)(less@4.4.2)(lightningcss@1.31.1)(sass@1.93.2)(terser@5.44.0)(tsx@4.21.0))':
+  '@tailwindcss/vite@4.2.1(vite@6.4.1(@types/node@25.3.5)(jiti@2.6.1)(less@4.4.2)(lightningcss@1.33.0)(sass@1.93.2)(terser@5.44.0)(tsx@4.21.0))':
     dependencies:
       '@tailwindcss/node': 4.2.1
       '@tailwindcss/oxide': 4.2.1
       tailwindcss: 4.2.1
-      vite: 6.4.1(@types/node@25.3.5)(jiti@2.6.1)(less@4.4.2)(lightningcss@1.31.1)(sass@1.93.2)(terser@5.44.0)(tsx@4.21.0)
+      vite: 6.4.1(@types/node@25.3.5)(jiti@2.6.1)(less@4.4.2)(lightningcss@1.33.0)(sass@1.93.2)(terser@5.44.0)(tsx@4.21.0)
 
   '@testing-library/dom@10.4.1':
     dependencies:
@@ -6252,6 +6832,20 @@ snapshots:
     dependencies:
       '@testing-library/dom': 10.4.1
 
+  '@tootallnate/quickjs-emscripten@0.23.0': {}
+
+  '@trivago/prettier-plugin-sort-imports@5.2.2(prettier@3.6.2)':
+    dependencies:
+      '@babel/generator': 7.28.5
+      '@babel/parser': 7.28.5
+      '@babel/traverse': 7.28.5
+      '@babel/types': 7.28.5
+      javascript-natural-sort: 0.7.1
+      lodash: 4.18.1
+      prettier: 3.6.2
+    transitivePeerDependencies:
+      - supports-color
+
   '@types/aria-query@5.0.4': {}
 
   '@types/babel__core@7.20.5':
@@ -6329,6 +6923,10 @@ snapshots:
 
   '@types/prop-types@15.7.15': {}
 
+  '@types/react-dom@18.3.0':
+    dependencies:
+      '@types/react': 18.3.26
+
   '@types/react-dom@18.3.7(@types/react@18.3.26)':
     dependencies:
       '@types/react': 18.3.26
@@ -6338,6 +6936,11 @@ snapshots:
       '@types/prop-types': 15.7.15
       csstype: 3.1.3
 
+  '@types/react@18.3.3':
+    dependencies:
+      '@types/prop-types': 15.7.15
+      csstype: 3.1.3
+
   '@types/resolve@1.20.6': {}
 
   '@types/stack-utils@2.0.3': {}
@@ -6360,6 +6963,11 @@ snapshots:
     dependencies:
       '@types/yargs-parser': 21.0.3
 
+  '@types/yauzl@2.10.3':
+    dependencies:
+      '@types/node': 24.9.1
+    optional: true
+
   '@unlayer/exporters@1.497.0(@unlayer/types@1.497.0)':
     dependencies:
       '@lexical/headless': 0.41.0
@@ -6387,7 +6995,7 @@ snapshots:
 
   '@unlayer/types@1.497.0': {}
 
-  '@vitejs/plugin-react@4.7.0(vite@6.4.1(@types/node@25.3.5)(jiti@2.6.1)(less@4.4.2)(lightningcss@1.31.1)(sass@1.93.2)(terser@5.44.0)(tsx@4.21.0))':
+  '@vitejs/plugin-react@4.7.0(vite@6.4.1(@types/node@25.3.5)(jiti@2.6.1)(less@4.4.2)(lightningcss@1.33.0)(sass@1.93.2)(terser@5.44.0)(tsx@4.21.0))':
     dependencies:
       '@babel/core': 7.28.5
       '@babel/plugin-transform-react-jsx-self': 7.27.1(@babel/core@7.28.5)
@@ -6395,11 +7003,11 @@ snapshots:
       '@rolldown/pluginutils': 1.0.0-beta.27
       '@types/babel__core': 7.20.5
       react-refresh: 0.17.0
-      vite: 6.4.1(@types/node@25.3.5)(jiti@2.6.1)(less@4.4.2)(lightningcss@1.31.1)(sass@1.93.2)(terser@5.44.0)(tsx@4.21.0)
+      vite: 6.4.1(@types/node@25.3.5)(jiti@2.6.1)(less@4.4.2)(lightningcss@1.33.0)(sass@1.93.2)(terser@5.44.0)(tsx@4.21.0)
     transitivePeerDependencies:
       - supports-color
 
-  '@vitejs/plugin-react@4.7.0(vite@7.1.12(@types/node@24.9.1)(jiti@2.6.1)(less@4.4.2)(lightningcss@1.31.1)(sass@1.93.2)(terser@5.44.0)(tsx@4.21.0))':
+  '@vitejs/plugin-react@4.7.0(vite@8.3.4(@types/node@24.9.1)(esbuild@0.25.11)(jiti@2.6.1)(less@4.4.2)(sass@1.93.2)(terser@5.44.0)(tsx@4.21.0))':
     dependencies:
       '@babel/core': 7.28.5
       '@babel/plugin-transform-react-jsx-self': 7.27.1(@babel/core@7.28.5)
@@ -6407,11 +7015,11 @@ snapshots:
       '@rolldown/pluginutils': 1.0.0-beta.27
       '@types/babel__core': 7.20.5
       react-refresh: 0.17.0
-      vite: 7.1.12(@types/node@24.9.1)(jiti@2.6.1)(less@4.4.2)(lightningcss@1.31.1)(sass@1.93.2)(terser@5.44.0)(tsx@4.21.0)
+      vite: 8.3.4(@types/node@24.9.1)(esbuild@0.25.11)(jiti@2.6.1)(less@4.4.2)(sass@1.93.2)(terser@5.44.0)(tsx@4.21.0)
     transitivePeerDependencies:
       - supports-color
 
-  '@vitest/coverage-v8@3.2.4(vitest@3.2.4(@types/node@24.9.1)(happy-dom@20.8.3)(jiti@2.6.1)(jsdom@24.1.3)(less@4.4.2)(lightningcss@1.31.1)(sass@1.93.2)(terser@5.44.0)(tsx@4.21.0))':
+  '@vitest/coverage-v8@3.2.4(vitest@3.2.4(@types/node@24.9.1)(happy-dom@20.8.3)(jiti@2.6.1)(jsdom@24.1.3)(less@4.4.2)(lightningcss@1.33.0)(sass@1.93.2)(terser@5.44.0)(tsx@4.21.0))':
     dependencies:
       '@ampproject/remapping': 2.3.0
       '@bcoe/v8-coverage': 1.0.2
@@ -6426,7 +7034,7 @@ snapshots:
       std-env: 3.10.0
       test-exclude: 7.0.1
       tinyrainbow: 2.0.0
-      vitest: 3.2.4(@types/node@24.9.1)(happy-dom@20.8.3)(jiti@2.6.1)(jsdom@24.1.3)(less@4.4.2)(lightningcss@1.31.1)(sass@1.93.2)(terser@5.44.0)(tsx@4.21.0)
+      vitest: 3.2.4(@types/node@24.9.1)(happy-dom@20.8.3)(jiti@2.6.1)(jsdom@24.1.3)(less@4.4.2)(lightningcss@1.33.0)(sass@1.93.2)(terser@5.44.0)(tsx@4.21.0)
     transitivePeerDependencies:
       - supports-color
 
@@ -6438,29 +7046,29 @@ snapshots:
       chai: 5.3.3
       tinyrainbow: 2.0.0
 
-  '@vitest/mocker@3.2.4(vite@6.4.1(@types/node@24.9.1)(jiti@2.6.1)(less@4.4.2)(lightningcss@1.31.1)(sass@1.93.2)(terser@5.44.0)(tsx@4.21.0))':
+  '@vitest/mocker@3.2.4(vite@6.4.1(@types/node@24.9.1)(jiti@2.6.1)(less@4.4.2)(lightningcss@1.33.0)(sass@1.93.2)(terser@5.44.0)(tsx@4.21.0))':
     dependencies:
       '@vitest/spy': 3.2.4
       estree-walker: 3.0.3
       magic-string: 0.30.21
     optionalDependencies:
-      vite: 6.4.1(@types/node@24.9.1)(jiti@2.6.1)(less@4.4.2)(lightningcss@1.31.1)(sass@1.93.2)(terser@5.44.0)(tsx@4.21.0)
+      vite: 6.4.1(@types/node@24.9.1)(jiti@2.6.1)(less@4.4.2)(lightningcss@1.33.0)(sass@1.93.2)(terser@5.44.0)(tsx@4.21.0)
 
-  '@vitest/mocker@3.2.4(vite@6.4.1(@types/node@25.3.5)(jiti@2.6.1)(less@4.4.2)(lightningcss@1.31.1)(sass@1.93.2)(terser@5.44.0)(tsx@4.21.0))':
+  '@vitest/mocker@3.2.4(vite@6.4.1(@types/node@25.3.5)(jiti@2.6.1)(less@4.4.2)(lightningcss@1.33.0)(sass@1.93.2)(terser@5.44.0)(tsx@4.21.0))':
     dependencies:
       '@vitest/spy': 3.2.4
       estree-walker: 3.0.3
       magic-string: 0.30.21
     optionalDependencies:
-      vite: 6.4.1(@types/node@25.3.5)(jiti@2.6.1)(less@4.4.2)(lightningcss@1.31.1)(sass@1.93.2)(terser@5.44.0)(tsx@4.21.0)
+      vite: 6.4.1(@types/node@25.3.5)(jiti@2.6.1)(less@4.4.2)(lightningcss@1.33.0)(sass@1.93.2)(terser@5.44.0)(tsx@4.21.0)
 
-  '@vitest/mocker@3.2.4(vite@7.1.12(@types/node@24.9.1)(jiti@2.6.1)(less@4.4.2)(lightningcss@1.31.1)(sass@1.93.2)(terser@5.44.0)(tsx@4.21.0))':
+  '@vitest/mocker@3.2.4(vite@8.3.4(@types/node@24.9.1)(esbuild@0.25.11)(jiti@2.6.1)(less@4.4.2)(sass@1.93.2)(terser@5.44.0)(tsx@4.21.0))':
     dependencies:
       '@vitest/spy': 3.2.4
       estree-walker: 3.0.3
       magic-string: 0.30.21
     optionalDependencies:
-      vite: 7.1.12(@types/node@24.9.1)(jiti@2.6.1)(less@4.4.2)(lightningcss@1.31.1)(sass@1.93.2)(terser@5.44.0)(tsx@4.21.0)
+      vite: 8.3.4(@types/node@24.9.1)(esbuild@0.25.11)(jiti@2.6.1)(less@4.4.2)(sass@1.93.2)(terser@5.44.0)(tsx@4.21.0)
 
   '@vitest/pretty-format@3.2.4':
     dependencies:
@@ -6561,6 +7169,10 @@ snapshots:
 
   assertion-error@2.0.1: {}
 
+  ast-types@0.13.4:
+    dependencies:
+      tslib: 2.8.1
+
   ast-types@0.16.1:
     dependencies:
       tslib: 2.8.1
@@ -6589,6 +7201,8 @@ snapshots:
       - debug
       - supports-color
 
+  b4a@1.9.0: {}
+
   babel-jest@29.7.0(@babel/core@7.28.5):
     dependencies:
       '@babel/core': 7.28.5
@@ -6646,16 +7260,49 @@ snapshots:
 
   balanced-match@1.0.2: {}
 
+  bare-events@2.9.2: {}
+
+  bare-fs@4.8.4:
+    dependencies:
+      bare-events: 2.9.2
+      bare-path: 3.1.2
+      bare-stream: 2.13.4(bare-events@2.9.2)
+      bare-url: 2.5.5
+      fast-fifo: 1.3.2
+    transitivePeerDependencies:
+      - bare-abort-controller
+      - react-native-b4a
+
+  bare-path@3.1.2: {}
+
+  bare-stream@2.13.4(bare-events@2.9.2):
+    dependencies:
+      b4a: 1.9.0
+      streamx: 2.28.1
+      teex: 1.0.1
+    optionalDependencies:
+      bare-events: 2.9.2
+    transitivePeerDependencies:
+      - react-native-b4a
+
+  bare-url@2.5.5:
+    dependencies:
+      bare-path: 3.1.2
+
   baseline-browser-mapping@2.8.20: {}
 
   basic-auth@2.0.1:
     dependencies:
       safe-buffer: 5.1.2
 
+  basic-ftp@5.3.1: {}
+
   better-opn@3.0.2:
     dependencies:
       open: 8.4.2
 
+  binary-search@1.3.6: {}
+
   bowser@2.14.1: {}
 
   brace-expansion@1.1.14:
@@ -6683,6 +7330,8 @@ snapshots:
     dependencies:
       node-int64: 0.4.0
 
+  buffer-crc32@0.2.13: {}
+
   buffer-from@1.1.2: {}
 
   bundle-require@5.1.0(esbuild@0.25.11):
@@ -6722,6 +7371,26 @@ snapshots:
 
   camelcase@6.3.0: {}
 
+  caniemail@2.0.2(prettier@3.6.2):
+    dependencies:
+      '@adobe/css-tools': 4.4.4
+      '@trivago/prettier-plugin-sort-imports': 5.2.2(prettier@3.6.2)
+      binary-search: 1.3.6
+      css-what: 6.2.2
+      domhandler: 5.0.3
+      dot-prop: 9.0.0
+      htmlparser2: 10.1.0
+      micromatch: 4.0.8
+      onetime: 7.0.0
+      split-lines: 3.0.0
+      style-to-object: 1.0.14
+    transitivePeerDependencies:
+      - '@vue/compiler-sfc'
+      - prettier
+      - prettier-plugin-svelte
+      - supports-color
+      - svelte
+
   caniuse-lite@1.0.30001751: {}
 
   chai@5.3.3:
@@ -6755,6 +7424,12 @@ snapshots:
     dependencies:
       readdirp: 4.1.2
 
+  chromium-bidi@14.0.0(devtools-protocol@0.0.1608973):
+    dependencies:
+      devtools-protocol: 0.0.1608973
+      mitt: 3.0.1
+      zod: 3.25.76
+
   ci-info@3.9.0: {}
 
   cjs-module-lexer@1.4.3: {}
@@ -6853,6 +7528,8 @@ snapshots:
       shebang-command: 2.0.0
       which: 2.0.2
 
+  css-what@6.2.2: {}
+
   css.escape@1.5.1: {}
 
   cssstyle@4.6.0:
@@ -6867,6 +7544,8 @@ snapshots:
       find-pkg: 0.1.2
       fs-exists-sync: 0.1.0
 
+  data-uri-to-buffer@6.0.2: {}
+
   data-urls@5.0.0:
     dependencies:
       whatwg-mimetype: 4.0.0
@@ -6925,6 +7604,12 @@ snapshots:
       has-property-descriptors: 1.0.2
       object-keys: 1.1.1
 
+  degenerator@5.0.1:
+    dependencies:
+      ast-types: 0.13.4
+      escodegen: 2.1.0
+      esprima: 4.0.1
+
   delayed-stream@1.0.0: {}
 
   dequal@2.0.3: {}
@@ -6933,6 +7618,8 @@ snapshots:
 
   detect-newline@3.1.0: {}
 
+  devtools-protocol@0.0.1608973: {}
+
   diff-sequences@29.6.3: {}
 
   diffable-html@4.1.0:
@@ -6981,6 +7668,10 @@ snapshots:
       domelementtype: 2.3.0
       domhandler: 5.0.3
 
+  dot-prop@9.0.0:
+    dependencies:
+      type-fest: 4.41.0
+
   dunder-proto@1.0.1:
     dependencies:
       call-bind-apply-helpers: 1.0.2
@@ -6997,6 +7688,10 @@ snapshots:
 
   emoji-regex@9.2.2: {}
 
+  end-of-stream@1.4.5:
+    dependencies:
+      once: 1.4.0
+
   enhanced-resolve@5.20.0:
     dependencies:
       graceful-fs: 4.2.11
@@ -7123,8 +7818,18 @@ snapshots:
 
   escape-string-regexp@2.0.0: {}
 
+  escodegen@2.1.0:
+    dependencies:
+      esprima: 4.0.1
+      estraverse: 5.3.0
+      esutils: 2.0.3
+    optionalDependencies:
+      source-map: 0.6.1
+
   esprima@4.0.1: {}
 
+  estraverse@5.3.0: {}
+
   estree-walker@2.0.2: {}
 
   estree-walker@3.0.3:
@@ -7135,6 +7840,12 @@ snapshots:
 
   eventemitter3@4.0.7: {}
 
+  events-universal@1.0.1:
+    dependencies:
+      bare-events: 2.9.2
+    transitivePeerDependencies:
+      - bare-abort-controller
+
   execa@5.1.1:
     dependencies:
       cross-spawn: 7.0.6
@@ -7165,6 +7876,18 @@ snapshots:
       jest-message-util: 29.7.0
       jest-util: 29.7.0
 
+  extract-zip@2.0.1:
+    dependencies:
+      debug: 4.4.3
+      get-stream: 5.2.0
+      yauzl: 2.10.0
+    optionalDependencies:
+      '@types/yauzl': 2.10.3
+    transitivePeerDependencies:
+      - supports-color
+
+  fast-fifo@1.3.2: {}
+
   fast-json-stable-stringify@2.1.0: {}
 
   fast-sha256@1.3.0: {}
@@ -7173,10 +7896,18 @@ snapshots:
     dependencies:
       bser: 2.1.1
 
+  fd-slicer@1.1.0:
+    dependencies:
+      pend: 1.2.0
+
   fdir@6.5.0(picomatch@4.0.3):
     optionalDependencies:
       picomatch: 4.0.3
 
+  fdir@6.5.0(picomatch@4.0.7):
+    optionalDependencies:
+      picomatch: 4.0.7
+
   fill-range@7.1.1:
     dependencies:
       to-regex-range: 5.0.1
@@ -7291,12 +8022,24 @@ snapshots:
       dunder-proto: 1.0.1
       es-object-atoms: 1.1.1
 
+  get-stream@5.2.0:
+    dependencies:
+      pump: 3.0.4
+
   get-stream@6.0.1: {}
 
   get-tsconfig@4.13.6:
     dependencies:
       resolve-pkg-maps: 1.0.0
 
+  get-uri@6.0.5:
+    dependencies:
+      basic-ftp: 5.3.1
+      data-uri-to-buffer: 6.0.2
+      debug: 4.4.3
+    transitivePeerDependencies:
+      - supports-color
+
   glob@10.4.5:
     dependencies:
       foreground-child: 3.3.1
@@ -7394,6 +8137,13 @@ snapshots:
       htmlparser2: 8.0.2
       selderee: 0.11.0
 
+  htmlparser2@10.1.0:
+    dependencies:
+      domelementtype: 2.3.0
+      domhandler: 5.0.3
+      domutils: 3.2.2
+      entities: 7.0.1
+
   htmlparser2@3.10.1:
     dependencies:
       domelementtype: 1.3.1
@@ -7488,12 +8238,16 @@ snapshots:
 
   ini@1.3.8: {}
 
+  inline-style-parser@0.2.7: {}
+
   internal-slot@1.1.0:
     dependencies:
       es-errors: 1.3.0
       hasown: 2.0.2
       side-channel: 1.1.0
 
+  ip-address@10.7.4: {}
+
   is-arguments@1.2.0:
     dependencies:
       call-bound: 1.0.4
@@ -7679,6 +8433,8 @@ snapshots:
     optionalDependencies:
       '@pkgjs/parseargs': 0.11.0
 
+  javascript-natural-sort@0.7.1: {}
+
   jest-changed-files@29.7.0:
     dependencies:
       execa: 5.1.1
@@ -8136,36 +8892,69 @@ snapshots:
   lightningcss-android-arm64@1.31.1:
     optional: true
 
+  lightningcss-android-arm64@1.33.0:
+    optional: true
+
   lightningcss-darwin-arm64@1.31.1:
     optional: true
 
+  lightningcss-darwin-arm64@1.33.0:
+    optional: true
+
   lightningcss-darwin-x64@1.31.1:
     optional: true
 
+  lightningcss-darwin-x64@1.33.0:
+    optional: true
+
   lightningcss-freebsd-x64@1.31.1:
     optional: true
 
+  lightningcss-freebsd-x64@1.33.0:
+    optional: true
+
   lightningcss-linux-arm-gnueabihf@1.31.1:
     optional: true
 
+  lightningcss-linux-arm-gnueabihf@1.33.0:
+    optional: true
+
   lightningcss-linux-arm64-gnu@1.31.1:
     optional: true
 
+  lightningcss-linux-arm64-gnu@1.33.0:
+    optional: true
+
   lightningcss-linux-arm64-musl@1.31.1:
     optional: true
 
+  lightningcss-linux-arm64-musl@1.33.0:
+    optional: true
+
   lightningcss-linux-x64-gnu@1.31.1:
     optional: true
 
+  lightningcss-linux-x64-gnu@1.33.0:
+    optional: true
+
   lightningcss-linux-x64-musl@1.31.1:
     optional: true
 
+  lightningcss-linux-x64-musl@1.33.0:
+    optional: true
+
   lightningcss-win32-arm64-msvc@1.31.1:
     optional: true
 
+  lightningcss-win32-arm64-msvc@1.33.0:
+    optional: true
+
   lightningcss-win32-x64-msvc@1.31.1:
     optional: true
 
+  lightningcss-win32-x64-msvc@1.33.0:
+    optional: true
+
   lightningcss@1.31.1:
     dependencies:
       detect-libc: 2.1.2
@@ -8182,6 +8971,22 @@ snapshots:
       lightningcss-win32-arm64-msvc: 1.31.1
       lightningcss-win32-x64-msvc: 1.31.1
 
+  lightningcss@1.33.0:
+    dependencies:
+      detect-libc: 2.1.2
+    optionalDependencies:
+      lightningcss-android-arm64: 1.33.0
+      lightningcss-darwin-arm64: 1.33.0
+      lightningcss-darwin-x64: 1.33.0
+      lightningcss-freebsd-x64: 1.33.0
+      lightningcss-linux-arm-gnueabihf: 1.33.0
+      lightningcss-linux-arm64-gnu: 1.33.0
+      lightningcss-linux-arm64-musl: 1.33.0
+      lightningcss-linux-x64-gnu: 1.33.0
+      lightningcss-linux-x64-musl: 1.33.0
+      lightningcss-win32-arm64-msvc: 1.33.0
+      lightningcss-win32-x64-msvc: 1.33.0
+
   lilconfig@3.1.3: {}
 
   lines-and-columns@1.2.4: {}
@@ -8216,6 +9021,8 @@ snapshots:
     dependencies:
       yallist: 3.1.1
 
+  lru-cache@7.18.3: {}
+
   lz-string@1.5.0: {}
 
   magic-string@0.30.21:
@@ -8269,6 +9076,8 @@ snapshots:
 
   mimic-fn@2.1.0: {}
 
+  mimic-function@5.0.1: {}
+
   min-indent@1.0.1: {}
 
   minimatch@3.1.5:
@@ -8283,6 +9092,8 @@ snapshots:
 
   minipass@7.1.2: {}
 
+  mitt@3.0.1: {}
+
   mkdirp@1.0.4: {}
 
   mlly@1.8.0:
@@ -8312,6 +9123,8 @@ snapshots:
       sax: 1.6.1
     optional: true
 
+  netmask@2.1.1: {}
+
   node-addon-api@7.1.1:
     optional: true
 
@@ -8393,6 +9206,10 @@ snapshots:
     dependencies:
       mimic-fn: 2.1.0
 
+  onetime@7.0.0:
+    dependencies:
+      mimic-function: 5.0.1
+
   open@8.4.2:
     dependencies:
       define-lazy-prop: 2.0.0
@@ -8429,6 +9246,24 @@ snapshots:
 
   p-try@2.2.0: {}
 
+  pac-proxy-agent@7.2.0:
+    dependencies:
+      '@tootallnate/quickjs-emscripten': 0.23.0
+      agent-base: 7.1.4
+      debug: 4.4.3
+      get-uri: 6.0.5
+      http-proxy-agent: 7.0.2
+      https-proxy-agent: 7.0.6
+      pac-resolver: 7.0.1
+      socks-proxy-agent: 8.0.5
+    transitivePeerDependencies:
+      - supports-color
+
+  pac-resolver@7.0.1:
+    dependencies:
+      degenerator: 5.0.1
+      netmask: 2.1.1
+
   package-hash@4.0.0:
     dependencies:
       graceful-fs: 4.2.11
@@ -8480,12 +9315,16 @@ snapshots:
 
   peberminta@0.9.0: {}
 
+  pend@1.2.0: {}
+
   picocolors@1.1.1: {}
 
   picomatch@2.3.2: {}
 
   picomatch@4.0.3: {}
 
+  picomatch@4.0.7: {}
+
   pify@4.0.1:
     optional: true
 
@@ -8579,11 +9418,28 @@ snapshots:
     dependencies:
       fromentries: 1.3.2
 
+  progress@2.0.3: {}
+
   prompts@2.4.2:
     dependencies:
       kleur: 3.0.3
       sisteransi: 1.0.5
 
+  proxy-agent@6.5.0:
+    dependencies:
+      agent-base: 7.1.4
+      debug: 4.4.3
+      http-proxy-agent: 7.0.2
+      https-proxy-agent: 7.0.6
+      lru-cache: 7.18.3
+      pac-proxy-agent: 7.2.0
+      proxy-from-env: 1.1.0
+      socks-proxy-agent: 8.0.5
+    transitivePeerDependencies:
+      - supports-color
+
+  proxy-from-env@1.1.0: {}
+
   proxy-from-env@2.1.0: {}
 
   prr@1.0.1:
@@ -8593,8 +9449,30 @@ snapshots:
     dependencies:
       punycode: 2.3.1
 
+  pump@3.0.4:
+    dependencies:
+      end-of-stream: 1.4.5
+      once: 1.4.0
+
   punycode@2.3.1: {}
 
+  puppeteer-core@24.43.1:
+    dependencies:
+      '@puppeteer/browsers': 2.13.2
+      chromium-bidi: 14.0.0(devtools-protocol@0.0.1608973)
+      debug: 4.4.3
+      devtools-protocol: 0.0.1608973
+      typed-query-selector: 2.12.3
+      webdriver-bidi-protocol: 0.4.1
+      ws: 8.22.0
+    transitivePeerDependencies:
+      - bare-abort-controller
+      - bare-buffer
+      - bufferutil
+      - react-native-b4a
+      - supports-color
+      - utf-8-validate
+
   pure-rand@6.1.0: {}
 
   qs@6.15.2:
@@ -8717,6 +9595,27 @@ snapshots:
     dependencies:
       glob: 7.2.3
 
+  rolldown@1.2.14:
+    dependencies:
+      '@oxc-project/types': 0.154.0
+      '@rolldown/pluginutils': 1.0.1
+    optionalDependencies:
+      '@rolldown/binding-android-arm-eabi': 1.2.14
+      '@rolldown/binding-android-arm64': 1.2.14
+      '@rolldown/binding-darwin-arm64': 1.2.14
+      '@rolldown/binding-darwin-x64': 1.2.14
+      '@rolldown/binding-freebsd-x64': 1.2.14
+      '@rolldown/binding-linux-arm-gnueabihf': 1.2.14
+      '@rolldown/binding-linux-arm64-gnu': 1.2.14
+      '@rolldown/binding-linux-arm64-musl': 1.2.14
+      '@rolldown/binding-linux-ppc64-gnu': 1.2.14
+      '@rolldown/binding-linux-s390x-gnu': 1.2.14
+      '@rolldown/binding-linux-x64-gnu': 1.2.14
+      '@rolldown/binding-linux-x64-musl': 1.2.14
+      '@rolldown/binding-openharmony-arm64': 1.2.14
+      '@rolldown/binding-win32-arm64-msvc': 1.2.14
+      '@rolldown/binding-win32-x64-msvc': 1.2.14
+
   rollup@4.52.5:
     dependencies:
       '@types/estree': 1.0.8
@@ -8800,6 +9699,8 @@ snapshots:
 
   semver@7.7.3: {}
 
+  semver@7.8.5: {}
+
   set-blocking@2.0.0: {}
 
   set-function-length@1.2.2:
@@ -8866,6 +9767,21 @@ snapshots:
 
   slash@5.1.0: {}
 
+  smart-buffer@4.2.0: {}
+
+  socks-proxy-agent@8.0.5:
+    dependencies:
+      agent-base: 7.1.4
+      debug: 4.4.3
+      socks: 2.8.10
+    transitivePeerDependencies:
+      - supports-color
+
+  socks@2.8.10:
+    dependencies:
+      ip-address: 10.7.4
+      smart-buffer: 4.2.0
+
   source-map-js@1.2.1: {}
 
   source-map-js@1.2.2: {}
@@ -8905,6 +9821,8 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  split-lines@3.0.0: {}
+
   sprintf-js@1.0.3: {}
 
   stack-utils@2.0.6:
@@ -8925,13 +9843,13 @@ snapshots:
       es-errors: 1.3.0
       internal-slot: 1.1.0
 
-  storybook@9.1.16(@testing-library/dom@10.4.1)(prettier@3.6.2)(vite@7.1.12(@types/node@24.9.1)(jiti@2.6.1)(less@4.4.2)(lightningcss@1.31.1)(sass@1.93.2)(terser@5.44.0)(tsx@4.21.0)):
+  storybook@9.1.16(@testing-library/dom@10.4.1)(prettier@3.6.2)(vite@8.3.4(@types/node@24.9.1)(esbuild@0.25.11)(jiti@2.6.1)(less@4.4.2)(sass@1.93.2)(terser@5.44.0)(tsx@4.21.0)):
     dependencies:
       '@storybook/global': 5.0.0
       '@testing-library/jest-dom': 6.9.1
       '@testing-library/user-event': 14.6.1(@testing-library/dom@10.4.1)
       '@vitest/expect': 3.2.4
-      '@vitest/mocker': 3.2.4(vite@7.1.12(@types/node@24.9.1)(jiti@2.6.1)(less@4.4.2)(lightningcss@1.31.1)(sass@1.93.2)(terser@5.44.0)(tsx@4.21.0))
+      '@vitest/mocker': 3.2.4(vite@8.3.4(@types/node@24.9.1)(esbuild@0.25.11)(jiti@2.6.1)(less@4.4.2)(sass@1.93.2)(terser@5.44.0)(tsx@4.21.0))
       '@vitest/spy': 3.2.4
       better-opn: 3.0.2
       esbuild: 0.25.11
@@ -8949,6 +9867,15 @@ snapshots:
       - utf-8-validate
       - vite
 
+  streamx@2.28.1:
+    dependencies:
+      events-universal: 1.0.1
+      fast-fifo: 1.3.2
+      text-decoder: 1.2.7
+    transitivePeerDependencies:
+      - bare-abort-controller
+      - react-native-b4a
+
   string-length@4.0.2:
     dependencies:
       char-regex: 1.0.2
@@ -9001,6 +9928,10 @@ snapshots:
     dependencies:
       js-tokens: 9.0.1
 
+  style-to-object@1.0.14:
+    dependencies:
+      inline-style-parser: 0.2.7
+
   sucrase@3.35.0:
     dependencies:
       '@jridgewell/gen-mapping': 0.3.13
@@ -9031,6 +9962,36 @@ snapshots:
 
   tapable@2.3.0: {}
 
+  tar-fs@3.1.3:
+    dependencies:
+      pump: 3.0.4
+      tar-stream: 3.2.2
+    optionalDependencies:
+      bare-fs: 4.8.4
+      bare-path: 3.1.2
+    transitivePeerDependencies:
+      - bare-abort-controller
+      - bare-buffer
+      - react-native-b4a
+
+  tar-stream@3.2.2:
+    dependencies:
+      b4a: 1.9.0
+      bare-fs: 4.8.4
+      fast-fifo: 1.3.2
+      streamx: 2.28.1
+    transitivePeerDependencies:
+      - bare-abort-controller
+      - bare-buffer
+      - react-native-b4a
+
+  teex@1.0.1:
+    dependencies:
+      streamx: 2.28.1
+    transitivePeerDependencies:
+      - bare-abort-controller
+      - react-native-b4a
+
   terser@5.44.0:
     dependencies:
       '@jridgewell/source-map': 0.3.11
@@ -9051,6 +10012,12 @@ snapshots:
       glob: 10.4.5
       minimatch: 9.0.5
 
+  text-decoder@1.2.7:
+    dependencies:
+      b4a: 1.9.0
+    transitivePeerDependencies:
+      - react-native-b4a
+
   thenify-all@1.6.0:
     dependencies:
       thenify: 3.3.1
@@ -9070,6 +10037,11 @@ snapshots:
       fdir: 6.5.0(picomatch@4.0.3)
       picomatch: 4.0.3
 
+  tinyglobby@0.2.17:
+    dependencies:
+      fdir: 6.5.0(picomatch@4.0.7)
+      picomatch: 4.0.7
+
   tinypool@1.1.1: {}
 
   tinyrainbow@2.0.0: {}
@@ -9153,6 +10125,10 @@ snapshots:
 
   type-fest@0.8.1: {}
 
+  type-fest@4.41.0: {}
+
+  typed-query-selector@2.12.3: {}
+
   typedarray-to-buffer@3.1.5:
     dependencies:
       is-typedarray: 1.0.0
@@ -9204,13 +10180,13 @@ snapshots:
       '@types/istanbul-lib-coverage': 2.0.6
       convert-source-map: 2.0.0
 
-  vite-node@3.2.4(@types/node@24.9.1)(jiti@2.6.1)(less@4.4.2)(lightningcss@1.31.1)(sass@1.93.2)(terser@5.44.0)(tsx@4.21.0):
+  vite-node@3.2.4(@types/node@24.9.1)(jiti@2.6.1)(less@4.4.2)(lightningcss@1.33.0)(sass@1.93.2)(terser@5.44.0)(tsx@4.21.0):
     dependencies:
       cac: 6.7.14
       debug: 4.4.3
       es-module-lexer: 1.7.0
       pathe: 2.0.3
-      vite: 6.4.1(@types/node@24.9.1)(jiti@2.6.1)(less@4.4.2)(lightningcss@1.31.1)(sass@1.93.2)(terser@5.44.0)(tsx@4.21.0)
+      vite: 6.4.1(@types/node@24.9.1)(jiti@2.6.1)(less@4.4.2)(lightningcss@1.33.0)(sass@1.93.2)(terser@5.44.0)(tsx@4.21.0)
     transitivePeerDependencies:
       - '@types/node'
       - jiti
@@ -9225,13 +10201,13 @@ snapshots:
       - tsx
       - yaml
 
-  vite-node@3.2.4(@types/node@25.3.5)(jiti@2.6.1)(less@4.4.2)(lightningcss@1.31.1)(sass@1.93.2)(terser@5.44.0)(tsx@4.21.0):
+  vite-node@3.2.4(@types/node@25.3.5)(jiti@2.6.1)(less@4.4.2)(lightningcss@1.33.0)(sass@1.93.2)(terser@5.44.0)(tsx@4.21.0):
     dependencies:
       cac: 6.7.14
       debug: 4.4.3
       es-module-lexer: 1.7.0
       pathe: 2.0.3
-      vite: 6.4.1(@types/node@25.3.5)(jiti@2.6.1)(less@4.4.2)(lightningcss@1.31.1)(sass@1.93.2)(terser@5.44.0)(tsx@4.21.0)
+      vite: 6.4.1(@types/node@25.3.5)(jiti@2.6.1)(less@4.4.2)(lightningcss@1.33.0)(sass@1.93.2)(terser@5.44.0)(tsx@4.21.0)
     transitivePeerDependencies:
       - '@types/node'
       - jiti
@@ -9246,7 +10222,7 @@ snapshots:
       - tsx
       - yaml
 
-  vite@6.4.1(@types/node@24.9.1)(jiti@2.6.1)(less@4.4.2)(lightningcss@1.31.1)(sass@1.93.2)(terser@5.44.0)(tsx@4.21.0):
+  vite@6.4.1(@types/node@24.9.1)(jiti@2.6.1)(less@4.4.2)(lightningcss@1.33.0)(sass@1.93.2)(terser@5.44.0)(tsx@4.21.0):
     dependencies:
       esbuild: 0.25.11
       fdir: 6.5.0(picomatch@4.0.3)
@@ -9259,12 +10235,12 @@ snapshots:
       fsevents: 2.3.3
       jiti: 2.6.1
       less: 4.4.2
-      lightningcss: 1.31.1
+      lightningcss: 1.33.0
       sass: 1.93.2
       terser: 5.44.0
       tsx: 4.21.0
 
-  vite@6.4.1(@types/node@25.3.5)(jiti@2.6.1)(less@4.4.2)(lightningcss@1.31.1)(sass@1.93.2)(terser@5.44.0)(tsx@4.21.0):
+  vite@6.4.1(@types/node@25.3.5)(jiti@2.6.1)(less@4.4.2)(lightningcss@1.33.0)(sass@1.93.2)(terser@5.44.0)(tsx@4.21.0):
     dependencies:
       esbuild: 0.25.11
       fdir: 6.5.0(picomatch@4.0.3)
@@ -9277,34 +10253,50 @@ snapshots:
       fsevents: 2.3.3
       jiti: 2.6.1
       less: 4.4.2
-      lightningcss: 1.31.1
+      lightningcss: 1.33.0
       sass: 1.93.2
       terser: 5.44.0
       tsx: 4.21.0
 
-  vite@7.1.12(@types/node@24.9.1)(jiti@2.6.1)(less@4.4.2)(lightningcss@1.31.1)(sass@1.93.2)(terser@5.44.0)(tsx@4.21.0):
+  vite@8.3.4(@types/node@24.9.1)(esbuild@0.25.11)(jiti@2.6.1)(less@4.4.2)(sass@1.93.2)(terser@5.44.0)(tsx@4.21.0):
     dependencies:
+      lightningcss: 1.33.0
+      picomatch: 4.0.7
+      postcss: 8.5.30
+      rolldown: 1.2.14
+      tinyglobby: 0.2.17
+    optionalDependencies:
+      '@types/node': 24.9.1
       esbuild: 0.25.11
-      fdir: 6.5.0(picomatch@4.0.3)
-      picomatch: 4.0.3
+      fsevents: 2.3.3
+      jiti: 2.6.1
+      less: 4.4.2
+      sass: 1.93.2
+      terser: 5.44.0
+      tsx: 4.21.0
+
+  vite@8.3.4(@types/node@24.9.1)(esbuild@0.27.3)(jiti@2.6.1)(less@4.4.2)(sass@1.93.2)(terser@5.44.0)(tsx@4.21.0):
+    dependencies:
+      lightningcss: 1.33.0
+      picomatch: 4.0.7
       postcss: 8.5.30
-      rollup: 4.52.5
-      tinyglobby: 0.2.15
+      rolldown: 1.2.14
+      tinyglobby: 0.2.17
     optionalDependencies:
       '@types/node': 24.9.1
+      esbuild: 0.27.3
       fsevents: 2.3.3
       jiti: 2.6.1
       less: 4.4.2
-      lightningcss: 1.31.1
       sass: 1.93.2
       terser: 5.44.0
       tsx: 4.21.0
 
-  vitest@3.2.4(@types/node@24.9.1)(happy-dom@20.8.3)(jiti@2.6.1)(jsdom@24.1.3)(less@4.4.2)(lightningcss@1.31.1)(sass@1.93.2)(terser@5.44.0)(tsx@4.21.0):
+  vitest@3.2.4(@types/node@24.9.1)(happy-dom@20.8.3)(jiti@2.6.1)(jsdom@24.1.3)(less@4.4.2)(lightningcss@1.33.0)(sass@1.93.2)(terser@5.44.0)(tsx@4.21.0):
     dependencies:
       '@types/chai': 5.2.3
       '@vitest/expect': 3.2.4
-      '@vitest/mocker': 3.2.4(vite@6.4.1(@types/node@24.9.1)(jiti@2.6.1)(less@4.4.2)(lightningcss@1.31.1)(sass@1.93.2)(terser@5.44.0)(tsx@4.21.0))
+      '@vitest/mocker': 3.2.4(vite@6.4.1(@types/node@24.9.1)(jiti@2.6.1)(less@4.4.2)(lightningcss@1.33.0)(sass@1.93.2)(terser@5.44.0)(tsx@4.21.0))
       '@vitest/pretty-format': 3.2.4
       '@vitest/runner': 3.2.4
       '@vitest/snapshot': 3.2.4
@@ -9322,8 +10314,8 @@ snapshots:
       tinyglobby: 0.2.15
       tinypool: 1.1.1
       tinyrainbow: 2.0.0
-      vite: 6.4.1(@types/node@24.9.1)(jiti@2.6.1)(less@4.4.2)(lightningcss@1.31.1)(sass@1.93.2)(terser@5.44.0)(tsx@4.21.0)
-      vite-node: 3.2.4(@types/node@24.9.1)(jiti@2.6.1)(less@4.4.2)(lightningcss@1.31.1)(sass@1.93.2)(terser@5.44.0)(tsx@4.21.0)
+      vite: 6.4.1(@types/node@24.9.1)(jiti@2.6.1)(less@4.4.2)(lightningcss@1.33.0)(sass@1.93.2)(terser@5.44.0)(tsx@4.21.0)
+      vite-node: 3.2.4(@types/node@24.9.1)(jiti@2.6.1)(less@4.4.2)(lightningcss@1.33.0)(sass@1.93.2)(terser@5.44.0)(tsx@4.21.0)
       why-is-node-running: 2.3.0
     optionalDependencies:
       '@types/node': 24.9.1
@@ -9343,11 +10335,11 @@ snapshots:
       - tsx
       - yaml
 
-  vitest@3.2.4(@types/node@25.3.5)(happy-dom@20.8.3)(jiti@2.6.1)(jsdom@24.1.3)(less@4.4.2)(lightningcss@1.31.1)(sass@1.93.2)(terser@5.44.0)(tsx@4.21.0):
+  vitest@3.2.4(@types/node@25.3.5)(happy-dom@20.8.3)(jiti@2.6.1)(jsdom@24.1.3)(less@4.4.2)(lightningcss@1.33.0)(sass@1.93.2)(terser@5.44.0)(tsx@4.21.0):
     dependencies:
       '@types/chai': 5.2.3
       '@vitest/expect': 3.2.4
-      '@vitest/mocker': 3.2.4(vite@6.4.1(@types/node@25.3.5)(jiti@2.6.1)(less@4.4.2)(lightningcss@1.31.1)(sass@1.93.2)(terser@5.44.0)(tsx@4.21.0))
+      '@vitest/mocker': 3.2.4(vite@6.4.1(@types/node@25.3.5)(jiti@2.6.1)(less@4.4.2)(lightningcss@1.33.0)(sass@1.93.2)(terser@5.44.0)(tsx@4.21.0))
       '@vitest/pretty-format': 3.2.4
       '@vitest/runner': 3.2.4
       '@vitest/snapshot': 3.2.4
@@ -9365,8 +10357,8 @@ snapshots:
       tinyglobby: 0.2.15
       tinypool: 1.1.1
       tinyrainbow: 2.0.0
-      vite: 6.4.1(@types/node@25.3.5)(jiti@2.6.1)(less@4.4.2)(lightningcss@1.31.1)(sass@1.93.2)(terser@5.44.0)(tsx@4.21.0)
-      vite-node: 3.2.4(@types/node@25.3.5)(jiti@2.6.1)(less@4.4.2)(lightningcss@1.31.1)(sass@1.93.2)(terser@5.44.0)(tsx@4.21.0)
+      vite: 6.4.1(@types/node@25.3.5)(jiti@2.6.1)(less@4.4.2)(lightningcss@1.33.0)(sass@1.93.2)(terser@5.44.0)(tsx@4.21.0)
+      vite-node: 3.2.4(@types/node@25.3.5)(jiti@2.6.1)(less@4.4.2)(lightningcss@1.33.0)(sass@1.93.2)(terser@5.44.0)(tsx@4.21.0)
       why-is-node-running: 2.3.0
     optionalDependencies:
       '@types/node': 25.3.5
@@ -9424,6 +10416,8 @@ snapshots:
     dependencies:
       makeerror: 1.0.12
 
+  webdriver-bidi-protocol@0.4.1: {}
+
   webidl-conversions@4.0.2: {}
 
   webidl-conversions@7.0.0: {}
@@ -9529,6 +10523,8 @@ snapshots:
 
   ws@8.19.0: {}
 
+  ws@8.22.0: {}
+
   xml-name-validator@5.0.0: {}
 
   xml@1.0.1: {}
@@ -9572,6 +10568,13 @@ snapshots:
       y18n: 5.0.8
       yargs-parser: 21.1.1
 
+  yauzl@2.10.0:
+    dependencies:
+      buffer-crc32: 0.2.13
+      fd-slicer: 1.1.0
+
   yocto-queue@0.1.0: {}
 
   yocto-queue@1.2.1: {}
+
+  zod@3.25.76: {}

From aa1e4ee58795481283e3e79ed3e640ba69fb8231 Mon Sep 17 00:00:00 2001
From: Ivo <ivoisalinas@gmail.com>
Date: Fri, 16 Oct 2026 08:40:47 +0200
Subject: [PATCH 2/6] ci(release): publish @unlayer/elements-preview after its
 first version

Like migrate: the first version is published by hand (npm's trusted
publishing needs the package to exist), tagged preview-v<version>; after
that, a change under packages/preview publishes it after a reviewer
approves. It doesn't wait for Elements: it renders with the project's
own Elements, a peer dependency.

Co-Authored-By: Claude Code (Claude Opus 5.5 xhigh) <noreply@anthropic.com>
---
 .github/workflows/publish.yml | 162 +++++++++++++++++++++++++++++++++-
 1 file changed, 159 insertions(+), 3 deletions(-)

diff --git a/.github/workflows/publish.yml b/.github/workflows/publish.yml
index a47f5a66..d47e4c10 100644
--- a/.github/workflows/publish.yml
+++ b/.github/workflows/publish.yml
@@ -3,7 +3,7 @@
 # Gated publish flow, one package at a time:
 #   1. PR merged to main → triggers build & test
 #   2. Each package publishes only when its code changed since its last
-#      release tag (Elements: v*, migrate: migrate-v*)
+#      release tag (Elements: v*, migrate: migrate-v*, preview: preview-v*)
 #   3. A reviewer approves each publish in the Actions UI (environment gate)
 #   4. The package is published to npm via trusted publishing (OIDC)
 #
@@ -42,6 +42,7 @@ on:
         options:
           - react-elements
           - migrate
+          - elements-preview
         default: react-elements
       bump:
         description: 'Version bump type'
@@ -99,6 +100,7 @@ jobs:
     outputs:
       elements: ${{ steps.detect.outputs.elements }}
       migrate: ${{ steps.detect.outputs.migrate }}
+      preview: ${{ steps.detect.outputs.preview }}
 
     steps:
       - name: Checkout code (with tags)
@@ -123,7 +125,7 @@ jobs:
             exit 1
           fi
           last() { git tag -l "$1" --sort=-v:refname | head -1; }
-          for pattern in 'v*' 'migrate-v*'; do
+          for pattern in 'v*' 'migrate-v*' 'preview-v*'; do
             tag=$(last "$pattern")
             if [ -n "$tag" ] && ! git merge-base --is-ancestor "$tag" HEAD; then
               echo "::notice::$tag isn't an ancestor of this commit: nothing older than it is published."
@@ -145,20 +147,28 @@ jobs:
           if [ "${{ github.event_name }}" = "workflow_dispatch" ]; then
             ELEMENTS=$([ "${{ inputs.package }}" = "react-elements" ] && descends 'v*' && echo true || echo false)
             MIGRATE=$([ "${{ inputs.package }}" = "migrate" ] && descends 'migrate-v*' && echo true || echo false)
+            PREVIEW=$([ "${{ inputs.package }}" = "elements-preview" ] && descends 'preview-v*' && echo true || echo false)
           else
             ELEMENTS=$(changed 'v*' packages/react packages/shared pnpm-workspace.yaml)
             # Not Elements: migrate requires the Elements range committed in its package.json (the oldest
             # release the converter supports), not the newest, so an Elements release doesn't republish it.
             MIGRATE=$(changed 'migrate-v*' packages/migrate packages/from-react-email packages/convert-core pnpm-workspace.yaml pnpm-lock.yaml)
+            # The preview renders with the project's own Elements (a peer dependency): an Elements release doesn't republish it.
+            PREVIEW=$(changed 'preview-v*' packages/preview pnpm-workspace.yaml pnpm-lock.yaml)
           fi
           # The first version of a new package is published by hand (see above).
           if [ "$MIGRATE" = "true" ] && ! npm view @unlayer/migrate version >/dev/null 2>&1; then
             echo "::notice::@unlayer/migrate isn't on npm yet: publish its first version by hand, tag it migrate-v<version>, and add its trusted publisher."
             MIGRATE=false
           fi
+          if [ "$PREVIEW" = "true" ] && ! npm view @unlayer/elements-preview version >/dev/null 2>&1; then
+            echo "::notice::@unlayer/elements-preview isn't on npm yet: publish its first version by hand, tag it preview-v<version>, and add its trusted publisher."
+            PREVIEW=false
+          fi
           echo "elements=$ELEMENTS" >> $GITHUB_OUTPUT
           echo "migrate=$MIGRATE" >> $GITHUB_OUTPUT
-          echo "Elements changed: $ELEMENTS, migrate changed: $MIGRATE"
+          echo "preview=$PREVIEW" >> $GITHUB_OUTPUT
+          echo "Elements changed: $ELEMENTS, migrate changed: $MIGRATE, preview changed: $PREVIEW"
 
   publish:
     name: Publish @unlayer/react-elements
@@ -528,3 +538,149 @@ jobs:
           fi
         env:
           GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+
+  publish-preview:
+    name: Publish @unlayer/elements-preview
+    needs: [build-and-test, changes]
+    # Not after Elements: it renders with the project's own Elements, a peer dependency (>=0.2.0).
+    if: needs.changes.outputs.preview == 'true'
+    runs-on: ubuntu-latest
+    concurrency:
+      group: publish-preview
+      cancel-in-progress: false
+    environment: npm-publish
+    permissions:
+      contents: write
+      id-token: write
+      pull-requests: read
+
+    steps:
+      # The commit this run built and tested, not whatever main is when the approval lands.
+      - name: Checkout code
+        uses: actions/checkout@v4
+        with:
+          ref: ${{ github.sha }}
+          fetch-depth: 0
+
+      # Checked again here, where publishes run one at a time (see the Elements job).
+      - name: Check no newer commit was published
+        shell: bash
+        run: |
+          git fetch --tags --force origin
+          TAG=$(git tag -l 'preview-v*' --sort=-v:refname | head -1)
+          if [ -n "$TAG" ] && ! git merge-base --is-ancestor "$TAG" HEAD; then
+            echo "::error::$TAG was published from a newer commit than this run's: nothing older than it is published."
+            exit 1
+          fi
+
+      - name: Setup pnpm
+        uses: pnpm/action-setup@v4
+        with:
+          version: 9.7.0
+
+      - name: Setup Node.js 24 (with npm registry for OIDC)
+        uses: actions/setup-node@v4
+        with:
+          node-version: 24
+          registry-url: https://registry.npmjs.org
+
+      - name: Update npm for trusted publishing
+        run: npm install -g npm@12
+
+      - name: Get pnpm store directory
+        shell: bash
+        run: echo "STORE_PATH=$(pnpm store path --silent)" >> $GITHUB_ENV
+
+      - name: Setup pnpm cache
+        uses: actions/cache@v4
+        with:
+          path: ${{ env.STORE_PATH }}
+          key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
+          restore-keys: |
+            ${{ runner.os }}-pnpm-store-
+
+      - name: Install dependencies
+        run: pnpm install --frozen-lockfile
+
+      - name: Build packages
+        run: pnpm build
+
+      - name: Determine version bump
+        id: bump
+        run: |
+          if [ "${{ github.event_name }}" = "workflow_dispatch" ]; then
+            echo "type=${{ inputs.bump }}" >> $GITHUB_OUTPUT
+          else
+            LABELS=$(gh api "repos/${GITHUB_REPOSITORY}/commits/${GITHUB_SHA}/pulls" --jq '.[0].labels[].name' 2>/dev/null || echo "")
+            if echo "$LABELS" | grep -Fxq "release:major"; then
+              echo "type=major" >> $GITHUB_OUTPUT
+            elif echo "$LABELS" | grep -Fxq "release:minor"; then
+              echo "type=minor" >> $GITHUB_OUTPUT
+            else
+              echo "type=patch" >> $GITHUB_OUTPUT
+            fi
+          fi
+        env:
+          GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+
+      - name: Determine version
+        id: version
+        working-directory: packages/preview
+        run: |
+          COMMITTED=$(node -p "require('./package.json').version")
+          CURRENT=$(npm view @unlayer/elements-preview version 2>/dev/null || echo "$COMMITTED")
+          echo "current=$CURRENT" >> $GITHUB_OUTPUT
+          npm version "$CURRENT" --no-git-tag-version --allow-same-version
+          VERSION=$(npm version ${{ steps.bump.outputs.type }} --no-git-tag-version)
+          VERSION="${VERSION#v}"
+          if [ "$COMMITTED" != "$VERSION" ] && [ "$(printf '%s\n%s\n' "$VERSION" "$COMMITTED" | sort -V | tail -1)" = "$COMMITTED" ]; then
+            npm version "$COMMITTED" --no-git-tag-version --allow-same-version
+            VERSION="$COMMITTED"
+          fi
+          echo "version=$VERSION" >> $GITHUB_OUTPUT
+
+      - name: Pre-publish summary
+        run: |
+          echo "## Publish Summary" >> $GITHUB_STEP_SUMMARY
+          echo "" >> $GITHUB_STEP_SUMMARY
+          echo "| | |" >> $GITHUB_STEP_SUMMARY
+          echo "|---|---|" >> $GITHUB_STEP_SUMMARY
+          echo "| **Package** | \`@unlayer/elements-preview\` |" >> $GITHUB_STEP_SUMMARY
+          echo "| **Version** | ${{ steps.version.outputs.current }} → ${{ steps.version.outputs.version }} (${{ steps.bump.outputs.type }}) |" >> $GITHUB_STEP_SUMMARY
+          echo "| **Trigger** | ${{ github.event_name }} |" >> $GITHUB_STEP_SUMMARY
+
+      - name: Publish to npm (trusted publishing)
+        working-directory: packages/preview
+        run: |
+          pnpm pack --pack-destination /tmp
+          TARBALL=$(ls /tmp/unlayer-elements-preview-*.tgz)
+          npm publish "$TARBALL" --access public
+
+      - name: Tag release
+        run: |
+          TAG="preview-v${{ steps.version.outputs.version }}"
+          git config user.name "github-actions[bot]"
+          git config user.email "github-actions[bot]@users.noreply.github.com"
+          if git ls-remote --tags origin | awk '{print $2}' | grep -Fxq "refs/tags/$TAG"; then
+            echo "Tag $TAG already exists — skipping"
+          else
+            git tag "$TAG"
+            git push origin "$TAG"
+          fi
+
+      # Not marked latest: the repository's latest release stays Elements.
+      - name: Create GitHub Release
+        run: |
+          TAG="preview-v${{ steps.version.outputs.version }}"
+          PREVIOUS=$(git ls-remote --tags --refs origin | sed 's#.*refs/tags/##' | grep -E '^preview-v[0-9]' | grep -vFx "$TAG" | sort -V | tail -1)
+          if gh release view "$TAG" >/dev/null 2>&1; then
+            echo "Release $TAG already exists — skipping"
+          else
+            gh release create "$TAG" \
+              --title "@unlayer/elements-preview ${{ steps.version.outputs.version }}" \
+              --generate-notes \
+              --latest=false \
+              ${PREVIOUS:+--notes-start-tag "$PREVIOUS"}
+          fi
+        env:
+          GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}

From d675925eb440007df2e78f3c0461d5c476ae9ee9 Mon Sep 17 00:00:00 2001
From: Ivo <ivoisalinas@gmail.com>
Date: Fri, 16 Oct 2026 08:58:06 +0200
Subject: [PATCH 3/6] fix(preview): say a static build doesn't update as you
 edit

A template's error in a build said to fix the file and save, as in dev,
but a build never updates: it now says to build the preview again.

Co-Authored-By: Claude Code (Claude Opus 5.5 xhigh) <noreply@anthropic.com>
---
 packages/preview/ui/components/ErrorView.tsx | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/packages/preview/ui/components/ErrorView.tsx b/packages/preview/ui/components/ErrorView.tsx
index a0e896d5..1d75d0b8 100644
--- a/packages/preview/ui/components/ErrorView.tsx
+++ b/packages/preview/ui/components/ErrorView.tsx
@@ -1,4 +1,4 @@
-import type { TemplateError } from "../api";
+import { STATIC, type TemplateError } from "../api";
 
 export function ErrorView({ error }: { error: TemplateError }) {
   const where = error.file ? `${error.file}${error.line ? `:${error.line}:${error.column ?? 1}` : ""}` : undefined;
@@ -15,7 +15,9 @@ export function ErrorView({ error }: { error: TemplateError }) {
           <pre>{error.stack}</pre>
         </details>
       )}
-      <p className="error-hint">Fix the file and save: the preview updates by itself.</p>
+      <p className="error-hint">
+        {STATIC ? "A build doesn't update as you edit: fix the file, then build the preview again." : "Fix the file and save: the preview updates by itself."}
+      </p>
     </div>
   );
 }

From 23dfed4b0aa44b2278355d35beda50f70825be29 Mon Sep 17 00:00:00 2001
From: Ivo <ivoisalinas@gmail.com>
Date: Fri, 16 Oct 2026 08:58:06 +0200
Subject: [PATCH 4/6] fix(preview): count what's to fix and what's to check
 apart

The checks' labels counted every finding and named them by the worst
("4 to fix" for 3 to fix and 1 to check). They now say both.

Co-Authored-By: Claude Code (Claude Opus 5.5 xhigh) <noreply@anthropic.com>
---
 packages/preview/test/unit.test.ts                 | 11 +++++++++++
 packages/preview/ui/components/checks/Section.tsx  |  4 ++--
 packages/preview/ui/components/checks/summary.ts   | 14 +++++++++-----
 .../preview/ui/components/topbar/ChecksButton.tsx  |  4 ++--
 4 files changed, 24 insertions(+), 9 deletions(-)

diff --git a/packages/preview/test/unit.test.ts b/packages/preview/test/unit.test.ts
index 64769c71..79ae3d30 100644
--- a/packages/preview/test/unit.test.ts
+++ b/packages/preview/test/unit.test.ts
@@ -409,3 +409,14 @@ describe("the design the editor gets", () => {
     expect(prepared.body.rows[0].values.backgroundImage.url).toBe("http://localhost:3000/static/hero.png");
   });
 });
+
+describe("the checks' counts", () => {
+  it("says what's to fix and what's to check, apart", async () => {
+    const { combine, countLabel } = await import("../ui/components/checks/summary");
+    expect(countLabel({ count: 4, fix: 3, tone: "bad", pending: false })).toBe("3 to fix, 1 to check");
+    expect(countLabel({ count: 2, fix: 0, tone: "warn", pending: false })).toBe("2 to check");
+    expect(countLabel({ count: 1, fix: 1, tone: "bad", pending: false })).toBe("1 to fix");
+    const all = combine([{ count: 3, fix: 3, tone: "bad", pending: false }, { count: 1, fix: 0, tone: "warn", pending: false }]);
+    expect(countLabel(all)).toBe("3 to fix, 1 to check");
+  });
+});
diff --git a/packages/preview/ui/components/checks/Section.tsx b/packages/preview/ui/components/checks/Section.tsx
index 4239490e..a2cf9938 100644
--- a/packages/preview/ui/components/checks/Section.tsx
+++ b/packages/preview/ui/components/checks/Section.tsx
@@ -1,6 +1,6 @@
 import type { ReactNode } from "react";
 import { CheckCircleIcon } from "../icons";
-import { verb, type SectionSummary } from "./summary";
+import { countLabel, type SectionSummary } from "./summary";
 
 interface SectionProps {
   title: string;
@@ -17,7 +17,7 @@ interface SectionProps {
 
 /** One section of the Checks tab: a header line with its status, and what it found under it. */
 export function Section({ title, about, summary, status, action, children }: SectionProps) {
-  const label = `${summary.count} ${verb(summary)}`;
+  const label = countLabel(summary);
   return (
     <section className="check-section" aria-label={title}>
       <header className="check-head">
diff --git a/packages/preview/ui/components/checks/summary.ts b/packages/preview/ui/components/checks/summary.ts
index 33f61700..51b2fa67 100644
--- a/packages/preview/ui/components/checks/summary.ts
+++ b/packages/preview/ui/components/checks/summary.ts
@@ -12,6 +12,8 @@ export function renderingItems(result: RenderResponse | undefined, warnings: str
 export interface SectionSummary {
   /** What to fix and to check: 0 when there's nothing (notes don't count). */
   count: number;
+  /** Of those, what's broken (errors): the rest is to check. */
+  fix: number;
   tone: Tone;
   /** Not known yet: the check hasn't answered for this template. */
   pending: boolean;
@@ -21,7 +23,7 @@ export interface SectionSummary {
 function summarize(findings: Finding[], pending: boolean): SectionSummary {
   const counted = findings.filter((f) => f.level !== "info");
   const tone: Tone = counted.some((f) => f.level === "error") ? "bad" : counted.length ? "warn" : "ok";
-  return { count: counted.length, tone, pending };
+  return { count: counted.length, fix: counted.filter((f) => f.level === "error").length, tone, pending };
 }
 
 export function renderingSummary(result: RenderResponse | undefined, warnings: string[]): SectionSummary {
@@ -36,9 +38,10 @@ export function linksSummary(report: LinksResponse | undefined): SectionSummary
   return summarize(linkFindings(report), !report);
 }
 
-/** "to fix" when something is broken, "to check" when it's only worth a look (a client that partly supports a feature). */
-export function verb(summary: SectionSummary): string {
-  return summary.tone === "bad" ? "to fix" : "to check";
+/** What's to fix and what's only worth a look (a client that partly supports a feature): "3 to fix, 1 to check". */
+export function countLabel(summary: SectionSummary): string {
+  const check = summary.count - summary.fix;
+  return [summary.fix ? `${summary.fix} to fix` : "", check ? `${check} to check` : ""].filter(Boolean).join(", ");
 }
 
 const RANK: Record<Tone, number> = { ok: 0, warn: 1, bad: 2 };
@@ -48,9 +51,10 @@ export function combine(sections: SectionSummary[]): SectionSummary {
   return sections.reduce<SectionSummary>(
     (all, s) => ({
       count: all.count + s.count,
+      fix: all.fix + s.fix,
       tone: RANK[s.tone] > RANK[all.tone] ? s.tone : all.tone,
       pending: all.pending || s.pending,
     }),
-    { count: 0, tone: "ok", pending: false }
+    { count: 0, fix: 0, tone: "ok", pending: false }
   );
 }
diff --git a/packages/preview/ui/components/topbar/ChecksButton.tsx b/packages/preview/ui/components/topbar/ChecksButton.tsx
index 6805b125..056e5872 100644
--- a/packages/preview/ui/components/topbar/ChecksButton.tsx
+++ b/packages/preview/ui/components/topbar/ChecksButton.tsx
@@ -1,10 +1,10 @@
-import { verb, type SectionSummary } from "../checks/summary";
+import { countLabel, type SectionSummary } from "../checks/summary";
 import { AlertIcon, CheckCircleIcon } from "../icons";
 import { Tip } from "../Tip";
 
 /** Opens the checks drawer; shows "All clear", or how much there is to fix (something broken) or to check, in the color of the worst. */
 export function ChecksButton({ summary, open, onClick }: { summary: SectionSummary; open: boolean; onClick(): void }) {
-  const text = summary.count ? `${summary.count} ${verb(summary)}` : summary.pending ? "Checking…" : "All clear";
+  const text = summary.count ? countLabel(summary) : summary.pending ? "Checking…" : "All clear";
   const tone = summary.count ? summary.tone : summary.pending ? "pending" : "ok";
   return (
     <Tip label={open ? "Hide checks" : "Checks: rendering, email clients, links and images"} kbd="." align="end">

From 2cdf96c013cb2c3c6dd66e2545a55365b8e228d9 Mon Sep 17 00:00:00 2001
From: Ivo <ivoisalinas@gmail.com>
Date: Fri, 16 Oct 2026 08:58:07 +0200
Subject: [PATCH 5/6] fix(preview): don't point at CLI commands that aren't
 released

An empty templates folder suggested `npx @unlayer/cli elements init`,
which the released CLI doesn't have, and the READMEs named its
`unlayer elements` commands. The empty folder now says how to write a
template, and the READMEs give the preview's own commands. The README
also says what the dark-mode preview doesn't flip: a color set only by
a stylesheet.

Co-Authored-By: Claude Code (Claude Opus 5.5 xhigh) <noreply@anthropic.com>
---
 README.md                                     |  2 +-
 packages/preview/README.md                    |  6 ++--
 .../preview/ui/components/NoTemplates.tsx     | 32 ++-----------------
 3 files changed, 5 insertions(+), 35 deletions(-)

diff --git a/README.md b/README.md
index 9811291d..2f146e86 100644
--- a/README.md
+++ b/README.md
@@ -89,7 +89,7 @@ const html = renderToHtml(<WelcomeEmail />);
 
 **Try it in your browser:** the [Elements Playground](https://examples.unlayer.com/examples/elements-playground/) renders Elements code as an email, page, or document with nothing to install. Write plain JSX, export the HTML or design JSON, and open the result in the Unlayer builder.
 
-**Preview your templates while you edit them:** [`@unlayer/elements-preview`](./packages/preview) lists the templates in your `emails` folder, renders them with your project's Elements as you save, and checks them against email clients. `npm install -D @unlayer/elements-preview && npx elements-preview dev`, or `unlayer elements dev` with the [Unlayer CLI](https://github.com/unlayer/cli).
+**Preview your templates while you edit them:** [`@unlayer/elements-preview`](./packages/preview) lists the templates in your `emails` folder, renders them with your project's Elements as you save, and checks them against email clients. `npm install -D @unlayer/elements-preview && npx elements-preview dev`.
 
 ## Email Client Compatibility Notes
 
diff --git a/packages/preview/README.md b/packages/preview/README.md
index 0a4e7bca..d9ad9d08 100644
--- a/packages/preview/README.md
+++ b/packages/preview/README.md
@@ -9,8 +9,6 @@ npx elements-preview dev
 
 Open http://localhost:3000. Every template in `./emails` is listed, rendered with your project's own Elements and React, and updated as you save.
 
-With the [Unlayer CLI](https://github.com/unlayer/cli), the same commands are `unlayer elements dev`, `check`, `screenshot`, `export`, `build` and `start`, and `unlayer elements init` sets a project up with starter templates and an `AGENTS.md` section for coding agents. `unlayer elements push` uses `render` to create and update the templates in an Unlayer project.
-
 ## Templates
 
 A template is a `.tsx`, `.jsx` or `.js` file with an `export default` component (or element). These are the same rules as React Email's preview, so an `emails` folder moved from it works as it is:
@@ -45,7 +43,7 @@ TypeScript, JSX, your `tsconfig.json` path aliases (`@/components/...`) and impo
 The top bar has the template's name (its render time and whether it's live are in the tooltip), the views in the middle, and on the right the preview's width and dark mode, **Checks** and **Export**.
 
 - **Preview**: the template as an email, page or document, at desktop or phone width. Drag the frame's edges for any width (it shows the width as you drag); double-click an edge to go back.
-- **Dark mode** (the sun and moon): what email clients do to an email's colors for readers in dark mode. By default every color flips, as in the Gmail apps and Outlook.com; the arrow next to it switches to light colors only, as in Apple Mail and Outlook on phones. It catches unreadable text and logos that vanish.
+- **Dark mode** (the sun and moon): what email clients do to an email's colors for readers in dark mode. By default every color flips, as in the Gmail apps and Outlook.com; the arrow next to it switches to light colors only, as in Apple Mail and Outlook on phones. It catches unreadable text and logos that vanish. It flips the colors written on the elements themselves, as Elements writes them; a color set only by a stylesheet (text in an Html block with no color of its own, an unstyled link) keeps its light-mode color.
 - **Editor**: the template's design JSON in the [Unlayer editor](https://unlayer.com), to check how it opens there. Each render loads it again; changes made in the editor aren't saved to your file. The editor comes from `editor.unlayer.com`, so this view needs an internet connection (the others don't). Images from `static/` are copied into the design it gets, since the editor's page can't load them from localhost. It opens without an Unlayer project; pass `--project-id` (or set `UNLAYER_PROJECT_ID`) to open it in yours, with your project's settings.
 - **Code**: the template's source, the HTML, the plain text and the design JSON, highlighted, to copy or download.
 - **Checks**: the button says "All clear", or how many things there are to fix (something broken) or to check, in the color of the worst. It opens a drawer with three sections:
@@ -213,7 +211,7 @@ It uses a browser already installed, never downloads one: Chrome, Chromium, Micr
 
 ### `elements-preview render`
 
-Renders templates with their `PreviewProps` and prints what a program needs to use them elsewhere: the mode, the HTML and the design JSON the Unlayer editor opens. `unlayer elements push` runs it to send templates to an Unlayer project.
+Renders templates with their `PreviewProps` and prints what a program needs to use them elsewhere: the mode, the HTML and the design JSON the Unlayer editor opens.
 
 ```bash
 npx elements-preview render welcome.tsx --json      # one JSON object
diff --git a/packages/preview/ui/components/NoTemplates.tsx b/packages/preview/ui/components/NoTemplates.tsx
index 3f165c9d..0aaa014f 100644
--- a/packages/preview/ui/components/NoTemplates.tsx
+++ b/packages/preview/ui/components/NoTemplates.tsx
@@ -1,38 +1,10 @@
-import { useState } from "react";
-import { copyText } from "./files";
-import { CopyIcon } from "./icons";
-
-/** The command that adds starter templates to the folder (it never overwrites a file). */
-export function initCommand(dir?: string): string {
-  return `npx @unlayer/cli elements init${dir && dir !== "emails" ? ` --dir ${dir}` : ""}`;
-}
-
-/** What to do when the folder has no templates: the command that adds some, or how to write one. */
+/** What to do when the folder has no templates: how to write one. */
 export function NoTemplates({ dir, compact = false }: { dir?: string; compact?: boolean }) {
-  const [copied, setCopied] = useState(false);
-  const command = initCommand(dir);
   return (
     <div className={compact ? "no-templates compact" : "no-templates"}>
       {compact ? <p>No templates yet.</p> : <h2>No templates in {dir ?? "this folder"} yet</h2>}
-      <p className="muted">Add starter templates with:</p>
-      <div className="command">
-        <code>{command}</code>
-        <button
-          className="icon-button small"
-          aria-label="Copy the command"
-          title={copied ? "Copied" : "Copy the command"}
-          onClick={async () => {
-            if (await copyText(command)) {
-              setCopied(true);
-              setTimeout(() => setCopied(false), 1200);
-            }
-          }}
-        >
-          <CopyIcon />
-        </button>
-      </div>
       <p className="muted">
-        Or add a <code>.tsx</code> file with an <code>export default</code> component that returns <code>&lt;Email&gt;</code>, <code>&lt;Page&gt;</code> or{" "}
+        Add a <code>.tsx</code> file with an <code>export default</code> component that returns <code>&lt;Email&gt;</code>, <code>&lt;Page&gt;</code> or{" "}
         <code>&lt;Document&gt;</code>. It shows up here as soon as you save it.
       </p>
     </div>

From 7ccb5835484452b88a601161df549ed74b38174b Mon Sep 17 00:00:00 2001
From: Ivo <ivoisalinas@gmail.com>
Date: Fri, 16 Oct 2026 17:19:53 +0200
Subject: [PATCH 6/6] fix(preview): fix what review found in builds, exports,
 checks and warnings

- A build records the files it writes (.elements-preview-build.json) and
  removes the previous build's before writing, so a deleted template's
  source and PreviewProps don't stay in a hosted build. It refuses, with
  exit 2, a non-empty folder that isn't a preview build.
- Two templates that would write the same file (welcome.jsx and
  welcome.tsx) stop export and screenshot with exit 2, naming both,
  instead of one silently replacing the other.
- A URL that doesn't decode (/static/%) is a finding, not an error that
  ends check or build; the dev server answers it with 400, and a static
  build's link to it opens the first template.
- Only Elements' own console.error messages are "to fix". React's
  development warnings (a list without keys) and a template's own errors
  are "to check", as the README says, so check no longer fails on them.
- check on a folder with no templates exits 2.
- export --plainText fails a template whose plain text couldn't be made
  instead of writing an empty file.
- The dev server reuses its last render for the checks until a file
  changes: one render per save instead of three.

Co-Authored-By: Claude Code (Claude Opus 5.5 xhigh) <noreply@anthropic.com>
---
 packages/preview/README.md                    |  8 +-
 packages/preview/shared/findings.ts           | 33 +++++---
 packages/preview/src/cli.ts                   | 26 ++++--
 packages/preview/src/server/build-folder.ts   | 81 +++++++++++++++++++
 packages/preview/src/server/build.ts          | 50 ++++++++----
 packages/preview/src/server/check.ts          |  7 +-
 packages/preview/src/server/dev-server.ts     | 28 +++++--
 packages/preview/src/server/export.ts         | 20 +++--
 packages/preview/src/server/links.ts          | 16 +++-
 packages/preview/src/server/outputs.ts        | 23 ++++++
 packages/preview/src/server/screenshot.ts     |  4 +-
 packages/preview/test/build.test.ts           | 54 ++++++++++++-
 packages/preview/test/check.test.ts           | 61 +++++++++++++-
 packages/preview/test/dev-server.test.ts      | 25 ++++++
 packages/preview/test/export.test.ts          | 52 +++++++++++-
 packages/preview/test/helpers.ts              | 28 +++++++
 packages/preview/test/links.test.ts           | 12 +++
 packages/preview/test/render.test.ts          | 31 +------
 packages/preview/test/screenshot.test.ts      | 22 ++++-
 packages/preview/test/unit.test.ts            | 31 +++++++
 .../preview/ui/hooks/useSelectedTemplate.ts   |  8 +-
 21 files changed, 533 insertions(+), 87 deletions(-)
 create mode 100644 packages/preview/src/server/build-folder.ts
 create mode 100644 packages/preview/src/server/outputs.ts

diff --git a/packages/preview/README.md b/packages/preview/README.md
index d9ad9d08..84c464fc 100644
--- a/packages/preview/README.md
+++ b/packages/preview/README.md
@@ -85,7 +85,7 @@ Renders every template with its `PreviewProps` to `out/<path>.html` (`emails/bil
 | `--design` | | Also write each template's design JSON (`<name>.design.json`) for the Unlayer builder |
 | `--extension <ext>` | `html` | The file extension, e.g. `blade.php` (`txt` with `--plainText`) |
 
-It exits with 1 when a template fails, after exporting the others. Export is for backends that can't run JavaScript, or platforms that only take HTML; when your code can call Elements, render at send time with the real data instead (`renderToHtml`).
+It exits with 1 when a template fails, after exporting the others; with `--plainText`, a template whose plain text can't be made fails too, and gets no file. It exits with 2, before writing anything, when two templates would write the same file (`welcome.jsx` and `welcome.tsx` both export to `welcome.html`): rename one of them. Export is for backends that can't run JavaScript, or platforms that only take HTML; when your code can call Elements, render at send time with the real data instead (`renderToHtml`).
 
 ### `elements-preview check`
 
@@ -121,7 +121,7 @@ Name templates by their path in the templates folder (`welcome.tsx`) or from the
 | --- | --- |
 | `0` | Nothing to fix (with `--strict`, nothing to check either) |
 | `1` | Something to fix (with `--strict`, or to check) |
-| `2` | The check couldn't run: an option, folder or template that isn't right, or Elements not installed. With `--json`, stderr has `{"error": "…"}` |
+| `2` | The check couldn't run: an option, folder or template that isn't right, a folder with no templates, or Elements not installed. With `--json`, stderr has `{"error": "…"}` |
 
 #### The JSON report
 
@@ -207,7 +207,7 @@ npx elements-preview screenshot welcome.tsx --all
 
 Templates are named as for `check` (`.` takes them all). Each page loads the templates folder's `static/` files as the preview does, and waits for its images and web fonts; an image that doesn't load is reported. Templates are taken one at a time, in one browser tab.
 
-It uses a browser already installed, never downloads one: Chrome, Chromium, Microsoft Edge or Brave, in their usual places on macOS, Windows and Linux. Point to another with `--browser` or `CHROME_PATH`. It exits with `1` when a template fails to render, and `2` when it can't run (no browser, or an option, folder or template that isn't right).
+It uses a browser already installed, never downloads one: Chrome, Chromium, Microsoft Edge or Brave, in their usual places on macOS, Windows and Linux. Point to another with `--browser` or `CHROME_PATH`. It exits with `1` when a template fails to render, and `2` when it can't run (no browser, an option, folder or template that isn't right, or two templates whose screenshots would have the same name, such as `welcome.jsx` and `welcome.tsx`).
 
 ### `elements-preview render`
 
@@ -262,6 +262,8 @@ New fields may be added; existing ones keep their meaning.
 
 A build can't render with other props or update as you edit: that's what `dev` is for. Its Editor view works as in `dev`.
 
+Building again replaces the previous build: the files it wrote are removed first, so a template you deleted, and the app files of an earlier version, don't stay in the folder. A build lists the files it writes in `.elements-preview-build.json` in the folder, and removes only those, so files you add (a host's `_headers`, a `CNAME`) stay. It only writes into a new or empty folder, or one with a build in it: it exits with 2, writing nothing, when the folder has other files (or a build from an earlier version of the preview, without the list). Delete the folder, or build to another one with `--outDir`.
+
 #### Deploy a build
 
 A build is plain static files with relative paths, so it works on any static host, under any path. Every host needs the same two settings: the build command `npx elements-preview build` and the output folder `.elements-preview`.
diff --git a/packages/preview/shared/findings.ts b/packages/preview/shared/findings.ts
index d842ffaa..e2a93947 100644
--- a/packages/preview/shared/findings.ts
+++ b/packages/preview/shared/findings.ts
@@ -2,11 +2,12 @@
  * What the checks found, in one list and with one meaning for the preview's
  * Checks drawer and for `elements-preview check`:
  *
- * - "error": to fix. The template doesn't render, a block is left out, the
- *   design JSON can't be made (it won't open in the Unlayer editor), or a link
- *   or image is broken;
- * - "warning": to check. Elements and React warnings, no plain text, CSS some
- *   email clients don't support, a placeholder or http: URL, Gmail clipping;
+ * - "error": to fix. The template doesn't render, Elements says it left a
+ *   block out, the design JSON can't be made (it won't open in the Unlayer
+ *   editor), or a link or image is broken;
+ * - "warning": to check. Elements and React warnings (React's development
+ *   warnings come through console.error), no plain text, CSS some email
+ *   clients don't support, a placeholder or http: URL, Gmail clipping;
  * - "info": a note.
  *
  * Shared by the preview app and the server, so it imports nothing and takes
@@ -107,12 +108,26 @@ interface LinkFindingInput {
 
 export type LinksInput = { applicable: true; findings: LinkFindingInput[] } | { applicable: false; reason: string };
 
-const LOG_LEVEL: Record<LogInput["level"], FindingLevel> = { error: "error", warn: "warning", info: "info", log: "info" };
+/**
+ * What Elements writes with console.error, when it leaves a block out or a
+ * block fails: `[Unlayer] …` (0.2 and later), and in 0.2.x and 0.3 also
+ * `Body: Failed to render children: …`, `Column: Failed to render children: …`
+ * and `<Body, Row, Column or a block's name> rendering failed: …`. React writes
+ * its development warnings (a list without keys, an invalid DOM property) with
+ * console.error too: those, and a template's own, aren't Elements'.
+ */
+const ELEMENTS_ERROR = /^(?:\[Unlayer\] |(?:Body|Column): Failed to render children:|[^\s:]+ rendering failed:)/;
+
+function logFinding(log: LogInput): Finding {
+  if (log.level === "error" && ELEMENTS_ERROR.test(log.message)) return { kind: "render", level: "error", message: log.message };
+  if (log.level === "error" || log.level === "warn") return { kind: "warning", level: "warning", message: log.message };
+  return { kind: "log", level: "info", message: log.message };
+}
 
 /**
  * What rendering reported: the project's warnings, a render error, no design
  * JSON or plain text, and what Elements and React wrote to the console (an
- * error there means Elements left a block out).
+ * error from Elements means it left a block out; React's are warnings).
  */
 export function renderingFindings(result: RenderInput | undefined, projectWarnings: string[] = []): Finding[] {
   const findings: Finding[] = projectWarnings.map((message) => ({ kind: "warning", level: "warning", message }));
@@ -124,9 +139,7 @@ export function renderingFindings(result: RenderInput | undefined, projectWarnin
     if (result.jsonError) findings.push({ kind: "design", level: "error", message: `No design JSON, so it won't open in the Unlayer editor: ${result.jsonError}` });
     if (result.textError) findings.push({ kind: "text", level: "warning", message: `No plain text version: ${result.textError}` });
   }
-  for (const log of result.logs) {
-    findings.push({ kind: log.level === "error" ? "render" : log.level === "warn" ? "warning" : "log", level: LOG_LEVEL[log.level], message: log.message });
-  }
+  findings.push(...result.logs.map(logFinding));
   return findings;
 }
 
diff --git a/packages/preview/src/cli.ts b/packages/preview/src/cli.ts
index 3541f261..1e779565 100644
--- a/packages/preview/src/cli.ts
+++ b/packages/preview/src/cli.ts
@@ -52,7 +52,9 @@ ${VITE_PLUGINS_HELP}
 `,
   build: `Usage: elements-preview build [options]
 
-Build the preview as static files to share or host anywhere.
+Build the preview as static files to share or host anywhere. Building again
+replaces the previous build's files and keeps any others; a folder with files
+that aren't a build is refused (exit code 2).
 
 Options:
   --dir <path>          The templates folder (default: emails)
@@ -87,8 +89,9 @@ Options:
 ${VITE_PLUGINS_HELP}
 
 Exit codes: 0 nothing to fix; 1 something to fix (with --strict, or to check);
-2 the check couldn't run (an option, folder or template that isn't right,
-Elements not installed); with --json, stderr then has {"error": "..."}.
+2 the check couldn't run (an option, folder or template that isn't right, a
+folder with no templates, Elements not installed); with --json, stderr then
+has {"error": "..."}.
 `,
   screenshot: `Usage: elements-preview screenshot <templates...> [options]
 
@@ -111,7 +114,8 @@ Options:
 ${VITE_PLUGINS_HELP}
 
 Exit codes: 0 every screenshot taken; 1 a template failed to render or shoot;
-2 it couldn't run (an option, folder or template that isn't right, no browser).
+2 it couldn't run (an option, folder or template that isn't right, no browser,
+two templates whose screenshots would have the same name).
 `,
   render: `Usage: elements-preview render <templates...> [options]
 
@@ -186,6 +190,16 @@ function failCommand(error: unknown, json: boolean | undefined): never {
   process.exit(2);
 }
 
+/**
+ * Ends `export` or `build` when it can't start: with 2 for what it refuses
+ * to do (a UsageError: two templates writing the same file, a folder that
+ * isn't a build), as the other commands, and 1 for anything else.
+ */
+function failSetup(error: unknown): never {
+  if (error instanceof UsageError) failCommand(error, false);
+  fail((error as Error).message);
+}
+
 function useColor(): boolean {
   return Boolean(process.stdout.isTTY) && !process.env.NO_COLOR && process.env.TERM !== "dumb";
 }
@@ -389,7 +403,7 @@ export async function run(argv: string[]): Promise<void> {
         extension: values.extension,
       });
     } catch (error) {
-      fail((error as Error).message);
+      failSetup(error);
     }
     for (const template of result.templates) {
       if (template.error) {
@@ -412,7 +426,7 @@ export async function run(argv: string[]): Promise<void> {
     try {
       result = await buildPreview({ dir: values.dir, outDir: values.outDir, plugins, projectId });
     } catch (error) {
-      fail((error as Error).message);
+      failSetup(error);
     }
     for (const { template, error } of result.failed) {
       process.stderr.write(`  ✗ ${template}: ${error.message.split("\n")[0]}${error.file ? ` (${error.file}${error.line ? `:${error.line}` : ""})` : ""}\n`);
diff --git a/packages/preview/src/server/build-folder.ts b/packages/preview/src/server/build-folder.ts
new file mode 100644
index 00000000..a8a92b0e
--- /dev/null
+++ b/packages/preview/src/server/build-folder.ts
@@ -0,0 +1,81 @@
+/**
+ * The folder a build is written to. Each build leaves a marker,
+ * `.elements-preview-build.json`, listing the files it wrote. The next build
+ * removes those files before it writes its own, so a deleted template's data
+ * and the previous app's assets don't stay behind, and it leaves every other
+ * file in the folder (a host's `_headers`, a `CNAME`). A build only writes
+ * into a folder that's new, empty, or has the marker; it refuses one with
+ * other files, rather than mixing into it.
+ */
+
+import { existsSync, statSync } from "node:fs";
+import { lstat, readdir, readFile, rename, rm, rmdir, writeFile } from "node:fs/promises";
+import path from "node:path";
+import { UsageError } from "./errors.js";
+import { inside } from "./http.js";
+import { shown } from "./paths.js";
+
+export const BUILD_MARKER = ".elements-preview-build.json";
+const MARKER_VERSION = 1;
+/** Where the marker is written first, so it's never left half-written. */
+const MARKER_DRAFT = `${BUILD_MARKER}.tmp`;
+/** Files that don't make a folder someone's: Finder's, and a marker an interrupted build left half-written. */
+const SYSTEM_FILES = new Set([".DS_Store", MARKER_DRAFT]);
+
+/** Every file in `dir` and its folders, relative to it with `/` separators. */
+export async function listFiles(dir: string): Promise<string[]> {
+  const entries = await readdir(dir, { recursive: true, withFileTypes: true });
+  return entries.filter((entry) => !entry.isDirectory()).map((entry) => path.relative(dir, path.join(entry.parentPath, entry.name)).split(path.sep).join("/"));
+}
+
+/**
+ * The files the previous build in `outDir` wrote: none when the folder is new
+ * or empty. A UsageError, before anything is removed, when the folder has
+ * other files and no marker, or a marker this version can't read.
+ */
+export async function previousBuild(outDir: string): Promise<string[]> {
+  if (!existsSync(outDir)) return [];
+  if (!statSync(outDir).isDirectory()) throw new UsageError(`${shown(outDir)} is a file. Build to a folder: --outDir .elements-preview`);
+  if (!existsSync(path.join(outDir, BUILD_MARKER))) {
+    const own = (await readdir(outDir)).filter((name) => !SYSTEM_FILES.has(name));
+    if (!own.length) return [];
+    throw new UsageError(
+      `${shown(outDir)} has files that aren't a preview build (or are a build from an earlier version of the preview), so the build won't write into it. Build to a new or empty folder (--outDir <folder>), or delete this one.`
+    );
+  }
+  let files: unknown;
+  try {
+    const marker = JSON.parse(await readFile(path.join(outDir, BUILD_MARKER), "utf8"));
+    if (marker?.version === MARKER_VERSION) files = marker.files;
+  } catch {
+    files = undefined;
+  }
+  if (!Array.isArray(files) || !files.every((file) => typeof file === "string" && inside(outDir, file))) {
+    throw new UsageError(
+      `${shown(outDir)} has a preview build marker (${BUILD_MARKER}) this version of the preview can't read, so the build won't remove anything in it. Build to a new or empty folder (--outDir <folder>), or delete this one.`
+    );
+  }
+  return files;
+}
+
+/** Removes the previous build's `files` from `outDir` (each file or link itself, never a folder), then the folders they leave empty. */
+export async function removeBuild(outDir: string, files: string[]): Promise<void> {
+  const folders = new Set<string>();
+  for (const relative of files) {
+    const file = inside(outDir, relative);
+    if (!file || file === path.join(outDir, BUILD_MARKER)) continue;
+    const stat = await lstat(file).catch(() => undefined);
+    if (!stat || stat.isDirectory()) continue;
+    await rm(file, { force: true });
+    for (let folder = path.dirname(file); folder.startsWith(outDir + path.sep); folder = path.dirname(folder)) folders.add(folder);
+  }
+  // Deepest first; a folder that still has files (someone else's) stays.
+  for (const folder of [...folders].sort((a, b) => b.length - a.length)) await rmdir(folder).catch(() => undefined);
+}
+
+/** Writes the marker listing `files`, the build's. */
+export async function writeBuildMarker(outDir: string, files: Iterable<string>): Promise<void> {
+  const draft = path.join(outDir, MARKER_DRAFT);
+  await writeFile(draft, `${JSON.stringify({ version: MARKER_VERSION, files: [...new Set(files)].sort() }, null, 2)}\n`);
+  await rename(draft, path.join(outDir, BUILD_MARKER));
+}
diff --git a/packages/preview/src/server/build.ts b/packages/preview/src/server/build.ts
index 2210f053..a79d6929 100644
--- a/packages/preview/src/server/build.ts
+++ b/packages/preview/src/server/build.ts
@@ -13,6 +13,7 @@ import { existsSync, statSync } from "node:fs";
 import { cp, mkdir, readFile, writeFile } from "node:fs/promises";
 import http from "node:http";
 import path from "node:path";
+import { listFiles, previousBuild, removeBuild, writeBuildMarker } from "./build-folder.js";
 import { createChecks } from "./checks.js";
 import { defaultUiDir } from "./dev-server.js";
 import { discoverTemplates } from "./discover.js";
@@ -38,14 +39,9 @@ export interface BuildResult {
   failed: Array<{ template: string; error: TemplateError }>;
 }
 
-/** Where a template's data goes: its path as folders, so any static host serves it. */
-function dataFile(outDir: string, kind: string, template: string): string {
-  return path.join(outDir, "api", kind, ...template.split("/")) + ".json";
-}
-
-async function writeJson(file: string, value: unknown): Promise<void> {
-  await mkdir(path.dirname(file), { recursive: true });
-  await writeFile(file, JSON.stringify(value));
+/** Where a template's data goes in the build: its path as folders, so any static host serves it. */
+function dataFile(kind: string, template: string): string {
+  return `api/${kind}/${template}.json`;
 }
 
 /** /static/ URLs relative to the page, so the build works under any path. */
@@ -60,25 +56,44 @@ export async function buildPreview(options: BuildOptions): Promise<BuildResult>
   }
   const outDir = path.resolve(options.outDir ?? ".elements-preview");
   if (dir === outDir || dir.startsWith(outDir + path.sep)) throw new Error(`The output folder ${outDir} holds the templates. Pick another one: --outDir .elements-preview`);
+  // A folder with other files is refused before anything is rendered or written.
+  const previous = await previousBuild(outDir);
   const uiDir = options.uiDir ?? defaultUiDir();
   if (!existsSync(path.join(uiDir, "index.html"))) throw new Error("The preview app isn't built. Run the package's build first.");
   const project = inspectProject(dir);
   if (!project.canRender) throw new Error(project.warnings.join("\n"));
 
   const templates = await discoverTemplates(dir);
+  const staticDir = path.join(dir, "static");
+  const appFiles = await listFiles(uiDir);
+  const staticFiles = existsSync(staticDir) ? (await listFiles(staticDir)).map((file) => `static/${file}`) : [];
   const loader = await createLoader({ project, watch: false, plugins: options.plugins });
   const checks = createChecks(loader, dir);
   const failed: BuildResult["failed"] = [];
+  const written = new Set<string>();
+  const writeJson = async (relative: string, value: unknown) => {
+    const file = path.join(outDir, ...relative.split("/"));
+    await mkdir(path.dirname(file), { recursive: true });
+    await writeFile(file, JSON.stringify(value));
+    written.add(relative);
+  };
   try {
     await mkdir(outDir, { recursive: true });
+    await removeBuild(outDir, previous);
+    // Every file this build may write, until it's done: a build stopped halfway is still removed by the next.
+    const planned = [...appFiles, "api/meta.json", "api/templates.json", ...staticFiles];
+    for (const template of templates) planned.push(...["render", "compat", "links"].map((kind) => dataFile(kind, template.path)));
+    await writeBuildMarker(outDir, planned);
+
     // The app, with relative asset paths and a flag that tells it to read the files written here.
     await cp(uiDir, outDir, { recursive: true });
+    for (const file of appFiles) written.add(file);
     const index = (await readFile(path.join(uiDir, "index.html"), "utf8"))
       .replace(/(src|href)="\/assets\//g, '$1="./assets/')
       .replace("</head>", '  <script>window.__ELEMENTS_PREVIEW_STATIC__ = true;</script>\n  </head>');
     await writeFile(path.join(outDir, "index.html"), index);
 
-    await writeJson(path.join(outDir, "api", "meta.json"), {
+    await writeJson("api/meta.json", {
       dir: path.relative(project.root, dir) || ".",
       elementsVersion: project.elementsVersion,
       reactVersion: project.reactVersion,
@@ -88,7 +103,7 @@ export async function buildPreview(options: BuildOptions): Promise<BuildResult>
       static: true,
       builtAt: new Date().toISOString(),
     });
-    await writeJson(path.join(outDir, "api", "templates.json"), { templates });
+    await writeJson("api/templates.json", { templates });
 
     for (const template of templates) {
       const file = path.join(dir, template.path);
@@ -96,15 +111,18 @@ export async function buildPreview(options: BuildOptions): Promise<BuildResult>
       const result = await loader.render(file);
       if (!result.ok) {
         failed.push({ template: template.path, error: result.error });
-        await writeJson(dataFile(outDir, "render", template.path), { ...result, source });
+        await writeJson(dataFile("render", template.path), { ...result, source });
         continue;
       }
-      await writeJson(dataFile(outDir, "render", template.path), { ...result, html: relativeStatic(result.html), source });
-      await writeJson(dataFile(outDir, "compat", template.path), await checks.compat(result, source));
-      await writeJson(dataFile(outDir, "links", template.path), await checks.links(result, { network: false }));
+      await writeJson(dataFile("render", template.path), { ...result, html: relativeStatic(result.html), source });
+      await writeJson(dataFile("compat", template.path), await checks.compat(result, source));
+      await writeJson(dataFile("links", template.path), await checks.links(result, { network: false }));
+    }
+    if (staticFiles.length) {
+      await cp(staticDir, path.join(outDir, "static"), { recursive: true });
+      for (const file of staticFiles) written.add(file);
     }
-    const staticDir = path.join(dir, "static");
-    if (existsSync(staticDir)) await cp(staticDir, path.join(outDir, "static"), { recursive: true });
+    await writeBuildMarker(outDir, written);
   } finally {
     await loader.close();
   }
diff --git a/packages/preview/src/server/check.ts b/packages/preview/src/server/check.ts
index 24d4fc2c..a90e34fb 100644
--- a/packages/preview/src/server/check.ts
+++ b/packages/preview/src/server/check.ts
@@ -58,8 +58,8 @@ export interface CheckReport {
 
 /**
  * The project and the templates a one-off command (`check`, `render`) works on:
- * the templates folder must exist, Elements and React must be installed, and
- * every template named must be there; otherwise a UsageError.
+ * the templates folder must exist and have templates, Elements and React must
+ * be installed, and every template named must be there; otherwise a UsageError.
  */
 export async function selectProjectTemplates(
   dirOption: string,
@@ -73,6 +73,9 @@ export async function selectProjectTemplates(
   const project = inspectProject(dir);
   if (!project.canRender) throw new UsageError(project.warnings.join("\n"));
   const all = await discoverTemplates(dir);
+  if (!all.length) {
+    throw new UsageError(`There are no templates in ${shown(dir)}: they're .tsx, .jsx or .js files with an export default. Point the ${command} at the folder with your templates: --dir ./emails`);
+  }
   const { selected, unknown } = selectTemplates(dir, requested, all);
   if (unknown.length) throw new UsageError(unknownTemplatesMessage(unknown, shown(dir), all));
   return { dir, project, selected };
diff --git a/packages/preview/src/server/dev-server.ts b/packages/preview/src/server/dev-server.ts
index c98d3bbb..4316af95 100644
--- a/packages/preview/src/server/dev-server.ts
+++ b/packages/preview/src/server/dev-server.ts
@@ -17,7 +17,7 @@ import path from "node:path";
 import { fileURLToPath } from "node:url";
 import { createChecks } from "./checks.js";
 import { discoverTemplates, resolveTemplatePath, type TemplateEntry } from "./discover.js";
-import { createLoader, readSource, type TemplateLoader } from "./loader.js";
+import { createLoader, readSource, type RenderResult, type TemplateLoader } from "./loader.js";
 import { inspectProject, type ProjectInfo } from "./project.js";
 
 export interface DevServerOptions {
@@ -58,6 +58,10 @@ export async function startDevServer(options: DevServerOptions): Promise<DevServ
   let templates: TemplateEntry[] = await discoverTemplates(dir);
   const events = new Set<ServerResponse>();
   const hashes = new Map<string, string>();
+  // Each template's last render, for its checks; `generation` counts the times files changed and were loaded again.
+  let generation = 0;
+  const lastRenders = new Map<string, { key: string; generation: number; result: RenderResult }>();
+  const renderKey = (props: unknown) => JSON.stringify(props ?? null);
 
   function broadcast(event: string, data: unknown): void {
     const payload = `event: ${event}\ndata: ${JSON.stringify(data)}\n\n`;
@@ -84,6 +88,8 @@ export async function startDevServer(options: DevServerOptions): Promise<DevServ
       const files = [...changed];
       changed.clear();
       loader.invalidate();
+      // A render from before is out of date for the checks too.
+      generation++;
       const inDir = files.filter((f) => f.startsWith(dir + path.sep));
       if (inDir.length) templates = await discoverTemplates(dir);
       broadcast("change", {
@@ -131,10 +137,15 @@ export async function startDevServer(options: DevServerOptions): Promise<DevServ
       const file = body.path ? resolveTemplatePath(dir, body.path) : undefined;
       if (!file || !templates.some((t) => t.path === body.path)) return json(res, 404, { error: `No template ${body.path}` });
       if (!project.canRender) return json(res, 200, { ok: false, logs: [], durationMs: 0, error: { message: project.warnings.join("\n"), phase: "load" } });
-      const result = await loader.render(file, { props: body.props });
       if (url.pathname === "/api/render") {
+        const at = generation;
+        const result = await loader.render(file, { props: body.props });
+        lastRenders.set(body.path!, { key: renderKey(body.props), generation: at, result });
         return json(res, 200, { ...result, source: await readSource(file) });
       }
+      // The app checks each render it gets: the same template and props, with no file changed since, is that render.
+      const last = lastRenders.get(body.path!);
+      const result = last && last.key === renderKey(body.props) && last.generation === generation ? last.result : await loader.render(file, { props: body.props });
       if (!result.ok) return json(res, 200, { applicable: false, reason: "The template doesn't render." });
       if (url.pathname === "/api/links") return json(res, 200, await checks.links(result));
       return json(res, 200, await checks.compat(result, await readSource(file)));
@@ -154,14 +165,21 @@ export async function startDevServer(options: DevServerOptions): Promise<DevServ
         res.writeHead(405);
         return res.end();
       }
+      let pathname: string;
+      try {
+        pathname = decodeURIComponent(url.pathname);
+      } catch {
+        res.writeHead(400, { "content-type": "text/plain" });
+        return res.end("Bad request");
+      }
       // The templates folder's static/ files, as React Email's preview serves them: <img src="/static/logo.png">.
-      if (url.pathname.startsWith("/static/")) {
-        const file = inside(path.join(dir, "static"), decodeURIComponent(url.pathname.slice("/static/".length)));
+      if (pathname.startsWith("/static/")) {
+        const file = inside(path.join(dir, "static"), pathname.slice("/static/".length));
         if (file && (await sendFile(res, file))) return;
         res.writeHead(404, { "content-type": "text/plain" });
         return res.end("Not found");
       }
-      const asset = url.pathname !== "/" ? inside(uiDir, decodeURIComponent(url.pathname.slice(1))) : undefined;
+      const asset = pathname !== "/" ? inside(uiDir, pathname.slice(1)) : undefined;
       if (asset && (await sendFile(res, asset))) return;
       // Anything else is a page of the app (/preview/<template>).
       if (await sendFile(res, path.join(uiDir, "index.html"))) return;
diff --git a/packages/preview/src/server/export.ts b/packages/preview/src/server/export.ts
index d8fa44b3..cd31d455 100644
--- a/packages/preview/src/server/export.ts
+++ b/packages/preview/src/server/export.ts
@@ -8,8 +8,9 @@
 import { cp, mkdir, writeFile } from "node:fs/promises";
 import { existsSync, statSync } from "node:fs";
 import path from "node:path";
-import { discoverTemplates } from "./discover.js";
+import { discoverTemplates, type TemplateEntry } from "./discover.js";
 import { createLoader } from "./loader.js";
+import { assertDistinctOutputs } from "./outputs.js";
 import { inspectProject } from "./project.js";
 import type { TemplateError } from "./errors.js";
 
@@ -61,6 +62,11 @@ export async function exportTemplates(options: ExportOptions): Promise<ExportRes
   if (!project.canRender) throw new Error(project.warnings.join("\n"));
   const extension = (options.extension ?? (options.plainText ? "txt" : "html")).replace(/^\./, "");
   const templates = await discoverTemplates(dir);
+  const base = (template: TemplateEntry) => template.path.slice(0, -path.extname(template.path).length);
+  assertDistinctOutputs(templates, (template) => [
+    path.join(outDir, `${base(template)}.${extension}`),
+    ...(options.design ? [path.join(outDir, `${base(template)}.design.json`)] : []),
+  ]);
   const loader = await createLoader({ project, watch: false, plugins: options.plugins });
   const results: ExportedTemplate[] = [];
   try {
@@ -72,7 +78,11 @@ export async function exportTemplates(options: ExportOptions): Promise<ExportRes
         results.push({ template: template.path, files: [], error: result.error, warnings });
         continue;
       }
-      const base = template.path.slice(0, -path.extname(template.path).length);
+      // Without its plain text there's nothing to write: an empty file would pass for an email without text.
+      if (options.plainText && result.textError) {
+        results.push({ template: template.path, files: [], error: { message: `No plain text version: ${result.textError}`, phase: "render" }, warnings });
+        continue;
+      }
       const files: string[] = [];
       const write = async (relative: string, content: string) => {
         const file = path.join(outDir, relative);
@@ -82,12 +92,12 @@ export async function exportTemplates(options: ExportOptions): Promise<ExportRes
         files.push(shown.startsWith("..") ? file : shown);
       };
       if (options.plainText) {
-        await write(`${base}.${extension}`, result.text);
+        await write(`${base(template)}.${extension}`, result.text);
       } else {
-        await write(`${base}.${extension}`, options.pretty ? await prettyHtml(result.html) : result.html);
+        await write(`${base(template)}.${extension}`, options.pretty ? await prettyHtml(result.html) : result.html);
       }
       if (options.design) {
-        if (result.json) await write(`${base}.design.json`, `${JSON.stringify(result.json, null, 2)}\n`);
+        if (result.json) await write(`${base(template)}.design.json`, `${JSON.stringify(result.json, null, 2)}\n`);
         else if (result.jsonError) warnings.push(`No design JSON: ${result.jsonError}`);
       }
       results.push({ template: template.path, files, warnings });
diff --git a/packages/preview/src/server/links.ts b/packages/preview/src/server/links.ts
index 70abcd69..f497ae6e 100644
--- a/packages/preview/src/server/links.ts
+++ b/packages/preview/src/server/links.ts
@@ -115,6 +115,15 @@ export function isPlaceholderUrl(url: string): boolean {
   }
 }
 
+/** A URL's path decoded, or undefined when it doesn't decode (`%`, `%zz`, a % escape that isn't UTF-8). */
+function decoded(text: string): string | undefined {
+  try {
+    return decodeURIComponent(text);
+  } catch {
+    return undefined;
+  }
+}
+
 /** What's wrong with a URL from the HTML alone. */
 function staticFindings(item: Found, dir: string): LinkFinding[] {
   const base = { kind: item.kind, url: item.url, block: item.block, label: item.kind === "image" ? item.alt ?? undefined : item.label };
@@ -147,7 +156,12 @@ function staticFindings(item: Found, dir: string): LinkFinding[] {
       out.push({ ...base, level: "info", message: "Empty alt text: right for a decorative image. Otherwise describe it (alt=\"…\"): it's what readers see while images are blocked." });
     }
     if (url.startsWith("/static/")) {
-      const file = path.join(dir, "static", decodeURIComponent(url.slice("/static/".length).split(/[?#]/)[0]));
+      const relative = decoded(url.slice("/static/".length).split(/[?#]/)[0]);
+      if (relative === undefined) {
+        out.push({ ...base, level: "error", message: "A malformed URL: its % escapes don't decode (write a % itself as %25)." });
+        return out;
+      }
+      const file = path.join(dir, "static", relative);
       if (!existsSync(file)) out.push({ ...base, level: "error", message: `There's no ${path.join("static", url.slice("/static/".length))} in the templates folder.` });
       else {
         const size = statSync(file).size;
diff --git a/packages/preview/src/server/outputs.ts b/packages/preview/src/server/outputs.ts
new file mode 100644
index 00000000..d6eb281d
--- /dev/null
+++ b/packages/preview/src/server/outputs.ts
@@ -0,0 +1,23 @@
+/**
+ * Templates whose outputs have the same name: `welcome.jsx` and `welcome.tsx`
+ * both export to `welcome.html`. Names are compared as macOS and Windows
+ * compare them, without case and Unicode normalization, since there
+ * `Welcome.html` and `welcome.html` are one file.
+ */
+
+import type { TemplateEntry } from "./discover.js";
+import { UsageError } from "./errors.js";
+import { shown } from "./paths.js";
+
+/** Throws a UsageError naming two templates that would write the same file (`outputs`: the files each one writes). */
+export function assertDistinctOutputs(templates: TemplateEntry[], outputs: (template: TemplateEntry) => string[]): void {
+  const writers = new Map<string, TemplateEntry>();
+  for (const template of templates) {
+    for (const file of outputs(template)) {
+      const name = file.normalize("NFC").toLowerCase();
+      const other = writers.get(name);
+      if (other && other !== template) throw new UsageError(`${other.path} and ${template.path} would both write ${shown(file)}. Rename one of them.`);
+      writers.set(name, template);
+    }
+  }
+}
diff --git a/packages/preview/src/server/screenshot.ts b/packages/preview/src/server/screenshot.ts
index 575aea02..456ffad4 100644
--- a/packages/preview/src/server/screenshot.ts
+++ b/packages/preview/src/server/screenshot.ts
@@ -22,6 +22,7 @@ import { discoverTemplates, selectTemplates, unknownTemplatesMessage } from "./d
 import { UsageError, type TemplateError } from "./errors.js";
 import { inside, listenFrom, requestAllowed, sendFile } from "./http.js";
 import { createLoader, type RenderMode } from "./loader.js";
+import { assertDistinctOutputs } from "./outputs.js";
 import { shown } from "./paths.js";
 import { inspectProject } from "./project.js";
 
@@ -203,9 +204,10 @@ export async function takeScreenshots(options: ScreenshotOptions): Promise<Scree
   const all = await discoverTemplates(dir);
   const { selected, unknown } = selectTemplates(dir, options.templates, all);
   if (unknown.length) throw new UsageError(unknownTemplatesMessage(unknown, shown(dir), all));
-  const browser = findBrowser(options.browser);
   const variants = options.variants?.length ? options.variants : (["desktop"] as Variant[]);
   const outDir = path.resolve(options.outDir ?? "screenshots");
+  assertDistinctOutputs(selected, (template) => variants.map((variant) => screenshotFile(outDir, template.path, variant)));
+  const browser = findBrowser(options.browser);
   const timeoutMs = options.timeoutMs ?? 15_000;
 
   const { default: puppeteer } = await import("puppeteer-core");
diff --git a/packages/preview/test/build.test.ts b/packages/preview/test/build.test.ts
index 7e63d366..9e20d072 100644
--- a/packages/preview/test/build.test.ts
+++ b/packages/preview/test/build.test.ts
@@ -1,12 +1,13 @@
 import { existsSync } from "node:fs";
-import { readFile, writeFile } from "node:fs/promises";
+import { mkdir, readdir, readFile, rm, writeFile } from "node:fs/promises";
 import http from "node:http";
 import path from "node:path";
 import { afterAll, beforeAll, describe, expect, it } from "vitest";
 import { buildPreview, startStaticServer } from "../src/server/build";
+import { UsageError } from "../src/server/errors";
 import { exportTemplates } from "../src/server/export";
 import { loadVitePlugins } from "../src/server/loader";
-import { fixtureCopy } from "./helpers";
+import { cli, fixtureCopy } from "./helpers";
 
 let fixture: Awaited<ReturnType<typeof fixtureCopy>>;
 const UI = path.join(path.dirname(new URL(import.meta.url).pathname), "..", "dist", "ui");
@@ -71,6 +72,55 @@ describe("static build", () => {
   });
 });
 
+describe("building again", () => {
+  /** A preview app with one script, named as Vite names it after its content. */
+  async function fakeUi(name: string, script: string): Promise<string> {
+    const uiDir = path.join(fixture.root, name);
+    await mkdir(path.join(uiDir, "assets"), { recursive: true });
+    await writeFile(path.join(uiDir, "index.html"), `<html><head><script src="/assets/${script}"></script></head><body></body></html>`);
+    await writeFile(path.join(uiDir, "assets", script), "");
+    return uiDir;
+  }
+
+  it("replaces the previous build's files, and keeps the files that aren't the build's", async () => {
+    const dir = path.join(fixture.root, "rebuilt");
+    await mkdir(dir);
+    await writeFile(path.join(dir, "welcome.tsx"), 'import { Email } from "@unlayer/react-elements";\nexport default function Welcome() { return <Email />; }\n');
+    await writeFile(path.join(dir, "old.tsx"), 'import { Email } from "@unlayer/react-elements";\nexport default function Old() { return <Email />; }\nOld.PreviewProps = { secret: "s3cret" };\n');
+    const outDir = path.join(fixture.root, "rebuilt-out");
+    await buildPreview({ dir, outDir, uiDir: await fakeUi("ui-1", "index-1111.js") });
+    expect(existsSync(path.join(outDir, "api", "render", "old.tsx.json"))).toBe(true);
+    // A file of the host's, put in the build.
+    await writeFile(path.join(outDir, "_headers"), "/*\n  X-Robots-Tag: noindex\n");
+
+    await rm(path.join(dir, "old.tsx"));
+    const result = await buildPreview({ dir, outDir, uiDir: await fakeUi("ui-2", "index-2222.js") });
+    expect(result).toMatchObject({ templates: 1, failed: [] });
+    for (const gone of ["render", "compat", "links"]) expect(existsSync(path.join(outDir, "api", gone, "old.tsx.json"))).toBe(false);
+    expect(existsSync(path.join(outDir, "assets", "index-1111.js"))).toBe(false);
+    expect(existsSync(path.join(outDir, "assets", "index-2222.js"))).toBe(true);
+    expect(existsSync(path.join(outDir, "api", "render", "welcome.tsx.json"))).toBe(true);
+    expect(await readFile(path.join(outDir, "_headers"), "utf8")).toContain("noindex");
+  });
+
+  it("builds into an empty folder, and refuses a folder that has other files", async () => {
+    const uiDir = await fakeUi("ui-3", "index-3333.js");
+    const empty = path.join(fixture.root, "empty-out");
+    await mkdir(empty);
+    await expect(buildPreview({ dir: fixture.emails, outDir: empty, uiDir })).resolves.toMatchObject({ failed: [] });
+
+    const other = path.join(fixture.root, "other-out");
+    await mkdir(other);
+    await writeFile(path.join(other, "notes.txt"), "mine");
+    await expect(buildPreview({ dir: fixture.emails, outDir: other, uiDir })).rejects.toThrow(UsageError);
+    await expect(buildPreview({ dir: fixture.emails, outDir: other, uiDir })).rejects.toThrow(/other-out has files that aren't a preview build/);
+    expect(await readdir(other)).toEqual(["notes.txt"]);
+    const { code, stderr } = await cli(["build", "--dir", fixture.emails, "--outDir", other]);
+    expect(code).toBe(2);
+    expect(stderr).toMatch(/aren't a preview build/);
+  });
+});
+
 describe("Vite plugins", () => {
   it("loads plugins from a module and uses them to load templates", async () => {
     const pluginsFile = path.join(fixture.root, "preview-plugins.mjs");
diff --git a/packages/preview/test/check.test.ts b/packages/preview/test/check.test.ts
index e0c7353c..b27f2803 100644
--- a/packages/preview/test/check.test.ts
+++ b/packages/preview/test/check.test.ts
@@ -1,9 +1,9 @@
-import { writeFile } from "node:fs/promises";
+import { mkdir, writeFile } from "node:fs/promises";
 import path from "node:path";
 import { afterAll, beforeAll, describe, expect, it } from "vitest";
 import { checkTemplates, formatCheckReport } from "../src/server/check";
 import { UsageError } from "../src/server/errors";
-import { fixtureCopy } from "./helpers";
+import { cli, fixtureCopy } from "./helpers";
 
 let fixture: Awaited<ReturnType<typeof fixtureCopy>>;
 
@@ -26,10 +26,41 @@ export default function NeedsFixes() {
 }
 `;
 
+// React's development warnings, which it writes with console.error: a list without keys.
+const NO_KEYS = `import { Email, Row, Column, Paragraph } from "@unlayer/react-elements";
+
+function Items({ items }: { items: string[] }) {
+  return <>{items.map((item) => <Paragraph>{item}</Paragraph>)}</>;
+}
+
+export default function NoKeys() {
+  return <Email><Row><Column><Items items={["One", "Two"]} /></Column></Row></Email>;
+}
+`;
+
+// A block Elements leaves out, and says so with console.error: a Row with a layout for 2 Columns and 1.
+const LEFT_OUT = `import { Email, Row, Column, Paragraph, ColumnLayouts } from "@unlayer/react-elements";
+
+export default function LeftOut() {
+  return <Email><Row layout={ColumnLayouts.TwoEqual}><Column><Paragraph>Only one</Paragraph></Column></Row></Email>;
+}
+`;
+
+const BAD_URL = `import { Email, Row, Column, Html } from "@unlayer/react-elements";
+
+export default function BadUrl() {
+  return <Email><Row><Column><Html html={'<img src="/static/%" alt="Logo">'} /></Column></Row></Email>;
+}
+`;
+
 beforeAll(async () => {
   fixture = await fixtureCopy("check");
   await writeFile(path.join(fixture.emails, "needs-fixes.tsx"), NEEDS_FIXES);
   await writeFile(path.join(fixture.emails, "broken.tsx"), "export default function Broken() { return <Email>; }\n");
+  await mkdir(path.join(fixture.root, "more"));
+  await writeFile(path.join(fixture.root, "more", "no-keys.tsx"), NO_KEYS);
+  await writeFile(path.join(fixture.root, "more", "left-out.tsx"), LEFT_OUT);
+  await writeFile(path.join(fixture.root, "more", "bad-url.tsx"), BAD_URL);
 });
 
 afterAll(async () => {
@@ -97,9 +128,35 @@ describe("check", () => {
     expect(formatCheckReport(report, { color: true })).toContain("\u001b[31m");
   });
 
+  it("fixes what Elements leaves out, and only checks React's development warnings", async () => {
+    const report = await checkTemplates({ dir: path.join(fixture.root, "more"), templates: ["no-keys.tsx", "left-out.tsx"], network: false });
+    const leftOut = report.templates.find((t) => t.path === "left-out.tsx")!;
+    expect(leftOut.toFix).toEqual([expect.objectContaining({ kind: "render", level: "error", message: expect.stringMatching(/^\[Unlayer\] A Row with the TwoEqual layout/) })]);
+    const noKeys = report.templates.find((t) => t.path === "no-keys.tsx")!;
+    expect(noKeys.toFix).toEqual([]);
+    expect(noKeys.toCheck).toEqual(expect.arrayContaining([expect.objectContaining({ kind: "warning", level: "warning", message: expect.stringMatching(/unique "key" prop/) })]));
+    expect(noKeys.ok).toBe(true);
+  });
+
+  it("reports a URL that doesn't decode as the template's, and checks the others", async () => {
+    const report = await checkTemplates({ dir: path.join(fixture.root, "more"), network: false });
+    expect(report.templates.map((t) => t.path).sort()).toEqual(["bad-url.tsx", "left-out.tsx", "no-keys.tsx"]);
+    const badUrl = report.templates.find((t) => t.path === "bad-url.tsx")!;
+    expect(badUrl.toFix).toEqual([expect.objectContaining({ kind: "image", url: "/static/%", message: expect.stringMatching(/^A malformed URL/) })]);
+  });
+
   it("refuses templates and folders that aren't there", async () => {
     await expect(checkTemplates({ dir: fixture.emails, templates: ["nope.tsx"], network: false })).rejects.toThrow(UsageError);
     await expect(checkTemplates({ dir: fixture.emails, templates: ["nope.tsx"], network: false })).rejects.toThrow(/No template nope\.tsx in .*Its templates: billing\/receipt\.jsx/s);
     await expect(checkTemplates({ dir: path.join(fixture.root, "missing") })).rejects.toThrow(/doesn't exist/);
   });
+
+  it("refuses a folder with no templates, as one that isn't there", async () => {
+    const empty = path.join(fixture.root, "empty");
+    await mkdir(empty);
+    await expect(checkTemplates({ dir: empty, network: false })).rejects.toThrow(UsageError);
+    const { code, stderr } = await cli(["check", "--dir", empty, "--json"]);
+    expect(code).toBe(2);
+    expect(JSON.parse(stderr).error).toMatch(/^There are no templates in .*empty/);
+  });
 });
diff --git a/packages/preview/test/dev-server.test.ts b/packages/preview/test/dev-server.test.ts
index 05cbab25..2d2fdfc0 100644
--- a/packages/preview/test/dev-server.test.ts
+++ b/packages/preview/test/dev-server.test.ts
@@ -100,6 +100,31 @@ describe("dev server", () => {
     expect(ok.headers.get("content-type")).toBe("image/png");
     expect((await fetch(`${server.url}/static/..%2F..%2Fpackage.json`)).status).toBe(404);
     expect((await fetch(`${server.url}/static/../package.json`)).status).not.toBe(200);
+    // A path that doesn't decode is a bad request, not the server's error.
+    expect((await fetch(`${server.url}/static/%`)).status).toBe(400);
+    expect((await fetch(`${server.url}/%E0%A4%A`)).status).toBe(400);
+  });
+
+  it("checks the render the app just got, without rendering the template again", async () => {
+    const file = path.join(fixture.emails, "counted.tsx");
+    const change = nextChange();
+    await new Promise((r) => setTimeout(r, 100));
+    await writeFile(
+      file,
+      'import { Email, Row, Column, Paragraph } from "@unlayer/react-elements";\nexport default function Counted({ name }: { name: string }) {\n  (globalThis as any).__countedRenders = ((globalThis as any).__countedRenders ?? 0) + 1;\n  return <Email><Row><Column><Paragraph>Hi {name}</Paragraph></Column></Row></Email>;\n}\nCounted.PreviewProps = { name: "Ada" };\n'
+    );
+    await change;
+    const renders = () => (globalThis as { __countedRenders?: number }).__countedRenders ?? 0;
+    expect((await post("/api/render", { path: "counted.tsx" })).body.ok).toBe(true);
+    const once = renders();
+    expect(once).toBeGreaterThan(0);
+    expect((await post("/api/compat", { path: "counted.tsx" })).body.applicable).toBe(true);
+    expect((await post("/api/links", { path: "counted.tsx" })).body.applicable).toBe(true);
+    expect(renders()).toBe(once);
+    // Other props are another render.
+    const links = await post("/api/links", { path: "counted.tsx", props: { name: "Grace" } });
+    expect(links.body.applicable).toBe(true);
+    expect(renders()).toBe(once * 2);
   });
 
   it("answers only requests addressed to localhost", async () => {
diff --git a/packages/preview/test/export.test.ts b/packages/preview/test/export.test.ts
index bc9b3981..58f66540 100644
--- a/packages/preview/test/export.test.ts
+++ b/packages/preview/test/export.test.ts
@@ -1,9 +1,10 @@
 import { existsSync } from "node:fs";
-import { readFile, writeFile } from "node:fs/promises";
+import { readFile, rm, writeFile } from "node:fs/promises";
 import path from "node:path";
-import { afterAll, beforeAll, describe, expect, it } from "vitest";
+import { afterAll, beforeAll, describe, expect, it, vi } from "vitest";
+import { UsageError } from "../src/server/errors";
 import { exportTemplates } from "../src/server/export";
-import { fixtureCopy } from "./helpers";
+import { cli, fixtureCopy } from "./helpers";
 
 let fixture: Awaited<ReturnType<typeof fixtureCopy>>;
 
@@ -54,4 +55,49 @@ describe("export", () => {
   it("refuses to write into the templates folder", async () => {
     await expect(exportTemplates({ dir: fixture.emails, outDir: fixture.emails })).rejects.toThrow(/holds the templates/);
   });
+
+  it("stops before writing anything when two templates would write the same file", async () => {
+    const twin = path.join(fixture.emails, "welcome.jsx");
+    await writeFile(twin, 'import { Email } from "@unlayer/react-elements";\nexport default function Welcome() { return <Email />; }\n');
+    try {
+      const outDir = path.join(fixture.root, "out-twins");
+      await expect(exportTemplates({ dir: fixture.emails, outDir })).rejects.toThrow(UsageError);
+      await expect(exportTemplates({ dir: fixture.emails, outDir })).rejects.toThrow(/welcome\.jsx and welcome\.tsx would both write .*welcome\.html/);
+      expect(existsSync(outDir)).toBe(false);
+      const { code, stderr } = await cli(["export", "--dir", fixture.emails, "--outDir", outDir]);
+      expect(code).toBe(2);
+      expect(stderr).toMatch(/welcome\.jsx and welcome\.tsx/);
+    } finally {
+      await rm(twin);
+    }
+  });
+
+  it("reports a template whose plain text can't be made, and writes no empty file for it", async () => {
+    // The loader as it is, but with plain text that can't be made.
+    vi.resetModules();
+    vi.doMock("../src/server/loader", async (importOriginal) => {
+      const loader = await importOriginal<typeof import("../src/server/loader")>();
+      return {
+        ...loader,
+        createLoader: async (options: Parameters<typeof loader.createLoader>[0]) => {
+          const real = await loader.createLoader(options);
+          return { ...real, render: async (file: string) => ({ ...(await real.render(file)), text: "", textError: "No plain text for this one" }) };
+        },
+      };
+    });
+    try {
+      const { exportTemplates: exportWithoutText } = await import("../src/server/export");
+      const outDir = path.join(fixture.root, "out-no-text");
+      const result = await exportWithoutText({ dir: fixture.emails, outDir, plainText: true });
+      expect(result.failed).toBe(result.templates.length);
+      expect(result.templates.find((t) => t.template === "welcome.tsx")?.error?.message).toMatch(/No plain text for this one/);
+      expect(existsSync(path.join(outDir, "welcome.txt"))).toBe(false);
+      // The HTML doesn't need the plain text.
+      const html = await exportWithoutText({ dir: fixture.emails, outDir: path.join(fixture.root, "out-html-no-text") });
+      expect(html.templates.find((t) => t.template === "welcome.tsx")?.error).toBeUndefined();
+    } finally {
+      vi.doUnmock("../src/server/loader");
+      vi.resetModules();
+    }
+  });
 });
diff --git a/packages/preview/test/helpers.ts b/packages/preview/test/helpers.ts
index ad3bf47d..0bb7565c 100644
--- a/packages/preview/test/helpers.ts
+++ b/packages/preview/test/helpers.ts
@@ -1,6 +1,8 @@
 import { cp, mkdir, rm } from "node:fs/promises";
 import path from "node:path";
 import { fileURLToPath } from "node:url";
+import { vi } from "vitest";
+import { run } from "../src/cli";
 
 export const FIXTURE = fileURLToPath(new URL("./fixtures/basic/", import.meta.url));
 const TMP = fileURLToPath(new URL("./.tmp/", import.meta.url));
@@ -15,3 +17,29 @@ export async function fixtureCopy(name: string): Promise<{ root: string; emails:
   await cp(FIXTURE, root, { recursive: true });
   return { root, emails: path.join(root, "emails"), cleanup: () => rm(root, { recursive: true, force: true }) };
 }
+
+/** Runs `elements-preview <args>` in-process: what it writes to stdout and stderr, and its exit code. */
+export async function cli(args: string[]): Promise<{ stdout: string; stderr: string; code: number }> {
+  let stdout = "";
+  let stderr = "";
+  const out = vi.spyOn(process.stdout, "write").mockImplementation((chunk) => ((stdout += String(chunk)), true));
+  const err = vi.spyOn(process.stderr, "write").mockImplementation((chunk) => ((stderr += String(chunk)), true));
+  const exit = vi.spyOn(process, "exit").mockImplementation(((code?: number) => {
+    throw Object.assign(new Error("exit"), { exitCode: code ?? 0 });
+  }) as never);
+  let code: number;
+  try {
+    await run(args);
+    code = Number(process.exitCode ?? 0);
+  } catch (error) {
+    const exitCode = (error as { exitCode?: number }).exitCode;
+    if (exitCode === undefined) throw error;
+    code = exitCode;
+  } finally {
+    out.mockRestore();
+    err.mockRestore();
+    exit.mockRestore();
+    process.exitCode = undefined;
+  }
+  return { stdout, stderr, code };
+}
diff --git a/packages/preview/test/links.test.ts b/packages/preview/test/links.test.ts
index 42bd2b7a..f42d2e54 100644
--- a/packages/preview/test/links.test.ts
+++ b/packages/preview/test/links.test.ts
@@ -67,6 +67,18 @@ describe("link and image checks", () => {
     expect(report.findings[0].level).toBe("error");
   });
 
+  it("reports a /static/ URL that doesn't decode, and checks the rest", async () => {
+    const report = await checkLinks(html('<img src="/static/%" alt="Logo"><img src="/static/%E0%A4%A" alt="Logo"><a href="javascript:x">A</a>'), { dir: DIR, network: false });
+    const messages = report.findings.map((f) => `${f.level}: ${f.url} ${f.message}`);
+    expect(messages).toEqual(
+      expect.arrayContaining([
+        expect.stringMatching(/^error: \/static\/% A malformed URL/),
+        expect.stringMatching(/^error: \/static\/%E0%A4%A A malformed URL/),
+        expect.stringMatching(/^error: javascript:x Email clients don't run javascript: links/),
+      ])
+    );
+  });
+
   it("accepts the templates folder's static files, and says to host them", async () => {
     const report = await checkLinks(html('<img src="/static/logo.png" alt="Acme">'), { dir: DIR, network: false });
     expect(report.findings).toEqual([expect.objectContaining({ level: "info", message: expect.stringMatching(/host the image/) })]);
diff --git a/packages/preview/test/render.test.ts b/packages/preview/test/render.test.ts
index e89725ff..1459dc80 100644
--- a/packages/preview/test/render.test.ts
+++ b/packages/preview/test/render.test.ts
@@ -1,10 +1,9 @@
 import { writeFile } from "node:fs/promises";
 import path from "node:path";
-import { afterAll, afterEach, beforeAll, describe, expect, it, vi } from "vitest";
-import { run } from "../src/cli";
+import { afterAll, afterEach, beforeAll, describe, expect, it } from "vitest";
 import { renderTemplates } from "../src/server/render";
 import { UsageError } from "../src/server/errors";
-import { fixtureCopy } from "./helpers";
+import { cli, fixtureCopy } from "./helpers";
 
 let fixture: Awaited<ReturnType<typeof fixtureCopy>>;
 
@@ -33,32 +32,6 @@ afterAll(async () => {
   await fixture?.cleanup();
 });
 
-/** Runs `elements-preview <args>` in-process: what it writes to stdout and stderr, and its exit code. */
-async function cli(args: string[]): Promise<{ stdout: string; stderr: string; code: number }> {
-  let stdout = "";
-  let stderr = "";
-  const out = vi.spyOn(process.stdout, "write").mockImplementation((chunk) => ((stdout += String(chunk)), true));
-  const err = vi.spyOn(process.stderr, "write").mockImplementation((chunk) => ((stderr += String(chunk)), true));
-  const exit = vi.spyOn(process, "exit").mockImplementation(((code?: number) => {
-    throw Object.assign(new Error("exit"), { exitCode: code ?? 0 });
-  }) as never);
-  let code: number;
-  try {
-    await run(args);
-    code = Number(process.exitCode ?? 0);
-  } catch (error) {
-    const exitCode = (error as { exitCode?: number }).exitCode;
-    if (exitCode === undefined) throw error;
-    code = exitCode;
-  } finally {
-    out.mockRestore();
-    err.mockRestore();
-    exit.mockRestore();
-    process.exitCode = undefined;
-  }
-  return { stdout, stderr, code };
-}
-
 afterEach(() => {
   process.exitCode = undefined;
 });
diff --git a/packages/preview/test/screenshot.test.ts b/packages/preview/test/screenshot.test.ts
index 8de82b30..cef954cc 100644
--- a/packages/preview/test/screenshot.test.ts
+++ b/packages/preview/test/screenshot.test.ts
@@ -1,8 +1,9 @@
 import { existsSync } from "node:fs";
-import { readFile, writeFile } from "node:fs/promises";
+import { readFile, rm, writeFile } from "node:fs/promises";
 import path from "node:path";
 import { afterAll, beforeAll, describe, expect, it } from "vitest";
 import { findBrowser } from "../src/server/browser";
+import { UsageError } from "../src/server/errors";
 import { takeScreenshots } from "../src/server/screenshot";
 import { fixtureCopy } from "./helpers";
 
@@ -106,4 +107,23 @@ describe("screenshots without what they need", () => {
     await expect(takeScreenshots({ dir: fixture.emails, templates: ["welcome.tsx"], browser: "/nowhere/chrome" })).rejects.toThrow(/There's no browser at \/nowhere\/chrome/);
     await expect(takeScreenshots({ dir: fixture.emails, templates: [] })).rejects.toThrow(/Name the templates/);
   });
+
+  it("stops before taking any when two templates would have the same screenshot", async () => {
+    const twin = path.join(fixture.emails, "welcome.jsx");
+    await writeFile(twin, 'import { Email } from "@unlayer/react-elements";\nexport default function Welcome() { return <Email />; }\n');
+    try {
+      const outDir = path.join(fixture.root, "shots-twins");
+      // Before it looks for a browser: this one isn't there.
+      const taken = takeScreenshots({ dir: fixture.emails, templates: ["welcome"], outDir, browser: "/nowhere/chrome" });
+      await expect(taken).rejects.toThrow(UsageError);
+      await expect(takeScreenshots({ dir: fixture.emails, templates: ["."], outDir, browser: "/nowhere/chrome" })).rejects.toThrow(
+        /welcome\.jsx and welcome\.tsx would both write .*welcome\.desktop\.png/
+      );
+      // Each one alone is fine.
+      await expect(takeScreenshots({ dir: fixture.emails, templates: ["welcome.jsx"], outDir, browser: "/nowhere/chrome" })).rejects.toThrow(/There's no browser/);
+      expect(existsSync(outDir)).toBe(false);
+    } finally {
+      await rm(twin);
+    }
+  });
 });
diff --git a/packages/preview/test/unit.test.ts b/packages/preview/test/unit.test.ts
index 79ae3d30..d97a45c7 100644
--- a/packages/preview/test/unit.test.ts
+++ b/packages/preview/test/unit.test.ts
@@ -101,6 +101,37 @@ describe("check findings", () => {
     expect([grouped.toFix.length, grouped.toCheck.length, grouped.notes.length]).toEqual([2, 3, 1]);
   });
 
+  it("fixes what Elements says with console.error, and only checks the rest (React's development warnings)", () => {
+    const level = (message: string) => renderingFindings({ ok: true, logs: [{ level: "error", message }] }).map((f) => [f.kind, f.level])[0];
+    // Elements 0.3, and 0.2.x.
+    for (const message of [
+      "[Unlayer] <Chart> failed while rendering, so it's left out.",
+      "[Unlayer] <Chart> threw while rendering, so it's left out: No data",
+      "[Unlayer] an Elements block rendered inside a component left a marker behind; it's taken out, and the block it stood for is missing.",
+      "[Unlayer] A Row with the TwoEqual layout, for 2 Columns, has 1, so it's left out.",
+      "Body: Failed to render children: boom",
+      "Body rendering failed: boom",
+      "Row rendering failed: boom",
+      "Column: Failed to render children: boom",
+      "Column rendering failed: boom",
+      "Button rendering failed: boom",
+      "countdown rendering failed: boom",
+    ]) {
+      expect(level(message), message).toEqual(["render", "error"]);
+    }
+    // React 18 and 19's development warnings, and a template's own console.error.
+    for (const message of [
+      'Warning: Each child in a list should have a unique "key" prop. See https://reactjs.org/link/warning-keys for more information.\n    at Paragraph',
+      'Each child in a list should have a unique "key" prop.\n\nCheck the render method of `Items`. See https://react.dev/link/warning-keys for more information.',
+      "Warning: Invalid DOM property `class`. Did you mean `className`?\n    at span",
+      "Invalid DOM property `class`. Did you mean `className`?",
+      "Couldn't load the products: 503",
+      "  [Unlayer] not at the start",
+    ]) {
+      expect(level(message), message).toEqual(["warning", "warning"]);
+    }
+  });
+
   it("lists the template's own compatibility issues to check, with their lines and clients, and links at their level", () => {
     const clients = [
       { client: "outlook.windows", label: "Outlook (Windows)", support: "none" as const, notes: [] },
diff --git a/packages/preview/ui/hooks/useSelectedTemplate.ts b/packages/preview/ui/hooks/useSelectedTemplate.ts
index 99954ad5..0f5e8b11 100644
--- a/packages/preview/ui/hooks/useSelectedTemplate.ts
+++ b/packages/preview/ui/hooks/useSelectedTemplate.ts
@@ -9,7 +9,13 @@ const PREFIX = "/preview/";
  */
 function currentTemplate(): string | undefined {
   const where = STATIC ? window.location.hash.replace(/^#/, "") : window.location.pathname;
-  return where.startsWith(PREFIX) ? decodeURIComponent(where.slice(PREFIX.length)) : undefined;
+  if (!where.startsWith(PREFIX)) return undefined;
+  try {
+    return decodeURIComponent(where.slice(PREFIX.length));
+  } catch {
+    // A URL that doesn't decode (/preview/%) names no template: the first one opens.
+    return undefined;
+  }
 }
 
 /** The selected template, kept in the URL (/preview/billing/receipt.tsx) so reloads and links keep it. */