diff --git a/.changeset/typed-fields-renderer.md b/.changeset/typed-fields-renderer.md
new file mode 100644
index 00000000..bd991c15
--- /dev/null
+++ b/.changeset/typed-fields-renderer.md
@@ -0,0 +1,13 @@
+---
+"@cloudhal/astro-renderer": minor
+"@cloudhal/core-ts": minor
+"@cloudhal/cli": minor
+---
+
+Typed custom fields, step 6 (RFC-0041 §9 / ADR-0043): renderer and themes. Additive only: `entry.fields` still means exactly what is stored, and themes copied before this release build and render as before (a frozen 0.4.0 theme joins the compat test).
+
+- **`GraphSource.entryFields(entry, options?)`** on live and snapshot sources (and `entryFields(source, entry, options?)` from `@cloudhal/astro-renderer/fields` for any source): an entry's typed fields as a theme draws them, by key in definition order. Values are resolved by the language rules (a translation's empty localized field reads the original's, `fromOriginal`; non-localized fields come from the translation group's original; language editions own their values), labelled in the page's language and made safe: rich text as HTML from the article body's markdown pipeline (raw HTML escaped, `safeHref` on links), URLs through `safeHref` (dropped when unsafe), images as `<img>` attributes with the asset's alt in the page's language, everything else as formatted text. Also `renderFields`, `hasShownFields`, and `resolveFields`, `formatFieldValue`, `fieldLabel`, `fieldHelp`, `optionLabel` re-exported.
+- **`formatFieldValue(value, def, { locale, defaultLocale?, timeZone?, words? })`** in `@cloudhal/core-ts/fields`: a value as plain text with `Intl` (numbers, dates that never shift a day, instants in their own zone, option labels as a list, yes/no words).
+- **`EntryFields.astro`** in `@cloudhal/astro-renderer/components`: a plain, unstyled `<dl class="ch-fields">` of the fields that have a value, with `data-field` / `data-type` hooks for themes; nothing at all when none has one.
+- **Blog starter:** articles of collections with fields show a "Details" list under the cover (English, Turkish and Japanese words). Entries of collections without definitions render byte for byte as before.
+- New guide: `docs/guides/fields.md` (defining fields in Studio, MCP, the API and the CLI; operations; languages; theme API; security).
diff --git a/AGENTS.md b/AGENTS.md
index ce3e5f58..1fca32fa 100644
--- a/AGENTS.md
+++ b/AGENTS.md
@@ -27,9 +27,9 @@ pnpm i18n:export / pnpm i18n:import [--locale xx]  # translations as nested ICU
 - `packages/core-contracts/src/generated/`, `crates/cloudhal-schema/src/generated/` — generated; never edit.
 - `packages/core-contracts/fixtures/{valid,invalid}/<schema>/` — golden fixtures used by both languages.
 - `packages/storage` — `SqlDriver`/`BlobStore` + adapters (`sqlite`, `d1`, `do-sqlite`, `fs`, `r2`; `SqlBlobStore`, `LayeredBlobStore`, `FetcherBlobStore` at the root) + migrations (`migrations/*.ts`, plain SQL). Conformance suites in `src/testing.ts`.
-- `packages/core-ts` — `SiteGraphStore` (CAS on `rev`, snapshots, diff, publish, rollback). Behavioural suite in `src/testing.ts` runs on sqlite and Miniflare D1. `./local` opens the offline store; `seedStarterSite` seeds a demo. `./surfaces` is RFC-0020's generative UI: the catalog (primitives + block types), eval-free surface checks, bindings, repairs, JSON Patch (`patchPage`), `catalogPrompt`; `./interop` converts A2UI v0.9 and json-render to and from surfaces; `./design` is RFC-0021's DESIGN.md lint and guidance. `search.ts` is RFC-0019's FTS5 site search (index written with the publish batch; articles, pages, terms and authors, RFC-0029); `search-provider.ts` is RFC-0029's `SearchProvider` (`fts5`, `memory`, `withFallback`), set with `SiteGraphStoreOptions.search`; `search-ai.ts` is the experimental Cloudflare AI Search provider (`hybridProvider`, `searchProviderFromEnv`, `cloudhal.json` `search`, docs/guides/search.md).
+- `packages/core-ts` — `SiteGraphStore` (CAS on `rev`, snapshots, diff, publish, rollback). Behavioural suite in `src/testing.ts` runs on sqlite and Miniflare D1. `./local` opens the offline store; `seedStarterSite` seeds a demo. `./surfaces` is RFC-0020's generative UI: the catalog (primitives + block types), eval-free surface checks, bindings, repairs, JSON Patch (`patchPage`), `catalogPrompt`; `./interop` converts A2UI v0.9 and json-render to and from surfaces; `./design` is RFC-0021's DESIGN.md lint and guidance. `./fields` is RFC-0041's typed custom fields (definition and value checks, `resolveFields`, `formatFieldValue`, the agents' JSON Schema, the conversion table); `src/fields-operations/` runs rename/retype/localize/remove. `search.ts` is RFC-0019's FTS5 site search (index written with the publish batch; articles, pages, terms and authors, RFC-0029); `search-provider.ts` is RFC-0029's `SearchProvider` (`fts5`, `memory`, `withFallback`), set with `SiteGraphStoreOptions.search`; `search-ai.ts` is the experimental Cloudflare AI Search provider (`hybridProvider`, `searchProviderFromEnv`, `cloudhal.json` `search`, docs/guides/search.md).
 - `packages/schedules` — RFC-0008: time model (only `temporal-polyfill/implementation`, `now` injected, never `Temporal.Now`), RRULE subset, release model (`rl1:`), automation/run state, taint and budgets, `runDue`; `./sql` is `SqlScheduleStore`, `./engine` the Temporal-free part core-ts and the site Worker use. Worker-safe; conformance suites in `src/testing.ts` on sqlite and Miniflare D1.
-- `packages/astro-renderer` — `GraphSource` (live/snapshot), `cloudhal()` integration (virtual config + dev route-cache watcher), `.astro` section components (`Surface.astro` for RFC-0020 surfaces; `./surfaces` renders them, `./kit` has the table of contents and reading time). Routes live in starters, not here.
+- `packages/astro-renderer` — `GraphSource` (live/snapshot), `cloudhal()` integration (virtual config + dev route-cache watcher), `.astro` section components (`Surface.astro` for RFC-0020 surfaces; `./surfaces` renders them, `./kit` has the table of contents and reading time; `./fields` and `EntryFields.astro` render typed field values, RFC-0041). Routes live in starters, not here.
 - `packages/cli` — the `cloudhal` CLI (`init`, `dev`, `studio`, `mcp`, `deploy`, `push`, `pull`, …; every command is in `src/cli/help.ts`, which `cloudhal --help` prints and the docs site's CLI reference is generated from); TS bin run by Node 24 type stripping. `src/cli.ts` parses flags and dispatches through `COMMANDS`, built from `src/cli/commands-{local,remote,content,ops,site}.ts` (a new command is one handler plus one line in `src/cli/help.ts`). E2E test spawns the bin (Astro disables dev middleware under `VITEST`). Cloudflare tests run both Workers on workerd via wrangler's `createTestHarness`; test files run serially (shared starter caches).
 - `packages/cloudflare` — the admin Worker (`createAdminWorker`); `./playground` is RFC-0036's playground Worker (`createPlaygroundWorker`, the `PlaygroundSite` Durable Object, signed session cookies). Generated entries must import `@cloudhal/cloudflare/workerd-prelude` first (ADR-0012).
 - `packages/agent-runtime` / `packages/mcp-server` — policy, skills, audit; MCP tools and transports (ADR-0011). `@cloudhal/mcp-server/render` is RFC-0021's `render_page` core: a small DevTools client, the in-page checks and limits; the CLI drives local Chrome with it (`render-chrome.ts`), the admin Worker Browser Rendering (`browser-render.ts`).
diff --git a/apps/docs/src/lib/site-pages.ts b/apps/docs/src/lib/site-pages.ts
index 1ea3875e..36d139fa 100644
--- a/apps/docs/src/lib/site-pages.ts
+++ b/apps/docs/src/lib/site-pages.ts
@@ -86,6 +86,7 @@ const docsIndex: SitePage = {
 ## Guides
 
 - [Search](/docs/guides/search), [schedules](/docs/guides/schedules), [comments](/docs/guides/comments)
+- [Typed custom fields](/docs/guides/fields): definitions, operations, languages and themes
 - [Several sites in one deployment](/docs/guides/multi-site)
 - [Analytics and privacy](/docs/guides/analytics-privacy)
 - [Translations with Weblate](/docs/guides/translations-weblate)
diff --git a/docs/guides/fields.md b/docs/guides/fields.md
new file mode 100644
index 00000000..928e2509
--- /dev/null
+++ b/docs/guides/fields.md
@@ -0,0 +1,124 @@
+# Typed custom fields: a guide for site owners and theme authors
+
+A collection can declare **typed fields**: an event has a venue, a start time and a ticket link; a job has a deadline and a salary range. Agents fill them through a JSON Schema instead of guessing, people get a form in Studio, and themes can rely on every value being there in the right shape.
+
+The design and its reasons are in [RFC-0041](../rfcs/0041-typed-custom-fields.md) and [ADR-0043](../adr/0043-typed-custom-fields.md).
+
+## What a field is
+
+Each field has a **key** (lower camelCase, like `startsAt`), **labels** per language (with optional help text), a **type**, and a choice of whether it is **localized**. Definitions live in the site's collection settings, in form order, at most 30 per collection and 200 per site. Values live in each entry's `fields` object under the key.
+
+| Type | Value | Shown on the site as |
+|---|---|---|
+| `text` | a string up to `maxLength` (5,000); `multiline` allows line breaks | escaped text |
+| `richText` | Cloudhal Markdown, up to 50,000 characters | HTML from the same Markdown pipeline as article bodies |
+| `number` | a number; optional `integer`, `minimum`, `maximum` | formatted for the reader's language (`1,234.5`, `1.234,5`) |
+| `boolean` | `true` / `false` | the theme's words for yes and no |
+| `date` | a calendar day, `YYYY-MM-DD` (never shifts across time zones) | a long date in the reader's language |
+| `datetime` | `{ "at": "2026-11-05T16:30:00Z", "timeZone": "Europe/Istanbul" }` | the date and time in the value's own zone ("7:30 PM GMT+3") |
+| `url` | `https:`, `http:`, `mailto:`, `tel:`, a site-relative path or a `#fragment` | a link |
+| `image` | an image asset of the same site (`asset_…`) | an `<img>` with the asset's alt text in the reader's language |
+| `select` | one of the field's options, or a list of them with `multiple` | the options' labels in the reader's language |
+
+A field can be **required to publish** (`requiredToPublish`, every type but `boolean`): drafts save without it, but an entry cannot go to review or be published while the value is missing. Text and rich-text fields marked **searchable** add their words to site search from the next publish on (off by default, so internal notes never reach search snippets; see the [search guide](search.md)).
+
+Collections without definitions keep `fields` as free-form JSON, exactly as before. Once a collection has definitions, new keys without a definition are refused (keys stored earlier are kept).
+
+## Defining fields
+
+- **Studio:** open the collection's settings, then **Fields**. Add fields (the key follows the label until you save), reorder them, and edit labels, help, limits and options. Only people who may change site settings can edit fields. Entries of that collection then get a **Fields** card in the editor, one control per type.
+- **Agents (MCP):** `list_collections` returns each collection's `fields` and `fieldsSchema` (the JSON Schema of the values, with labels and help in the caller's language). `update_collection` changes definitions, and `create_entry` / `update_entry` take `fields` (`null` removes a value). Definition changes always wait for a person who may change site settings, in every mode.
+- **API:** `PUT /api/sites/:siteId/collections/:key` with `fields` in the settings; entry routes take `fields` like any other property. Invalid values answer `422 invalid_fields` with one issue per problem (`fields/startsAt/at`).
+- **Files:** definitions travel in the site node, values in entries, so `cloudhal push`/`pull` and archives carry them unchanged.
+
+### Changes that touch values: field operations
+
+Adding fields, reordering, editing labels and help, adding options and toggling `multiline`, `searchable` or `requiredToPublish` are plain edits. A plain edit can never lose a value, so these changes are **operations** instead:
+
+| Change | Studio | CLI | MCP |
+|---|---|---|---|
+| rename a key | the field's menu, **Rename…** | `cloudhal fields rename <collection> <from> <to>` | `rename_field` |
+| change the type | **Change type…** | `cloudhal fields retype <collection> <key> <type> [--options a,b] [--multiple] [--clear]` | `change_field_type` |
+| localized on/off | **Languages…** | `cloudhal fields localize <collection> <key> on\|off` | `set_field_localized` |
+| remove | **Remove…** | `cloudhal fields remove <collection> <key>` | `remove_field` |
+
+Each runs a **dry run** first (`--dry-run`): how many entries change, and which values move, convert or would be cleared. A type change converts values with a fixed table (text to rich text, number, select or link; any of those back to text; date to datetime at midnight in the site's time zone and back); values that do not convert block it unless you opt in to clearing them (`--clear`, `onInvalid: "clear"`). Every operation takes a snapshot first and can be reverted (`cloudhal fields revert <collection> <id>`). A long operation resumes where it stopped (`cloudhal fields continue`). Operations change the draft graph only; publish as usual.
+
+## Languages
+
+Each field decides once whether it is **localized**:
+
+- **Localized** (`localized: true`): every language version of an entry has its own value. When a translation has none, readers see the original's value (Studio shows it as a placeholder; themes get `fromOriginal: true`). Changing a localized value of the original marks its translations as needing an update, like body edits.
+- **Not localized** (`localized: false`): only the translation group's original holds the value, and every translation shows it. A translation cannot store its own different copy (`field_not_localized`). Changing it never makes translations stale. Machine translation never sends these values.
+- **Language editions** (an original in another site of the project): values are copied when the edition is made, and each site owns its own from then on.
+
+Labels, help and option labels are per language too. A site language without its own label uses the site's default language, then any.
+
+## Showing fields in a theme
+
+New sites created with `cloudhal init` show field values on entry pages automatically: the blog starter's article draws a **Details** list under the cover for collections with fields. Entries of collections without definitions render exactly as before. Themes copied before this release keep working unchanged; they simply do not show the values until you add the lines below.
+
+### `EntryFields`: the generic list
+
+```astro
+---
+import { EntryFields } from "@cloudhal/astro-renderer/components";
+// in your entry route, with `source`, `entry`, the page's `media` context and your theme's words
+const fields = await source.entryFields?.(entry, { media, words: { yes: "Yes", no: "No" } });
+---
+{fields && <EntryFields fields={fields} label="Details" />}
+```
+
+It draws a plain definition list of the fields that have a value, in definition order, and nothing at all when none does:
+
+```html
+<dl class="ch-fields" aria-label="Details">
+  <div class="ch-field" data-field="venue" data-type="text"><dt>Venue</dt><dd>Kadıköy Hall</dd></div>
+  <div class="ch-field" data-field="startsAt" data-type="datetime"><dt>Starts</dt><dd><time datetime="2026-11-05T16:30:00Z">November 5, 2026 at 7:30 PM GMT+3</time></dd></div>
+</dl>
+```
+
+It has no styles of its own. Style `.ch-fields`, `.ch-field[data-type="…"]` or one field with `[data-field="<key>"]`. Multi-line text fields carry `data-multiline` (give them `white-space: pre-line`), and values read from the original carry `data-from-original`.
+
+### Your own markup: `entryFields`
+
+`source.entryFields(entry, options)` (or `entryFields(source, entry, options)` from `@cloudhal/astro-renderer/fields`, for any source) returns every defined field by key, in definition order, ready to draw:
+
+| Property | What |
+|---|---|
+| `label`, `help` | in the page's language |
+| `empty` | nothing to show: no value, an unreadable one, an unsafe link or a missing image |
+| `text` | the value as plain text in the page's language; print it escaped |
+| `html` | `richText` only: sanitized HTML (render with `set:html`) |
+| `href` | `url` only: the checked link target |
+| `image` | `image` only: `<img>` attributes (`src`, `srcset`, `sizes`, `width`, `height`, `alt`, …) and `assetId` |
+| `datetime` | `date` and `datetime`: the machine-readable value for `<time datetime>` |
+| `value`, `def`, `fromOriginal` | the resolved value, its definition, and whether it came from the original |
+
+Options: `locale` (default: the entry's), `media` (the page's media context: assets, image transforms, placeholders), `timeZone` (show every `datetime` in one zone instead of its own), `words` (`{ yes, no }`), `sizes` (for image fields).
+
+```astro
+---
+const f = (await source.entryFields?.(entry, { media })) ?? {};
+---
+{f.startsAt && !f.startsAt.empty && <p class="when"><time datetime={f.startsAt.datetime}>{f.startsAt.text}</time></p>}
+{f.tickets?.href && <a class="cta" href={f.tickets.href}>{f.tickets.label}</a>}
+```
+
+### Lower-level helpers
+
+From `@cloudhal/astro-renderer` (re-exported from `@cloudhal/core-ts/fields`):
+
+- `resolveFields(site, entry, original?)`: the values a reader sees, applying the language rules above (pure; you load the original).
+- `formatFieldValue(value, def, { locale, defaultLocale?, timeZone?, words? })`: one value as plain text.
+- `fieldLabel(def, locale, defaultLocale)`, `fieldHelp(…)`, `optionLabel(def, value, locale, defaultLocale)`.
+
+`entry.fields` still holds exactly what is stored: no fallback, no formatting. Prefer `entryFields` for anything a reader sees.
+
+## Security notes
+
+- **Values are content, never markup.** Text is escaped. Rich text goes through the article body's Markdown pipeline: raw HTML is shown as text, links keep only safe schemes, and stored HTML is never written to a page.
+- **Links are checked twice:** on write (`https:`, `http:`, `mailto:`, `tel:`, relative, fragment) and again on render, so `javascript:` and `data:` links never reach a page; an unsafe stored value is dropped.
+- **Images** must be image assets of the same site, so a value can never point at another site's media or an outside URL, and a used asset cannot be deleted.
+- **Agents** see field values as data. Definitions cannot carry regular expressions, and every definition change and field operation waits for a person.
+- **Limits:** 30 fields per collection, 200 per site, 256 KB of values per entry, 50 options per select.
diff --git a/packages/astro-renderer/README.md b/packages/astro-renderer/README.md
index 6233addd..42fa9dc8 100644
--- a/packages/astro-renderer/README.md
+++ b/packages/astro-renderer/README.md
@@ -1,12 +1,13 @@
 # @cloudhal/astro-renderer
 
-Renders a Cloudhal Site Graph with Astro 7. Three pieces:
+Renders a Cloudhal Site Graph with Astro 7. The main pieces:
 
 | Export | What |
 |---|---|
 | `@cloudhal/astro-renderer/integration` | `cloudhal({ dataDir, siteId })` — exposes the project config as `virtual:cloudhal/config`, externalises the native SQLite module, and in dev watches the data directory to clear Astro's route cache when pages are added (Astro ≥6.3 caches `getStaticPaths()` across requests). |
 | `@cloudhal/astro-renderer/runtime` | `getSource(config)` — a `GraphSource`: **live** nodes in dev (drafts visible), a **snapshot** in builds (`CLOUDHAL_SOURCE=snapshot:<id>`). |
 | `@cloudhal/astro-renderer/components` | `Sections` dispatcher + `Hero`, `RichText`, `Image`, `ContentList` `.astro` components. Themes override any of them through the `components` prop. |
+| `@cloudhal/astro-renderer/fields` | Typed custom fields (RFC-0041 §9): `entryFields`, `renderFields`, `hasShownFields`, and `resolveFields`, `formatFieldValue`, `fieldLabel`, `fieldHelp`, `optionLabel` re-exported from `@cloudhal/core-ts/fields`. `EntryFields.astro` in `./components` draws them. |
 
 A page route in a starter looks like this:
 
@@ -30,6 +31,20 @@ const page = await source.pageByPath(Astro.params.path ? `/${Astro.params.path}`
 ## Theme-facing API stability
 `cloudhal init` copies `starters/blog/src` into each project, so a site keeps calling this package's exports (and `@cloudhal/core-ts`'s) as they were when it was created. Every export a theme imports is therefore a public API: never change its meaning under the same name. A breaking change keeps a deprecated fallback for the old call. In 0.3.11 `entryPath(entry)` became `entryPath(site, entry)` without one, and every site with an older theme copy rendered empty pages until 0.3.13 restored it. `packages/cli/test/old-theme-compat.test.ts` builds frozen copies of earlier starters (`packages/cli/test/fixtures/theme-v*/`) with today's packages. Add a new frozen copy when a release changes theme-facing APIs.
 
+### Typed custom fields (RFC-0041, added in 0.5.0)
+Additive; `entry.fields` still means exactly what is stored, and themes that never call these keep rendering as before (`theme-v0.4.0` in the compat test).
+
+| Export | Signature |
+|---|---|
+| `GraphSource.entryFields?` | `(entry: ContentEntry, options?: EntryFieldsOptions) => Promise<RenderedFields>` on `LiveSource` and `SnapshotSource` (optional on the interface, like `search?`) |
+| `entryFields` (`./fields`, `.`) | `(source: FieldsSource, entry: ContentEntry, options?: EntryFieldsOptions) => Promise<RenderedFields>`: the same for any source (`site()`, optional `entryById()` and `asset()`) |
+| `renderFields` | `(resolved: ResolvedFields, options: RenderFieldsOptions) => RenderedFields`: the pure step, for values you resolved yourself |
+| `hasShownFields` | `(fields: RenderedFields) => boolean` |
+| `resolveFields`, `formatFieldValue`, `fieldLabel`, `fieldHelp`, `optionLabel` | re-exported from `@cloudhal/core-ts/fields` |
+| `EntryFields` (`./components`) | `<EntryFields fields={…} label?="Details" class?="…" />`: a `<dl class="ch-fields">` of the fields with a value, nothing when none has one; no styles of its own |
+
+`EntryFieldsOptions`: `locale` (default: the entry's), `media` (the page's `MediaContext`), `timeZone`, `words` (`{ yes, no }`), `sizes`. Each `RenderedField` has `key`, `label`, `help?`, `empty`, `text` (escaped plain text), and per type `html` (rich text through the body's markdown pipeline), `href` (`safeHref`, dropped when unsafe), `image` (`imageAttributes` plus `assetId`, alt in the page's language) or `datetime`, plus `def`, `value` and `fromOriginal` from `resolveFields`. Theme guide: [`docs/guides/fields.md`](../../docs/guides/fields.md).
+
 ## Site analytics (RFC-0006)
 
 The renderer carries the site side of Cloudhal's cookie-less analytics (`@cloudhal/analytics`):
diff --git a/packages/astro-renderer/package.json b/packages/astro-renderer/package.json
index 8c5300be..32720b69 100644
--- a/packages/astro-renderer/package.json
+++ b/packages/astro-renderer/package.json
@@ -16,6 +16,7 @@
   "exports": {
     ".": "./src/index.ts",
     "./source": "./src/source.ts",
+    "./fields": "./src/fields.ts",
     "./routing": "./src/routing.ts",
     "./search": "./src/search.ts",
     "./seo": "./src/seo.ts",
@@ -110,6 +111,10 @@
         "types": "./dist/src/source.d.ts",
         "default": "./dist/src/source.js"
       },
+      "./fields": {
+        "types": "./dist/src/fields.d.ts",
+        "default": "./dist/src/fields.js"
+      },
       "./routing": {
         "types": "./dist/src/routing.d.ts",
         "default": "./dist/src/routing.js"
diff --git a/packages/astro-renderer/src/components/EntryFields.astro b/packages/astro-renderer/src/components/EntryFields.astro
new file mode 100644
index 00000000..fce66ffd
--- /dev/null
+++ b/packages/astro-renderer/src/components/EntryFields.astro
@@ -0,0 +1,43 @@
+---
+/**
+ * An entry's typed fields (RFC-0041 §9) as a plain definition list: one `dt`/`dd` pair per field
+ * with something to show, in definition order; nothing at all when no field has a value. Pass what
+ * `source.entryFields(entry, { locale, media })` (or `entryFields(source, entry, …)`) returns.
+ *
+ * Values are escaped text, except rich text (the body's markdown pipeline: raw HTML escaped, links
+ * through `safeHref`) and images (`imageAttributes`, the asset's alt in the page's language). No
+ * styles of its own: themes style `.ch-fields`, `.ch-field[data-type]` and `[data-field="<key>"]`.
+ */
+import type { RenderedFields } from "../fields.ts";
+
+interface Props {
+  fields: RenderedFields;
+  /** An accessible name for the list (e.g. "Details" in the page's language). */
+  label?: string;
+  /** Extra classes on the `dl`. */
+  class?: string;
+}
+const { fields, label, class: className } = Astro.props;
+const shown = Object.values(fields).filter((f) => !f.empty);
+const multiline = (f: (typeof shown)[number]) => f.def.type === "text" && f.def.multiline === true;
+---
+{shown.length > 0 && (
+  <dl class:list={["ch-fields", className]} aria-label={label}>
+    {shown.map((f) => (
+      <div class="ch-field" data-field={f.key} data-type={f.def.type} data-multiline={multiline(f) ? "" : undefined} data-from-original={f.fromOriginal ? "" : undefined}>
+        <dt>{f.label}</dt>
+        {f.html !== undefined ? (
+          <dd set:html={f.html} />
+        ) : f.href !== undefined ? (
+          <dd><a href={f.href}>{f.text}</a></dd>
+        ) : f.image ? (
+          <dd><img src={f.image.src} srcset={f.image.srcset} sizes={f.image.sizes} alt={f.image.alt} width={f.image.width || undefined} height={f.image.height || undefined} loading={f.image.loading} decoding={f.image.decoding} style={f.image.style} /></dd>
+        ) : f.datetime !== undefined ? (
+          <dd><time datetime={f.datetime}>{f.text}</time></dd>
+        ) : (
+          <dd>{f.text}</dd>
+        )}
+      </div>
+    ))}
+  </dl>
+)}
diff --git a/packages/astro-renderer/src/components/index.ts b/packages/astro-renderer/src/components/index.ts
index 08d9a1bd..cf5b315b 100644
--- a/packages/astro-renderer/src/components/index.ts
+++ b/packages/astro-renderer/src/components/index.ts
@@ -3,6 +3,7 @@ export { default as Body } from "./Body.astro";
 export { default as Comments } from "./Comments.astro";
 export { default as ContentList } from "./ContentList.astro";
 export { default as EntryArticle } from "./EntryArticle.astro";
+export { default as EntryFields } from "./EntryFields.astro";
 export { default as Hero } from "./Hero.astro";
 export { default as Image } from "./Image.astro";
 export { default as RichText } from "./RichText.astro";
diff --git a/packages/astro-renderer/src/fields.ts b/packages/astro-renderer/src/fields.ts
new file mode 100644
index 00000000..41d44dbb
--- /dev/null
+++ b/packages/astro-renderer/src/fields.ts
@@ -0,0 +1,201 @@
+/**
+ * Typed custom fields for themes (RFC-0041 §9 / ADR-0043). `entry.fields` keeps meaning exactly
+ * what is stored; this module gives themes the values a reader should see: resolved (§5: a
+ * translation's empty localized field reads the original's, non-localized fields always come from
+ * the translation group's original), labelled in the page's language and made safe to draw.
+ *
+ * - rich text: HTML from the body's markdown pipeline (raw HTML escaped, `safeHref` on every link,
+ *   `asset:` references resolved), never stored HTML;
+ * - URLs: through `safeHref`, dropped when unsafe;
+ * - images: `<img>` attributes from `imageAttributes`, with the asset's alt in the page's language;
+ * - everything else: `formatFieldValue` text, which themes print escaped.
+ *
+ * Worker-safe; the same function serves live and snapshot sources.
+ */
+import type { Asset, ContentEntry, Site } from "@cloudhal/core-contracts";
+import {
+  type FormatFieldOptions,
+  fieldHelp,
+  fieldLabel,
+  formatFieldValue,
+  hasFieldValue,
+  type ResolvedField,
+  type ResolvedFields,
+  resolveFields,
+} from "@cloudhal/core-ts/fields";
+import { renderMarkdown } from "./markdown.ts";
+import { type ImageAttributes, imageAttributes, type MediaContext } from "./media.ts";
+import { safeHref } from "./safe-urls.ts";
+
+export {
+  type FormatFieldOptions,
+  fieldHelp,
+  fieldLabel,
+  formatFieldValue,
+  optionLabel,
+  type ResolvedField,
+  type ResolvedFields,
+  resolveFields,
+} from "@cloudhal/core-ts/fields";
+
+/** An image field's picture: `<img>` attributes plus the asset it shows. */
+export interface FieldImage extends ImageAttributes {
+  assetId: string;
+}
+
+/** One field as a theme draws it. */
+export interface RenderedField extends ResolvedField {
+  key: string;
+  /** The label in the page's language (then the site's default, then any, then the key). */
+  label: string;
+  help?: string;
+  /** Nothing to show: no value, an unreadable one, an unsafe URL or a missing image. */
+  empty: boolean;
+  /** The value as plain text in the page's language ("" when empty). Print it escaped. */
+  text: string;
+  /** `richText`: sanitized HTML from the body's markdown pipeline. */
+  html?: string;
+  /** `url`: the link target, checked by `safeHref`. */
+  href?: string;
+  /** `image`: the picture. */
+  image?: FieldImage;
+  /** `date` (`YYYY-MM-DD`) and `datetime` (the UTC instant): for `<time datetime>`. */
+  datetime?: string;
+}
+
+/** Every defined field of an entry by key, in definition order (`{}` without definitions). */
+export type RenderedFields = Record<string, RenderedField>;
+
+export interface EntryFieldsOptions {
+  /** The page's language (default: the entry's). Labels, formatting and image alt follow it. */
+  locale?: string;
+  /** The page's media context: assets for images and `asset:` links, transforms, placeholders. */
+  media?: MediaContext;
+  /** `datetime` values show in this zone (default: each value's own zone). */
+  timeZone?: string;
+  /** The words for yes/no fields (default: English). */
+  words?: FormatFieldOptions["words"];
+  /** `sizes` for image fields (default: the article column). */
+  sizes?: string;
+}
+
+/** What `entryFields` needs from a source: the site, the original by id, assets by id. */
+export interface FieldsSource {
+  site(): Promise<Site>;
+  entryById?(id: string): Promise<ContentEntry | undefined>;
+  asset?(id: string): Promise<Asset | undefined>;
+}
+
+export interface RenderFieldsOptions extends EntryFieldsOptions {
+  locale: string;
+  defaultLocale: string;
+  /** Assets by id (image fields; rich text's `asset:` links when `media.assets` is absent). */
+  assets?: ReadonlyMap<string, Asset> | undefined;
+}
+
+const SIZES = "(min-width: 48rem) 48rem, 100vw";
+
+/** A translation in this site reads its group's original (RFC-0041 §5). */
+function originalId(entry: ContentEntry): string | undefined {
+  const t = entry.translation;
+  return t && t.group !== entry.id && t.source?.siteId === undefined ? t.group : undefined;
+}
+
+function shape(field: ResolvedField, o: RenderFieldsOptions): Partial<RenderedField> {
+  const { def, value } = field;
+  const ctx: MediaContext = {
+    ...o.media,
+    locale: o.locale,
+    defaultLocale: o.defaultLocale,
+    assets: o.media?.assets ?? o.assets,
+  };
+  if (def.type === "richText" && typeof value === "string")
+    return { html: renderMarkdown(value, ctx) };
+  if (def.type === "url" && typeof value === "string") {
+    const href = safeHref(value);
+    return href ? { href, text: href } : { empty: true };
+  }
+  if (def.type === "image" && typeof value === "string") {
+    const asset = ctx.assets?.get(value) ?? o.assets?.get(value);
+    if (!asset?.mediaType.startsWith("image/")) return { empty: true };
+    const image = imageAttributes(asset, undefined, {
+      locale: o.locale,
+      defaultLocale: o.defaultLocale,
+      transform: ctx.transform ?? "none",
+      sizes: o.sizes ?? SIZES,
+      ...(ctx.preview ? { preview: true } : {}),
+      ...(ctx.budget ? { budget: ctx.budget } : {}),
+    });
+    return { image: { ...image, assetId: asset.id }, text: image.alt };
+  }
+  if (def.type === "date" && typeof value === "string") return { datetime: value };
+  if (def.type === "datetime" && typeof value === "object" && value !== null)
+    return { datetime: (value as { at: string }).at };
+  return {};
+}
+
+/** Resolved fields made ready to draw (pure; `entryFields` loads what it needs and calls this). */
+export function renderFields(resolved: ResolvedFields, o: RenderFieldsOptions): RenderedFields {
+  const out: RenderedFields = {};
+  for (const [key, field] of Object.entries(resolved)) {
+    const help = fieldHelp(field.def, o.locale, o.defaultLocale);
+    const base: RenderedField = {
+      ...field,
+      key,
+      label: fieldLabel(field.def, o.locale, o.defaultLocale),
+      ...(help ? { help } : {}),
+      empty: true,
+      text: "",
+    };
+    if (!hasFieldValue(field.value)) {
+      out[key] = base;
+      continue;
+    }
+    const text = formatFieldValue(field.value, field.def, {
+      locale: o.locale,
+      defaultLocale: o.defaultLocale,
+      timeZone: o.timeZone,
+      words: o.words,
+    });
+    const extra = shape(field, o);
+    const shown: RenderedField = { ...base, empty: false, text, ...extra };
+    out[key] = shown.empty ? { ...base, value: undefined } : shown;
+  }
+  return out;
+}
+
+/**
+ * An entry's typed fields as a theme draws them (RFC-0041 §9), from any source: loads the site,
+ * the translation group's original when the entry is a translation in this site, and the assets
+ * of image fields (from `media.assets` when given).
+ */
+export async function entryFields(
+  source: FieldsSource,
+  entry: ContentEntry,
+  options: EntryFieldsOptions = {},
+): Promise<RenderedFields> {
+  const site = await source.site();
+  if (!site.collections?.[entry.collection]?.fields) return {};
+  const id = originalId(entry);
+  const original = id && source.entryById ? await source.entryById(id) : undefined;
+  const resolved = resolveFields(site, entry, original);
+  const assets = new Map<string, Asset>();
+  for (const field of Object.values(resolved)) {
+    const v = field.value;
+    if (field.def.type !== "image" || typeof v !== "string" || options.media?.assets?.has(v))
+      continue;
+    const asset = source.asset ? await source.asset(v) : undefined;
+    if (asset) assets.set(v, asset);
+  }
+  return renderFields(resolved, {
+    ...options,
+    locale: options.locale ?? entry.locale,
+    defaultLocale: site.defaultLocale,
+    assets,
+  });
+}
+
+/** True when at least one field has something to show (themes skip the whole list otherwise). */
+export function hasShownFields(fields: RenderedFields): boolean {
+  return Object.values(fields).some((f) => !f.empty);
+}
diff --git a/packages/astro-renderer/src/index.ts b/packages/astro-renderer/src/index.ts
index 0d10027c..f371c690 100644
--- a/packages/astro-renderer/src/index.ts
+++ b/packages/astro-renderer/src/index.ts
@@ -3,10 +3,12 @@
  *
  * - `cloudhal()` integration (`./integration`) exposes the project config as `virtual:cloudhal/config`.
  * - `getSource(config)` (`./runtime`) returns a `GraphSource`: live nodes in dev, a snapshot in builds.
- * - `.astro` components (`./components`): `Sections` dispatcher + Hero/RichText/Image/ContentList.
+ * - `.astro` components (`./components`): `Sections` dispatcher + Hero/RichText/Image/ContentList,
+ *   `EntryFields` (RFC-0041's typed fields; values from `./fields`).
  */
 export * from "./archive.ts";
 export * from "./cache-tags.ts";
+export * from "./fields.ts";
 export * from "./gates.ts";
 export { type CloudhalRendererConfig, cloudhal } from "./integration.ts";
 export { renderBody, renderEntryArticle, renderMarkdown, safeHref } from "./markdown.ts";
diff --git a/packages/astro-renderer/src/source-helpers.ts b/packages/astro-renderer/src/source-helpers.ts
new file mode 100644
index 00000000..e9190036
--- /dev/null
+++ b/packages/astro-renderer/src/source-helpers.ts
@@ -0,0 +1,48 @@
+/** Small pure helpers of `source.ts`: ordering, visibility and filter compilation. */
+import type { ContentEntry, Page, Taxonomy, Term } from "@cloudhal/core-contracts";
+import { termName } from "@cloudhal/core-ts";
+import { parseFilter, resolveFilter } from "@cloudhal/core-ts/filter";
+
+export function byNewest(a: ContentEntry, b: ContentEntry): number {
+  return (b.publishedAt ?? b.createdAt).localeCompare(a.publishedAt ?? a.createdAt);
+}
+
+export function byPosition(locale: string) {
+  return (a: Term, b: Term) =>
+    (a.position ?? Number.MAX_SAFE_INTEGER) - (b.position ?? Number.MAX_SAFE_INTEGER) ||
+    termName(a, locale).localeCompare(termName(b, locale)) ||
+    a.slug.localeCompare(b.slug);
+}
+
+export function shown(term: Term, includeDrafts: boolean): boolean {
+  return includeDrafts
+    ? term.status !== "retired"
+    : term.status === "active" && term.visibility === "public";
+}
+
+export function termFilter(key: string, slug: string, descendants: boolean): string {
+  return `${key}:${slug}${descendants ? ">*" : ""}`;
+}
+
+/** Resolves a filter against a vocabulary; unknown terms match nothing and are logged. */
+export function compile(filter: string, taxonomies: Taxonomy[], terms: Term[]) {
+  const resolved = resolveFilter(
+    parseFilter(filter),
+    { taxonomies, terms },
+    { unknown: "match-nothing" },
+  );
+  if (resolved.unknown.length > 0)
+    console.warn(
+      `cloudhal: filter "${filter}" names unknown terms: ${resolved.unknown.join(", ")}`,
+    );
+  return resolved;
+}
+
+export function visible<T extends { status: Page["status"] }>(
+  nodes: T[],
+  includeDrafts: boolean,
+): T[] {
+  return includeDrafts
+    ? nodes.filter((n) => n.status !== "archived")
+    : nodes.filter((n) => n.status === "published");
+}
diff --git a/packages/astro-renderer/src/source.ts b/packages/astro-renderer/src/source.ts
index 7f3805a1..939c8f61 100644
--- a/packages/astro-renderer/src/source.ts
+++ b/packages/astro-renderer/src/source.ts
@@ -11,13 +11,7 @@ import type {
   Term,
 } from "@cloudhal/core-contracts";
 import type { RedirectMatch, SearchKind, SearchResults, SiteGraphStore } from "@cloudhal/core-ts";
-import {
-  matchRedirect,
-  redirectLocale,
-  searchDocuments,
-  searchRows,
-  termName,
-} from "@cloudhal/core-ts";
+import { matchRedirect, redirectLocale, searchDocuments, searchRows } from "@cloudhal/core-ts";
 import {
   gateInstants,
   hasGates,
@@ -25,9 +19,11 @@ import {
   isAvailable,
   nextInstant,
 } from "@cloudhal/core-ts/availability";
-import { matches, parseFilter, resolveFilter } from "@cloudhal/core-ts/filter";
+import { matches } from "@cloudhal/core-ts/filter";
 import { assetRefsOf } from "@cloudhal/core-ts/media";
+import { type EntryFieldsOptions, entryFields, type RenderedFields } from "./fields.ts";
 import { type Navigation, type NavigationOptions, navigationFor } from "./navigation.ts";
+import { byNewest, byPosition, compile, shown, termFilter, visible } from "./source-helpers.ts";
 
 /**
  * What a renderer needs from a site, independent of whether it reads live nodes (dev) or a
@@ -112,6 +108,14 @@ export interface GraphSource {
    * entries it shows, drafts included. Optional for sources that predate search.
    */
   search?(query: string, options?: SourceSearchOptions): Promise<SearchResults>;
+  /**
+   * RFC-0041 §9: an entry's typed fields as a theme draws them: resolved (a translation reads the
+   * original's values where §5 says so), labelled in `options.locale` (default: the entry's), rich
+   * text as sanitized HTML, URLs through `safeHref`, images as `<img>` attributes. `{}` when the
+   * collection has no definitions. Optional for sources that predate fields; any source works
+   * with the standalone `entryFields(source, entry)`.
+   */
+  entryFields?(entry: ContentEntry, options?: EntryFieldsOptions): Promise<RenderedFields>;
 }
 
 export interface SourceSearchOptions {
@@ -123,47 +127,6 @@ export interface SourceSearchOptions {
   kinds?: readonly SearchKind[];
 }
 
-function byNewest(a: ContentEntry, b: ContentEntry): number {
-  return (b.publishedAt ?? b.createdAt).localeCompare(a.publishedAt ?? a.createdAt);
-}
-
-function byPosition(locale: string) {
-  return (a: Term, b: Term) =>
-    (a.position ?? Number.MAX_SAFE_INTEGER) - (b.position ?? Number.MAX_SAFE_INTEGER) ||
-    termName(a, locale).localeCompare(termName(b, locale)) ||
-    a.slug.localeCompare(b.slug);
-}
-
-function shown(term: Term, includeDrafts: boolean): boolean {
-  return includeDrafts
-    ? term.status !== "retired"
-    : term.status === "active" && term.visibility === "public";
-}
-
-function termFilter(key: string, slug: string, descendants: boolean): string {
-  return `${key}:${slug}${descendants ? ">*" : ""}`;
-}
-
-/** Resolves a filter against a vocabulary; unknown terms match nothing and are logged. */
-function compile(filter: string, taxonomies: Taxonomy[], terms: Term[]) {
-  const resolved = resolveFilter(
-    parseFilter(filter),
-    { taxonomies, terms },
-    { unknown: "match-nothing" },
-  );
-  if (resolved.unknown.length > 0)
-    console.warn(
-      `cloudhal: filter "${filter}" names unknown terms: ${resolved.unknown.join(", ")}`,
-    );
-  return resolved;
-}
-
-function visible<T extends { status: Page["status"] }>(nodes: T[], includeDrafts: boolean): T[] {
-  return includeDrafts
-    ? nodes.filter((n) => n.status !== "archived")
-    : nodes.filter((n) => n.status === "published");
-}
-
 /**
  * Reads the current nodes on every call. Drafts are included so authors can preview them in dev,
  * and so are gated nodes (a preview shows embargoed and expired content, RFC-0008 §7.3). Without
@@ -272,6 +235,10 @@ export class LiveSource implements GraphSource {
       : undefined;
   }
 
+  entryFields(entry: ContentEntry, options?: EntryFieldsOptions): Promise<RenderedFields> {
+    return entryFields(this, entry, options);
+  }
+
   taxonomies(): Promise<Taxonomy[]> {
     return this.#store.listTaxonomies(this.#siteId);
   }
@@ -698,6 +665,10 @@ export class SnapshotSource implements GraphSource {
     return (await this.#current()).entries.find((e) => e.id === id);
   }
 
+  entryFields(entry: ContentEntry, options?: EntryFieldsOptions): Promise<RenderedFields> {
+    return entryFields(this, entry, options);
+  }
+
   async taxonomies(): Promise<Taxonomy[]> {
     return (await this.#current()).taxonomies;
   }
diff --git a/packages/astro-renderer/test/fields.test.ts b/packages/astro-renderer/test/fields.test.ts
new file mode 100644
index 00000000..ceb998e9
--- /dev/null
+++ b/packages/astro-renderer/test/fields.test.ts
@@ -0,0 +1,275 @@
+/**
+ * RFC-0041 §9: typed fields for themes. `entryFields` resolves (§5 localization), labels, formats
+ * and makes values safe to draw; live and snapshot sources agree. `EntryFields.astro` is covered
+ * by the CLI's starter build (`packages/cli/test/e2e.test.ts`).
+ */
+import type {
+  Actor,
+  ContentEntry,
+  FieldDefinition,
+  Site,
+  Translation,
+} from "@cloudhal/core-contracts";
+import { SiteGraphStore } from "@cloudhal/core-ts";
+import { makeJpeg } from "@cloudhal/core-ts/media/fixtures";
+import { MemoryBlobStore } from "@cloudhal/storage";
+import { BetterSqlite3Driver } from "@cloudhal/storage/sqlite";
+import { beforeEach, describe, expect, it } from "vitest";
+import {
+  entryFields,
+  formatFieldValue,
+  hasShownFields,
+  type RenderedFields,
+  renderFields,
+  resolveFields,
+} from "../src/fields.ts";
+import * as root from "../src/index.ts";
+import { LiveSource, SnapshotSource } from "../src/source.ts";
+
+const person: Actor = { kind: "human", id: "user_01HZX8K3Q9CD", name: "Halil" };
+const L = (en: string, tr?: string) => ({
+  en: { label: en },
+  ...(tr ? { tr: { label: tr } } : {}),
+});
+
+const FIELDS: [FieldDefinition, ...FieldDefinition[]] = [
+  { key: "venue", type: "text", labels: L("Venue", "Mekan"), localized: true },
+  { key: "notes", type: "text", labels: L("Notes"), localized: true, multiline: true },
+  { key: "price", type: "number", labels: L("Price", "Fiyat"), localized: false },
+  { key: "online", type: "boolean", labels: L("Online"), localized: false },
+  { key: "deadline", type: "date", labels: L("Deadline"), localized: false },
+  { key: "startsAt", type: "datetime", labels: L("Starts"), localized: false },
+  { key: "ticketUrl", type: "url", labels: L("Tickets"), localized: true },
+  { key: "poster", type: "image", labels: L("Poster"), localized: false },
+  { key: "agenda", type: "richText", labels: L("Agenda"), localized: true },
+  {
+    key: "format",
+    type: "select",
+    labels: L("Format"),
+    localized: false,
+    multiple: true,
+    options: [
+      { value: "talk", labels: { en: "Talk", tr: "Konuşma" } },
+      { value: "workshop", labels: { en: "Workshop", tr: "Atölye" } },
+    ],
+  },
+];
+const STARTS = { at: "2026-11-05T16:30:00Z", timeZone: "Europe/Istanbul" };
+
+const textOf = (f: RenderedFields) =>
+  Object.fromEntries(Object.entries(f).map(([k, v]) => [k, v.empty ? null : v.text]));
+
+describe("entryFields", () => {
+  let store: SiteGraphStore;
+  let site: Site;
+  let posterId: string;
+
+  const entry = (extra: Partial<ContentEntry>) =>
+    store.createContentEntry({
+      siteId: site.id,
+      collection: "events",
+      slug: "launch",
+      locale: "en",
+      status: "published",
+      title: "Launch",
+      body: { format: "markdown", value: "Body" },
+      fields: {},
+      tags: [],
+      author: person,
+      ...extra,
+    } as never) as Promise<ContentEntry>;
+
+  async function translate(original: ContentEntry, fields: Record<string, unknown>) {
+    const member = (await store.translationGroup(site, original.id)).members.find(
+      (m) => m.id === original.id,
+    );
+    const translation = {
+      group: original.id,
+      method: "human",
+      source: { id: original.id, locale: "en", rev: original.rev, hash: member?.hash as string },
+    } as Translation;
+    return entry({ locale: "tr", translation, fields });
+  }
+
+  beforeEach(async () => {
+    store = new SiteGraphStore({
+      sql: await BetterSqlite3Driver.open(":memory:"),
+      blobs: new MemoryBlobStore(),
+    });
+    await store.init();
+    const project = await store.createProject({
+      name: "Fields",
+      slug: "fields",
+      ownerId: person.id,
+      siteIds: [],
+    });
+    site = await store.createSite({
+      projectId: project.id,
+      name: "Fields",
+      slug: "fields",
+      defaultLocale: "en",
+      locales: ["en", "tr"],
+      domains: [],
+      pageIds: [],
+      theme: { name: "blog" },
+      collections: { posts: {}, events: { fields: FIELDS } },
+    });
+    const { asset } = await store.ingestAsset({
+      siteId: site.id,
+      bytes: makeJpeg({ width: 40, height: 30 }),
+      filename: "poster.jpg",
+      uploadedBy: person,
+      source: { kind: "upload" },
+    });
+    posterId = (await store.updateAsset({ ...asset, alt: { en: "The poster", tr: "Afiş" } })).id;
+  });
+
+  const full = () => ({
+    venue: "Kadıköy Hall",
+    notes: "Doors at 7\nBring ID",
+    price: 1234.5,
+    online: false,
+    deadline: "2026-02-28",
+    startsAt: STARTS,
+    ticketUrl: "https://example.com/tickets",
+    poster: posterId,
+    agenda: "## Plan\n\n- Talks\n- **Lunch**",
+    format: ["talk", "workshop"],
+  });
+
+  it("formats every type in the entry's language, in definition order", async () => {
+    const e = await entry({ fields: full() });
+    const f = await new LiveSource(store, site.id).entryFields(e);
+    expect(Object.keys(f)).toEqual(FIELDS.map((d) => d.key));
+    expect(textOf(f)).toMatchObject({
+      venue: "Kadıköy Hall",
+      notes: "Doors at 7\nBring ID",
+      price: "1,234.5",
+      online: "No",
+      deadline: "February 28, 2026",
+      ticketUrl: "https://example.com/tickets",
+      poster: "The poster",
+      format: "Talk and Workshop",
+    });
+    expect(f.startsAt?.text).toMatch(/November 5, 2026.* 7:30\sPM GMT\+3/);
+    expect(f.startsAt?.datetime).toBe(STARTS.at);
+    expect(f.deadline?.datetime).toBe("2026-02-28");
+    expect(f.venue?.label).toBe("Venue");
+    expect(f.agenda?.html).toContain('<h2 id="plan">Plan</h2>');
+    expect(f.agenda?.html).toContain("<strong>Lunch</strong>");
+    expect(f.ticketUrl?.href).toBe("https://example.com/tickets");
+    expect(f.poster?.image).toMatchObject({ assetId: posterId, alt: "The poster", width: 40 });
+    expect(f.poster?.image?.src).toMatch(/^\/media\//);
+    expect(hasShownFields(f)).toBe(true);
+  });
+
+  it("is {} for collections without definitions, and skips empty values", async () => {
+    const post = await entry({ collection: "posts", fields: { anything: 1 } });
+    const live = new LiveSource(store, site.id);
+    expect(await live.entryFields(post)).toEqual({});
+    const sparse = await entry({ slug: "sparse", fields: { venue: "  " } });
+    const f = await live.entryFields(sparse);
+    expect(Object.values(f).every((x) => x.empty && x.text === "")).toBe(true);
+    expect(hasShownFields(f)).toBe(false);
+  });
+
+  it("drops unsafe values: script in rich text is escaped, javascript: links never render", async () => {
+    const e = await entry({
+      fields: {
+        agenda:
+          '<script>alert(1)</script>\n\n[x](javascript:alert(1)) <img src=x onerror="alert(1)">',
+        ticketUrl: "/tickets",
+      },
+    });
+    const f = await new LiveSource(store, site.id).entryFields(e);
+    const html = f.agenda?.html ?? "";
+    expect(html).not.toMatch(/<script|<img|href="javascript/i);
+    expect(html).toContain("&lt;img src=x onerror="); // raw HTML is text, never markup
+    // Values are checked on write; a stored unsafe URL (an import, an old value) is dropped here.
+    const resolved = resolveFields(site, e);
+    const def = resolved.ticketUrl?.def as FieldDefinition;
+    resolved.ticketUrl = { def, value: "java\tscript:alert(1)", fromOriginal: false };
+    const unsafe = renderFields(resolved, { locale: "en", defaultLocale: "en" });
+    expect(unsafe.ticketUrl).toMatchObject({ empty: true, text: "", value: undefined });
+    expect(unsafe.ticketUrl?.href).toBeUndefined();
+    expect(f.ticketUrl?.href).toBe("/tickets");
+  });
+
+  it("a translation: localized values its own or the original's, the rest from the original", async () => {
+    const original = await entry({ fields: full() });
+    const tr = await translate(original, { venue: "Kadıköy Salonu" });
+    const f = await new LiveSource(store, site.id).entryFields(tr);
+    expect(f.venue).toMatchObject({ text: "Kadıköy Salonu", fromOriginal: false, label: "Mekan" });
+    // Localized and empty here: the original's (RFC-0041 §5, `fromOriginal`).
+    expect(f.ticketUrl).toMatchObject({ href: "https://example.com/tickets", fromOriginal: true });
+    // Non-localized: always the original's, formatted for the translation's language.
+    expect(f.price).toMatchObject({ text: "1.234,5", fromOriginal: true, label: "Fiyat" });
+    expect(f.format?.text).toBe("Konuşma ve Atölye");
+    expect(f.poster?.image?.alt).toBe("Afiş");
+    expect(f.deadline?.text).toBe("28 Şubat 2026");
+  });
+
+  it("a language edition (original in another site) owns all its values", async () => {
+    const original = await entry({ fields: full() });
+    // Stored as a translation of an entry in another site of the project (RFC-0034): the
+    // source never reads that original, even when asked for one by id.
+    const edition = {
+      ...original,
+      id: "entry_01HZX8K3Q9ED",
+      locale: "tr",
+      fields: { price: 9 },
+      translation: {
+        group: original.id,
+        method: "human",
+        source: {
+          id: original.id,
+          siteId: "site_01HZX8K3Q9XX",
+          locale: "en",
+          rev: 1,
+          hash: "a".repeat(64),
+        },
+      } as Translation,
+    } as ContentEntry;
+    let asked = 0;
+    const f = await entryFields(
+      {
+        site: async () => site,
+        entryById: async () => {
+          asked++;
+          return original;
+        },
+      },
+      edition,
+    );
+    expect(asked).toBe(0);
+    expect(f.price).toMatchObject({ text: "9", fromOriginal: false });
+    expect(f.venue?.empty).toBe(true);
+  });
+
+  it("live and snapshot sources give the same fields", async () => {
+    const original = await entry({ fields: full() });
+    const tr = await translate(original, { notes: "Kapılar 7'de" });
+    const snap = await store.createSnapshot(site.id, {
+      actor: { kind: "system", id: "sys_test0001" },
+      reason: "manual",
+    });
+    const live = new LiveSource(store, site.id, { includeDrafts: false });
+    const frozen = await SnapshotSource.open(store, snap.id);
+    for (const e of [original, tr]) {
+      const a = await live.entryFields(e, { locale: e.locale });
+      const b = await frozen.entryFields(e, { locale: e.locale });
+      expect(b).toEqual(a);
+    }
+    // The standalone function works with any source shape (and the page's media context).
+    const media = { assets: new Map((await live.assets()).map((x) => [x.id, x])) };
+    expect(await entryFields(frozen, tr, { media })).toEqual(await frozen.entryFields(tr));
+  });
+
+  it("re-exports the field helpers themes import from the renderer", () => {
+    expect(root.resolveFields).toBe(resolveFields);
+    expect(root.formatFieldValue).toBe(formatFieldValue);
+    expect(typeof root.fieldLabel).toBe("function");
+    expect(typeof root.optionLabel).toBe("function");
+    expect(typeof root.entryFields).toBe("function");
+  });
+});
diff --git a/packages/cli/test/e2e.test.ts b/packages/cli/test/e2e.test.ts
index 73e145b0..f33db0cd 100644
--- a/packages/cli/test/e2e.test.ts
+++ b/packages/cli/test/e2e.test.ts
@@ -668,4 +668,144 @@ describe("cloudhal init → dev → snapshot → build", () => {
       await new Promise((r) => server.child.once("exit", r));
     }
   });
+
+  it("build shows typed fields on entries of collections that define them, and nothing else changes (RFC-0041 §9)", async () => {
+    const cfg = await readProjectConfig(projectDir);
+    const outDir = path.join(projectDir, "dist");
+    const read = (...p: string[]) => readFile(path.join(outDir, ...p), "utf8");
+    const article = (html: string) => html.match(/<article[\s\S]*?<\/article>/)?.[0] ?? "";
+    await snapshot({ projectDir, label: "before-fields", publish: true });
+    await spawnBuild(projectDir);
+    const before = article(await read("posts", "hello-world", "index.html"));
+    expect(before).toContain("Hello, world");
+
+    const local = await openLocalStore(path.join(projectDir, cfg.dataDir));
+    let site = await local.store.getSite(cfg.siteId);
+    if (!site) throw new Error("no site");
+    const label = (en: string, tr: string) => ({ en: { label: en }, tr: { label: tr } });
+    // the seed's required category applies to every collection: reuse hello-world's terms
+    const hello = (await local.store.listContentEntries(cfg.siteId, "posts")).find(
+      (e) => e.slug === "hello-world" && e.locale === "en",
+    );
+    const terms = hello?.terms ? { terms: hello.terms } : {};
+    site = await local.store.updateSite({
+      ...site,
+      collections: {
+        ...site.collections,
+        events: {
+          labels: { en: { singular: "Event", plural: "Events" } },
+          fields: [
+            { key: "venue", type: "text", labels: label("Venue", "Mekan"), localized: true },
+            { key: "price", type: "number", labels: label("Price", "Fiyat"), localized: false },
+            {
+              key: "startsAt",
+              type: "datetime",
+              labels: label("Starts", "Başlangıç"),
+              localized: false,
+            },
+            {
+              key: "deadline",
+              type: "date",
+              labels: label("Deadline", "Son gün"),
+              localized: false,
+            },
+            {
+              key: "online",
+              type: "boolean",
+              labels: label("Online", "Çevrim içi"),
+              localized: false,
+            },
+            { key: "tickets", type: "url", labels: label("Tickets", "Biletler"), localized: true },
+            {
+              key: "agenda",
+              type: "richText",
+              labels: label("Agenda", "Program"),
+              localized: true,
+            },
+            { key: "notes", type: "text", labels: label("Notes", "Notlar"), localized: true },
+          ],
+        },
+      },
+    });
+    const event = await local.store.createContentEntry({
+      siteId: cfg.siteId,
+      collection: "events",
+      slug: "launch",
+      locale: "en",
+      status: "published",
+      title: "Launch party",
+      body: { format: "markdown", value: "Join us for the launch of the new site." },
+      fields: {
+        venue: "<b>Kadıköy</b> Hall",
+        price: 1234.5,
+        startsAt: { at: "2026-11-05T16:30:00Z", timeZone: "Europe/Istanbul" },
+        deadline: "2026-02-28",
+        online: true,
+        tickets: "https://example.com/tickets",
+        agenda: "<script>alert(1)</script>\n\n- Talks\n- **Lunch**",
+      },
+      tags: [],
+      ...terms,
+      author: { kind: "human", id: "user_01HZX8K3Q9CD", name: "Halil" },
+      translation: { group: "entry_01HZX8K4N0EV", method: "original" },
+      id: "entry_01HZX8K4N0EV",
+    } as never);
+    const group = await local.store.translationGroup(site, event.id);
+    await local.store.createContentEntry({
+      siteId: cfg.siteId,
+      collection: "events",
+      slug: "launch",
+      locale: "tr",
+      status: "published",
+      title: "Açılış partisi",
+      body: { format: "markdown", value: "Yeni sitenin açılışına bekleriz." },
+      fields: { venue: "Kadıköy Salonu" },
+      tags: [],
+      ...terms,
+      author: { kind: "human", id: "user_01HZX8K3Q9CD", name: "Halil" },
+      translation: {
+        group: event.id,
+        method: "human",
+        source: {
+          id: event.id,
+          locale: "en",
+          rev: event.rev,
+          hash: group.members[0]?.hash as string,
+        },
+      },
+    } as never);
+    await local.close();
+    await snapshot({ projectDir, label: "fields", publish: true });
+    await spawnBuild(projectDir);
+
+    const en = await read("events", "launch", "index.html");
+    const list = en.match(/<dl class="ch-fields"[\s\S]*?<\/dl>/)?.[0] ?? "";
+    expect(list).toMatch(/^<dl class="ch-fields" aria-label="Details">/);
+    expect(list).toContain(
+      '<div class="ch-field" data-field="venue" data-type="text"><dt>Venue</dt><dd>&lt;b&gt;Kadıköy&lt;/b&gt; Hall</dd></div>',
+    );
+    expect(list).toContain("<dt>Price</dt><dd>1,234.5</dd>");
+    expect(list).toMatch(
+      /<time datetime="2026-11-05T16:30:00Z">November 5, 2026.* 7:30\sPM GMT\+3<\/time>/,
+    );
+    expect(list).toContain('<time datetime="2026-02-28">February 28, 2026</time>');
+    expect(list).toContain("<dt>Online</dt><dd>Yes</dd>");
+    expect(list).toContain(
+      '<dd><a href="https://example.com/tickets">https://example.com/tickets</a></dd>',
+    );
+    expect(list).toContain("<strong>Lunch</strong>");
+    expect(list).not.toContain('data-field="notes"'); // empty values are skipped
+    expect(en).not.toContain("<script>alert(1)");
+    // The translation: its own venue, the original's shared values, labels in Turkish.
+    const tr = await read("tr", "events", "launch", "index.html");
+    expect(tr).toContain('aria-label="Ayrıntılar"');
+    expect(tr).toContain("<dt>Mekan</dt><dd>Kadıköy Salonu</dd>");
+    expect(tr).toContain("<dt>Fiyat</dt><dd>1.234,5</dd>");
+    expect(tr).toContain("<dt>Çevrim içi</dt><dd>Evet</dd>");
+    expect(tr).toContain('data-field="tickets" data-type="url" data-from-original');
+    // An entry of a collection without definitions renders exactly as before.
+    const after = article(await read("posts", "hello-world", "index.html"));
+    expect(after).not.toContain("ch-fields");
+    expect(after).toBe(before);
+  });
 });
diff --git a/packages/cli/test/fixtures/theme-v0.4.0/README.md b/packages/cli/test/fixtures/theme-v0.4.0/README.md
new file mode 100644
index 00000000..f3587860
--- /dev/null
+++ b/packages/cli/test/fixtures/theme-v0.4.0/README.md
@@ -0,0 +1,7 @@
+# Frozen theme: the blog starter as released in v0.4.0
+
+`src/` is `starters/blog/src` exactly as tagged `v0.4.0` (`git archive v0.4.0 starters/blog/src`). `test/old-theme-compat.test.ts` creates a project with today's `cloudhal init`, swaps its `src/` for this copy and builds it with today's packages.
+
+Why this copy: RFC-0041 step 6 added typed custom fields to the renderer (`GraphSource.entryFields`, `formatFieldValue`, `EntryFields.astro`) and changed the starter's article to show them. Sites created with 0.4.0 keep this theme, which knows nothing about fields; it must keep building and rendering exactly as before (it simply does not show field values). See `../theme-v0.3.10/README.md` for the history of this test.
+
+**Never update this copy** to the current starter, and do not reformat it (Biome and the TypeScript check skip it): it stands for the themes that already exist in sites. Only `src/` is kept; `astro.config.mjs`, `tsconfig.json` and `public/` (fonts) come from the project `init` creates.
diff --git a/packages/cli/test/fixtures/theme-v0.4.0/src/DESIGN.md b/packages/cli/test/fixtures/theme-v0.4.0/src/DESIGN.md
new file mode 100644
index 00000000..4492ef45
--- /dev/null
+++ b/packages/cli/test/fixtures/theme-v0.4.0/src/DESIGN.md
@@ -0,0 +1,42 @@
+## Brand
+The blog theme is an editorial theme: articles first, set in a calm reading column, with full-bleed bands for landing moments. It suits publications, newsrooms, journals and small company sites that publish.
+
+## Colors
+- Prefer the color tokens: `seed` (one color the palette is built from), `scheme` (tonal, vibrant, neutral, mono), `contrast` and `mode` (light, dark, or auto to follow the reader). The roles, light and dark, are derived and always meet WCAG contrast; get_design shows them.
+- Without a seed, four settings apply: `{color.brand}` (buttons, the brand band, accents), `{color.link}`, `{color.surface}` (the page) and `{color.text}`. Change colors with set_theme_settings, never by hand.
+- Bands and cards take a `surface`: `plain` (the page), `muted` (a soft step), `raised` (lifted, for cards), `inverse`, `brand` and `accent` (loud, their own text color), `gradient` and `mesh` (brand and accent light: one hero or call to action a page), and `dots`, `grid` or `noise` (quiet textures). Use loud surfaces at most twice a page. The older `tone` still works.
+- A band can have an `anchor` (e.g. `pricing`), so a menu or button can link to `#pricing`.
+
+## Typography
+- `typePairing` sets headings and text in fonts that go together: editorial (Fraunces and Inter) for publications, modern (Space Grotesk and Inter) for products, humanist (Source Sans) for friendly sites, technical (JetBrains Mono headings) for developer tools, classic (Source Serif) for literary or institutional sites. With `system`, the `font` setting chooses one family (system, serif, humanist or mono).
+- `typeScale` makes sizes fluid between phone and desktop: compact for dense, text-heavy sites; balanced for most; dramatic for landing pages with short, bold headlines.
+- Headings: one level-1 per page; level 2 for sections; level 3 inside cards. Keep headings under about 60 characters, in sentence case.
+
+## Layout
+- `radius` sets the corners: none for sober, institutional sites; small or medium for most; large for friendly ones; full for pill buttons (cards stay modest). `density` sets the room: compact for dense, text-heavy sites, cozy for most, airy for landing pages and portfolios.
+- The reading column is narrow (about 48rem). A `Band` with `width: wide` or `full` leaves it: use bands for heroes, feature grids, proof and calls to action, and keep long text in the column.
+- Good rhythm on a landing page: hero band (`gradient`, `mesh`, `inverse` or `brand`) → plain section → `muted` or `dots` band → plain section with `raised` cards → `brand` or `accent` band call to action. Use `spacing: xl` on hero bands and `l` elsewhere.
+- Grids: 2 or 3 columns for cards, 3 or 4 for stats. `Columns` with `ratio: 2-1` pairs text with an image or a quote.
+
+## Components
+- The theme styles every primitive. These look best: `Band`, `Columns`, `Grid`, `Card` (with an `Image` at `ratio: 16:9` first), `Stat`, `Quote`, `Tabs`, `Accordion`, and the blocks `testimonial`, `callout` and `faq`.
+- Buttons: one `variant: primary` per section; `secondary` or `ghost` for the rest.
+- A `Card` with `href` is a whole link: keep its text short (a heading and one sentence).
+- Tools (calculators): put the inputs (`NumberField`, `RadioGroup` with `variant: buttons`, `Checkbox`) in a `Card`, two or three to a `Grid` row, and the result as a `Stat` right below them.
+- Charts: a `Chart` sits in the reading column (or a `wide` band for dashboards), titled with what it shows ("Readers per month, 2026"), with a `caption` naming the source. Bar to compare, line over time, donut for parts of a whole.
+- Tables: a `Table` compares a few things across the same fields (plans, specs). The first column names the row; numbers align `end` with a `format`; `highlight` marks the recommended row. On phones rows become cards, so keep labels short.
+- Lists of articles come from the content list section or a surface entry source, not from copied titles.
+
+## Imagery
+- Carousels: a static hero band is the default. Use a `hero` `Carousel` only for two to five equal offers (same `aspect`, the strongest first); when the header is transparent over it, every slide opens with the same loud `Band`. Autoplay is off unless the site asks, and then `slow`. A `rail` carries logos, products or cards, a `gallery` photographs (with `thumbs`), `testimonials` quotes.
+- Photographs from the media library, landscape for heroes and cards (`16:9` or `4:3`), never the same image twice on a page. Alt text says what is in the picture, in the page's language.
+
+## Pages
+- Home (editorial): hero band with the publication's promise → content list of the newest articles → a `muted` band with two or three sections or categories as cards → newsletter or about call to action.
+- Landing: hero band → three to four features in a `Grid` → proof (`Stat` row or `testimonial`) → pricing (`Tabs` or `Toggle` with bound prices) → `faq` → call to action band.
+- About: one short paragraph of purpose → people or values as cards → contact call to action.
+
+## Don't
+- Don't stack three bands of the same surface, or three grids of cards, in a row.
+- Don't use placeholder text, `#` links or repeated images.
+- Don't put long articles in a surface: articles are entries with a markdown body.
diff --git a/packages/cli/test/fixtures/theme-v0.4.0/src/blocks.ts b/packages/cli/test/fixtures/theme-v0.4.0/src/blocks.ts
new file mode 100644
index 00000000..3c29dd24
--- /dev/null
+++ b/packages/cli/test/fixtures/theme-v0.4.0/src/blocks.ts
@@ -0,0 +1,45 @@
+/**
+ * This theme's block types (RFC-0015 §6): pure data, read by Studio, agents (`list_block_types`)
+ * and the store, and bundled by `cloudhal deploy`. Their components are in `theme.ts` (`blocks`).
+ *
+ * Names are plain English words shared by every theme (`testimonial`, `pricing-table`), never
+ * prefixed with the theme: content written under one theme renders under any other that defines
+ * the same name. The built-ins (`callout`, `button`, `embed`, `faq`) are reserved; restyle them
+ * through `blocks` in `theme.ts` instead.
+ *
+ * Keep this file data only, with type imports only: the CLI loads it on its own (Studio, agents,
+ * deploy) and checks every type, so it needs nothing from the project at run time.
+ */
+import type { BlockType } from "@cloudhal/core-ts/blocks";
+
+export const blockTypes: readonly BlockType[] = [
+  {
+    name: "testimonial",
+    title: { en: "Testimonial", tr: "Referans" },
+    description: {
+      en: "A quote from a reader or customer, with who said it.",
+      tr: "Bir okurdan ya da müşteriden alıntı ve kimin söylediği.",
+    },
+    icon: "Quotes",
+    category: "text",
+    where: ["section", "body"],
+    content: "markdown",
+    props: {
+      type: "object",
+      additionalProperties: false,
+      required: ["author"],
+      properties: {
+        author: { type: "string", minLength: 1, maxLength: 120, title: { en: "Name", tr: "Ad" } },
+        role: {
+          type: "string",
+          maxLength: 120,
+          title: { en: "Role or company", tr: "Unvan ya da şirket" },
+        },
+      },
+    },
+    example: {
+      props: { author: "Ada Lovelace", role: "Analyst" },
+      markdown: "This changed how we publish.",
+    },
+  },
+];
diff --git a/packages/cli/test/fixtures/theme-v0.4.0/src/components/Archive.astro b/packages/cli/test/fixtures/theme-v0.4.0/src/components/Archive.astro
new file mode 100644
index 00000000..5a147890
--- /dev/null
+++ b/packages/cli/test/fixtures/theme-v0.4.0/src/components/Archive.astro
@@ -0,0 +1,108 @@
+---
+/**
+ * A category or tag archive page (RFC-0002 §7): breadcrumb through the parent categories, the
+ * term's name, and on page 1 its image and intro (markdown through the safe renderer); then the
+ * page's posts and real `<a>` pagination links (every page is its own canonical URL).
+ */
+import { type ArchiveView, viewPagePath } from "@cloudhal/astro-renderer/archive";
+import { renderMarkdown, safeHref, safeSrc } from "@cloudhal/astro-renderer/markdown";
+import { imageAttributes, type MediaContext } from "@cloudhal/astro-renderer/media";
+import type { ThemeStrings } from "../theme.ts";
+import Breadcrumbs from "./Breadcrumbs.astro";
+import EntryList from "./EntryList.astro";
+
+interface Props {
+  archive: ArchiveView;
+  t: ThemeStrings;
+  /** Resolves the term image and `asset:` links in the intro (RFC-0004). */
+  media?: MediaContext;
+}
+const { archive, t, media } = Astro.props;
+const label = archive.term.labels[archive.locale];
+const kind =
+  archive.taxonomy.labels[archive.locale]?.singular ??
+  Object.values(archive.taxonomy.labels)[0]?.singular;
+const first = archive.page === 1;
+const intro = first && label?.description ? renderMarkdown(label.description, media) : undefined;
+const image = first && archive.term.image ? archive.term.image : undefined;
+const asset = image?.assetId ? media?.assets?.get(image.assetId) : undefined;
+const attrs =
+  asset && image
+    ? imageAttributes(asset, image, {
+        locale: archive.locale,
+        defaultLocale: media?.defaultLocale ?? archive.locale,
+        transform: media?.transform ?? "none",
+        ...(media?.budget ? { budget: media.budget } : {}),
+        sizes: "(min-width: 48rem) 48rem, 100vw",
+        priority: true,
+        ...(media?.preview ? { preview: true } : {}),
+      })
+    : undefined;
+const imageSrc = image && !attrs ? safeSrc(image.src) : undefined;
+// An author's page (RFC-0019 §1): their role and profile links (safe schemes only).
+const role = label?.role;
+const links = (archive.term.links ?? []).flatMap((l) => {
+  const href = safeHref(l.href);
+  return href ? [{ ...l, href }] : [];
+});
+const crumbs = [
+  { name: t.home, href: "/" },
+  ...archive.trail.map((s) => ({ name: s.name, href: s.href })),
+  { name: archive.shown.name },
+];
+---
+<section class="ch-archive" data-term-id={archive.term.id} data-taxonomy={archive.taxonomy.key}>
+  <Breadcrumbs label={t.breadcrumb} items={crumbs} />
+  <header class="ch-archive-header">
+    {kind && <p class="ch-archive-kind">{kind}</p>}
+    <h1>{archive.shown.name}</h1>
+    {role && <p class="ch-archive-role">{role}</p>}
+    {links.length > 0 && (
+      <ul class="ch-archive-links">
+        {links.map((l) => (
+          <li><a href={l.href} rel={l.external ? "me noopener noreferrer" : "me"}>{l.label}</a></li>
+        ))}
+      </ul>
+    )}
+    <p class="ch-archive-meta">
+      <span>{t.posts(archive.total)}</span>
+      {archive.feedPath && <a href={archive.feedPath}>{t.feed}</a>}
+    </p>
+    {attrs && (
+      <img
+        class="ch-archive-image"
+        src={attrs.src}
+        srcset={attrs.srcset}
+        sizes={attrs.sizes}
+        alt={attrs.alt}
+        width={attrs.width || undefined}
+        height={attrs.height || undefined}
+        decoding="async"
+        style={attrs.style}
+      />
+    )}
+    {image && imageSrc && (
+      <img
+        class="ch-archive-image"
+        src={imageSrc}
+        alt={image.alt}
+        width={image.width}
+        height={image.height}
+        decoding="async"
+      />
+    )}
+    {intro && <div class="ch-richtext" set:html={intro} />}
+  </header>
+  <EntryList entries={archive.entries} locale={archive.locale} media={media} />
+  {archive.pages > 1 && (
+    <nav aria-label={t.pagination} class="ch-pagination">
+      {archive.page > 1 ? (
+        <a href={viewPagePath(archive, archive.page - 1)} rel="prev">{t.newer}</a>
+      ) : <span />}
+      <span>{t.pageOf(archive.page, archive.pages)}</span>
+      {archive.page < archive.pages ? (
+        <a href={viewPagePath(archive, archive.page + 1)} rel="next">{t.older}</a>
+      ) : <span />}
+    </nav>
+  )}
+</section>
diff --git a/packages/cli/test/fixtures/theme-v0.4.0/src/components/Article.astro b/packages/cli/test/fixtures/theme-v0.4.0/src/components/Article.astro
new file mode 100644
index 00000000..40b15cd8
--- /dev/null
+++ b/packages/cli/test/fixtures/theme-v0.4.0/src/components/Article.astro
@@ -0,0 +1,105 @@
+---
+/**
+ * An article (RFC-0018 §3, the article view): kicker (the primary category), title, dek, byline
+ * (author, published, updated, reading time), cover, an "On this page" table of contents for
+ * longer pieces (headings carry ids; no JavaScript), then the body with the theme's own blocks and
+ * the corrections, newest first (RFC-0019 §2; the latest one is the "Updated" date).
+ */
+import { Body } from "@cloudhal/astro-renderer/components";
+import { articleCorrections, articleOutline } from "@cloudhal/astro-renderer/kit";
+import { entryArticleParts } from "@cloudhal/astro-renderer/markdown";
+import type { MediaContext } from "@cloudhal/astro-renderer/media";
+import type { EntryTaxonomy } from "@cloudhal/astro-renderer/taxonomy";
+import type { ContentEntry } from "@cloudhal/core-contracts";
+import type { BlockType } from "@cloudhal/core-ts/blocks";
+import type { ThemeStrings } from "../theme.ts";
+
+interface Props {
+  entry: ContentEntry;
+  terms: EntryTaxonomy;
+  locale: string;
+  t: ThemeStrings;
+  media?: MediaContext;
+  blocks?: Record<string, unknown>;
+  blockTypes?: readonly BlockType[];
+}
+const { entry, terms, locale, t, media, blocks, blockTypes } = Astro.props;
+const parts = entryArticleParts(entry, locale, media);
+const outline = articleOutline(entry);
+const date = (iso: string) =>
+  new Date(iso).toLocaleDateString(locale, { year: "numeric", month: "long", day: "numeric" });
+const published = entry.publishedAt ?? undefined;
+const corrections = articleCorrections(entry);
+const newest = corrections.items[0];
+// "Updated": the latest correction; without one, only a real later edit, not the publish itself.
+const updated =
+  corrections.latest ??
+  (published && Date.parse(entry.updatedAt) - Date.parse(published) > 24 * 3600 * 1000
+    ? entry.updatedAt
+    : undefined);
+// RFC-0019 §1: the byline's authors link to their pages; without one, a person who wrote it.
+const authors = terms.authors;
+const author =
+  authors.length === 0 && entry.author.kind === "human" ? entry.author.name : undefined;
+---
+<article class="ch-article" data-entry-id={entry.id}>
+  <header class="ch-article-head">
+    {terms.section && (
+      terms.section.href ? (
+        <a class="ch-kicker" href={terms.section.href}>{terms.section.name}</a>
+      ) : (
+        <span class="ch-kicker">{terms.section.name}</span>
+      )
+    )}
+    <h1>{entry.title}</h1>
+    {entry.summary && <p class="ch-dek">{entry.summary}</p>}
+    <p class="ch-byline">
+      {authors.length > 0 && (
+        <span class="ch-byline__author">
+          {t.byPrefix}
+          {authors.map((a, i) => (
+            <Fragment>
+              {i > 0 && (i === authors.length - 1 ? t.and : ", ")}
+              {a.href ? <a href={a.href} rel="author">{a.name}</a> : a.name}
+            </Fragment>
+          ))}
+        </span>
+      )}
+      {author && <span class="ch-byline__author">{t.by(author)}</span>}
+      {published && <time datetime={published}>{date(published)}</time>}
+      {updated && <span>{t.updated(date(updated))}</span>}
+      {newest && <a href="#ch-corrections">{t.appended(t.correctionKind[newest.kind])}</a>}
+      <span>{t.minRead(outline.readingMinutes)}</span>
+    </p>
+  </header>
+  <Fragment set:html={parts.cover} />
+  {outline.toc.length >= 3 && (
+    <details class="ch-toc" open>
+      <summary>{t.onThisPage}</summary>
+      <ol>
+        {outline.toc.map((item) => (
+          <li data-depth={item.depth}><a href={`#${item.id}`}>{item.text}</a></li>
+        ))}
+      </ol>
+    </details>
+  )}
+  <div class="ch-richtext">
+    <Body body={parts.body} media={parts.media} blocks={blocks} blockTypes={blockTypes} />
+  </div>
+  {newest && (
+    <section id="ch-corrections" class="ch-corrections" aria-labelledby="ch-corrections-title">
+      <h2 id="ch-corrections-title">{t.corrections}</h2>
+      <ol>
+        {corrections.items.map((c) => (
+          <li data-kind={c.kind}>
+            <p class="ch-correction__meta">
+              <strong>{t.correctionKind[c.kind]}</strong>
+              <time datetime={c.at}>{date(c.at)}</time>
+            </p>
+            <p class="ch-correction__note" set:html={c.html} />
+          </li>
+        ))}
+      </ol>
+    </section>
+  )}
+</article>
diff --git a/packages/cli/test/fixtures/theme-v0.4.0/src/components/Breadcrumbs.astro b/packages/cli/test/fixtures/theme-v0.4.0/src/components/Breadcrumbs.astro
new file mode 100644
index 00000000..1332f210
--- /dev/null
+++ b/packages/cli/test/fixtures/theme-v0.4.0/src/components/Breadcrumbs.astro
@@ -0,0 +1,25 @@
+---
+/** `Home › … › current`: the visible twin of the `BreadcrumbList` JSON-LD in `<head>`. */
+interface Props {
+  label: string;
+  items: Array<{ name: string; href?: string | undefined }>;
+}
+const { label, items } = Astro.props;
+---
+{items.length > 1 && (
+  <nav aria-label={label} class="ch-breadcrumbs">
+    <ol>
+      {items.map((item, i) => (
+        <li>
+          {i === items.length - 1 ? (
+            <span aria-current="page">{item.name}</span>
+          ) : item.href ? (
+            <a href={item.href}>{item.name}</a>
+          ) : (
+            <span>{item.name}</span>
+          )}
+        </li>
+      ))}
+    </ol>
+  </nav>
+)}
diff --git a/packages/cli/test/fixtures/theme-v0.4.0/src/components/EntryList.astro b/packages/cli/test/fixtures/theme-v0.4.0/src/components/EntryList.astro
new file mode 100644
index 00000000..702fa453
--- /dev/null
+++ b/packages/cli/test/fixtures/theme-v0.4.0/src/components/EntryList.astro
@@ -0,0 +1,54 @@
+---
+/**
+ * A list of articles as cards: cover thumbnail (when the article has one), title, summary,
+ * publication date and reading time.
+ */
+import { readingMinutes } from "@cloudhal/astro-renderer/kit";
+import { renderBody } from "@cloudhal/astro-renderer/markdown";
+import { imageAttributes, type MediaContext } from "@cloudhal/astro-renderer/media";
+import { entryPath } from "@cloudhal/astro-renderer/routing";
+import type { ContentEntry } from "@cloudhal/core-contracts";
+import { strings } from "../theme.ts";
+
+interface Props {
+  entries: ContentEntry[];
+  locale: string;
+  media?: MediaContext | undefined;
+}
+const { entries, locale, media } = Astro.props;
+const t = strings(locale);
+const date = (iso: string) =>
+  new Date(iso).toLocaleDateString(locale, { year: "numeric", month: "long", day: "numeric" });
+const cover = (e: ContentEntry) => {
+  const asset = e.coverImage?.assetId ? media?.assets?.get(e.coverImage.assetId) : undefined;
+  if (!asset || !e.coverImage) return undefined;
+  return imageAttributes(asset, e.coverImage, {
+    locale,
+    defaultLocale: media?.defaultLocale ?? locale,
+    transform: media?.transform ?? "none",
+    ...(media?.budget ? { budget: media.budget } : {}),
+    sizes: "12rem",
+    ...(media?.preview ? { preview: true } : {}),
+  });
+};
+---
+<ul class="ch-entrylist">
+  {entries.map((e) => {
+    const img = cover(e);
+    return (
+      <li class="ch-card-entry" data-has-cover={img ? "yes" : undefined}>
+        {img && (
+          <img class="ch-card-entry__cover" src={img.src} srcset={img.srcset} sizes={img.sizes} alt="" width={img.width || undefined} height={img.height || undefined} loading="lazy" decoding="async" />
+        )}
+        <div class="ch-card-entry__body">
+          <a href={entryPath(media?.permalinks, e)}>{e.title}</a>
+          {e.summary && <p>{e.summary}</p>}
+          <span class="ch-card-entry__meta">
+            {e.publishedAt && <time datetime={e.publishedAt}>{date(e.publishedAt)}</time>}
+            <span>{t.minRead(readingMinutes(renderBody(e.body)))}</span>
+          </span>
+        </div>
+      </li>
+    );
+  })}
+</ul>
diff --git a/packages/cli/test/fixtures/theme-v0.4.0/src/components/LatestPosts.astro b/packages/cli/test/fixtures/theme-v0.4.0/src/components/LatestPosts.astro
new file mode 100644
index 00000000..0be2773d
--- /dev/null
+++ b/packages/cli/test/fixtures/theme-v0.4.0/src/components/LatestPosts.astro
@@ -0,0 +1,30 @@
+---
+/**
+ * The theme's content list section (`components.contentList` in theme.ts): the section's entries
+ * sorted and trimmed as it asks, drawn as cards.
+ */
+import type { MediaContext } from "@cloudhal/astro-renderer/media";
+import type { ContentEntry, ContentListSection } from "@cloudhal/core-contracts";
+import EntryList from "./EntryList.astro";
+
+interface Props {
+  section: ContentListSection;
+  entries: ContentEntry[];
+  media?: MediaContext;
+}
+const { section, entries, media } = Astro.props;
+const at = (e: ContentEntry) => e.publishedAt ?? e.createdAt;
+const sorted = [...entries]
+  .sort((a, b) =>
+    section.sort === "title"
+      ? a.title.localeCompare(b.title)
+      : section.sort === "oldest"
+        ? at(a).localeCompare(at(b))
+        : at(b).localeCompare(at(a)),
+  )
+  .slice(0, section.limit);
+const locale = media?.locale ?? sorted[0]?.locale ?? "en";
+---
+<section class="ch-contentlist" data-section-id={section.id} data-kind="contentList" data-collection={section.collection}>
+  <EntryList entries={sorted} locale={locale} media={media} />
+</section>
diff --git a/packages/cli/test/fixtures/theme-v0.4.0/src/components/MenuPanel.astro b/packages/cli/test/fixtures/theme-v0.4.0/src/components/MenuPanel.astro
new file mode 100644
index 00000000..d4dc5aea
--- /dev/null
+++ b/packages/cli/test/fixtures/theme-v0.4.0/src/components/MenuPanel.astro
@@ -0,0 +1,46 @@
+---
+/**
+ * The phone menu's content (RFC-0025 §2), in the header's disclosure, its drawer or full-screen
+ * dialog, and the `/menu` page: the header's menu with its groups as disclosures, the second menu,
+ * and the search form where the deployment answers searches.
+ */
+import type { ActiveNavItem } from "@cloudhal/astro-renderer/navigation";
+import NavLink from "./NavLink.astro";
+import NavMenu from "./NavMenu.astro";
+
+interface Props {
+  nav: ActiveNavItem[];
+  utility: ActiveNavItem[];
+  search?: { label: string; placeholder: string; button: string; query?: string } | undefined;
+  words: { main: string; secondary: string };
+  /** Keeps ids unique when the panel shows twice on a page. */
+  idSuffix: string;
+  /** RFC-0026 26c: the site's icon weight. */
+  iconWeight?: string | undefined;
+}
+const { nav, utility, search, words, idSuffix, iconWeight } = Astro.props;
+const link = { on: "ch-menu__current", off: "" };
+---
+<div class="ch-menu__panel">
+  {search && (
+    <form class="ch-menu__search" method="get" action="/search" role="search">
+      <label for={`ch-q-${idSuffix}`} class="sr-only">{search.label}</label>
+      <input id={`ch-q-${idSuffix}`} type="search" name="q" value={search.query ?? ""} maxlength="200" placeholder={search.placeholder} />
+      <button type="submit" class="sr-only">{search.button}</button>
+    </form>
+  )}
+  {nav.length > 0 && (
+    <nav aria-label={words.main} class="ch-menu__nav">
+      <ul>
+        {nav.map((item) => <li>{item.children.length > 0 ? <NavMenu item={item} {...link} iconWeight={iconWeight} /> : <NavLink item={item} {...link} />}</li>)}
+      </ul>
+    </nav>
+  )}
+  {utility.length > 0 && (
+    <nav aria-label={words.secondary} class="ch-menu__nav ch-menu__nav--small">
+      <ul>
+        {utility.map((item) => <li><NavLink item={item} {...link} /></li>)}
+      </ul>
+    </nav>
+  )}
+</div>
diff --git a/packages/cli/test/fixtures/theme-v0.4.0/src/components/NavLink.astro b/packages/cli/test/fixtures/theme-v0.4.0/src/components/NavLink.astro
new file mode 100644
index 00000000..ed3355bc
--- /dev/null
+++ b/packages/cli/test/fixtures/theme-v0.4.0/src/components/NavLink.astro
@@ -0,0 +1,27 @@
+---
+/**
+ * One navigation link (RFC-0003 §7.3). `aria-current` is `page` on the exact match and `true` on a
+ * prefix or context match. External links never pass referrer or opener; only `newTab` opens one.
+ * A group shown without its children (past the theme's depth) is plain text.
+ */
+import type { ActiveNavItem } from "@cloudhal/astro-renderer/navigation";
+
+interface Props {
+  item: ActiveNavItem;
+  /** Classes for the current (or in-trail) link and for the others. */
+  on: string;
+  off: string;
+}
+const { item, on, off } = Astro.props;
+---
+{item.href === undefined ? (
+  <span>{item.label}</span>
+) : (
+  <a
+    href={item.href}
+    aria-current={item.current}
+    class={(item.current || item.inTrail ? on : off) || undefined}
+    rel={item.external ? "noopener noreferrer" : undefined}
+    target={item.newTab ? "_blank" : undefined}
+  >{item.label}</a>
+)}
diff --git a/packages/cli/test/fixtures/theme-v0.4.0/src/components/NavMenu.astro b/packages/cli/test/fixtures/theme-v0.4.0/src/components/NavMenu.astro
new file mode 100644
index 00000000..19408e0a
--- /dev/null
+++ b/packages/cli/test/fixtures/theme-v0.4.0/src/components/NavMenu.astro
@@ -0,0 +1,95 @@
+---
+/**
+ * An item with children as a disclosure (`<details>`, no JavaScript): the item's link (or a group's
+ * label) as the summary, its children below. Renders up to three levels; deeper items are left out
+ * (the menu's `maxDepth` is data, the theme decides what it shows). The active trail starts open.
+ * In the header's bar (`popover`, RFC-0025 §2) a group opens as a popover under its button instead,
+ * so it never pushes the bar: the browser opens and closes it (Escape, a click elsewhere) with no
+ * script, and a disclosure button never becomes `role=menu`. A top-level item with `display: mega`
+ * (RFC-0025 25d) opens one wide panel under the header instead: each child group is a column of its
+ * links (a child with no children of its own joins a first column of links).
+ */
+import type { ActiveNavItem } from "@cloudhal/astro-renderer/navigation";
+import { renderIcon } from "@cloudhal/core-ts/icons";
+import { iconSet } from "../icons.ts";
+import NavLink from "./NavLink.astro";
+
+interface Props {
+  item: ActiveNavItem;
+  on: string;
+  off: string;
+  /** 1 for a top-level item. */
+  level?: number;
+  /** A popover under a button (the header's bar), with this id. */
+  popover?: string | undefined;
+  /** RFC-0026 26c: the site's icon weight. */
+  iconWeight?: string | undefined;
+}
+const { item, on, off, level = 1, popover, iconWeight } = Astro.props;
+const icon = (name: string, className?: string) =>
+  renderIcon(name, { className, weight: iconWeight, set: iconSet });
+const MAX_LEVEL = 3;
+const mega = popover !== undefined && level === 1 && item.display === "mega";
+const columns = mega ? item.children.filter((c) => c.children.length > 0) : [];
+const loose = mega ? item.children.filter((c) => c.children.length === 0) : [];
+---
+{popover ? (
+  <div class="ch-nav-menu" data-popover="">
+    {item.href && <NavLink item={item} on={on} off={off} />}
+    <button
+      type="button"
+      class:list={["ch-nav-menu__btn", item.current || item.inTrail ? on : off]}
+      popovertarget={popover}
+      aria-label={item.href ? item.label : undefined}
+    >{!item.href && item.label}<Fragment set:html={icon("chevron-down")} /></button>
+    <div popover="auto" id={popover} class:list={["ch-nav-menu__pop", mega && "ch-nav-menu__pop--mega"]}>
+      {mega ? (
+        <div class="ch-mega">
+          {loose.length > 0 && (
+            <ul class="ch-mega__col">
+              {loose.map((c) => <li><NavLink item={c} on={on} off={off} /></li>)}
+            </ul>
+          )}
+          {columns.map((col) => (
+            <div class="ch-mega__col">
+              <p class="ch-mega__heading">{col.href ? <NavLink item={col} on={on} off={off} /> : col.label}</p>
+              <ul>
+                {col.children.map((c) => <li><NavLink item={c} on={on} off={off} /></li>)}
+              </ul>
+            </div>
+          ))}
+        </div>
+      ) : (
+      <ul>
+        {item.children.map((child) => (
+          <li>
+            {child.children.length > 0 && level + 1 < MAX_LEVEL ? (
+              <Astro.self item={child} on={on} off={off} level={level + 1} iconWeight={iconWeight} />
+            ) : (
+              <NavLink item={child} on={on} off={off} />
+            )}
+          </li>
+        ))}
+      </ul>
+      )}
+    </div>
+  </div>
+) : (
+<details class="ch-nav-menu" open={item.inTrail && level > 1 ? true : undefined}>
+  <summary class={(item.current || item.inTrail ? on : off) || undefined}>
+    {item.href ? <NavLink item={item} on={on} off={off} /> : <span>{item.label}</span>}
+    <Fragment set:html={icon("chevron-down", "ch-nav-menu__caret")} />
+  </summary>
+  <ul>
+    {item.children.map((child) => (
+      <li>
+        {child.children.length > 0 && level + 1 < MAX_LEVEL ? (
+          <Astro.self item={child} on={on} off={off} level={level + 1} iconWeight={iconWeight} />
+        ) : (
+          <NavLink item={child} on={on} off={off} />
+        )}
+      </li>
+    ))}
+  </ul>
+</details>
+)}
diff --git a/packages/cli/test/fixtures/theme-v0.4.0/src/components/NotFound.astro b/packages/cli/test/fixtures/theme-v0.4.0/src/components/NotFound.astro
new file mode 100644
index 00000000..058c0d48
--- /dev/null
+++ b/packages/cli/test/fixtures/theme-v0.4.0/src/components/NotFound.astro
@@ -0,0 +1,27 @@
+---
+/**
+ * The built-in not-found page (404), in the reader's language: drawn when the site has no page at
+ * `/404` in that language (`@cloudhal/astro-renderer/not-found`). A link home, and the search form
+ * where the deployment answers searches; the middleware keeps both in the page's locale.
+ */
+import type { ThemeStrings } from "../theme.ts";
+
+interface Props {
+  t: ThemeStrings;
+  /** Show the search form (the deployment answers `/search`). */
+  search: boolean;
+}
+const { t, search } = Astro.props;
+---
+<section class="ch-not-found ch-search" aria-labelledby="ch-not-found-title">
+  <h1 id="ch-not-found-title">{t.notFoundTitle}</h1>
+  <p class="ch-not-found-text">{t.notFoundText}</p>
+  {search && (
+    <form class="ch-search-form" method="get" action="/search" role="search">
+      <label for="ch-not-found-q" class="ch-not-found-prompt">{t.notFoundSearch}</label>
+      <input id="ch-not-found-q" type="search" name="q" maxlength="200" placeholder={t.searchPlaceholder} autocomplete="off" />
+      <button type="submit">{t.search}</button>
+    </form>
+  )}
+  <p class="ch-not-found-home"><a href="/">{t.notFoundHome}</a></p>
+</section>
diff --git a/packages/cli/test/fixtures/theme-v0.4.0/src/components/PostTerms.astro b/packages/cli/test/fixtures/theme-v0.4.0/src/components/PostTerms.astro
new file mode 100644
index 00000000..1605b048
--- /dev/null
+++ b/packages/cli/test/fixtures/theme-v0.4.0/src/components/PostTerms.astro
@@ -0,0 +1,33 @@
+---
+/** An article's public categories and tags as chips linking to their archives. */
+import type { EntryTaxonomy } from "@cloudhal/astro-renderer/taxonomy";
+
+interface Props {
+  taxonomy: EntryTaxonomy;
+  locale: string;
+}
+const { taxonomy, locale } = Astro.props;
+// Authors are the byline (RFC-0019 §1), not chips.
+const groups = taxonomy.groups.filter((g) => g.taxonomy.key !== "author");
+---
+{groups.length > 0 && (
+  <div class="ch-terms">
+    {groups.map((group) => (
+      <ul
+        class="ch-terms__group"
+        data-taxonomy={group.taxonomy.key}
+        aria-label={group.taxonomy.labels[locale]?.plural ?? group.taxonomy.key}
+      >
+        {group.terms.map((term) => (
+          <li>
+            {term.href ? (
+              <a class="ch-chip" href={term.href} rel="tag">{term.name}</a>
+            ) : (
+              <span class="ch-chip">{term.name}</span>
+            )}
+          </li>
+        ))}
+      </ul>
+    ))}
+  </div>
+)}
diff --git a/packages/cli/test/fixtures/theme-v0.4.0/src/components/RelatedPosts.astro b/packages/cli/test/fixtures/theme-v0.4.0/src/components/RelatedPosts.astro
new file mode 100644
index 00000000..73905ce6
--- /dev/null
+++ b/packages/cli/test/fixtures/theme-v0.4.0/src/components/RelatedPosts.astro
@@ -0,0 +1,20 @@
+---
+/** "Related posts" under an article (`relatedEntries`: shared primary category or tags). */
+import type { MediaContext } from "@cloudhal/astro-renderer/media";
+import type { ContentEntry } from "@cloudhal/core-contracts";
+import EntryList from "./EntryList.astro";
+
+interface Props {
+  title: string;
+  entries: ContentEntry[];
+  locale: string;
+  media?: MediaContext | undefined;
+}
+const { title, entries, locale, media } = Astro.props;
+---
+{entries.length > 0 && (
+  <aside class="ch-related" aria-labelledby="ch-related-title">
+    <h2 id="ch-related-title">{title}</h2>
+    <EntryList entries={entries} locale={locale} media={media} />
+  </aside>
+)}
diff --git a/packages/cli/test/fixtures/theme-v0.4.0/src/components/Search.astro b/packages/cli/test/fixtures/theme-v0.4.0/src/components/Search.astro
new file mode 100644
index 00000000..59637bea
--- /dev/null
+++ b/packages/cli/test/fixtures/theme-v0.4.0/src/components/Search.astro
@@ -0,0 +1,57 @@
+---
+/**
+ * The search page (RFC-0019 §3, RFC-0029 §2): an ordinary `<form method="get">` (no JavaScript),
+ * the results with their snippets (escaped text, matches in `<mark>`), and real links between
+ * result pages.
+ * Pages, topics and authors are found too; a topic or author shows its taxonomy ("Category").
+ * Rendered only by deployments that answer searches; the page is never cached and never indexed.
+ */
+import { type SearchView, searchPageHref, snippetHtml } from "@cloudhal/astro-renderer/search";
+import type { ThemeStrings } from "../theme.ts";
+
+interface Props {
+  search: SearchView;
+  locale: string;
+  t: ThemeStrings;
+}
+const { search, locale, t } = Astro.props;
+const date = (iso: string) =>
+  new Date(iso).toLocaleDateString(locale, { year: "numeric", month: "long", day: "numeric" });
+---
+<section class="ch-search" aria-labelledby="ch-search-title">
+  <h1 id="ch-search-title">{t.search}</h1>
+  <form class="ch-search-form" method="get" action="/search" role="search">
+    <label for="ch-search-q" class="sr-only">{t.searchLabel}</label>
+    <input id="ch-search-q" type="search" name="q" value={search.query} maxlength="200" placeholder={t.searchPlaceholder} autocomplete="off" />
+    <button type="submit">{t.search}</button>
+  </form>
+  {search.stale && <p class="ch-search-note" role="status">{t.searchUpdating}</p>}
+  {search.query && (
+    <p class="ch-search-summary" role="status">
+      {search.total > 0 ? t.searchResults(search.total, search.query) : t.searchNone(search.query)}
+    </p>
+  )}
+  {search.hits.length > 0 && (
+    <ol class="ch-search-results">
+      {search.hits.map((hit) => (
+        <li data-entry-id={hit.nodeId} data-kind={hit.kind ?? "article"}>
+          {hit.context && <p class="ch-search-context">{hit.context}</p>}
+          <h2><a href={hit.href}>{hit.title}</a></h2>
+          {hit.snippet && <p class="ch-search-snippet" set:html={snippetHtml(hit.snippet)} />}
+          {hit.publishedAt && <time datetime={hit.publishedAt}>{date(hit.publishedAt)}</time>}
+        </li>
+      ))}
+    </ol>
+  )}
+  {search.pages > 1 && (
+    <nav aria-label={t.pagination} class="ch-pagination">
+      {search.page > 1 ? (
+        <a href={searchPageHref(search.query, search.page - 1)} rel="prev">{t.previous}</a>
+      ) : <span />}
+      <span>{t.pageOf(search.page, search.pages)}</span>
+      {search.page < search.pages ? (
+        <a href={searchPageHref(search.query, search.page + 1)} rel="next">{t.next}</a>
+      ) : <span />}
+    </nav>
+  )}
+</section>
diff --git a/packages/cli/test/fixtures/theme-v0.4.0/src/components/SearchDialog.astro b/packages/cli/test/fixtures/theme-v0.4.0/src/components/SearchDialog.astro
new file mode 100644
index 00000000..3c565a40
--- /dev/null
+++ b/packages/cli/test/fixtures/theme-v0.4.0/src/components/SearchDialog.astro
@@ -0,0 +1,46 @@
+---
+/**
+ * The search modal (RFC-0029 §6): markup and words only; `/_cloudhal/search.1.js` wires it. Without
+ * the script the dialog never opens and the header form goes to `/search`. Inside, a form still
+ * goes to `/search` on Enter when no result is chosen.
+ */
+import { SEARCH_JSON_PATH, SEARCH_PATH } from "@cloudhal/astro-renderer/search";
+import type { ThemeStrings } from "../theme.ts";
+
+interface Props {
+  label: string;
+  placeholder: string;
+  words: ThemeStrings["searchModal"];
+}
+const { label, placeholder, words } = Astro.props;
+const data = {
+  kinds: words.kinds,
+  all: words.all,
+  none: words.none,
+  recent: words.recent,
+  clear: words.clear,
+  limited: words.limited,
+  error: words.error,
+  updating: words.updating,
+  count: words.count,
+};
+---
+<dialog id="ch-search" class="ch-search-dialog" aria-label={label} data-ch-search data-endpoint={SEARCH_JSON_PATH} data-page={SEARCH_PATH} data-words={JSON.stringify(data)}>
+  <div class="ch-search-dialog__panel">
+    <form class="ch-search-dialog__bar" method="get" action={SEARCH_PATH} role="search">
+      <label for="ch-search-dialog-q" class="sr-only">{label}</label>
+      <input id="ch-search-dialog-q" type="search" name="q" maxlength="200" autocomplete="off" spellcheck="false" placeholder={placeholder} data-ch-search-input />
+      <button type="button" class="ch-search-dialog__close" data-ch-search-close>{words.close}</button>
+    </form>
+    <div class="ch-search-dialog__body">
+      <div id="ch-search-list" class="ch-search-dialog__list" role="listbox" aria-label={label} data-ch-search-list></div>
+      <p class="ch-search-dialog__note" data-ch-search-note hidden></p>
+    </div>
+    <p class="ch-search-dialog__keys" aria-hidden="true">
+      <span><kbd>↑</kbd><kbd>↓</kbd> {words.keys.move}</span>
+      <span><kbd>↵</kbd> {words.keys.open}</span>
+      <span><kbd>esc</kbd> {words.keys.close}</span>
+    </p>
+    <p class="sr-only" role="status" aria-live="polite" data-ch-search-status></p>
+  </div>
+</dialog>
diff --git a/packages/cli/test/fixtures/theme-v0.4.0/src/components/blocks/Testimonial.astro b/packages/cli/test/fixtures/theme-v0.4.0/src/components/blocks/Testimonial.astro
new file mode 100644
index 00000000..80d8c601
--- /dev/null
+++ b/packages/cli/test/fixtures/theme-v0.4.0/src/components/blocks/Testimonial.astro
@@ -0,0 +1,18 @@
+---
+/**
+ * The `testimonial` block (src/blocks.ts), in sections and inside bodies. `contentHtml` is the
+ * quote, already rendered by Cloudhal's safe markdown renderer; props were checked first.
+ */
+interface Props {
+  props: { author?: string; role?: string };
+  contentHtml?: string;
+}
+const { props, contentHtml = "" } = Astro.props;
+---
+<figure class="testimonial">
+  <blockquote set:html={contentHtml} />
+  <figcaption>
+    <span class="testimonial__author">{props.author}</span>
+    {props.role && <span class="testimonial__role">{props.role}</span>}
+  </figcaption>
+</figure>
diff --git a/packages/cli/test/fixtures/theme-v0.4.0/src/env.d.ts b/packages/cli/test/fixtures/theme-v0.4.0/src/env.d.ts
new file mode 100644
index 00000000..61e0b265
--- /dev/null
+++ b/packages/cli/test/fixtures/theme-v0.4.0/src/env.d.ts
@@ -0,0 +1,5 @@
+/// <reference types="astro/client" />
+declare module "virtual:cloudhal/config" {
+  const config: import("@cloudhal/astro-renderer").CloudhalRendererConfig;
+  export default config;
+}
diff --git a/packages/cli/test/fixtures/theme-v0.4.0/src/fonts.ts b/packages/cli/test/fixtures/theme-v0.4.0/src/fonts.ts
new file mode 100644
index 00000000..9d982122
--- /dev/null
+++ b/packages/cli/test/fixtures/theme-v0.4.0/src/fonts.ts
@@ -0,0 +1,31 @@
+/**
+ * The font files each pairing (RFC-0023 §2, `typePairing` in settings.ts) needs first: its latin
+ * subsets, preloaded by layouts/Base.astro so headings do not swap late. The latin-ext files
+ * (Turkish and other accented letters) load on demand through fonts.css's unicode ranges.
+ */
+export const PAIRING_PRELOADS: Readonly<Record<string, readonly string[]>> = {
+  editorial: [
+    "/fonts/v1/fraunces-latin-wght-normal.woff2",
+    "/fonts/v1/inter-latin-wght-normal.woff2",
+  ],
+  modern: [
+    "/fonts/v1/space-grotesk-latin-wght-normal.woff2",
+    "/fonts/v1/inter-latin-wght-normal.woff2",
+  ],
+  humanist: ["/fonts/v1/source-sans-3-latin-wght-normal.woff2"],
+  technical: [
+    "/fonts/v1/jetbrains-mono-latin-wght-normal.woff2",
+    "/fonts/v1/inter-latin-wght-normal.woff2",
+  ],
+  classic: ["/fonts/v1/source-serif-4-latin-wght-normal.woff2"],
+};
+
+/**
+ * The same preloads as a `Link` response header. On a Cloudflare zone with Early Hints on, the
+ * edge sends it as a 103 before the page, so the fonts load while the Worker is still rendering.
+ */
+export function fontLinkHeader(hrefs: readonly string[]): string {
+  return hrefs
+    .map((h) => `<${h}>; rel=preload; as=font; type="font/woff2"; crossorigin`)
+    .join(", ");
+}
diff --git a/packages/cli/test/fixtures/theme-v0.4.0/src/icons.ts b/packages/cli/test/fixtures/theme-v0.4.0/src/icons.ts
new file mode 100644
index 00000000..dab0bad8
--- /dev/null
+++ b/packages/cli/test/fixtures/theme-v0.4.0/src/icons.ts
@@ -0,0 +1,12 @@
+/**
+ * The theme's own icon drawings (RFC-0026 26d): names of the curated set this theme draws itself.
+ * Empty: every icon is Phosphor's, in the site's weight. `defineIconSet` checks each drawing
+ * (shapes only, `currentColor`), so an icon can never carry markup, links or scripts into pages.
+ *
+ *   export const iconSet = defineIconSet({
+ *     star: { viewBox: "0 0 24 24", body: '<path d="M12 2l3 7h7l-6 4 2 7-6-4-6 4 2-7-6-4h7z"/>' },
+ *   });
+ */
+import { defineIconSet } from "@cloudhal/core-ts/icons";
+
+export const iconSet = defineIconSet({});
diff --git a/packages/cli/test/fixtures/theme-v0.4.0/src/layouts/Base.astro b/packages/cli/test/fixtures/theme-v0.4.0/src/layouts/Base.astro
new file mode 100644
index 00000000..c456aca0
--- /dev/null
+++ b/packages/cli/test/fixtures/theme-v0.4.0/src/layouts/Base.astro
@@ -0,0 +1,426 @@
+---
+import { CHROME_SCRIPT } from "@cloudhal/astro-renderer/chrome";
+import { SeoHead } from "@cloudhal/astro-renderer/components";
+import type { ActiveNavItem } from "@cloudhal/astro-renderer/navigation";
+import { PREFS_SCRIPT } from "@cloudhal/astro-renderer/prefs";
+import { SEARCH_SCRIPT } from "@cloudhal/astro-renderer/search-client";
+import type { HeadMeta } from "@cloudhal/astro-renderer/seo";
+import { themeVariables } from "@cloudhal/astro-renderer/theme-settings";
+import type { Site } from "@cloudhal/core-contracts";
+import { copyrightText, type ResolvedChrome, resolveChrome } from "@cloudhal/core-ts/chrome";
+import { renderIcon } from "@cloudhal/core-ts/icons";
+import MenuPanel from "../components/MenuPanel.astro";
+import NavLink from "../components/NavLink.astro";
+import NavMenu from "../components/NavMenu.astro";
+import SearchDialog from "../components/SearchDialog.astro";
+import { PAIRING_PRELOADS } from "../fonts.ts";
+import { iconSet } from "../icons.ts";
+import { themeSettings } from "../settings.ts";
+import type { ThemeStrings } from "../theme.ts";
+import "../styles/global.css";
+
+interface Props {
+  site: Site;
+  meta: HeadMeta;
+  /** The `primary` menu, or the derived header when the site has none (RFC-0003 §7.3). */
+  nav: ActiveNavItem[];
+  /** The `footer` menu; undefined keeps the default footer links. */
+  footer?: ActiveNavItem[] | undefined;
+  /** A preview of an embargoed or expired page or entry says so above it (RFC-0008 §7.3). */
+  notice?: { state: string; at: string; text: string } | undefined;
+  /** RFC-0019 §3: the header's search form, where the deployment answers searches. */
+  search?:
+    | {
+        label: string;
+        placeholder: string;
+        button: string;
+        query?: string;
+        /** RFC-0029 §6: the search modal's words; the header field opens it. */
+        modal?: ThemeStrings["searchModal"];
+      }
+    | undefined;
+  /** RFC-0024 §1: the page's own motion level, over the site's. */
+  motion?: string | undefined;
+  /** RFC-0025: the page's header and footer (`resolveChrome`), and the menus they name by key. */
+  chrome?: ResolvedChrome | undefined;
+  menus?: Record<string, ActiveNavItem[] | undefined> | undefined;
+  /** The chrome's own words, in the page's language. */
+  words?:
+    | {
+        skip: string;
+        main: string;
+        secondary: string;
+        menu: string;
+        closeMenu: string;
+        footer: string;
+        legal: string;
+        social: string;
+        credit: string;
+      }
+    | undefined;
+  /** RFC-0025 25d: the bars' and toasts' words, in the page's language. */
+  barWords?: Record<(typeof BAR_WORDS)[number], string> | undefined;
+  /**
+   * RFC-0033 §4: the reader's notice on a machine translation or a page shown in its original
+   * language, with a link to the original.
+   */
+  translation?:
+    | { text: string; original?: { href: string; text: string; lang: string } }
+    | undefined;
+  /** RFC-0033 §4: the language switcher: each language's name in itself and its URL here. */
+  languages?:
+    | {
+        label: string;
+        items: Array<{ locale: string; name: string; href: string; current: boolean }>;
+      }
+    | undefined;
+}
+const BAR_WORDS = [
+  "announcement",
+  "dismiss",
+  "privacy",
+  "consentNotice",
+  "consentChoices",
+  "consentOk",
+  "consentAll",
+  "consentEssential",
+  "privacyPolicy",
+  "copied",
+  "linkCopied",
+] as const;
+const {
+  site,
+  meta,
+  nav,
+  footer,
+  notice,
+  search,
+  motion,
+  menus = {},
+  words,
+  barWords,
+  translation,
+  languages,
+} = Astro.props;
+const chrome = Astro.props.chrome ?? resolveChrome(site);
+const h = chrome.header;
+const f = chrome.footer;
+const w = words ?? {
+  skip: "Skip to content",
+  main: "Main",
+  secondary: "Secondary",
+  menu: "Menu",
+  closeMenu: "Close menu",
+  footer: "Footer",
+  legal: "Legal",
+  social: "Social links",
+  credit: "Built with Cloudhal",
+};
+// The header's menu: the primary menu (or the derived header without one), else the one it names.
+const headerNav = h.nav === "primary" ? nav : (menus[h.nav] ?? []);
+const utilityNav = h.utility ? (menus[h.utility] ?? []) : [];
+const legalNav = f.legal ? (f.legal === "footer" ? footer : menus[f.legal]) : undefined;
+const brand = site.brand;
+const SOCIAL: Record<string, string> = {
+  x: "X",
+  bluesky: "Bluesky",
+  mastodon: "Mastodon",
+  github: "GitHub",
+  linkedin: "LinkedIn",
+  instagram: "Instagram",
+  facebook: "Facebook",
+  youtube: "YouTube",
+  tiktok: "TikTok",
+  threads: "Threads",
+  rss: "RSS",
+  email: "Email",
+};
+const social = f.social ? (brand?.social ?? []) : [];
+const safe = (href: string) => (/^(https?:|mailto:|\/(?!\/)|#)/i.test(href) ? href : "#");
+// The actions this page can show (search only where the deployment answers searches).
+const actions = h.actions.filter((a) =>
+  a.kind === "button"
+    ? a.label && a.href
+    : a.kind === "locale"
+      ? languages
+      : a.kind === "search" && search,
+);
+// Without a header switcher, a multilingual site lists its languages in the footer (RFC-0033).
+const footerLanguages =
+  languages && !actions.some((a) => a.kind === "locale") ? languages : undefined;
+// The bar collapses into the phone menu below `collapseAt` (always for the minimal layout).
+const collapse = h.layout === "minimal" ? "always" : h.collapseAt;
+const dialog =
+  h.mobileStyle === "drawer-start" ||
+  h.mobileStyle === "drawer-end" ||
+  h.mobileStyle === "fullscreen";
+const searchAction = actions.some((a) => a.kind === "search") ? search : undefined;
+// The chrome module, only where the header needs it (RFC-0025 §2): without it everything works.
+// RFC-0025 25d: the bars, and the words they and the toasts speak.
+const bw = barWords ?? {
+  announcement: "Announcement",
+  dismiss: "Dismiss",
+  privacy: "Privacy",
+  consentNotice: "This site keeps only what it needs to work: no tracking cookies.",
+  consentChoices: "Some parts of this site can load content from other services (videos, maps).",
+  consentOk: "OK",
+  consentAll: "Allow all",
+  consentEssential: "Only essential",
+  privacyPolicy: "Privacy policy",
+  copied: "Copied",
+  linkCopied: "Link copied",
+};
+const announce = chrome.announcement;
+const consent = chrome.consent.mode !== "none" ? chrome.consent : undefined;
+// Read before the body paints, so a closed bar is never drawn (the edge cache ignores cookies).
+const needsPrefs = Boolean(announce?.dismissible || consent);
+const needsScript =
+  needsPrefs ||
+  (!h.hidden &&
+    (h.behavior !== "static" ||
+      h.shrink ||
+      h.transparent ||
+      dialog ||
+      headerNav.some((i) => i.children.length > 0)));
+const copyright = f.copyright
+  ? copyrightText(f.copyright, site.name, new Date().getFullYear())
+  : undefined;
+// RFC-0026: icons in the site's weight (26c), the theme's own drawings over the set's (26d).
+const iconWeight = String(site.theme.config?.iconWeight ?? "regular");
+const icon = (name: string, o: { label?: string; className?: string } = {}) =>
+  renderIcon(name, { ...o, weight: iconWeight, set: iconSet });
+// The site's design settings (RFC-0017 §1): typed values only, defaults where unset.
+const look = themeVariables(site, themeSettings);
+// A page's own motion level wins over the site's (RFC-0024 §1).
+if (
+  motion &&
+  ["none", "subtle", "standard", "expressive"].includes(motion) &&
+  look.attributes["data-ch-motion"]
+)
+  look.attributes["data-ch-motion"] = motion;
+const fonts = PAIRING_PRELOADS[look.attributes["data-ch-type-pairing"] ?? ""] ?? [];
+const header = { on: "text-zinc-900", off: "hover:text-zinc-900" };
+const below = { on: "text-zinc-700", off: "hover:text-zinc-700" };
+---
+<!doctype html>
+<html lang={meta.lang} dir={meta.dir ?? "ltr"} {...look.attributes} data-ch-announcement={announce?.dismissible ? announce.id : undefined}>
+  <head>
+    {/* is:inline keeps it a classic script where it is: it must run before the body paints. */}
+    {needsPrefs && <script is:inline src={PREFS_SCRIPT.path}></script>}
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <SeoHead meta={meta} />
+    {/* public/: static assets, answered before the Site Worker runs (no render, no analytics event) */}
+    <link rel="icon" href="/favicon.ico" sizes="32x32" />
+    <link rel="icon" href="/favicon.svg" type="image/svg+xml" />
+    <meta name="generator" content="Cloudhal" />
+    {fonts.map((href) => <link rel="preload" href={href} as="font" type="font/woff2" crossorigin />)}
+    {look.style && <style set:html={look.style} />}
+  </head>
+  <body class="ch-body min-h-screen antialiased">
+    <a class="ch-skip" href="#main">{w.skip}</a>
+    {announce && (
+      <div class="ch-announcement" data-tone={announce.tone} role="region" aria-label={bw.announcement}>
+        <p class="ch-announcement__text">
+          {announce.text}
+          {announce.link && <a href={safe(announce.link.href)}>{announce.link.label}</a>}
+        </p>
+        {announce.dismissible && (
+          <button type="button" class="ch-announcement__close" data-ch-dismiss={announce.id} aria-label={bw.dismiss} hidden>
+            <Fragment set:html={icon("close")} />
+          </button>
+        )}
+      </div>
+    )}
+    {!h.hidden && (
+      <header
+        class="ch-header"
+        data-layout={h.layout}
+        data-behavior={h.behavior}
+        data-width={h.width}
+        data-surface={h.surface}
+        data-collapse={collapse}
+        data-shrink={h.shrink ? "" : undefined}
+        data-transparent={h.transparent ? "" : undefined}
+        data-over={h.transparent ? h.over : undefined}
+      >
+        <div class="ch-header__inner">
+          <a href="/" class="ch-header__brand">
+            {brand?.logo ? (
+              <Fragment>
+                <img class="ch-logo" data-size={brand.logoHeight ?? "m"} data-variant={brand.logoDark ? "light" : undefined} src={brand.logo.src} alt={brand.logo.alt || site.name} />
+                {brand.logoDark && <img class="ch-logo" data-size={brand.logoHeight ?? "m"} data-variant="dark" src={brand.logoDark.src} alt={brand.logoDark.alt || site.name} />}
+              </Fragment>
+            ) : (
+              site.name
+            )}
+          </a>
+          {utilityNav.length > 0 && (
+            <nav class="ch-header__utility" aria-label={w.secondary}>
+              {utilityNav.map((item) => <NavLink item={item} {...header} />)}
+            </nav>
+          )}
+          {headerNav.length > 0 && (
+            <nav class="ch-header__nav" aria-label={w.main}>
+              {headerNav.map((item, i) => item.children.length > 0 ? <NavMenu item={item} {...header} popover={`ch-sub-${i}`} iconWeight={iconWeight} /> : <NavLink item={item} {...header} />)}
+            </nav>
+          )}
+          {actions.length > 0 && (
+            <div class="ch-header__actions">
+              {actions.map((a) =>
+                a.kind === "button" && a.label && a.href ? (
+                  <a class={`ch-button ch-button--${a.variant ?? "primary"}`} href={safe(a.href)}>{a.label}</a>
+                ) : a.kind === "locale" && languages ? (
+                  <details class="ch-languages">
+                    <summary>{languages.label}</summary>
+                    <ul>
+                      {languages.items.map((l) => <li><a href={l.href} lang={l.locale} hreflang={l.locale} aria-current={l.current ? "true" : undefined}>{l.name}</a></li>)}
+                    </ul>
+                  </details>
+                ) : a.kind === "search" && search ? (
+                  <form class="ch-header-search" method="get" action="/search" role="search" data-ch-search-open={search.modal ? "" : undefined}>
+                    <label for="ch-header-q" class="sr-only">{search.label}</label>
+                    <input id="ch-header-q" type="search" name="q" value={search.query ?? ""} maxlength="200" placeholder={search.placeholder} />
+                    <button type="submit" class="sr-only">{search.button}</button>
+                  </form>
+                ) : null,
+              )}
+            </div>
+          )}
+          {(headerNav.length > 0 || utilityNav.length > 0 || searchAction) && (
+            <div class="ch-menu-slot">
+              {dialog ? (
+                <a class="ch-menu__open" href="/menu" data-ch-dialog="ch-menu">
+                  <Fragment set:html={icon("menu")} />
+                  {w.menu}
+                </a>
+              ) : (
+                <details class="ch-menu">
+                  <summary class="ch-menu__open">
+                    <Fragment set:html={icon("menu")} />
+                    {w.menu}
+                  </summary>
+                  <MenuPanel iconWeight={iconWeight} nav={headerNav} utility={utilityNav} search={searchAction} words={w} idSuffix="drop" />
+                </details>
+              )}
+            </div>
+          )}
+        </div>
+      </header>
+    )}
+    {!h.hidden && dialog && (
+      <dialog id="ch-menu" class="ch-menu__dialog" data-style={h.mobileStyle} aria-label={w.menu}>
+        <div class="ch-menu__bar">
+          <span class="ch-header__brand">{site.name}</span>
+          <form method="dialog"><button class="ch-menu__close" type="submit">{w.closeMenu}</button></form>
+        </div>
+        <MenuPanel iconWeight={iconWeight} nav={headerNav} utility={utilityNav} search={searchAction} words={w} idSuffix="dialog" />
+      </dialog>
+    )}
+    <main id="main" tabindex="-1" class="mx-auto max-w-3xl px-4 pb-16">
+      {notice && (
+        <p
+          class="ch-gate-notice mb-6 rounded-md border border-amber-300 bg-amber-50 px-4 py-3 text-sm text-amber-900"
+          role="status"
+          data-gate={notice.state}
+          data-gate-at={notice.at}
+        >{notice.text}</p>
+      )}
+      {translation && (
+        <p class="ch-translation-notice mb-6 rounded-md border border-sky-300 bg-sky-50 px-4 py-3 text-sm text-sky-900" role="note">
+          {translation.text}
+          {translation.original && <> <a href={translation.original.href} lang={translation.original.lang} hreflang={translation.original.lang}>{translation.original.text}</a></>}
+        </p>
+      )}
+      <slot />
+    </main>
+    {!f.hidden && (
+      <footer class="ch-footer" data-layout={f.layout} data-surface={f.surface}>
+        <div class="ch-footer__inner">
+          {f.region && (
+            <div class="ch-footer__region">
+              <slot name="footer-region" />
+            </div>
+          )}
+          {f.cta && (
+            <div class="ch-footer__cta">
+              <p class="ch-footer__cta-heading">{f.cta.heading}</p>
+              <a class="ch-button ch-button--primary" href={safe(f.cta.href)}>{f.cta.label}</a>
+            </div>
+          )}
+          {(f.columns.length > 0 || (f.layout !== "minimal" && f.layout !== "simple" && (f.tagline || social.length > 0))) && (
+            <div class="ch-footer__top">
+              <div class="ch-footer__about">
+                <a href="/" class="ch-footer__brand">{brand?.logo ? <img class="ch-logo" data-size="s" src={brand.logo.src} alt={brand.logo.alt || site.name} /> : site.name}</a>
+                {f.tagline && <p class="ch-footer__tagline">{f.tagline}</p>}
+                {social.length > 0 && (
+                  <ul class="ch-footer__social" aria-label={w.social}>
+                    {social.map((l) => <li><a href={safe(l.href)} rel="me noopener" aria-label={SOCIAL[l.network] ?? l.network} class="ch-social-link"><Fragment set:html={icon(l.network)} /></a></li>)}
+                  </ul>
+                )}
+              </div>
+              {f.columns.map((c) => (menus[c.menu] ?? []).length > 0 && (
+                <nav class="ch-footer__col" aria-label={c.heading}>
+                  <p class="ch-footer__heading">{c.heading}</p>
+                  <ul>
+                    {(menus[c.menu] ?? []).flatMap((item) => [item, ...item.children]).map((item) => <li><NavLink item={item} {...below} /></li>)}
+                  </ul>
+                </nav>
+              ))}
+            </div>
+          )}
+          {footerLanguages && (
+            <nav class="ch-footer__languages" aria-label={footerLanguages.label}>
+              <ul>
+                {footerLanguages.items.map((l) => <li><a href={l.href} lang={l.locale} hreflang={l.locale} aria-current={l.current ? "true" : undefined}>{l.name}</a></li>)}
+              </ul>
+            </nav>
+          )}
+          <div class="ch-footer__legal">
+            {copyright && <span>{copyright}</span>}
+            {f.layout === "simple" && f.tagline && <span>{f.tagline}</span>}
+            {f.layout === "simple" && social.length > 0 && (
+              <ul class="ch-footer__social" aria-label={w.social}>
+                {social.map((l) => <li><a href={safe(l.href)} rel="me noopener" aria-label={SOCIAL[l.network] ?? l.network} class="ch-social-link"><Fragment set:html={icon(l.network)} /></a></li>)}
+              </ul>
+            )}
+            {f.credit && <span>{w.credit}</span>}
+            {legalNav ? (
+              legalNav.length > 0 && (
+                <nav class="flex flex-wrap gap-4" aria-label={f.legal === "footer" ? w.footer : w.legal}>
+                  {legalNav.map((item) => item.children.length > 0 ? <NavMenu item={item} {...below} iconWeight={iconWeight} /> : <NavLink item={item} {...below} />)}
+                </nav>
+              )
+            ) : (
+              f.fallbackRss && <a href="/rss.xml" class="hover:text-zinc-700">RSS</a>
+            )}
+          </div>
+        </div>
+      </footer>
+    )}
+    {consent && (
+      <div class="ch-consent" data-ch-bar data-ch-consent-bar data-mode={consent.mode} role="region" aria-label={bw.privacy}>
+        <p class="ch-consent__text">
+          {consent.mode === "choices" ? bw.consentChoices : bw.consentNotice}
+          {consent.policy && <a href={safe(consent.policy)}>{bw.privacyPolicy}</a>}
+        </p>
+        <div class="ch-consent__actions">
+          {consent.mode === "choices" ? (
+            <Fragment>
+              <button type="button" class="ch-button ch-button--secondary" data-ch-consent-choice="essential" hidden>{bw.consentEssential}</button>
+              <button type="button" class="ch-button ch-button--primary" data-ch-consent-choice="all" hidden>{bw.consentAll}</button>
+            </Fragment>
+          ) : (
+            <button type="button" class="ch-button ch-button--primary" data-ch-consent-choice="ok" hidden>{bw.consentOk}</button>
+          )}
+        </div>
+      </div>
+    )}
+    {/* RFC-0025 25d: toasts land here (a live region already in the page, so they are announced). */}
+    <div class="ch-toasts" data-ch-toasts role="status" aria-live="polite" data-copied={bw.copied} data-link-copied={bw.linkCopied}></div>
+    {needsScript && <script type="module" src={CHROME_SCRIPT.path}></script>}
+    {/* RFC-0029 §6: the search modal, where the deployment answers searches. */}
+    {search?.modal && <SearchDialog label={search.label} placeholder={search.placeholder} words={search.modal} />}
+    {search?.modal && <script type="module" src={SEARCH_SCRIPT.path}></script>}
+  </body>
+</html>
diff --git a/packages/cli/test/fixtures/theme-v0.4.0/src/middleware.ts b/packages/cli/test/fixtures/theme-v0.4.0/src/middleware.ts
new file mode 100644
index 00000000..96951f7c
--- /dev/null
+++ b/packages/cli/test/fixtures/theme-v0.4.0/src/middleware.ts
@@ -0,0 +1,2 @@
+// RFC-0033 §4: internal links of a localized page stay in its locale.
+export { onRequest } from "@cloudhal/astro-renderer/locale-middleware";
diff --git a/packages/cli/test/fixtures/theme-v0.4.0/src/pages/[...path].astro b/packages/cli/test/fixtures/theme-v0.4.0/src/pages/[...path].astro
new file mode 100644
index 00000000..4fd8c18c
--- /dev/null
+++ b/packages/cli/test/fixtures/theme-v0.4.0/src/pages/[...path].astro
@@ -0,0 +1,460 @@
+---
+import config from "virtual:cloudhal/config";
+import { archiveSummaries } from "@cloudhal/astro-renderer/archive";
+import {
+  addCacheTags,
+  listCacheTag,
+  nodeCacheTag,
+  termCacheTag,
+} from "@cloudhal/astro-renderer/cache-tags";
+import { commentsJsonLd, loadComments } from "@cloudhal/astro-renderer/comments";
+import { Comments, Sections } from "@cloudhal/astro-renderer/components";
+import { EMBED_HEADER, usesEmbeds } from "@cloudhal/astro-renderer/embeds";
+import { gateNotice } from "@cloudhal/astro-renderer/gates";
+import {
+  alternatesFor,
+  linkLocalizer,
+  localeRequest,
+  localeUrl,
+  localizedPath,
+  localizeHead,
+} from "@cloudhal/astro-renderer/locales";
+import {
+  loadAssetIndex,
+  type MediaContext,
+  placeholderBudget,
+} from "@cloudhal/astro-renderer/media";
+import {
+  type ActiveNavItem,
+  type ActiveRoute,
+  activeItem,
+  derivedNavigation,
+  markActive,
+  markCurrent,
+  navigationCacheTags,
+} from "@cloudhal/astro-renderer/navigation";
+import { notFoundPage, notFoundPageIds } from "@cloudhal/astro-renderer/not-found";
+import { resolveRoute, staticPaths } from "@cloudhal/astro-renderer/routing";
+import { getSource, peerEditions } from "@cloudhal/astro-renderer/runtime";
+import { searchAvailable } from "@cloudhal/astro-renderer/search";
+import {
+  archiveHead,
+  entryHead,
+  pageHead,
+  searchHead,
+  siteOrigin,
+} from "@cloudhal/astro-renderer/seo";
+import { loadSurfaceSources, surfaceSources } from "@cloudhal/astro-renderer/surfaces";
+import {
+  entryTaxonomy,
+  loadTaxonomyIndex,
+  relatedEntries,
+  termAncestors,
+} from "@cloudhal/astro-renderer/taxonomy";
+import { themeVariables } from "@cloudhal/astro-renderer/theme-settings";
+import type { ContentEntry } from "@cloudhal/core-contracts";
+/**
+ * One route for the whole graph (RFC-0002 §7 order): a Page answers at its `path`; an article at
+ * its collection's permalink (`/<collection>/<slug>` by default, RFC-0038); a category or tag archive at `<basePath>/<slug>[/page/<n>]`. Anything
+ * else asks the site's redirects (301 with the query kept), then answers 410 for a retired term
+ * or 404. Term feeds live next door in `[...path]/rss.xml.ts`. The header renders the `primary`
+ * menu, or the derived header without one; a `footer` menu replaces the footer links (RFC-0003).
+ * Articles end with reader comments when the site has them on (RFC-0007; `?comments=<n>` pages).
+ * `/search?q=` is the site search (RFC-0019 §3) where the deployment answers it: never cached,
+ * never indexed, and its form sits in the header. A miss answers 404 with the site's page at
+ * `/404` in the request's locale, else the theme's own not-found page in that locale.
+ */
+import { resolveChrome } from "@cloudhal/core-ts/chrome";
+import { blockTypes } from "../blocks.ts";
+import Archive from "../components/Archive.astro";
+import Article from "../components/Article.astro";
+import Breadcrumbs from "../components/Breadcrumbs.astro";
+import MenuPanel from "../components/MenuPanel.astro";
+import NotFound from "../components/NotFound.astro";
+import PostTerms from "../components/PostTerms.astro";
+import RelatedPosts from "../components/RelatedPosts.astro";
+import Search from "../components/Search.astro";
+import { fontLinkHeader, PAIRING_PRELOADS } from "../fonts.ts";
+import { iconSet } from "../icons.ts";
+import Base from "../layouts/Base.astro";
+import { themeSettings } from "../settings.ts";
+import {
+  ARCHIVE_PAGE_SIZE,
+  blocks,
+  collectionIndex,
+  components,
+  NAV_CATEGORIES,
+  RELATED_POSTS,
+  strings,
+} from "../theme.ts";
+
+export async function getStaticPaths() {
+  const source = await getSource(config);
+  const site = await source.site();
+  const { pages } = await staticPaths(source, { perPage: ARCHIVE_PAGE_SIZE });
+  // RFC-0025 §2: the phone menu's page, unless the site has a page there.
+  if (!pages.includes("/menu")) pages.push("/menu");
+  // RFC-0033: every other locale on this host under its prefix (archives follow in a later step).
+  const domains = site.localization?.domains ?? {};
+  const urls = pages.map((p) => localizedPath(site, site.defaultLocale, p));
+  for (const locale of site.locales)
+    if (locale !== site.defaultLocale && domains[locale] === undefined)
+      for (const p of [
+        ...(await staticPaths(source, { perPage: ARCHIVE_PAGE_SIZE, locale })).pages,
+        "/menu",
+      ])
+        urls.push(localizedPath(site, locale, p));
+  return [...new Set(urls)].map((path) => ({
+    params: { path: path === "/" ? undefined : path.slice(1) },
+  }));
+}
+
+const source = await getSource(config, Astro);
+if (!source) return new Response("This site has not been published yet.", { status: 503 });
+const site = await source.site();
+const requested = Astro.params.path ? `/${Astro.params.path}` : "/";
+// RFC-0033 §4: the locale is in the path prefix or the host; a non-canonical locale URL moves.
+const lr = localeRequest(site, Astro.url.host, requested);
+if (lr.redirect !== undefined)
+  return new Response(null, {
+    status: 301,
+    headers: { location: `${lr.redirect}${Astro.url.search}` },
+  });
+const locale = lr.locale;
+const path = lr.path;
+let route = await resolveRoute(source, path, {
+  perPage: ARCHIVE_PAGE_SIZE,
+  search: Astro.url.search,
+  locale,
+});
+// RFC-0033 §4: a site may show a missing translation in its original language, with a notice,
+// never indexed and never in `hreflang` (`localization.fallback`).
+let shownIn = locale;
+if (
+  route.kind === "not-found" &&
+  locale !== site.defaultLocale &&
+  site.localization?.fallback === "default-with-notice"
+) {
+  const original = await resolveRoute(source, path, {
+    perPage: ARCHIVE_PAGE_SIZE,
+    search: Astro.url.search,
+    locale: site.defaultLocale,
+  });
+  if (original.kind === "page" || original.kind === "entry") {
+    route = original;
+    shownIn = site.defaultLocale;
+  }
+}
+if (route.kind === "redirect")
+  return new Response(null, {
+    status: route.status,
+    headers: {
+      location: route.location.startsWith("/")
+        ? localizedPath(site, locale, route.location)
+        : route.location,
+    },
+  });
+if (route.kind === "gone") return new Response(null, { status: 410 });
+// RFC-0025 §2: `/menu` is the phone menu as a page (the menu link's target without JavaScript),
+// unless the site has a page there.
+const isMenu = route.kind === "not-found" && path === "/menu";
+// Reader comments (RFC-0007): tags the response `cloudhal-comments-<id>` and reads the thread;
+// `?comments=<n>` past the last page is a miss.
+const comments =
+  route.kind === "entry"
+    ? await loadComments(config, Astro, route.entry, { locale, site })
+    : undefined;
+// A miss (RFC-0033 §4) answers 404 in the request's locale: the site's page at `/404` (its
+// translation, or the original under `default-with-notice`), else the theme's NotFound below.
+// The authored page answers 404 at its own path too.
+const notFound =
+  (!isMenu && (route.kind === "not-found" || route.kind === "feed")) ||
+  comments?.notFound === true ||
+  (route.kind === "page" && notFoundPageIds(await source.pages()).has(route.page.id));
+if (notFound) {
+  Astro.response.status = 404;
+  const authored = route.kind === "page" ? route.page : await notFoundPage(source, site, locale);
+  route = authored ? { kind: "page", page: authored } : { kind: "not-found" };
+  shownIn = authored?.locale ?? locale;
+}
+
+// Search results (RFC-0019 §3) are per query: never in the edge cache, never in search engines.
+if (route.kind === "search") {
+  Astro.response.headers.set("cache-control", "no-store");
+  Astro.response.headers.set("cloudflare-cdn-cache-control", "no-store");
+  Astro.response.headers.set("x-robots-tag", "noindex");
+}
+const origin = siteOrigin(site, Astro.url);
+// Internal links of a localized page stay in its locale (`src/middleware.ts`).
+const links = await linkLocalizer(source, locale, origin);
+if (links) (Astro.locals as { cloudhalLinks?: (p: string) => string }).cloudhalLinks = links;
+// Media (RFC-0004): assets resolve `assetId` and `asset:<id>`; previews never use transformations.
+const media: MediaContext = {
+  assets: await loadAssetIndex(source),
+  locale,
+  defaultLocale: site.defaultLocale,
+  transform: config.media?.transform ?? "none",
+  preview: Astro.response.headers.get("x-cloudhal-mode") === "preview",
+  onMiss: (id) =>
+    console.warn(`cloudhal: ${path} refers to ${id}, which this version does not have`),
+  // RFC-0026: icons in the site's weight, the theme's own drawings over the set's.
+  icons: { weight: String(site.theme.config?.iconWeight ?? "regular"), set: iconSet },
+  // RFC-0028: one placeholder allowance for the whole page.
+  budget: placeholderBudget(),
+  // RFC-0038: entry links follow the site's collection permalinks.
+  permalinks: site,
+};
+const t = strings(locale, site.theme.config?.strings);
+const index = route.kind === "archive" ? route.index : await loadTaxonomyIndex(source, locale);
+const primary = await source.navigation("primary", locale, { collectionIndex });
+const footerMenu = await source.navigation("footer", locale, { collectionIndex });
+const derivedCategories = !primary && NAV_CATEGORIES;
+const needsEntries = derivedCategories || (route.kind === "entry" && RELATED_POSTS > 0);
+const all = needsEntries ? await source.allEntries(locale) : [];
+const categories = derivedCategories
+  ? archiveSummaries(
+      index,
+      all.filter((e) => e.status === "published"),
+    ).filter((a) => a.taxonomy.key === "category" && !a.term.parentId)
+  : [];
+// The active item: exact path, longest prefix, then the entry's category or collection.
+const activeRoute: ActiveRoute = {
+  path,
+  ...(route.kind === "entry" ? { entry: route.entry } : {}),
+  ...(route.kind === "archive" ? { archiveTermId: route.archive.term.id } : {}),
+};
+const ancestors = (id: string) => {
+  const term = index.terms.get(id);
+  return term ? termAncestors(index, term).map((a) => a.id) : [];
+};
+// The derived header lists top-level pages, never the not-found page.
+const allPages = await source.pages();
+const notFoundIds = notFoundPageIds(allPages);
+const navPages = allPages.filter((p) => !notFoundIds.has(p.id));
+const nav = primary
+  ? markActive(primary, activeItem(primary, activeRoute, ancestors))
+  : markCurrent(derivedNavigation(site, navPages, categories, locale), path);
+const footer = footerMenu
+  ? markActive(footerMenu, activeItem(footerMenu, activeRoute, ancestors))
+  : undefined;
+// RFC-0025: the page's header and footer, and the menus they name beyond primary and footer.
+const chrome = resolveChrome(site, route.kind === "page" ? route.page : undefined);
+const menus: Record<string, ActiveNavItem[] | undefined> = { primary: nav, footer };
+const extraMenus = await Promise.all(
+  chrome.menus
+    .filter((key) => !(key in menus))
+    .map(async (key) => [key, await source.navigation(key, locale, { collectionIndex })] as const),
+);
+for (const [key, menu] of extraMenus)
+  menus[key] = menu ? markActive(menu, activeItem(menu, activeRoute, ancestors)) : undefined;
+// Edge-cache tags next to the site tag (published responses on Cloudflare only), so a publish
+// purges only the responses that show what changed (`cache-tags.ts`). The tags a purge must reach
+// come first; the header's categories (names shown on every page) last.
+const tags: string[] = [];
+
+let entries: Record<string, ContentEntry[]> = {};
+let surfaces: Awaited<ReturnType<typeof loadSurfaceSources>> = {};
+let terms = entryTaxonomy(undefined, { tags: [] });
+let related: ContentEntry[] = [];
+if (route.kind === "page") {
+  tags.push(nodeCacheTag(route.page.id));
+  // Lists of the site's entries change with any entry: the site's list tag covers them.
+  if (
+    route.page.sections.some(
+      (s) => s.kind === "contentList" || (s.kind === "surface" && surfaceSources(s).length > 0),
+    )
+  )
+    tags.push(listCacheTag(site.id));
+  // Generated UI (RFC-0020 §3): entry sources load from the same source as the page.
+  surfaces = await loadSurfaceSources(source, route.page.sections);
+  const collections = [
+    ...new Set(
+      route.page.sections.filter((s) => s.kind === "contentList").map((s) => s.collection),
+    ),
+  ];
+  entries = Object.fromEntries(
+    await Promise.all(collections.map(async (c) => [c, await source.entries(c, locale)])),
+  );
+  // A section with a `filter` (RFC-0002 §5) lists its own entries, keyed by section id.
+  for (const s of route.page.sections)
+    if (s.kind === "contentList" && s.filter)
+      entries[s.id] = await source
+        .entriesByFilter(`collection:${s.collection}+${s.filter}`, { locale })
+        .catch((err: unknown) => {
+          console.warn(`cloudhal: section ${s.id} has an invalid filter: ${String(err)}`);
+          return [];
+        });
+} else if (route.kind === "entry") {
+  terms = entryTaxonomy(index, route.entry);
+  related = relatedEntries(route.entry, all, index, RELATED_POSTS);
+  tags.push(
+    nodeCacheTag(route.entry.id),
+    // the related posts it links to: a retitled or removed one purges this page too
+    ...related.map((e) => nodeCacheTag(e.id)),
+    ...terms.groups.flatMap((g) => g.terms.map((s) => termCacheTag(s.id))),
+    ...terms.trail.map((s) => termCacheTag(s.id)),
+  );
+} else if (route.kind === "archive") {
+  tags.push(
+    // which entries the archive lists (and how many pages it has) changes with its membership
+    listCacheTag(route.archive.term.id),
+    termCacheTag(route.archive.term.id),
+    ...route.archive.trail.map((s) => termCacheTag(s.id)),
+    ...route.archive.entries.map((e) => nodeCacheTag(e.id)),
+  );
+}
+tags.push(
+  ...categories.map((a) => termCacheTag(a.term.id)),
+  ...navigationCacheTags(primary),
+  ...navigationCacheTags(footerMenu),
+  ...extraMenus.flatMap(([, menu]) => navigationCacheTags(menu)),
+);
+// RFC-0025 §2: the footer's surface region loads its entry sources like a page's surfaces.
+const regionSources = chrome.footer.region
+  ? await loadSurfaceSources(source, [chrome.footer.region])
+  : {};
+if (chrome.footer.region && surfaceSources(chrome.footer.region).length > 0)
+  tags.push(listCacheTag(site.id));
+addCacheTags(Astro.response.headers, tags);
+
+// Video players (RFC-0015 §4): the Site Worker allows their frames on this page only.
+if (
+  (route.kind === "page" && usesEmbeds({ sections: route.page.sections })) ||
+  (route.kind === "entry" &&
+    route.entry.body.format === "markdown" &&
+    usesEmbeds({ markdown: route.entry.body.value }))
+)
+  Astro.response.headers.set(EMBED_HEADER, "1");
+
+// Time gates (RFC-0008 §7.3): the published source never returns an embargoed or expired page or
+// entry (it is a 404), so a gate that is closed here means a preview or `cloudhal dev`: say so.
+const gated = route.kind === "page" ? route.page : route.kind === "entry" ? route.entry : undefined;
+const gate = gated ? gateNotice(gated, site, locale, Date.now()) : undefined;
+const notice = gate && { state: gate.state, at: gate.at, text: t[gate.state](gate.when) };
+
+const head =
+  route.kind === "page"
+    ? pageHead(site, route.page, origin, media)
+    : route.kind === "entry"
+      ? entryHead(site, route.entry, origin, terms, media, commentsJsonLd(comments, origin))
+      : route.kind === "archive"
+        ? archiveHead(site, route.archive, origin, media)
+        : route.kind === "search"
+          ? searchHead(site, route.search.query, origin, locale)
+          : {
+              ...searchHead(site, "", origin, locale),
+              title: `${isMenu ? t.menu : t.notFoundTitle} · ${site.name}`,
+              canonical: `${origin}${isMenu ? "/menu" : path}`,
+            };
+// RFC-0033 §4: self-canonical in the locale, `lang`/`dir`, and the `hreflang` set from the group.
+const fallback = shownIn !== locale;
+const alternates =
+  gated && !fallback && !notFound
+    ? // RFC-0034 §6: language editions published by other sites of the project, on their hosts.
+      await alternatesFor(source, gated, origin, await peerEditions(config, gated))
+    : [];
+const localized = localizeHead(head, site, {
+  locale: shownIn,
+  origin,
+  alternates,
+  ...(gated?.translation ? { translation: gated.translation } : {}),
+});
+const meta = fallback || notFound ? { ...localized, robots: "noindex,follow" } : localized;
+Astro.response.headers.set("content-language", shownIn);
+// The pairing's fonts as a Link header too (Early Hints), not only as <link rel=preload> in <head>.
+const pairing = themeVariables(site, themeSettings).attributes["data-ch-type-pairing"];
+const preloads = PAIRING_PRELOADS[pairing ?? ""] ?? [];
+if (preloads.length) Astro.response.headers.set("link", fontLinkHeader(preloads));
+// The reader's notice (RFC-0033 §4): machine output until a person reviews it (or always, when
+// the site asks), a page shown in its original language, each with a link to the original.
+const original = alternates.find((a) => a.original && !a.current);
+const tr = gated?.translation;
+const machine =
+  tr?.method === "machine" ||
+  (tr?.method === "machine-reviewed" && site.localization?.label === "always");
+const translationNotice = fallback
+  ? { text: t.notTranslated }
+  : machine
+    ? {
+        text: tr?.review ? t.machineReviewed : t.machineTranslated,
+        ...(original
+          ? { original: { href: original.href, text: t.readOriginal, lang: original.locale } }
+          : {}),
+      }
+    : undefined;
+// The language switcher: this page's versions, else each language's home page.
+const nativeName = (l: string) => {
+  try {
+    return new Intl.DisplayNames([l], { type: "language" }).of(l) ?? l;
+  } catch {
+    return l;
+  }
+};
+// RFC-0034 §6: languages a language edition publishes (another site) follow the site's own.
+const editionLocales = alternates
+  .map((a) => a.locale)
+  .filter((l) => l !== "x-default" && !site.locales.includes(l));
+const languages =
+  site.locales.length + editionLocales.length > 1
+    ? {
+        label: t.languages,
+        items: [...site.locales, ...editionLocales].map((l) => ({
+          locale: l,
+          name: nativeName(l),
+          href: alternates.find((a) => a.locale === l)?.href ?? localeUrl(site, l, "/", origin),
+          current: l === locale,
+        })),
+      }
+    : undefined;
+const searchForm = searchAvailable(config, source)
+  ? {
+      label: t.searchLabel,
+      placeholder: t.searchPlaceholder,
+      button: t.search,
+      modal: t.searchModal,
+      ...(route.kind === "search" ? { query: route.search.query } : {}),
+    }
+  : undefined;
+---
+<Base site={site} meta={meta} nav={nav} footer={footer} notice={notice} translation={translationNotice} languages={languages} search={searchForm} motion={route.kind === "page" ? route.page.motion : undefined} chrome={chrome} menus={menus} words={{ skip: t.skipToContent, main: t.mainMenu, secondary: t.secondaryMenu, menu: t.menu, closeMenu: t.closeMenu, footer: t.footerMenu, legal: t.legalMenu, social: t.socialLinks, credit: t.builtWith }} barWords={{ announcement: t.announcement, dismiss: t.dismiss, privacy: t.privacy, consentNotice: t.consentNotice, consentChoices: t.consentChoices, consentOk: t.consentOk, consentAll: t.consentAll, consentEssential: t.consentEssential, privacyPolicy: t.privacyPolicy, copied: t.copied, linkCopied: t.linkCopied }}>
+  {chrome.footer.region && (
+    <Fragment slot="footer-region">
+      <Sections sections={[chrome.footer.region]} entries={{}} components={components} blocks={blocks} blockTypes={blockTypes} media={media} surfaceSources={regionSources} />
+    </Fragment>
+  )}
+  {isMenu && (
+    <div class="ch-menu-page">
+      <h1>{t.menu}</h1>
+      <MenuPanel
+        iconWeight={media.icons?.weight}
+        nav={chrome.header.nav === "primary" ? nav : (menus[chrome.header.nav] ?? [])}
+        utility={chrome.header.utility ? (menus[chrome.header.utility] ?? []) : []}
+        search={searchForm}
+        words={{ main: t.mainMenu, secondary: t.secondaryMenu }}
+        idSuffix="page"
+      />
+    </div>
+  )}
+  {route.kind === "page" && (
+    <Sections sections={route.page.sections} entries={entries} components={components} blocks={blocks} blockTypes={blockTypes} media={media} surfaceSources={surfaces} />
+  )}
+  {route.kind === "entry" && (
+    <Fragment>
+      <Breadcrumbs
+        label={t.breadcrumb}
+        items={[
+          { name: t.home, href: "/" },
+          ...terms.trail.map((s) => ({ name: s.name, href: s.href })),
+          { name: route.entry.title },
+        ]}
+      />
+      <Article entry={route.entry} terms={terms} locale={locale} t={t} media={media} blocks={blocks} blockTypes={blockTypes} />
+      <PostTerms taxonomy={terms} locale={locale} />
+      <RelatedPosts title={t.related} entries={related} locale={locale} media={media} />
+      <Comments view={comments} />
+    </Fragment>
+  )}
+  {route.kind === "archive" && <Archive archive={route.archive} t={t} media={media} />}
+  {route.kind === "search" && <Search search={route.search} locale={locale} t={t} />}
+  {route.kind === "not-found" && !isMenu && <NotFound t={t} search={searchForm !== undefined} />}
+</Base>
diff --git a/packages/cli/test/fixtures/theme-v0.4.0/src/pages/[...path]/llms.txt.ts b/packages/cli/test/fixtures/theme-v0.4.0/src/pages/[...path]/llms.txt.ts
new file mode 100644
index 00000000..97a37e4f
--- /dev/null
+++ b/packages/cli/test/fixtures/theme-v0.4.0/src/pages/[...path]/llms.txt.ts
@@ -0,0 +1,40 @@
+import config from "virtual:cloudhal/config";
+import { addCacheTags, listCacheTag } from "@cloudhal/astro-renderer/cache-tags";
+import { llmsTxt } from "@cloudhal/astro-renderer/locale-feeds";
+import { localeRequest } from "@cloudhal/astro-renderer/locales";
+import { getSource } from "@cloudhal/astro-renderer/runtime";
+import { siteOrigin } from "@cloudhal/astro-renderer/seo";
+import type { APIRoute } from "astro";
+
+/** Static builds: `/<locale>/llms.txt` for every other locale served on this host. */
+export async function getStaticPaths() {
+  const source = await getSource(config);
+  const site = await source.site();
+  const domains = site.localization?.domains ?? {};
+  return site.locales
+    .filter(
+      (l) =>
+        (l !== site.defaultLocale || site.localization?.routing === "prefix-all") && !domains[l],
+    )
+    .map((l) => ({ params: { path: l } }));
+}
+
+/** A locale's `llms.txt` (RFC-0033): `/<locale>/llms.txt`; any other path is not found. */
+export const GET: APIRoute = async ({ request, url, params }) => {
+  const headers = new Headers();
+  const source = await getSource(config, { request, response: { headers } });
+  if (!source) return new Response("This site has not been published yet.", { status: 503 });
+  const site = await source.site();
+  const lr = localeRequest(site, url.host, `/${params.path ?? ""}`);
+  if (lr.path !== "/") return new Response(null, { status: 404 });
+  if (lr.redirect !== undefined)
+    return new Response(null, {
+      status: 301,
+      headers: { location: `${lr.redirect === "/" ? "" : lr.redirect}/llms.txt` },
+    });
+  headers.set("content-type", "text/plain; charset=utf-8");
+  addCacheTags(headers, [listCacheTag(site.id)]);
+  return new Response(await llmsTxt(source, { origin: siteOrigin(site, url), locale: lr.locale }), {
+    headers,
+  });
+};
diff --git a/packages/cli/test/fixtures/theme-v0.4.0/src/pages/[...path]/rss.xml.ts b/packages/cli/test/fixtures/theme-v0.4.0/src/pages/[...path]/rss.xml.ts
new file mode 100644
index 00000000..cd4a49b6
--- /dev/null
+++ b/packages/cli/test/fixtures/theme-v0.4.0/src/pages/[...path]/rss.xml.ts
@@ -0,0 +1,93 @@
+import config from "virtual:cloudhal/config";
+import {
+  addCacheTags,
+  listCacheTag,
+  nodeCacheTag,
+  termCacheTag,
+} from "@cloudhal/astro-renderer/cache-tags";
+import { archiveFeedXml, FEED_LIMIT } from "@cloudhal/astro-renderer/feeds";
+import { localeFeedXml } from "@cloudhal/astro-renderer/locale-feeds";
+import { localeRequest, localeUrl, localizedPath } from "@cloudhal/astro-renderer/locales";
+import { loadAssetIndex } from "@cloudhal/astro-renderer/media";
+import { resolveRoute, staticPaths } from "@cloudhal/astro-renderer/routing";
+import { getSource } from "@cloudhal/astro-renderer/runtime";
+import { siteOrigin } from "@cloudhal/astro-renderer/seo";
+import type { APIRoute } from "astro";
+import { ARCHIVE_PAGE_SIZE } from "../../theme.ts";
+
+const SUFFIX = "/rss.xml";
+
+/**
+ * Static builds: one feed per served archive of a taxonomy with `feed: true`, in every locale on
+ * this host, and each other locale's site feed (`/<locale>/rss.xml`, RFC-0033).
+ */
+export async function getStaticPaths() {
+  const source = await getSource(config);
+  const site = await source.site();
+  const domains = site.localization?.domains ?? {};
+  const paths: string[] = [];
+  for (const locale of site.locales) {
+    if (domains[locale] !== undefined) continue;
+    const { feeds } = await staticPaths(source, { perPage: ARCHIVE_PAGE_SIZE, locale });
+    paths.push(...feeds.map((p) => localizedPath(site, locale, p.slice(0, -SUFFIX.length))));
+    const home = localizedPath(site, locale, "/");
+    if (home !== "/") paths.push(home);
+  }
+  return [...new Set(paths)].map((p) => ({ params: { path: p.slice(1) } }));
+}
+
+/**
+ * A category's or tag's RSS feed (`<basePath>/<slug>/rss.xml`, RFC-0002 §7), or a locale's site
+ * feed (`/<locale>/rss.xml`), in the locale of the path or host. Old slugs follow their redirects
+ * (prefix redirects carry `/rss.xml` along); retired terms answer 410.
+ */
+export const GET: APIRoute = async ({ request, url, params }) => {
+  const headers = new Headers();
+  const source = await getSource(config, { request, response: { headers } });
+  if (!source) return new Response("This site has not been published yet.", { status: 503 });
+  const site = await source.site();
+  const origin = siteOrigin(site, url);
+  const lr = localeRequest(site, url.host, `/${params.path ?? ""}`);
+  if (lr.redirect !== undefined)
+    return new Response(null, {
+      status: 301,
+      headers: { location: `${lr.redirect === "/" ? "" : lr.redirect}${SUFFIX}` },
+    });
+  if (lr.path === "/") {
+    headers.set("content-type", "application/rss+xml; charset=utf-8");
+    addCacheTags(headers, [listCacheTag(site.id)]);
+    return new Response(await localeFeedXml(source, { origin, locale: lr.locale }), { headers });
+  }
+  const route = await resolveRoute(source, `${lr.path}${SUFFIX}`, {
+    perPage: ARCHIVE_PAGE_SIZE,
+    search: url.search,
+    locale: lr.locale,
+  });
+  if (route.kind === "redirect")
+    return new Response(null, {
+      status: route.status,
+      headers: {
+        location: route.location.startsWith("/")
+          ? localizedPath(site, lr.locale, route.location)
+          : route.location,
+      },
+    });
+  if (route.kind === "gone") return new Response(null, { status: 410 });
+  if (route.kind !== "feed") return new Response(null, { status: 404 });
+  headers.set("content-type", "application/rss+xml; charset=utf-8");
+  addCacheTags(headers, [
+    listCacheTag(route.archive.term.id),
+    termCacheTag(route.archive.term.id),
+    ...route.archive.entries.slice(0, FEED_LIMIT).map((e) => nodeCacheTag(e.id)),
+  ]);
+  const body = archiveFeedXml({
+    site,
+    origin,
+    locale: lr.locale,
+    linkOrigin: localeUrl(site, lr.locale, "", origin),
+    archive: route.archive,
+    taxonomy: route.index,
+    assets: await loadAssetIndex(source),
+  });
+  return new Response(body, { headers });
+};
diff --git a/packages/cli/test/fixtures/theme-v0.4.0/src/pages/[...path]/search.json.ts b/packages/cli/test/fixtures/theme-v0.4.0/src/pages/[...path]/search.json.ts
new file mode 100644
index 00000000..326807c5
--- /dev/null
+++ b/packages/cli/test/fixtures/theme-v0.4.0/src/pages/[...path]/search.json.ts
@@ -0,0 +1,23 @@
+import config from "virtual:cloudhal/config";
+import { linkLocalizer, localeRequest } from "@cloudhal/astro-renderer/locales";
+import { getSource } from "@cloudhal/astro-renderer/runtime";
+import { searchJsonResponse } from "@cloudhal/astro-renderer/search";
+import { siteOrigin } from "@cloudhal/astro-renderer/seo";
+import type { APIRoute } from "astro";
+
+/** Static builds have no search: nothing to write. */
+export function getStaticPaths() {
+  return [];
+}
+
+/** A locale's search modal endpoint, `/<locale>/search.json` (RFC-0029 §5, RFC-0033). */
+export const GET: APIRoute = async ({ request, url, params }) => {
+  const source = await getSource(config, { request, response: { headers: new Headers() } });
+  if (!source) return searchJsonResponse(config, source, url);
+  const site = await source.site();
+  const lr = localeRequest(site, url.host, `/${params.path ?? ""}`);
+  if (lr.path !== "/" || lr.redirect !== undefined)
+    return new Response(null, { status: 404, headers: { "cache-control": "no-store" } });
+  const localize = await linkLocalizer(source, lr.locale, siteOrigin(site, url));
+  return searchJsonResponse(config, source, url, { locale: lr.locale, localize });
+};
diff --git a/packages/cli/test/fixtures/theme-v0.4.0/src/pages/llms.txt.ts b/packages/cli/test/fixtures/theme-v0.4.0/src/pages/llms.txt.ts
new file mode 100644
index 00000000..dca67a6d
--- /dev/null
+++ b/packages/cli/test/fixtures/theme-v0.4.0/src/pages/llms.txt.ts
@@ -0,0 +1,21 @@
+import config from "virtual:cloudhal/config";
+import { addCacheTags, listCacheTag } from "@cloudhal/astro-renderer/cache-tags";
+import { llmsTxt } from "@cloudhal/astro-renderer/locale-feeds";
+import { hostLocale } from "@cloudhal/astro-renderer/locales";
+import { getSource } from "@cloudhal/astro-renderer/runtime";
+import { siteOrigin } from "@cloudhal/astro-renderer/seo";
+import type { APIRoute } from "astro";
+
+/** `llms.txt` (llmstxt.org) in the host's locale; other locales at `/<locale>/llms.txt` (RFC-0033). */
+export const GET: APIRoute = async ({ request, url }) => {
+  const headers = new Headers();
+  const source = await getSource(config, { request, response: { headers } });
+  if (!source) return new Response("This site has not been published yet.", { status: 503 });
+  const site = await source.site();
+  headers.set("content-type", "text/plain; charset=utf-8");
+  addCacheTags(headers, [listCacheTag(site.id)]);
+  const locale = hostLocale(site, url.host) ?? site.defaultLocale;
+  return new Response(await llmsTxt(source, { origin: siteOrigin(site, url), locale }), {
+    headers,
+  });
+};
diff --git a/packages/cli/test/fixtures/theme-v0.4.0/src/pages/robots.txt.ts b/packages/cli/test/fixtures/theme-v0.4.0/src/pages/robots.txt.ts
new file mode 100644
index 00000000..7bec4753
--- /dev/null
+++ b/packages/cli/test/fixtures/theme-v0.4.0/src/pages/robots.txt.ts
@@ -0,0 +1,13 @@
+import config from "virtual:cloudhal/config";
+import { robotsTxt } from "@cloudhal/astro-renderer/feeds";
+import { getSource } from "@cloudhal/astro-renderer/runtime";
+import { siteOrigin } from "@cloudhal/astro-renderer/seo";
+import type { APIRoute } from "astro";
+
+export const GET: APIRoute = async ({ request, url }) => {
+  const headers = new Headers();
+  const source = await getSource(config, { request, response: { headers } });
+  headers.set("content-type", "text/plain; charset=utf-8");
+  if (!source) return new Response("User-agent: *\nDisallow: /\n", { status: 503, headers });
+  return new Response(robotsTxt(siteOrigin(await source.site(), url)), { headers });
+};
diff --git a/packages/cli/test/fixtures/theme-v0.4.0/src/pages/rss.xml.ts b/packages/cli/test/fixtures/theme-v0.4.0/src/pages/rss.xml.ts
new file mode 100644
index 00000000..b92a06ae
--- /dev/null
+++ b/packages/cli/test/fixtures/theme-v0.4.0/src/pages/rss.xml.ts
@@ -0,0 +1,25 @@
+import config from "virtual:cloudhal/config";
+import { addCacheTags, listCacheTag } from "@cloudhal/astro-renderer/cache-tags";
+import { localeFeedXml } from "@cloudhal/astro-renderer/locale-feeds";
+import { hostLocale } from "@cloudhal/astro-renderer/locales";
+import { getSource } from "@cloudhal/astro-renderer/runtime";
+import { siteOrigin } from "@cloudhal/astro-renderer/seo";
+import type { APIRoute } from "astro";
+
+/**
+ * The site's RSS 2.0 feed: the newest published articles of every collection, in the host's
+ * locale (the default one, or a locale's own domain). Other locales: `/<locale>/rss.xml`.
+ */
+export const GET: APIRoute = async ({ request, url }) => {
+  const headers = new Headers();
+  const source = await getSource(config, { request, response: { headers } });
+  if (!source) return new Response("This site has not been published yet.", { status: 503 });
+  const site = await source.site();
+  headers.set("content-type", "application/rss+xml; charset=utf-8");
+  // Lists every collection's newest entries: any entry change purges it (`cloudhal-list-<site>`).
+  addCacheTags(headers, [listCacheTag(site.id)]);
+  const locale = hostLocale(site, url.host) ?? site.defaultLocale;
+  return new Response(await localeFeedXml(source, { origin: siteOrigin(site, url), locale }), {
+    headers,
+  });
+};
diff --git a/packages/cli/test/fixtures/theme-v0.4.0/src/pages/search.json.ts b/packages/cli/test/fixtures/theme-v0.4.0/src/pages/search.json.ts
new file mode 100644
index 00000000..4dbbfdef
--- /dev/null
+++ b/packages/cli/test/fixtures/theme-v0.4.0/src/pages/search.json.ts
@@ -0,0 +1,21 @@
+import config from "virtual:cloudhal/config";
+import { hostLocale, linkLocalizer } from "@cloudhal/astro-renderer/locales";
+import { getSource } from "@cloudhal/astro-renderer/runtime";
+import { searchJsonResponse } from "@cloudhal/astro-renderer/search";
+import { siteOrigin } from "@cloudhal/astro-renderer/seo";
+import type { APIRoute } from "astro";
+
+/**
+ * The search modal's endpoint (RFC-0029 §5): the same index and rules as `/search`, as JSON, in
+ * the host's locale (other locales: `/<locale>/search.json`, RFC-0033). Never cached, never
+ * indexed; a static build has no search and writes no file.
+ */
+export const GET: APIRoute = async ({ request, url }) => {
+  // The source's own headers (preview, cache tags) do not apply: the answer is never cached.
+  const source = await getSource(config, { request, response: { headers: new Headers() } });
+  if (!source) return searchJsonResponse(config, source, url);
+  const site = await source.site();
+  const locale = hostLocale(site, url.host) ?? site.defaultLocale;
+  const localize = await linkLocalizer(source, locale, siteOrigin(site, url));
+  return searchJsonResponse(config, source, url, { locale, localize });
+};
diff --git a/packages/cli/test/fixtures/theme-v0.4.0/src/pages/sitemap.xml.ts b/packages/cli/test/fixtures/theme-v0.4.0/src/pages/sitemap.xml.ts
new file mode 100644
index 00000000..7475ac2b
--- /dev/null
+++ b/packages/cli/test/fixtures/theme-v0.4.0/src/pages/sitemap.xml.ts
@@ -0,0 +1,23 @@
+import config from "virtual:cloudhal/config";
+import { addCacheTags, listCacheTag } from "@cloudhal/astro-renderer/cache-tags";
+import { sitemapXml } from "@cloudhal/astro-renderer/feeds";
+import { localizedSitemap } from "@cloudhal/astro-renderer/locale-feeds";
+import { getSource } from "@cloudhal/astro-renderer/runtime";
+import { siteOrigin } from "@cloudhal/astro-renderer/seo";
+import type { APIRoute } from "astro";
+
+/**
+ * Canonical, indexable URLs of the published site in every locale this host serves (RFC-0033):
+ * pages, articles and indexable archives, each with its language versions as `xhtml:link`.
+ */
+export const GET: APIRoute = async ({ request, url }) => {
+  const headers = new Headers();
+  const source = await getSource(config, { request, response: { headers } });
+  if (!source) return new Response("This site has not been published yet.", { status: 503 });
+  const site = await source.site();
+  headers.set("content-type", "application/xml; charset=utf-8");
+  // Lists every page, entry and indexable archive: any entry or term change purges it.
+  addCacheTags(headers, [listCacheTag(site.id)]);
+  const urls = await localizedSitemap(source, siteOrigin(site, url), url.host);
+  return new Response(sitemapXml(urls), { headers });
+};
diff --git a/packages/cli/test/fixtures/theme-v0.4.0/src/settings.ts b/packages/cli/test/fixtures/theme-v0.4.0/src/settings.ts
new file mode 100644
index 00000000..0d0e8cb3
--- /dev/null
+++ b/packages/cli/test/fixtures/theme-v0.4.0/src/settings.ts
@@ -0,0 +1,312 @@
+/**
+ * This theme's design settings (RFC-0017 §1): what Studio's Appearance form, agents
+ * (`get_theme_settings` / `set_theme_settings`) and the generator may change about its look.
+ * The site's values live in `Site.theme.config`, are checked against this schema, and reach the
+ * page as CSS variables and `data-ch-*` attributes (`themeVariables` in `layouts/Base.astro`,
+ * used by `styles/features/*.css`). Defaults keep the starter's look.
+ *
+ * Keep this file data only, with type imports only (the CLI loads it on its own).
+ */
+import type { PropsSchema } from "@cloudhal/core-ts/blocks";
+
+export const themeSettings: PropsSchema = {
+  type: "object",
+  additionalProperties: false,
+  properties: {
+    // RFC-0023 §1: one seed color and three choices; the color roles (and dark mode) follow.
+    // Without a seed (and in light mode) the four colors below apply, as before.
+    seed: {
+      type: "string",
+      format: "color",
+      title: { en: "Seed color", tr: "Ana renk" },
+      description: {
+        en: "One color the whole palette is built from, light and dark, always readable.",
+        tr: "Tüm paletin, açık ve koyu, okunaklı kalarak üretildiği tek renk.",
+      },
+    },
+    scheme: {
+      type: "string",
+      enum: ["tonal", "vibrant", "neutral", "mono"],
+      "x-labels": {
+        tonal: { en: "Tonal", tr: "Tonlu" },
+        vibrant: { en: "Vibrant", tr: "Canlı" },
+        neutral: { en: "Neutral", tr: "Nötr" },
+        mono: { en: "Monochrome", tr: "Tek renk" },
+      },
+      default: "tonal",
+      "x-widget": "radio",
+      title: { en: "Palette", tr: "Palet" },
+    },
+    contrast: {
+      type: "string",
+      enum: ["standard", "high"],
+      "x-labels": {
+        standard: { en: "Standard (AA)", tr: "Standart (AA)" },
+        high: { en: "High (AAA)", tr: "Yüksek (AAA)" },
+      },
+      default: "standard",
+      title: { en: "Contrast", tr: "Kontrast" },
+    },
+    mode: {
+      type: "string",
+      enum: ["light", "dark", "auto"],
+      "x-labels": {
+        light: { en: "Light", tr: "Açık" },
+        dark: { en: "Dark", tr: "Koyu" },
+        auto: { en: "Follow the reader", tr: "Okura göre" },
+      },
+      default: "light",
+      "x-widget": "radio",
+      title: { en: "Mode", tr: "Mod" },
+    },
+    brand: {
+      type: "string",
+      format: "color",
+      default: "#18181b",
+      title: { en: "Brand color", tr: "Marka rengi" },
+      description: { en: "Buttons and calls to action.", tr: "Butonlar ve çağrılar." },
+    },
+    link: {
+      type: "string",
+      format: "color",
+      default: "#0369a1",
+      title: { en: "Link color", tr: "Bağlantı rengi" },
+    },
+    surface: {
+      type: "string",
+      format: "color",
+      default: "#ffffff",
+      title: { en: "Background", tr: "Arka plan" },
+    },
+    text: {
+      type: "string",
+      format: "color",
+      default: "#18181b",
+      title: { en: "Text", tr: "Metin" },
+    },
+    // RFC-0023 §2: a curated font pairing (self-hosted in public/fonts) and a fluid type scale.
+    // Without a pairing the typeface below applies; without a scale the sizes stay fixed.
+    typePairing: {
+      type: "string",
+      enum: ["system", "editorial", "modern", "humanist", "technical", "classic"],
+      "x-labels": {
+        system: { en: "System", tr: "Sistem" },
+        editorial: { en: "Editorial (Fraunces and Inter)", tr: "Editoryal (Fraunces ve Inter)" },
+        modern: { en: "Modern (Space Grotesk and Inter)", tr: "Modern (Space Grotesk ve Inter)" },
+        humanist: { en: "Humanist (Source Sans)", tr: "Hümanist (Source Sans)" },
+        technical: {
+          en: "Technical (JetBrains Mono and Inter)",
+          tr: "Teknik (JetBrains Mono ve Inter)",
+        },
+        classic: { en: "Classic (Source Serif)", tr: "Klasik (Source Serif)" },
+      },
+      default: "system",
+      title: { en: "Font pairing", tr: "Yazı tipi eşleşmesi" },
+      description: {
+        en: "Headings and text set in fonts that go together. System uses the typeface below.",
+        tr: "Başlıklar ve metin birbirine uyan yazı tipleriyle. Sistem, aşağıdaki yazı tipini kullanır.",
+      },
+    },
+    typeScale: {
+      type: "string",
+      enum: ["compact", "balanced", "dramatic"],
+      "x-labels": {
+        compact: { en: "Compact", tr: "Sıkı" },
+        balanced: { en: "Balanced", tr: "Dengeli" },
+        dramatic: { en: "Dramatic", tr: "Çarpıcı" },
+      },
+      "x-widget": "radio",
+      title: { en: "Type scale", tr: "Yazı ölçeği" },
+      description: {
+        en: "How much bigger headings are than text; sizes adapt to the screen.",
+        tr: "Başlıkların metinden ne kadar büyük olduğu; boyutlar ekrana uyar.",
+      },
+    },
+    font: {
+      type: "string",
+      enum: ["system", "serif", "humanist", "mono"],
+      "x-labels": {
+        system: { en: "System", tr: "Sistem" },
+        serif: { en: "Serif", tr: "Tırnaklı" },
+        humanist: { en: "Humanist", tr: "Hümanist" },
+        mono: { en: "Monospace", tr: "Eş aralıklı" },
+      },
+      default: "system",
+      "x-widget": "radio",
+      title: { en: "Typeface", tr: "Yazı tipi" },
+    },
+    // RFC-0023 §3: corners for buttons, fields, cards and bands, and how much room things get.
+    radius: {
+      type: "string",
+      enum: ["none", "small", "medium", "large", "full"],
+      "x-labels": {
+        none: { en: "Square", tr: "Köşeli" },
+        small: { en: "Slightly rounded", tr: "Hafif yuvarlak" },
+        medium: { en: "Medium", tr: "Orta" },
+        large: { en: "Rounded", tr: "Yuvarlak" },
+        full: { en: "Pill buttons", tr: "Hap düğmeler" },
+      },
+      default: "small",
+      title: { en: "Corners", tr: "Köşeler" },
+    },
+    density: {
+      type: "string",
+      enum: ["compact", "cozy", "airy"],
+      "x-labels": {
+        compact: { en: "Compact", tr: "Sıkı" },
+        cozy: { en: "Cozy", tr: "Rahat" },
+        airy: { en: "Airy", tr: "Ferah" },
+      },
+      default: "cozy",
+      "x-widget": "radio",
+      title: { en: "Spacing", tr: "Boşluk" },
+      description: {
+        en: "How much room sections, cards and buttons get.",
+        tr: "Bölümlerin, kartların ve düğmelerin ne kadar yer kapladığı.",
+      },
+    },
+    // RFC-0024 §1: how much the site moves; a page can set its own level, and readers who ask for
+    // reduced motion always get less.
+    motion: {
+      type: "string",
+      enum: ["none", "subtle", "standard", "expressive"],
+      "x-labels": {
+        none: { en: "Still", tr: "Durağan" },
+        subtle: { en: "Subtle", tr: "İnce" },
+        standard: { en: "Standard", tr: "Standart" },
+        expressive: { en: "Expressive", tr: "Etkileyici" },
+      },
+      default: "none",
+      "x-widget": "radio",
+      title: { en: "Motion", tr: "Hareket" },
+      description: {
+        en: "How much sections move as people scroll and point. Readers who ask for reduced motion always see less.",
+        tr: "Bölümlerin kaydırırken ve üzerine gelirken ne kadar hareket ettiği. Daha az hareket isteyen okurlar her zaman daha azını görür.",
+      },
+    },
+    // RFC-0024 §5: how one page gives way to the next.
+    pageTransition: {
+      type: "string",
+      enum: ["none", "crossfade", "slide", "morph"],
+      "x-labels": {
+        none: { en: "None", tr: "Yok" },
+        crossfade: { en: "Crossfade", tr: "Geçişli solma" },
+        slide: { en: "Slide", tr: "Kaydırma" },
+        morph: { en: "Morph shared parts", tr: "Ortak öğeleri dönüştür" },
+      },
+      default: "none",
+      "x-widget": "radio",
+      title: { en: "Page transition", tr: "Sayfa geçişi" },
+      description: {
+        en: "How one page gives way to the next, in browsers that support it.",
+        tr: "Bir sayfanın diğerine nasıl geçtiği (destekleyen tarayıcılarda).",
+      },
+    },
+    // RFC-0026 26c: how heavy the site's icons are drawn.
+    iconWeight: {
+      type: "string",
+      enum: ["light", "regular", "bold", "fill"],
+      "x-labels": {
+        light: { en: "Light", tr: "İnce" },
+        regular: { en: "Regular", tr: "Normal" },
+        bold: { en: "Bold", tr: "Kalın" },
+        fill: { en: "Filled", tr: "Dolu" },
+      },
+      default: "regular",
+      "x-widget": "radio",
+      title: { en: "Icons", tr: "İkonlar" },
+      description: {
+        en: "Light suits airy, editorial sites; bold and filled read better small and on busy pages.",
+        tr: "İnce, ferah ve editoryal sitelere uyar; kalın ve dolu, küçük boyutta ve kalabalık sayfalarda daha iyi okunur.",
+      },
+    },
+    // RFC-0033 §4a: the theme's own words in a language it does not ship, or worded otherwise.
+    strings: {
+      type: "array",
+      maxItems: 50,
+      title: { en: "Theme words", tr: "Tema metinleri" },
+      description: {
+        en: "The theme's own words (notices, buttons, labels) in a language, over the theme's: one item per language. Agents can draft them; people review.",
+        tr: "Temanın kendi metinleri (bildirimler, düğmeler, etiketler), bir dilde, temanınkilerin yerine: her dil için bir öğe. Agent'lar taslak hazırlayabilir; kişiler gözden geçirir.",
+      },
+      items: {
+        type: "object",
+        additionalProperties: false,
+        required: ["locale"],
+        properties: {
+          locale: { type: "string", maxLength: 35, title: { en: "Language", tr: "Dil" } },
+          machineTranslated: {
+            type: "string",
+            maxLength: 300,
+            title: { en: "Machine translation notice", tr: "Makine çevirisi notu" },
+          },
+          machineReviewed: {
+            type: "string",
+            maxLength: 300,
+            title: { en: "Reviewed translation notice", tr: "İncelenmiş çeviri notu" },
+          },
+          readOriginal: {
+            type: "string",
+            maxLength: 300,
+            title: { en: "Read the original", tr: "Orijinalini oku" },
+          },
+          notTranslated: {
+            type: "string",
+            maxLength: 300,
+            title: { en: "Not translated notice", tr: "Çevrilmemiş sayfa notu" },
+          },
+          languages: { type: "string", maxLength: 300, title: { en: "Languages", tr: "Diller" } },
+          home: { type: "string", maxLength: 300, title: { en: "Home", tr: "Ana sayfa" } },
+          menu: { type: "string", maxLength: 300, title: { en: "Menu", tr: "Menü" } },
+          search: { type: "string", maxLength: 300, title: { en: "Search", tr: "Ara" } },
+          searchLabel: {
+            type: "string",
+            maxLength: 300,
+            title: { en: "Search label", tr: "Arama etiketi" },
+          },
+          searchPlaceholder: {
+            type: "string",
+            maxLength: 300,
+            title: { en: "Search placeholder", tr: "Arama ipucu" },
+          },
+          related: {
+            type: "string",
+            maxLength: 300,
+            title: { en: "Related posts", tr: "İlgili yazılar" },
+          },
+          skipToContent: {
+            type: "string",
+            maxLength: 300,
+            title: { en: "Skip to content", tr: "İçeriğe geç" },
+          },
+          notFoundTitle: {
+            type: "string",
+            maxLength: 300,
+            title: { en: "Not found: title", tr: "Bulunamadı: başlık" },
+          },
+          notFoundText: {
+            type: "string",
+            maxLength: 300,
+            title: { en: "Not found: text", tr: "Bulunamadı: metin" },
+          },
+          notFoundHome: {
+            type: "string",
+            maxLength: 300,
+            title: { en: "Not found: home link", tr: "Bulunamadı: ana sayfa bağlantısı" },
+          },
+          notFoundSearch: {
+            type: "string",
+            maxLength: 300,
+            title: { en: "Not found: search prompt", tr: "Bulunamadı: arama çağrısı" },
+          },
+        },
+      },
+    },
+  },
+  // WCAG 2.2 AA: body text 4.5:1, links 4.5:1, buttons and other UI parts 3:1 against the page.
+  "x-contrast": [
+    ["text", "surface", 4.5],
+    ["link", "surface", 4.5],
+    ["brand", "surface", 3],
+  ],
+};
diff --git a/packages/cli/test/fixtures/theme-v0.4.0/src/strings.ts b/packages/cli/test/fixtures/theme-v0.4.0/src/strings.ts
new file mode 100644
index 00000000..1cb24c93
--- /dev/null
+++ b/packages/cli/test/fixtures/theme-v0.4.0/src/strings.ts
@@ -0,0 +1,269 @@
+/**
+ * The theme's own words per language (RFC-0033 §4a). It ships English, Turkish and Japanese; any
+ * other language gets English, with the site's `strings` setting over it. Plain data, no components,
+ * so tests import it directly.
+ */
+/** The few words the theme itself prints (the content brings its own). */
+const STRINGS = {
+  en: {
+    home: "Home",
+    breadcrumb: "Breadcrumb",
+    related: "Related posts",
+    pagination: "Pagination",
+    newer: "← Newer",
+    older: "Older →",
+    pageOf: (page: number, pages: number) => `Page ${page} of ${pages}`,
+    feed: "RSS feed",
+    posts: (n: number) => (n === 1 ? "1 post" : `${n} posts`),
+    by: (name: string) => `By ${name}`,
+    byPrefix: "By ",
+    and: " and ",
+    updated: (when: string) => `Updated ${when}`,
+    minRead: (n: number) => `${n} min read`,
+    onThisPage: "On this page",
+    /** RFC-0019 §2: the corrections list at the end of an article, and the note under the byline. */
+    corrections: "Corrections and updates",
+    correctionKind: { correction: "Correction", clarification: "Clarification", update: "Update" },
+    appended: (kind: string) => `${kind} appended`,
+    /** RFC-0019 §3: the search form in the header and the search page. */
+    /** RFC-0025: the header and footer's own words. */
+    skipToContent: "Skip to content",
+    mainMenu: "Main",
+    footerMenu: "Footer",
+    legalMenu: "Legal",
+    socialLinks: "Social links",
+    secondaryMenu: "Secondary",
+    menu: "Menu",
+    closeMenu: "Close menu",
+    announcement: "Announcement",
+    dismiss: "Dismiss",
+    privacy: "Privacy",
+    consentNotice: "This site keeps only what it needs to work: no tracking cookies.",
+    consentChoices: "Some parts of this site can load content from other services (videos, maps).",
+    consentOk: "OK",
+    consentAll: "Allow all",
+    consentEssential: "Only essential",
+    privacyPolicy: "Privacy policy",
+    copied: "Copied",
+    linkCopied: "Link copied",
+    builtWith: "Built with Cloudhal",
+    search: "Search",
+    searchLabel: "Search this site",
+    searchPlaceholder: "Search the site…",
+    searchResults: (n: number, q: string) =>
+      n === 1 ? `1 result for “${q}”` : `${n} results for “${q}”`,
+    searchNone: (q: string) => `Nothing matches “${q}”. Try fewer or other words.`,
+    searchUpdating: "Search is catching up with the latest changes.",
+    /** RFC-0029 §6: the search modal's words (`data-words`; `{q}` is the query, `#` the count). */
+    searchModal: {
+      kinds: { article: "Articles", page: "Pages", term: "Topics", author: "Authors" },
+      all: "See all results for “{q}”",
+      none: "Nothing matches “{q}”.",
+      recent: "Recent searches",
+      clear: "Clear recent searches",
+      limited: "Too many searches right now.",
+      error: "Search is unavailable right now.",
+      updating: "Search is catching up with the latest changes.",
+      count: { one: "# result", other: "# results" },
+      close: "Close",
+      keys: { move: "move", open: "open", close: "close" },
+    },
+    previous: "← Previous",
+    next: "Next →",
+    /** Previews of an embargoed or expired page or entry (RFC-0008 §7.3); readers never see these. */
+    embargoed: (when: string) => `Embargoed until ${when}. Only previews show it until then.`,
+    expired: (when: string) => `Expired on ${when}. Only previews show it now.`,
+    // RFC-0033: the reader's notice on machine translations, the fallback notice, the switcher.
+    machineTranslated: "This page was translated automatically and has not been reviewed yet.",
+    machineReviewed: "This page was translated automatically and reviewed by a person.",
+    readOriginal: "Read the original",
+    notTranslated:
+      "This page isn't available in your language yet, so it is shown in its original language.",
+    languages: "Languages",
+    // The not-found page (404) when the site has no page at `/404` in the reader's language.
+    notFoundTitle: "Page not found",
+    notFoundText: "The page you are looking for doesn't exist or has moved.",
+    notFoundHome: "Go to the home page",
+    notFoundSearch: "Or search this site:",
+  },
+  tr: {
+    home: "Ana sayfa",
+    breadcrumb: "Sayfa yolu",
+    related: "İlgili yazılar",
+    pagination: "Sayfalar",
+    newer: "← Daha yeni",
+    older: "Daha eski →",
+    pageOf: (page: number, pages: number) => `Sayfa ${page} / ${pages}`,
+    feed: "RSS beslemesi",
+    posts: (n: number) => `${n} yazı`,
+    by: (name: string) => name,
+    byPrefix: "",
+    and: " ve ",
+    updated: (when: string) => `Güncellendi: ${when}`,
+    minRead: (n: number) => `${n} dk okuma`,
+    onThisPage: "Bu sayfada",
+    corrections: "Düzeltmeler ve güncellemeler",
+    correctionKind: { correction: "Düzeltme", clarification: "Açıklama", update: "Güncelleme" },
+    appended: (kind: string) => `${kind} eklendi`,
+    skipToContent: "İçeriğe geç",
+    mainMenu: "Ana menü",
+    footerMenu: "Alt menü",
+    legalMenu: "Yasal",
+    socialLinks: "Sosyal bağlantılar",
+    secondaryMenu: "İkincil menü",
+    menu: "Menü",
+    closeMenu: "Menüyü kapat",
+    announcement: "Duyuru",
+    dismiss: "Kapat",
+    privacy: "Gizlilik",
+    consentNotice: "Bu site yalnızca çalışması için gerekeni saklar: izleme çerezi yok.",
+    consentChoices:
+      "Bu sitenin bazı bölümleri başka servislerden içerik yükleyebilir (videolar, haritalar).",
+    consentOk: "Tamam",
+    consentAll: "Tümüne izin ver",
+    consentEssential: "Yalnız gerekli",
+    privacyPolicy: "Gizlilik politikası",
+    copied: "Kopyalandı",
+    linkCopied: "Bağlantı kopyalandı",
+    builtWith: "Cloudhal ile yapıldı",
+    search: "Ara",
+    searchLabel: "Sitede ara",
+    searchPlaceholder: "Sitede ara…",
+    searchResults: (n: number, q: string) => `“${q}” için ${n} sonuç`,
+    searchNone: (q: string) =>
+      `“${q}” ile eşleşen bir şey yok. Daha az ya da başka sözcükler deneyin.`,
+    searchUpdating: "Arama son değişiklikleri eklemeye devam ediyor.",
+    searchModal: {
+      kinds: { article: "Yazılar", page: "Sayfalar", term: "Konular", author: "Yazarlar" },
+      all: "“{q}” için tüm sonuçlar",
+      none: "“{q}” ile eşleşen bir şey yok.",
+      recent: "Son aramalar",
+      clear: "Son aramaları temizle",
+      limited: "Şu anda çok fazla arama yapıldı.",
+      error: "Arama şu anda kullanılamıyor.",
+      updating: "Arama son değişiklikleri eklemeye devam ediyor.",
+      count: { one: "# sonuç", other: "# sonuç" },
+      close: "Kapat",
+      keys: { move: "gez", open: "aç", close: "kapat" },
+    },
+    previous: "← Önceki",
+    next: "Sonraki →",
+    embargoed: (when: string) =>
+      `${when} tarihine kadar ambargolu. O zamana kadar yalnızca önizlemede görünür.`,
+    expired: (when: string) =>
+      `${when} tarihinde yayından kalktı. Artık yalnızca önizlemede görünür.`,
+    machineTranslated: "Bu sayfa otomatik olarak çevrildi ve henüz gözden geçirilmedi.",
+    machineReviewed: "Bu sayfa otomatik olarak çevrildi ve bir kişi tarafından gözden geçirildi.",
+    readOriginal: "Orijinalini oku",
+    notTranslated: "Bu sayfa henüz dilinizde yok; bu yüzden orijinal dilinde gösteriliyor.",
+    languages: "Diller",
+    notFoundTitle: "Sayfa bulunamadı",
+    notFoundText: "Aradığınız sayfa yok ya da taşınmış.",
+    notFoundHome: "Ana sayfaya dön",
+    notFoundSearch: "Ya da sitede arayın:",
+  },
+  ja: {
+    home: "ホーム",
+    breadcrumb: "パンくずリスト",
+    related: "関連記事",
+    pagination: "ページ送り",
+    newer: "← 新しい記事",
+    older: "古い記事 →",
+    pageOf: (page: number, pages: number) => `${pages} ページ中 ${page} ページ`,
+    feed: "RSS フィード",
+    posts: (n: number) => `${n} 件の記事`,
+    by: (name: string) => `${name} 著`,
+    byPrefix: "著者:",
+    and: "、",
+    updated: (when: string) => `${when} 更新`,
+    minRead: (n: number) => `${n} 分で読めます`,
+    onThisPage: "このページの内容",
+    corrections: "訂正と更新",
+    correctionKind: { correction: "訂正", clarification: "補足", update: "更新" },
+    appended: (kind: string) => `${kind}を追記`,
+    skipToContent: "本文へスキップ",
+    mainMenu: "メイン",
+    footerMenu: "フッター",
+    legalMenu: "法的情報",
+    socialLinks: "ソーシャルリンク",
+    secondaryMenu: "サブメニュー",
+    menu: "メニュー",
+    closeMenu: "メニューを閉じる",
+    announcement: "お知らせ",
+    dismiss: "閉じる",
+    privacy: "プライバシー",
+    consentNotice: "このサイトは動作に必要なものだけを保存します。追跡用 Cookie は使いません。",
+    consentChoices:
+      "このサイトの一部は、ほかのサービスのコンテンツ(動画、地図)を読み込むことがあります。",
+    consentOk: "OK",
+    consentAll: "すべて許可",
+    consentEssential: "必須のみ",
+    privacyPolicy: "プライバシーポリシー",
+    copied: "コピーしました",
+    linkCopied: "リンクをコピーしました",
+    builtWith: "Cloudhal で構築",
+    search: "検索",
+    searchLabel: "サイト内検索",
+    searchPlaceholder: "サイト内を検索…",
+    searchResults: (n: number, q: string) => `「${q}」の検索結果 ${n} 件`,
+    searchNone: (q: string) =>
+      `「${q}」に一致するものはありません。言葉を減らすか、別の言葉でお試しください。`,
+    searchUpdating: "検索は最新の変更を反映している途中です。",
+    searchModal: {
+      kinds: { article: "記事", page: "ページ", term: "トピック", author: "著者" },
+      all: "「{q}」の検索結果をすべて見る",
+      none: "「{q}」に一致するものはありません。",
+      recent: "最近の検索",
+      clear: "最近の検索を消去",
+      limited: "現在、検索が集中しています。",
+      error: "現在、検索を利用できません。",
+      updating: "検索は最新の変更を反映している途中です。",
+      count: { one: "# 件", other: "# 件" },
+      close: "閉じる",
+      keys: { move: "移動", open: "開く", close: "閉じる" },
+    },
+    previous: "← 前へ",
+    next: "次へ →",
+    embargoed: (when: string) =>
+      `${when} まで公開を控えています。それまではプレビューでのみ表示されます。`,
+    expired: (when: string) =>
+      `${when} に掲載期限が切れました。現在はプレビューでのみ表示されます。`,
+    machineTranslated: "このページは自動翻訳されたもので、まだ確認されていません。",
+    machineReviewed: "このページは自動翻訳され、人が確認しました。",
+    readOriginal: "原文を読む",
+    notTranslated: "このページはまだお使いの言語で読めないため、元の言語で表示しています。",
+    languages: "言語",
+    notFoundTitle: "ページが見つかりません",
+    notFoundText: "お探しのページは存在しないか、移動しました。",
+    notFoundHome: "ホームページへ",
+    notFoundSearch: "またはサイト内を検索:",
+  },
+} as const;
+
+export type ThemeStrings = (typeof STRINGS)[keyof typeof STRINGS];
+
+/**
+ * The theme's words in `locale` (its language subtag; English for a language the theme does not
+ * ship, and for any word a shipped language lacks), with the site's own wording over them
+ * (`strings` in the theme settings, RFC-0033 §4a: one item per language, matched on the full tag,
+ * then the language): plain-text words only, the keys the settings declare.
+ */
+export function strings(locale: string, overrides?: unknown): ThemeStrings {
+  const lang = (locale.split("-")[0] ?? locale).toLowerCase();
+  const base: ThemeStrings = Object.hasOwn(STRINGS, lang)
+    ? { ...STRINGS.en, ...STRINGS[lang as keyof typeof STRINGS] }
+    : STRINGS.en;
+  if (!Array.isArray(overrides)) return base;
+  const words = base as Record<string, unknown>;
+  const items = overrides as Array<Record<string, unknown> | null>;
+  const item =
+    items.find((o) => o?.locale === locale) ??
+    items.find((o) => typeof o?.locale === "string" && o.locale.toLowerCase() === lang);
+  if (!item) return base;
+  const own = Object.fromEntries(
+    Object.entries(item).filter(
+      ([k, v]) => k !== "locale" && typeof v === "string" && v && typeof words[k] === "string",
+    ),
+  );
+  return Object.keys(own).length ? ({ ...base, ...own } as ThemeStrings) : base;
+}
diff --git a/packages/cli/test/fixtures/theme-v0.4.0/src/styles/features/ambient.css b/packages/cli/test/fixtures/theme-v0.4.0/src/styles/features/ambient.css
new file mode 100644
index 00000000..9c76813d
--- /dev/null
+++ b/packages/cli/test/fixtures/theme-v0.4.0/src/styles/features/ambient.css
@@ -0,0 +1,185 @@
+/*
+ * Ambient backgrounds (RFC-0024 §4): a layer under a band's or card's content, from its role
+ * colors at low strength, so the surface's text roles keep their contrast. CSS kinds move slowly
+ * (12 s or more a cycle) where motion plays; particles are painted by the ambient module on a
+ * canvas. Everywhere else, and while the reader has paused motion, the layer is a still poster.
+ */
+[data-ch-ambient] {
+  --ch-amb-1: var(--ch-color-brand);
+  --ch-amb-2: var(--ch-color-accent);
+  position: relative;
+  isolation: isolate;
+  overflow: clip;
+}
+[data-ch-colors="brand"] {
+  --ch-amb-2: var(--ch-color-gradient);
+}
+[data-ch-colors="accent"] {
+  --ch-amb-1: var(--ch-color-accent);
+  --ch-amb-2: var(--ch-color-link);
+}
+[data-ch-colors="neutral"] {
+  --ch-amb-1: var(--ch-color-border-strong);
+  --ch-amb-2: var(--ch-color-text-subtle);
+}
+[data-ch-ambient]::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  z-index: -1;
+  pointer-events: none;
+}
+[data-ch-ambient="aurora"]::before {
+  inset: -20%;
+  background:
+    radial-gradient(
+      40% 50% at 20% 30%,
+      color-mix(in oklch, var(--ch-amb-1) 28%, transparent),
+      transparent 70%
+    ),
+    radial-gradient(
+      35% 45% at 80% 20%,
+      color-mix(in oklch, var(--ch-amb-2) 24%, transparent),
+      transparent 70%
+    ),
+    radial-gradient(
+      45% 40% at 60% 90%,
+      color-mix(in oklch, var(--ch-amb-1) 18%, transparent),
+      transparent 70%
+    );
+  filter: blur(24px);
+}
+[data-ch-ambient="gradient-shift"]::before {
+  background-image: linear-gradient(
+    115deg,
+    color-mix(in oklch, var(--ch-amb-1) 22%, transparent),
+    color-mix(in oklch, var(--ch-amb-2) 22%, transparent),
+    color-mix(in oklch, var(--ch-amb-1) 22%, transparent)
+  );
+  background-size: 300% 300%;
+}
+[data-ch-ambient="grain"]::before {
+  inset: -10%;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 .22 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
+  opacity: 0.6;
+}
+[data-ch-ambient="beams"]::before {
+  background-image:
+    linear-gradient(
+      105deg,
+      transparent 35%,
+      color-mix(in oklch, var(--ch-amb-1) 20%, transparent) 45%,
+      transparent 55%
+    ),
+    linear-gradient(
+      105deg,
+      transparent 55%,
+      color-mix(in oklch, var(--ch-amb-2) 16%, transparent) 63%,
+      transparent 72%
+    );
+  background-size: 250% 100%;
+}
+/* Particles: a soft still poster until (and unless) the ambient module paints the canvas. */
+[data-ch-ambient="particles"]::before {
+  background:
+    radial-gradient(
+      45% 60% at 25% 35%,
+      color-mix(in oklch, var(--ch-amb-1) 14%, transparent),
+      transparent 70%
+    ),
+    radial-gradient(
+      40% 55% at 75% 65%,
+      color-mix(in oklch, var(--ch-amb-2) 12%, transparent),
+      transparent 70%
+    );
+}
+.ch-ambient {
+  position: absolute;
+  inset: 0;
+  z-index: -1;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+}
+@keyframes ch-amb-aurora {
+  to {
+    translate: 6% -4%;
+    rotate: 8deg;
+  }
+}
+@keyframes ch-amb-pan {
+  to {
+    background-position: 100% 50%;
+  }
+}
+@keyframes ch-amb-drift {
+  to {
+    translate: -6% -4%;
+  }
+}
+@media (prefers-reduced-motion: no-preference) {
+  :root:is([data-ch-motion="standard"], [data-ch-motion="expressive"])
+    [data-ch-ambient="aurora"]::before {
+    animation: ch-amb-aurora 18s ease-in-out infinite alternate;
+  }
+  :root:is([data-ch-motion="standard"], [data-ch-motion="expressive"])
+    [data-ch-ambient="gradient-shift"]::before {
+    animation: ch-amb-pan 16s ease-in-out infinite alternate;
+  }
+  :root:is([data-ch-motion="standard"], [data-ch-motion="expressive"])
+    [data-ch-ambient="grain"]::before {
+    animation: ch-amb-drift 14s ease-in-out infinite alternate;
+  }
+  :root:is([data-ch-motion="standard"], [data-ch-motion="expressive"])
+    [data-ch-ambient="beams"]::before {
+    animation: ch-amb-pan 12s linear infinite alternate;
+  }
+}
+/*
+ * Page transitions (RFC-0024 §5): themeVariables writes @view-transition when the site chose one;
+ * these shape it. Crossfade is the browser's own, at the level's pace; slide moves the old page
+ * out and the new one in (crossfade at "subtle"); morph moves elements with the same
+ * view-transition name between pages. Nothing animates at "none" or under reduced motion.
+ */
+::view-transition-group(*),
+::view-transition-old(*),
+::view-transition-new(*) {
+  animation-duration: var(--ch-dur-normal, 250ms);
+  animation-timing-function: var(--ch-ease-standard, ease);
+}
+@keyframes ch-vt-out {
+  to {
+    opacity: 0;
+    translate: calc(var(--ch-move-l, 0px) * -0.5) 0;
+  }
+}
+@keyframes ch-vt-in {
+  from {
+    opacity: 0;
+    translate: calc(var(--ch-move-l, 0px) * 0.5) 0;
+  }
+}
+:root[data-ch-page-transition="slide"]:is(
+  [data-ch-motion="standard"],
+  [data-ch-motion="expressive"]
+)::view-transition-old(root) {
+  animation-name: ch-vt-out;
+}
+:root[data-ch-page-transition="slide"]:is(
+  [data-ch-motion="standard"],
+  [data-ch-motion="expressive"]
+)::view-transition-new(root) {
+  animation-name: ch-vt-in;
+}
+:root[data-ch-motion="none"]::view-transition-group(*),
+:root[data-ch-motion="none"]::view-transition-old(*),
+:root[data-ch-motion="none"]::view-transition-new(*) {
+  animation: none;
+}
+@media (prefers-reduced-motion: reduce) {
+  ::view-transition-group(*),
+  ::view-transition-old(*),
+  ::view-transition-new(*) {
+    animation: none !important;
+  }
+}
diff --git a/packages/cli/test/fixtures/theme-v0.4.0/src/styles/features/article.css b/packages/cli/test/fixtures/theme-v0.4.0/src/styles/features/article.css
new file mode 100644
index 00000000..17573585
--- /dev/null
+++ b/packages/cli/test/fixtures/theme-v0.4.0/src/styles/features/article.css
@@ -0,0 +1,215 @@
+/* The article (RFC-0018 §3): kicker, title, dek, byline, table of contents. */
+.ch-article-head {
+  @apply space-y-3 border-b border-zinc-200 pt-6 pb-6;
+}
+.ch-kicker {
+  @apply inline-block text-sm font-semibold uppercase;
+  color: var(--ch-color-link);
+  letter-spacing: 0.04em;
+}
+a.ch-kicker:hover {
+  @apply underline underline-offset-4;
+}
+.ch-article-head h1 {
+  @apply text-4xl font-bold tracking-tight sm:text-5xl;
+}
+.ch-dek {
+  @apply text-xl leading-relaxed text-zinc-600;
+}
+.ch-byline {
+  @apply flex flex-wrap items-center gap-x-3 gap-y-1 text-sm text-zinc-500;
+}
+.ch-byline > * + *::before {
+  content: "·";
+  @apply mr-3 text-zinc-400;
+}
+.ch-byline__author {
+  @apply font-medium text-zinc-800;
+}
+.ch-cover {
+  @apply my-6;
+}
+.ch-cover img {
+  @apply w-full rounded-lg;
+}
+.ch-cover figcaption {
+  @apply mt-2 text-sm text-zinc-500;
+}
+.ch-toc {
+  @apply my-6 rounded-lg border border-zinc-200 px-4 py-3 text-sm;
+}
+.ch-toc summary {
+  @apply cursor-pointer font-medium;
+}
+.ch-toc ol {
+  @apply mt-2 space-y-1;
+}
+.ch-toc li[data-depth="3"] {
+  @apply pl-4;
+}
+.ch-toc a {
+  @apply text-zinc-600 underline-offset-4 hover:text-zinc-900 hover:underline;
+}
+.ch-richtext :is(h2, h3)[id] {
+  scroll-margin-top: 1.5rem;
+}
+.ch-byline__author a {
+  @apply underline-offset-4 hover:underline;
+}
+.ch-byline a[href="#ch-corrections"] {
+  @apply font-medium text-amber-800 underline underline-offset-4;
+}
+/* Corrections (RFC-0019 §2): newest first, the kind as a label. */
+.ch-corrections {
+  @apply mt-10 rounded-lg border border-amber-200 bg-amber-50 px-5 py-4;
+  scroll-margin-top: 1.5rem;
+}
+.ch-corrections h2 {
+  @apply text-lg font-semibold;
+}
+.ch-corrections ol {
+  @apply mt-3 space-y-3;
+}
+.ch-correction__meta {
+  @apply flex flex-wrap gap-x-2 text-sm text-zinc-600;
+}
+.ch-correction__meta strong {
+  @apply font-semibold text-amber-900;
+}
+.ch-correction__note {
+  @apply mt-1 text-zinc-800;
+}
+.ch-correction__note a {
+  @apply underline underline-offset-4;
+}
+/* Article lists as cards: cover thumbnail, title, summary, date and reading time. */
+.ch-card-entry {
+  @apply flex gap-4;
+}
+.ch-card-entry__cover {
+  @apply h-24 w-36 shrink-0 rounded-md object-cover sm:h-28 sm:w-44;
+}
+.ch-card-entry__body {
+  @apply min-w-0 space-y-1;
+}
+.ch-card-entry__body a {
+  @apply text-lg font-semibold leading-snug underline-offset-4 hover:underline;
+}
+.ch-card-entry__body p {
+  @apply text-sm text-zinc-600;
+}
+.ch-card-entry__meta {
+  @apply flex flex-wrap gap-x-3 text-xs text-zinc-500;
+}
+.ch-card-entry__meta > * + *::before {
+  content: "·";
+  @apply mr-3;
+}
+
+/* Breadcrumbs, term chips, archives, pagination, related posts (RFC-0002). */
+.ch-breadcrumbs ol {
+  @apply flex flex-wrap gap-1 pt-6 text-sm text-zinc-500;
+}
+.ch-breadcrumbs li + li::before {
+  content: "›";
+  @apply mr-1 text-zinc-400;
+}
+.ch-breadcrumbs a {
+  @apply hover:text-zinc-900;
+}
+.ch-terms {
+  @apply flex flex-wrap gap-2 border-t border-zinc-200 py-4;
+}
+.ch-terms__group {
+  @apply flex flex-wrap gap-2;
+}
+.ch-chip {
+  @apply inline-block rounded-full border border-zinc-300 px-3 py-1 text-sm text-zinc-700;
+}
+a.ch-chip {
+  @apply hover:border-zinc-900 hover:text-zinc-900;
+}
+.ch-terms__group[data-taxonomy="category"] .ch-chip {
+  @apply border-(--ch-color-surface-inverse) bg-(--ch-color-surface-inverse) text-(--ch-color-text-inverse) hover:text-(--ch-color-text-inverse);
+}
+.ch-archive-header {
+  @apply space-y-2 border-b border-zinc-200 pt-4 pb-6;
+}
+.ch-archive-header h1 {
+  @apply text-4xl font-bold tracking-tight;
+}
+.ch-archive-kind {
+  @apply text-sm font-medium tracking-wide text-zinc-500 uppercase;
+}
+.ch-archive-meta {
+  @apply flex gap-4 text-sm text-zinc-500;
+}
+.ch-archive-meta a {
+  @apply underline-offset-4 hover:underline;
+}
+.ch-archive-image {
+  @apply mt-4 w-full rounded;
+}
+/* Author pages (RFC-0019 §1): round portrait, role and profile links. */
+.ch-archive[data-taxonomy="author"] .ch-archive-image {
+  @apply h-24 w-24 rounded-full object-cover;
+}
+.ch-archive-role {
+  @apply text-lg text-zinc-600;
+}
+.ch-archive-links {
+  @apply flex flex-wrap gap-3 text-sm;
+}
+.ch-archive-links a {
+  @apply font-medium underline underline-offset-4;
+}
+.ch-entrylist {
+  @apply space-y-6 py-6;
+}
+.ch-entrylist a {
+  @apply text-lg font-medium underline-offset-4 hover:underline;
+}
+.ch-entrylist p {
+  @apply text-sm text-zinc-600;
+}
+.ch-entrylist time {
+  @apply text-xs text-zinc-500;
+}
+.ch-pagination {
+  @apply flex items-center justify-between border-t border-zinc-200 py-6 text-sm text-zinc-600;
+}
+.ch-pagination a {
+  @apply font-medium text-zinc-900 underline-offset-4 hover:underline;
+}
+.ch-related {
+  @apply border-t border-zinc-200 pt-6;
+}
+.ch-related h2 {
+  @apply text-xl font-semibold;
+}
+
+/* Navigation menus (RFC-0003): dropdowns and nested items as disclosures, no JavaScript. */
+.ch-nav-menu {
+  @apply relative;
+}
+.ch-nav-menu summary {
+  @apply cursor-pointer list-none;
+}
+.ch-nav-menu summary::-webkit-details-marker {
+  display: none;
+}
+.ch-nav-menu__caret {
+  @apply ml-1 text-xs;
+}
+.ch-nav-menu[open] > summary .ch-nav-menu__caret {
+  rotate: 180deg;
+}
+.ch-nav-menu > ul {
+  @apply absolute z-10 mt-2 min-w-40 space-y-1 rounded border border-zinc-200 bg-white p-2 shadow-sm;
+}
+footer .ch-nav-menu > ul {
+  @apply bottom-full mb-2;
+}
+.ch-nav-menu .ch-nav-menu > ul {
+  @apply static mt-1 border-0 p-0 pl-3 shadow-none;
+}
diff --git a/packages/cli/test/fixtures/theme-v0.4.0/src/styles/features/blocks.css b/packages/cli/test/fixtures/theme-v0.4.0/src/styles/features/blocks.css
new file mode 100644
index 00000000..aa826300
--- /dev/null
+++ b/packages/cli/test/fixtures/theme-v0.4.0/src/styles/features/blocks.css
@@ -0,0 +1,93 @@
+/* Shown in previews only, where an invalid ```surface would draw nothing. */
+.ch-surface-problem {
+  @apply rounded-lg px-4 py-3 text-sm;
+  border: 1px solid var(--ch-color-accent);
+}
+.ch-surface-problem ul {
+  @apply mt-2 list-disc ps-5;
+}
+.ch-richtext table:not([class]) tbody tr:hover {
+  background: var(--ch-color-surface-muted);
+}
+.ch-image {
+  @apply py-6;
+}
+/* Block types (RFC-0015): callout, button, video link and questions. */
+.ch-block {
+  @apply py-4;
+}
+.ch-callout {
+  @apply space-y-2 rounded border-l-4 border-sky-500 bg-sky-50 px-4 py-3;
+}
+.ch-callout--success {
+  @apply border-emerald-500 bg-emerald-50;
+}
+.ch-callout--warning {
+  @apply border-amber-500 bg-amber-50;
+}
+.ch-callout--danger {
+  @apply border-red-500 bg-red-50;
+}
+.ch-button {
+  /* w-fit: a button in a Stack (a flex column) keeps its own width (RFC-0022 22e). */
+  @apply inline-block w-fit rounded px-4 py-2 font-medium;
+}
+.ch-button--primary {
+  @apply text-(--ch-color-on-brand);
+  background: var(--ch-color-brand);
+}
+.ch-button--secondary {
+  @apply border border-zinc-300 text-zinc-900;
+}
+.ch-embed__link {
+  @apply flex items-center gap-3 rounded border border-zinc-200 px-4 py-3 no-underline;
+}
+.ch-embed__play {
+  @apply flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-(--ch-color-surface-inverse) text-(--ch-color-text-inverse);
+}
+.ch-embed__title {
+  @apply font-medium text-zinc-900;
+}
+.ch-embed__host {
+  @apply ml-auto text-sm text-zinc-500;
+}
+.ch-embed__frame {
+  @apply aspect-video w-full rounded border-0;
+}
+.ch-faq__item {
+  @apply border-b border-zinc-200 py-3;
+}
+.ch-faq__item summary {
+  @apply cursor-pointer font-medium;
+}
+.ch-faq__answer {
+  @apply mt-2 space-y-2 text-zinc-700;
+}
+/* This theme's own block type (src/blocks.ts). */
+.testimonial blockquote {
+  @apply border-l-4 border-zinc-300 pl-4 text-lg italic text-zinc-800;
+}
+.testimonial figcaption {
+  @apply mt-2 flex gap-2 text-sm;
+}
+.testimonial__author {
+  @apply font-medium text-zinc-900;
+}
+.testimonial__role {
+  @apply text-zinc-500;
+}
+.ch-image figcaption {
+  @apply mt-2 text-sm text-zinc-500;
+}
+.ch-contentlist {
+  @apply py-6;
+}
+.ch-contentlist ul {
+  @apply space-y-4;
+}
+.ch-contentlist a {
+  @apply text-lg font-medium underline-offset-4 hover:underline;
+}
+.ch-contentlist p {
+  @apply text-sm text-zinc-600;
+}
diff --git a/packages/cli/test/fixtures/theme-v0.4.0/src/styles/features/carousel.css b/packages/cli/test/fixtures/theme-v0.4.0/src/styles/features/carousel.css
new file mode 100644
index 00000000..8d611569
--- /dev/null
+++ b/packages/cli/test/fixtures/theme-v0.4.0/src/styles/features/carousel.css
@@ -0,0 +1,266 @@
+/*
+ * RFC-0027: carousels. A scroll-snap track (native swipe, momentum and keyboard scrolling, RTL by
+ * logical properties), slides in one frame size, markers as links to the slides.
+ */
+.ch-carousel {
+  --ch-c-gap: calc(var(--spacing) * 4);
+  --ch-c-peek: 0%;
+  --ch-c-n: 1;
+  position: relative;
+}
+.ch-carousel[data-gap="none"] {
+  --ch-c-gap: 0px;
+}
+.ch-carousel[data-gap="s"] {
+  --ch-c-gap: calc(var(--spacing) * 2);
+}
+.ch-carousel[data-gap="l"] {
+  --ch-c-gap: calc(var(--spacing) * 6);
+}
+.ch-carousel[data-gap="xl"] {
+  --ch-c-gap: calc(var(--spacing) * 10);
+}
+.ch-carousel[data-peek="s"] {
+  --ch-c-peek: 12%;
+}
+.ch-carousel[data-peek="m"] {
+  --ch-c-peek: 24%;
+}
+.ch-carousel[data-per-view="2"] {
+  --ch-c-n: 2;
+  --ch-c-n-set: 2;
+}
+.ch-carousel[data-per-view="3"] {
+  --ch-c-n: 3;
+  --ch-c-n-set: 3;
+}
+.ch-carousel[data-per-view="4"] {
+  --ch-c-n: 4;
+  --ch-c-n-set: 4;
+}
+/* perView follows the room the carousel has: at most 2 when medium, 1 when narrow (a peek stays). */
+.ch-carousel {
+  container-type: inline-size;
+}
+@container (max-width: 44rem) {
+  .ch-carousel__track {
+    --ch-c-n: min(var(--ch-c-n-set, 1), 2);
+  }
+}
+@container (max-width: 28rem) {
+  .ch-carousel__track {
+    --ch-c-n: 1;
+  }
+}
+.ch-carousel__track {
+  display: grid;
+  grid-auto-flow: column;
+  /* perView slides, the next one peeking in by --ch-c-peek */
+  grid-auto-columns: calc(
+    (100% - (var(--ch-c-n) - 1) * var(--ch-c-gap) - var(--ch-c-peek)) /
+    var(--ch-c-n)
+  );
+  gap: var(--ch-c-gap);
+  overflow-x: auto;
+  overscroll-behavior-inline: contain;
+  scroll-snap-type: inline mandatory;
+  scrollbar-width: thin;
+  padding-block: 2px;
+}
+/* As many as fit: a rail without perView, by item width. */
+.ch-carousel[data-variant="rail"]:not([data-per-view]) .ch-carousel__track {
+  grid-auto-columns: min(16rem, 85%);
+}
+.ch-carousel[data-item="s"]:not([data-per-view]) .ch-carousel__track {
+  grid-auto-columns: min(12rem, 70%);
+}
+.ch-carousel[data-item="l"]:not([data-per-view]) .ch-carousel__track {
+  grid-auto-columns: min(22rem, 90%);
+}
+.ch-carousel__track:focus-visible {
+  outline: 2px solid var(--ch-color-focus, currentColor);
+  outline-offset: 2px;
+}
+:root:not([data-ch-motion="none"]) .ch-carousel__track {
+  scroll-behavior: smooth;
+}
+@media (prefers-reduced-motion: reduce) {
+  .ch-carousel__track {
+    scroll-behavior: auto !important;
+  }
+}
+.ch-carousel__slide {
+  scroll-snap-align: start;
+  min-width: 0;
+}
+.ch-carousel[data-align="center"] .ch-carousel__slide {
+  scroll-snap-align: center;
+}
+/* A hero: full width like a band, one slide at a time, every slide in one frame. */
+.ch-carousel[data-variant="hero"] {
+  margin-inline: calc(50% - 50vw);
+}
+.ch-carousel[data-variant="hero"] .ch-carousel__track {
+  grid-auto-columns: 100%;
+  gap: 0;
+  scrollbar-width: none;
+}
+.ch-carousel[data-variant="hero"] .ch-carousel__slide {
+  scroll-snap-stop: always;
+}
+.ch-carousel[data-aspect] .ch-carousel__slide {
+  overflow: hidden;
+}
+.ch-carousel[data-aspect="16:9"] .ch-carousel__slide {
+  aspect-ratio: 16 / 9;
+}
+.ch-carousel[data-aspect="21:9"] .ch-carousel__slide {
+  aspect-ratio: 21 / 9;
+}
+.ch-carousel[data-aspect="4:3"] .ch-carousel__slide {
+  aspect-ratio: 4 / 3;
+}
+.ch-carousel[data-aspect="1:1"] .ch-carousel__slide {
+  aspect-ratio: 1;
+}
+.ch-carousel[data-aspect="3:4"] .ch-carousel__slide {
+  aspect-ratio: 3 / 4;
+}
+/* A wide hero frame is too short on a phone: narrow carousels use a taller one (still one size). */
+@container (max-width: 40rem) {
+  .ch-carousel[data-variant="hero"]:is([data-aspect="16:9"], [data-aspect="21:9"])
+    .ch-carousel__slide {
+    aspect-ratio: 4 / 5;
+  }
+}
+/* A slide's content fills its frame: images cover it, a band stays inside it. */
+.ch-carousel[data-aspect] .ch-carousel__slide > * {
+  height: 100%;
+}
+.ch-carousel[data-aspect] .ch-carousel__slide :is(.ch-figure, .ch-figure img) {
+  height: 100%;
+  width: 100%;
+  object-fit: cover;
+  margin: 0;
+}
+.ch-carousel .ch-band {
+  margin-inline: 0;
+  padding-inline: clamp(1rem, 6%, 4rem);
+}
+.ch-carousel[data-variant="hero"] .ch-band {
+  display: flex;
+  align-items: center;
+}
+/* A band holding only a picture fills what its padding leaves (under a transparent header too). */
+.ch-carousel[data-variant="hero"] .ch-band > .ch-band__inner:has(> .ch-figure:only-child) {
+  flex: 1;
+  align-self: stretch;
+  min-height: 0;
+}
+/* Controls: arrows the module reveals (their place kept), markers as links. */
+.ch-carousel__controls {
+  @apply mt-3 flex items-center justify-center gap-3;
+}
+.ch-carousel__arrow {
+  @apply inline-flex size-9 cursor-pointer items-center justify-center rounded-full border border-zinc-300 text-lg;
+  background: var(--ch-color-surface);
+}
+.ch-carousel__arrow[data-ch-pending] {
+  visibility: hidden;
+}
+.ch-carousel__arrow[aria-disabled="true"] {
+  @apply cursor-default opacity-40;
+}
+.ch-carousel__markers {
+  @apply flex flex-wrap items-center justify-center gap-1.5;
+  scroll-target-group: auto;
+}
+.ch-carousel__markers a {
+  @apply inline-flex min-w-7 items-center justify-center rounded-full px-2 py-0.5 text-sm tabular-nums text-zinc-600 no-underline;
+}
+.ch-carousel__markers[data-style="dots"] a {
+  @apply size-6 min-w-6 p-0;
+}
+.ch-carousel__markers[data-style="dots"] a::before {
+  content: "";
+  @apply block size-2 rounded-full bg-current;
+}
+.ch-carousel__markers a:is(:target-current, [aria-current="true"]) {
+  background: var(--ch-color-brand);
+  color: var(--ch-color-on-brand);
+}
+.ch-carousel__markers[data-style="dots"] a:is(:target-current, [aria-current="true"]) {
+  background: transparent;
+  color: var(--ch-color-brand);
+}
+
+/*
+ * RFC-0027 27c: galleries (one image at a time, whole, with thumbnails) and testimonials (centred,
+ * the neighbours peeking in). A gallery shows each image whole on a calm field until RFC-0028's
+ * fit modes (blur-fill) arrive.
+ */
+.ch-carousel[data-variant="gallery"] .ch-carousel__track {
+  grid-auto-columns: 100%;
+  gap: 0;
+  scrollbar-width: none;
+}
+.ch-carousel[data-variant="gallery"] .ch-carousel__slide {
+  scroll-snap-stop: always;
+  background: var(--ch-color-surface-muted);
+  border-radius: var(--ch-radius-m, 0.5rem);
+}
+.ch-carousel[data-variant="gallery"][data-aspect]
+  .ch-carousel__slide
+  :is(.ch-figure, .ch-figure img) {
+  object-fit: contain;
+}
+.ch-carousel__markers[data-style="thumbs"] {
+  @apply flex-nowrap justify-start gap-2 overflow-x-auto;
+  scrollbar-width: thin;
+}
+.ch-carousel__markers[data-style="thumbs"] a {
+  @apply size-16 min-w-16 shrink-0 overflow-hidden rounded p-0 opacity-70;
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+}
+.ch-carousel__markers[data-style="thumbs"] a img {
+  @apply size-full object-cover;
+}
+.ch-carousel__markers[data-style="thumbs"] a:is(:target-current, [aria-current="true"]) {
+  background: transparent;
+  opacity: 1;
+  outline-color: var(--ch-color-brand);
+}
+.ch-carousel[data-variant="testimonials"] {
+  --ch-c-peek: 24%;
+}
+.ch-carousel[data-variant="testimonials"][data-peek="none"] {
+  --ch-c-peek: 0%;
+}
+.ch-carousel[data-variant="testimonials"] .ch-carousel__slide {
+  scroll-snap-align: center;
+}
+.ch-carousel[data-variant="testimonials"] .ch-carousel__track {
+  /* one quote in the middle, its neighbours' edges showing; the first and last centre too */
+  grid-auto-columns: 100%;
+  padding-inline: calc(var(--ch-c-peek) / 2);
+  scroll-padding-inline: calc(var(--ch-c-peek) / 2);
+}
+
+/* RFC-0027 27d: a playing hero's rotation control: first in Tab order (first in the markup), shown
+   at the start of the controls row (clear of a transparent header over the hero). */
+.ch-carousel__rotate {
+  @apply absolute bottom-0 start-4 z-10 inline-flex size-9 cursor-pointer items-center justify-center rounded-full border border-zinc-300 text-base;
+  background: var(--ch-color-surface);
+  color: var(--ch-color-text);
+}
+.ch-carousel__rotate[data-ch-pending] {
+  display: none;
+}
+.ch-carousel__rotate[data-state="playing"] [data-when="stopped"],
+.ch-carousel__rotate[data-state="stopped"] [data-when="playing"] {
+  display: none;
+}
+.ch-carousel__rotate > span {
+  display: inline-flex;
+}
diff --git a/packages/cli/test/fixtures/theme-v0.4.0/src/styles/features/chrome-menus.css b/packages/cli/test/fixtures/theme-v0.4.0/src/styles/features/chrome-menus.css
new file mode 100644
index 00000000..a33935dd
--- /dev/null
+++ b/packages/cli/test/fixtures/theme-v0.4.0/src/styles/features/chrome-menus.css
@@ -0,0 +1,264 @@
+/*
+ * RFC-0025 25b: the phone menu, submenus, hiding, shrinking and the transparent header.
+ * `--ch-header-h` is the chrome module's measure of the header (a close guess until it runs).
+ */
+:root {
+  --ch-header-h: 4.75rem;
+}
+.ch-menu-slot {
+  display: none;
+}
+@media (max-width: 639.98px) {
+  .ch-header[data-collapse="sm"] :is(.ch-header__nav, .ch-header__utility, .ch-header-search) {
+    display: none;
+  }
+  .ch-header[data-collapse="sm"] .ch-menu-slot {
+    display: block;
+  }
+  .ch-header[data-collapse="sm"] .ch-header__brand {
+    margin-inline-end: auto;
+  }
+}
+@media (max-width: 767.98px) {
+  .ch-header[data-collapse="md"] :is(.ch-header__nav, .ch-header__utility, .ch-header-search) {
+    display: none;
+  }
+  .ch-header[data-collapse="md"] .ch-menu-slot {
+    display: block;
+  }
+  .ch-header[data-collapse="md"] .ch-header__brand {
+    margin-inline-end: auto;
+  }
+}
+@media (max-width: 1023.98px) {
+  .ch-header[data-collapse="lg"] :is(.ch-header__nav, .ch-header__utility, .ch-header-search) {
+    display: none;
+  }
+  .ch-header[data-collapse="lg"] .ch-menu-slot {
+    display: block;
+  }
+  .ch-header[data-collapse="lg"] .ch-header__brand {
+    margin-inline-end: auto;
+  }
+}
+.ch-header[data-collapse="always"] :is(.ch-header__nav, .ch-header__utility, .ch-header-search) {
+  display: none;
+}
+.ch-header[data-collapse="always"] .ch-menu-slot {
+  display: block;
+}
+.ch-header[data-collapse="always"] .ch-header__brand {
+  margin-inline-end: auto;
+}
+.ch-menu__open {
+  @apply inline-flex cursor-pointer list-none items-center gap-2 rounded border border-current/25 px-3 py-1.5 text-sm font-medium;
+}
+.ch-menu__open::-webkit-details-marker {
+  display: none;
+}
+/* What opens over the page reads like the page, whatever the header stands on. */
+:is(.ch-menu__panel, .ch-nav-menu__pop, .ch-menu__dialog) {
+  background: var(--ch-color-surface);
+  color: var(--ch-color-text);
+}
+.ch-menu[open] > .ch-menu__panel {
+  @apply absolute inset-x-4 top-full z-40 overflow-auto rounded-lg border border-zinc-200 p-4 shadow-lg;
+  max-height: calc(100dvh - var(--ch-header-h) - 1rem);
+}
+.ch-menu__panel {
+  @apply grid gap-4;
+}
+.ch-menu__nav ul {
+  @apply grid gap-1;
+}
+.ch-menu__nav a,
+.ch-menu__nav summary,
+.ch-menu__nav li > span {
+  @apply block rounded px-2 py-2 text-base;
+}
+.ch-menu__nav a:hover {
+  background: var(--ch-color-surface-muted);
+}
+/* A group's line: its link (or name) and the caret, side by side. */
+.ch-menu__nav summary {
+  @apply flex items-center justify-between gap-2;
+}
+.ch-menu__nav summary > a {
+  @apply p-0;
+}
+.ch-menu__nav--small a {
+  @apply py-1.5 text-sm;
+}
+.ch-menu__current {
+  @apply font-semibold;
+}
+.ch-menu__panel .ch-nav-menu > ul {
+  @apply static mt-0 border-0 p-0 pl-3 shadow-none;
+}
+.ch-menu__search input {
+  @apply w-full rounded-md border border-zinc-300 px-3 py-2;
+}
+/* Drawers and the full-screen menu: a modal dialog (the browser traps focus, Escape closes it). */
+.ch-menu__dialog {
+  @apply m-0 content-start gap-4 p-4;
+  max-width: none;
+  max-height: none;
+  height: 100dvh;
+  width: min(22rem, calc(100vw - 3rem));
+  border: 0;
+}
+/* Only an open dialog is laid out: a display of its own would show a closed one. */
+.ch-menu__dialog[open] {
+  display: grid;
+}
+.ch-menu__dialog[data-style="drawer-end"] {
+  margin-inline-start: auto;
+}
+.ch-menu__dialog[data-style="fullscreen"] {
+  width: 100vw;
+}
+.ch-menu__dialog::backdrop {
+  background: rgb(0 0 0 / 0.45);
+}
+.ch-menu__bar {
+  @apply flex items-center justify-between gap-3;
+}
+.ch-menu__close {
+  @apply rounded border border-zinc-300 px-3 py-1.5 text-sm font-medium;
+}
+.ch-menu__dialog[open] {
+  transition:
+    translate var(--ch-dur-2, 0.25s) var(--ch-ease-out, ease-out),
+    opacity var(--ch-dur-2, 0.25s) ease-out;
+}
+@starting-style {
+  .ch-menu__dialog[data-style="drawer-start"][open] {
+    translate: -100% 0;
+  }
+  .ch-menu__dialog[data-style="drawer-end"][open] {
+    translate: 100% 0;
+  }
+  .ch-menu__dialog[data-style="fullscreen"][open] {
+    opacity: 0;
+  }
+}
+/* Submenus in the bar: popovers under their button (anchor positioning; the module otherwise). */
+.ch-nav-menu[data-popover] {
+  @apply inline-flex items-center gap-1;
+}
+.ch-nav-menu__btn {
+  @apply inline-flex cursor-pointer items-center gap-1 rounded px-1 py-0.5;
+}
+/* From the text's own color, so it reads on the page and on a transparent header alike. */
+.ch-nav-menu__btn:hover,
+.ch-nav-menu__btn:has(+ :popover-open) {
+  background: color-mix(in oklab, currentColor 12%, transparent);
+}
+.ch-nav-menu__pop {
+  @apply min-w-48 rounded-lg border border-zinc-200 p-2 text-sm shadow-lg;
+  margin: 0;
+  inset: auto;
+  position-area: bottom span-right;
+  margin-block-start: 6px;
+}
+.ch-nav-menu__pop ul {
+  @apply grid gap-0.5;
+}
+.ch-nav-menu__pop a,
+.ch-nav-menu__pop li > span {
+  @apply block rounded px-2 py-1.5;
+}
+.ch-nav-menu__pop a:hover {
+  background: var(--ch-color-surface-muted);
+}
+/* Hiding and shrinking move the header, never its box, so nothing below it shifts. */
+.ch-header[data-behavior="hide-on-scroll"],
+.ch-header[data-shrink],
+.ch-header[data-shrink] .ch-header__inner {
+  transition: translate var(--ch-dur-2, 0.25s) var(--ch-ease-out, ease-out);
+}
+.ch-header[data-shrink][data-ch-scrolled] {
+  translate: 0 -0.75rem;
+}
+.ch-header[data-shrink][data-ch-scrolled] .ch-header__inner {
+  translate: 0 0.375rem;
+}
+.ch-header[data-behavior="hide-on-scroll"][data-ch-hidden] {
+  translate: 0 -100%;
+}
+/* Transparent over a loud first band: that surface's text role, its own fill once scrolled. */
+.ch-header[data-transparent] {
+  margin-block-end: calc(-1 * var(--ch-header-h));
+}
+.ch-header[data-transparent]:not([data-ch-scrolled]) {
+  background: transparent;
+  border-bottom-color: transparent;
+  box-shadow: none;
+}
+.ch-header[data-transparent][data-over="inverse"]:not([data-ch-scrolled]) {
+  color: var(--ch-color-text-inverse);
+}
+.ch-header[data-transparent]:is([data-over="brand"], [data-over="gradient"]):not(
+  [data-ch-scrolled]
+) {
+  color: var(--ch-color-on-brand);
+}
+.ch-header[data-transparent][data-over="accent"]:not([data-ch-scrolled]) {
+  color: var(--ch-color-on-accent);
+}
+.ch-header[data-transparent]:not([data-ch-scrolled])
+  :is(.ch-header__nav, .ch-header__utility, .ch-header__bar-link) {
+  color: inherit;
+}
+.ch-header[data-transparent]:not([data-ch-scrolled]) :is(.ch-header__nav, .ch-header__utility) > a,
+.ch-header[data-transparent]:not([data-ch-scrolled]) .ch-nav-menu[data-popover] > :is(a, button) {
+  color: inherit;
+}
+/* On a brand hero the primary button would vanish into it: its colors swap until the fill. */
+.ch-header[data-transparent]:is([data-over="brand"], [data-over="gradient"]):not([data-ch-scrolled])
+.ch-button--primary {
+  background: var(--ch-color-on-brand);
+  color: var(--ch-color-brand);
+}
+.ch-header[data-transparent][data-ch-scrolled] {
+  background: var(--ch-color-surface);
+  transition: background-color var(--ch-dur-2, 0.25s) ease-out;
+}
+/* Under a transparent header the page starts at the very top (the band makes its own room). */
+.ch-header[data-transparent] ~ main > .ch-surface:first-child {
+  padding-block-start: 0;
+}
+/* The first band (the root or its first child, three levels at most, like `heroSurface`) starts
+   under the header: it keeps its own room above the content. */
+.ch-header[data-transparent] ~ main > .ch-surface:first-child > .ch-band:first-child,
+.ch-header[data-transparent] ~ main > .ch-surface:first-child > :first-child > .ch-band:first-child,
+.ch-header[data-transparent]
+  ~ main
+  > .ch-surface:first-child
+  > :first-child
+  > :first-child
+  > .ch-band:first-child,
+.ch-header[data-transparent]
+  ~ main
+  > .ch-surface:first-child
+  .ch-carousel[data-variant="hero"]
+  > .ch-carousel__track
+  > .ch-carousel__slide
+  > .ch-band:first-child {
+  padding-block-start: calc(var(--ch-header-h) + 3rem);
+}
+:root[data-ch-motion="none"] :is(.ch-header, .ch-header__inner, .ch-menu__dialog) {
+  transition: none;
+}
+@media (prefers-reduced-motion: reduce) {
+  :is(.ch-header, .ch-header__inner, .ch-menu__dialog) {
+    transition: none;
+  }
+}
+/* The `/menu` page: the phone menu, for readers without the dialog. */
+.ch-menu-page {
+  @apply py-8;
+}
+.ch-menu-page h1 {
+  @apply mb-6 text-3xl font-bold;
+}
diff --git a/packages/cli/test/fixtures/theme-v0.4.0/src/styles/features/chrome.css b/packages/cli/test/fixtures/theme-v0.4.0/src/styles/features/chrome.css
new file mode 100644
index 00000000..dd9e04b4
--- /dev/null
+++ b/packages/cli/test/fixtures/theme-v0.4.0/src/styles/features/chrome.css
@@ -0,0 +1,193 @@
+/*
+ * Site chrome (RFC-0025 §2): the header and footer from `resolveChrome`. The defaults (logo-left,
+ * static, content width, plain; a simple footer) reproduce the former header and footer.
+ */
+.ch-skip {
+  @apply sr-only;
+}
+.ch-skip:focus {
+  @apply not-sr-only fixed top-2 left-2 z-50 rounded bg-white px-3 py-2 text-sm font-medium text-zinc-900 shadow;
+}
+#main:focus {
+  outline: none;
+}
+.ch-header {
+  @apply relative z-30;
+}
+.ch-header__inner {
+  @apply mx-auto flex max-w-3xl flex-wrap items-center justify-between gap-3 px-4 py-6;
+}
+.ch-header[data-width="wide"] .ch-header__inner {
+  @apply max-w-6xl;
+}
+.ch-header[data-width="full"] .ch-header__inner {
+  @apply max-w-none sm:px-8;
+}
+.ch-header__brand {
+  @apply shrink-0 text-lg font-semibold whitespace-nowrap;
+}
+.ch-header__nav,
+.ch-header__utility {
+  @apply flex flex-wrap gap-4 text-sm text-zinc-600;
+}
+.ch-header__utility {
+  @apply text-xs;
+}
+.ch-header__actions {
+  @apply flex items-center gap-3;
+}
+.ch-header__actions:empty {
+  display: none;
+}
+.ch-header__actions .ch-button {
+  @apply px-3 py-1.5 text-sm whitespace-nowrap;
+}
+/* Layouts: the nav in the middle; everything centered on its own rows; brand and actions apart. */
+@media (min-width: 768px) {
+  .ch-header[data-layout="logo-left-nav-center"] .ch-header__inner {
+    display: grid;
+    grid-template-columns: 1fr auto 1fr;
+  }
+  .ch-header[data-layout="logo-left-nav-center"] .ch-header__actions {
+    justify-self: end;
+  }
+  .ch-header[data-layout="split"] .ch-header__nav {
+    margin-inline-end: auto;
+  }
+  .ch-header[data-layout="split"] .ch-header__brand {
+    order: 2;
+    margin-inline-end: auto;
+  }
+  .ch-header[data-layout="split"] .ch-header__nav {
+    order: 1;
+  }
+  .ch-header[data-layout="split"] .ch-header__actions {
+    order: 3;
+  }
+}
+.ch-header[data-layout="centered"] .ch-header__inner {
+  @apply flex-col justify-center text-center;
+}
+.ch-header[data-layout="centered"] .ch-header__nav {
+  @apply justify-center;
+}
+/* Behaviors: sticky; hide-on-scroll and fixed are sticky too (the chrome module hides the first). */
+.ch-header:is([data-behavior="sticky"], [data-behavior="hide-on-scroll"], [data-behavior="fixed"]) {
+  position: sticky;
+  top: 0;
+  background: var(--ch-color-surface, #fff);
+  border-bottom: 1px solid rgb(0 0 0 / 0.08);
+}
+:root:has(
+  .ch-header:is([data-behavior="sticky"], [data-behavior="hide-on-scroll"], [data-behavior="fixed"])
+) {
+  scroll-padding-top: var(--ch-header-h);
+}
+/* Surfaces: the same color roles as bands. */
+:is(.ch-header, .ch-footer)[data-surface="muted"] {
+  background: var(--ch-color-surface-muted);
+}
+.ch-header[data-surface="raised"] {
+  background: var(--ch-color-surface-raised);
+  box-shadow:
+    0 1px 2px rgb(0 0 0 / 0.05),
+    0 6px 20px -6px rgb(0 0 0 / 0.12);
+}
+:is(.ch-header, .ch-footer)[data-surface="inverse"] {
+  background: var(--ch-color-surface-inverse);
+  color: var(--ch-color-text-inverse);
+}
+.ch-header[data-surface="brand"] {
+  background: var(--ch-color-brand);
+  color: var(--ch-color-on-brand);
+}
+:is(.ch-header, .ch-footer):is([data-surface="inverse"], [data-surface="brand"])
+  :is(.ch-header__nav, .ch-header__utility, .ch-footer__inner) {
+  color: inherit;
+}
+:is(.ch-header, .ch-footer):is([data-surface="inverse"], [data-surface="brand"]) a {
+  color: inherit;
+}
+.ch-logo {
+  @apply block w-auto;
+  height: 1.75rem;
+}
+.ch-logo[data-size="s"] {
+  height: 1.25rem;
+}
+.ch-logo[data-size="l"] {
+  height: 2.5rem;
+}
+.ch-logo[data-variant="dark"] {
+  display: none;
+}
+:root[data-ch-mode="dark"] .ch-logo[data-variant="light"] {
+  display: none;
+}
+:root[data-ch-mode="dark"] .ch-logo[data-variant="dark"] {
+  display: block;
+}
+@media (prefers-color-scheme: dark) {
+  :root[data-ch-mode="auto"] .ch-logo[data-variant="light"] {
+    display: none;
+  }
+  :root[data-ch-mode="auto"] .ch-logo[data-variant="dark"] {
+    display: block;
+  }
+}
+.ch-footer__inner {
+  @apply mx-auto max-w-3xl px-4 py-8 text-xs text-zinc-500;
+}
+/* On the muted surface, the role checked against it (text-muted on surface-muted, 4.5:1). */
+.ch-footer[data-surface="muted"] :is(.ch-footer__inner, .ch-footer__tagline) {
+  color: var(--ch-color-text-muted);
+}
+.ch-footer:not([data-layout="simple"], [data-layout="minimal"]) .ch-footer__inner {
+  @apply max-w-6xl py-12;
+}
+.ch-footer__legal {
+  @apply flex flex-wrap items-center justify-between gap-4;
+}
+.ch-footer[data-layout="minimal"] .ch-footer__legal {
+  @apply justify-center;
+}
+.ch-footer__top {
+  @apply mb-8 grid gap-8 text-sm sm:grid-cols-2 lg:grid-cols-4;
+}
+.ch-footer__brand {
+  @apply text-base font-semibold text-zinc-900;
+}
+.ch-footer__tagline {
+  @apply mt-2 max-w-xs text-zinc-600;
+}
+.ch-footer__social {
+  @apply mt-3 flex flex-wrap gap-3;
+}
+.ch-footer__legal .ch-footer__social {
+  @apply mt-0;
+}
+.ch-footer__social a,
+.ch-footer__col a {
+  @apply hover:text-zinc-700;
+}
+.ch-footer__heading {
+  @apply mb-3 font-medium text-zinc-900;
+}
+.ch-footer__col ul {
+  @apply space-y-2;
+}
+.ch-footer__cta {
+  @apply mb-10 flex flex-wrap items-center justify-between gap-4 rounded-lg px-6 py-8;
+  background: var(--ch-color-surface-muted);
+}
+.ch-footer:is([data-surface="muted"], [data-surface="inverse"]) .ch-footer__cta {
+  background: var(--ch-color-surface-raised);
+  color: var(--ch-color-text);
+}
+.ch-footer__cta-heading {
+  @apply text-xl font-semibold text-zinc-900;
+}
+:is(.ch-footer)[data-surface="inverse"]
+  :is(.ch-footer__brand, .ch-footer__heading, .ch-footer__tagline, .ch-footer__cta-heading) {
+  color: inherit;
+}
diff --git a/packages/cli/test/fixtures/theme-v0.4.0/src/styles/features/comments.css b/packages/cli/test/fixtures/theme-v0.4.0/src/styles/features/comments.css
new file mode 100644
index 00000000..313b3021
--- /dev/null
+++ b/packages/cli/test/fixtures/theme-v0.4.0/src/styles/features/comments.css
@@ -0,0 +1,75 @@
+/* Reader comments (RFC-0007): `<Comments />` renders plain HTML; these rules only style it. */
+.cloudhal-comments {
+  @apply space-y-4 border-t border-zinc-200 py-8;
+}
+.cloudhal-comments h2 {
+  @apply text-2xl font-semibold;
+}
+.cloudhal-comment-list,
+.cloudhal-comment-replies {
+  @apply space-y-4;
+}
+.cloudhal-comment-replies {
+  @apply mt-4 border-l border-zinc-200 pl-4;
+}
+.cloudhal-comment-meta {
+  @apply flex flex-wrap items-baseline gap-2 text-sm text-zinc-500;
+}
+.cloudhal-comment-author {
+  @apply font-semibold text-zinc-900;
+}
+.cloudhal-comment-badge {
+  @apply rounded bg-zinc-100 px-1.5 text-xs text-zinc-700;
+}
+.cloudhal-comment-body {
+  @apply mt-1 space-y-2 leading-relaxed;
+}
+.cloudhal-comment-body a,
+.cloudhal-comment-context {
+  @apply underline underline-offset-4;
+}
+.cloudhal-comment-actions {
+  @apply mt-1 flex flex-wrap items-start gap-3 text-sm text-zinc-500;
+}
+.cloudhal-comment-actions summary,
+.cloudhal-comment-reply {
+  @apply cursor-pointer underline-offset-4 hover:underline;
+}
+.cloudhal-comment-removed > p {
+  @apply text-sm text-zinc-500 italic;
+}
+.cloudhal-comment-note {
+  @apply rounded border border-zinc-300 bg-zinc-50 p-3 text-sm;
+}
+.cloudhal-comment-form,
+.cloudhal-report-form {
+  @apply max-w-xl space-y-3;
+}
+.cloudhal-comment-form h3 {
+  @apply text-lg font-semibold;
+}
+.cloudhal-comment-form label,
+.cloudhal-report-form label {
+  @apply block text-sm font-medium;
+}
+.cloudhal-comment-form small,
+.cloudhal-comment-privacy {
+  @apply block text-xs text-zinc-500;
+}
+.cloudhal-comment-form :is(input, textarea),
+.cloudhal-report-form :is(input, textarea, select) {
+  @apply w-full rounded border border-zinc-300 px-2 py-1;
+}
+.cloudhal-comment-form [aria-invalid="true"] {
+  @apply border-red-600;
+}
+.cloudhal-comment-form button,
+.cloudhal-report-form button {
+  @apply rounded px-4 py-2 bg-(--ch-color-surface-inverse) text-(--ch-color-text-inverse);
+}
+.cloudhal-comment-form button[data-cancel-reply] {
+  @apply bg-zinc-200 text-zinc-900;
+}
+.cloudhal-comments-pages a {
+  @apply text-sm underline underline-offset-4;
+}
diff --git a/packages/cli/test/fixtures/theme-v0.4.0/src/styles/features/icons.css b/packages/cli/test/fixtures/theme-v0.4.0/src/styles/features/icons.css
new file mode 100644
index 00000000..e2261d10
--- /dev/null
+++ b/packages/cli/test/fixtures/theme-v0.4.0/src/styles/features/icons.css
@@ -0,0 +1,70 @@
+/*
+ * RFC-0026: icons follow the text (1em, currentColor), sit on its baseline, flip right-to-left
+ * when they point, and stay visible in forced colors.
+ */
+.ch-icon {
+  display: inline-block;
+  flex-shrink: 0;
+  vertical-align: -0.125em;
+}
+[dir="rtl"] .ch-icon[data-ch-mirror] {
+  transform: scaleX(-1);
+}
+@media (forced-colors: active) {
+  .ch-icon {
+    fill: CanvasText;
+  }
+  a .ch-icon,
+  button .ch-icon {
+    fill: currentColor;
+  }
+}
+.ch-footer__social {
+  @apply items-center;
+}
+.ch-social-link {
+  @apply inline-flex size-8 items-center justify-center rounded-full text-lg;
+}
+.ch-social-link:hover {
+  background: color-mix(in oklab, currentColor 12%, transparent);
+}
+
+/* RFC-0026: icons in surfaces — on their own, in buttons, badges and statistics. */
+.ch-icon-box {
+  /* w-fit: in a Stack or Card (a flex column) it keeps its own width, at the start. */
+  @apply inline-flex w-fit items-center justify-center text-2xl;
+}
+.ch-icon-box[data-size="s"] {
+  @apply text-base;
+}
+.ch-icon-box[data-size="l"] {
+  @apply text-4xl;
+}
+.ch-icon-box[data-size="xl"] {
+  @apply text-6xl;
+}
+.ch-icon-box[data-tone="brand"] {
+  color: var(--ch-color-brand);
+}
+.ch-icon-box[data-tone="accent"] {
+  color: var(--ch-color-accent);
+}
+.ch-icon-box[data-tone="success"] {
+  color: #15803d;
+}
+.ch-icon-box[data-tone="warning"] {
+  color: #b45309;
+}
+.ch-icon-box[data-tone="danger"] {
+  color: #b91c1c;
+}
+.ch-button:has(> .ch-button__icon) {
+  @apply inline-flex items-center gap-2;
+}
+.ch-badge > .ch-icon {
+  @apply mr-1;
+}
+.ch-stat__icon {
+  @apply mb-2 block text-3xl;
+  color: var(--ch-color-brand);
+}
diff --git a/packages/cli/test/fixtures/theme-v0.4.0/src/styles/features/languages.css b/packages/cli/test/fixtures/theme-v0.4.0/src/styles/features/languages.css
new file mode 100644
index 00000000..437af5b7
--- /dev/null
+++ b/packages/cli/test/fixtures/theme-v0.4.0/src/styles/features/languages.css
@@ -0,0 +1,34 @@
+/* RFC-0033 §4: the language switcher (header action and footer list). */
+.ch-languages {
+  position: relative;
+}
+.ch-languages > summary {
+  cursor: pointer;
+  list-style: none;
+}
+.ch-languages > ul {
+  position: absolute;
+  inset-inline-end: 0;
+  z-index: 20;
+  margin-block-start: 0.5rem;
+  min-inline-size: 10rem;
+  padding: 0.5rem;
+  border: 1px solid rgb(0 0 0 / 0.12);
+  border-radius: 0.5rem;
+  background: var(--ch-color-surface);
+}
+.ch-languages a,
+.ch-footer__languages a {
+  display: block;
+  padding-block: 0.25rem;
+}
+.ch-languages a[aria-current="true"],
+.ch-footer__languages a[aria-current="true"] {
+  font-weight: 600;
+}
+.ch-footer__languages ul {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.25rem 1rem;
+  margin-block: 1rem;
+}
diff --git a/packages/cli/test/fixtures/theme-v0.4.0/src/styles/features/live-surfaces.css b/packages/cli/test/fixtures/theme-v0.4.0/src/styles/features/live-surfaces.css
new file mode 100644
index 00000000..2c3a995d
--- /dev/null
+++ b/packages/cli/test/fixtures/theme-v0.4.0/src/styles/features/live-surfaces.css
@@ -0,0 +1,238 @@
+/* Live surfaces (RFC-0020 §4): conditional components, inputs and action buttons. */
+.ch-node {
+  display: contents;
+}
+.ch-node[hidden] {
+  display: none;
+}
+/* An action button starts from the browser's button: reset it, then give each style its own look. */
+button.ch-button {
+  @apply cursor-pointer border-0 bg-transparent font-medium;
+  font-family: inherit;
+}
+button.ch-button--primary {
+  @apply text-(--ch-color-on-brand);
+  background: var(--ch-color-brand);
+}
+button.ch-button--secondary {
+  @apply border border-zinc-300 text-zinc-900;
+}
+.ch-toggle {
+  @apply inline-flex w-fit flex-wrap gap-1 rounded-lg bg-zinc-100 p-1;
+}
+.ch-toggle__option input {
+  @apply sr-only;
+}
+.ch-toggle__option span {
+  @apply block cursor-pointer rounded-md px-3 py-1.5 text-sm font-medium text-zinc-600;
+}
+.ch-toggle__option input:checked + span {
+  @apply bg-white text-zinc-900 shadow-sm;
+}
+.ch-toggle__option input:focus-visible + span {
+  @apply outline-2 outline-offset-2;
+}
+.ch-field {
+  @apply grid content-start gap-1.5;
+}
+.ch-field__label {
+  @apply text-sm font-medium;
+}
+.ch-select {
+  @apply w-full max-w-xs rounded-md border border-zinc-300 bg-white px-3 py-2;
+}
+.ch-slider {
+  @apply flex items-center gap-3;
+}
+.ch-slider input {
+  @apply w-full max-w-sm;
+  accent-color: var(--ch-color-brand);
+}
+.ch-slider__value {
+  @apply min-w-12 text-right font-medium tabular-nums;
+}
+/* RFC-0022 §2: local inputs. */
+.ch-input-wrap {
+  @apply flex w-full max-w-xs items-center gap-2;
+}
+.ch-input {
+  @apply w-full max-w-xs rounded-md border border-zinc-300 bg-white px-3 py-2 tabular-nums;
+}
+.ch-input[aria-invalid="true"] {
+  @apply border-red-600;
+}
+.ch-input__unit {
+  @apply shrink-0 text-sm text-zinc-600;
+}
+.ch-field__help {
+  @apply text-sm text-zinc-600;
+}
+[aria-invalid="true"] ~ .ch-field__help,
+.ch-input-wrap:has([aria-invalid="true"]) ~ .ch-field__help {
+  @apply text-red-700;
+}
+.ch-check {
+  @apply flex w-fit cursor-pointer items-center gap-2;
+}
+.ch-check input {
+  @apply size-4;
+  accent-color: var(--ch-color-brand);
+}
+.ch-radio {
+  @apply m-0 grid min-w-0 gap-1.5 border-0 p-0;
+}
+.ch-radio__options {
+  @apply flex flex-col gap-1.5;
+}
+.ch-radio__option {
+  @apply flex w-fit cursor-pointer items-center gap-2;
+}
+.ch-radio__option input {
+  accent-color: var(--ch-color-brand);
+}
+.ch-radio[data-variant="buttons"] .ch-radio__options {
+  @apply inline-flex w-fit flex-row flex-wrap gap-1 rounded-lg bg-zinc-100 p-1;
+}
+.ch-radio[data-variant="buttons"] .ch-radio__option input {
+  @apply sr-only;
+}
+.ch-radio[data-variant="buttons"] .ch-radio__option span {
+  @apply block min-h-9 rounded-md px-3 py-1.5 text-sm font-medium text-zinc-600;
+}
+.ch-radio[data-variant="buttons"] .ch-radio__option input:checked + span {
+  @apply bg-white text-zinc-900 shadow-sm;
+}
+.ch-radio[data-variant="buttons"] .ch-radio__option input:focus-visible + span {
+  @apply outline-2 outline-offset-2;
+}
+.ch-noscript {
+  @apply text-sm text-zinc-600;
+}
+
+/* RFC-0022 §3: charts. Six series colors from the brand color, each distinct at 3:1 on white. */
+:root {
+  --ch-chart-1: var(--ch-color-brand);
+  --ch-chart-2: #2563eb;
+  --ch-chart-3: #d97706;
+  --ch-chart-4: #059669;
+  --ch-chart-5: #db2777;
+  --ch-chart-6: #7c3aed;
+}
+.ch-chart {
+  @apply m-0 grid gap-3;
+}
+.ch-chart__title {
+  @apply text-base font-semibold;
+}
+.ch-chart__svg {
+  @apply block h-auto w-full;
+}
+.ch-chart__grid {
+  stroke: var(--ch-color-border);
+  stroke-width: 1;
+}
+.ch-chart__tick {
+  fill: var(--ch-color-text-muted);
+  font-size: 12px;
+}
+.ch-chart__total {
+  fill: currentColor;
+  font-size: 22px;
+  font-weight: 600;
+}
+.ch-chart__legend {
+  @apply m-0 flex list-none flex-wrap gap-x-4 gap-y-1 p-0 text-sm;
+}
+.ch-chart__legend li {
+  @apply flex items-center gap-1.5;
+}
+.ch-chart__swatch {
+  @apply inline-block size-3 rounded-sm;
+}
+.ch-chart__caption,
+.ch-chart__empty {
+  @apply text-sm text-zinc-600;
+}
+.ch-chart__data summary {
+  @apply cursor-pointer text-sm text-zinc-600;
+}
+.ch-chart__data table {
+  @apply mt-2 w-full border-collapse text-sm tabular-nums;
+}
+.ch-chart__data th,
+.ch-chart__data td {
+  @apply border-b border-zinc-200 px-2 py-1 text-left;
+}
+
+/* RFC-0022 §4: tables. Below 480 px each row is a card whose cells carry their column's label. */
+.ch-table-wrap {
+  @apply w-full;
+}
+.ch-table {
+  @apply w-full border-collapse text-sm tabular-nums;
+}
+.ch-table caption {
+  @apply pb-2 text-left text-base font-semibold;
+}
+.ch-table th,
+.ch-table td {
+  @apply border-b border-zinc-200 px-3 py-2 text-left align-top;
+}
+.ch-table th {
+  @apply font-semibold text-zinc-600;
+}
+.ch-table [data-align="end"] {
+  @apply text-right;
+}
+.ch-table[data-striped="yes"] tbody tr:nth-child(even) {
+  @apply bg-zinc-50;
+}
+.ch-table tr[data-highlight="yes"] {
+  background: color-mix(in srgb, var(--ch-color-brand) 8%, transparent);
+}
+.ch-table tr[data-highlight="yes"] td:first-child {
+  box-shadow: inset 3px 0 0 var(--ch-color-brand);
+}
+@media (max-width: 480px) {
+  .ch-table thead {
+    @apply sr-only;
+  }
+  .ch-table caption {
+    @apply block w-full;
+  }
+  .ch-table,
+  .ch-table tbody,
+  .ch-table tr,
+  .ch-table td {
+    @apply block w-full;
+  }
+  .ch-table tr {
+    @apply mb-3 rounded-lg border border-zinc-200 px-3 py-1;
+  }
+  .ch-table td {
+    @apply flex justify-between gap-4 border-b border-zinc-100 px-0 text-right last:border-b-0;
+  }
+  .ch-table td::before {
+    @apply text-left font-medium text-zinc-600;
+    content: attr(data-label);
+  }
+  .ch-table td[data-phone="hide"] {
+    @apply hidden;
+  }
+  .ch-table tr[data-highlight="yes"] td:first-child {
+    box-shadow: none;
+  }
+}
+
+/*
+ * Corners of controls (src/settings.ts `radius`, RFC-0023 §3): buttons and single-line fields
+ * take `--ch-radius-control`, a pill at `full`; cards and bands keep the smaller radii. After
+ * the base rules, so they win.
+ */
+.ch-button,
+.ch-hero__cta,
+.ch-body
+  :is(input[type="text"], input[type="search"], input[type="number"], input[type="email"], select),
+.ch-body form button[type="submit"]:not(.sr-only) {
+  border-radius: var(--ch-radius-control, 0.25rem);
+}
diff --git a/packages/cli/test/fixtures/theme-v0.4.0/src/styles/features/motion-effects.css b/packages/cli/test/fixtures/theme-v0.4.0/src/styles/features/motion-effects.css
new file mode 100644
index 00000000..b244cea6
--- /dev/null
+++ b/packages/cli/test/fixtures/theme-v0.4.0/src/styles/features/motion-effects.css
@@ -0,0 +1,217 @@
+/* Heading effects: a highlighted phrase, the brand gradient, words that take turns. */
+.ch-hl {
+  background-image: linear-gradient(
+    color-mix(in oklch, var(--ch-color-accent) 38%, transparent),
+    color-mix(in oklch, var(--ch-color-accent) 38%, transparent)
+  );
+  background-repeat: no-repeat;
+  background-position: 0 88%;
+  background-size: 100% 0.36em;
+}
+@media (prefers-reduced-motion: no-preference) {
+  :root:is([data-ch-motion="subtle"], [data-ch-motion="standard"], [data-ch-motion="expressive"])
+    .ch-hl {
+    transition: background-size var(--ch-dur-slow) var(--ch-ease-standard) var(--ch-dur-normal);
+  }
+  :root:is([data-ch-motion="subtle"], [data-ch-motion="standard"], [data-ch-motion="expressive"])
+    .ch-pre
+    .ch-hl {
+    background-size: 0% 0.36em;
+  }
+  @starting-style {
+    :root:is([data-ch-motion="subtle"], [data-ch-motion="standard"], [data-ch-motion="expressive"])
+      .ch-hl {
+      background-size: 0% 0.36em;
+    }
+  }
+}
+/* From the brand to the link color: both read on the page (the token expansion checks them). */
+.ch-gradient-text {
+  color: var(--ch-color-brand);
+}
+@supports (background-clip: text) {
+  .ch-gradient-text {
+    background-image: linear-gradient(90deg, var(--ch-color-brand), var(--ch-color-link));
+    -webkit-background-clip: text;
+    background-clip: text;
+    color: transparent;
+  }
+}
+.ch-rotate {
+  display: inline-grid;
+  vertical-align: bottom;
+}
+.ch-rotate__word {
+  grid-area: 1 / 1;
+  opacity: 0;
+}
+.ch-rotate__word[data-active] {
+  opacity: 1;
+}
+@media (prefers-reduced-motion: no-preference) {
+  :root:is([data-ch-motion="standard"], [data-ch-motion="expressive"]) .ch-rotate__word {
+    translate: 0 0.35em;
+    transition:
+      opacity var(--ch-dur-normal) var(--ch-ease-standard),
+      translate var(--ch-dur-normal) var(--ch-ease-standard);
+  }
+  :root:is([data-ch-motion="standard"], [data-ch-motion="expressive"])
+    .ch-rotate__word[data-active] {
+    translate: 0 0;
+  }
+}
+/* Marquee: a still, wrapping row until the motion module sets it moving (standard and above). */
+.ch-marquee {
+  --ch-mq-gap: calc(var(--spacing) * 10);
+  --ch-mq-dur: 34s;
+  overflow: hidden;
+}
+.ch-marquee[data-gap="s"] {
+  --ch-mq-gap: calc(var(--spacing) * 4);
+}
+.ch-marquee[data-gap="m"] {
+  --ch-mq-gap: calc(var(--spacing) * 6);
+}
+.ch-marquee[data-gap="xl"] {
+  --ch-mq-gap: calc(var(--spacing) * 16);
+}
+.ch-marquee[data-speed="slow"] {
+  --ch-mq-dur: 52s;
+}
+.ch-marquee[data-speed="fast"] {
+  --ch-mq-dur: 20s;
+}
+.ch-marquee__track {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--ch-mq-gap);
+}
+.ch-marquee__track > * {
+  flex: none;
+}
+@keyframes ch-marquee {
+  to {
+    translate: calc(-50% - var(--ch-mq-gap) / 2) 0;
+  }
+}
+@media (prefers-reduced-motion: no-preference) {
+  :root:is([data-ch-motion="standard"], [data-ch-motion="expressive"]) .ch-marquee[data-ch-ready] {
+    mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
+  }
+  :root:is([data-ch-motion="standard"], [data-ch-motion="expressive"])
+    .ch-marquee[data-ch-ready]
+    .ch-marquee__track {
+    width: max-content;
+    flex-wrap: nowrap;
+    animation: ch-marquee var(--ch-mq-dur) linear infinite;
+  }
+  :root:is([data-ch-motion="standard"], [data-ch-motion="expressive"])
+    .ch-marquee[data-ch-ready][data-direction="end"]
+    .ch-marquee__track {
+    animation-direction: reverse;
+  }
+  :root:is([data-ch-motion="standard"], [data-ch-motion="expressive"])
+    .ch-marquee[data-ch-ready][data-hover-pause]:is(:hover, :focus-within)
+    .ch-marquee__track {
+    animation-play-state: paused;
+  }
+}
+/* Counter: the final number holds its width while it counts. */
+.ch-counter {
+  display: flex;
+  flex-direction: column;
+  gap: calc(var(--spacing) * 1);
+}
+.ch-counter__value {
+  font-size: var(--text-4xl);
+  font-weight: 700;
+  line-height: 1.1;
+}
+.ch-counter__num {
+  display: inline-grid;
+  font-variant-numeric: tabular-nums;
+}
+.ch-counter__num > * {
+  grid-area: 1 / 1;
+}
+.ch-counter__hold {
+  visibility: hidden;
+}
+.ch-counter__label {
+  font-size: var(--text-sm);
+  color: var(--ch-color-text-muted);
+}
+/* Loops: decorative, slow, only where motion plays, and paused by the reader's control. */
+[data-ch-loop="gradient-shift"] {
+  background-image: linear-gradient(
+    120deg,
+    color-mix(in oklch, var(--ch-color-brand) 14%, var(--ch-color-surface-raised)),
+    color-mix(in oklch, var(--ch-color-accent) 14%, var(--ch-color-surface-raised)),
+    color-mix(in oklch, var(--ch-color-brand) 14%, var(--ch-color-surface-raised))
+  );
+  background-size: 220% 220%;
+}
+@keyframes ch-loop-float {
+  to {
+    translate: 0 -6px;
+  }
+}
+@keyframes ch-loop-pulse {
+  50% {
+    scale: 1.04;
+  }
+}
+@keyframes ch-loop-spin {
+  to {
+    rotate: 360deg;
+  }
+}
+@keyframes ch-loop-gradient {
+  to {
+    background-position: 100% 50%;
+  }
+}
+@media (prefers-reduced-motion: no-preference) {
+  :root:is([data-ch-motion="standard"], [data-ch-motion="expressive"]) [data-ch-loop="float"] {
+    animation: ch-loop-float 6s ease-in-out infinite alternate;
+  }
+  :root:is([data-ch-motion="standard"], [data-ch-motion="expressive"]) [data-ch-loop="pulse"] {
+    animation: ch-loop-pulse 2.8s ease-in-out infinite;
+  }
+  :root:is([data-ch-motion="standard"], [data-ch-motion="expressive"]) [data-ch-loop="spin-slow"] {
+    animation: ch-loop-spin 28s linear infinite;
+  }
+  :root:is([data-ch-motion="standard"], [data-ch-motion="expressive"])
+    [data-ch-loop="gradient-shift"] {
+    animation: ch-loop-gradient 14s ease-in-out infinite alternate;
+  }
+}
+/* The reader's pause control: only where something actually moves on its own, once a page. */
+.ch-motion-toggle {
+  display: none;
+}
+.ch-motion-toggle[hidden] {
+  display: none !important;
+}
+@media (prefers-reduced-motion: no-preference) {
+  :root:is([data-ch-motion="standard"], [data-ch-motion="expressive"]) .ch-motion-toggle {
+    display: flex;
+    width: fit-content;
+    margin: calc(var(--spacing) * 4) auto 0;
+    align-items: center;
+    gap: calc(var(--spacing) * 2);
+    border: 1px solid var(--ch-color-border-strong);
+    border-radius: 9999px;
+    padding: calc(var(--spacing) * 1.5) calc(var(--spacing) * 4);
+    font-size: var(--text-sm);
+    color: var(--ch-color-text-muted);
+    background: var(--ch-color-surface);
+    cursor: pointer;
+  }
+  :root:is([data-ch-motion="standard"], [data-ch-motion="expressive"])
+    .ch-motion-toggle[aria-pressed="true"] {
+    color: var(--ch-color-text);
+    border-color: var(--ch-color-text);
+  }
+}
diff --git a/packages/cli/test/fixtures/theme-v0.4.0/src/styles/features/motion-scroll.css b/packages/cli/test/fixtures/theme-v0.4.0/src/styles/features/motion-scroll.css
new file mode 100644
index 00000000..9dc3b3cf
--- /dev/null
+++ b/packages/cli/test/fixtures/theme-v0.4.0/src/styles/features/motion-scroll.css
@@ -0,0 +1,309 @@
+/*
+ * Scroll effects (RFC-0024 24b): continuous, tied to the element's place in the viewport. With
+ * scroll-driven animations (Chrome, Safari) they need no script; elsewhere the motion module
+ * writes the progress as --ch-p (0–1). Only "fade-through" plays at "subtle" (it moves nothing).
+ */
+[data-ch-scroll] {
+  --ch-dep-px: calc(var(--ch-dep, 1) * var(--ch-move-m, 0px));
+}
+[data-ch-dep="-3"] {
+  --ch-dep: -3;
+}
+[data-ch-dep="-2"] {
+  --ch-dep: -2;
+}
+[data-ch-dep="-1"] {
+  --ch-dep: -1;
+}
+[data-ch-dep="1"] {
+  --ch-dep: 1;
+}
+[data-ch-dep="2"] {
+  --ch-dep: 2;
+}
+[data-ch-dep="3"] {
+  --ch-dep: 3;
+}
+@keyframes ch-sc-parallax {
+  from {
+    translate: 0 calc(var(--ch-dep-px) * -1);
+  }
+  to {
+    translate: 0 var(--ch-dep-px);
+  }
+}
+@keyframes ch-sc-pan {
+  from {
+    translate: calc(var(--ch-dep-px) * -1) 0;
+  }
+  to {
+    translate: var(--ch-dep-px) 0;
+  }
+}
+@keyframes ch-sc-fade {
+  0%,
+  100% {
+    opacity: 0.25;
+  }
+  30%,
+  70% {
+    opacity: 1;
+  }
+}
+@keyframes ch-sc-scale {
+  0% {
+    scale: 0.88;
+  }
+  45%,
+  100% {
+    scale: 1;
+  }
+}
+@keyframes ch-sc-rotate {
+  from {
+    rotate: -5deg;
+  }
+  to {
+    rotate: 5deg;
+  }
+}
+@media (prefers-reduced-motion: no-preference) {
+  @supports (animation-timeline: view()) {
+    :root:is([data-ch-motion="standard"], [data-ch-motion="expressive"]) [data-ch-scroll],
+    :root:is([data-ch-motion="subtle"], [data-ch-motion="standard"], [data-ch-motion="expressive"])
+      [data-ch-scroll="fade-through"] {
+      animation-duration: auto;
+      animation-timing-function: linear;
+      animation-fill-mode: both;
+      animation-timeline: view();
+      animation-range: cover 0% cover 100%;
+    }
+    :root:is([data-ch-motion="standard"], [data-ch-motion="expressive"])
+      [data-ch-scroll="parallax"] {
+      animation-name: ch-sc-parallax;
+    }
+    :root:is([data-ch-motion="standard"], [data-ch-motion="expressive"]) [data-ch-scroll="pan"] {
+      animation-name: ch-sc-pan;
+    }
+    :root:is([data-ch-motion="subtle"], [data-ch-motion="standard"], [data-ch-motion="expressive"])
+      [data-ch-scroll="fade-through"] {
+      animation-name: ch-sc-fade;
+    }
+    :root:is([data-ch-motion="standard"], [data-ch-motion="expressive"])
+      [data-ch-scroll="scale-through"] {
+      animation-name: ch-sc-scale;
+    }
+    :root:is([data-ch-motion="standard"], [data-ch-motion="expressive"])
+      [data-ch-scroll="rotate-through"] {
+      animation-name: ch-sc-rotate;
+    }
+  }
+  @supports not (animation-timeline: view()) {
+    :root:is([data-ch-motion="standard"], [data-ch-motion="expressive"])
+      [data-ch-scroll="parallax"] {
+      translate: 0 calc((var(--ch-p, 0.5) * 2 - 1) * var(--ch-dep-px));
+    }
+    :root:is([data-ch-motion="standard"], [data-ch-motion="expressive"]) [data-ch-scroll="pan"] {
+      translate: calc((var(--ch-p, 0.5) * 2 - 1) * var(--ch-dep-px)) 0;
+    }
+    :root:is([data-ch-motion="subtle"], [data-ch-motion="standard"], [data-ch-motion="expressive"])
+      [data-ch-scroll="fade-through"] {
+      opacity: clamp(0.25, calc(1 - (max(var(--ch-p, 0.5), 1 - var(--ch-p, 0.5)) - 0.7) * 2.5), 1);
+    }
+    :root:is([data-ch-motion="standard"], [data-ch-motion="expressive"])
+      [data-ch-scroll="scale-through"] {
+      scale: clamp(0.88, calc(0.88 + var(--ch-p, 0.5) * 0.27), 1);
+    }
+    :root:is([data-ch-motion="standard"], [data-ch-motion="expressive"])
+      [data-ch-scroll="rotate-through"] {
+      rotate: calc((var(--ch-p, 0.5) * 2 - 1) * 5deg);
+    }
+  }
+}
+/*
+ * Scroll story (RFC-0024 §3): the first child stays in view beside (or, on phones, above) the
+ * steps; the step being read gets a brand rule at its edge. Without JavaScript the steps simply
+ * follow each other, all equally readable.
+ */
+.ch-scrolly {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+  gap: calc(var(--spacing) * 10);
+  align-items: start;
+}
+.ch-scrolly[data-ratio="2-1"] {
+  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
+}
+.ch-scrolly[data-ratio="1-2"] {
+  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
+}
+.ch-scrolly > :first-child {
+  grid-row: 1 / span 12;
+  grid-column: 1;
+  position: sticky;
+  top: calc(var(--ch-header-h, 0px) + 12vh);
+}
+.ch-scrolly > .ch-step {
+  grid-column: 2;
+}
+.ch-scrolly[data-side="end"] > :first-child {
+  grid-column: 2;
+}
+.ch-scrolly[data-side="end"] > .ch-step {
+  grid-column: 1;
+}
+.ch-step {
+  display: flex;
+  min-height: 70vh;
+  flex-direction: column;
+  justify-content: center;
+  gap: calc(var(--spacing) * 3);
+  border-inline-start: 3px solid transparent;
+  padding-inline-start: calc(var(--spacing) * 5);
+}
+.ch-scrolly[data-ch-live] > .ch-step[data-ch-active] {
+  border-inline-start-color: var(--ch-color-brand);
+}
+:root:is([data-ch-motion="subtle"], [data-ch-motion="standard"], [data-ch-motion="expressive"])
+  .ch-scrolly[data-ch-live]
+  > .ch-step {
+  transition: border-color var(--ch-dur-normal, 0ms) var(--ch-ease-standard);
+}
+@media (max-width: 767px) {
+  .ch-scrolly,
+  .ch-scrolly[data-ratio] {
+    grid-template-columns: minmax(0, 1fr);
+    gap: calc(var(--spacing) * 4);
+  }
+  .ch-scrolly > :first-child,
+  .ch-scrolly[data-side="end"] > :first-child {
+    grid-row: auto;
+    grid-column: 1;
+    top: var(--ch-header-h, 0px);
+    z-index: 1;
+    max-height: 45vh;
+    overflow: hidden;
+    background: var(--ch-color-surface);
+    padding-block: calc(var(--spacing) * 2);
+  }
+  .ch-scrolly > .ch-step,
+  .ch-scrolly[data-side="end"] > .ch-step {
+    grid-column: 1;
+    min-height: 55vh;
+  }
+}
+/* Scroll progress (RFC-0024 §3): a thin bar; hidden where nothing may move. */
+.ch-progress {
+  display: block;
+  height: 3px;
+  overflow: hidden;
+  background: color-mix(in oklch, var(--ch-color-border) 70%, transparent);
+}
+.ch-progress[data-placement="page"] {
+  position: fixed;
+  inset: 0 0 auto 0;
+  z-index: 50;
+}
+.ch-progress[data-placement="section"] {
+  position: sticky;
+  top: var(--ch-header-h, 0px);
+  z-index: 5;
+}
+.ch-progress__bar {
+  display: block;
+  height: 100%;
+  background: var(--ch-color-brand);
+  transform-origin: 0 50%;
+  scale: var(--ch-p, 0) 1;
+}
+.ch-progress[data-tone="accent"] .ch-progress__bar {
+  background: var(--ch-color-accent);
+}
+.ch-progress[data-tone="neutral"] .ch-progress__bar {
+  background: var(--ch-color-text-muted);
+}
+:root[data-ch-motion="none"] .ch-progress {
+  display: none;
+}
+@keyframes ch-progress {
+  from {
+    scale: 0 1;
+  }
+  to {
+    scale: 1 1;
+  }
+}
+@supports (animation-timeline: scroll()) {
+  .ch-surface {
+    view-timeline: --ch-section block;
+  }
+  .ch-progress[data-placement="page"] .ch-progress__bar {
+    animation: ch-progress linear both;
+    animation-duration: auto;
+    animation-timeline: scroll(root);
+  }
+  .ch-progress[data-placement="section"] .ch-progress__bar {
+    animation: ch-progress linear both;
+    animation-duration: auto;
+    animation-timeline: --ch-section;
+    animation-range: contain 0% contain 100%;
+  }
+}
+/*
+ * Kinetic type (RFC-0024 24c): a split heading or text reveals piece by piece; the element itself
+ * stays put, its pieces (words, or characters within words) rise and fade in turn.
+ */
+[data-ch-reveal^="split-"] {
+  --ch-from-tr: none;
+  --ch-from-sc: none;
+  --ch-from-f: none;
+  --ch-from-c: none;
+}
+[data-ch-reveal^="split-"].ch-pre {
+  opacity: 1;
+}
+.ch-split .ch-w {
+  display: inline-block;
+}
+.ch-split[data-mode="chars"] .ch-w {
+  white-space: nowrap;
+}
+.ch-split[data-mode="chars"] .ch-c {
+  display: inline-block;
+}
+.ch-split {
+  --ch-piece-tr: 0 0.45em;
+  --ch-piece-step: 45ms;
+}
+.ch-split[data-mode="chars"] {
+  --ch-piece-step: 22ms;
+}
+.ch-split[data-mode="lines"] {
+  --ch-piece-step: 120ms;
+}
+:root[data-ch-motion="subtle"] .ch-split {
+  --ch-piece-tr: none;
+}
+@media (prefers-reduced-motion: no-preference) {
+  :root:is([data-ch-motion="subtle"], [data-ch-motion="standard"], [data-ch-motion="expressive"])
+    :is(.ch-split:not([data-mode="chars"]) .ch-w, .ch-split[data-mode="chars"] .ch-c) {
+    transition:
+      opacity var(--ch-dur-normal) var(--ch-ease-standard)
+      calc(var(--ch-piece-step) * var(--ch-i, 0)),
+      translate var(--ch-dur-normal) var(--ch-ease-standard)
+      calc(var(--ch-piece-step) * var(--ch-i, 0));
+  }
+  :root:is([data-ch-motion="subtle"], [data-ch-motion="standard"], [data-ch-motion="expressive"])
+    .ch-pre
+    :is(.ch-split:not([data-mode="chars"]) .ch-w, .ch-split[data-mode="chars"] .ch-c) {
+    opacity: 0;
+    translate: var(--ch-piece-tr);
+  }
+  @starting-style {
+    :root:is([data-ch-motion="subtle"], [data-ch-motion="standard"], [data-ch-motion="expressive"])
+      :is(.ch-split:not([data-mode="chars"]) .ch-w, .ch-split[data-mode="chars"] .ch-c) {
+      opacity: 0;
+      translate: var(--ch-piece-tr);
+    }
+  }
+}
diff --git a/packages/cli/test/fixtures/theme-v0.4.0/src/styles/features/motion.css b/packages/cli/test/fixtures/theme-v0.4.0/src/styles/features/motion.css
new file mode 100644
index 00000000..ca48d13f
--- /dev/null
+++ b/packages/cli/test/fixtures/theme-v0.4.0/src/styles/features/motion.css
@@ -0,0 +1,254 @@
+/*
+ * Motion (RFC-0024): presets the renderer writes as data-ch-* attributes; the tokens come from
+ * themeVariables, one set per level, picked by data-ch-motion on <html>. Content is complete
+ * without this layer; nothing animates layout; nothing moves at "none" or under reduced motion.
+ * Reveals use opacity, translate, scale, filter and clip-path; hover effects use transform and
+ * box-shadow, so one element can have both without their transitions overriding each other.
+ */
+[data-ch-reveal] {
+  --ch-from-tr: none;
+  --ch-from-sc: none;
+  --ch-from-f: none;
+  --ch-from-c: none;
+  --ch-rv-dur: var(--ch-dur-normal, 0ms);
+}
+[data-ch-reveal="rise"] {
+  --ch-from-tr: 0 var(--ch-move-m, 0);
+}
+[data-ch-reveal="sink"] {
+  --ch-from-tr: 0 calc(var(--ch-move-m, 0) * -1);
+}
+[data-ch-reveal="slide-start"] {
+  --ch-from-tr: calc(var(--ch-move-l, 0) * -1) 0;
+}
+[data-ch-reveal="slide-end"] {
+  --ch-from-tr: var(--ch-move-l, 0) 0;
+}
+[dir="rtl"] [data-ch-reveal="slide-start"] {
+  --ch-from-tr: var(--ch-move-l, 0) 0;
+}
+[dir="rtl"] [data-ch-reveal="slide-end"] {
+  --ch-from-tr: calc(var(--ch-move-l, 0) * -1) 0;
+}
+[data-ch-reveal="scale-in"] {
+  --ch-from-sc: 0.94;
+}
+[data-ch-reveal="blur-in"] {
+  --ch-from-f: blur(10px);
+}
+[data-ch-reveal="wipe-up"] {
+  --ch-from-c: inset(100% 0 0 0);
+}
+[data-ch-reveal="wipe-start"] {
+  --ch-from-c: inset(0 100% 0 0);
+}
+[data-ch-reveal="mask-rise"] {
+  --ch-from-c: inset(0 0 100% 0);
+  --ch-from-tr: 0 var(--ch-move-s, 0);
+}
+[data-ch-speed="fast"] {
+  --ch-rv-dur: var(--ch-dur-fast, 0ms);
+}
+[data-ch-speed="slow"] {
+  --ch-rv-dur: var(--ch-dur-slow, 0ms);
+}
+[data-ch-d="1"] {
+  --ch-d: 1;
+}
+[data-ch-d="2"] {
+  --ch-d: 2;
+}
+[data-ch-d="3"] {
+  --ch-d: 3;
+}
+[data-ch-d="4"] {
+  --ch-d: 4;
+}
+[data-ch-d="5"] {
+  --ch-d: 5;
+}
+[data-ch-d="6"] {
+  --ch-d: 6;
+}
+[data-ch-d="7"] {
+  --ch-d: 7;
+}
+[data-ch-d="8"] {
+  --ch-d: 8;
+}
+[data-ch-d="9"] {
+  --ch-d: 9;
+}
+[data-ch-d="10"] {
+  --ch-d: 10;
+}
+[data-ch-d="11"] {
+  --ch-d: 11;
+}
+[data-ch-d="12"] {
+  --ch-d: 12;
+}
+[data-ch-d="13"] {
+  --ch-d: 13;
+}
+[data-ch-d="14"] {
+  --ch-d: 14;
+}
+[data-ch-d="15"] {
+  --ch-d: 15;
+}
+[data-ch-d="16"] {
+  --ch-d: 16;
+}
+/* At "subtle" every reveal is a short fade. */
+:root[data-ch-motion="subtle"] [data-ch-reveal] {
+  --ch-from-tr: none;
+  --ch-from-sc: none;
+  --ch-from-f: none;
+  --ch-from-c: none;
+}
+@media (prefers-reduced-motion: no-preference) {
+  :root:is([data-ch-motion="subtle"], [data-ch-motion="standard"], [data-ch-motion="expressive"])
+    [data-ch-reveal] {
+    --ch-tr-r:
+      opacity var(--ch-rv-dur) var(--ch-ease-standard) calc(var(--ch-stagger) * var(--ch-d, 0)),
+      translate var(--ch-rv-dur) var(--ch-ease-standard) calc(var(--ch-stagger) * var(--ch-d, 0)),
+      scale var(--ch-rv-dur) var(--ch-ease-standard) calc(var(--ch-stagger) * var(--ch-d, 0)),
+      filter var(--ch-rv-dur) var(--ch-ease-standard) calc(var(--ch-stagger) * var(--ch-d, 0)),
+      clip-path var(--ch-rv-dur) var(--ch-ease-standard) calc(var(--ch-stagger) * var(--ch-d, 0));
+  }
+  /* Below the first screen: the motion module adds .ch-pre while off screen, removes it on entry. */
+  :root:is([data-ch-motion="subtle"], [data-ch-motion="standard"], [data-ch-motion="expressive"])
+  [data-ch-reveal].ch-pre {
+    opacity: 0;
+    translate: var(--ch-from-tr);
+    scale: var(--ch-from-sc);
+    filter: var(--ch-from-f);
+    clip-path: var(--ch-from-c);
+  }
+  /* On the first screen: the entrance plays from the first frame, with no script. */
+  @starting-style {
+    :root:is([data-ch-motion="subtle"], [data-ch-motion="standard"], [data-ch-motion="expressive"])
+      [data-ch-reveal] {
+      opacity: 0;
+      translate: var(--ch-from-tr);
+      scale: var(--ch-from-sc);
+      filter: var(--ch-from-f);
+      clip-path: var(--ch-from-c);
+    }
+  }
+}
+:root:not([data-ch-motion="none"]) [data-ch-hover] {
+  --ch-tr-h:
+    transform var(--ch-dur-fast, 0ms) var(--ch-ease-standard),
+    box-shadow var(--ch-dur-fast, 0ms) var(--ch-ease-standard),
+    background-size var(--ch-dur-normal, 0ms) var(--ch-ease-standard);
+}
+@media (prefers-reduced-motion: reduce) {
+  [data-ch-hover] {
+    --ch-tr-h: outline-color 0s;
+  }
+}
+:is([data-ch-reveal], [data-ch-hover]) {
+  transition: var(--ch-tr-r, outline-offset 0s), var(--ch-tr-h, outline-color 0s);
+}
+/* A hover effect starts at once, whatever its element's reveal delay. */
+[data-ch-hover]:is(:hover, :focus-visible, :focus-within) {
+  transition-delay: 0s;
+}
+/* Effects that do not move anything: every level but "none". */
+:root:not([data-ch-motion="none"])
+[data-ch-hover="glow"]:is(:hover, :focus-visible, :focus-within) {
+  box-shadow:
+    0 0 0 1px color-mix(in oklch, var(--ch-color-brand) 45%, transparent),
+    0 10px 30px -10px color-mix(in oklch, var(--ch-color-brand) 55%, transparent);
+}
+:root:not([data-ch-motion="none"])
+  :is(
+    [data-ch-hover="underline"]:not(.ch-card),
+    [data-ch-hover="underline"].ch-card :is(h2, h3, h4)
+  ) {
+  text-decoration: none;
+  background-image: linear-gradient(currentColor, currentColor);
+  background-repeat: no-repeat;
+  background-position: 0 100%;
+  background-size: 0% 1px;
+}
+:root:not([data-ch-motion="none"])
+  :is(
+    [data-ch-hover="underline"]:not(.ch-card):is(:hover, :focus-visible),
+    [data-ch-hover="underline"].ch-card:is(:hover, :focus-within) :is(h2, h3, h4)
+  ) {
+  background-size: 100% 1px;
+}
+:root:not([data-ch-motion="none"]) [data-ch-hover="spotlight"] {
+  position: relative;
+  isolation: isolate;
+}
+:root:not([data-ch-motion="none"]) [data-ch-hover="spotlight"]::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  z-index: -1;
+  border-radius: inherit;
+  pointer-events: none;
+  opacity: 0;
+  background: radial-gradient(
+    280px circle at calc(var(--ch-mx, 0.5) * 100%) calc(var(--ch-my, 0.5) * 100%),
+    color-mix(in oklch, var(--ch-color-brand) 18%, transparent),
+    transparent 70%
+  );
+  transition: opacity var(--ch-dur-fast, 0ms) var(--ch-ease-standard);
+}
+:root:not([data-ch-motion="none"]) [data-ch-hover="spotlight"]:hover::after {
+  opacity: 1;
+}
+/* Effects that move: "standard" and "expressive", for readers who have not asked for less. */
+@media (prefers-reduced-motion: no-preference) {
+  :root:is([data-ch-motion="standard"], [data-ch-motion="expressive"])
+    [data-ch-hover="lift"]:is(:hover, :focus-visible, :focus-within) {
+    transform: translateY(calc(var(--ch-move-s) * -0.5));
+    box-shadow: 0 16px 36px -16px rgb(0 0 0 / 0.3);
+  }
+  :root:is([data-ch-motion="standard"], [data-ch-motion="expressive"])
+    [data-ch-hover="scale"]:is(:hover, :focus-visible, :focus-within) {
+    transform: scale(1.03);
+  }
+  :root:is([data-ch-motion="standard"], [data-ch-motion="expressive"])
+    [data-ch-hover="zoom-media"] {
+    overflow: clip;
+  }
+  :root:is([data-ch-motion="standard"], [data-ch-motion="expressive"])
+    [data-ch-hover="zoom-media"]
+    img {
+    transition: transform var(--ch-dur-slow) var(--ch-ease-standard);
+  }
+  :root:is([data-ch-motion="standard"], [data-ch-motion="expressive"])
+    [data-ch-hover="zoom-media"]:is(:hover, :focus-within)
+    img {
+    transform: scale(1.06);
+  }
+}
+@media (prefers-reduced-motion: no-preference) and (hover: hover) and (pointer: fine) {
+  :root:is([data-ch-motion="standard"], [data-ch-motion="expressive"])
+    [data-ch-hover="tilt"]:hover {
+    transform: perspective(900px) rotateX(calc((0.5 - var(--ch-my, 0.5)) * 7deg))
+      rotateY(calc((var(--ch-mx, 0.5) - 0.5) * 7deg));
+  }
+  :root:is([data-ch-motion="standard"], [data-ch-motion="expressive"])
+    [data-ch-hover="magnetic"]:hover {
+    transform: translate(
+      calc((var(--ch-mx, 0.5) - 0.5) * 12px),
+      calc((var(--ch-my, 0.5) - 0.5) * 12px)
+    );
+  }
+}
+/* The reader's pause control (RFC-0024 §1) stops every loop on the page, ambient layers included. */
+:root[data-ch-motion-paused] *,
+:root[data-ch-motion-paused] *::before,
+:root[data-ch-motion-paused] *::after {
+  animation-play-state: paused !important;
+}
+.ch-motion {
+  display: block;
+}
diff --git a/packages/cli/test/fixtures/theme-v0.4.0/src/styles/features/overlays.css b/packages/cli/test/fixtures/theme-v0.4.0/src/styles/features/overlays.css
new file mode 100644
index 00000000..41d4380d
--- /dev/null
+++ b/packages/cli/test/fixtures/theme-v0.4.0/src/styles/features/overlays.css
@@ -0,0 +1,324 @@
+/*
+ * RFC-0025 §3: overlays (Dialog, Drawer, Popover, Tooltip, Lightbox). Native top-layer elements,
+ * painted from the color roles; the page behind a modal does not scroll.
+ */
+html:has(dialog:modal) {
+  overflow: hidden;
+  scrollbar-gutter: stable;
+}
+.ch-dialog {
+  margin: auto;
+  padding: 0;
+  border: 0;
+  width: 100%;
+  max-width: min(36rem, calc(100vw - 2rem));
+  max-height: min(85dvh, 48rem);
+  overflow: auto;
+  overscroll-behavior: contain;
+  border-radius: var(--ch-radius-l, 0.75rem);
+  background: var(--ch-color-surface);
+  color: var(--ch-color-text);
+  box-shadow: 0 24px 60px -16px rgb(0 0 0 / 0.4);
+}
+.ch-dialog[data-size="s"] {
+  max-width: min(24rem, calc(100vw - 2rem));
+}
+.ch-dialog[data-size="l"] {
+  max-width: min(52rem, calc(100vw - 2rem));
+}
+.ch-dialog::backdrop {
+  background: rgb(0 0 0 / 0.5);
+}
+.ch-dialog__head {
+  @apply sticky top-0 z-10 flex items-center justify-between gap-4 px-5 py-4;
+  background: inherit;
+  border-bottom: 1px solid var(--ch-color-border);
+}
+.ch-dialog__title {
+  @apply text-lg font-semibold;
+}
+.ch-dialog__close {
+  @apply inline-flex size-9 shrink-0 cursor-pointer items-center justify-center rounded-full;
+}
+.ch-dialog__close:hover,
+.ch-lightbox__nav button:hover {
+  background: color-mix(in oklab, currentColor 12%, transparent);
+}
+.ch-dialog__body {
+  @apply grid gap-4 px-5 py-5;
+}
+/* Drawers: the full height of an edge, or the bottom (a sheet on phones). */
+.ch-drawer {
+  margin: 0;
+  height: 100dvh;
+  max-height: none;
+  width: min(26rem, calc(100vw - 3rem));
+  border-radius: 0;
+}
+.ch-drawer[data-size="s"] {
+  width: min(20rem, calc(100vw - 3rem));
+}
+.ch-drawer[data-size="l"] {
+  width: min(36rem, calc(100vw - 3rem));
+}
+.ch-drawer[data-placement="end"] {
+  margin-inline-start: auto;
+}
+.ch-drawer[data-placement="bottom"] {
+  margin-block-start: auto;
+  width: 100%;
+  max-width: none;
+  height: auto;
+  max-height: 85dvh;
+  border-radius: var(--ch-radius-l, 0.75rem) var(--ch-radius-l, 0.75rem) 0 0;
+}
+/* Popovers and tooltips sit next to their trigger (anchor positioning; the module elsewhere). */
+.ch-popover {
+  margin: 0;
+  inset: auto;
+  position-area: bottom span-right;
+  position-try-fallbacks: flip-block, flip-inline;
+  margin-block-start: 8px;
+  width: 18rem;
+  max-width: calc(100vw - 2rem);
+  padding: 1rem;
+  border: 1px solid var(--ch-color-border);
+  border-radius: var(--ch-radius-m, 0.5rem);
+  background: var(--ch-color-surface);
+  color: var(--ch-color-text);
+  box-shadow: 0 12px 32px -12px rgb(0 0 0 / 0.3);
+}
+.ch-popover[data-width="s"] {
+  width: 12rem;
+}
+.ch-popover[data-width="l"] {
+  width: 26rem;
+}
+.ch-popover[data-placement="top"] {
+  position-area: top span-right;
+  margin-block: 0 8px;
+}
+.ch-popover[data-placement="start"] {
+  position-area: left span-bottom;
+  margin: 0 8px 0 0;
+}
+.ch-popover[data-placement="end"] {
+  position-area: right span-bottom;
+  margin: 0 0 0 8px;
+}
+.ch-popover > * + * {
+  margin-block-start: 0.75rem;
+}
+.ch-tooltip {
+  margin: 0;
+  inset: auto;
+  position-area: top;
+  position-try-fallbacks: flip-block;
+  margin-block-end: 6px;
+  max-width: 16rem;
+  padding: 0.375rem 0.625rem;
+  border: 0;
+  border-radius: var(--ch-radius-s, 0.25rem);
+  background: var(--ch-color-surface-inverse);
+  color: var(--ch-color-text-inverse);
+  font-size: 0.8125rem;
+  line-height: 1.35;
+}
+/* Lightbox: thumbnails, then the images large on a dark stage. */
+.ch-lightbox__grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr));
+  gap: 0.5rem;
+}
+.ch-lightbox__thumb {
+  display: block;
+  overflow: hidden;
+  border-radius: var(--ch-radius-s, 0.25rem);
+}
+.ch-lightbox__thumb img {
+  aspect-ratio: 1;
+  width: 100%;
+  height: auto;
+  object-fit: cover;
+}
+.ch-lightbox__dialog {
+  max-width: min(72rem, calc(100vw - 2rem));
+  background: #0b0b0c;
+  color: #f4f4f5;
+}
+.ch-lightbox__dialog .ch-dialog__head {
+  border-bottom-color: rgb(255 255 255 / 0.12);
+}
+.ch-lightbox__count {
+  @apply text-sm tabular-nums;
+}
+.ch-lightbox__stage {
+  @apply px-5 py-4;
+}
+/* RFC-0028: one stage size for every picture; each shows whole, its sides filled by itself blurred
+   (the image's own placeholder layer), so moving between portrait and landscape never jumps. */
+.ch-lightbox__item img {
+  display: block;
+  width: 100%;
+  height: min(70dvh, 56rem);
+  object-fit: contain;
+  border-radius: var(--ch-radius-m, 0.5rem);
+}
+.ch-lightbox__item figcaption {
+  @apply mt-3 text-center text-sm;
+  color: #d4d4d8;
+}
+.ch-lightbox__nav {
+  @apply flex justify-center gap-4 pb-5;
+}
+.ch-lightbox__nav button {
+  @apply inline-flex size-11 cursor-pointer items-center justify-center rounded-full text-2xl;
+}
+/* Entrances and exits at the site's motion level (RFC-0024); none under reduced motion. */
+:root:not([data-ch-motion="none"]) :is(.ch-dialog, .ch-popover, .ch-tooltip) {
+  transition:
+    opacity var(--ch-dur-2, 0.2s) ease-out,
+    translate var(--ch-dur-2, 0.2s) var(--ch-ease-out, ease-out),
+    display var(--ch-dur-2, 0.2s) allow-discrete,
+    overlay var(--ch-dur-2, 0.2s) allow-discrete;
+}
+:root:not([data-ch-motion="none"])
+  :is(.ch-dialog:not([open]), .ch-popover:not(:popover-open), .ch-tooltip:not(:popover-open)) {
+  opacity: 0;
+}
+@starting-style {
+  .ch-dialog[open] {
+    opacity: 0;
+    translate: 0 0.5rem;
+  }
+  .ch-drawer[data-placement="end"][open] {
+    translate: 100% 0;
+  }
+  .ch-drawer[data-placement="start"][open] {
+    translate: -100% 0;
+  }
+  .ch-drawer[data-placement="bottom"][open] {
+    translate: 0 100%;
+  }
+  .ch-popover:popover-open {
+    opacity: 0;
+    translate: 0 -0.25rem;
+  }
+  .ch-tooltip:popover-open {
+    opacity: 0;
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  :is(.ch-dialog, .ch-popover, .ch-tooltip) {
+    transition: none !important;
+  }
+}
+
+/*
+ * RFC-0025 25d: the announcement and consent bars, toasts, mega panels and the footer's region.
+ * A closed bar is hidden by the root marks `prefs.1.js` sets before the page paints.
+ */
+.ch-announcement {
+  @apply relative flex items-center justify-center gap-3 px-10 py-2 text-center text-sm;
+  background: var(--ch-color-surface-inverse);
+  color: var(--ch-color-text-inverse);
+}
+.ch-announcement[data-tone="brand"] {
+  background: var(--ch-color-brand);
+  color: var(--ch-color-on-brand);
+}
+.ch-announcement[data-tone="warning"] {
+  background: #fef3c7;
+  color: #78350f;
+}
+.ch-announcement__text a {
+  @apply ml-2 font-medium underline underline-offset-2;
+  color: inherit;
+}
+.ch-announcement__close {
+  @apply absolute end-2 top-1/2 inline-flex size-8 -translate-y-1/2 cursor-pointer items-center justify-center rounded-full;
+}
+.ch-announcement__close:hover {
+  background: color-mix(in oklab, currentColor 15%, transparent);
+}
+:root[data-ch-announcement-dismissed] .ch-announcement {
+  display: none;
+}
+/* The consent bar: at the bottom, never over what has focus (the page keeps room for it). */
+.ch-consent {
+  @apply fixed inset-x-3 bottom-3 z-50 mx-auto flex max-w-3xl flex-wrap items-center justify-between gap-3 rounded-lg px-4 py-3 text-sm;
+  background: var(--ch-color-surface-raised, var(--ch-color-surface));
+  color: var(--ch-color-text);
+  border: 1px solid var(--ch-color-border);
+  box-shadow: 0 12px 32px -12px rgb(0 0 0 / 0.3);
+}
+.ch-consent__text a {
+  @apply ml-1 underline underline-offset-2;
+}
+.ch-consent__actions {
+  @apply flex gap-2;
+}
+.ch-consent__actions .ch-button {
+  @apply px-3 py-1.5 text-sm;
+}
+:root[data-ch-consent] .ch-consent {
+  display: none;
+}
+:root:not([data-ch-consent]):has(.ch-consent) {
+  scroll-padding-bottom: calc(var(--ch-consent-h, 5rem) + 1rem);
+}
+:root:not([data-ch-consent]):has(.ch-consent) body {
+  padding-bottom: calc(var(--ch-consent-h, 5rem) + 1rem);
+}
+/* Toasts: short news in a live region; the newest at the bottom. */
+.ch-toasts {
+  @apply pointer-events-none fixed inset-x-0 bottom-4 z-50 flex flex-col items-center gap-2;
+}
+.ch-toast {
+  @apply rounded-full px-4 py-2 text-sm shadow-lg;
+  background: var(--ch-color-surface-inverse);
+  color: var(--ch-color-text-inverse);
+}
+:root:not([data-ch-motion="none"]) .ch-toast {
+  transition:
+    opacity var(--ch-dur-2, 0.2s) ease-out,
+    translate var(--ch-dur-2, 0.2s) ease-out;
+}
+@starting-style {
+  .ch-toast {
+    opacity: 0;
+    translate: 0 0.5rem;
+  }
+}
+/* A mega panel: under the header, as wide as it, its groups in columns. */
+.ch-nav-menu__pop--mega {
+  position-area: none;
+  inset: var(--ch-header-h, 4.75rem) 1rem auto 1rem;
+  margin: 0 auto;
+  width: auto;
+  max-width: 72rem;
+  padding: 1.5rem;
+}
+.ch-mega {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
+  gap: 1.5rem;
+}
+.ch-mega__heading {
+  @apply mb-2 text-xs font-semibold text-zinc-500 uppercase;
+}
+.ch-mega__col ul,
+ul.ch-mega__col {
+  @apply grid gap-0.5;
+}
+/* The footer's surface region sits above the columns, in the footer's width. */
+.ch-footer__region {
+  @apply mb-10 text-base;
+  color: var(--ch-color-text);
+}
+.ch-footer[data-surface="inverse"] .ch-footer__region {
+  color: inherit;
+}
+.ch-footer__region .ch-surface {
+  padding: 0;
+}
diff --git a/packages/cli/test/fixtures/theme-v0.4.0/src/styles/features/prose.css b/packages/cli/test/fixtures/theme-v0.4.0/src/styles/features/prose.css
new file mode 100644
index 00000000..52a21da4
--- /dev/null
+++ b/packages/cli/test/fixtures/theme-v0.4.0/src/styles/features/prose.css
@@ -0,0 +1,140 @@
+/* Section defaults; a theme overrides these or swaps components. */
+.ch-hero {
+  @apply py-12;
+}
+.ch-hero h1 {
+  @apply text-4xl font-bold tracking-tight;
+}
+.ch-hero__sub {
+  @apply mt-3 text-lg text-zinc-600;
+}
+.ch-hero__cta {
+  @apply mt-6 inline-block rounded px-4 py-2 text-(--ch-color-on-brand);
+  background: var(--ch-color-brand);
+}
+.ch-article-header {
+  @apply space-y-2 border-b border-zinc-200 pt-8 pb-6;
+}
+.ch-article-header h1 {
+  @apply text-4xl font-bold tracking-tight;
+}
+.ch-summary {
+  @apply text-lg text-zinc-600;
+}
+.ch-article-header time {
+  @apply text-sm text-zinc-500;
+}
+.ch-richtext {
+  @apply space-y-4 py-6 leading-relaxed;
+}
+.ch-richtext h1 {
+  @apply text-3xl font-bold;
+}
+.ch-richtext h2 {
+  @apply text-2xl font-semibold;
+}
+.ch-richtext h3 {
+  @apply pt-2 text-xl font-semibold;
+}
+.ch-richtext h2 {
+  @apply pt-4;
+}
+/* The body's own markdown (no class: surface components inside a body keep their styles). The
+   reset clears lists, tables, quotes and code; these bring them back in the theme's roles. */
+.ch-richtext :is(ul, ol):not([class]) {
+  padding-inline-start: 1.5em;
+}
+.ch-richtext ul:not([class]) {
+  list-style: disc;
+}
+.ch-richtext ol:not([class]) {
+  list-style: decimal;
+}
+.ch-richtext :is(ul, ol):not([class]) :is(ul, ol):not([class]) {
+  margin-block-start: 0.35em;
+}
+.ch-richtext ul:not([class]) ul:not([class]) {
+  list-style: circle;
+}
+.ch-richtext li:not([class]) + li:not([class]) {
+  margin-block-start: 0.35em;
+}
+.ch-richtext li::marker {
+  color: var(--ch-color-text-muted);
+}
+/* Task lists: the checkbox is the marker. */
+.ch-richtext ul:not([class]):has(> li > input[type="checkbox"]) {
+  list-style: none;
+  padding-inline-start: 0.25em;
+}
+.ch-richtext li > input[type="checkbox"] {
+  inline-size: 1em;
+  block-size: 1em;
+  margin-inline-end: 0.5em;
+  vertical-align: -0.125em;
+  accent-color: var(--ch-color-brand);
+}
+.ch-richtext blockquote:not([class]) {
+  border-inline-start: 3px solid var(--ch-color-border-strong);
+  padding-inline-start: 1em;
+  color: var(--ch-color-text-muted);
+  font-style: italic;
+}
+.ch-richtext :not(pre) > code {
+  @apply rounded px-1.5 py-0.5;
+  font-size: 0.9em;
+  background: var(--ch-color-surface-muted);
+}
+.ch-richtext pre:not([class]) {
+  @apply overflow-x-auto rounded-lg px-4 py-3 text-sm leading-relaxed;
+  background: var(--ch-color-surface-muted);
+  border: 1px solid var(--ch-color-border);
+}
+.ch-richtext hr:not([class]) {
+  border: 0;
+  border-block-start: 1px solid var(--ch-color-border);
+  margin-block: 2rem;
+}
+/* Tables: ruled rows, a header, the column alignment markdown asked for; wide ones scroll on
+   their own (the page never scrolls sideways). */
+.ch-richtext table:not([class]) {
+  display: block;
+  inline-size: max-content;
+  max-inline-size: 100%;
+  overflow-x: auto;
+  border-collapse: collapse;
+  font-size: 0.95em;
+  font-variant-numeric: tabular-nums;
+}
+.ch-richtext table:not([class]) :is(th, td) {
+  padding: 0.45em 0.8em;
+  border-block-end: 1px solid var(--ch-color-border);
+  text-align: start;
+  vertical-align: top;
+}
+.ch-richtext table:not([class]) th {
+  font-weight: 600;
+  border-block-end-color: var(--ch-color-border-strong);
+}
+.ch-richtext table:not([class]) :is(th, td)[align="center"] {
+  text-align: center;
+}
+.ch-richtext table:not([class]) :is(th, td)[align="right"] {
+  text-align: end;
+}
+/* Footnotes: small raised numbers, the notes listed at the end under a rule. */
+.ch-fnref a {
+  @apply px-0.5 text-xs no-underline;
+  color: var(--ch-color-link);
+}
+.ch-footnotes {
+  @apply mt-10 pt-4 text-sm;
+  border-block-start: 1px solid var(--ch-color-border);
+  color: var(--ch-color-text-muted);
+}
+.ch-footnotes ol {
+  @apply list-decimal space-y-1 ps-5;
+}
+.ch-fnback {
+  @apply no-underline;
+}
diff --git a/packages/cli/test/fixtures/theme-v0.4.0/src/styles/features/search-dialog.css b/packages/cli/test/fixtures/theme-v0.4.0/src/styles/features/search-dialog.css
new file mode 100644
index 00000000..f077d8aa
--- /dev/null
+++ b/packages/cli/test/fixtures/theme-v0.4.0/src/styles/features/search-dialog.css
@@ -0,0 +1,144 @@
+/*
+ * RFC-0029 §6: the search modal. Painted from the color roles like the overlays (RFC-0025 §3):
+ * centered and 40rem wide on wide screens, a full-height sheet on phones, and the page behind it
+ * does not scroll (`overlays.css`).
+ */
+.ch-search-dialog {
+  margin: 10dvh auto auto;
+  padding: 0;
+  border: 0;
+  width: 100%;
+  max-width: min(40rem, calc(100vw - 2rem));
+  max-height: min(75dvh, 40rem);
+  overflow: hidden;
+  border-radius: var(--ch-radius-l, 0.75rem);
+  background: var(--ch-color-surface);
+  color: var(--ch-color-text);
+  box-shadow: 0 24px 60px -16px rgb(0 0 0 / 0.4);
+}
+.ch-search-dialog[open] {
+  display: flex;
+}
+.ch-search-dialog::backdrop {
+  background: rgb(0 0 0 / 0.5);
+}
+.ch-search-dialog__panel {
+  @apply flex min-h-0 w-full flex-col;
+}
+.ch-search-dialog__bar {
+  @apply flex items-center gap-2 px-4 py-3;
+  border-bottom: 1px solid var(--ch-color-border);
+}
+.ch-search-dialog__bar input {
+  @apply min-w-0 flex-1 bg-transparent py-1 text-lg outline-none;
+}
+.ch-search-dialog__bar input::-webkit-search-cancel-button {
+  display: none;
+}
+.ch-search-dialog__close {
+  @apply shrink-0 cursor-pointer rounded-md px-2 py-1 text-sm;
+  color: var(--ch-color-text-muted);
+}
+.ch-search-dialog__close:hover {
+  background: color-mix(in oklab, currentColor 12%, transparent);
+}
+.ch-search-dialog__body {
+  @apply min-h-0 flex-1 overflow-y-auto px-2 py-2;
+  overscroll-behavior: contain;
+}
+.ch-search-dialog__body:has(.ch-search-dialog__list:empty):has(.ch-search-dialog__note[hidden]) {
+  display: none;
+}
+.ch-search-group + .ch-search-group {
+  @apply mt-2;
+}
+.ch-search-group__label {
+  @apply px-3 pt-2 pb-1 text-xs font-medium;
+  color: var(--ch-color-text-subtle);
+}
+.ch-search-option {
+  @apply grid gap-0.5 rounded-md px-3 py-2 no-underline;
+  color: inherit;
+  scroll-margin: 0.5rem;
+}
+.ch-search-option[aria-selected="true"] {
+  background: color-mix(in oklab, var(--ch-color-link, currentColor) 12%, transparent);
+}
+.ch-search-option__context {
+  @apply text-xs;
+  color: var(--ch-color-text-subtle);
+}
+.ch-search-option__title {
+  @apply font-medium;
+}
+.ch-search-option__snippet {
+  @apply line-clamp-2 text-sm;
+  color: var(--ch-color-text-muted);
+}
+.ch-search-option__snippet mark {
+  @apply rounded-sm px-0.5;
+  background: color-mix(in oklab, #f59e0b 30%, transparent);
+  color: inherit;
+}
+.ch-search-option--all .ch-search-option__title {
+  @apply text-sm;
+  color: var(--ch-color-link, inherit);
+}
+.ch-search-dialog__note {
+  @apply flex flex-wrap items-center gap-2 px-3 py-3 text-sm;
+  color: var(--ch-color-text-muted);
+}
+.ch-search-dialog__note a {
+  @apply underline underline-offset-4;
+}
+.ch-search-clear {
+  @apply cursor-pointer text-sm underline underline-offset-4;
+}
+.ch-search-dialog__keys {
+  @apply hidden items-center gap-4 px-4 py-2 text-xs sm:flex;
+  border-top: 1px solid var(--ch-color-border);
+  color: var(--ch-color-text-subtle);
+}
+.ch-search-dialog__keys kbd {
+  @apply me-1 rounded px-1 font-mono;
+  border: 1px solid var(--ch-color-border);
+}
+.ch-search-dialog[aria-busy="true"] .ch-search-dialog__list {
+  opacity: 0.6;
+}
+/* Phones: a full-height sheet with the field at the top. */
+@media (max-width: 639px) {
+  .ch-search-dialog {
+    margin: 0;
+    max-width: none;
+    max-height: none;
+    height: 100dvh;
+    border-radius: 0;
+  }
+}
+/* The header field opens the modal once the module is here. */
+:root[data-ch-search-ready] [data-ch-search-open] input {
+  cursor: pointer;
+}
+/* Entrance at the site's motion level (RFC-0024); none under reduced motion. */
+:root:not([data-ch-motion="none"]) .ch-search-dialog {
+  transition:
+    opacity var(--ch-dur-2, 0.2s) ease-out,
+    translate var(--ch-dur-2, 0.2s) var(--ch-ease-out, ease-out),
+    display var(--ch-dur-2, 0.2s) allow-discrete,
+    overlay var(--ch-dur-2, 0.2s) allow-discrete;
+}
+:root:not([data-ch-motion="none"]) .ch-search-dialog:not([open]) {
+  opacity: 0;
+}
+@starting-style {
+  .ch-search-dialog[open] {
+    opacity: 0;
+    translate: 0 -0.5rem;
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .ch-search-dialog {
+    transition: none !important;
+  }
+}
diff --git a/packages/cli/test/fixtures/theme-v0.4.0/src/styles/features/search.css b/packages/cli/test/fixtures/theme-v0.4.0/src/styles/features/search.css
new file mode 100644
index 00000000..bf8e48b4
--- /dev/null
+++ b/packages/cli/test/fixtures/theme-v0.4.0/src/styles/features/search.css
@@ -0,0 +1,59 @@
+/* Search (RFC-0019 §3): the header form, the page's form, results with highlighted snippets. */
+.ch-header-search input {
+  @apply w-40 rounded-md border border-zinc-300 px-3 py-1.5 text-sm sm:w-48;
+}
+.ch-search h1 {
+  @apply text-3xl font-bold tracking-tight;
+}
+.ch-search-form {
+  @apply mt-4 flex gap-2;
+}
+.ch-search-form input {
+  @apply min-w-0 flex-1 rounded-md border border-zinc-300 px-3 py-2;
+}
+.ch-search-form button {
+  @apply rounded-md px-4 py-2 font-medium bg-(--ch-color-surface-inverse) text-(--ch-color-text-inverse) hover:opacity-90;
+}
+.ch-search-note {
+  @apply mt-4 rounded-md border border-amber-300 bg-amber-50 px-4 py-3 text-sm text-amber-900;
+}
+.ch-search-summary {
+  @apply mt-4 text-sm text-zinc-600;
+}
+.ch-search-results {
+  @apply mt-6 space-y-6;
+}
+.ch-search-context {
+  @apply text-xs font-medium text-zinc-500;
+}
+.ch-search-results h2 {
+  @apply text-lg font-semibold;
+}
+.ch-search-results h2 a {
+  @apply underline-offset-4 hover:underline;
+}
+.ch-search-snippet {
+  @apply mt-1 text-zinc-700;
+}
+.ch-search-snippet mark {
+  @apply rounded-sm bg-amber-100 px-0.5 text-zinc-900;
+}
+.ch-search-results time {
+  @apply mt-1 block text-sm text-zinc-500;
+}
+/* The built-in not-found page: the search page's form, a sentence and a link home. */
+.ch-not-found-text {
+  @apply mt-3 text-zinc-700;
+}
+.ch-not-found .ch-search-form {
+  @apply flex-wrap items-center;
+}
+.ch-not-found-prompt {
+  @apply w-full text-sm text-zinc-600;
+}
+.ch-not-found-home {
+  @apply mt-6;
+}
+.ch-not-found-home a {
+  @apply font-medium underline underline-offset-4;
+}
diff --git a/packages/cli/test/fixtures/theme-v0.4.0/src/styles/features/surface-media.css b/packages/cli/test/fixtures/theme-v0.4.0/src/styles/features/surface-media.css
new file mode 100644
index 00000000..2f1d235f
--- /dev/null
+++ b/packages/cli/test/fixtures/theme-v0.4.0/src/styles/features/surface-media.css
@@ -0,0 +1,123 @@
+/* RFC-0028 §3: how an image meets its frame. cover (the default) crops around the focal point the
+   renderer sets as object-position; the others show the whole picture, and what fills the bars is
+   the image's placeholder layer: its blurred self (blur-fill), its colour (color-fill) or nothing. */
+.ch-figure:is([data-fit="contain"], [data-fit="blur-fill"], [data-fit="color-fill"]) img,
+.ch-carousel[data-aspect]
+  .ch-carousel__slide
+  .ch-figure:is([data-fit="contain"], [data-fit="blur-fill"], [data-fit="color-fill"])
+  img {
+  object-fit: contain;
+}
+.ch-figure[data-fit="natural"] img {
+  aspect-ratio: auto;
+  height: auto;
+}
+.ch-figure figcaption {
+  @apply mt-2 text-sm text-zinc-500;
+}
+.ch-button--ghost {
+  @apply underline-offset-4 hover:underline;
+}
+.ch-link {
+  @apply font-medium underline underline-offset-4;
+}
+.ch-badge {
+  @apply inline-block w-fit rounded-full bg-zinc-100 px-2.5 py-0.5 text-xs font-medium text-zinc-700;
+}
+.ch-badge[data-tone="info"] {
+  @apply bg-sky-100 text-sky-800;
+}
+.ch-badge[data-tone="success"] {
+  @apply bg-emerald-100 text-emerald-800;
+}
+.ch-badge[data-tone="warning"] {
+  @apply bg-amber-100 text-amber-900;
+}
+.ch-badge[data-tone="danger"] {
+  @apply bg-red-100 text-red-800;
+}
+.ch-stat {
+  @apply flex flex-col gap-1;
+}
+.ch-stat__value {
+  @apply text-4xl font-bold tracking-tight;
+}
+.ch-stat__label {
+  @apply text-sm font-medium text-zinc-700;
+}
+.ch-stat__detail {
+  @apply text-sm text-zinc-500;
+}
+.ch-quote blockquote {
+  @apply border-l-4 border-zinc-300 pl-4 text-lg italic;
+}
+.ch-quote figcaption {
+  @apply mt-2 text-sm text-zinc-600;
+}
+.ch-quote cite {
+  @apply font-medium not-italic text-zinc-900;
+}
+.ch-list {
+  @apply space-y-2 pl-5;
+}
+ul.ch-list {
+  @apply list-disc;
+}
+ol.ch-list {
+  @apply list-decimal;
+}
+.ch-list[data-marker="none"] {
+  @apply list-none pl-0;
+}
+/* RFC-0026: an icon of the set as the bullet ("check" included), in the brand color. */
+.ch-list[data-marker="icon"] {
+  @apply list-none pl-0;
+}
+.ch-list[data-marker="icon"] li {
+  @apply flex items-start gap-2;
+}
+.ch-list__marker {
+  @apply mt-[0.2em];
+  color: var(--ch-color-brand);
+}
+/* Tabs without JavaScript: the n-th checked radio shows the n-th panel. */
+.ch-tabs {
+  @apply flex flex-wrap gap-x-1;
+}
+.ch-tabs__radio {
+  @apply sr-only;
+}
+.ch-tabs__tab {
+  @apply cursor-pointer rounded-t border-b-2 border-transparent px-4 py-2 text-sm font-medium text-zinc-600;
+}
+.ch-tabs__radio:checked + .ch-tabs__tab {
+  @apply border-current text-zinc-900;
+}
+.ch-tabs__radio:focus-visible + .ch-tabs__tab {
+  @apply outline-2 outline-offset-2;
+}
+.ch-tabs__panels {
+  @apply w-full border-t border-zinc-200 pt-4;
+}
+.ch-tabs__panel {
+  @apply hidden;
+}
+.ch-tabs__radio:nth-of-type(1):checked ~ .ch-tabs__panels > .ch-tabs__panel:nth-child(1),
+.ch-tabs__radio:nth-of-type(2):checked ~ .ch-tabs__panels > .ch-tabs__panel:nth-child(2),
+.ch-tabs__radio:nth-of-type(3):checked ~ .ch-tabs__panels > .ch-tabs__panel:nth-child(3),
+.ch-tabs__radio:nth-of-type(4):checked ~ .ch-tabs__panels > .ch-tabs__panel:nth-child(4),
+.ch-tabs__radio:nth-of-type(5):checked ~ .ch-tabs__panels > .ch-tabs__panel:nth-child(5),
+.ch-tabs__radio:nth-of-type(6):checked ~ .ch-tabs__panels > .ch-tabs__panel:nth-child(6),
+.ch-tabs__radio:nth-of-type(7):checked ~ .ch-tabs__panels > .ch-tabs__panel:nth-child(7),
+.ch-tabs__radio:nth-of-type(8):checked ~ .ch-tabs__panels > .ch-tabs__panel:nth-child(8) {
+  @apply flex flex-col gap-4;
+}
+.ch-accordion {
+  @apply divide-y divide-zinc-200 border-y border-zinc-200;
+}
+.ch-disclosure summary {
+  @apply cursor-pointer py-3 font-medium;
+}
+.ch-disclosure__body {
+  @apply flex flex-col gap-3 pb-4;
+}
diff --git a/packages/cli/test/fixtures/theme-v0.4.0/src/styles/features/surfaces.css b/packages/cli/test/fixtures/theme-v0.4.0/src/styles/features/surfaces.css
new file mode 100644
index 00000000..b0d5c618
--- /dev/null
+++ b/packages/cli/test/fixtures/theme-v0.4.0/src/styles/features/surfaces.css
@@ -0,0 +1,309 @@
+/* Generated UI (RFC-0020): surfaces built by agents from the catalog's primitives. Values arrive
+   as data-* attributes from closed sets; nothing a model wrote reaches this file. */
+.ch-surface {
+  @apply py-6;
+}
+.ch-stack {
+  @apply flex flex-col gap-4;
+}
+.ch-row {
+  @apply flex flex-wrap items-center gap-4;
+}
+.ch-row[data-wrap="no"] {
+  @apply flex-nowrap;
+}
+.ch-grid {
+  @apply grid grid-cols-1 gap-4 sm:grid-cols-2;
+}
+.ch-grid[data-cols="1"] {
+  @apply sm:grid-cols-1;
+}
+@media (min-width: 48rem) {
+  .ch-grid[data-cols="3"] {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+  .ch-grid[data-cols="4"] {
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+  }
+  .ch-grid[data-cols="5"] {
+    grid-template-columns: repeat(5, minmax(0, 1fr));
+  }
+  .ch-grid[data-cols="6"] {
+    grid-template-columns: repeat(6, minmax(0, 1fr));
+  }
+}
+.ch-columns {
+  @apply grid grid-cols-1 gap-6 md:grid-cols-2;
+}
+@media (min-width: 48rem) {
+  .ch-columns[data-ratio="2-1"] {
+    grid-template-columns: 2fr 1fr;
+  }
+  .ch-columns[data-ratio="1-2"] {
+    grid-template-columns: 1fr 2fr;
+  }
+  .ch-columns[data-ratio="1-1-1"] {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+  .ch-columns[data-ratio="1-2-1"] {
+    grid-template-columns: 1fr 2fr 1fr;
+  }
+}
+:is(.ch-stack, .ch-row, .ch-grid, .ch-columns)[data-gap="none"] {
+  gap: 0;
+}
+:is(.ch-stack, .ch-row, .ch-grid, .ch-columns)[data-gap="s"] {
+  gap: 0.5rem;
+}
+:is(.ch-stack, .ch-row, .ch-grid, .ch-columns)[data-gap="l"] {
+  gap: 2rem;
+}
+:is(.ch-stack, .ch-row, .ch-grid, .ch-columns)[data-gap="xl"] {
+  gap: 3rem;
+}
+:is(.ch-stack, .ch-row)[data-align="center"] {
+  @apply items-center text-center;
+}
+:is(.ch-stack, .ch-row)[data-align="end"] {
+  @apply items-end;
+}
+.ch-row[data-justify="center"] {
+  @apply justify-center;
+}
+.ch-row[data-justify="end"] {
+  @apply justify-end;
+}
+.ch-row[data-justify="between"] {
+  @apply justify-between;
+}
+/* A band leaves the reading column: full width, or wider than the text. */
+.ch-band {
+  @apply relative py-12;
+  margin-inline: calc(50% - 50vw);
+  padding-inline: max(1rem, calc(50vw - 36rem));
+}
+.ch-band[data-width="narrow"] .ch-band__inner {
+  @apply mx-auto max-w-2xl;
+}
+.ch-band[data-width="wide"] .ch-band__inner,
+.ch-band:not([data-width]) .ch-band__inner {
+  @apply mx-auto max-w-6xl;
+}
+/* A band's own children (heading, text, buttons, a grid) need room between them; the theme's
+   spacing unit scales it with the density. */
+.ch-band__inner > * + * {
+  margin-block-start: calc(var(--spacing) * 4);
+}
+.ch-band__inner > .ch-heading + :is(.ch-grid, .ch-columns, .ch-stack, .ch-tabs, .ch-table-wrap) {
+  margin-block-start: calc(var(--spacing) * 6);
+}
+.ch-band[data-spacing="s"] {
+  @apply py-6;
+}
+.ch-band[data-spacing="l"] {
+  @apply py-16;
+}
+.ch-band[data-spacing="xl"] {
+  @apply py-24;
+}
+/*
+ * Surfaces (RFC-0023 §4): what a band or card is painted with, from the color roles only, so
+ * text keeps the contrast the token expansion checked. `data-tone` (older pages) is an alias.
+ */
+:is([data-surface="muted"], [data-tone="muted"]):is(.ch-band, .ch-card) {
+  background: var(--ch-color-surface-muted);
+}
+[data-surface="raised"]:is(.ch-band, .ch-card) {
+  background: var(--ch-color-surface-raised);
+  box-shadow:
+    0 1px 2px rgb(0 0 0 / 0.05),
+    0 6px 20px -6px rgb(0 0 0 / 0.12);
+}
+:is([data-surface="brand"], [data-tone="brand"]):is(.ch-band, .ch-card) {
+  background: var(--ch-color-brand);
+  color: var(--ch-color-on-brand);
+}
+:is([data-surface="inverse"], [data-tone="inverse"]):is(.ch-band, .ch-card) {
+  background: var(--ch-color-surface-inverse);
+  color: var(--ch-color-text-inverse);
+}
+[data-surface="accent"]:is(.ch-band, .ch-card) {
+  background: var(--ch-color-accent);
+  color: var(--ch-color-on-accent);
+}
+/* From the brand to its gradient end: text on brand reads on both (the expansion checks it). */
+[data-surface="gradient"]:is(.ch-band, .ch-card) {
+  background: var(--ch-color-brand);
+  background-image: linear-gradient(
+    135deg in oklch,
+    var(--ch-color-brand),
+    var(--ch-color-gradient)
+  );
+  color: var(--ch-color-on-brand);
+}
+/* Soft light from the brand and accent over the muted surface; plain muted where unsupported. */
+[data-surface="mesh"]:is(.ch-band, .ch-card) {
+  background-color: var(--ch-color-surface-muted);
+  background-image:
+    radial-gradient(
+      at 12% 18%,
+      color-mix(in oklch, var(--ch-color-brand) 16%, transparent),
+      transparent 55%
+    ),
+    radial-gradient(
+      at 88% 8%,
+      color-mix(in oklch, var(--ch-color-accent) 14%, transparent),
+      transparent 50%
+    ),
+    radial-gradient(
+      at 55% 100%,
+      color-mix(in oklch, var(--ch-color-brand) 9%, transparent),
+      transparent 60%
+    );
+}
+[data-surface="dots"]:is(.ch-band, .ch-card) {
+  background-color: var(--ch-color-surface-muted);
+  background-image: radial-gradient(var(--ch-color-border-strong) 1px, transparent 1.5px);
+  background-size: 18px 18px;
+}
+[data-surface="grid"]:is(.ch-band, .ch-card) {
+  background-color: var(--ch-color-surface-muted);
+  background-image:
+    linear-gradient(var(--ch-color-border) 1px, transparent 1px),
+    linear-gradient(90deg, var(--ch-color-border) 1px, transparent 1px);
+  background-size: 28px 28px;
+}
+/* A fixed grey grain (no color in it), faint on light and dark alike. */
+[data-surface="noise"]:is(.ch-band, .ch-card) {
+  background-color: var(--ch-color-surface-muted);
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 .18 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
+}
+/* Loud surfaces: their text, buttons and links follow the surface's own text color. */
+:is(
+  [data-surface="brand"],
+  [data-surface="inverse"],
+  [data-surface="accent"],
+  [data-surface="gradient"],
+  [data-tone="brand"],
+  [data-tone="inverse"]
+) :is(.ch-text, .ch-stat__label, .ch-stat__detail) {
+  color: inherit;
+  opacity: 0.85;
+}
+:is(
+    [data-surface="brand"],
+    [data-surface="inverse"],
+    [data-surface="accent"],
+    [data-surface="gradient"],
+    [data-tone="brand"],
+    [data-tone="inverse"]
+  )
+  .ch-button--primary {
+  @apply bg-(--ch-color-surface) text-(--ch-color-text);
+}
+:is(
+    [data-surface="brand"],
+    [data-surface="inverse"],
+    [data-surface="accent"],
+    [data-surface="gradient"],
+    [data-tone="brand"],
+    [data-tone="inverse"]
+  )
+  .ch-button--secondary {
+  @apply border-current/60 text-inherit;
+}
+:is(
+    [data-surface="brand"],
+    [data-surface="inverse"],
+    [data-surface="accent"],
+    [data-surface="gradient"],
+    [data-tone="brand"],
+    [data-tone="inverse"]
+  )
+  .ch-link {
+  color: inherit;
+}
+:is(
+  [data-surface="brand"],
+  [data-surface="inverse"],
+  [data-surface="accent"],
+  [data-surface="gradient"],
+  [data-surface="raised"]
+).ch-card {
+  border-color: transparent;
+}
+/* A band with an anchor stops below the top of the window when a link jumps to it. */
+.ch-band[id] {
+  scroll-margin-top: 1rem;
+}
+.ch-card {
+  @apply flex flex-col gap-3 rounded-lg border border-zinc-200 p-5 no-underline;
+}
+a.ch-card {
+  @apply hover:border-zinc-400;
+}
+.ch-spacer {
+  @apply h-8;
+}
+.ch-spacer[data-size="s"] {
+  @apply h-4;
+}
+.ch-spacer[data-size="l"] {
+  @apply h-16;
+}
+.ch-spacer[data-size="xl"] {
+  @apply h-24;
+}
+.ch-divider {
+  @apply my-2 border-zinc-200;
+}
+.ch-heading {
+  @apply font-bold tracking-tight;
+}
+h1.ch-heading {
+  @apply text-4xl sm:text-5xl;
+}
+h2.ch-heading {
+  @apply text-3xl;
+}
+h3.ch-heading {
+  @apply text-xl;
+}
+h4.ch-heading {
+  @apply text-lg;
+}
+.ch-text {
+  @apply space-y-2 leading-relaxed;
+}
+.ch-text[data-size="s"] {
+  @apply text-sm;
+}
+.ch-text[data-size="l"] {
+  @apply text-xl;
+  /* A lead keeps a readable measure, even at a dramatic type scale. */
+  max-inline-size: 48ch;
+}
+.ch-text[data-muted="yes"] {
+  @apply text-zinc-600;
+}
+[data-align="center"]:is(.ch-heading, .ch-text) {
+  @apply text-center;
+}
+[data-align="end"]:is(.ch-heading, .ch-text) {
+  @apply text-right;
+}
+.ch-figure img {
+  @apply w-full rounded-lg object-cover;
+}
+.ch-figure[data-ratio="16:9"] img {
+  aspect-ratio: 16 / 9;
+}
+.ch-figure[data-ratio="4:3"] img {
+  aspect-ratio: 4 / 3;
+}
+.ch-figure[data-ratio="1:1"] img {
+  aspect-ratio: 1;
+}
+.ch-figure[data-ratio="3:4"] img {
+  aspect-ratio: 3 / 4;
+}
diff --git a/packages/cli/test/fixtures/theme-v0.4.0/src/styles/features/tokens.css b/packages/cli/test/fixtures/theme-v0.4.0/src/styles/features/tokens.css
new file mode 100644
index 00000000..7d65a1f9
--- /dev/null
+++ b/packages/cli/test/fixtures/theme-v0.4.0/src/styles/features/tokens.css
@@ -0,0 +1,112 @@
+/*
+ * RFC-0023: the theme's greys and white are color roles (`--ch-color-<role>`, written by
+ * themeVariables from the site's seed, or the former greys when it has none), so a seed restyles
+ * them and dark mode works. Text on brand and inverse fills uses its own roles below.
+ */
+@theme inline {
+  --color-white: var(--ch-color-surface-raised);
+  --color-zinc-50: var(--ch-color-surface-muted);
+  --color-zinc-100: var(--ch-color-surface-muted);
+  --color-zinc-200: var(--ch-color-border);
+  --color-zinc-300: var(--ch-color-border-strong);
+  --color-zinc-400: var(--ch-color-text-subtle);
+  --color-zinc-500: var(--ch-color-text-subtle);
+  --color-zinc-600: var(--ch-color-text-muted);
+  --color-zinc-700: var(--ch-color-text);
+  --color-zinc-800: var(--ch-color-text);
+  --color-zinc-900: var(--ch-color-text);
+  /*
+   * RFC-0023 §2: with a type scale the sizes are fluid steps (`--ch-step-<n>`, written by
+   * themeVariables); without one, Tailwind's fixed sizes. Small print stays fixed.
+   */
+  --text-base: var(--ch-step-0, 1rem);
+  --text-lg: var(--ch-step-1, 1.125rem);
+  --text-xl: var(--ch-step-2, 1.25rem);
+  --text-2xl: var(--ch-step-3, 1.5rem);
+  --text-3xl: var(--ch-step-4, 1.875rem);
+  --text-4xl: var(--ch-step-5, 2.25rem);
+  --text-5xl: var(--ch-step-6, 3rem);
+  /*
+   * RFC-0023 §3: corners and spacing follow the `radius` and `density` settings
+   * (`--ch-radius-*`, `--ch-space-unit`); the fallbacks are Tailwind's own values.
+   */
+  --radius: var(--ch-radius-s, 0.25rem);
+  --radius-sm: var(--ch-radius-s, 0.25rem);
+  --radius-md: var(--ch-radius-m, 0.375rem);
+  --radius-lg: var(--ch-radius-l, 0.5rem);
+  --spacing: var(--ch-space-unit, 0.25rem);
+}
+
+/* Design settings (src/settings.ts, RFC-0017): CSS variables and data-ch-* attributes on <html>. */
+.ch-body {
+  background: var(--ch-color-surface);
+  color: var(--ch-color-text);
+  /* Full-width bands (RFC-0020) use 100vw, which counts a classic scrollbar: never scroll sideways. */
+  overflow-x: clip;
+}
+[data-ch-font="serif"] .ch-body {
+  font-family: ui-serif, Georgia, Cambria, "Times New Roman", serif;
+}
+[data-ch-font="humanist"] .ch-body {
+  font-family:
+    Seravek, "Gill Sans Nova", Ubuntu, Calibri, "DejaVu Sans", source-sans-pro, sans-serif;
+}
+[data-ch-font="mono"] .ch-body {
+  font-family: ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, Consolas, monospace;
+}
+/*
+ * Font pairings (RFC-0023 §2): the families come from fonts.css and load only when used; each is
+ * followed by its metric-matched fallback (font-fallbacks.css), so the swap does not move the
+ * text. They win
+ * over the older typeface setting; `system` keeps it.
+ */
+[data-ch-type-pairing="editorial"] {
+  --ch-font-display: "Fraunces Variable", "Fraunces Variable Fallback", ui-serif, Georgia, serif;
+  --ch-font-text: "Inter Variable", "Inter Variable Fallback", ui-sans-serif, system-ui, sans-serif;
+}
+[data-ch-type-pairing="modern"] {
+  --ch-font-display:
+    "Space Grotesk Variable", "Space Grotesk Variable Fallback", ui-sans-serif, system-ui,
+    sans-serif;
+  --ch-font-text: "Inter Variable", "Inter Variable Fallback", ui-sans-serif, system-ui, sans-serif;
+}
+[data-ch-type-pairing="humanist"] {
+  --ch-font-display:
+    "Source Sans 3 Variable", "Source Sans 3 Variable Fallback", ui-sans-serif, system-ui,
+    sans-serif;
+  --ch-font-text:
+    "Source Sans 3 Variable", "Source Sans 3 Variable Fallback", ui-sans-serif, system-ui,
+    sans-serif;
+}
+[data-ch-type-pairing="technical"] {
+  --ch-font-display:
+    "JetBrains Mono Variable", "JetBrains Mono Variable Fallback", ui-monospace, monospace;
+  --ch-font-text: "Inter Variable", "Inter Variable Fallback", ui-sans-serif, system-ui, sans-serif;
+  --ch-font-code:
+    "JetBrains Mono Variable", "JetBrains Mono Variable Fallback", ui-monospace, monospace;
+}
+[data-ch-type-pairing="classic"] {
+  --ch-font-display:
+    "Source Serif 4 Variable", "Source Serif 4 Variable Fallback", ui-serif, Georgia, serif;
+  --ch-font-text:
+    "Source Serif 4 Variable", "Source Serif 4 Variable Fallback", ui-serif, Georgia, serif;
+}
+[data-ch-type-pairing]:not([data-ch-type-pairing="system"]) .ch-body {
+  font-family: var(--ch-font-text);
+}
+[data-ch-type-pairing]:not([data-ch-type-pairing="system"]) .ch-body :is(h1, h2, h3, h4) {
+  font-family: var(--ch-font-display);
+}
+[data-ch-type-pairing="technical"] .ch-body :is(code, pre, kbd) {
+  font-family: var(--ch-font-code);
+}
+/* Headings without a lonely last word, paragraphs without orphans, where supported. */
+.ch-body :is(h1, h2, h3, h4) {
+  text-wrap: balance;
+}
+.ch-body :is(p, li, blockquote) {
+  text-wrap: pretty;
+}
+.ch-richtext a {
+  color: var(--ch-color-link);
+}
diff --git a/packages/cli/test/fixtures/theme-v0.4.0/src/styles/font-fallbacks.css b/packages/cli/test/fixtures/theme-v0.4.0/src/styles/font-fallbacks.css
new file mode 100644
index 00000000..495c7e8a
--- /dev/null
+++ b/packages/cli/test/fixtures/theme-v0.4.0/src/styles/font-fallbacks.css
@@ -0,0 +1,53 @@
+/*
+ * Generated by scripts/font-fallbacks.ts: do not edit. Metric-matched fallback faces for the
+ * pairings' web fonts (tokens.css lists each right after its web font), so the swap to the web
+ * font does not move the text.
+ */
+@font-face {
+  font-family: "Fraunces Variable Fallback";
+  src: local("Times New Roman"), local("TimesNewRomanPSMT");
+  size-adjust: 113.62%;
+  ascent-override: 86.08%;
+  descent-override: 22.44%;
+  line-gap-override: 0.00%;
+}
+@font-face {
+  font-family: "Inter Variable Fallback";
+  src: local("Arial"), local("ArialMT");
+  size-adjust: 107.12%;
+  ascent-override: 90.44%;
+  descent-override: 22.52%;
+  line-gap-override: 0.00%;
+}
+@font-face {
+  font-family: "Space Grotesk Variable Fallback";
+  src: local("Arial"), local("ArialMT");
+  size-adjust: 109.47%;
+  ascent-override: 89.89%;
+  descent-override: 26.67%;
+  line-gap-override: 0.00%;
+}
+@font-face {
+  font-family: "Source Sans 3 Variable Fallback";
+  src: local("Arial"), local("ArialMT");
+  size-adjust: 92.42%;
+  ascent-override: 110.80%;
+  descent-override: 43.28%;
+  line-gap-override: 0.00%;
+}
+@font-face {
+  font-family: "Source Serif 4 Variable Fallback";
+  src: local("Times New Roman"), local("TimesNewRomanPSMT");
+  size-adjust: 117.91%;
+  ascent-override: 87.87%;
+  descent-override: 28.41%;
+  line-gap-override: 0.00%;
+}
+@font-face {
+  font-family: "JetBrains Mono Variable Fallback";
+  src: local("Courier New"), local("CourierNewPSMT");
+  size-adjust: 99.98%;
+  ascent-override: 102.02%;
+  descent-override: 30.00%;
+  line-gap-override: 0.00%;
+}
diff --git a/packages/cli/test/fixtures/theme-v0.4.0/src/styles/fonts.css b/packages/cli/test/fixtures/theme-v0.4.0/src/styles/fonts.css
new file mode 100644
index 00000000..3317914b
--- /dev/null
+++ b/packages/cli/test/fixtures/theme-v0.4.0/src/styles/fonts.css
@@ -0,0 +1,113 @@
+/*
+ * Self-hosted variable fonts for the type pairings (RFC-0023 §2): upright, weight axis, latin and
+ * latin-ext (Turkish) subsets from Fontsource 5.3, OFL-1.1 (licences beside the files). A browser
+ * downloads a file only when a page uses its family and characters.
+ */
+@font-face {
+  font-family: "Fraunces Variable";
+  font-style: normal;
+  font-display: swap;
+  font-weight: 100 900;
+  src: url(/fonts/v1/fraunces-latin-ext-wght-normal.woff2) format("woff2-variations");
+  unicode-range:
+    U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+@font-face {
+  font-family: "Fraunces Variable";
+  font-style: normal;
+  font-display: swap;
+  font-weight: 100 900;
+  src: url(/fonts/v1/fraunces-latin-wght-normal.woff2) format("woff2-variations");
+  unicode-range:
+    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+@font-face {
+  font-family: "Inter Variable";
+  font-style: normal;
+  font-display: swap;
+  font-weight: 100 900;
+  src: url(/fonts/v1/inter-latin-ext-wght-normal.woff2) format("woff2-variations");
+  unicode-range:
+    U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+@font-face {
+  font-family: "Inter Variable";
+  font-style: normal;
+  font-display: swap;
+  font-weight: 100 900;
+  src: url(/fonts/v1/inter-latin-wght-normal.woff2) format("woff2-variations");
+  unicode-range:
+    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+@font-face {
+  font-family: "JetBrains Mono Variable";
+  font-style: normal;
+  font-display: swap;
+  font-weight: 100 800;
+  src: url(/fonts/v1/jetbrains-mono-latin-ext-wght-normal.woff2) format("woff2-variations");
+  unicode-range:
+    U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+@font-face {
+  font-family: "JetBrains Mono Variable";
+  font-style: normal;
+  font-display: swap;
+  font-weight: 100 800;
+  src: url(/fonts/v1/jetbrains-mono-latin-wght-normal.woff2) format("woff2-variations");
+  unicode-range:
+    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+@font-face {
+  font-family: "Source Sans 3 Variable";
+  font-style: normal;
+  font-display: swap;
+  font-weight: 200 900;
+  src: url(/fonts/v1/source-sans-3-latin-ext-wght-normal.woff2) format("woff2-variations");
+  unicode-range:
+    U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+@font-face {
+  font-family: "Source Sans 3 Variable";
+  font-style: normal;
+  font-display: swap;
+  font-weight: 200 900;
+  src: url(/fonts/v1/source-sans-3-latin-wght-normal.woff2) format("woff2-variations");
+  unicode-range:
+    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+@font-face {
+  font-family: "Source Serif 4 Variable";
+  font-style: normal;
+  font-display: swap;
+  font-weight: 200 900;
+  src: url(/fonts/v1/source-serif-4-latin-ext-wght-normal.woff2) format("woff2-variations");
+  unicode-range:
+    U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+@font-face {
+  font-family: "Source Serif 4 Variable";
+  font-style: normal;
+  font-display: swap;
+  font-weight: 200 900;
+  src: url(/fonts/v1/source-serif-4-latin-wght-normal.woff2) format("woff2-variations");
+  unicode-range:
+    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+@font-face {
+  font-family: "Space Grotesk Variable";
+  font-style: normal;
+  font-display: swap;
+  font-weight: 300 700;
+  src: url(/fonts/v1/space-grotesk-latin-ext-wght-normal.woff2) format("woff2-variations");
+  unicode-range:
+    U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+@font-face {
+  font-family: "Space Grotesk Variable";
+  font-style: normal;
+  font-display: swap;
+  font-weight: 300 700;
+  src: url(/fonts/v1/space-grotesk-latin-wght-normal.woff2) format("woff2-variations");
+  unicode-range:
+    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
diff --git a/packages/cli/test/fixtures/theme-v0.4.0/src/styles/global.css b/packages/cli/test/fixtures/theme-v0.4.0/src/styles/global.css
new file mode 100644
index 00000000..7717714a
--- /dev/null
+++ b/packages/cli/test/fixtures/theme-v0.4.0/src/styles/global.css
@@ -0,0 +1,31 @@
+/* Scan `src/` only: automatic detection may walk up the file system (docs/design/starter-references.md §6). */
+@import "tailwindcss" source("..");
+@import "./fonts.css";
+@import "./font-fallbacks.css";
+
+/*
+ * One file per feature (docs/engineering/code-structure.md §8), in cascade order. Unlayered on
+ * purpose: `layer(...)` would let utilities beat component classes, and later files override
+ * earlier ones at equal specificity (reduced motion after reveals, the transparent header after
+ * chrome, forced colors after icons). CSS needs every @import first, so `@theme` lives in tokens.
+ */
+@import "./features/tokens.css";
+@import "./features/prose.css";
+@import "./features/blocks.css";
+@import "./features/article.css";
+@import "./features/comments.css";
+@import "./features/surfaces.css";
+@import "./features/surface-media.css";
+@import "./features/live-surfaces.css";
+@import "./features/motion.css";
+@import "./features/motion-scroll.css";
+@import "./features/motion-effects.css";
+@import "./features/ambient.css";
+@import "./features/search.css";
+@import "./features/search-dialog.css";
+@import "./features/chrome.css";
+@import "./features/chrome-menus.css";
+@import "./features/overlays.css";
+@import "./features/icons.css";
+@import "./features/carousel.css";
+@import "./features/languages.css";
diff --git a/packages/cli/test/fixtures/theme-v0.4.0/src/theme.ts b/packages/cli/test/fixtures/theme-v0.4.0/src/theme.ts
new file mode 100644
index 00000000..6425d6d7
--- /dev/null
+++ b/packages/cli/test/fixtures/theme-v0.4.0/src/theme.ts
@@ -0,0 +1,49 @@
+/**
+ * Theme override point: map a section kind to your own component, e.g.
+ *   import MyHero from "./components/MyHero.astro";
+ *   export const components = { hero: MyHero };
+ */
+import type {
+  BlockComponents,
+  SectionComponents,
+} from "@cloudhal/astro-renderer/components/Sections.astro";
+import type { CollectionIndexHook } from "@cloudhal/astro-renderer/navigation";
+import Testimonial from "./components/blocks/Testimonial.astro";
+import LatestPosts from "./components/LatestPosts.astro";
+
+/** The article lists on pages draw as cards with covers and reading time. */
+export const components: SectionComponents = { contentList: LatestPosts };
+
+/**
+ * Block types (RFC-0015) rendered by this theme's own components, by type name: the types this
+ * theme declares in `src/blocks.ts`, and any built-in it restyles, e.g.
+ *   import Callout from "./components/Callout.astro";
+ *   export const blocks = { callout: Callout, testimonial: Testimonial };
+ * Each gets `{ props, content, contentHtml, media }` (and `section` on pages), in page sections
+ * and inside article and rich-text bodies. Types not listed use Cloudhal's built-in markup.
+ */
+export const blocks: BlockComponents = { testimonial: Testimonial };
+
+/** Entries per category/tag archive page (`/category/<slug>/page/<n>`). */
+export const ARCHIVE_PAGE_SIZE = 20;
+
+/**
+ * Sites without a `primary` menu get a derived header: their top-level pages, then (with this
+ * flag) the top-level categories (by `position`, then name) whose archive is served (active,
+ * public, with posts). Set to `false` for a pages-only header. A `primary` menu replaces it.
+ */
+export const NAV_CATEGORIES = true;
+
+/**
+ * Where this theme serves a collection's index, for menu items that link to a collection
+ * (RFC-0003 §7.1). Return `undefined` to use the default: a published page at the collection's
+ * permalink prefix (`/docs` for `/docs/{slug}`, RFC-0038 §5), else the first published page that
+ * lists the collection (the blog's home page lists `posts`); without one the item is hidden.
+ */
+export const collectionIndex: CollectionIndexHook = () => undefined;
+
+/** "Related posts" under an article: entries sharing its primary category or tags (0 hides it). */
+export const RELATED_POSTS = 3;
+
+// The few words the theme itself prints, per language, and the site's own wording over them.
+export { strings, type ThemeStrings } from "./strings.ts";
diff --git a/packages/cli/test/old-theme-compat.test.ts b/packages/cli/test/old-theme-compat.test.ts
index 86e1485c..cffffb26 100644
--- a/packages/cli/test/old-theme-compat.test.ts
+++ b/packages/cli/test/old-theme-compat.test.ts
@@ -3,20 +3,22 @@
  * so a site's theme keeps calling `@cloudhal/astro-renderer` and `@cloudhal/core-ts` as they
  * were when it was created. Each frozen copy in `fixtures/theme-v*` (never updated, see its
  * README) is built with today's packages: in 0.3.12 `entryPath(entry)` changed shape and every
- * pre-0.3.11 theme served empty pages.
+ * pre-0.3.11 theme served empty pages. The site also has a collection with typed fields
+ * (RFC-0041): themes from before fields render its entries and simply do not show the values.
  */
 import { spawn } from "node:child_process";
 import { cp, mkdtemp, readdir, readFile, rm, symlink } from "node:fs/promises";
 import os from "node:os";
 import path from "node:path";
 import { fileURLToPath } from "node:url";
+import { openLocalStore } from "@cloudhal/core-ts/local";
 import { afterAll, describe, expect, it } from "vitest";
-import { init } from "../src/index.ts";
+import { init, readProjectConfig, snapshot } from "../src/index.ts";
 
 const here = path.dirname(fileURLToPath(import.meta.url));
 const STARTER_NODE_MODULES = path.resolve(here, "../../../starters/blog/node_modules");
 const BIN = path.resolve(here, "../bin/cloudhal.ts");
-const FROZEN = ["v0.3.10"];
+const FROZEN = ["v0.3.10", "v0.4.0"];
 const TITLE = "Old Theme Site";
 
 /** Runs `cloudhal build` in its own process and returns its exit code and output. */
@@ -41,6 +43,54 @@ async function htmlFiles(dir: string): Promise<string[]> {
     .map((e) => path.join(e.parentPath, e.name));
 }
 
+/** RFC-0041: an `events` collection with typed fields and one published entry with values. */
+async function addTypedFields(projectDir: string): Promise<void> {
+  const cfg = await readProjectConfig(projectDir);
+  const local = await openLocalStore(path.join(projectDir, cfg.dataDir));
+  try {
+    const site = await local.store.getSite(cfg.siteId);
+    if (!site) throw new Error("no site");
+    // the seed's required category applies to every collection: reuse the seeded post's terms
+    const [hello] = await local.store.listContentEntries(cfg.siteId, "posts");
+    await local.store.updateSite({
+      ...site,
+      collections: {
+        ...site.collections,
+        events: {
+          fields: [
+            { key: "venue", type: "text", labels: { en: { label: "Venue" } }, localized: true },
+            {
+              key: "agenda",
+              type: "richText",
+              labels: { en: { label: "Agenda" } },
+              localized: true,
+            },
+          ],
+        },
+      },
+    });
+    await local.store.createContentEntry({
+      siteId: cfg.siteId,
+      collection: "events",
+      slug: "launch",
+      locale: site.defaultLocale,
+      status: "published",
+      title: "Launch party",
+      body: {
+        format: "markdown",
+        value: "Join us for the launch of the new site, everyone is welcome.",
+      },
+      fields: { venue: "Kadıköy Hall", agenda: "- Talks\n- Lunch" },
+      tags: [],
+      ...(hello?.terms ? { terms: hello.terms } : {}),
+      author: { kind: "human", id: "user_01HZX8K3Q9CD", name: "Halil" },
+    } as never);
+  } finally {
+    await local.close();
+  }
+  await snapshot({ projectDir, label: "typed fields", publish: true });
+}
+
 /** The visible text of a page's <main> ("" without one). */
 const mainText = (html: string) =>
   (html.match(/<main[^>]*>([\s\S]*)<\/main>/)?.[1] ?? "")
@@ -60,6 +110,7 @@ describe.each(FROZEN)("a theme copied at %s still builds with today's packages",
     const projectDir = path.join(tmp, "site");
     await init({ dir: projectDir, name: TITLE });
     await symlink(STARTER_NODE_MODULES, path.join(projectDir, "node_modules"), "dir");
+    await addTypedFields(projectDir);
     await rm(path.join(projectDir, "src"), { recursive: true });
     await cp(path.join(here, "fixtures", `theme-${version}`, "src"), path.join(projectDir, "src"), {
       recursive: true,
@@ -75,6 +126,7 @@ describe.each(FROZEN)("a theme copied at %s still builds with today's packages",
       home: await read("index.html"),
       article: await read("posts", "hello-world", "index.html"),
       archive: await read("category", "news", "index.html"),
+      event: await read("events", "launch", "index.html"),
     };
     for (const [name, html] of Object.entries(pages)) {
       expect(html, name).toContain(TITLE);
@@ -84,6 +136,8 @@ describe.each(FROZEN)("a theme copied at %s still builds with today's packages",
     expect(pages.home).toContain('href="/posts/hello-world"');
     expect(pages.archive).toContain('href="/posts/hello-world"');
     expect(pages.article).toContain("<title>Hello, world · ");
+    expect(pages.event).toContain("<title>Launch party · ");
+    expect(pages.event).not.toContain("Kadıköy Hall"); // old themes do not show field values
 
     // No page of the build is empty (a theme that throws mid-stream leaves a bare document).
     const files = await htmlFiles(dist);
diff --git a/packages/core-ts/src/fields/format.ts b/packages/core-ts/src/fields/format.ts
new file mode 100644
index 00000000..5f1faf41
--- /dev/null
+++ b/packages/core-ts/src/fields/format.ts
@@ -0,0 +1,135 @@
+/**
+ * RFC-0041 §9: a field value as plain text in a reader's language. Worker-safe and Temporal-free
+ * (`Intl` only, formatters cached). Themes render the result as text (always escaped); rich text,
+ * links and images as markup come from the renderer's `entryFields`, which uses this for the rest.
+ */
+import type { FieldDefinition } from "@cloudhal/core-contracts";
+import { markdownToPlain } from "./conversions.ts";
+import { optionLabel } from "./types.ts";
+import { isCalendarDay, isKnownTimeZone } from "./value-checks.ts";
+
+export interface FormatFieldOptions {
+  /** The reader's language (BCP 47); an unknown tag formats as `en`. */
+  locale: string;
+  /** Option labels fall back to this language, then any (default: `locale`). */
+  defaultLocale?: string | undefined;
+  /** `datetime` values show in this zone (default: the value's own zone, RFC-0008 §9.1). */
+  timeZone?: string | undefined;
+  /** The words for `boolean` values (default: English "Yes" / "No"). */
+  words?: { yes: string; no: string } | undefined;
+}
+
+const cache = new Map<string, unknown>();
+
+/** One cached `Intl` formatter per kind, locale and options; an unknown locale falls back to `en`. */
+function cached<T>(key: string, make: (locale: string) => T, locale: string): T {
+  const id = `${key}|${locale}`;
+  let f = cache.get(id) as T | undefined;
+  if (f === undefined) {
+    try {
+      f = make(locale);
+    } catch {
+      f = make("en");
+    }
+    if (cache.size > 500) cache.clear();
+    cache.set(id, f);
+  }
+  return f;
+}
+
+const numberFormat = (locale: string) =>
+  cached("n", (l) => new Intl.NumberFormat(l, { maximumFractionDigits: 20 }), locale);
+
+const dayFormat = (locale: string) =>
+  cached(
+    "d",
+    (l) =>
+      new Intl.DateTimeFormat(l, {
+        year: "numeric",
+        month: "long",
+        day: "numeric",
+        timeZone: "UTC",
+      }),
+    locale,
+  );
+
+const instantFormat = (locale: string, zone: string) =>
+  cached(
+    `t:${zone}`,
+    (l) =>
+      new Intl.DateTimeFormat(l, {
+        year: "numeric",
+        month: "long",
+        day: "numeric",
+        hour: "numeric",
+        minute: "2-digit",
+        timeZone: zone,
+        timeZoneName: "short",
+      }),
+    locale,
+  );
+
+const listFormat = (locale: string) =>
+  cached("l", (l) => new Intl.ListFormat(l, { type: "conjunction", style: "long" }), locale);
+
+function formatDate(value: unknown, locale: string): string {
+  if (typeof value !== "string" || !isCalendarDay(value)) return "";
+  const [y, m, d] = value.split("-").map(Number) as [number, number, number];
+  return dayFormat(locale).format(Date.UTC(y, m - 1, d));
+}
+
+function formatInstant(value: unknown, locale: string, zone: string | undefined): string {
+  if (typeof value !== "object" || value === null) return "";
+  const { at, timeZone } = value as { at?: unknown; timeZone?: unknown };
+  const ms = typeof at === "string" ? Date.parse(at) : Number.NaN;
+  if (Number.isNaN(ms)) return "";
+  const own = typeof timeZone === "string" && isKnownTimeZone(timeZone) ? timeZone : "UTC";
+  const shown = zone && isKnownTimeZone(zone) ? zone : own;
+  return instantFormat(locale, shown).format(ms);
+}
+
+function formatSelect(value: unknown, def: FieldDefinition, o: FormatFieldOptions): string {
+  const values = Array.isArray(value) ? value : [value];
+  const labels = values
+    .filter((v): v is string => typeof v === "string" && v !== "")
+    .map((v) => optionLabel(def, v, o.locale, o.defaultLocale ?? o.locale));
+  return labels.length > 1 ? listFormat(o.locale).format(labels) : (labels[0] ?? "");
+}
+
+/**
+ * A resolved value (`resolveFields(...)[key].value`) as text: text as stored; rich text as its
+ * plain words (lines kept); numbers, dates and instants by `Intl` in `locale` (an instant in its own
+ * zone unless `timeZone` says otherwise); `boolean` as `words`; a select as its option labels (a
+ * list for `multiple`); a URL as written. Images and absent or unreadable values give "".
+ */
+export function formatFieldValue(
+  value: unknown,
+  def: FieldDefinition,
+  options: FormatFieldOptions,
+): string {
+  if (value === undefined || value === null) return "";
+  switch (def.type) {
+    case "text":
+    case "url":
+      return typeof value === "string" ? value : "";
+    case "richText":
+      return typeof value === "string" ? markdownToPlain(value, true) : "";
+    case "number":
+      return typeof value === "number" && Number.isFinite(value)
+        ? numberFormat(options.locale).format(value)
+        : "";
+    case "boolean": {
+      if (typeof value !== "boolean") return "";
+      const words = options.words ?? { yes: "Yes", no: "No" };
+      return value ? words.yes : words.no;
+    }
+    case "date":
+      return formatDate(value, options.locale);
+    case "datetime":
+      return formatInstant(value, options.locale, options.timeZone);
+    case "select":
+      return formatSelect(value, def, options);
+    default:
+      return "";
+  }
+}
diff --git a/packages/core-ts/src/fields/index.ts b/packages/core-ts/src/fields/index.ts
index 9189a711..47e25ed0 100644
--- a/packages/core-ts/src/fields/index.ts
+++ b/packages/core-ts/src/fields/index.ts
@@ -20,6 +20,7 @@ export {
   type FieldDefinitionChange,
   fieldDefinitionChanges,
 } from "./definitions.ts";
+export { type FormatFieldOptions, formatFieldValue } from "./format.ts";
 export {
   fieldJsonSchema,
   fieldsJsonSchema,
diff --git a/packages/core-ts/test/fields-format.test.ts b/packages/core-ts/test/fields-format.test.ts
new file mode 100644
index 00000000..157b4e68
--- /dev/null
+++ b/packages/core-ts/test/fields-format.test.ts
@@ -0,0 +1,64 @@
+/** RFC-0041 §9: `formatFieldValue`, a value as plain text in a reader's language. */
+import type { FieldDefinition } from "@cloudhal/core-contracts";
+import { describe, expect, it } from "vitest";
+import { formatFieldValue } from "../src/fields/index.ts";
+import { EVENT_FIELDS, GOOD_VALUES } from "./fields-fixture.ts";
+
+const def = (key: string) => EVENT_FIELDS.find((d) => d.key === key) as FieldDefinition;
+const en = { locale: "en", defaultLocale: "en" };
+const fmt = (key: string, value: unknown = GOOD_VALUES[key], o: object = en) =>
+  formatFieldValue(value, def(key), { ...en, ...o });
+
+describe("formatFieldValue", () => {
+  it("formats every type in English", () => {
+    expect(fmt("venue")).toBe("Kadıköy Hall");
+    expect(fmt("notes")).toBe("Line one\nLine two");
+    expect(fmt("agenda")).toBe("Agenda\nTalks\nLunch");
+    expect(fmt("price")).toBe("12.5");
+    expect(fmt("seats", 12000)).toBe("12,000");
+    expect(fmt("online")).toBe("No");
+    expect(fmt("online", true)).toBe("Yes");
+    expect(fmt("deadline")).toBe("February 28, 2026");
+    expect(fmt("startsAt")).toMatch(/^November 5, 2026(,| at) 7:30\sPM GMT\+3$/);
+    expect(fmt("ticketUrl")).toBe("https://example.com/tickets");
+    expect(fmt("poster")).toBe("");
+    expect(fmt("format")).toBe("Talk and Workshop");
+    expect(fmt("level")).toBe("Başlangıç"); // no English label: any language
+    expect(fmt("level", "expert")).toBe("Expert");
+  });
+
+  it("follows the reader's language: numbers, days, lists, option labels, boolean words", () => {
+    const tr = { locale: "tr", words: { yes: "Evet", no: "Hayır" } };
+    expect(fmt("price", 1234.5, tr)).toBe("1.234,5");
+    expect(fmt("deadline", undefined, tr)).toBe("28 Şubat 2026");
+    expect(fmt("format", undefined, tr)).toBe("Konuşma ve Workshop");
+    expect(fmt("level", undefined, tr)).toBe("Başlangıç");
+    expect(fmt("online", true, tr)).toBe("Evet");
+  });
+
+  it("shows an instant in its own zone, or the zone asked for", () => {
+    expect(fmt("startsAt", undefined, { timeZone: "UTC" })).toMatch(/4:30\sPM UTC$/);
+    expect(fmt("startsAt", { at: "2026-11-05T16:30:00Z", timeZone: "Nowhere/Else" })).toMatch(
+      /4:30\sPM UTC$/,
+    );
+  });
+
+  it("a date never shifts by a day, whatever the zone", () => {
+    expect(fmt("deadline", "2026-01-01")).toBe("January 1, 2026");
+  });
+
+  it("gives an empty string for absent, unreadable and wrong-typed values", () => {
+    expect(formatFieldValue(undefined, def("venue"), en)).toBe("");
+    expect(fmt("venue", null)).toBe("");
+    expect(fmt("venue", 3)).toBe("");
+    expect(fmt("price", "12")).toBe("");
+    expect(fmt("price", Number.NaN)).toBe("");
+    expect(fmt("deadline", "2026-02-30")).toBe("");
+    expect(fmt("startsAt", { at: "soon", timeZone: "UTC" })).toBe("");
+    expect(fmt("online", "yes")).toBe("");
+  });
+
+  it("an unknown locale formats as English", () => {
+    expect(fmt("price", 1234.5, { locale: "not a locale!" })).toBe("1,234.5");
+  });
+});
diff --git a/starters/blog/src/components/Article.astro b/starters/blog/src/components/Article.astro
index 40b15cd8..3c0f1e68 100644
--- a/starters/blog/src/components/Article.astro
+++ b/starters/blog/src/components/Article.astro
@@ -3,9 +3,11 @@
  * An article (RFC-0018 §3, the article view): kicker (the primary category), title, dek, byline
  * (author, published, updated, reading time), cover, an "On this page" table of contents for
  * longer pieces (headings carry ids; no JavaScript), then the body with the theme's own blocks and
- * the corrections, newest first (RFC-0019 §2; the latest one is the "Updated" date).
+ * the corrections, newest first (RFC-0019 §2; the latest one is the "Updated" date). Collections
+ * with typed fields (RFC-0041 §9) show their values as a "Details" list under the cover.
  */
-import { Body } from "@cloudhal/astro-renderer/components";
+import { Body, EntryFields } from "@cloudhal/astro-renderer/components";
+import type { RenderedFields } from "@cloudhal/astro-renderer/fields";
 import { articleCorrections, articleOutline } from "@cloudhal/astro-renderer/kit";
 import { entryArticleParts } from "@cloudhal/astro-renderer/markdown";
 import type { MediaContext } from "@cloudhal/astro-renderer/media";
@@ -22,8 +24,10 @@ interface Props {
   media?: MediaContext;
   blocks?: Record<string, unknown>;
   blockTypes?: readonly BlockType[];
+  /** The entry's typed fields (`source.entryFields`); absent or empty draws nothing. */
+  fields?: RenderedFields;
 }
-const { entry, terms, locale, t, media, blocks, blockTypes } = Astro.props;
+const { entry, terms, locale, t, media, blocks, blockTypes, fields } = Astro.props;
 const parts = entryArticleParts(entry, locale, media);
 const outline = articleOutline(entry);
 const date = (iso: string) =>
@@ -73,6 +77,7 @@ const author =
     </p>
   </header>
   <Fragment set:html={parts.cover} />
+  {fields && <EntryFields fields={fields} label={t.details} />}
   {outline.toc.length >= 3 && (
     <details class="ch-toc" open>
       <summary>{t.onThisPage}</summary>
diff --git a/starters/blog/src/pages/[...path].astro b/starters/blog/src/pages/[...path].astro
index 4fd8c18c..198ebff9 100644
--- a/starters/blog/src/pages/[...path].astro
+++ b/starters/blog/src/pages/[...path].astro
@@ -10,6 +10,7 @@ import {
 import { commentsJsonLd, loadComments } from "@cloudhal/astro-renderer/comments";
 import { Comments, Sections } from "@cloudhal/astro-renderer/components";
 import { EMBED_HEADER, usesEmbeds } from "@cloudhal/astro-renderer/embeds";
+import type { RenderedFields } from "@cloudhal/astro-renderer/fields";
 import { gateNotice } from "@cloudhal/astro-renderer/gates";
 import {
   alternatesFor,
@@ -256,6 +257,7 @@ let entries: Record<string, ContentEntry[]> = {};
 let surfaces: Awaited<ReturnType<typeof loadSurfaceSources>> = {};
 let terms = entryTaxonomy(undefined, { tags: [] });
 let related: ContentEntry[] = [];
+let fields: RenderedFields | undefined;
 if (route.kind === "page") {
   tags.push(nodeCacheTag(route.page.id));
   // Lists of the site's entries change with any entry: the site's list tag covers them.
@@ -287,6 +289,11 @@ if (route.kind === "page") {
 } else if (route.kind === "entry") {
   terms = entryTaxonomy(index, route.entry);
   related = relatedEntries(route.entry, all, index, RELATED_POSTS);
+  // RFC-0041 §9: typed fields in the entry's language; values read from the original tag it too.
+  fields = await source.entryFields?.(route.entry, { media, words: { yes: t.yes, no: t.no } });
+  const group = route.entry.translation?.group;
+  if (group && Object.values(fields ?? {}).some((f) => f.fromOriginal))
+    tags.push(nodeCacheTag(group));
   tags.push(
     nodeCacheTag(route.entry.id),
     // the related posts it links to: a retitled or removed one purges this page too
@@ -448,7 +455,7 @@ const searchForm = searchAvailable(config, source)
           { name: route.entry.title },
         ]}
       />
-      <Article entry={route.entry} terms={terms} locale={locale} t={t} media={media} blocks={blocks} blockTypes={blockTypes} />
+      <Article entry={route.entry} terms={terms} locale={locale} t={t} media={media} blocks={blocks} blockTypes={blockTypes} fields={fields} />
       <PostTerms taxonomy={terms} locale={locale} />
       <RelatedPosts title={t.related} entries={related} locale={locale} media={media} />
       <Comments view={comments} />
diff --git a/starters/blog/src/strings.ts b/starters/blog/src/strings.ts
index 1cb24c93..0a9d60bb 100644
--- a/starters/blog/src/strings.ts
+++ b/starters/blog/src/strings.ts
@@ -21,6 +21,10 @@ const STRINGS = {
     updated: (when: string) => `Updated ${when}`,
     minRead: (n: number) => `${n} min read`,
     onThisPage: "On this page",
+    /** RFC-0041 §9: the typed fields list on an article, and the words of yes/no fields. */
+    details: "Details",
+    yes: "Yes",
+    no: "No",
     /** RFC-0019 §2: the corrections list at the end of an article, and the note under the byline. */
     corrections: "Corrections and updates",
     correctionKind: { correction: "Correction", clarification: "Clarification", update: "Update" },
@@ -102,6 +106,9 @@ const STRINGS = {
     updated: (when: string) => `Güncellendi: ${when}`,
     minRead: (n: number) => `${n} dk okuma`,
     onThisPage: "Bu sayfada",
+    details: "Ayrıntılar",
+    yes: "Evet",
+    no: "Hayır",
     corrections: "Düzeltmeler ve güncellemeler",
     correctionKind: { correction: "Düzeltme", clarification: "Açıklama", update: "Güncelleme" },
     appended: (kind: string) => `${kind} eklendi`,
@@ -178,6 +185,9 @@ const STRINGS = {
     updated: (when: string) => `${when} 更新`,
     minRead: (n: number) => `${n} 分で読めます`,
     onThisPage: "このページの内容",
+    details: "詳細",
+    yes: "はい",
+    no: "いいえ",
     corrections: "訂正と更新",
     correctionKind: { correction: "訂正", clarification: "補足", update: "更新" },
     appended: (kind: string) => `${kind}を追記`,